/* =========================================================
   Commerce — Base App CSS
   Version 1.0 — April 2026

   Purpose:
   Shared starter CSS for commerce, resale, and small-business
   Burk Tools apps. Based on the burktools-base.css pattern.

   Default skin: Indigo Peach Trading Company
   Colors extracted from IndigoPeachTrading logo:
     Slate blue  #2F495C  (primary)
     Peach       #E49563  (accent)
     Light slate #D4E3EE  (tint)

   Usage:
   - Copy this into a repo as styles.css
   - To rebrand: create skins/[brand].css and load it BEFORE
     this file. The skin overrides --ip-* tokens only.
   - Add app-specific styles BELOW the base layer.
   - Do not modify the base layer above the separator.
   ========================================================= */

/* -------------------------
   1. Skin Tokens
   Override these in a skin file to rebrand.
   All component styles reference only --ip-* variables.
   ------------------------- */
:root {
  /* Brand colors */
  --ip-primary:           #2F495C;   /* slate blue — headers, text, primary buttons */
  --ip-primary-light:     #EBF1F6;   /* tinted bg — hover states, subtle fills */
  --ip-primary-dark:      #1E3040;   /* pressed states, strong emphasis */
  --ip-accent:            #E49563;   /* peach — CTAs, active states, highlights */
  --ip-accent-light:      #FDF3EC;   /* peach tint — badge backgrounds, hover fills */
  --ip-accent-dark:       #C4733F;   /* pressed accent, dark mode accent text */

  /* Surfaces */
  --ip-bg:                #F8F7F5;   /* page background — warm off-white */
  --ip-surface:           #FFFFFF;   /* card / panel background */
  --ip-surface-alt:       #F3F1EF;   /* alternate rows, input backgrounds */
  --ip-border:            #E2DDD8;   /* default border */
  --ip-border-strong:     #C8C2BB;   /* emphasized border, dividers */

  /* Text */
  --ip-text:              #1C1714;   /* primary body text */
  --ip-text-secondary:    #6B635C;   /* labels, captions, muted text */
  --ip-text-on-primary:   #FFFFFF;   /* text on primary-colored surfaces */
  --ip-text-on-accent:    #FFFFFF;   /* text on accent-colored surfaces */

  /* Status */
  --ip-success-bg:        #ECFAF2;
  --ip-success-text:      #1A6B3C;
  --ip-success-border:    #C3E9D4;

  --ip-warning-bg:        #FFF8EC;
  --ip-warning-text:      #7A5200;
  --ip-warning-border:    #F5DFA0;

  --ip-error-bg:          #FEF2F2;
  --ip-error-text:        #991B1B;
  --ip-error-border:      #FECACA;

  --ip-info-bg:           #EBF1F6;
  --ip-info-text:         #1E3040;
  --ip-info-border:       #B8D0E3;

  /* Platform brand colors — fixed, not skinnable */
  --ip-ebay:              #E53238;
  --ip-depop:             #FF2300;
  --ip-poshmark:          #CF1853;
  --ip-mercari:           #007AFF;

  /* Typography */
  --ip-font-display:      'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --ip-font-body:         'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --ip-font-mono:         'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Shape */
  --ip-radius-sm:         6px;
  --ip-radius-md:         10px;
  --ip-radius-lg:         14px;
  --ip-radius-xl:         20px;

  /* Spacing */
  --ip-space-1:           8px;
  --ip-space-2:           16px;
  --ip-space-3:           24px;
  --ip-space-4:           32px;
  --ip-space-5:           48px;

  /* Elevation */
  --ip-shadow-sm:         0 1px 4px rgba(28, 23, 20, 0.07);
  --ip-shadow-md:         0 4px 16px rgba(28, 23, 20, 0.10);
  --ip-shadow-lg:         0 8px 32px rgba(28, 23, 20, 0.13);

  /* Interaction */
  --ip-focus-ring:        0 0 0 3px rgba(47, 73, 92, 0.22);
  --ip-transition:        160ms ease;

  /* Layout */
  --ip-max-width:         1100px;
  --ip-sidebar-width:     240px;
}

/* -------------------------
   2. Base Reset
   ------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ip-font-body);
  color: var(--ip-text);
  background: var(--ip-bg);
  line-height: 1.55;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: var(--ip-primary);
  text-decoration: none;
}

a:hover {
  color: var(--ip-accent-dark);
  text-decoration: underline;
}

/* -------------------------
   3. Layout
   ------------------------- */
.container {
  width: min(100% - 32px, var(--ip-max-width));
  margin-inline: auto;
}

.stack-xs > * + * { margin-top: var(--ip-space-1); }
.stack-sm > * + * { margin-top: var(--ip-space-2); }
.stack-md > * + * { margin-top: var(--ip-space-3); }
.stack-lg > * + * { margin-top: var(--ip-space-4); }

.grid {
  display: grid;
  gap: var(--ip-space-2);
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.flex {
  display: flex;
  gap: var(--ip-space-2);
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ip-space-2);
}

/* -------------------------
   4. App Shell
   ------------------------- */
.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
  padding: var(--ip-space-3) 0 var(--ip-space-5);
}

/* Header */
.app-header {
  background: var(--ip-surface);
  border-bottom: 1px solid var(--ip-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--ip-shadow-sm);
}

.app-header__inner {
  width: min(100% - 32px, var(--ip-max-width));
  margin-inline: auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ip-space-2);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}

.app-brand:hover {
  text-decoration: none;
}

.app-brand__logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}

.app-title {
  margin: 0;
  font-family: var(--ip-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ip-primary);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-subtitle {
  margin: 3px 0 0;
  color: var(--ip-text-secondary);
  font-size: 0.82rem;
}

.app-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.app-user__email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ip-text-secondary);
  font-size: 0.82rem;
}

.auth-page__main,
.fatal-error {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--ip-page-bg);
}

.auth-panel {
  width: min(100%, 420px);
  padding: 28px;
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-md);
  box-shadow: var(--ip-shadow-md);
}

.auth-panel__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 14px;
}

.auth-panel__error {
  margin: 14px 0 0;
  color: var(--ip-error-text);
}

/* Footer */
.app-footer {
  border-top: 1px solid var(--ip-border);
  background: var(--ip-surface-alt);
}

.app-footer__inner {
  width: min(100% - 32px, var(--ip-max-width));
  margin-inline: auto;
  padding: 14px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ip-space-2);
  color: var(--ip-text-secondary);
  font-size: 0.82rem;
}

.app-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.app-footer__logo {
  height: 18px;
  width: auto;
  opacity: 0.6;
}

.app-footer__tagline {
  color: var(--ip-text-secondary);
  font-size: 0.78rem;
  opacity: 0.75;
}

/* -------------------------
   5. Navigation Tabs
   ------------------------- */
.app-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--ip-border);
  background: var(--ip-surface);
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-nav::-webkit-scrollbar {
  display: none;
}

.app-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ip-text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--ip-transition), border-color var(--ip-transition);
  margin-bottom: -1px;
}

.app-nav__item:hover {
  color: var(--ip-primary);
  text-decoration: none;
}

.app-nav__item.is-active {
  color: var(--ip-accent);
  border-bottom-color: var(--ip-accent);
  font-weight: 600;
}

/* -------------------------
   6. Typography
   ------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--ip-space-1);
  line-height: 1.25;
  color: var(--ip-primary);
  font-family: var(--ip-font-display);
}

h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 1.1rem;  font-weight: 600; }
h4 { font-size: 0.95rem; font-weight: 600; }

p {
  margin: 0 0 var(--ip-space-2);
}

p:last-child {
  margin-bottom: 0;
}

.text-muted    { color: var(--ip-text-secondary); }
.text-accent   { color: var(--ip-accent-dark); }
.text-success  { color: var(--ip-success-text); }
.text-warning  { color: var(--ip-warning-text); }
.text-danger   { color: var(--ip-error-text); }
.text-mono     { font-family: var(--ip-font-mono); }

.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ip-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
}

/* -------------------------
   7. Cards / Panels
   ------------------------- */
.card {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-lg);
  padding: var(--ip-space-2) var(--ip-space-3);
  box-shadow: var(--ip-shadow-sm);
}

.card--tight {
  padding: 14px 16px;
}

.card--flat {
  box-shadow: none;
}

.card--accent {
  border-color: var(--ip-accent);
  border-left-width: 3px;
  border-radius: var(--ip-radius-md);
}

.card--warning {
  border-color: var(--ip-warning-border);
  background: var(--ip-warning-bg);
}

.panel {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-lg);
}

.panel__header {
  padding: 14px var(--ip-space-2);
  border-bottom: 1px solid var(--ip-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ip-space-2);
}

.panel__body {
  padding: var(--ip-space-2);
}

/* -------------------------
   8. Buttons
   ------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--ip-radius-md);
  background: var(--ip-primary);
  color: var(--ip-text-on-primary);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.1;
  white-space: nowrap;
  transition:
    transform var(--ip-transition),
    background-color var(--ip-transition),
    box-shadow var(--ip-transition),
    border-color var(--ip-transition),
    opacity var(--ip-transition);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--ip-shadow-md);
  background: var(--ip-primary-dark);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ip-focus-ring);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Primary CTA — accent color */
.btn--cta {
  background: var(--ip-accent);
  color: var(--ip-text-on-accent);
}

.btn--cta:hover {
  background: var(--ip-accent-dark);
}

/* Secondary — outlined */
.btn--secondary {
  background: transparent;
  color: var(--ip-primary);
  border-color: var(--ip-border-strong);
}

.btn--secondary:hover {
  background: var(--ip-primary-light);
  box-shadow: none;
}

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--ip-text-secondary);
  border-color: transparent;
  box-shadow: none;
}

.btn--ghost:hover {
  background: var(--ip-surface-alt);
  color: var(--ip-primary);
  box-shadow: none;
  transform: none;
}

/* Danger */
.btn--danger {
  background: transparent;
  color: var(--ip-error-text);
  border-color: var(--ip-error-border);
}

.btn--danger:hover {
  background: var(--ip-error-bg);
  box-shadow: none;
}

/* Small */
.btn--sm {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 0.82rem;
  border-radius: var(--ip-radius-sm);
}

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* -------------------------
   9. Forms
   ------------------------- */
.form-grid {
  display: grid;
  gap: var(--ip-space-2);
}

.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ip-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.field__label--muted {
  font-weight: 400;
  color: var(--ip-text-secondary);
}

.field__hint {
  font-size: 0.78rem;
  color: var(--ip-text-secondary);
}

.field__counter {
  font-size: 0.75rem;
  color: var(--ip-text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.field__counter.is-over {
  color: var(--ip-error-text);
  font-weight: 600;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-md);
  background: var(--ip-surface);
  color: var(--ip-text);
  transition:
    border-color var(--ip-transition),
    box-shadow var(--ip-transition);
}

.textarea {
  min-height: 100px;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: color-mix(in srgb, var(--ip-text-secondary) 70%, transparent);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ip-primary);
  box-shadow: var(--ip-focus-ring);
}

.input--price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}

/* Field needing seller review (AI confidence warning) */
.field--needs-review .input,
.field--needs-review .select,
.field--needs-review .textarea {
  border-color: var(--ip-warning-border);
  background: var(--ip-warning-bg);
}

.field--needs-review .input:focus,
.field--needs-review .select:focus,
.field--needs-review .textarea:focus {
  border-color: var(--ip-warning-text);
  box-shadow: 0 0 0 3px rgba(122, 82, 0, 0.15);
}

/* -------------------------
   10. Badges / Pills / Tags
   ------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--ip-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.badge--success  { background: var(--ip-success-bg);  color: var(--ip-success-text); }
.badge--warning  { background: var(--ip-warning-bg);  color: var(--ip-warning-text); }
.badge--error    { background: var(--ip-error-bg);    color: var(--ip-error-text);   }
.badge--info     { background: var(--ip-info-bg);     color: var(--ip-info-text);    }
.badge--neutral  { background: var(--ip-surface-alt); color: var(--ip-text-secondary); }
.badge--accent   { background: var(--ip-accent-light); color: var(--ip-accent-dark); }

/* Listing status badges */
.badge--active   { background: var(--ip-success-bg);  color: var(--ip-success-text); }
.badge--sold     { background: var(--ip-info-bg);     color: var(--ip-info-text);    }
.badge--expired  { background: var(--ip-error-bg);    color: var(--ip-error-text);   }
.badge--draft    { background: var(--ip-surface-alt); color: var(--ip-text-secondary); }

/* Platform badges — fixed brand colors */
.badge--ebay     { background: #FFF0F0; color: var(--ip-ebay);     }
.badge--depop    { background: #FFF0EE; color: var(--ip-depop);    }
.badge--poshmark { background: #FDF0F4; color: var(--ip-poshmark); }
.badge--mercari  { background: #EEF5FF; color: var(--ip-mercari);  }

/* -------------------------
   11. Metric / Stat Cards
   ------------------------- */
.stat-card {
  background: var(--ip-surface-alt);
  border-radius: var(--ip-radius-md);
  padding: var(--ip-space-2);
}

.stat-card__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ip-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.stat-card__value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ip-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat-card__sub {
  font-size: 0.8rem;
  color: var(--ip-text-secondary);
  margin-top: 4px;
}

.stat-card--profit .stat-card__value { color: var(--ip-success-text); }
.stat-card--loss   .stat-card__value { color: var(--ip-error-text);   }

/* -------------------------
   12. Profit / Price Display
   ------------------------- */
.profit-positive { color: var(--ip-success-text); font-weight: 600; }
.profit-negative { color: var(--ip-error-text);   font-weight: 600; }
.profit-neutral  { color: var(--ip-text-secondary); }

.price-display {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* -------------------------
   13. Image Drop Zone
   ------------------------- */
.drop-zone {
  border: 2px dashed var(--ip-border-strong);
  border-radius: var(--ip-radius-lg);
  padding: var(--ip-space-4);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--ip-transition),
    background var(--ip-transition);
  background: var(--ip-surface-alt);
}

.drop-zone:hover,
.drop-zone.is-hovering {
  border-color: var(--ip-accent);
  background: var(--ip-accent-light);
}

.drop-zone.is-populated {
  border-style: solid;
  border-color: var(--ip-primary-light);
  background: var(--ip-surface);
}

.drop-zone__label {
  font-size: 0.9rem;
  color: var(--ip-text-secondary);
  margin-top: 8px;
}

.drop-zone__hint {
  font-size: 0.78rem;
  color: var(--ip-text-secondary);
  margin-top: 4px;
  opacity: 0.75;
}

/* Image thumbnail grid inside drop zone */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.image-thumb {
  aspect-ratio: 1;
  border-radius: var(--ip-radius-sm);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--ip-border);
}

.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-thumb__remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--ip-transition);
}

.image-thumb:hover .image-thumb__remove {
  opacity: 1;
}

/* Photo slot labels (Front, Back, Tag, etc.) */
.image-thumb__slot-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  padding: 2px 4px;
}

/* -------------------------
   14. AI Generation States
   ------------------------- */
.generation-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--ip-space-2);
  background: var(--ip-info-bg);
  border: 1px solid var(--ip-info-border);
  border-radius: var(--ip-radius-md);
}

.generation-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--ip-info-text);
  opacity: 0.5;
  transition: opacity var(--ip-transition);
}

.generation-step.is-active {
  opacity: 1;
  font-weight: 600;
}

.generation-step.is-done {
  opacity: 0.8;
  color: var(--ip-success-text);
}

.generation-step__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.generation-step.is-active .generation-step__dot {
  animation: pulse 1s ease-in-out infinite;
}

.generation-status {
  align-items: center;
}

.generation-status__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* -------------------------
   15. Platform Output Panels
   ------------------------- */
.platform-panel {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-lg);
  overflow: hidden;
  transition: opacity var(--ip-transition);
}

.platform-panel.is-disabled {
  opacity: 0.45;
}

.platform-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ip-border);
  background: var(--ip-surface-alt);
}

.platform-panel__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ip-primary);
}

.platform-panel__body {
  padding: 16px;
}

.platform-panel__profit {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--ip-border);
}

.platform-panel__profit-label {
  font-size: 0.82rem;
  color: var(--ip-text-secondary);
}

.platform-panel__profit-breakdown {
  font-size: 0.75rem;
  color: var(--ip-text-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* -------------------------
   16. Tables
   ------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-lg);
  background: var(--ip-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.table th,
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ip-border);
  text-align: left;
  vertical-align: middle;
  font-size: 0.9rem;
}

.table thead th {
  background: var(--ip-surface-alt);
  color: var(--ip-primary);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover td {
  background: color-mix(in srgb, var(--ip-primary-light) 50%, transparent);
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* -------------------------
   17. Tabs (inline, pill style)
   ------------------------- */
.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--ip-border);
  border-radius: 999px;
  background: transparent;
  color: var(--ip-text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ip-transition);
}

.tab:hover {
  border-color: var(--ip-primary);
  color: var(--ip-primary);
}

.tab.is-active {
  background: var(--ip-primary);
  border-color: var(--ip-primary);
  color: var(--ip-text-on-primary);
  font-weight: 600;
}

/* -------------------------
   18. Alerts / Status Messages
   ------------------------- */
.alert {
  padding: 12px 16px;
  border-radius: var(--ip-radius-md);
  border: 1px solid transparent;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.alert--info    { background: var(--ip-info-bg);    color: var(--ip-info-text);    border-color: var(--ip-info-border);    }
.alert--success { background: var(--ip-success-bg); color: var(--ip-success-text); border-color: var(--ip-success-border); }
.alert--warning { background: var(--ip-warning-bg); color: var(--ip-warning-text); border-color: var(--ip-warning-border); }
.alert--error   { background: var(--ip-error-bg);   color: var(--ip-error-text);   border-color: var(--ip-error-border);   }

/* Inline toast (bottom-right or top-right fixed) */
.toast {
  padding: 12px 16px;
  border-radius: var(--ip-radius-md);
  background: var(--ip-primary);
  color: var(--ip-text-on-primary);
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: var(--ip-shadow-lg);
  max-width: 320px;
  animation: toastIn 200ms ease;
}

.toast--success { background: var(--ip-success-text); }
.toast--error   { background: var(--ip-error-text);   }

.app-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast__action {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--ip-radius-sm);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  min-height: 30px;
  padding: 5px 9px;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------
   19. Empty States
   ------------------------- */
.empty-state {
  text-align: center;
  padding: var(--ip-space-5) var(--ip-space-3);
  color: var(--ip-text-secondary);
}

.empty-state__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  opacity: 0.35;
}

.empty-state__message {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ip-primary);
  margin-bottom: 6px;
}

.empty-state__hint {
  font-size: 0.88rem;
  color: var(--ip-text-secondary);
  margin-bottom: var(--ip-space-2);
}

/* -------------------------
   20. Multi-View / Screen Switching
   ------------------------- */
[data-view] {
  display: none;
}

[data-view].is-visible {
  display: block;
}

/* -------------------------
   21. Transitions (smooth UI)
   ------------------------- */
.fade-in {
  animation: fadeIn 200ms ease;
}

.slide-up {
  animation: slideUp 200ms ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Saving state for cards/rows */
.is-saving {
  opacity: 0.65;
  pointer-events: none;
}

/* -------------------------
   22. Tooltips
   ------------------------- */
.tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ip-surface-alt);
  border: 1px solid var(--ip-border);
  color: var(--ip-text-secondary);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
}

.tooltip-content {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ip-primary);
  color: var(--ip-text-on-primary);
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--ip-radius-sm);
  width: max-content;
  max-width: 220px;
  z-index: 50;
  pointer-events: none;
}

.tooltip-wrap:hover .tooltip-content {
  display: block;
}

/* -------------------------
   23. Utility Classes
   ------------------------- */
.hidden   { display: none !important; }
.center   { text-align: center; }
.right    { text-align: right; }
.nowrap   { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only  {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------
   24. Responsive
   ------------------------- */
@media (max-width: 960px) {
  .grid-3,
  .grid-4,
  .form-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .form-grid--2,
  .form-grid--3 {
    grid-template-columns: 1fr;
  }

  .app-main {
    padding: var(--ip-space-2) 0 var(--ip-space-4);
  }

  .card {
    padding: 14px 16px;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .btn-row {
    flex-direction: column;
  }

  .btn-row > .btn {
    width: 100%;
  }

  .app-nav {
    padding: 0 8px;
  }

  .app-nav__item {
    padding: 12px 10px 10px;
    font-size: 0.82rem;
  }
}

/* -------------------------
   25. Print
   ------------------------- */
@media print {
  body {
    background: #FFFFFF;
    color: #111111;
  }

  .app-header,
  .app-nav,
  .btn,
  .btn-row,
  .drop-zone {
    display: none !important;
  }

  .card,
  .panel,
  .table-wrap {
    box-shadow: none;
    border: 1px solid #DDDDDD;
    background: #FFFFFF;
  }

  .app-footer {
    border-top: 1px solid #DDDDDD;
  }
}

/* =========================================================
   APP-SPECIFIC STYLES
   Add styles for this app below this line only.
   Do not modify the base layer above.
   ========================================================= */

.app-brand__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--ip-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ip-primary);
  color: var(--ip-text-on-primary);
  font-family: var(--ip-font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  flex-shrink: 0;
}

.app-brand__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
}

.view-header {
  margin-bottom: var(--ip-space-3);
}

.view-header p:last-child {
  max-width: 620px;
}

.view {
  min-height: 48vh;
}

.empty-state.card {
  border-style: dashed;
  box-shadow: none;
}

.listing-workflow .panel__header {
  align-items: flex-start;
}

.photo-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ip-space-2);
}

.photo-analysis-note,
.photo-routing-note {
  margin-bottom: var(--ip-space-2);
}

.photo-routing-note {
  font-size: 0.82rem;
}

.photo-slot {
  min-height: 164px;
  padding: var(--ip-space-2);
  display: grid;
  align-content: start;
  gap: var(--ip-space-1);
  text-align: left;
}

.photo-slot:focus-visible {
  outline: none;
  box-shadow: var(--ip-focus-ring);
}

.photo-slot__topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ip-space-1);
}

.photo-slot__topline h3 {
  margin: 0;
}

.listing-thumb .image-thumb__slot-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ip-space-2);
}

.inventory-list {
  display: grid;
  gap: var(--ip-space-2);
}

.inventory-item {
  display: grid;
  gap: var(--ip-space-2);
}

.inventory-item__main,
.inventory-item__meta,
.inventory-item__actions,
.inventory-detail__actions,
.inventory-detail__subcard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ip-space-2);
}

.inventory-item__meta {
  color: var(--ip-text-secondary);
  font-size: 0.86rem;
}

.inventory-item__actions,
.inventory-detail__actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.inventory-detail__section {
  display: grid;
  gap: var(--ip-space-2);
}

.inventory-detail__subcard {
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-md);
  display: grid;
  gap: var(--ip-space-2);
  padding: var(--ip-space-2);
}

.inventory-detail__subcard-header h3 {
  margin: 0;
  text-transform: capitalize;
}

.inventory-json {
  border-top: 1px solid var(--ip-border);
  padding-top: var(--ip-space-1);
}

.inventory-json summary {
  color: var(--ip-primary);
  cursor: pointer;
  font-weight: 600;
}

.inventory-json pre {
  background: var(--ip-surface-alt);
  border-radius: var(--ip-radius-sm);
  color: var(--ip-text);
  font-family: var(--ip-font-mono);
  font-size: 0.78rem;
  margin: var(--ip-space-1) 0 0;
  overflow-x: auto;
  padding: var(--ip-space-1);
}

.save-draft-panel {
  display: grid;
  gap: var(--ip-space-2);
}

.save-draft-panel__header,
.save-draft-panel__actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ip-space-2);
}

.field--checkbox {
  min-height: 40px;
  justify-content: center;
}

.field--checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--ip-accent);
}

.taxonomy-loader {
  display: grid;
  gap: var(--ip-space-1);
  margin-top: var(--ip-space-2);
}

.taxonomy-suggestions {
  display: grid;
  gap: 8px;
}

.taxonomy-suggestion {
  width: 100%;
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-sm);
  background: var(--ip-surface);
  color: var(--ip-text);
  cursor: pointer;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
}

.taxonomy-suggestion:hover,
.taxonomy-suggestion:focus-visible {
  border-color: var(--ip-primary);
  box-shadow: var(--ip-focus-ring);
  outline: none;
}

.taxonomy-suggestion span {
  color: var(--ip-text-secondary);
  font-size: 0.78rem;
}

.settings-grid {
  display: grid;
  gap: var(--ip-space-2);
}

.settings-card {
  display: grid;
  gap: var(--ip-space-2);
}

.settings-card__header,
.settings-card__actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ip-space-2);
}

.settings-card__header h2 {
  margin-bottom: 4px;
}

.settings-card__meta {
  color: var(--ip-text-secondary);
  font-size: 0.78rem;
  line-height: 32px;
}

.settings-subsection {
  display: grid;
  gap: var(--ip-space-1);
  padding-top: var(--ip-space-1);
}

.settings-subsection + .settings-subsection {
  border-top: 1px solid var(--ip-border);
  margin-top: var(--ip-space-1);
  padding-top: var(--ip-space-2);
}

.settings-subsection h3 {
  margin: 0;
}

.settings-prompt {
  font-family: var(--ip-font-body);
  min-height: 360px;
}

@media (max-width: 640px) {
  .app-header__inner {
    padding: 12px 0;
    align-items: flex-start;
  }

  .app-user {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .app-user__email {
    max-width: 140px;
  }

  .app-title {
    font-size: 1.1rem;
  }

  .app-subtitle {
    display: none;
  }

  .app-brand__mark,
  .app-brand__logo {
    width: 36px;
    height: 36px;
  }

  .app-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .photo-slot-grid {
    grid-template-columns: 1fr;
  }

  .photo-slot {
    min-height: 120px;
  }

  .photo-slot__topline,
  .listing-action-bar,
  .inventory-item__main,
  .inventory-item__meta,
  .inventory-item__actions,
  .inventory-detail__actions,
  .inventory-detail__subcard-header,
  .save-draft-panel__header,
  .save-draft-panel__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-card__header,
  .settings-card__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-card__meta {
    line-height: 1.4;
  }
}


/* Purchase intake and lifecycle continuity */
.purchase-actions, .inventory-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.inventory-toolbar .field { margin: 0; min-width: 12rem; }
.purchase-number { display: block; font-size: 3rem; color: var(--ip-primary); font-variant-numeric: tabular-nums; }
.location-picker { position: relative; }
.location-suggestions { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 20; max-height: 18rem; overflow-y: auto; background: var(--ip-surface); border: 1px solid var(--ip-border); border-radius: 0.5rem; box-shadow: var(--ip-shadow-md); }
.location-suggestions [role="option"] { padding: 0.8rem 1rem; min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
.location-suggestions [role="option"]:hover, .location-suggestions [aria-selected="true"] { background: var(--ip-primary-light); }
.purchase-photo-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.purchase-photo { margin: 0; width: 10rem; }
.purchase-photo img { width: 100%; height: 10rem; object-fit: contain; border-radius: 0.5rem; background: var(--ip-primary-light); }
.purchase-photo figcaption { font-size: 0.8rem; margin-top: 0.3rem; }
.listing-item-context { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
@media (max-width: 600px) { .listing-item-context { flex-direction: column; } .purchase-form input[type="file"] { max-width: 100%; font-size: 0.85rem; } }

/* Per-platform photo picks */
.platform-card { display: grid; gap: var(--ip-space-2); }
.platform-photos__note { margin: 0; font-size: 0.85rem; }
.platform-photos__strip { display: flex; flex-wrap: wrap; gap: var(--ip-space-1); }
.platform-photo {
  width: 56px; height: 56px; padding: 0; border: 2px solid var(--ip-primary);
  border-radius: var(--ip-radius-sm); overflow: hidden; background: var(--ip-surface-alt);
  cursor: pointer; transition: opacity var(--ip-transition), border-color var(--ip-transition);
}
.platform-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.platform-photo.is-skipped { border-color: var(--ip-border); opacity: 0.35; filter: grayscale(1); }
.platform-photo:focus-visible { outline: 2px solid var(--ip-accent); outline-offset: 2px; }
.platform-settings { border: 1px solid var(--ip-border); border-radius: var(--ip-radius-md); padding: var(--ip-space-2); margin: 0 0 var(--ip-space-2); }
.platform-settings legend { font-weight: 600; padding: 0 var(--ip-space-1); }

/* eBay upload file (Inventory → Export to eBay) */
.ebay-export__items { border: 0; padding: 0; margin: 0; display: grid; gap: var(--ip-space-1); }
.ebay-export__items legend { font-weight: 600; margin-bottom: var(--ip-space-1); }
.ebay-export__results { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ip-space-2); }
.ebay-export__result { padding: var(--ip-space-2); border: 1px solid var(--ip-border); border-radius: var(--ip-radius-sm); }
.ebay-export__result.is-included { border-color: var(--ip-success-text); }
.ebay-export__result.is-skipped { background: var(--ip-warning-bg); border-color: var(--ip-warning-border); }
.ebay-export__result ul { margin: var(--ip-space-1) 0 0; padding-left: 1.2em; }