/* LTC Fish Browser — Main Stylesheet */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --bg:#07111a;
  --bg2:#0a1624;
  --bg3:#102338;
  --panel:#132943;
  --panel-2:#173555;
  --panel-3:#1d3d60;
  --panel-4:#24496f;
  /* v0.158 — Design direction: grey/charcoal preferred over dark navy
     for primary panel backgrounds. These are the NEW variables used
     going forward. Existing --panel variables are kept intact so old
     rules don't break — new work should reference --bg-charcoal-*. */
  --bg-charcoal:#1a1c22;
  --bg-charcoal-2:#22252e;
  --bg-charcoal-3:#2b2e38;
  --bg-charcoal-panel:rgba(28,30,36,0.95);
  --bg-charcoal-panel-2:rgba(38,40,48,0.92);
  --bg-charcoal-input:rgba(48,52,62,0.92);
  --line:rgba(202,230,255,.12);
  --line-strong:rgba(159,220,255,.30);
  --text:#f6fbff;
  --muted:#b4c8db;
  --soft:#93a9bc;
  --blue:#66b4ff;
  --cyan:#79e5ff;
  --teal:#52e7d0;
  --green:#30e18c;
  --yellow:#f5da55;
  --orange:#ffa84d;
  --red:#f5614d;
  --deepred:#9e102a;
  --plum:#56163f;
  --nearblack:#090a0f;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --shadow-soft:0 18px 40px rgba(0,0,0,.20);
  --radius:30px;
  --radius-lg:36px;
  --radius-md:24px;
  --tap:74px;
  --gauge-spectrum:linear-gradient(90deg,#103a5e 0%,#1f9bd6 5%,#2db48a 16%,#4cb645 28%,#7bc23a 42%,#b6c92c 54%,#ecc923 64%,#d68a25 76%,#c84a2e 88%,#6e1414 96%,#050000 100%);

  /* ═══════════════════════════════════════════════════════════════════
     v0.177 — DESIGN TOKEN SYSTEM (the new source of truth)
     ─────────────────────────────────────────────────────────────────
     Every NEW rule should reference these tokens. Existing rules will
     be migrated to them in v0.178. The point: change a token, the
     entire app updates. No more hunting for navy across 11k lines.

     Naming convention: --ltc-<category>-<role>[-<state>]
       category: surface, border, text, accent, radius, shadow, motion
       role:     panel, input, chip, modal, overlay, etc
       state:    default, hover, focus, active

     RULE: New components MUST use these tokens. Old hardcoded colors
     are deprecated and will be removed in the v0.178 migration.
     ═══════════════════════════════════════════════════════════════════ */

  /* ─── Surfaces ─── */
  --ltc-surface-page:          #0a0c12;
  --ltc-surface-panel:         linear-gradient(180deg, rgba(38,40,48,0.96), rgba(22,24,30,0.98));
  --ltc-surface-panel-flat:    rgba(28,30,36,0.96);
  --ltc-surface-panel-raised:  linear-gradient(180deg, rgba(46,48,56,0.98), rgba(28,30,36,0.99));
  --ltc-surface-card:          linear-gradient(180deg, rgba(46,48,56,0.94), rgba(32,34,42,0.96));
  --ltc-surface-input:         linear-gradient(180deg, rgba(76,82,96,0.96), rgba(58,62,74,0.98));
  --ltc-surface-input-focus:   linear-gradient(180deg, rgba(86,92,108,1), rgba(64,70,82,1));
  --ltc-surface-chip:          rgba(46,48,56,0.85);
  --ltc-surface-chip-hover:    rgba(64,68,80,0.92);
  --ltc-surface-overlay-bg:    rgba(6,8,14,0.85);
  --ltc-surface-modal:         linear-gradient(180deg, rgba(38,40,48,0.98), rgba(22,24,30,0.99));

  /* ─── Borders ─── */
  --ltc-border-faint:    rgba(220,234,248,0.08);
  --ltc-border-subtle:   rgba(220,234,248,0.14);
  --ltc-border-default:  rgba(220,234,248,0.20);
  --ltc-border-input:    rgba(220,234,248,0.32);
  --ltc-border-strong:   rgba(220,234,248,0.55);

  /* ─── Text ─── */
  --ltc-text-primary:    #f4fbff;
  --ltc-text-secondary:  rgba(220,234,248,0.72);
  --ltc-text-muted:      rgba(220,234,248,0.48);
  --ltc-text-faint:      rgba(220,234,248,0.32);
  --ltc-text-on-accent:  #ffffff;

  /* ─── Accent palette — the 9 colors used everywhere for variety.
        Used for category cycling, semantic states, and theming. ─── */
  --ltc-c-blue:    #7bcfff;  --ltc-c-blue-rgb:   123,207,255;
  --ltc-c-teal:    #5eebc8;  --ltc-c-teal-rgb:    94,235,200;
  --ltc-c-purple:  #c8b2ff;  --ltc-c-purple-rgb: 200,178,255;
  --ltc-c-amber:   #ffcb5e;  --ltc-c-amber-rgb:  255,203,94;
  --ltc-c-rose:    #ff9bb6;  --ltc-c-rose-rgb:   255,155,182;
  --ltc-c-cyan:    #5ed4dc;  --ltc-c-cyan-rgb:    94,212,220;
  --ltc-c-orange:  #ffa850;  --ltc-c-orange-rgb: 255,168,80;
  --ltc-c-red:     #ff9a8a;  --ltc-c-red-rgb:    255,154,138;
  --ltc-c-green:   #4ade80;  --ltc-c-green-rgb:   74,222,128;

  /* ─── Default accent ─── what unthemed surfaces fall back to.
        Was teal (#5eebc8) in v0.176 and earlier — that's why every
        unthemed control read as "aqua". Now amber, neutral and warm. */
  --ltc-accent:        var(--ltc-c-amber);
  --ltc-accent-rgb:    255,203,94;

  /* ─── Radii ─── */
  --ltc-radius-xs:  6px;
  --ltc-radius-sm:  10px;
  --ltc-radius-md:  14px;
  --ltc-radius-lg:  18px;
  --ltc-radius-xl:  24px;
  --ltc-radius-pill: 999px;

  /* ─── Shadows ─── */
  --ltc-shadow-card:    0 12px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
  --ltc-shadow-card-hover: 0 16px 36px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.06);
  --ltc-shadow-modal:   0 30px 80px rgba(0,0,0,0.42);
  --ltc-shadow-input:   inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.30);
  --ltc-shadow-pop:     0 8px 22px rgba(0,0,0,0.28);

  /* ─── Spacing scale ─── */
  --ltc-space-1: 4px;
  --ltc-space-2: 8px;
  --ltc-space-3: 12px;
  --ltc-space-4: 16px;
  --ltc-space-5: 20px;
  --ltc-space-6: 24px;
  --ltc-space-8: 32px;

  /* ─── Tap targets / motion ─── */
  --ltc-tap:        44px;
  --ltc-motion-fast: 140ms;
  --ltc-motion-base: 200ms;
  --ltc-motion-slow: 320ms;
  --ltc-easing:      cubic-bezier(.34, 1.2, .42, 1);
}

/* ═══════════════════════════════════════════════════════════════════
   v0.177 — SHARED COMPONENT CLASSES
   These reference the tokens above. Apply them in markup to get
   consistent styling for free. New work should use these by default.

   Available classes:
     .ltc-panel              full-bleed surface for sections
     .ltc-card               raised card for content blocks
     .ltc-modal              modal dialog wrapper
     .ltc-overlay-bg         the dark backdrop behind a modal
     .ltc-input              text input / select / textarea
     .ltc-input-wrap         wrapper for inputs with side decorations
     .ltc-back-btn           the unified back/close button
     .ltc-chip               pill-style filter / category chip
     .ltc-btn-primary        themed primary action button
     .ltc-btn-secondary      neutral secondary button
     .ltc-text-h1 / -h2 / -body / -caption / -muted  type scale

   Modifiers (added alongside the base class):
     .ltc-themed-blue, .ltc-themed-teal, .ltc-themed-purple, etc
        — sets --ltc-accent for that element to the named color.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Surfaces ─── */
.ltc-panel{
  background: var(--ltc-surface-panel);
  border: 1px solid var(--ltc-border-subtle);
  border-radius: var(--ltc-radius-lg);
  box-shadow: var(--ltc-shadow-card);
  color: var(--ltc-text-primary);
}
.ltc-card{
  background: var(--ltc-surface-card);
  border: 1px solid var(--ltc-border-subtle);
  border-radius: var(--ltc-radius-md);
  box-shadow: var(--ltc-shadow-card);
  color: var(--ltc-text-primary);
  padding: var(--ltc-space-4);
}
.ltc-modal{
  background: var(--ltc-surface-modal);
  border: 1px solid var(--ltc-border-subtle);
  border-radius: var(--ltc-radius-xl);
  box-shadow: var(--ltc-shadow-modal);
  color: var(--ltc-text-primary);
}
.ltc-overlay-bg{
  background: var(--ltc-surface-overlay-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── Inputs ─── */
.ltc-input,
.ltc-input-wrap > input,
.ltc-input-wrap > select,
.ltc-input-wrap > textarea{
  width: 100%;
  min-height: var(--ltc-tap);
  padding: 12px 16px;
  background: var(--ltc-surface-input);
  border: 2px solid var(--ltc-border-input);
  border-radius: var(--ltc-radius-md);
  color: var(--ltc-text-primary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--ltc-shadow-input);
  transition: border-color var(--ltc-motion-fast), background var(--ltc-motion-fast), box-shadow var(--ltc-motion-fast);
}
.ltc-input::placeholder,
.ltc-input-wrap > input::placeholder,
.ltc-input-wrap > textarea::placeholder{
  color: var(--ltc-text-muted);
  font-weight: 600;
}
.ltc-input:focus,
.ltc-input-wrap > input:focus,
.ltc-input-wrap > select:focus,
.ltc-input-wrap > textarea:focus{
  outline: none;
  border-color: var(--ltc-accent);
  background: var(--ltc-surface-input-focus);
  box-shadow:
    0 0 0 3px rgba(var(--ltc-accent-rgb), 0.22),
    var(--ltc-shadow-input);
}
.ltc-input-wrap{
  position: relative;
  display: block;
  width: 100%;
}

/* ─── Back / close button (the unified one — kills the aqua) ─── */
.ltc-back-btn{
  display: inline-flex;
  align-items: center;
  gap: var(--ltc-space-2);
  min-height: var(--ltc-tap);
  padding: 10px 18px 10px 14px;
  background: linear-gradient(180deg, rgba(60,64,76,0.94), rgba(40,42,50,0.96));
  border: 1.5px solid rgba(var(--ltc-accent-rgb), 0.5);
  border-radius: var(--ltc-radius-md);
  color: var(--ltc-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--ltc-motion-fast), background var(--ltc-motion-fast), border-color var(--ltc-motion-fast), box-shadow var(--ltc-motion-fast);
  box-shadow:
    0 0 0 1px rgba(var(--ltc-accent-rgb), 0.18),
    0 4px 14px rgba(var(--ltc-accent-rgb), 0.16),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.ltc-back-btn:hover{
  background: linear-gradient(180deg, rgba(72,76,90,0.96), rgba(50,52,62,0.98));
  border-color: rgba(var(--ltc-accent-rgb), 0.78);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(var(--ltc-accent-rgb), 0.32),
    0 6px 20px rgba(var(--ltc-accent-rgb), 0.28),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.ltc-back-btn:active{ transform: translateY(0) scale(0.97); }

/* ─── Chip / pill ─── */
.ltc-chip{
  display: inline-flex;
  align-items: center;
  gap: var(--ltc-space-2);
  min-height: var(--ltc-tap);
  padding: 10px 16px;
  background: var(--ltc-surface-chip);
  border: 1.5px solid var(--ltc-border-default);
  border-radius: var(--ltc-radius-md);
  color: var(--ltc-text-primary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--ltc-motion-fast), background var(--ltc-motion-fast), border-color var(--ltc-motion-fast);
}
.ltc-chip:hover{
  background: var(--ltc-surface-chip-hover);
  border-color: rgba(var(--ltc-accent-rgb), 0.55);
  transform: translateY(-1px);
}
.ltc-chip.is-active{
  background: linear-gradient(180deg,
    rgba(var(--ltc-accent-rgb), 0.22),
    rgba(var(--ltc-accent-rgb), 0.10));
  border-color: rgba(var(--ltc-accent-rgb), 0.85);
  color: var(--ltc-text-primary);
  box-shadow:
    0 0 0 1px rgba(var(--ltc-accent-rgb), 0.4),
    0 4px 16px rgba(var(--ltc-accent-rgb), 0.28);
}

/* ─── Buttons ─── */
.ltc-btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ltc-space-2);
  min-height: var(--ltc-tap);
  padding: 12px 22px;
  background: linear-gradient(180deg,
    rgba(var(--ltc-accent-rgb), 0.28),
    rgba(var(--ltc-accent-rgb), 0.16));
  border: 1.5px solid rgba(var(--ltc-accent-rgb), 0.65);
  border-radius: var(--ltc-radius-md);
  color: var(--ltc-text-on-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  box-shadow:
    0 6px 20px rgba(var(--ltc-accent-rgb), 0.22),
    inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform var(--ltc-motion-fast), background var(--ltc-motion-fast), box-shadow var(--ltc-motion-fast);
}
.ltc-btn-primary:hover{
  background: linear-gradient(180deg,
    rgba(var(--ltc-accent-rgb), 0.38),
    rgba(var(--ltc-accent-rgb), 0.22));
  transform: translateY(-1px);
  box-shadow:
    0 8px 24px rgba(var(--ltc-accent-rgb), 0.32),
    inset 0 1px 0 rgba(255,255,255,0.16);
}
.ltc-btn-primary:active{ transform: translateY(1px) scale(0.98); }

.ltc-btn-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ltc-space-2);
  min-height: var(--ltc-tap);
  padding: 12px 18px;
  background: var(--ltc-surface-chip);
  border: 1.5px solid var(--ltc-border-default);
  border-radius: var(--ltc-radius-md);
  color: var(--ltc-text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--ltc-motion-fast), background var(--ltc-motion-fast), border-color var(--ltc-motion-fast), color var(--ltc-motion-fast);
}
.ltc-btn-secondary:hover{
  background: var(--ltc-surface-chip-hover);
  border-color: var(--ltc-border-strong);
  color: var(--ltc-text-primary);
}
.ltc-btn-secondary:active{ transform: scale(0.98); }

/* ─── Type scale ─── */
.ltc-text-h1{ font-size: 22px; font-weight: 900; color: var(--ltc-text-primary); letter-spacing: -0.02em; line-height: 1.2; }
.ltc-text-h2{ font-size: 17px; font-weight: 900; color: var(--ltc-text-primary); letter-spacing: -0.01em; line-height: 1.25; }
.ltc-text-body{ font-size: 14px; font-weight: 600; color: var(--ltc-text-secondary); line-height: 1.5; }
.ltc-text-caption{ font-size: 11px; font-weight: 700; color: var(--ltc-text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.ltc-text-muted{ color: var(--ltc-text-muted); }

/* ─── Theme modifiers — set --ltc-accent for the element + descendants.
      Apply alongside the base class: <button class="ltc-chip ltc-themed-blue">.
      This is how a single chip can be blue while its sibling is purple
      without ANY one-off CSS rule. ─── */
.ltc-themed-blue   { --ltc-accent: var(--ltc-c-blue);   --ltc-accent-rgb: var(--ltc-c-blue-rgb); }
.ltc-themed-teal   { --ltc-accent: var(--ltc-c-teal);   --ltc-accent-rgb: var(--ltc-c-teal-rgb); }
.ltc-themed-purple { --ltc-accent: var(--ltc-c-purple); --ltc-accent-rgb: var(--ltc-c-purple-rgb); }
.ltc-themed-amber  { --ltc-accent: var(--ltc-c-amber);  --ltc-accent-rgb: var(--ltc-c-amber-rgb); }
.ltc-themed-rose   { --ltc-accent: var(--ltc-c-rose);   --ltc-accent-rgb: var(--ltc-c-rose-rgb); }
.ltc-themed-cyan   { --ltc-accent: var(--ltc-c-cyan);   --ltc-accent-rgb: var(--ltc-c-cyan-rgb); }
.ltc-themed-orange { --ltc-accent: var(--ltc-c-orange); --ltc-accent-rgb: var(--ltc-c-orange-rgb); }
.ltc-themed-red    { --ltc-accent: var(--ltc-c-red);    --ltc-accent-rgb: var(--ltc-c-red-rgb); }
.ltc-themed-green  { --ltc-accent: var(--ltc-c-green);  --ltc-accent-rgb: var(--ltc-c-green-rgb); }

/* ─── Reduced motion respect — applies to ALL ltc-* components ─── */
@media (prefers-reduced-motion: reduce){
  .ltc-back-btn, .ltc-chip, .ltc-btn-primary, .ltc-btn-secondary,
  .ltc-input, .ltc-card, .ltc-panel, .ltc-modal{
    transition: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   END v0.177 design token system
   ═══════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;overscroll-behavior-x:none}
html{background:#0a0c12}
body{
  overflow-wrap:break-word;word-wrap:break-word;
  font-family:Inter,system-ui,sans-serif;
  color:var(--text);
  background:transparent;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  position:relative;
}
button,input{font:inherit}
button{background:none;border:none;color:inherit}
img{display:block;max-width:100%}

.bg-scene{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;background:linear-gradient(180deg,#0a0c12 0%,#0e1218 30%,#10151e 60%,#0a0d14 100%)}
#bgVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
.bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,20,.5) 0%,rgba(6,14,26,.3) 40%,rgba(4,10,20,.5) 100%);pointer-events:none}
.category-tint{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .8s ease,background .8s ease}
.category-tint.active{opacity:1}
.topbar{
  position:relative;z-index:30;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg, rgba(12,14,20,.88), rgba(10,12,18,.75));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar-inner{
  position:relative;z-index:2;
  max-width:1580px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.topbar-actions{display:flex;align-items:center;gap:10px}
.control-top-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.04);margin-bottom:10px}
.hero-mini{border:none;padding:0;margin:0;flex:1}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-mark{
  width:60px;height:60px;border-radius:20px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(145deg,#1a2030,#0e141e);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 12px 28px rgba(0,0,0,.25), inset 0 0 0 1px rgba(80,220,200,.08);
}
.brand-title{
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(28px,2vw,38px);font-weight:700;line-height:1;letter-spacing:-.02em
}
.brand-sub{
  margin-top:7px;font-size:12px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)
}
.header-pill{
  padding:14px 18px;border-radius:999px;
  background:linear-gradient(135deg, rgba(86,231,214,.16), rgba(109,183,255,.13));
  border:1px solid rgba(152,224,255,.22);
  display:flex;align-items:center;gap:10px;font-size:14px;font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}
.header-pill .dot{
  width:10px;height:10px;border-radius:50%;background:var(--green);
  box-shadow:0 0 12px rgba(48,225,140,.9)
}

.shell{position:relative;z-index:2;max-width:1580px;margin:0 auto;padding:22px 24px 44px}
.control-panel{
  background:linear-gradient(180deg, rgba(20,24,32,.90), rgba(14,17,24,.88));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:14px 22px 14px;
  position:sticky;top:0;z-index:30;
  backdrop-filter:blur(14px);
}
.control-top{display:none}
.hero-mini{
  font-size:18px;font-weight:700;color:rgba(200,220,240,.55);
  letter-spacing:.01em;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.04);margin-bottom:12px
}
.control-panel::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 90% 10%, rgba(80,220,200,.04), transparent 22%),
    radial-gradient(circle at 16% 85%, rgba(100,160,220,.05), transparent 28%);
  pointer-events:none
}
.control-copy h1{
  margin:0;font-size:clamp(34px,3vw,54px);line-height:1.02;letter-spacing:-.04em
}
.control-copy p{
  margin:12px 0 0;max-width:70ch;color:var(--muted);font-size:18px;line-height:1.7;font-weight:650
}
.kiosk-note{
  min-width:320px;max-width:560px;padding:18px 20px;border-radius:24px;
  background:linear-gradient(180deg, rgba(46,48,56,.82), rgba(28,30,38,.88));
  border:1px solid rgba(160,223,255,.20);
  box-shadow:var(--shadow-soft)
}
.kiosk-note strong{display:block;font-size:16px;margin-bottom:8px}
.kiosk-note span{display:block;color:var(--muted);font-size:15px;font-weight:650;line-height:1.6}

.search-filter-row{
  display:grid;grid-template-columns:minmax(0,1.5fr) auto auto auto;gap:12px;
  margin-top:0;position:relative;z-index:1;align-items:stretch
}
.search-wrap{
  position:relative;min-height:56px;border-radius:18px;
  background:linear-gradient(180deg, #e8eef4, #d4dce6);
  border:2px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 16px 34px rgba(0,0,0,.18)
}
.search-wrap::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  pointer-events:none
}
.search-wrap input{
  width:100%;height:100%;background:transparent;border:none;outline:none;border-radius:24px;
  color:#0a1624;padding:0 18px 0 52px;font-size:18px;font-weight:820
}
.search-wrap input::placeholder{color:#6a7a8a;opacity:1}
.search-wrap svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);opacity:.7}
.search-wrap svg path{stroke:#3a4a5a}
.filter-chip{
  min-height:60px;padding:0 18px;border-radius:20px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;
  font-size:16px;font-weight:850;white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 28px rgba(0,0,0,.12);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease
}
.filter-chip:hover,.sort-choice:hover,.folder-tab:hover,.cta:hover,.modal-close:hover{transform:translateY(-2px)}
.filter-chip:active,.sort-choice:active,.folder-tab:active,.cta:active,.modal-close:active{transform:translateY(0) scale(.985)}
.filter-chip .toggle-dot{
  width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.34);
  box-shadow:0 0 0 4px rgba(255,255,255,.06)
}
.filter-chip.reef{background:linear-gradient(180deg,rgba(30,60,55,.8),rgba(20,42,38,.8));border-color:rgba(84,236,204,.30)}
.filter-chip.beginner{background:linear-gradient(180deg,rgba(55,48,25,.8),rgba(38,32,14,.8));border-color:rgba(245,218,85,.30)}
.filter-chip.clear{background:linear-gradient(180deg,rgba(48,32,60,.8),rgba(30,20,38,.8));border-color:rgba(181,112,255,.28)}
.filter-chip.active{
  filter:saturate(1.1) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 18px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.04)
}
.filter-chip.reef.active{border-color:rgba(84,236,204,.48)}
.filter-chip.beginner.active{border-color:rgba(245,218,85,.48)}
.filter-chip .toggle-dot.on{background:linear-gradient(180deg,#f5fbff,#9fe7ff);box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 0 16px rgba(163,231,255,.35)}

.sort-panel{
  margin-top:10px;display:flex;align-items:center;gap:10px;
  position:relative;z-index:1;flex-wrap:wrap
}
.sort-copy{
  padding:0;background:none;border:none;box-shadow:none;min-width:auto
}
.sort-copy strong{display:inline;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(160,180,200,.5)}
.sort-copy span{display:none}
.sort-grid{
  display:flex;gap:8px;flex-wrap:wrap
}
.sort-choice{
  min-height:44px;padding:10px 16px;border-radius:14px;text-align:center;cursor:pointer;
  background:linear-gradient(180deg,rgba(30,34,44,.9),rgba(22,26,34,.9));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.1);
  transition:.16s ease;display:flex;align-items:center;gap:6px
}
.sort-choice small{
  display:none
}
.sort-choice strong{display:inline;font-size:15px;font-weight:800;line-height:1}
.sort-choice.active{
  background:linear-gradient(180deg,rgba(40,48,60,.95),rgba(30,36,48,.95));
  border-color:rgba(90,220,200,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.14), 0 0 0 1px rgba(90,220,200,.15)
}
.sort-choice[data-sort="featured"].active{background:linear-gradient(180deg,#1a4a44,#12332e)}
.sort-choice[data-sort="name"].active{background:linear-gradient(180deg,#2a3a5e,#1c2840)}
.sort-choice[data-sort="priceLow"].active{background:linear-gradient(180deg,#4a3a1a,#322810)}
.sort-choice[data-sort="reefSafe"].active{background:linear-gradient(180deg,#3a2850,#261a36)}

.category-row{
  display:flex;gap:4px;margin-top:0;position:sticky;
  top:var(--panel-h,200px);z-index:29;
  flex-wrap:wrap;
  background:var(--bg,#07111a);
  padding:8px 0 0;
}
.folder-tab{
  --tab-top:#305f86; --tab-bottom:#213f59; --tab-border:rgba(255,255,255,.18); --tab-glow:rgba(94,193,255,.16);
  position:relative;min-height:48px;padding:10px 6px 8px;border-radius:12px 12px 4px 4px;
  display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;flex:1 1 auto;min-width:0;
  background:linear-gradient(180deg,var(--tab-top),var(--tab-bottom));
  border:1px solid var(--tab-border);border-bottom:2px solid rgba(255,255,255,.05);
  box-shadow:0 6px 16px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.08);
  font-size:14px;font-weight:800;color:rgba(255,255,255,.8);
  transition:all .25s cubic-bezier(.4,0,.2,1);text-align:center
}
.folder-tab::before{display:none}
.folder-tab span{font-size:12px;opacity:.6}
.folder-tab.active{
  color:#fff;
  transform:scale(1.1);
  z-index:5;
  border-bottom:3px solid var(--tab-glow);
  box-shadow:0 10px 30px rgba(0,0,0,.25), 0 0 0 1px var(--tab-glow), 0 0 20px var(--tab-glow), inset 0 1px 0 rgba(255,255,255,.18);
  filter:brightness(1.25)
}
.folder-tab.active::after{
  content:"";position:absolute;left:15%;right:15%;bottom:3px;height:2px;border-radius:999px;background:rgba(255,255,255,.6)
}

.results-meta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:8px;font-size:16px;color:var(--muted);position:relative;z-index:1
}
.results-meta strong{font-size:17px;color:var(--text)}
.results-meta .active-hint{font-weight:700}

.grid-wrap{margin-top:16px}
.cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.fish-card{
  position:relative;border-radius:18px;overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg, rgba(22,28,38,.92), rgba(14,18,26,.94));
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 36px rgba(0,0,0,.22);
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s;
  display:flex;flex-direction:column;
}
.fish-card::before{
  content:"";position:absolute;inset:0;background:
    radial-gradient(circle at 82% 8%, rgba(80,200,220,.08), transparent 18%),
    radial-gradient(circle at 12% 100%, rgba(86,231,214,.06), transparent 20%);
  pointer-events:none
}
.card-photo{
  position:relative;height:180px;background:linear-gradient(135deg,#1a2233,#0e151f);overflow:hidden
}
.card-photo img{width:100%;height:100%;object-fit:cover}
.card-photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:40%;
  background:linear-gradient(180deg,transparent,rgba(14,18,26,.9))
}
.image-placeholder{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:48px;font-weight:900;letter-spacing:.06em;color:rgba(240,248,255,.7)
}
.tank-badge{
  display:none
}
.card-body{padding:12px 14px 14px;flex:1;display:flex;flex-direction:column}
.card-title{margin:0;font-size:22px;line-height:1.05;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sci{margin-top:2px;font-size:12px;color:rgba(200,215,230,.55);font-style:italic;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-info-strip{
  display:flex;align-items:center;gap:5px;margin-top:6px;flex-wrap:nowrap;overflow:hidden
}
.price-badge{
  padding:5px 10px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,rgba(50,220,180,.15),rgba(30,140,110,.12));
  border:1px solid rgba(80,230,190,.2);
}
.price-label{display:none}
.price-value{font-size:20px;font-weight:950;line-height:1;color:#5eebc8;text-shadow:0 0 20px rgba(94,235,200,.2)}
.tank-pill{
  padding:5px 9px;border-radius:8px;flex:0 0 auto;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  font-size:12px;font-weight:800;color:rgba(255,255,255,.65);letter-spacing:.04em
}
.card-category{
  margin-top:0;display:inline-flex;padding:4px 8px;border-radius:8px;flex:0 0 auto;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.card-category.cat-tangs{background:rgba(40,85,168,.3);border:1px solid rgba(80,140,255,.3);color:rgba(120,170,255,.9)}
.card-category.cat-angelfish{background:rgba(204,102,34,.25);border:1px solid rgba(255,160,60,.3);color:rgba(255,180,100,.9)}
.card-category.cat-wrasses{background:rgba(136,51,187,.25);border:1px solid rgba(180,100,255,.3);color:rgba(200,140,255,.9)}
.card-category.cat-gobies{background:rgba(46,136,68,.25);border:1px solid rgba(80,200,120,.3);color:rgba(110,220,140,.9)}
.card-category.cat-clownfish{background:rgba(221,119,34,.25);border:1px solid rgba(255,180,60,.3);color:rgba(255,200,100,.9)}
.card-category.cat-other{background:rgba(187,51,68,.25);border:1px solid rgba(255,100,110,.3);color:rgba(255,140,140,.9)}
.card-category.cat-inverts{background:rgba(34,136,136,.25);border:1px solid rgba(80,220,210,.3);color:rgba(120,230,220,.9)}
.card-chip-row{display:none}
/* === UNIFIED STATUS BAR === */
.status-bar{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:8px;
  border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.06);
}
.status-cell{padding:6px 4px;text-align:center}
.status-cell .s-label{
  font-size:7px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-bottom:1px;
}
.status-cell .s-val{font-size:10px;font-weight:800}
.status-cell.s-reef{background:rgba(78,221,187,.08)}.status-cell.s-reef .s-val{color:#4eddbb}
.status-cell.s-care{background:rgba(180,120,238,.08)}.status-cell.s-care .s-val{color:#b878ee}
.status-cell.s-agg{background:rgba(232,152,56,.08)}.status-cell.s-agg .s-val{color:#e89838}
/* Danger overrides */
.status-cell.s-reef.warn{background:rgba(232,152,56,.08)}.status-cell.s-reef.warn .s-val{color:#e89838}
.status-cell.s-reef.risk{background:rgba(255,80,80,.08)}.status-cell.s-reef.risk .s-val{color:#ff6464}
.status-cell.s-care.hard{background:rgba(255,100,100,.08)}.status-cell.s-care.hard .s-val{color:#ff6464}
.status-cell.s-agg.hot{background:rgba(255,80,80,.08)}.status-cell.s-agg.hot .s-val{color:#ff6464}
body.light-mode .status-bar{border-color:rgba(0,0,0,.06)}
body.light-mode .status-cell .s-label{color:rgba(0,0,0,.35)}
body.light-mode .status-cell.s-reef{background:rgba(78,221,187,.1)}
body.light-mode .status-cell.s-care{background:rgba(180,120,238,.08)}
body.light-mode .status-cell.s-agg{background:rgba(232,152,56,.08)}
.status-pill{
  padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 4px 10px rgba(0,0,0,.06);white-space:nowrap
}
.status-pill::before{
  content:"";width:7px;height:7px;border-radius:50%;display:block;flex:0 0 auto
}
.status-pill.safe{background:linear-gradient(180deg, rgba(49,225,140,.42), rgba(18,90,52,.38));color:#effff6}
.status-pill.safe::before{background:#5cffb2;box-shadow:0 0 12px rgba(92,255,178,.74)}
.status-pill.warn{background:linear-gradient(180deg, rgba(255,187,76,.46), rgba(118,74,16,.36));color:#fff3cf}
.status-pill.warn::before{background:#ffd76b;box-shadow:0 0 12px rgba(255,215,107,.66)}
.status-pill.risk{background:linear-gradient(180deg, rgba(245,97,77,.46), rgba(88,16,31,.46));color:#ffe4df}
.status-pill.risk::before{background:#ff8e7a;box-shadow:0 0 12px rgba(255,142,122,.68)}
/* Reef pills — teal/green family */
.status-pill.reef-safe{background:linear-gradient(180deg, rgba(40,200,160,.35), rgba(15,80,60,.35));color:#d0fff0}
.status-pill.reef-safe::before{background:#4eddbb;box-shadow:0 0 10px rgba(78,221,187,.7)}
.status-pill.reef-ok{background:linear-gradient(180deg, rgba(60,200,180,.28), rgba(20,90,75,.28));color:#c8f8e8}
.status-pill.reef-ok::before{background:#5cc8aa;box-shadow:0 0 10px rgba(92,200,170,.6)}
.status-pill.reef-warn{background:linear-gradient(180deg, rgba(220,170,50,.35), rgba(100,70,10,.35));color:#fff2c8}
.status-pill.reef-warn::before{background:#e8c040;box-shadow:0 0 10px rgba(232,192,64,.65)}
.status-pill.reef-risk{background:linear-gradient(180deg, rgba(220,70,60,.35), rgba(90,20,15,.35));color:#ffd8d0}
.status-pill.reef-risk::before{background:#e85548;box-shadow:0 0 10px rgba(232,85,72,.65)}
/* Care pills — blue/purple family */
.status-pill.care-easy{background:linear-gradient(180deg, rgba(80,160,255,.3), rgba(30,60,120,.3));color:#d0e4ff}
.status-pill.care-easy::before{background:#60b0ff;box-shadow:0 0 10px rgba(96,176,255,.65)}
.status-pill.care-mod{background:linear-gradient(180deg, rgba(140,120,220,.3), rgba(55,40,100,.3));color:#ddd0ff}
.status-pill.care-mod::before{background:#a088dd;box-shadow:0 0 10px rgba(160,136,221,.6)}
.status-pill.care-inter{background:linear-gradient(180deg, rgba(160,100,220,.32), rgba(65,30,100,.32));color:#e4d0ff}
.status-pill.care-inter::before{background:#b878ee;box-shadow:0 0 10px rgba(184,120,238,.6)}
.status-pill.care-expert{background:linear-gradient(180deg, rgba(200,80,200,.32), rgba(80,20,80,.32));color:#ffd0ff}
.status-pill.care-expert::before{background:#dd66dd;box-shadow:0 0 10px rgba(221,102,221,.6)}
/* Aggression pills — warm/cool family */
.status-pill.agg-calm{background:linear-gradient(180deg, rgba(80,180,200,.28), rgba(25,70,85,.28));color:#d0f0f8}
.status-pill.agg-calm::before{background:#5cc0dd;box-shadow:0 0 10px rgba(92,192,221,.6)}
.status-pill.agg-mild{background:linear-gradient(180deg, rgba(200,180,80,.28), rgba(85,70,20,.28));color:#f5eec0}
.status-pill.agg-mild::before{background:#d0b840;box-shadow:0 0 10px rgba(208,184,64,.55)}
.status-pill.agg-mod{background:linear-gradient(180deg, rgba(230,140,50,.32), rgba(100,55,10,.32));color:#ffe0b8}
.status-pill.agg-mod::before{background:#e89838;box-shadow:0 0 10px rgba(232,152,56,.6)}
.status-pill.agg-hot{background:linear-gradient(180deg, rgba(230,80,50,.35), rgba(95,25,10,.35));color:#ffd0c0}
.status-pill.agg-hot::before{background:#e86040;box-shadow:0 0 10px rgba(232,96,64,.65)}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.meta-box{
  padding:8px 10px;border-radius:12px;
  background:linear-gradient(180deg, rgba(26,30,40,.95), rgba(18,22,30,.96));
  border:1px solid rgba(255,255,255,.06)
}
.meta-label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(180,200,220,.5);font-weight:900}
.meta-value{margin-top:3px;font-size:14px;font-weight:800;line-height:1.25;color:rgba(230,240,250,.9)}
.card-copy{
  margin-top:8px;color:rgba(220,230,240,.65);font-size:13px;line-height:1.55;font-weight:650;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
}
.tap-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:rgba(90,220,200,.7)
}
.empty-state{
  grid-column:1/-1;padding:44px;border-radius:24px;
  background:linear-gradient(180deg, rgba(22,28,38,.94), rgba(14,18,26,.96));
  border:1px solid rgba(255,255,255,.06);text-align:center;color:var(--muted);font-size:19px;line-height:1.8
}
/* v0.144 — "Did you mean" suggestions block. Renders inside the empty
   state when a search returns zero results but the typed query is close
   to one or more real species names. Tappable pills replace the search
   input with the suggested name. */
.empty-state .empty-state-text{margin-top:18px;color:var(--muted)}
.did-you-mean{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-bottom:8px;
}
.dym-label{
  font-size:13px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7df0d3;
}
.dym-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  max-width:680px;
}
.dym-pill{
  appearance:none;
  cursor:pointer;
  padding:11px 18px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(46,48,56,0.62), rgba(28,30,38,0.76));
  border:1px solid rgba(94,235,200,0.42);
  color:#eaf8f5;
  font-size:15px;
  font-weight:800;
  font-family:inherit;
  letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.dym-pill:hover{
  background:linear-gradient(180deg, rgba(28,100,118,0.78), rgba(14,52,72,0.88));
  box-shadow:0 6px 16px rgba(94,235,200,.18);
  transform:translateY(-1px);
}
.dym-pill:active{
  transform:scale(.96);
}

.overlay.show{display:flex}
.fish-modal{
  position:relative;width:min(96vw,1460px);max-height:min(95vh,1180px);overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:34px;background:linear-gradient(180deg, rgba(46,48,56,.99), rgba(28,30,38,.995));
  border:1px solid rgba(200,232,255,.12);box-shadow:0 34px 90px rgba(0,0,0,.50)
}
.modal-close{
  position:absolute;top:12px;right:12px;left:auto;z-index:30;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;cursor:pointer;background:linear-gradient(180deg,#2c2e36,#1c1e26);
  border:1px solid rgba(200,232,255,.16);font-size:22px;font-weight:950;box-shadow:0 8px 20px rgba(0,0,0,.3);
  margin:0;
}
.modal-close:hover{background:linear-gradient(180deg,#471f30,#28131d);border-color:rgba(245,97,77,.32)}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:56px 24px 26px;overscroll-behavior:contain}
.modal-layout{display:grid;grid-template-columns:minmax(360px,540px) minmax(0,1fr);gap:22px;padding-bottom:8px;align-items:start}
.modal-left,.modal-right{display:grid;gap:18px;align-content:start}
.modal-photo-card,.modal-section,.modal-stat,.fact-card,.origin-card,.staff-card{
  border-radius:28px;border:1px solid rgba(200,232,255,.10);box-shadow:var(--shadow-soft)
}
.modal-photo-card{overflow:hidden;background:linear-gradient(180deg, rgba(46,48,56,.86), rgba(28,30,38,.96))}
.modal-photo{
  position:relative;height:450px;background:linear-gradient(135deg,#2c2e36,#1c1e26);overflow:hidden
}
.modal-photo img{width:100%;height:100%;object-fit:cover}
.modal-photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:48%;
  background:linear-gradient(180deg, transparent, rgba(22,24,30,.88))
}
.modal-photo-copy{position:absolute;left:22px;right:18px;bottom:20px;z-index:2}
.modal-photo-copy h2{margin:0;font-size:clamp(42px,4vw,58px);line-height:.98;letter-spacing:-.045em}
.modal-photo-copy .latin{display:block;margin-top:9px;color:#e0f2ff;font-size:22px;font-style:italic;font-weight:650}
.modal-mini{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mini-pill{
  padding:10px 13px;border-radius:999px;background:rgba(8,18,28,.76);border:1px solid rgba(255,255,255,.14);
  font-size:14px;font-weight:900
}
.modal-headline{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap
}
.modal-type{
  padding:10px 14px;border-radius:999px;background:linear-gradient(135deg, rgba(86,231,214,.18), rgba(109,183,255,.14));
  border:1px solid rgba(150,223,255,.22);font-size:13px;font-weight:900;letter-spacing:.16em;text-transform:uppercase
}
.modal-headline p{margin:11px 0 0;color:#eff8ff;font-size:20px;line-height:1.72;font-weight:750;max-width:72ch}
.subtle{color:#bfd2e2;font-weight:650}
.price-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.modal-stat{
  padding:18px 18px 16px;background:linear-gradient(180deg, rgba(46,48,56,.90), rgba(28,30,38,.96))
}
.modal-stat .meta-label{font-size:12px}
.modal-stat .meta-value{font-size:28px}
.modal-stat .meta-sub{margin-top:6px;color:#d3e2ef;font-size:14px;line-height:1.55;font-weight:650}
.modal-section{
  padding:18px 18px 20px;background:linear-gradient(180deg, rgba(46,48,56,.90), rgba(22,24,30,.96))
}
.modal-section.ocean{background:linear-gradient(180deg, rgba(46,48,56,.94), rgba(28,30,38,.97))}
.modal-section.seafoam{background:linear-gradient(180deg, rgba(20,57,66,.92), rgba(10,25,29,.97))}
.modal-section.gold{background:linear-gradient(180deg, rgba(63,50,18,.84), rgba(23,18,8,.96))}
.modal-section.plum{background:linear-gradient(180deg, rgba(52,28,69,.84), rgba(17,10,24,.97))}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-title h3{margin:0;font-size:15px;letter-spacing:.19em;text-transform:uppercase;color:#d1ebff}
.overview{margin:0;color:#f6fbff;font-size:20px;font-weight:820;line-height:1.72}
.reading-stack{display:grid;gap:12px}
.reading-block{
  padding:16px 16px;border-radius:22px;background:linear-gradient(180deg, rgba(28,30,38,.54), rgba(22,24,30,.66));
  border:1px solid rgba(200,232,255,.08)
}
.reading-block strong{display:block;margin-bottom:8px;font-size:15px;letter-spacing:.15em;text-transform:uppercase;color:#d7f0ff}
.reading-block p{margin:0;color:#eff8ff;font-size:18px;font-weight:720;line-height:1.74}
.gauges{display:grid;gap:14px}
.gauge-card{
  padding:16px 16px;border-radius:22px;background:linear-gradient(180deg, rgba(9,21,34,.68), rgba(7,14,23,.76));
  border:1px solid rgba(200,232,255,.08)
}
.gauge-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gauge-head strong{font-size:19px;line-height:1.2}
.gauge-head span{font-size:18px;font-weight:950}
.gauge-track{
  position:relative;margin-top:12px;height:18px;border-radius:999px;background:var(--gauge-spectrum);overflow:hidden;isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 8px 16px rgba(0,0,0,.18)
}
.gauge-track::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0))
}
.gauge-liquid{
  position:absolute;left:2px;top:2px;bottom:2px;width:calc(var(--gauge-score, 50%) - 4px);min-width:14px;border-radius:999px;z-index:1;overflow:hidden;
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.26) 18%, rgba(255,255,255,.10) 34%, rgba(255,255,255,.03) 70%);
  box-shadow:0 0 18px rgba(120,220,255,.18), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 8px rgba(10,30,44,.28);
  transform-origin:left center;animation:gaugeFillReveal 760ms cubic-bezier(.22,.8,.2,1) both;
}
.gauge-liquid::before,.gauge-liquid::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.gauge-liquid::before{
  background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 34%, rgba(255,255,255,0) 68%);
  transform:translateX(-120%);animation:liquidSweep 4.8s cubic-bezier(.22,.8,.2,1) .55s infinite;opacity:.85;
}
.gauge-liquid::after{
  inset:auto 8% 2px 8%;height:44%;background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));filter:blur(1px);opacity:.7;
}
.gauge-marker{
  position:absolute;top:50%;transform:translate(-50%,-50%) scale(.78);width:28px;height:28px;border-radius:50%;z-index:3;opacity:0;
  background:#fff;border:5px solid rgba(8,16,25,.96);box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.36);
  animation:gaugeMarkerPop 520ms cubic-bezier(.2,.9,.2,1) .18s forwards, gaugeMarkerDrift 4.2s ease-in-out 1.1s infinite;
}
.gauge-card:nth-child(2) .gauge-liquid{animation-delay:.08s}
.gauge-card:nth-child(2) .gauge-liquid::before{animation-delay:.63s}
.gauge-card:nth-child(2) .gauge-marker{animation-delay:.22s,1.18s}
.gauge-card:nth-child(3) .gauge-liquid{animation-delay:.14s}
.gauge-card:nth-child(3) .gauge-liquid::before{animation-delay:.69s}
.gauge-card:nth-child(3) .gauge-marker{animation-delay:.28s,1.24s}
.gauge-card:nth-child(4) .gauge-liquid{animation-delay:.2s}
.gauge-card:nth-child(4) .gauge-liquid::before{animation-delay:.75s}
.gauge-card:nth-child(4) .gauge-marker{animation-delay:.34s,1.3s}
.gauge-scale{
  display:flex;justify-content:space-between;gap:12px;margin-top:11px;font-size:13px;font-weight:850;color:#c3d4e2
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pill-list{display:flex;flex-wrap:wrap;gap:10px}
.list-pill{
  padding:11px 13px;border-radius:999px;background:linear-gradient(180deg, rgba(46,48,56,.94), rgba(28,30,38,.98));
  border:1px solid rgba(200,232,255,.12);font-size:15px;font-weight:900;color:#f4fbff
}
.fact-stack{display:grid;gap:12px}
.fact-card{
  padding:16px 17px;background:linear-gradient(180deg, rgba(46,48,56,.94), rgba(22,24,30,.97));
  font-size:17px;font-weight:720;line-height:1.72;color:#eef8ff
}
.origin-card{
  padding:19px;background:linear-gradient(135deg, rgba(72,193,209,.16), rgba(57,110,181,.13));
  border-color:rgba(152,224,255,.20)
}
.staff-card{
  padding:19px;background:linear-gradient(135deg, rgba(255,176,84,.14), rgba(245,97,77,.09));
  border-color:rgba(255,190,110,.20)
}
.origin-card strong,.staff-card strong{display:block;font-size:16px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.origin-card p,.staff-card p{margin:0;font-size:17px;font-weight:720;line-height:1.74}
.action-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.cta{
  min-height:62px;padding:0 18px;border-radius:22px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;font-size:16px;font-weight:950;transition:.16s ease
}
.cta.primary{
  background:linear-gradient(135deg, rgba(86,231,214,.98), rgba(109,183,255,.98));
  color:#06111b;box-shadow:0 18px 30px rgba(86,231,214,.18)
}
.cta.secondary{
  background:linear-gradient(180deg,#223f5f,#15283d);border:1px solid rgba(152,224,255,.24);color:#eef8ff
}
.modal-footnote{margin-top:12px;color:#c3d8e8;font-size:15px;font-weight:650;line-height:1.72}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);opacity:0;pointer-events:none;
  background:rgba(22,24,30,.95);border:1px solid rgba(152,224,255,.20);color:#f7fcff;border-radius:999px;padding:13px 18px;
  font-weight:900;box-shadow:var(--shadow);transition:.24s ease;
  /* v0.156 — z-index bumped from 80 to 9999. Was rendering BEHIND the
     inventory overlay (z:85) and receive flow overlay (z:115), so toasts
     after a successful receive were invisible. Now above everything. */
  z-index:9999
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hidden{display:none !important}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a1624}
::-webkit-scrollbar-thumb{background:#24415f;border-radius:999px}

@media (min-width:1800px){
  .cards{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:1260px){
  .search-filter-row{grid-template-columns:1fr 1fr}
  .search-wrap{grid-column:1/-1}
  .sort-panel{flex-direction:row}
  .sort-grid{flex-wrap:wrap}
  .modal-layout{grid-template-columns:1fr}
  .price-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col{grid-template-columns:1fr}

  .cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}

  .folder-tab{font-size:13px;padding:10px 8px 8px}
}
@media (max-width:860px){
  .topbar-inner,.shell{padding-left:16px;padding-right:16px}
  .header-pill{display:none}
  .search-filter-row{display:flex;flex-wrap:wrap;gap:8px;grid-template-columns:none}
  .filter-chip{width:auto}
  .sort-grid{flex-wrap:wrap}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card-top{grid-template-columns:1fr}
  .price-badge{min-width:0}
  .card-title{font-size:30px}
  .modal-body{padding:0 16px 18px}
  .price-band{grid-template-columns:1fr}
  .modal-photo{height:320px}
  .modal-photo-copy .latin{font-size:18px}
  .category-row{
    display:flex;overflow-x:auto;gap:6px;
    grid-template-columns:none;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .category-row::-webkit-scrollbar{display:none}
  .folder-tab{font-size:12px;padding:8px 12px 6px;min-height:40px;min-width:max-content;flex-shrink:0}
}

/* === MOBILE — PHONES (600px and below) === */
/* === MOBILE — PHONES (600px and below) === */
/* === PHONE PORTRAIT (600px and below) === */
@media (max-width:600px) and (pointer:coarse){
  :root{--tap:38px}
  
  /* --- HEADER: ultra compact --- */
  .topbar{padding:2px 6px!important;padding-top:calc(2px + var(--safe-top))!important;min-height:0!important}
  .topbar-inner{flex-wrap:nowrap;gap:3px;padding:2px 0!important}
  .topbar-actions{gap:2px;flex-wrap:nowrap}
  .brand-mark{flex-shrink:0;width:28px!important;height:28px!important;border-radius:8px!important}
  .brand-mark img{width:20px!important}
  .brand-title{display:none!important}
  .brand-sub{display:none!important}
  .header-pill{display:none!important}
  .theme-toggle{padding:1px 3px;font-size:9px;min-height:20px;flex-shrink:0;border-radius:6px}
  .theme-toggle[onclick*="print"]{display:none}
  .staff-badge{padding:1px 3px;font-size:7px;min-height:20px;flex-shrink:0}
  
  .shell{padding:0 8px 40px;padding-left:max(8px,var(--safe-left));padding-right:max(8px,var(--safe-right))}
  
  /* --- ONE STICKY RAIL: search + mode toggle + filters + categories --- */
  .control-panel{
    position:sticky!important;top:0!important;z-index:30;
    padding:6px 8px 2px!important;padding-top:calc(6px + var(--safe-top))!important;
    border-radius:0!important;margin:0 -8px;
    background:rgba(7,17,26,.96)!important;
    border:none!important;border-bottom:1px solid rgba(255,255,255,.06)!important;
    box-shadow:0 2px 12px rgba(0,0,0,.4)!important;
    backdrop-filter:blur(16px);overflow:visible!important;
  }
  body.light-mode .control-panel{background:rgba(240,244,248,.96)!important}
  
  /* Mode toggle row — compact, visible */
  .control-top-row{
    display:flex!important;gap:4px;padding-bottom:4px!important;
    margin-bottom:4px!important;border-bottom:none!important;
    flex-wrap:nowrap!important;align-items:center;
  }
  .control-top-row .mode-toggle{gap:3px}
  .control-top-row .mode-btn{padding:3px 10px;font-size:10px;border-radius:8px;min-height:22px;border-width:1px}
  .control-top-row .tank-builder{display:none}
  .control-top-row .fav-count{font-size:9px;padding:2px 5px;margin-left:auto}
  
  /* Search — FULL WIDTH, own row */
  .search-filter-row{display:flex!important;flex-wrap:wrap!important;gap:4px;grid-template-columns:none!important}
  .search-wrap{
    width:100%!important;flex:0 0 100%!important;order:-1;
    height:40px;min-height:40px;max-height:40px;padding:0;border-radius:10px;
    min-height:40px!important;
  }
  .search-wrap input{height:40px;font-size:16px;padding:0 10px 0 34px;font-weight:700}
  .search-wrap svg{left:10px;width:16px;height:16px}
  .filter-chip{flex:0 0 auto;height:26px;min-height:26px;max-height:26px;padding:0 7px;border-radius:6px;font-size:10px;gap:2px}
  .filter-chip .toggle-dot{width:7px;height:7px}
  .sort-panel{display:none!important}
  
  /* Promo area */
  .promo-area{margin:6px 0}
  #fishOfTheWeek>div{padding:8px!important;border-radius:10px!important;margin-bottom:4px!important}
  #bundleSection{position:relative}
  #bundleSection::after{content:"";position:absolute;right:0;top:0;bottom:0;width:30px;background:linear-gradient(90deg,transparent,var(--bg,#07111a));pointer-events:none;z-index:1}
  
  /* Category tabs — sticky below control panel */
  .category-row{
    display:flex!important;overflow-x:auto!important;gap:3px;
    flex-wrap:nowrap!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -8px!important;padding:4px 8px!important;
    background:rgba(7,17,26,.96)!important;
  }
  body.light-mode .category-row{background:rgba(240,244,248,.96)!important}
  .category-row::-webkit-scrollbar{display:none}
  .folder-tab{font-size:9px;padding:4px 8px 3px;min-height:24px;flex:0 0 auto!important;min-width:max-content!important;border-radius:6px 6px 0 0}
  .folder-tab.active{transform:none!important}
  .folder-content{border-radius:0!important;border-left:none!important;border-right:none!important;padding:6px 0!important;margin:0 -8px;border-top:1px solid rgba(255,255,255,.06)}
  
  /* --- CARDS --- */
  .cards{grid-template-columns:1fr!important;gap:8px;padding:0 8px}
  .card-photo{height:120px}
  .card-body{padding:5px 7px 6px}
  .card-title{font-size:13px}
  .card-sci{font-size:8px}
  .card-info-strip{gap:2px;flex-wrap:wrap}
  .price-value{font-size:13px}
  .tank-pill{font-size:7px;padding:2px 3px}
  .card-category{font-size:7px;padding:2px 3px;max-width:70px}
  .status-bar{margin-top:2px}
  .status-cell{padding:2px 1px}
  .status-cell .s-label{font-size:5px}
  .status-cell .s-val{font-size:7px}
  .meta-grid{display:none!important}
  .card-copy{display:none!important}
  .tap-row{font-size:7px;margin-top:2px}
  .badge{font-size:6px!important;padding:1px 3px!important}
  
  /* List mode — 2 columns on mobile */
  
  
  
  
  
  

  /* === MODAL — clean phone architecture === */
  /* Overlay: fullscreen, no padding */
  .overlay{padding:0!important}
  
  /* Modal shell: fixed fullscreen, simple */
  .fish-modal{
    position:fixed!important;inset:0!important;
    width:100%!important;max-width:none!important;
    height:100%!important;max-height:none!important;
    border-radius:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }
  
  /* Close: absolute in top-right, rides on scroll */
  .modal-close{
    position:absolute!important;top:8px;right:8px;left:auto!important;
    width:36px;height:36px;border-radius:10px;font-size:16px;
    z-index:100;margin:0!important;float:none!important;
    background:rgba(28,30,38,.85)!important;backdrop-filter:blur(8px);
  }
  
  /* Body: no flex tricks, just normal flow inside scrolling shell */
  .modal-body{
    padding:0 10px calc(14px + var(--safe-bottom))!important;
    overflow:visible!important;
  }
  
  /* Layout: single column block flow */
  .modal-layout{display:block!important}
  .modal-left,.modal-right{display:block!important;min-width:0!important;max-width:100%!important}
  .two-col{display:grid;grid-template-columns:1fr!important;gap:8px}
  .price-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
  .similar-row{display:grid;grid-template-columns:1fr!important;gap:8px}
  
  .modal-photo{height:168px}
  .modal-photo-copy h2{font-size:20px;overflow-wrap:anywhere}
  .modal-photo-copy .latin{font-size:11px}
  .modal-photo-copy{left:12px;right:10px;bottom:10px}
  .modal-photo-card{border-radius:12px;overflow:hidden}
  
  /* Modal sections — consistent sizing */
  .modal-section{padding:10px;border-radius:10px;overflow:hidden}
  .fact-card,.origin-card,.staff-card{padding:10px;border-radius:10px;overflow:hidden}
  .section-title h3{font-size:12px;letter-spacing:.06em}
  .overview{font-size:12px;line-height:1.5}
  .reading-block p,.origin-card p,.staff-card p,.fact-card p{font-size:11px;line-height:1.5}
  .stat-value{font-size:16px}
  .stat-label{font-size:6px}
  .stat-sub{font-size:9px}
  .gauge-row{flex-direction:column;gap:4px}
  .gauge-head strong{font-size:11px}
  .gauge-head span{font-size:9px}
  .mini-pill{font-size:8px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .list-pill{font-size:9px;padding:2px 5px;white-space:normal;overflow-wrap:anywhere}
  .cta{padding:7px 10px;font-size:11px;border-radius:8px}
  .action-row{flex-wrap:wrap;gap:4px}
  .modal-footnote{display:none}
  
  /* Water params — 1 column on phone */
  .water-param-grid{grid-template-columns:1fr!important;gap:6px}
  .water-param-card{padding:8px;border-radius:10px}
  
  /* --- COMPARE --- */
  .compare-bar{padding:6px 8px calc(6px + var(--safe-bottom))!important;gap:4px!important}
  .compare-bar .compare-chip{font-size:10px;padding:4px 6px;max-width:75px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .compare-bar .compare-chip .remove{font-size:8px;margin-left:2px}
  .compare-bar button{font-size:10px;padding:6px 10px;white-space:nowrap;flex-shrink:0}
  .compare-overlay{padding:0!important}
  .compare-panel{
    width:100vw!important;max-width:none!important;
    min-height:100dvh;max-height:100dvh;
    border-radius:0!important;padding:10px!important;
    padding-bottom:calc(10px + var(--safe-bottom))!important;
    overflow-y:auto!important;overflow-x:hidden!important;
  }
  /* 2-fish compare: hide labels, full width cells */
  .cmp-cols-2{grid-template-columns:1fr 1fr!important}
  .cmp-cols-3{grid-template-columns:1fr 1fr 1fr!important}
  .cmp-corner{display:none!important}
  .cmp-label{display:none!important}
  .cmp-section-label{font-size:9px!important;grid-column:1/-1}
  .cmp-cell{padding:4px 6px!important;font-size:10px!important}
  .cmp-head{padding:6px!important}
  .cmp-photo{height:50px!important}
  .cmp-name{font-size:11px!important}
  .cmp-sci{font-size:8px!important}
  .cmp-gauge-val{font-size:9px!important;min-width:18px!important}
  
  /* Overlays */
  .pin-box{padding:16px;max-width:92%}
  .input-modal{padding:14px;border-radius:12px;max-width:95%!important}
  .input-modal h3{font-size:15px}
  .input-modal-field input,.input-modal-field select{padding:7px;font-size:16px}
  .idle-logo{max-width:140px!important}
  .idle-text{font-size:16px}
  .idle-sub{font-size:10px}
  .toast{font-size:10px;padding:5px 12px;border-radius:8px;bottom:calc(12px + var(--safe-bottom));left:8px;right:8px;text-align:center}
  #resultsCount,#activeHint{font-size:9px}
}

/* === TINY PHONES (380px and below) === */
@media (max-width:380px){
  .brand-title{font-size:13px}
  .cards{grid-template-columns:1fr!important}
  .card-photo{height:170px}
  .card-title{font-size:16px}
  .meta-grid{grid-template-columns:1fr!important}
}

/* === LANDSCAPE PHONES === */
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  :root{--tap:28px}
  
  /* Control panel scrolls away in landscape, search inside it */

  .topbar{padding:1px 6px!important;padding-top:calc(1px + var(--safe-top))!important;min-height:0!important}
  .topbar-actions{gap:2px}
  .brand-mark img{width:18px!important}
  .brand-title{font-size:11px}
  .brand-sub{display:none}
  .header-pill{display:none}
  .theme-toggle{padding:1px 3px;font-size:9px;min-height:20px}
  .theme-toggle[onclick*="print"]{display:none}
  .staff-badge{padding:1px 3px;font-size:7px;min-height:20px}
  
  .shell{padding:2px 6px 10px}
  .control-panel{
    position:sticky!important;top:0!important;z-index:30;
    padding:3px 6px 2px;border-radius:0!important;
    margin:0 -6px;background:rgba(7,17,26,.96)!important;
    border:none!important;border-bottom:1px solid rgba(255,255,255,.06)!important;
    box-shadow:0 2px 8px rgba(0,0,0,.3)!important;overflow:visible!important;
  }
  .control-top-row{display:none!important}
  .sort-panel{display:none!important}
  #fishOfTheWeek{display:none!important}
  #bundleSection{display:none!important}
  #resultsCount,#activeHint{display:none!important}
  
  .search-filter-row{display:flex!important;flex-wrap:nowrap;gap:3px;grid-template-columns:none!important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .search-filter-row::-webkit-scrollbar{display:none}
  .search-wrap{height:26px;min-height:26px;max-height:26px;padding:0;border-radius:5px;flex:1 1 auto;min-width:120px}
  .search-wrap input{height:26px;font-size:16px;padding:0 6px 0 24px}
  .search-wrap svg{left:5px;width:12px;height:12px}
  .filter-chip{width:auto!important;flex:0 0 auto;height:22px;min-height:22px;max-height:22px;padding:0 5px;font-size:8px;border-radius:4px;gap:2px}
  .filter-chip .toggle-dot{width:6px;height:6px}
  
  .category-row{display:flex!important;overflow-x:auto;gap:2px;margin-top:2px;grid-template-columns:none!important;scrollbar-width:none;flex-wrap:nowrap!important}
.category-row::-webkit-scrollbar{display:none}
  .category-row::-webkit-scrollbar{display:none}
  .folder-tab{font-size:8px;padding:3px 5px 2px;min-height:20px;min-width:max-content;flex-shrink:0;border-radius:4px 4px 0 0}
  .folder-tab.active{transform:none!important}
  
  .cards{grid-template-columns:repeat(3,1fr)!important;gap:4px}
  .card-photo{height:80px}
  .card-body{padding:3px 4px 4px}
  .card-title{font-size:10px}
  .card-sci{display:none}
  .card-info-strip{gap:1px}
  .price-value{font-size:10px}
  .tank-pill{font-size:6px;padding:1px 2px}
  .card-category{font-size:5px;padding:1px 2px}
  .badge{font-size:5px!important;padding:1px 2px!important}
  .status-bar{margin-top:1px}
  .status-cell{padding:1px 1px}
  .status-cell .s-label{font-size:4px}
  .status-cell .s-val{font-size:6px}
  .meta-grid{display:none!important}
  .card-copy{display:none!important}
  .tap-row{display:none!important}
  .staff-actions{display:none!important}
  
  /* Landscape modal — two-column, compact */
  .overlay{padding:0!important}
    .fish-modal{
    position:fixed!important;inset:0!important;
    width:100%!important;max-width:none!important;
    height:100%!important;max-height:none!important;
    border-radius:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;
  }
  .modal-close{
    position:absolute!important;top:6px;right:6px;left:auto!important;
    width:30px;height:30px;border-radius:8px;font-size:14px;
    z-index:100;margin:0!important;
    background:rgba(28,30,38,.85)!important;backdrop-filter:blur(8px);
  }
  .modal-body{height:100%;overflow-y:auto;overflow-x:hidden;padding:0 8px calc(8px + var(--safe-bottom))}
  .modal-layout{grid-template-columns:minmax(0,34vw) minmax(0,1fr)!important;gap:8px}
  .modal-photo{height:min(34dvh,150px)}
  .modal-photo-copy h2{font-size:16px}
  .modal-photo-copy .latin{font-size:10px}
  .modal-photo-copy{left:8px;bottom:6px}
  .modal-section{padding:6px;border-radius:8px;font-size:11px}
  .section-title h3{font-size:11px}
  .overview{font-size:10px}
  .price-band{grid-template-columns:1fr 1fr!important}
  .stat-value{font-size:14px}
  .stat-label{font-size:6px}
  .two-col{grid-template-columns:1fr!important}
  .modal-footnote{display:none}
  
  .idle-logo{max-width:80px!important}
  .idle-text{font-size:13px}
  .idle-sub{font-size:8px}

  /* Modal X — overlay corner */
  .modal-close{
    position:fixed!important;top:6px;right:6px;left:auto!important;
    width:32px;height:32px;border-radius:8px;font-size:14px;
    z-index:100;margin:0!important;float:none!important;
    background:rgba(28,30,38,.85)!important;backdrop-filter:blur(8px);
  }
  .modal-body *{max-width:100%!important;box-sizing:border-box!important;overflow-wrap:anywhere!important}
  .modal-section,.fact-card,.origin-card,.staff-card,
  .reading-block,.overview,.modal-headline{
    min-width:0!important;max-width:100%!important;
    overflow-wrap:anywhere!important;overflow-x:hidden!important;
  }
  /* Compare */
  .cmp-cols-2{grid-template-columns:0 1fr 1fr!important}
  .cmp-cols-3{grid-template-columns:0 1fr 1fr 1fr!important}
  .cmp-corner,.cmp-label{display:none!important}
  .cmp-cell{padding:3px 4px!important;font-size:9px!important}

  .water-param-grid{grid-template-columns:1fr 1fr!important;gap:4px}
  .modal-layout{display:block!important}

  /* Compact mode — 3 tiles in landscape */
}






/* === IDLE SCREEN === */
.idle-overlay{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(6,8,14,.97);cursor:pointer;transition:opacity .6s;
}
.idle-overlay.hidden{opacity:0;pointer-events:none}
.idle-logo{width:200px;margin-bottom:30px;animation:idlePulse 3s ease-in-out infinite}
.idle-text{font-size:28px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.04em}
.idle-sub{font-size:14px;color:rgba(255,255,255,.3);margin-top:12px}
@keyframes idlePulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}}

/* === MODE TOGGLE === */
.mode-toggle{
  display:inline-flex;flex-wrap:wrap;align-items:center;
  gap:6px;background:none;border-radius:0;border:none;
  overflow:visible;min-width:0;flex:0 0 auto;
}
.mode-btn{
  padding:8px 16px;font-size:13px;font-weight:800;letter-spacing:.04em;
  color:rgba(255,255,255,.4);cursor:pointer;border:2px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);border-radius:12px;min-width:0;white-space:nowrap;
  transition:all .25s cubic-bezier(.22,.8,.2,1);
  position:relative;overflow:hidden;
}
.mode-btn:active{transform:scale(.95);transition-duration:60ms}
.mode-btn.active{
  background:linear-gradient(135deg,rgba(90,220,200,.22),rgba(40,180,160,.16));
  color:#5eebc8;border-color:rgba(90,220,200,.4);
  box-shadow:0 0 14px rgba(90,220,200,.2),inset 0 1px 0 rgba(255,255,255,.08);

}
body.mode-ency .promo-area{display:none}
body.mode-ency .control-panel{padding-bottom:12px}
body.mode-ency .control-top-row{align-items:flex-start}
body.mode-ency .mode-toggle{max-width:100%}
body.mode-ency .tank-builder{align-self:flex-start}
@keyframes modeSweep{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}

/* === BADGES === */
.card-badges{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.badge{
  padding:3px 8px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.badge-staff{background:linear-gradient(135deg,rgba(255,180,50,.25),rgba(200,120,20,.2));color:#ffc860;border:1px solid rgba(255,180,50,.3)}
.badge-new{background:linear-gradient(135deg,rgba(80,220,180,.25),rgba(30,120,90,.2));color:#60eebb;border:1px solid rgba(80,220,180,.3)}
.badge-rare{background:linear-gradient(135deg,rgba(180,100,255,.25),rgba(80,30,160,.2));color:#c890ff;border:1px solid rgba(180,100,255,.3)}
.badge-beginner{background:linear-gradient(135deg,rgba(80,160,255,.25),rgba(30,60,140,.2));color:#70b8ff;border:1px solid rgba(80,160,255,.3)}

/* === TANK BUILDER === */
.tank-builder{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:6px 14px;border-radius:12px;
  background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);
}
.tank-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.45)}
.tank-input{
  width:60px;padding:6px 8px;border-radius:8px;border:2px solid rgba(255,255,255,.2);
  background:#fff;color:#0a1624;font-size:15px;font-weight:800;text-align:center;
}
.tank-input::placeholder{color:rgba(255,255,255,.35);font-size:16px}
.tank-label{font-size:14px;color:rgba(255,255,255,.55);font-weight:800}

/* === FAVORITES === */
.fav-btn{
  position:absolute;top:10px;left:10px;z-index:3;width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);cursor:pointer;
  display:grid;place-items:center;font-size:18px;transition:.2s;backdrop-filter:blur(4px);
}
.fav-btn:hover{background:rgba(0,0,0,.7);transform:scale(1.1)}
.fav-btn.liked{background:rgba(220,50,80,.6);border-color:rgba(255,100,120,.4)}
.fav-count{
  padding:3px 8px;border-radius:8px;background:rgba(220,50,80,.2);border:1px solid rgba(220,50,80,.3);
  font-size:12px;font-weight:800;color:#ff8090;
}

/* === COMPARE MODE === */
.compare-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  padding:14px 24px;display:flex;align-items:center;justify-content:center;gap:16px;
  background:linear-gradient(180deg,rgba(20,24,32,.95),rgba(12,14,20,.98));
  border-top:1px solid rgba(90,220,200,.2);backdrop-filter:blur(12px);
  transform:translateY(100%);transition:transform .3s ease;
}
.compare-bar.show{transform:translateY(0)}
.compare-chip{
  padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;
}
.compare-chip .remove{cursor:pointer;color:rgba(255,100,100,.7);font-weight:900}
.compare-go{
  padding:10px 20px;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,rgba(90,220,200,.3),rgba(50,140,120,.3));
  border:1px solid rgba(90,220,200,.4);color:#5eebc8;font-size:14px;font-weight:800;
}
.compare-overlay{
  position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(6,8,14,.92);backdrop-filter:blur(8px);
}
.compare-overlay.show{display:flex}
.compare-panel{
  width:90%;max-width:1200px;max-height:85vh;overflow-y:auto;padding:30px;
  background:linear-gradient(180deg,rgba(22,28,38,.98),rgba(14,18,26,.99));
  border:1px solid rgba(255,255,255,.08);border-radius:24px;
}
.compare-grid{display:grid;gap:16px;margin-top:20px}
.compare-col{padding:16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.compare-col h3{font-size:20px;margin:0 0 4px}
.compare-col .sci{font-size:12px;color:rgba(255,255,255,.4);font-style:italic}
.compare-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:14px}
.compare-row .label{color:rgba(255,255,255,.4);font-weight:700}
.compare-row .val{font-weight:800}

/* === COMPATIBILITY MATRIX === */
.compat-section{margin-top:20px;padding:20px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.compat-result{
  display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;margin-top:12px;
}
.compat-result.good{background:rgba(50,200,140,.1);border:1px solid rgba(50,200,140,.2)}
.compat-result.ok{background:rgba(220,180,50,.1);border:1px solid rgba(220,180,50,.2)}
.compat-result.bad{background:rgba(220,60,50,.1);border:1px solid rgba(220,60,50,.2)}
.compat-icon{font-size:28px}
.compat-text strong{display:block;font-size:16px}
.compat-text span{font-size:13px;color:rgba(255,255,255,.5)}

/* === SIMILAR FISH === */
.similar-section{margin-top:24px}
.similar-section h3{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:0 0 12px}
.similar-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
.similar-card{
  flex:0 0 140px;padding:10px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);transition:.2s;text-align:center;
}
.similar-card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.similar-card .name{font-size:13px;font-weight:800;margin-top:6px}
.similar-card .sub{font-size:11px;color:rgba(255,255,255,.4)}

/* === MODAL ANIMATION === */
.overlay{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(2,6,10,.78);backdrop-filter:blur(3px);
}
.overlay.show{display:flex}
.overlay.show .fish-modal{animation:modalSlideIn .35s cubic-bezier(.4,0,.2,1)}
@keyframes modalSlideIn{0%{opacity:0;transform:translateY(30px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* === CARD LIFT === */
.fish-card{transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s}
.fish-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.3),0 0 0 1px rgba(90,220,200,.1)}
.fish-card:active{transform:translateY(-2px) scale(.99)}

/* === ENCYCLOPEDIA MODE CARDS === */
.card-info-strip.ency .price-badge{display:none}
.card-info-strip.ency .tank-pill{display:none}

/* === STAFF MODE === */
.staff-overlay{
  position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(6,8,14,.95);backdrop-filter:blur(10px);
}
.staff-overlay.show{display:flex}
.pin-box{
  padding:40px;border-radius:24px;background:rgba(22,28,38,.98);border:1px solid rgba(255,255,255,.08);
  text-align:center;max-width:400px;width:90%;
}
.pin-box h2{margin:0 0 8px;font-size:24px}
.pin-box p{color:rgba(255,255,255,.4);font-size:14px;margin:0 0 20px}
.pin-input{
  width:200px;padding:14px;border-radius:14px;border:2px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);color:#fff;font-size:28px;font-weight:800;text-align:center;
  letter-spacing:8px;
}
.pin-input:focus{border-color:rgba(90,220,200,.5);outline:none}
.pin-error{color:#ff6666;font-size:13px;margin-top:10px;min-height:20px}
.staff-badge{
  padding:4px 10px;border-radius:8px;background:rgba(255,180,50,.2);border:1px solid rgba(255,180,50,.3);
  font-size:11px;font-weight:800;color:#ffcc60;cursor:pointer;
}
.staff-edit-btn{
  padding:4px 8px;border-radius:6px;background:rgba(255,180,50,.15);border:1px solid rgba(255,180,50,.2);
  font-size:10px;font-weight:800;color:#ffcc60;cursor:pointer;margin-left:4px;
}
.edit-field{
  width:80px;padding:4px 6px;border-radius:6px;border:1px solid rgba(255,180,50,.3);
  background:rgba(255,180,50,.1);color:#fff;font-size:13px;font-weight:700;text-align:center;
}
.staff-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.staff-action-btn{
  padding:5px 10px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid;
}
.staff-action-btn.sold{background:rgba(220,60,50,.15);border-color:rgba(220,60,50,.3);color:#ff8080}
.staff-action-btn.dead{background:rgba(100,100,100,.15);border-color:rgba(150,150,150,.3);color:#aaa}
.staff-action-btn.edit{background:rgba(80,180,255,.15);border-color:rgba(80,180,255,.3);color:#80c0ff}

/* === ANALYTICS === */
.analytics-overlay{
  position:fixed;inset:0;z-index:85;display:none;align-items:center;justify-content:center;
  background:rgba(6,8,14,.92);backdrop-filter:blur(8px);
}
.analytics-overlay.show{display:flex}
.analytics-panel{
  width:90%;max-width:900px;max-height:85vh;overflow-y:auto;padding:30px;
  /* v0.182 — migrated to tokens. Was rgba(22,28,38) → rgba(14,18,26)
     bluish charcoal (the same shade Chris kept calling "dark blue").
     Now reads from --ltc-surface-panel which is true neutral charcoal.
     This is the BASE panel definition used by inventory, foods,
     analytics, recent changes, and tank mover overlays. Change one
     token, all of them update. */
  background: var(--ltc-surface-panel);
  border: 1px solid var(--ltc-border-subtle);
  border-radius: var(--ltc-radius-xl);
}
.analytics-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.analytics-row .name{font-weight:700}
.analytics-row .views{color:rgba(90,220,200,.8);font-weight:800}
.analytics-bar{height:6px;border-radius:3px;background:rgba(90,220,200,.3);margin-top:4px}

/* === NOTIFY === */
.notify-btn{
  padding:8px 14px;border-radius:10px;cursor:pointer;
  background:rgba(80,160,255,.15);border:1px solid rgba(80,160,255,.25);
  color:#80b8ff;font-size:12px;font-weight:700;
}
.notify-btn:hover{background:rgba(80,160,255,.25)}


/* === LIGHT MODE === */
body.light-mode{color:#1a2030}
body.light-mode .bg-scene{background:linear-gradient(180deg,#e4eaf2 0%,#dae2ee 30%,#d0daea 60%,#dce4f0 100%)}
body.light-mode .control-panel{background:rgba(255,255,255,.94);border-color:rgba(0,0,0,.08)}
body.light-mode .control-panel::before{display:none}
body.light-mode .control-top-row{border-color:rgba(0,0,0,.06)}
body.light-mode .topbar{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.06)}
body.light-mode .fish-card{background:rgba(255,255,255,.96);border-color:rgba(0,0,0,.08);box-shadow:0 8px 24px rgba(0,0,0,.08)}
body.light-mode .fish-card::before{display:none}
body.light-mode .fish-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.12)}
body.light-mode .card-title{color:#1a2030}
body.light-mode .card-sci{color:rgba(0,0,0,.45)}
body.light-mode .card-copy{color:rgba(0,0,0,.55)}
body.light-mode .card-photo{background:#d8e2ee}
body.light-mode .card-photo::after{background:linear-gradient(180deg,transparent,rgba(255,255,255,.85))}
body.light-mode .image-placeholder{color:rgba(0,0,0,.1)}
body.light-mode .meta-box{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.06)}
body.light-mode .meta-label{color:rgba(0,0,0,.45)}
body.light-mode .meta-value{color:rgba(0,0,0,.8)}
body.light-mode .search-wrap{background:linear-gradient(180deg,#fff,#f4f6f8);border-color:rgba(0,0,0,.12)}
body.light-mode .search-wrap input{color:#1a2030}
body.light-mode .search-wrap input::placeholder{color:rgba(0,0,0,.35)}
body.light-mode .sort-choice{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
body.light-mode .sort-choice strong{color:#1a2030}
body.light-mode .sort-choice small{color:rgba(0,0,0,.4)}
body.light-mode .sort-choice.active{background:rgba(0,100,80,.08);border-color:rgba(0,100,80,.2)}
body.light-mode .sort-choice.active strong{color:#006850}
body.light-mode .hero-mini{color:rgba(0,0,0,.45)}
body.light-mode .tap-row{color:rgba(0,100,80,.6)}
body.light-mode .brand-title{color:#1a2030}
body.light-mode .brand-sub{color:rgba(0,0,0,.4)}
body.light-mode .price-value{color:#068060;text-shadow:none}
body.light-mode .tank-pill{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);color:rgba(0,0,0,.55)}
body.light-mode .empty-state{background:rgba(255,255,255,.95);border-color:rgba(0,0,0,.06);color:rgba(0,0,0,.5)}
body.light-mode .results-meta{color:rgba(0,0,0,.4)}
/* Light mode — folder tabs keep white text on colored bg */
body.light-mode .folder-tab{color:#fff}
body.light-mode .folder-tab span{color:rgba(255,255,255,.7)}
/* Light mode — filter chips keep white text */
body.light-mode .filter-chip{color:#fff}
body.light-mode .filter-chip.clear{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1);color:rgba(0,0,0,.6)}
/* Light mode — status pills: keep colored bg, ensure readable text */
body.light-mode .status-pill{box-shadow:0 2px 6px rgba(0,0,0,.06)}
/* Light mode — card category pills keep colored bg with white text */
body.light-mode .card-category{color:rgba(255,255,255,.9)}
/* Light mode — overlays and modals */
body.light-mode .overlay{background:rgba(240,244,248,.88);backdrop-filter:blur(8px)}
body.light-mode .fish-modal{background:linear-gradient(180deg,#f8fafc,#f0f4f8);border-color:rgba(0,0,0,.08);box-shadow:0 30px 80px rgba(0,0,0,.15)}
body.light-mode .modal-close{background:linear-gradient(180deg,#e8eef4,#dde4ee);border-color:rgba(0,0,0,.1);color:#1a2030}
body.light-mode .modal-close:hover{background:linear-gradient(180deg,#fde8e8,#f0d0d0);border-color:rgba(200,60,60,.2);color:#aa3333}
body.light-mode .modal-photo-copy h2{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
body.light-mode .modal-photo-copy .latin{color:rgba(255,255,255,.8)}
body.light-mode .modal-section{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.06)}
body.light-mode .section-title h3{color:#1a2030}
body.light-mode .overview{color:rgba(0,0,0,.65)}
body.light-mode .fact-card{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.06)}
body.light-mode .fact-card p{color:rgba(0,0,0,.6)}
body.light-mode .staff-card{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.06)}
body.light-mode .staff-card strong{color:rgba(0,0,0,.7)}
body.light-mode .staff-card p{color:rgba(0,0,0,.5)}
body.light-mode .modal-stat{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.06)}
body.light-mode .stat-label{color:rgba(0,0,0,.45)}
body.light-mode .stat-value{color:#1a2030}
body.light-mode .stat-sub{color:rgba(0,0,0,.4)}
body.light-mode .origin-card{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.06)}
/* Light mode — gauge tracks */
body.light-mode .gauge-track{background:rgba(0,0,0,.06)}
/* Light mode — compare */
body.light-mode .compare-panel{background:linear-gradient(180deg,#f8fafc,#f0f4f8);border-color:rgba(0,0,0,.08)}
body.light-mode .compare-bar{background:rgba(255,255,255,.95);border-color:rgba(0,100,80,.15)}
body.light-mode .compare-chip{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:#1a2030}
/* Light mode — idle screen */
body.light-mode .idle-overlay{background:rgba(240,244,248,.97)}
body.light-mode .idle-text{color:rgba(0,0,0,.7)}
body.light-mode .idle-sub{color:rgba(0,0,0,.3)}
/* Light mode — staff, analytics, toast */
body.light-mode .staff-overlay{background:rgba(240,244,248,.95)}
body.light-mode .pin-box{background:#fff;border-color:rgba(0,0,0,.08)}
body.light-mode .pin-box h2{color:#1a2030}
body.light-mode .pin-box p{color:rgba(0,0,0,.4)}
body.light-mode .pin-input{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.15);color:#1a2030}
body.light-mode .analytics-panel{background:#fff;border-color:rgba(0,0,0,.08)}
body.light-mode .analytics-panel h2{color:#1a2030}
body.light-mode .analytics-row .name{color:#1a2030}
body.light-mode .toast{background:rgba(26,32,48,.9);color:#fff}
/* Light mode — header elements */
body.light-mode .header-pill{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);color:rgba(0,0,0,.5)}
body.light-mode .header-pill .dot{background:rgba(0,180,140,.6)}
body.light-mode .staff-badge{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);color:rgba(0,0,0,.6)}
body.light-mode .fav-btn{background:rgba(255,255,255,.8);border-color:rgba(0,0,0,.08)}
body.light-mode .notify-btn{background:rgba(0,100,200,.08);border-color:rgba(0,100,200,.15);color:#0066aa}
body.light-mode .sort-copy{color:rgba(0,0,0,.5)}
body.light-mode .sort-copy strong{color:rgba(0,0,0,.7)}
.theme-toggle{
  padding:6px 10px;border-radius:8px;cursor:pointer;font-size:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
}
body.light-mode .theme-toggle{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}

/* === SKELETON LOADING === */
@keyframes shimmerLoad{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton-img{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 75%);
  background-size:200% 100%;animation:shimmerLoad 1.5s infinite;
}
body.light-mode .skeleton-img{
  background:linear-gradient(90deg,rgba(0,0,0,.03) 25%,rgba(0,0,0,.06) 50%,rgba(0,0,0,.03) 75%);
  background-size:200% 100%;
}

/* === DETAIL MODAL ANIMATIONS === */
@keyframes gaugeGrow{0%{width:0}100%{width:var(--gauge-w)}}
@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
.modal-section{animation:fadeSlideUp .4s ease-out both}
.modal-section:nth-child(2){animation-delay:.1s}
.modal-section:nth-child(3){animation-delay:.15s}
.modal-section:nth-child(4){animation-delay:.2s}
.modal-section:nth-child(5){animation-delay:.25s}
.gauge-track .gauge-marker{animation:gaugeGrow .8s cubic-bezier(.4,0,.2,1) both}

/* === PRINT MODE === */
@media print{
  .bg-scene,.topbar,.control-panel,.compare-bar,.idle-overlay,.staff-overlay,.analytics-overlay,.compare-overlay,.overlay,.toast{display:none!important}
  body{background:#fff!important;color:#000!important}
  .shell{padding:0!important}
  .fish-card{break-inside:avoid;border:1px solid #ccc!important;background:#fff!important;box-shadow:none!important}
  .fish-card::before{display:none!important}
  .card-photo{height:120px!important}
  .cards{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
  .card-title{color:#000!important}
  .meta-box{background:#f5f5f5!important;border:1px solid #ddd!important}
  .meta-label,.meta-value{color:#000!important}
  .card-copy{color:#333!important}
  .fav-btn,.tap-row,.staff-actions,.notify-btn{display:none!important}
  .price-value{color:#006644!important;text-shadow:none!important}
}

/* === INTERACTIVE ANIMATIONS === */
@keyframes shimmerPulse{
  0%{box-shadow:inset 0 0 0 1px rgba(255,255,255,0),0 0 0 0 rgba(255,255,255,0)}
  30%{box-shadow:inset 0 0 20px rgba(255,255,255,.15),0 0 30px rgba(100,200,255,.2)}
  100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,0),0 0 0 0 rgba(255,255,255,0)}
}
@keyframes shimmerReef{
  0%{box-shadow:inset 0 0 0 1px rgba(82,231,208,0),0 0 0 0 rgba(82,231,208,0)}
  30%{box-shadow:inset 0 0 24px rgba(82,231,208,.2),0 0 35px rgba(82,231,208,.25)}
  100%{box-shadow:inset 0 0 0 1px rgba(82,231,208,0),0 0 0 0 rgba(82,231,208,0)}
}
@keyframes shimmerGold{
  0%{box-shadow:inset 0 0 0 1px rgba(245,218,85,0),0 0 0 0 rgba(245,218,85,0)}
  30%{box-shadow:inset 0 0 24px rgba(245,218,85,.18),0 0 35px rgba(245,218,85,.22)}
  100%{box-shadow:inset 0 0 0 1px rgba(245,218,85,0),0 0 0 0 rgba(245,218,85,0)}
}
@keyframes shimmerPurple{
  0%{box-shadow:inset 0 0 0 1px rgba(181,112,255,0),0 0 0 0 rgba(181,112,255,0)}
  30%{box-shadow:inset 0 0 24px rgba(181,112,255,.18),0 0 35px rgba(181,112,255,.2)}
  100%{box-shadow:inset 0 0 0 1px rgba(181,112,255,0),0 0 0 0 rgba(181,112,255,0)}
}
@keyframes tabGlow{
  0%{filter:brightness(1)}
  25%{filter:brightness(1.4)}
  100%{filter:brightness(1)}
}
@keyframes cardSlideIn{
  0%{opacity:0;transform:translateY(18px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes rippleOut{
  0%{transform:scale(0);opacity:.5}
  100%{transform:scale(2.5);opacity:0}
}
@keyframes gaugeFillReveal{
  0%{transform:scaleX(.06);opacity:.1;filter:blur(4px)}
  55%{opacity:.78}
  100%{transform:scaleX(1);opacity:.55;filter:blur(0)}
}
@keyframes liquidSweep{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(180%)}
}
@keyframes gaugeMarkerPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes gaugeMarkerDrift{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,calc(-50% - 1px)) scale(1.03)}
}
@keyframes waterlineSweep{
  0%,12%{transform:translateX(-130%)}
  20%,100%{transform:translateX(135%)}
}
.shimmer-click{animation:shimmerPulse .5s ease-out}
.shimmer-reef{animation:shimmerReef .5s ease-out}
.shimmer-gold{animation:shimmerGold .5s ease-out}
.shimmer-purple{animation:shimmerPurple .5s ease-out}
.tab-glow{animation:tabGlow .4s ease-out}
.card-enter{animation:cardSlideIn .35s ease-out both}
/* v0.143 — staggered entrance cascade for first 20 cards via CSS nth-child.
   Previously this was a JS loop setting animationDelay per card on every
   render (~200 inline-style writes per filter change). Cards beyond #20
   inherit no delay so they appear immediately — keeps the visual cascade
   on the part of the grid the user sees first without paying for it on
   long lists. */
.fish-card.card-enter:nth-child(1){animation-delay:.00s}
.fish-card.card-enter:nth-child(2){animation-delay:.04s}
.fish-card.card-enter:nth-child(3){animation-delay:.08s}
.fish-card.card-enter:nth-child(4){animation-delay:.12s}
.fish-card.card-enter:nth-child(5){animation-delay:.16s}
.fish-card.card-enter:nth-child(6){animation-delay:.20s}
.fish-card.card-enter:nth-child(7){animation-delay:.24s}
.fish-card.card-enter:nth-child(8){animation-delay:.28s}
.fish-card.card-enter:nth-child(9){animation-delay:.32s}
.fish-card.card-enter:nth-child(10){animation-delay:.36s}
.fish-card.card-enter:nth-child(11){animation-delay:.40s}
.fish-card.card-enter:nth-child(12){animation-delay:.44s}
.fish-card.card-enter:nth-child(13){animation-delay:.48s}
.fish-card.card-enter:nth-child(14){animation-delay:.52s}
.fish-card.card-enter:nth-child(15){animation-delay:.56s}
.fish-card.card-enter:nth-child(16){animation-delay:.60s}
.fish-card.card-enter:nth-child(17){animation-delay:.64s}
.fish-card.card-enter:nth-child(18){animation-delay:.68s}
.fish-card.card-enter:nth-child(19){animation-delay:.72s}
.fish-card.card-enter:nth-child(20){animation-delay:.76s}
.sort-choice{position:relative;overflow:hidden}
.sort-choice .ripple,.filter-chip .ripple,.folder-tab .ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.2);
  pointer-events:none;animation:rippleOut .5s ease-out forwards
}
.filter-chip{position:relative;overflow:hidden}
.folder-tab{position:relative;overflow:hidden}
.cta,.staff-action-btn,.inventory-chip-filter,.modal-close,.status-pill,.mini-pill,.tank-pill,.inventory-field-card,.input-helper-btn{position:relative;overflow:hidden;isolation:isolate}
.folder-tab::before,.cta::before,.staff-action-btn::before,.inventory-chip-filter::before,.modal-close::before,.status-pill::after,.mini-pill::after,.tank-pill::after,.inventory-field-card::before,.input-helper-btn::before{content:'';position:absolute;inset:0;pointer-events:none}
.folder-tab::before,.cta::before,.staff-action-btn::before,.inventory-chip-filter::before,.modal-close::before,.inventory-field-card::before,.input-helper-btn::before{
  background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 34%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.10) 58%, rgba(255,255,255,0) 76%);
  transform:translateX(-135%) skewX(-14deg);opacity:0;transition:transform .65s cubic-bezier(.22,.8,.2,1), opacity .25s ease;
}
.folder-tab:hover::before,.folder-tab:focus-visible::before,.cta:hover::before,.cta:focus-visible::before,.staff-action-btn:hover::before,.staff-action-btn:focus-visible::before,.inventory-chip-filter:hover::before,.inventory-chip-filter:focus-visible::before,.modal-close:hover::before,.modal-close:focus-visible::before,.inventory-field-card:hover::before,.inventory-field-card:focus-visible::before,.input-helper-btn:hover::before,.input-helper-btn:focus-visible::before{transform:translateX(135%) skewX(-14deg);opacity:1}
.folder-tab.active::before,.inventory-chip-filter.is-active::before,.mode-btn.active::after{animation:waterlineSweep 6.8s cubic-bezier(.22,.8,.2,1) infinite}
.status-pill::after,.mini-pill::after,.tank-pill::after{background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 42%, rgba(255,255,255,0) 70%);transform:translateX(-120%);opacity:.0}
/* === WATER PARAMETERS === */
.water-param-gauge{display:flex;align-items:center;gap:6px;width:100%}
.water-track{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:visible;position:relative}

/* === FISH OF THE WEEK === */
body.light-mode #fishOfTheWeek div[style*="background"]{background:linear-gradient(135deg,rgba(255,200,60,.12),rgba(255,140,40,.08))!important}
body.light-mode #fishOfTheWeek .image-placeholder{color:rgba(0,0,0,.1)}

/* (light mode rules consolidated above) */

/* === INPUT MODAL (replaces native prompt()) === */
.input-modal-overlay{
  position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;
  background:rgba(6,8,14,.85);backdrop-filter:blur(8px);
}
.input-modal-overlay.show{display:flex}
.input-modal{
  width:90%;max-width:520px;padding:30px 32px 28px;border-radius:24px;
  /* v0.176 — was rgba(22,28,38) → rgba(14,18,26), a slight blue-gray
     that read as "dark blue menu" against the rest of the charcoal
     app. Now true neutral charcoal. */
  background:linear-gradient(180deg,rgba(38,40,48,0.98),rgba(22,24,30,0.99));
  border:1px solid rgba(220,234,248,0.10);box-shadow:0 30px 80px rgba(0,0,0,.4);
  animation:modalSlideIn .25s ease-out;
  /* v0.148 — themed modal accent variables. Default to teal; each
     theme class overrides them. Used by the icon circle, the field
     accent borders, and the confirm button.
     v0.176 — default accent changed from teal to amber so a modal
     without a theme class no longer reads as "aqua menu". */
  --imc-accent:#ffcb5e;
  --imc-accent-rgb:255,203,94;
  --imc-icon-bg:rgba(255,203,94,.16);
  --imc-icon-border:rgba(255,203,94,.42);
}

/* Theme variants — each one paints the icon circle, the confirm button,
   and any "themed" elements. */
.input-modal-theme-green{--imc-accent:#4ade80;--imc-accent-rgb:74,222,128;--imc-icon-bg:rgba(74,222,128,.16);--imc-icon-border:rgba(74,222,128,.42)}
.input-modal-theme-blue{--imc-accent:#7bcfff;--imc-accent-rgb:123,207,255;--imc-icon-bg:rgba(123,207,255,.16);--imc-icon-border:rgba(123,207,255,.42)}
.input-modal-theme-purple{--imc-accent:#c8b2ff;--imc-accent-rgb:200,178,255;--imc-icon-bg:rgba(200,178,255,.16);--imc-icon-border:rgba(200,178,255,.42)}
.input-modal-theme-amber{--imc-accent:#ffcb5e;--imc-accent-rgb:255,203,94;--imc-icon-bg:rgba(255,203,94,.16);--imc-icon-border:rgba(255,203,94,.42)}
.input-modal-theme-rose{--imc-accent:#ff9bb6;--imc-accent-rgb:255,155,182;--imc-icon-bg:rgba(255,155,182,.16);--imc-icon-border:rgba(255,155,182,.42)}
.input-modal-theme-red{--imc-accent:#ff9a8a;--imc-accent-rgb:255,154,138;--imc-icon-bg:rgba(255,154,138,.16);--imc-icon-border:rgba(255,154,138,.42)}
.input-modal-theme-cyan{--imc-accent:#5ed4dc;--imc-accent-rgb:94,212,220;--imc-icon-bg:rgba(94,212,220,.16);--imc-icon-border:rgba(94,212,220,.42)}

/* Title row with optional icon glyph in a colored circle */
.input-modal h3{
  margin:0 0 6px;font-size:22px;font-weight:900;
  display:flex;align-items:center;gap:14px;
  color:#f4fbff;
}
.input-modal-icon-wrap{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;
  background:var(--imc-icon-bg);
  border:1.5px solid var(--imc-icon-border);
  color:var(--imc-accent);
  flex:0 0 auto;
  box-shadow:0 6px 16px rgba(var(--imc-accent-rgb),.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.input-modal-icon-wrap svg{width:26px;height:26px;display:block}
.input-modal-title-text{flex:1;line-height:1.2}

.input-modal .modal-desc{
  font-size:14px;
  color:rgba(255,255,255,.55);
  margin:0 0 22px;
  font-weight:600;
}

/* v0.148 — chunkier, friendlier field layout */
.input-modal-field{margin-bottom:14px}
.input-modal-field label{
  display:block;
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(220,234,248,.55);
  margin-bottom:7px;
}
.input-modal-field input,
.input-modal-field select,
.input-modal-field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  /* v0.176 — match the inventory search bar treatment: visibly
     lighter than the panel background so the input fields pop
     instead of being barely-visible against the modal bg. */
  border:2px solid rgba(220,234,248,0.28);
  background:linear-gradient(180deg, rgba(76,82,96,0.96), rgba(58,62,74,0.98));
  color:#fff;
  font-size:17px;
  font-weight:700;
  font-family:inherit;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.3);
}
.input-modal-field input:focus,
.input-modal-field select:focus,
.input-modal-field textarea:focus{
  border-color:var(--imc-accent);
  background:linear-gradient(180deg, rgba(86,92,108,1), rgba(64,70,82,1));
  box-shadow:0 0 0 4px rgba(var(--imc-accent-rgb),.18), inset 0 1px 0 rgba(255,255,255,0.12);
  outline:none;
}
.input-modal-field input::placeholder,
.input-modal-field textarea::placeholder{
  color:rgba(255,255,255,.28);
  font-weight:600;
}

/* v0.148 — 2-column grid layout for 5+ field modals (the Restock wall).
   Wide-spanning fields like textareas span both columns. */
.input-modal-grid-2col #inputModalFields{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 18px;
}
.input-modal-grid-2col .input-modal-field{margin-bottom:0}
.input-modal-grid-2col .input-modal-field-wide{grid-column:1 / -1}
.input-modal-grid-2col .input-modal-field-select{grid-column:1 / -1}
@media (max-width:620px){
  .input-modal-grid-2col #inputModalFields{grid-template-columns:1fr}
}

/* Action buttons — clear hierarchy: Cancel is small/grey, Confirm is
   theme-colored and dominant. v0.148 visual upgrade. */
.input-modal-actions{display:flex;gap:12px;margin-top:24px;align-items:stretch}
.input-modal-actions button{
  padding:15px 18px;
  border-radius:14px;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.02em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.input-modal-actions .btn-cancel{
  flex:0 0 auto;
  min-width:120px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.55);
}
.input-modal-actions .btn-cancel:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.75)}
.input-modal-actions .btn-cancel:active{transform:scale(.97)}

.input-modal-actions .btn-confirm{
  flex:1;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--imc-accent-rgb),.22), rgba(var(--imc-accent-rgb),.14));
  border:1.5px solid rgba(var(--imc-accent-rgb),.55);
  color:var(--imc-accent);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 8px 22px rgba(var(--imc-accent-rgb),.18), inset 0 1px 0 rgba(255,255,255,.12);
}
.input-modal-actions .btn-confirm:hover{
  background:linear-gradient(180deg, rgba(var(--imc-accent-rgb),.32), rgba(var(--imc-accent-rgb),.20));
  box-shadow:0 10px 28px rgba(var(--imc-accent-rgb),.26), inset 0 1px 0 rgba(255,255,255,.16);
  transform:translateY(-1px);
}
.input-modal-actions .btn-confirm:active{transform:scale(.98)}

/* v0.148 — gradient sweep across the confirm button when tapped.
   A bright gradient strip moves left-to-right across the surface as
   visible confirmation that the action fired. Combined with the
   bubble particle burst from ltcFx.bubbles for satisfying feedback. */
.input-modal-actions .btn-confirm::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background:linear-gradient(90deg,
    transparent,
    rgba(var(--imc-accent-rgb),.0) 10%,
    rgba(255,255,255,.40) 50%,
    rgba(var(--imc-accent-rgb),.0) 90%,
    transparent);
  pointer-events:none;
  transform:skewX(-18deg);
}
.input-modal-actions .btn-confirm.btn-confirm-sweeping::before{
  animation:btnConfirmSweep .56s ease-out forwards;
}
@keyframes btnConfirmSweep{
  0%   {left:-100%;opacity:0}
  20%  {opacity:1}
  85%  {opacity:1}
  100% {left:130%;opacity:0}
}
.input-modal-actions .btn-confirm.btn-confirm-sweeping{
  animation:btnConfirmFlash .42s ease-out;
}
@keyframes btnConfirmFlash{
  0%   {background:linear-gradient(180deg, rgba(var(--imc-accent-rgb),.45), rgba(var(--imc-accent-rgb),.30))}
  100% {background:linear-gradient(180deg, rgba(var(--imc-accent-rgb),.22), rgba(var(--imc-accent-rgb),.14))}
}

/* Light-mode overrides */
body.light-mode .input-modal{background:linear-gradient(180deg,#fff,#f6f8fa);border-color:rgba(0,0,0,.08)}
body.light-mode .input-modal h3{color:#1a2030}
body.light-mode .input-modal .modal-desc{color:rgba(0,0,0,.55)}
body.light-mode .input-modal-field label{color:rgba(0,0,0,.55)}
body.light-mode .input-modal-field input,body.light-mode .input-modal-field select,body.light-mode .input-modal-field textarea{
  background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:#1a2030;
}
body.light-mode .input-modal-actions .btn-cancel{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:rgba(0,0,0,.5)}

.input-modal-overlay.wide .input-modal{max-width:860px;width:min(92vw,860px)}
.receive-picker-shell{display:grid;gap:12px;margin:0 0 12px;padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(38,40,48,.94),rgba(22,24,30,.97));border:1px solid rgba(220,234,248,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.receive-picker-head{display:grid;gap:4px}
.receive-picker-head strong{font-size:15px;color:#fff}
.receive-picker-head span{font-size:12px;line-height:1.45;color:rgba(232,243,251,.66)}
.receive-picker-chips{display:flex;flex-wrap:wrap;gap:8px}
.receive-cat-chip{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#eef8ff;font-size:12px;font-weight:800;cursor:pointer}
.receive-cat-chip.is-active{background:rgba(90,220,200,.18);border-color:rgba(90,220,200,.3);color:#d8fff6;box-shadow:0 10px 20px rgba(0,0,0,.16)}
.receive-picker-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.receive-match{display:grid;gap:4px;padding:12px 13px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);text-align:left;color:#eef8ff;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.receive-match:hover{transform:translateY(-1px);border-color:rgba(90,220,200,.28);background:rgba(90,220,200,.08);box-shadow:0 10px 18px rgba(0,0,0,.16)}
.receive-match strong{font-size:14px;line-height:1.22;color:#fff}
.receive-match span{font-size:12px;color:rgba(235,245,255,.58)}
.receive-match small{font-size:11px;color:#8fd8ff;text-transform:uppercase;letter-spacing:.08em}
.receive-match.is-selected{border-color:rgba(90,220,200,.34);background:rgba(90,220,200,.12)}
.receive-match-empty{padding:12px 14px;border-radius:14px;border:1px dashed rgba(255,255,255,.1);background:rgba(255,255,255,.03);font-size:12px;line-height:1.5;color:rgba(235,245,255,.62)}
.food-settings-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:14px;margin-bottom:16px}
.food-settings-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.food-settings-metric{display:grid;gap:4px;padding:14px 15px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.food-settings-metric span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:rgba(235,245,255,.48)}
.food-settings-metric strong{font-size:24px;line-height:1;color:#fff}
.food-settings-metric small{font-size:11px;line-height:1.4;color:rgba(235,245,255,.62)}
.food-settings-controls{display:grid;gap:10px;padding:14px 15px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.food-search{display:grid;gap:6px}
.food-search span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:rgba(235,245,255,.48);font-weight:800}
.food-search input{width:100%;min-height:42px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(8,18,28,.82);color:#fff;font-size:14px;font-weight:700}
.food-scope-chips{display:flex;flex-wrap:wrap;gap:8px}
.food-scope-chip{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#eef8ff;font-size:12px;font-weight:800;cursor:pointer}
.food-scope-chip.is-active{background:rgba(90,220,200,.18);border-color:rgba(90,220,200,.28);color:#d7fff6}
.food-brand-groups{display:grid;gap:18px}
.food-brand-group{display:grid;gap:12px}
.food-brand-group-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.food-brand-group-head strong{font-size:18px;color:#fff}
.food-brand-group-head span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:rgba(235,245,255,.5)}
@media (max-width: 840px){.food-settings-hero{grid-template-columns:1fr}.food-settings-metrics{grid-template-columns:1fr 1fr}.receive-picker-results{grid-template-columns:1fr}}
@media (max-width: 560px){.food-settings-metrics{grid-template-columns:1fr}.input-modal-overlay.wide .input-modal{width:min(96vw,860px);padding:22px}}
body.light-mode .food-search input{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08);color:#1a2030}
body.light-mode .food-settings-metric,body.light-mode .food-settings-controls,body.light-mode .receive-picker-shell,body.light-mode .receive-match{background:#fff;border-color:rgba(0,0,0,.08)}
body.light-mode .receive-picker-head span,body.light-mode .food-settings-metric span,body.light-mode .food-settings-metric small,body.light-mode .food-search span,body.light-mode .food-brand-group-head span{color:rgba(0,0,0,.52)}
body.light-mode .receive-match span{color:rgba(0,0,0,.56)}

/* === NEW CATEGORY CARD COLORS === */
.cat-damsels{background:rgba(68,136,204,.25);border:1px solid rgba(68,136,204,.3);color:rgba(120,180,255,.9)}
.cat-basslets{background:rgba(136,68,170,.25);border:1px solid rgba(136,68,170,.3);color:rgba(180,130,220,.9)}
.cat-cardinals{background:rgba(204,68,85,.25);border:1px solid rgba(204,68,85,.3);color:rgba(255,130,140,.9)}
.cat-anthias{background:rgba(238,102,136,.25);border:1px solid rgba(238,102,136,.3);color:rgba(255,150,180,.9)}
.cat-butterfly{background:rgba(238,187,51,.25);border:1px solid rgba(238,187,51,.3);color:rgba(255,220,100,.9)}
.cat-hawks{background:rgba(204,51,51,.25);border:1px solid rgba(204,51,51,.3);color:rgba(255,120,120,.9)}
.cat-rabbits{background:rgba(170,204,34,.25);border:1px solid rgba(170,204,34,.3);color:rgba(200,230,80,.9)}
.cat-triggers{background:rgba(136,153,170,.25);border:1px solid rgba(136,153,170,.3);color:rgba(180,200,220,.9)}
.cat-puffers{background:rgba(119,187,170,.25);border:1px solid rgba(119,187,170,.3);color:rgba(150,220,200,.9)}
.cat-eels{background:rgba(85,85,119,.25);border:1px solid rgba(85,85,119,.3);color:rgba(140,140,190,.9)}
.cat-lionfish{background:rgba(204,85,51,.25);border:1px solid rgba(204,85,51,.3);color:rgba(255,140,100,.9)}
.cat-shrimp{background:rgba(238,85,68,.25);border:1px solid rgba(238,85,68,.3);color:rgba(255,140,130,.9)}
.cat-crabs{background:rgba(204,136,51,.25);border:1px solid rgba(204,136,51,.3);color:rgba(255,190,100,.9)}
.cat-snails{background:rgba(102,153,102,.25);border:1px solid rgba(102,153,102,.3);color:rgba(150,200,150,.9)}
.cat-urchins{background:rgba(136,68,136,.25);border:1px solid rgba(136,68,136,.3);color:rgba(180,130,180,.9)}
.cat-starfish{background:rgba(204,102,136,.25);border:1px solid rgba(204,102,136,.3);color:rgba(255,150,180,.9)}
.cat-anemones{background:rgba(85,170,204,.25);border:1px solid rgba(85,170,204,.3);color:rgba(130,210,240,.9)}
.cat-clams{background:rgba(119,153,187,.25);border:1px solid rgba(119,153,187,.3);color:rgba(160,195,230,.9)}

/* === COMPARE GRID (class-based, responsive) === */
.cmp-grid{display:grid;gap:0}
.cmp-cols-2{grid-template-columns:100px 1fr 1fr}
.cmp-cols-3{grid-template-columns:100px 1fr 1fr 1fr}
.cmp-corner{min-height:0}
.cmp-head{padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:0}
.cmp-head:first-of-type{border-radius:12px 0 0 0}
.cmp-head:last-of-type{border-radius:0 12px 0 0}
.cmp-col0{background:rgba(90,220,200,.04)}
.cmp-col1{background:rgba(180,130,255,.04)}
.cmp-col2{background:rgba(255,180,60,.04)}
.cmp-photo{height:80px;border-radius:8px;overflow:hidden;background:#1a2233;display:grid;place-items:center;margin-bottom:8px}
.cmp-placeholder{font-size:22px;font-weight:900;color:rgba(255,255,255,.15)}
.cmp-name{font-size:16px;font-weight:800}
.cmp-sci{font-size:11px;color:rgba(255,255,255,.35);font-style:italic}
.cmp-section-label{padding:8px 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);grid-column:1/-1;border-bottom:1px solid rgba(255,255,255,.06);margin-top:12px}
.cmp-label{padding:8px 6px;font-size:11px;font-weight:700;color:rgba(255,255,255,.4);display:flex;flex-direction:column;justify-content:center}
.cmp-hint{font-size:9px;color:rgba(255,255,255,.2)}
.cmp-cell{padding:8px 10px;font-weight:700;font-size:13px;border-left:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.04)}
.cmp-gauge{display:flex;align-items:center;gap:8px;width:100%}
.cmp-gauge-track{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.cmp-gauge-fill{height:100%;border-radius:4px;transition:.3s}
.cmp-gauge-val{font-size:12px;font-weight:700;min-width:28px;text-align:right}
.cmp-compat-title{margin:0 0 12px;font-size:16px}
.cmp-compat-result{margin-top:8px}

/* Compare responsive — phone portrait */
@media (max-width:600px) and (pointer:coarse){
  .cmp-grid{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp-cols-2,.cmp-cols-3{grid-template-columns:80px repeat(var(--cmp-n,2),minmax(140px,1fr))}
  .cmp-head{padding:8px}
  .cmp-photo{height:60px}
  .cmp-name{font-size:13px}
  .cmp-sci{font-size:9px}
  .cmp-label{padding:6px 4px;font-size:10px}
  .cmp-cell{padding:6px 6px;font-size:11px}
  .cmp-gauge-val{font-size:10px;min-width:22px}
  .cmp-compat-title{font-size:14px}
}
/* Compare responsive — phone landscape */
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  .cmp-cols-2,.cmp-cols-3{grid-template-columns:70px repeat(var(--cmp-n,2),minmax(120px,1fr))}
  .cmp-head{padding:6px}
  .cmp-photo{height:50px}
  .cmp-name{font-size:11px}
  .cmp-label{padding:4px 3px;font-size:9px}
  .cmp-cell{padding:4px 4px;font-size:10px}
}

/* Search rail light mode */

/* Card pill overflow protection */
.card-category{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
@media (max-width:600px) and (pointer:coarse){
  .card-category{max-width:80px;font-size:7px}
}

/* Photo gallery */
.photo-gallery{display:flex;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.photo-gallery::-webkit-scrollbar{display:none}
.photo-gallery-thumb{flex:0 0 60px;height:60px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid rgba(255,255,255,.1);opacity:.7;transition:.2s}
.photo-gallery-thumb:hover,.photo-gallery-thumb.active{opacity:1;border-color:rgba(90,220,200,.4)}
.photo-gallery-thumb img{width:100%;height:100%;object-fit:cover}
.photo-gallery-upload{flex:0 0 60px;height:60px;border-radius:8px;display:grid;place-items:center;cursor:pointer;background:rgba(180,130,255,.1);border:2px dashed rgba(180,130,255,.3);color:#b888ff;font-size:11px;font-weight:800}

/* Water parameter grid */
.water-param-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}
.water-param-card{padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.06)}
.water-param-card.ph{background:rgba(78,221,187,.06);border-color:rgba(78,221,187,.12)}
.water-param-card.sal{background:rgba(96,176,255,.06);border-color:rgba(96,176,255,.12)}
.water-param-card.temp{background:rgba(232,152,56,.06);border-color:rgba(232,152,56,.12)}
.water-param-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.water-param-card.ph .water-param-label{color:rgba(78,221,187,.7)}
.water-param-card.sal .water-param-label{color:rgba(96,176,255,.7)}
.water-param-card.temp .water-param-label{color:rgba(232,152,56,.7)}
@media (max-width:600px) and (pointer:coarse){
  .water-param-grid{grid-template-columns:1fr;gap:6px}
  .water-param-card{padding:8px;border-radius:10px}
  .water-param-label{font-size:9px}
}

/* Seasonal availability */
.seasonal-section{margin-top:12px;padding:10px 14px;border-radius:14px;display:flex;align-items:center;gap:10px;background:rgba(255,200,60,.08);border:1px solid rgba(255,200,60,.15)}
.seasonal-icon{font-size:22px}
.seasonal-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#eebb44}
.seasonal-text{font-size:13px;color:rgba(255,255,255,.7);margin-top:2px}

body.light-mode .tank-input{background:#fff;border-color:rgba(0,0,0,.2);color:#1a2030}

/* === FOLDER CONTENT (card grid sits inside this "folder") === */
.folder-content{
  border:1px solid rgba(220,234,248,.14);
  border-top:none;
  border-radius:0 0 16px 16px;
  padding:12px;
  margin-top:0;
  min-height:400px;
  --folder-tint:transparent;
  --folder-border:rgba(220,234,248,.14);
  --folder-glow:transparent;
  background:
    linear-gradient(180deg,var(--folder-tint),transparent 60%),
    linear-gradient(180deg,rgba(10,18,28,.84),rgba(8,14,22,.92));
  border-color:var(--folder-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 12px 30px rgba(0,0,0,.18),0 0 20px var(--folder-glow),0 14px 32px rgba(0,0,0,.18);
  transition:all .5s ease;
}
body.light-mode .folder-content{
  border-color:rgba(0,0,0,.08);
  background:rgba(0,0,0,.01);
}
.promo-area{margin-bottom:12px}

/* Category tab connection to folder — active tab gets bottom border removed to "open" into folder */
.folder-tab{
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:-1px;
  z-index:2;
}
.folder-tab.active{
  border-bottom-color:transparent;
  background:linear-gradient(180deg,var(--tab-top),var(--bg,#07111a));
}
body.light-mode .folder-tab{border-bottom-color:rgba(0,0,0,.08)}
body.light-mode .folder-tab.active{border-bottom-color:transparent;background:linear-gradient(180deg,var(--tab-top),#f0f4f8)}

/* Folder top border sits on top of tabs */
.folder-content::before{
  content:"";
  display:block;
  height:0;
  border-top:1px solid var(--folder-border);
  margin:-12px -12px 12px;
  padding:0 12px;
}
.category-shell{
  --folder-tint:transparent;
  --folder-border:rgba(220,234,248,.14);
  --folder-glow:transparent;
  border:1px solid var(--folder-border);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  background:
    linear-gradient(180deg,var(--folder-tint),transparent 72%),
    linear-gradient(180deg,rgba(11,18,28,.70),rgba(7,12,18,.56));
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 0 24px var(--folder-glow);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
body.light-mode .folder-content::before{border-top-color:rgba(0,0,0,.08)}

body.light-mode .category-row{background:#f0f4f8}


/* === VIEW TOGGLE === */
.view-toggle{
  flex:0 0 auto;width:34px;height:34px;border-radius:8px;
  display:grid;place-items:center;cursor:pointer;font-size:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.5);transition:all 160ms cubic-bezier(.22,.8,.2,1);
}
.view-toggle:hover{background:rgba(255,255,255,.1);color:#fff}
.view-toggle:active{transform:scale(.93)}

/* === COMPACT MODE — fewer details, more cards === */

/* Desktop compact: 6 across */
.cards.compact-mode{grid-template-columns:repeat(6,1fr)!important;gap:10px}

/* Compact card content — strong image, name, price, 1-2 tags */
.compact-mode .card-photo{height:140px!important}
.compact-mode .card-body{padding:8px 10px 10px}
.compact-mode .card-title{font-size:14px;line-height:1.2;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.compact-mode .card-sci{display:none}
.compact-mode .card-info-strip{gap:3px;margin-top:4px}
.compact-mode .price-value{font-size:14px}
.compact-mode .tank-pill{font-size:8px;padding:2px 5px}
.compact-mode .card-category{font-size:8px;padding:2px 5px}

/* HIDE in compact mode */
.compact-mode .card-badges{display:none}
.compact-mode .status-bar{display:none}
.compact-mode .meta-grid{display:none!important}
.compact-mode .card-copy{display:none!important}
.compact-mode .tap-row{display:none!important}
.compact-mode .staff-actions{display:none!important}

/* Compact fav button smaller */
.compact-mode .fav-btn{width:26px;height:26px;font-size:14px;top:6px;left:6px}

/* Very wide screens: 7 compact */
@media (min-width:1800px){
  .cards.compact-mode{grid-template-columns:repeat(7,1fr)!important}
}

/* Tablet / medium screens: 4 compact */
@media (max-width:1260px){
  .cards.compact-mode{grid-template-columns:repeat(4,1fr)!important;gap:8px}
}
@media (max-width:1024px){
  .cards.compact-mode{grid-template-columns:repeat(3,1fr)!important;gap:8px}
}

/* Phone portrait: detailed = 1 across, compact = 2 across */
@media (max-width:600px) and (pointer:coarse){
  .view-toggle{width:26px;height:26px;font-size:13px;border-radius:6px}
  
  /* Compact: 2 across */
  .cards.compact-mode{grid-template-columns:repeat(2,1fr)!important;gap:6px}
  .compact-mode .card-photo{height:110px!important}
  .compact-mode .card-body{padding:5px 7px 7px}
  .compact-mode .card-title{font-size:13px}
  .compact-mode .price-value{font-size:12px}
  .compact-mode .tank-pill{font-size:7px}
  .compact-mode .card-category{font-size:7px}
}

/* Phone landscape: 4 compact */
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  .cards.compact-mode{grid-template-columns:repeat(4,1fr)!important;gap:4px}
  .compact-mode .card-photo{height:80px!important}
  .compact-mode .card-body{padding:4px 6px}
  .compact-mode .card-title{font-size:11px}
  .compact-mode .price-value{font-size:10px}
}

/* ===================================================================
   ANIMATION & POLISH SYSTEM — Luxury Aquarium Kiosk
   Easing: cubic-bezier(0.22, 0.8, 0.2, 1) — controlled, modern
   =================================================================== */

/* === 1. CARD PRESS / RELEASE === */
.fish-card{
  transition:transform 180ms cubic-bezier(.22,.8,.2,1),
             box-shadow 180ms cubic-bezier(.22,.8,.2,1),
             filter 180ms cubic-bezier(.22,.8,.2,1);
  will-change:transform;
}
.fish-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.25);
  filter:brightness(1.03);
}
.fish-card:active{
  transform:scale(.985) translateY(0);
  filter:brightness(1.06);
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  transition-duration:90ms;
}

/* === 2. MODAL OPEN / CLOSE === */
@keyframes modalSlideUp{
  from{opacity:0;transform:translateY(18px) scale(.988)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes modalSlideOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(10px) scale(.994)}
}
@keyframes backdropIn{
  from{opacity:0}
  to{opacity:1}
}
.overlay.show{animation:backdropIn 200ms cubic-bezier(.22,.8,.2,1)}
.overlay.show .fish-modal{animation:modalSlideUp 260ms cubic-bezier(.22,.8,.2,1)}
.overlay.closing .fish-modal{animation:modalSlideOut 180ms cubic-bezier(.22,.8,.2,1) forwards}

/* Modal content stagger */
.overlay.show .modal-section{
  opacity:0;animation:fadeSlideIn 220ms cubic-bezier(.22,.8,.2,1) forwards;
}
.overlay.show .modal-section:nth-child(1){animation-delay:60ms}
.overlay.show .modal-section:nth-child(2){animation-delay:120ms}
.overlay.show .modal-section:nth-child(3){animation-delay:160ms}
.overlay.show .modal-section:nth-child(4){animation-delay:200ms}
.overlay.show .modal-section:nth-child(5){animation-delay:240ms}
@keyframes fadeSlideIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* === 3. CATEGORY TAB SWITCH === */
.folder-tab{
  transition:background 200ms cubic-bezier(.22,.8,.2,1),
             border-color 200ms cubic-bezier(.22,.8,.2,1),
             box-shadow 200ms cubic-bezier(.22,.8,.2,1),
             transform 160ms cubic-bezier(.22,.8,.2,1);
}
.folder-tab:active{
  transform:scale(.97);
  transition-duration:80ms;
}
.folder-tab.active{
  box-shadow:0 0 14px var(--tab-glow,rgba(90,220,200,.2)),inset 0 1px 0 rgba(255,255,255,.12);
}
/* Subtle aqua sweep on active tab */
@keyframes tabSweep{
  0%{background-position:200% center}
  100%{background-position:-200% center}
}
.folder-tab.active::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent 30%,rgba(90,220,200,.08) 50%,transparent 70%);
  background-size:200% 100%;
  animation:tabSweep 2.4s ease-in-out;
  pointer-events:none;
}

/* Card grid fade on category switch */
@keyframes gridFadeIn{
  from{opacity:.6;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
.cards{animation:gridFadeIn 200ms cubic-bezier(.22,.8,.2,1)}

/* === 4. SEARCH FOCUS === */
.search-wrap{
  transition:border-color 180ms cubic-bezier(.22,.8,.2,1),
             box-shadow 180ms cubic-bezier(.22,.8,.2,1),
             filter 180ms cubic-bezier(.22,.8,.2,1);
}
.search-wrap:focus-within{
  border-color:rgba(90,220,200,.4);
  box-shadow:0 0 0 3px rgba(90,220,200,.1),0 16px 34px rgba(0,0,0,.2);
  filter:brightness(1.03);
}
.search-wrap svg{transition:opacity 160ms cubic-bezier(.22,.8,.2,1)}
.search-wrap:focus-within svg{opacity:1}

/* === 5. FAVORITE HEART === */
@keyframes heartPop{
  0%{transform:scale(1)}
  30%{transform:scale(1.35)}
  60%{transform:scale(.95)}
  100%{transform:scale(1)}
}
@keyframes heartGlow{
  0%{box-shadow:0 0 0 0 rgba(255,100,120,.4)}
  50%{box-shadow:0 0 0 8px rgba(255,100,120,0)}
  100%{box-shadow:0 0 0 0 rgba(255,100,120,0)}
}
.fav-btn.popping{
  animation:heartPop 200ms cubic-bezier(.22,.8,.2,1);
}
.fav-btn.popping::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  animation:heartGlow 300ms cubic-bezier(.22,.8,.2,1);
}

/* === 6. COMPARE FEEDBACK === */
.compare-btn{
  transition:transform 140ms cubic-bezier(.22,.8,.2,1),
             background 140ms cubic-bezier(.22,.8,.2,1);
}
.compare-btn:active{
  transform:scale(.93);
  transition-duration:60ms;
}
@keyframes comparePulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
.compare-bar.show{
  animation:comparePulse 200ms cubic-bezier(.22,.8,.2,1);
}

/* === 7. COMPATIBILITY BAR ANIMATION === */
@keyframes growBar{
  from{transform:scaleX(0);opacity:.7}
  to{transform:scaleX(1);opacity:1}
}
.overlay.show .gauge-fill,
.overlay.show .cmp-gauge-fill{
  transform-origin:left center;
  animation:growBar 320ms cubic-bezier(.22,.8,.2,1);
}

/* === 8. GALLERY IMAGE TRANSITION === */
.modal-photo img{
  transition:opacity 200ms cubic-bezier(.22,.8,.2,1);
}
.photo-gallery-thumb{
  transition:opacity 160ms cubic-bezier(.22,.8,.2,1),
             border-color 160ms cubic-bezier(.22,.8,.2,1),
             transform 160ms cubic-bezier(.22,.8,.2,1);
}
.photo-gallery-thumb:active{
  transform:scale(.92);
  transition-duration:60ms;
}

/* === FILTER CHIP FEEDBACK === */
.filter-chip{
  transition:transform 160ms cubic-bezier(.22,.8,.2,1),
             box-shadow 160ms cubic-bezier(.22,.8,.2,1),
             border-color 160ms cubic-bezier(.22,.8,.2,1),
             filter 160ms cubic-bezier(.22,.8,.2,1);
}
.filter-chip:active{
  transform:scale(.96);
  transition-duration:60ms;
}
.filter-chip[aria-pressed="true"]{
  box-shadow:0 0 10px rgba(90,220,200,.15);
}

/* === SORT CHOICE FEEDBACK === */
.sort-choice{
  transition:transform 140ms cubic-bezier(.22,.8,.2,1),
             background 140ms cubic-bezier(.22,.8,.2,1),
             box-shadow 140ms cubic-bezier(.22,.8,.2,1);
}
.sort-choice:active{
  transform:scale(.96);
  transition-duration:60ms;
}

/* === TOAST ANIMATION === */
@keyframes toastIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes toastOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(8px)}
}
.toast{animation:toastIn 200ms cubic-bezier(.22,.8,.2,1)}
.toast.hiding{animation:toastOut 160ms cubic-bezier(.22,.8,.2,1) forwards}

/* === AMBIENT: Fish of the Week subtle glow === */
@keyframes fotwGlow{
  0%,100%{box-shadow:0 0 20px rgba(255,200,60,.05)}
  50%{box-shadow:0 0 30px rgba(255,200,60,.12)}
}
#fishOfTheWeek>div{
  animation:fotwGlow 6s ease-in-out infinite;
}

/* === IDLE SCREEN BREATHING === */
@keyframes idleBreathe{
  0%,100%{opacity:.65;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.01)}
}
.idle-text{animation:idleBreathe 4s ease-in-out infinite}

/* ===================================================================
   REDUCED MOTION — respect user preference
   =================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

@keyframes pillPopIn{
  0%{opacity:0;transform:translateY(8px) scale(.92)}
  70%{opacity:1;transform:translateY(-1px) scale(1.03)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes bubbleLift{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  18%{opacity:.52}
  100%{opacity:0;transform:translate(calc(-50% + var(--bubble-x, 0px)), calc(-50% + var(--bubble-y, -18px))) scale(var(--bubble-scale, 1.1))}
}
@keyframes pressFlash{
  0%{box-shadow:inset 0 0 0 1px rgba(255,255,255,0),0 0 0 0 rgba(145,225,255,0)}
  35%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 4px rgba(145,225,255,.08)}
  100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,0),0 0 0 0 rgba(145,225,255,0)}
}
.press-flash{animation:pressFlash .42s cubic-bezier(.22,.8,.2,1)}
.bubble{
  position:absolute;width:8px;height:8px;border-radius:999px;pointer-events:none;z-index:3;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.8), rgba(162,233,255,.42) 52%, rgba(162,233,255,0) 72%);
  box-shadow:0 0 10px rgba(120,210,255,.18);animation:bubbleLift 520ms cubic-bezier(.2,.8,.2,1) forwards;
}
.overlay.show .pill-list > .list-pill,
.overlay.show .modal-mini > .mini-pill,
.overlay.show .mini-pill,
.overlay.show .status-pill{
  opacity:0;animation:pillPopIn .34s cubic-bezier(.22,.8,.2,1) forwards;
}
.overlay.show .pill-list > .list-pill:nth-child(1),
.overlay.show .modal-mini > .mini-pill:nth-child(1),
.overlay.show .status-pill:nth-child(1){animation-delay:60ms}
.overlay.show .pill-list > .list-pill:nth-child(2),
.overlay.show .modal-mini > .mini-pill:nth-child(2),
.overlay.show .status-pill:nth-child(2){animation-delay:100ms}
.overlay.show .pill-list > .list-pill:nth-child(3),
.overlay.show .modal-mini > .mini-pill:nth-child(3),
.overlay.show .status-pill:nth-child(3){animation-delay:140ms}
.overlay.show .pill-list > .list-pill:nth-child(4),
.overlay.show .modal-mini > .mini-pill:nth-child(4),
.overlay.show .status-pill:nth-child(4){animation-delay:180ms}
/* Compare bar — chip truncation for 3 fish */
.compare-chip{display:flex;align-items:center;gap:4px;min-width:0}
.chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.compare-bar{flex-wrap:nowrap!important}

/* Bundle scroll hint — desktop */
@media (min-width:601px){
  #bundleSection::after{display:none}
}












/* List mode — HIDE heavy info, keep it scannable */







/* Phone-specific list mode tweaks */
@media (max-width:600px) and (pointer:coarse){
  .view-toggle{width:28px;height:28px;font-size:14px;border-radius:6px}
  
  
  
  
  
  
  
}

/* === WATER PARAM GAUGE (class-based) === */
.wp-gauge{margin-top:4px}
.wp-track{height:10px;border-radius:5px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.wp-fill{position:absolute;height:100%;border-radius:5px}
.wp-labels{display:flex;justify-content:space-between;margin-top:3px}
.wp-min,.wp-max{font-size:10px;color:rgba(255,255,255,.25)}
.wp-value{font-size:12px;font-weight:800}

/* Mode toggle sweep animation (premium, non-gaudy) */
.mode-btn.active::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(110deg,transparent 0%,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%,transparent 100%);
  transform:translateX(-120%);
  animation:modeSweep 6.2s linear infinite;
  pointer-events:none;
}




/* ===================================================================
   V0.049 — ChatGPT responsive hardening overrides
   =================================================================== */
html,body{height:100%}
body.modal-open{overflow:hidden}

/* Stronger folder tint so category changes read clearly */
.folder-content{
  background:
    radial-gradient(circle at 50% 0%, var(--folder-glow), transparent 52%),
    linear-gradient(180deg, var(--folder-tint), transparent 42%),
    linear-gradient(180deg, rgba(10,18,28,.90), rgba(8,14,22,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 16px 34px rgba(0,0,0,.20), 0 0 30px var(--folder-glow), 0 18px 36px rgba(0,0,0,.18);
}

/* View toggle reads like a real mode switch, not a mystery icon */
.view-toggle{
  min-width:64px;height:34px;padding:0 12px;border-radius:10px;
  font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}
.view-toggle.active{
  background:linear-gradient(135deg, rgba(86,231,214,.24), rgba(109,183,255,.22));
  color:#eefcff;border-color:rgba(152,224,255,.28);
}

/* Card action row — compare stays visible in compact mode */
.card-actions-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px}
.card-action-text{margin:0;min-width:0;flex:1 1 auto}
.card-compare-btn{cursor:pointer;font-size:11px;white-space:nowrap;transition:160ms cubic-bezier(.22,.8,.2,1)}
.card-compare-btn.is-active{background:rgba(90,220,200,.2);color:#5eebc8;border-color:rgba(90,220,200,.4)}
.compact-mode .card-action-text{display:none}
.compact-mode .card-actions-row{padding-top:6px;margin-top:6px}
.compact-mode .card-compare-btn{font-size:10px;padding:4px 6px}

/* Compact mode — true stripped-down browse cards */
.cards.compact-mode{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px}
.compact-mode .fish-card{min-width:0}
.compact-mode .card-photo{height:146px!important}
.compact-mode .card-body{padding:8px 10px 10px}
.compact-mode .card-title{font-size:14px;line-height:1.18;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden}
.compact-mode .card-sci{display:none}
.compact-mode .card-badges,.compact-mode .status-bar,.compact-mode .meta-grid,.compact-mode .card-copy,.compact-mode .staff-actions{display:none!important}
.compact-mode .card-info-strip{gap:4px;margin-top:6px;align-items:flex-start;flex-wrap:wrap}
.compact-mode .price-value{font-size:15px}
.compact-mode .tank-pill{font-size:9px;padding:3px 6px}
.compact-mode .card-category{font-size:8px;padding:3px 6px;max-width:none}
.compact-mode .fav-btn{width:28px;height:28px;font-size:14px;top:6px;left:6px}

/* Desktop / tablet counts */
@media (max-width:1260px){
  .cards.compact-mode{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px}
}
@media (max-width:1024px){
  .cards.compact-mode{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
}

/* Phone portrait: detailed 1 across, compact 2 across, 3 on roomier phones */
@media (max-width:600px) and (pointer:coarse){
  .view-toggle{min-width:54px;height:28px;padding:0 8px;font-size:10px;border-radius:7px}
  .cards{grid-template-columns:1fr!important;gap:8px;padding:0 8px}
  .cards.compact-mode{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px;padding:0 8px}
  .compact-mode .card-photo{height:118px!important}
  .compact-mode .card-body{padding:6px 7px 8px}
  .compact-mode .card-title{font-size:12px}
  .compact-mode .price-value{font-size:12px}
  .compact-mode .tank-pill{font-size:7px;padding:2px 4px}
  .compact-mode .card-category{font-size:7px;padding:2px 4px}
  .compact-mode .card-compare-btn{font-size:8px;padding:3px 5px}
  .compact-mode .card-actions-row{gap:4px}
  .compact-mode .card-info-strip{margin-top:4px;gap:3px}
}
@media (min-width:430px) and (max-width:600px) and (pointer:coarse){
  .cards.compact-mode{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* Phone landscape: detailed 3 across, compact 5 across */
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}
  .cards.compact-mode{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px}
  .compact-mode .card-photo{height:82px!important}
  .compact-mode .card-body{padding:4px 5px 6px}
  .compact-mode .card-title{font-size:10px}
  .compact-mode .price-value{font-size:10px}
  .compact-mode .card-compare-btn{font-size:7px;padding:2px 4px}
}
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse) and (min-width:1000px){
  .cards.compact-mode{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}

/* Phone portrait modal: one scroll owner, simplified shell.
   v0.186 — REWRITTEN to target the magazine layout classes since
   modalTemplateMobile was deleted and modalTemplate (desktop) now
   renders at all viewport sizes. Old selectors targeted .modal-photo-mobile,
   .modal-mini, .mobile-stat-grid, .mobile-trait, .mobile-similar-grid —
   none of which exist in the merged template. New selectors target
   .modal-photo-magazine, .hero-status-pills, .mag-statstrip,
   .mag-similar-row, etc. Same intent: tighten spacing, scale type,
   collapse to single column at phone widths. */
@media (max-width:600px) and (pointer:coarse){
  .overlay.show{display:block!important}
  .fish-modal.mobile-safe{
    position:fixed!important;inset:0!important;width:100vw!important;max-width:none!important;
    height:100dvh!important;max-height:100dvh!important;border-radius:0!important;overflow:hidden!important;
  }
  .fish-modal.mobile-safe .modal-body{
    height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:52px 10px calc(16px + var(--safe-bottom))!important;
  }
  /* Magazine layout becomes a tight single-column flow at phone width.
     The desktop version already uses display:flex; flex-direction:column
     so we just need to tighten the gap and ensure nothing overflows. */
  .fish-modal.mobile-safe .modal-magazine-flow{
    gap:14px!important;padding-bottom:6px;
  }
  .fish-modal.mobile-safe .modal-magazine-flow > *{min-width:0;max-width:100%}
  /* Hero photo card */
  .fish-modal.mobile-safe .modal-photo-card.modal-hero-wide{
    border-radius:18px!important;
  }
  .fish-modal.mobile-safe .modal-photo-magazine{
    height:min(42dvh,300px)!important;min-height:220px!important;
  }
  .fish-modal.mobile-safe .modal-photo-copy-magazine{
    padding:14px 16px 16px!important;
  }
  .fish-modal.mobile-safe .modal-photo-copy-magazine h2{
    font-size:clamp(24px,7vw,30px)!important;line-height:1.02;
  }
  .fish-modal.mobile-safe .modal-photo-copy-magazine .latin{
    font-size:13px!important;margin-top:4px;
  }
  .fish-modal.mobile-safe .hero-cat-pill{font-size:10px!important;padding:4px 9px}
  .fish-modal.mobile-safe .hero-aliases{font-size:11px!important}
  .fish-modal.mobile-safe .hero-status-pills{gap:6px!important;flex-wrap:wrap}
  .fish-modal.mobile-safe .hero-pill{font-size:11px!important;padding:6px 9px!important;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .fish-modal.mobile-safe .hero-pricetag{font-size:16px!important;padding:7px 13px!important}
  .fish-modal.mobile-safe .hero-pricetag .hero-price-old{font-size:12px!important}
  /* Section headers */
  .fish-modal.mobile-safe .mag-section-header{
    font-size:11px!important;letter-spacing:.14em!important;margin-top:4px!important;margin-bottom:6px!important;
  }
  /* Stat strip — already responsive to 700px via existing rules, but
     phone portrait needs a tighter version */
  .fish-modal.mobile-safe .mag-statstrip{
    grid-template-columns:repeat(2,1fr)!important;gap:8px!important;
  }
  .fish-modal.mobile-safe .mag-statstrip .hero-stat-card{
    min-height:72px!important;padding:11px 9px!important;border-radius:14px!important;
  }
  .fish-modal.mobile-safe .mag-statstrip .hero-stat-card label{font-size:9px!important;letter-spacing:.10em}
  .fish-modal.mobile-safe .mag-statstrip .hero-stat-card strong{font-size:15px!important;line-height:1.2!important}
  .fish-modal.mobile-safe .mag-statstrip .hero-stat-icon svg{width:18px;height:18px}
  /* Compatibility gauges — stay in single column at phone width.
     LOCKED ELEMENT — only adjusting OUTER spacing, never the gauge
     internals (gauge-track, gauge-marker, gauge-head). */
  .fish-modal.mobile-safe .mag-gauges-wrap{padding:0!important}
  .fish-modal.mobile-safe .mag-gauges-wrap .gauges{gap:10px!important}
  /* Quick facts stack */
  .fish-modal.mobile-safe .mag-fact-stack{gap:8px!important}
  .fish-modal.mobile-safe .mag-fact-stack .fact-card{
    padding:11px 13px!important;font-size:13px!important;line-height:1.5!important;border-radius:14px!important;
  }
  /* Overview block */
  .fish-modal.mobile-safe .mag-overview{padding:14px 16px!important;border-radius:16px!important}
  .fish-modal.mobile-safe .mag-overview p{font-size:14px!important;line-height:1.55!important}
  /* Staff note */
  .fish-modal.mobile-safe .mag-staff-note{padding:12px 14px!important;border-radius:14px!important}
  .fish-modal.mobile-safe .mag-staff-note p{font-size:13px!important;line-height:1.5!important}
  /* Notice block */
  .fish-modal.mobile-safe .mag-notice-block{padding:13px 14px!important;border-radius:14px!important}
  /* Similar fish — collapse to 2 columns instead of horizontal scroll */
  .fish-modal.mobile-safe .mag-similar-row{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;overflow:visible!important;padding:0!important;
  }
  .fish-modal.mobile-safe .mag-similar-row .similar-card{
    min-width:0!important;width:100%!important;
  }
  /* More details collapse */
  .fish-modal.mobile-safe .more-details-toggle{padding:12px 14px!important;font-size:13px!important}
  .fish-modal.mobile-safe .more-details-content{padding:12px 0 0!important}
  .fish-modal.mobile-safe .more-details-twocol{
    grid-template-columns:1fr!important;gap:10px!important;
  }
  .fish-modal.mobile-safe .reading-block{padding:12px 14px!important;border-radius:14px!important}
  .fish-modal.mobile-safe .reading-block strong{font-size:11px!important;letter-spacing:.11em!important}
  .fish-modal.mobile-safe .reading-block p{font-size:13px!important;line-height:1.55!important}
  /* Bottom action row (Copy + Close CTAs) */
  .fish-modal.mobile-safe .mag-action-row{
    display:flex!important;gap:8px!important;flex-wrap:wrap;margin-top:6px;
  }
  .fish-modal.mobile-safe .mag-action-row .cta{
    min-height:46px;padding:0 14px;border-radius:14px;font-size:13px;flex:1 1 100%;
  }
  /* Pill list (best-with / caution-with) */
  .fish-modal.mobile-safe .pill-list{gap:6px!important}
  .fish-modal.mobile-safe .list-pill{font-size:11px!important;padding:7px 9px!important;white-space:normal;overflow-wrap:anywhere}
  /* Photo gallery row */
  .fish-modal.mobile-safe .mag-gallery-row{padding:0!important}
  .fish-modal.mobile-safe .photo-gallery{
    display:grid!important;grid-template-columns:repeat(auto-fit,minmax(72px,1fr))!important;gap:8px!important;overflow:visible!important;padding:0!important;
  }
  .fish-modal.mobile-safe .photo-gallery-thumb,
  .fish-modal.mobile-safe .photo-gallery-upload{width:100%!important;height:64px!important;flex:none!important}
  .fish-modal.mobile-safe .photo-upload-row{padding-top:4px!important}
  .fish-modal.mobile-safe .photo-gallery-upload-wide{width:100%!important;height:auto!important;padding:10px 12px!important}
  /* Staff editor (in-modal) — phone-tight spacing for the 4 primary
     tiles + secondary pills. Keeps the same 2x2 grid for primary tiles
     it already collapses to via its own rules, just trims gap. */
  .fish-modal.mobile-safe .staff-editor-v123{padding:14px 14px 16px!important;border-radius:16px!important}
  .fish-modal.mobile-safe .se-mode-banner{padding:8px 11px!important;font-size:11px!important}
  .fish-modal.mobile-safe .se-tile{min-height:84px!important;padding:11px 10px!important;border-radius:14px!important}
  .fish-modal.mobile-safe .se-tile-title{font-size:13px!important}
  .fish-modal.mobile-safe .se-tile-sub{font-size:11px!important}
  .fish-modal.mobile-safe .se-pill{font-size:11px!important;padding:9px 12px!important;min-height:38px!important}
  /* Modal close X (top-right) — pin to viewport so it floats over the
     scrolling content */
  .fish-modal.mobile-safe .modal-close{position:fixed!important;top:10px;right:10px;left:auto!important;z-index:120}
}


/* ===================================================================
   V0.050 — card density, category rail, and mobile detail polish
   =================================================================== */
.status-bar.quick-traits-strip{margin-top:8px;border-radius:10px}
.status-cell{padding:7px 5px}
.status-cell .s-label{font-size:8px;letter-spacing:.12em;margin-bottom:2px}
.status-cell .s-val{font-size:12px;line-height:1.15}

.mobile-facts-grid{display:none}

.category-shell{position:relative}
.category-scroll{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(48,52,62,.95),rgba(28,30,38,.97));color:#eefbff;font-size:22px;font-weight:900;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:180ms cubic-bezier(.22,.8,.2,1)}
.category-scroll:hover{transform:translateY(-50%) scale(1.04)}
.category-scroll.left{left:6px}
.category-scroll.right{right:6px}
.category-shell::before,.category-shell::after{content:'';position:absolute;top:0;bottom:0;width:34px;z-index:3;pointer-events:none;opacity:0;transition:180ms cubic-bezier(.22,.8,.2,1)}
.category-shell::before{left:0;background:linear-gradient(90deg,rgba(7,17,26,.98),rgba(7,17,26,0))}
.category-shell::after{right:0;background:linear-gradient(270deg,rgba(7,17,26,.98),rgba(7,17,26,0))}
body.light-mode .category-shell::before{background:linear-gradient(90deg,rgba(240,244,248,.98),rgba(240,244,248,0))}
body.light-mode .category-shell::after{background:linear-gradient(270deg,rgba(240,244,248,.98),rgba(240,244,248,0))}
.category-shell.can-scroll-left::before,.category-shell.can-scroll-right::after{opacity:1}
.category-shell.is-scrollable .category-scroll.right,.category-shell.can-scroll-left .category-scroll.left,.category-shell.can-scroll-right .category-scroll.right{opacity:1;pointer-events:auto}
.category-shell.is-scrollable .category-row{padding-inline:36px}

.view-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(46,48,56,.92),rgba(28,30,38,.96));border:1px solid rgba(220,234,248,.16);color:#dbefff;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.view-toggle .view-toggle-icon{font-size:14px;line-height:1;opacity:.92}
.view-toggle .view-toggle-text{font-size:11px;line-height:1;letter-spacing:.1em}
.view-toggle::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,transparent 38%,rgba(255,255,255,.18) 50%,transparent 62%,transparent 100%);transform:translateX(-125%);transition:transform .45s cubic-bezier(.22,.8,.2,1);pointer-events:none}
.view-toggle:hover::after,.view-toggle.active::after{transform:translateX(125%)}
.view-toggle.active{background:linear-gradient(135deg,rgba(86,231,214,.28),rgba(109,183,255,.24));color:#f4fcff;border-color:rgba(152,224,255,.34);box-shadow:0 0 0 1px rgba(152,224,255,.12),0 10px 24px rgba(0,0,0,.22)}

.filter-chip,.mode-btn,.sort-choice{position:relative;overflow:hidden}
.filter-chip::after,.mode-btn::after,.sort-choice::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 0%,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%,transparent 100%);transform:translateX(-120%);transition:transform .4s cubic-bezier(.22,.8,.2,1);pointer-events:none}
.filter-chip:hover::after,.mode-btn:hover::after,.sort-choice:hover::after{transform:translateX(120%)}

.cards.compact-mode{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:10px}
@media (max-width:1500px){.cards.compact-mode{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media (max-width:1260px){.cards.compact-mode{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px}}
@media (max-width:1024px){.cards.compact-mode{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px}}

@media (max-width:600px) and (pointer:coarse){
  .category-shell.is-scrollable .category-row{padding-inline:26px}
  .category-scroll{width:28px;height:28px;font-size:18px}
  .category-scroll.left{left:2px}.category-scroll.right{right:2px}
  .search-wrap{min-width:0}
  .view-toggle{min-width:72px;height:30px;padding:0 10px;border-radius:9px}
  .view-toggle .view-toggle-icon{font-size:13px}
  .view-toggle .view-toggle-text{font-size:10px}
  .status-bar.quick-traits-strip{margin-top:6px;border-radius:9px}
  .status-cell{padding:4px 3px}
  .status-cell .s-label{font-size:6px;letter-spacing:.1em;margin-bottom:2px}
  .status-cell .s-val{font-size:9px}
  .mobile-facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}
  .mobile-fact{padding:7px 8px;border-radius:10px;background:linear-gradient(180deg,rgba(46,48,56,.92),rgba(22,24,30,.96));border:1px solid rgba(255,255,255,.06);min-width:0}
  .mobile-fact span{display:block;font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:rgba(200,214,228,.5);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-fact strong{display:block;margin-top:3px;font-size:11px;line-height:1.25;color:#eef8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .meta-grid{display:none!important}
  .card-copy{display:none!important}
  .cards.compact-mode{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px;padding:0 8px}
}
@media (min-width:430px) and (max-width:600px) and (pointer:coarse){
  .cards.compact-mode{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}
  .cards.compact-mode{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px}
}
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse) and (min-width:900px){
  .cards.compact-mode{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}

/* Mobile portrait modal: make overlay the single scroll owner for Android reliability */
@media (max-width:600px) and (pointer:coarse){
  .overlay{align-items:flex-start!important;justify-content:stretch!important;padding:0!important}
  .overlay.show{display:block!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .fish-modal.mobile-safe{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;min-height:100dvh!important;height:auto!important;max-height:none!important;border-radius:0!important;overflow:visible!important}
  .fish-modal.mobile-safe .modal-body{min-height:100dvh!important;height:auto!important;overflow:visible!important;padding:54px 10px calc(18px + var(--safe-bottom))!important}
  .fish-modal.mobile-safe .modal-layout.mobile-stack{gap:10px;align-content:start}
  .fish-modal.mobile-safe .modal-layout.mobile-stack > *{min-width:0;max-width:100%}
  .fish-modal.mobile-safe .modal-section,.fish-modal.mobile-safe .origin-card,.fish-modal.mobile-safe .staff-card,.fish-modal.mobile-safe .modal-stat,.fish-modal.mobile-safe .modal-photo-card{min-width:0;max-width:100%}
  .fish-modal.mobile-safe .mobile-traits-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
  .fish-modal.mobile-safe .mobile-trait{padding:8px 9px;border-radius:12px;border:1px solid rgba(255,255,255,.08);min-width:0}
  .fish-modal.mobile-safe .mobile-trait span{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(220,232,244,.48);font-weight:800}
  .fish-modal.mobile-safe .mobile-trait strong{display:block;margin-top:3px;font-size:13px;line-height:1.25;color:#f4fbff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fish-modal.mobile-safe .mobile-practical-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .fish-modal.mobile-safe .mobile-practical{padding:9px 10px;border-radius:12px;background:rgba(12,21,31,.72);border:1px solid rgba(255,255,255,.07);min-width:0}
  .fish-modal.mobile-safe .mobile-practical span{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(204,220,235,.46);font-weight:800}
  .fish-modal.mobile-safe .mobile-practical strong{display:block;margin-top:4px;font-size:13px;line-height:1.28;color:#edf9ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fish-modal.mobile-safe .pill-list{gap:6px}
  .fish-modal.mobile-safe .list-pill,.fish-modal.mobile-safe .reading-block p,.fish-modal.mobile-safe .overview,.fish-modal.mobile-safe .origin-card p,.fish-modal.mobile-safe .staff-card p{overflow-wrap:anywhere;word-break:break-word}
  .fish-modal.mobile-safe .photo-gallery{max-width:100%}
  .fish-modal.mobile-safe .similar-row.mobile-similar-grid{grid-template-columns:1fr 1fr;max-width:100%}
  .fish-modal.mobile-safe .modal-close{top:calc(8px + var(--safe-top))!important;right:10px!important;left:auto!important}
}

/* === V0.051 targeted polish pass === */
.search-filter-row{
  grid-template-columns:minmax(0,1fr) auto auto auto auto;
  align-items:stretch;
}

.status-bar.quick-traits-strip{gap:0;border-radius:10px;overflow:hidden}
.status-cell{padding:5px 4px}
.status-cell .s-label{font-size:8px;letter-spacing:.1em}
.status-cell .s-val{font-size:11px;line-height:1.15}

.view-toggle-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:2px;
  min-width:112px;
  min-height:var(--tap);
  padding:4px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(46,48,56,.94),rgba(28,30,38,.98));
  border:1px solid rgba(160,220,255,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  isolation:isolate;
  animation:viewToggleGlow 3.6s ease-in-out infinite;
}
.view-toggle-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 0%,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%,transparent 100%);
  transform:translateX(-135%);
  animation:viewToggleSweep 4.8s linear infinite;
  pointer-events:none;
  z-index:0;
}
.view-toggle-seg{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
  flex:1 1 0;
  height:34px;
  padding:0 10px;
  border-radius:12px;
  color:rgba(218,235,248,.82);
  background:rgba(255,255,255,.03);
  border:1px solid transparent;
  font-weight:900;
  letter-spacing:.06em;
  cursor:pointer;
  transition:transform .16s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.view-toggle-seg:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}
.view-toggle-seg:active{transform:scale(.97)}
.view-toggle-seg .view-toggle-icon{font-size:13px;line-height:1}
.view-toggle-seg .view-toggle-text{font-size:11px;line-height:1;white-space:nowrap}
.view-toggle-seg.active{
  color:#f5fcff;
  border-color:rgba(152,224,255,.32);
  background:linear-gradient(135deg,rgba(86,231,214,.24),rgba(109,183,255,.22));
  box-shadow:0 0 0 1px rgba(152,224,255,.08), 0 8px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.view-toggle-seg.active .view-toggle-icon{opacity:1}
@keyframes viewToggleGlow{
  0%,100%{box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 rgba(94,235,200,0)}
  50%{box-shadow:0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05), 0 0 18px rgba(94,235,200,.18)}
}
@keyframes viewToggleSweep{
  0%,15%{transform:translateX(-135%)}
  35%,100%{transform:translateX(135%)}
}

/* Compact mode: use extra desktop/tablet room for a couple of practical facts */
@media (min-width:861px){
  .cards.compact-mode .mobile-facts-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:8px;
  }
  .cards.compact-mode .mobile-fact:nth-child(n+3){display:none}
  .cards.compact-mode .mobile-fact{
    padding:6px 7px;
    border-radius:10px;
    background:linear-gradient(180deg,rgba(46,48,56,.92),rgba(22,24,30,.96));
    border:1px solid rgba(255,255,255,.06);
    min-width:0;
  }
  .cards.compact-mode .mobile-fact span{
    display:block;
    font-size:8px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(202,216,228,.48);
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .cards.compact-mode .mobile-fact strong{
    display:block;
    margin-top:3px;
    font-size:11px;
    line-height:1.22;
    color:#f4fbff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .cards.compact-mode .card-actions-row{padding-top:8px;margin-top:8px}
}

/* Tablet / desktop control-row cleanup */
@media (max-width:1260px) and (min-width:861px){
  .search-filter-row{
    grid-template-columns:minmax(0,1fr) auto auto auto auto;
    gap:10px;
  }
  .search-wrap{grid-column:1 / 3}
  .view-toggle-wrap{justify-self:end}
}

/* Phone portrait: keep search on its own row, then filters + mode switch on one compact row */
@media (max-width:600px) and (pointer:coarse){
  .search-filter-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto auto auto!important;
    gap:4px!important;
    align-items:center!important;
  }
  .search-wrap{grid-column:1 / -1!important;order:0!important}
  .filter-chip{padding:0 6px!important;font-size:9px!important;height:26px!important;min-height:26px!important;max-height:26px!important;border-radius:8px!important}
  .filter-chip.beginner{padding:0 6px!important}
  .view-toggle-wrap{
    min-width:56px;
    min-height:26px;
    height:26px;
    padding:2px;
    border-radius:9px;
    justify-self:end;
    animation-duration:3.2s;
  }
  .view-toggle-seg{
    height:20px;
    min-width:24px;
    padding:0 4px;
    border-radius:7px;
    gap:0;
  }
  .view-toggle-seg .view-toggle-text{display:none}
  .view-toggle-seg .view-toggle-icon{font-size:11px}

  .status-bar.quick-traits-strip{margin-top:6px;border-radius:9px}
  .status-cell{padding:4px 3px}
  .status-cell .s-label{font-size:6px}
  .status-cell .s-val{font-size:8px}
}

/* Landscape phones: keep the segmented control tidy so it doesn't bleed */
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  .view-toggle-wrap{
    flex:0 0 auto;
    min-width:auto;
    min-height:22px;
    height:22px;
    padding:1px;
    border-radius:7px;
  }
  .view-toggle-seg{
    height:18px;
    min-width:22px;
    padding:0 4px;
    border-radius:5px;
    gap:0;
  }
  .view-toggle-seg .view-toggle-text{display:none}
  .view-toggle-seg .view-toggle-icon{font-size:10px}
}


/* === V0.052 targeted cleanup === */
.shell,.control-panel,.promo-area,.folder-content{overflow-x:clip}
.category-shell,.bundle-shell{max-width:100%;overflow:hidden}

/* Slightly reduce top controls on desktop/tablet */
@media (min-width:861px){
  .search-wrap{min-height:66px;padding-left:58px;border-radius:22px}
  .search-wrap input{font-size:18px;padding:0 20px 0 0}
  .search-wrap svg{left:18px;width:22px;height:22px}
  .filter-chip{min-height:66px;padding:0 18px;font-size:16px;gap:10px;border-radius:20px}
  .search-filter-row{gap:12px}
}

/* Replace segmented mode switch with single polished toggle */
.view-toggle-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:96px;min-height:56px;padding:0 14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(46,48,56,.95),rgba(28,30,38,.98));
  border:1px solid rgba(132,200,255,.24);color:#ecf7ff;cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;isolation:isolate;transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  animation:viewToggleGlow 3.6s ease-in-out infinite;
}
.view-toggle-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,transparent 36%,rgba(255,255,255,.14) 50%,transparent 64%,transparent 100%);transform:translateX(-135%);animation:viewToggleSweep 4.8s linear infinite;pointer-events:none;z-index:0}
.view-toggle-btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05)}
.view-toggle-btn:active{transform:scale(.985)}
.view-toggle-btn .view-toggle-icon,.view-toggle-btn .view-toggle-text{position:relative;z-index:1}
.view-toggle-btn .view-toggle-icon{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:rgba(255,255,255,.08);font-size:13px;line-height:1;opacity:.98}
.view-toggle-btn .view-toggle-text{font-size:11px;line-height:1;letter-spacing:.10em;font-weight:900;text-transform:uppercase;white-space:nowrap}
.view-toggle-btn.active{border-color:rgba(132,220,255,.34);background:linear-gradient(135deg,rgba(49,157,212,.26),rgba(42,215,186,.22));box-shadow:0 0 0 1px rgba(132,220,255,.10),0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08)}

/* Stronger, more obvious horizontal-rail cues */
.category-shell,.bundle-shell{position:relative}
.category-scroll,.bundle-scroll{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:34px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(56,60,72,.98),rgba(32,34,42,.98));color:#eefbff;font-size:20px;font-weight:900;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.34),0 0 18px rgba(220,234,248,.10);opacity:0;pointer-events:none;transition:180ms cubic-bezier(.22,.8,.2,1)}
.category-scroll:hover,.bundle-scroll:hover{transform:translateY(-50%) scale(1.06)}
.bundle-scroll.left{left:6px}.bundle-scroll.right{right:6px}
.category-shell::before,.category-shell::after,.bundle-shell::before,.bundle-shell::after{content:'';position:absolute;top:0;bottom:0;width:44px;z-index:4;pointer-events:none;opacity:0;transition:180ms cubic-bezier(.22,.8,.2,1)}
.bundle-shell::before{left:0;background:linear-gradient(90deg,rgba(7,17,26,.98),rgba(7,17,26,0))}
.bundle-shell::after{right:0;background:linear-gradient(270deg,rgba(7,17,26,.98),rgba(7,17,26,0))}
body.light-mode .bundle-shell::before{background:linear-gradient(90deg,rgba(240,244,248,.98),rgba(240,244,248,0))}
body.light-mode .bundle-shell::after{background:linear-gradient(270deg,rgba(240,244,248,.98),rgba(240,244,248,0))}
.bundle-shell.can-scroll-left::before,.bundle-shell.can-scroll-right::after{opacity:1}
.bundle-shell.is-scrollable .bundle-scroll.right,.bundle-shell.can-scroll-left .bundle-scroll.left,.bundle-shell.can-scroll-right .bundle-scroll.right{opacity:1;pointer-events:auto}
.category-shell.is-scrollable .category-scroll.right,.bundle-shell.is-scrollable .bundle-scroll.right{animation:railNudge 2.2s ease-in-out infinite}
.category-shell.is-scrollable .category-row,.bundle-shell.is-scrollable .bundle-row{padding-inline:40px}
.bundle-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bundle-row::-webkit-scrollbar{display:none}

/* Desktop/tablet compact cards: use space better */
.sale-badge{background:linear-gradient(180deg,rgba(66,18,24,.86),rgba(46,12,18,.92));border-color:rgba(255,100,100,.22);padding:8px 10px 7px;gap:1px;align-items:flex-start}
.sale-badge .price-old{font-size:10px;line-height:1;color:rgba(255,255,255,.38);text-decoration:line-through;display:block}
.sale-badge .sale-price{color:#ff9191}
.sale-badge .price-sale-tag{display:inline-block;margin-top:2px;font-size:8px;font-weight:900;letter-spacing:.08em;color:#ff6d6d;text-transform:uppercase}
.compact-traits-row{display:none}
@media (min-width:861px){
  .compact-mode .compact-traits-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
  .compact-mode .compact-trait{display:inline-flex;align-items:center;justify-content:center;min-height:22px;padding:0 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.02em;border:1px solid rgba(255,255,255,.08);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .compact-mode .compact-trait-reef{background:rgba(50,224,190,.10);color:#7df2d4;border-color:rgba(90,220,200,.18)}
  .compact-mode .compact-trait-care{background:rgba(155,118,255,.10);color:#d3b8ff;border-color:rgba(155,118,255,.18)}
  .compact-mode .price-badge{min-width:72px}
}

/* Mobile: keep horizontal surfaces inside viewport and simplify toggle */
@media (max-width:600px) and (pointer:coarse){
  .bundle-shell.is-scrollable .bundle-row,.category-shell.is-scrollable .category-row{padding-inline:30px}
  .bundle-scroll,.category-scroll{width:30px;height:30px;font-size:19px;box-shadow:0 8px 18px rgba(0,0,0,.32),0 0 12px rgba(82,231,208,.18)}
  .bundle-scroll.left,.category-scroll.left{left:2px}.bundle-scroll.right,.category-scroll.right{right:2px}
  .search-filter-row{grid-template-columns:minmax(0,1fr) auto auto auto auto!important}
  .view-toggle-btn{min-width:44px;min-height:26px;height:26px;padding:0 8px;border-radius:9px;justify-self:end;animation-duration:3.2s}
  .view-toggle-btn .view-toggle-icon{font-size:12px}
  .view-toggle-btn .view-toggle-text{display:none}
  .filter-chip{font-size:10px!important;padding:0 7px!important}
}
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  .view-toggle-btn{min-width:40px;min-height:22px;height:22px;padding:0 6px;border-radius:7px}
  .view-toggle-btn .view-toggle-icon{font-size:10px}
  .view-toggle-btn .view-toggle-text{display:none}
}

/* Hide old segmented toggle styling after switch-back */
.view-toggle-wrap,.view-toggle-seg{display:none!important}

/* More room for compact desktop/tablet cards */
@media (min-width:861px){
  .cards.compact-mode .fish-card{min-height:0}
  .cards.compact-mode .card-body{padding:8px 10px 9px}
  .cards.compact-mode .mobile-facts-grid{margin-top:7px}
}

/* Make category and bundle rails feel horizontally scrollable */
@keyframes railNudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(2px)}}

.card-title-row{display:flex;align-items:flex-start;gap:8px;min-width:0}
.card-title-row .card-title{min-width:0;flex:1 1 auto}
.card-old-price-inline{display:none;flex:0 0 auto;align-self:flex-start;font-size:11px;line-height:1;color:rgba(255,255,255,.42);text-decoration:line-through;white-space:nowrap;margin-top:2px}
.sale-main-badge{background:linear-gradient(180deg,rgba(66,18,24,.82),rgba(46,12,18,.9));border-color:rgba(255,100,100,.18);padding:6px 8px 5px;gap:2px;align-items:flex-start;min-width:64px}
.sale-main-badge .sale-price{color:#ff9191}
.sale-main-badge .price-sale-tag{display:inline-block;font-size:8px;font-weight:900;letter-spacing:.08em;color:#ff6d6d;text-transform:uppercase}
.compact-mode .card-old-price-inline{display:inline-block}
.compact-mode .sale-main-badge .price-value{font-size:14px}
.compact-mode .card-info-strip{align-items:flex-start}
@media (min-width:861px){
  .compact-mode .card-info-strip{display:grid;grid-template-columns:auto auto 1fr;gap:6px;align-items:start}
  .compact-mode .compact-traits-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:7px}
  .compact-mode .compact-trait{display:flex;align-items:center;justify-content:center;min-height:24px;padding:0 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.02em;border:1px solid rgba(255,255,255,.08);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}
  .compact-mode .compact-trait-care,.compact-mode .compact-trait-reef{max-width:none}
  .compact-mode .price-badge{min-width:68px}
}
@media (max-width:600px) and (pointer:coarse){
  .view-toggle-btn{min-width:58px;min-height:38px;height:38px;padding:0 10px;border-radius:12px;animation-duration:3.2s}
  .view-toggle-btn .view-toggle-icon{width:18px;height:18px;font-size:11px;border-radius:6px}
  .view-toggle-btn .view-toggle-text{display:none}
}
@media (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  .view-toggle-btn{min-width:54px;min-height:32px;height:32px;padding:0 8px;border-radius:10px}
  .view-toggle-btn .view-toggle-icon{width:16px;height:16px;font-size:10px;border-radius:5px}
}

/* === V0.054 surgical fixes + audit pass === */
html,body{max-width:100%;overflow-x:hidden}

/* Sale pricing: old price beside title, sale price occupies the normal price slot */
.card-title-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:6px;align-items:start}
.card-title-row .card-title{min-width:0;margin:0}
.card-old-price-inline{
  display:none;
  align-self:center;
  font-size:11px;
  line-height:1;
  color:rgba(255,255,255,.42);
  text-decoration:line-through;
  white-space:nowrap;
  margin:0;
}
.card-sale-inline{
  display:none;
  align-self:center;
  min-height:18px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(255,109,109,.12);
  border:1px solid rgba(255,109,109,.18);
  color:#ff7b7b;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:18px;
  text-transform:uppercase;
}
.card-info-strip{align-items:center}
.sale-main-badge{
  min-width:68px;
  justify-content:center;
  align-items:center;
  padding:6px 10px;
  gap:0;
}
.sale-main-badge .price-value{line-height:1}
.sale-main-badge .price-sale-tag{display:none!important}

.cards.compact-mode .card-old-price-inline,
.cards.compact-mode .card-sale-inline{display:inline-block}
.cards.compact-mode .card-info-strip{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:6px;
  align-items:center;
}
.cards.compact-mode .price-badge{min-width:68px}

/* Uniform compact quick-trait pills */
.cards.compact-mode .compact-traits-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:7px;
}
.cards.compact-mode .compact-trait{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}

/* Category and bundle rails: clear scroll affordance */
.category-row,.bundle-row{
  scroll-snap-type:x proximity;
  scroll-padding-left:14px;
}
.folder-tab,.bundle-card{scroll-snap-align:start}

.category-shell.is-scrollable .category-row,
.bundle-shell.is-scrollable .bundle-row{
  padding-left:14px;
  padding-right:56px;
}
.category-shell.can-scroll-right::after,
.bundle-shell.can-scroll-right::after{
  opacity:1;
}
.category-shell.is-scrollable .category-scroll.right,
.bundle-shell.is-scrollable .bundle-scroll.right{
  opacity:1;
  pointer-events:auto;
}
.category-shell.can-scroll-left .category-scroll.left,
.bundle-shell.can-scroll-left .bundle-scroll.left{
  opacity:1;
  pointer-events:auto;
}

/* Mobile rail cues need to be obvious, not subtle */
@media (max-width:860px){
  .category-shell,.bundle-shell{overflow:hidden}
  .category-shell::after,.bundle-shell::after{
    width:54px;
    background:linear-gradient(270deg,rgba(7,17,26,1),rgba(7,17,26,.82) 35%,rgba(7,17,26,0));
  }
  body.light-mode .category-shell::after,
  body.light-mode .bundle-shell::after{
    background:linear-gradient(270deg,rgba(240,244,248,1),rgba(240,244,248,.82) 35%,rgba(240,244,248,0));
  }
  .category-shell.is-scrollable .category-row,
  .bundle-shell.is-scrollable .bundle-row{
    padding-left:10px;
    padding-right:64px;
  }
  .category-scroll,
  .bundle-scroll{
    width:auto;
    min-width:46px;
    height:32px;
    padding:0 10px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:18px;
    box-shadow:0 10px 22px rgba(0,0,0,.34),0 0 16px rgba(82,231,208,.24);
  }
  .category-scroll.right::after,
  .bundle-scroll.right::after{
    content:'More';
    font-size:10px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#ecfbff;
  }
  .category-scroll.left::after,
  .bundle-scroll.left::after{content:''}
}

/* Compact cards on phones still need sale/titles to fit cleanly */
@media (max-width:600px) and (pointer:coarse){
  .cards.compact-mode .card-title-row{column-gap:4px}
  .cards.compact-mode .card-old-price-inline{font-size:10px}
  .cards.compact-mode .card-sale-inline{font-size:8px;padding:0 5px;line-height:16px;min-height:16px}
  .cards.compact-mode .sale-main-badge{min-width:60px;padding:5px 8px}
  .cards.compact-mode .compact-trait{height:22px;font-size:9px;padding:0 6px}
  .category-scroll.right::after,
  .bundle-scroll.right::after{font-size:9px}
}

/* V0.055 content cleanup */
.reading-block.empty,
.fact-card.empty,
.list-pill.empty,
.staff-card.empty,
.origin-card.empty {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.reading-block.empty p,
.fact-card.empty,
.list-pill.empty,
.staff-card.empty p,
.origin-card.empty p {
  color: rgba(255,255,255,.62);
  font-style: italic;
}
.wp-gauge-unknown .wp-track {
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}


/* ===== Phase 1 catalog cleanup ===== */
.detail-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;pointer-events:none;display:none;filter:saturate(1.05) brightness(.55) blur(1px);z-index:0}
.overlay.show .fish-modal .detail-bg-video{display:block}
.fish-modal > *:not(.detail-bg-video){position:relative;z-index:1}
.overlay::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,10,.64), rgba(2,6,10,.78));pointer-events:none}
.fish-modal{position:relative;z-index:1;background:linear-gradient(180deg, rgba(6,15,24,.90), rgba(6,15,24,.96));backdrop-filter: blur(4px);overflow:hidden}
.modal-headline-bar{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid rgba(152,224,255,.18);background:linear-gradient(180deg, rgba(31,64,95,.78), rgba(22,24,30,.88));box-shadow:var(--shadow-soft)}
.modal-headline-copy{min-width:0;flex:1}.modal-headline-copy strong{display:block;font-size:20px;font-weight:900;color:#f7fbff;line-height:1.15}.modal-headline-copy p{margin:6px 0 0;font-size:15px;line-height:1.55;color:#d9e8f3;font-weight:700}
.compact-stats .meta-sub{display:none!important}.compact-stats .modal-stat{padding:14px 16px 13px;border-radius:20px}
.meta-price-stack{display:flex;flex-direction:column;gap:2px}.meta-old-price{font-size:13px;line-height:1;color:rgba(255,255,255,.48);text-decoration:line-through;font-weight:800}
.staff-card{background:linear-gradient(135deg, rgba(255,190,95,.18), rgba(245,97,77,.12));border-color:rgba(255,203,132,.32);box-shadow:0 0 0 1px rgba(255,203,132,.08), 0 16px 28px rgba(0,0,0,.24)}
.staff-card strong{color:#ffe1a4}
.origin-card{background:linear-gradient(135deg, rgba(81,201,225,.16), rgba(74,126,220,.12));border-color:rgba(152,224,255,.24)}
.similar-card{position:relative;overflow:hidden;min-width:160px;height:132px;padding:0;border-radius:20px;border:1px solid rgba(200,232,255,.12);background:#2c2e36;box-shadow:var(--shadow-soft)}
.similar-photo{position:absolute;inset:0;background:linear-gradient(135deg,#2c2e36,#1c1e26)}
.similar-photo img{width:100%;height:100%;object-fit:cover;display:block}.similar-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,14,22,.10), rgba(6,14,22,.90) 72%)}
.similar-copy{position:absolute;left:12px;right:12px;bottom:12px;z-index:1}.similar-card .name{font-size:16px;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.65);margin-top:0}.similar-card .sub{font-size:12px;color:rgba(255,255,255,.92);font-weight:750;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.similar-card:hover{transform:translateY(-1px);background:#2c2e36;border-color:rgba(255,255,255,.18)}
.fish-modal.mobile-safe .modal-headline-bar{padding:10px 12px;border-radius:16px}.fish-modal.mobile-safe .modal-headline-copy strong{font-size:18px}.fish-modal.mobile-safe .modal-headline-copy p{font-size:13px;line-height:1.45}.fish-modal.mobile-safe .similar-card{min-width:0;height:116px}.fish-modal.mobile-safe .similar-copy{left:10px;right:10px;bottom:10px}.fish-modal.mobile-safe .similar-card .name{font-size:14px}.fish-modal.mobile-safe .similar-card .sub{font-size:11px}.fish-modal.mobile-safe .modal-stat .meta-value{font-size:19px}.fish-modal.mobile-safe .modal-stat .meta-label{font-size:11px}

/* === PHASE 2A FOOD SYSTEM === */
.food-reco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.food-card{padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(46,48,56,.92),rgba(22,24,30,.96));border:1px solid rgba(220,234,248,.14);box-shadow:var(--shadow-soft)}
.food-brand{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#8fd8ff;margin-bottom:6px}
.food-name{font-size:16px;font-weight:850;color:#fff;line-height:1.25}
.food-notes{margin-top:6px;color:#d5e7f4;font-size:13px;line-height:1.55;font-weight:620}
.food-settings-panel{max-width:980px}
.food-settings-copy{color:rgba(255,255,255,.72);font-size:14px;line-height:1.55;margin-bottom:16px}
.food-settings-brands{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.food-toggle{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:13px;font-weight:700;color:#fff}
.food-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.food-card-toggle{display:block;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(46,48,56,.92),rgba(22,24,30,.96));border:1px solid rgba(220,234,248,.14);cursor:pointer;min-height:120px}
.food-card-toggle input{margin-bottom:8px}
.food-card-toggle.is-dim{opacity:.55}
.food-card-toggle .food-brand{margin-top:4px}
.modal-headline-copy .latin-mini{display:block;margin-top:4px;font-size:12px;color:rgba(214,234,248,.72);font-style:italic;font-weight:650}
.staff-card{position:relative}
.staff-card::before{content:"STAFF";position:absolute;top:12px;right:14px;font-size:10px;font-weight:900;letter-spacing:.16em;color:#ffd796;opacity:.9}
.fish-modal.mobile-safe .food-reco-grid{grid-template-columns:1fr;gap:8px}
.fish-modal.mobile-safe .food-card{padding:10px 12px;border-radius:14px}
.fish-modal.mobile-safe .food-name{font-size:14px}
.fish-modal.mobile-safe .food-notes{font-size:12px;line-height:1.45}
body.light-mode .food-card, body.light-mode .food-card-toggle{background:#fff;border-color:rgba(0,0,0,.08)}
body.light-mode .food-notes{color:rgba(0,0,0,.62)}
body.light-mode .food-settings-copy{color:rgba(0,0,0,.62)}
body.light-mode .food-toggle{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08);color:#1a2030}

/* === PHASE 2B FOOD SYSTEM COMPLETE === */
.food-section .section-title{align-items:flex-start;gap:8px}
.section-note{font-size:11px;line-height:1.4;color:rgba(215,235,245,.6);font-weight:700;letter-spacing:.04em}
.food-advice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0 14px}
.food-advice-card{padding:14px 15px;border-radius:16px;background:linear-gradient(180deg,rgba(46,48,56,.9),rgba(22,24,30,.98));border:1px solid rgba(220,234,248,.12)}
.food-advice-card span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8fd8ff;font-weight:850;margin-bottom:6px}
.food-advice-card strong{display:block;font-size:16px;line-height:1.25;color:#fff;margin-bottom:6px}
.food-advice-card p{margin:0;color:#d5e7f4;font-size:13px;line-height:1.55}
.food-bucket{margin-top:14px}
.food-bucket-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.food-bucket-head strong{font-size:14px;color:#fff}
.food-bucket-head span{font-size:11px;color:rgba(215,235,245,.6);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.food-bucket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.food-card{display:flex;flex-direction:column;min-height:148px}
.food-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.food-badge{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 8px;border-radius:999px;background:rgba(143,216,255,.12);border:1px solid rgba(143,216,255,.2);color:#dff6ff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.food-usage{margin-top:auto;padding-top:8px;font-size:12px;line-height:1.45;color:rgba(232,243,251,.78);font-weight:650}
.food-empty-note{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.14);color:rgba(232,243,251,.76);font-size:13px;line-height:1.5}
.food-settings-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.food-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#fff;font-size:13px;font-weight:800;cursor:pointer}
.food-toolbar-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.food-toolbar-btn.danger{background:rgba(255,95,95,.10);border-color:rgba(255,95,95,.18);color:#ffb0b0}

/* v0.157 — Inventory "Add fish / invert" toolbar button PROMOTED.
   Was sharing .food-toolbar-btn's small 38px chrome, which made it
   drastically smaller than the sh-tile buttons on staff home and got
   lost next to the dropdowns. Chris said he kept reaching for the
   bigger "Add a custom species" circle on staff home by mistake. Fix:
   give this button dedicated prominent styling so it dominates the
   inventory toolbar and reads as the obvious primary action. Emerald
   gradient (matches v0.153 money green for semantic "add/create"),
   bigger height, bigger font, glow halo, subtle slam-in entrance. */
.food-toolbar-btn.inventory-add-toolbar{
  min-height:52px;
  padding:0 22px 0 18px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.02em;
  color:#0a1a12;
  background:linear-gradient(180deg, #6fe69a 0%, #4ade80 55%, #39c56e 100%);
  border:1.5px solid rgba(255,255,255,0.35);
  box-shadow:
    0 0 0 1px rgba(74,222,128,0.35),
    0 8px 22px rgba(74,222,128,0.35),
    0 2px 6px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.55);
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
  position:relative;
  overflow:hidden;
  transition:transform .18s cubic-bezier(.34,1.2,.42,1),
             box-shadow .18s ease,
             filter .18s ease;
}
.food-toolbar-btn.inventory-add-toolbar:hover{
  transform:translateY(-2px) scale(1.02);
  filter:brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(74,222,128,0.5),
    0 12px 28px rgba(74,222,128,0.5),
    0 4px 10px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.food-toolbar-btn.inventory-add-toolbar:active{
  transform:translateY(0) scale(.98);
}
/* Soft sweep highlight traveling across the button every few seconds
   so it reads as "live / clickable" at a glance — same treatment the
   confirm button in the receive flow header uses. */
.food-toolbar-btn.inventory-add-toolbar::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:-40%;
  width:35%;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.38) 50%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation:invAddSweep 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes invAddSweep{
  0%   {left:-40%}
  35%  {left:120%}
  100% {left:120%}
}
@media (prefers-reduced-motion: reduce){
  .food-toolbar-btn.inventory-add-toolbar::after{animation:none; opacity:0}
}
.food-type-row{margin-top:-6px}
.food-toggle.compact{padding:6px 10px;font-size:12px;min-height:0}
.food-card-toggle{display:flex;flex-direction:column;min-height:184px}
.food-card-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.feature-star{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:rgba(255,255,255,.55);font-size:18px;font-weight:900;cursor:pointer}
.feature-star.active{background:rgba(255,214,94,.12);border-color:rgba(255,214,94,.28);color:#ffd560;box-shadow:0 0 0 1px rgba(255,214,94,.12),0 8px 20px rgba(0,0,0,.18)}
.food-card-toggle.is-featured{box-shadow:0 0 0 1px rgba(255,214,94,.10),0 18px 32px rgba(0,0,0,.24)}
.food-card-toggle .food-notes{margin-top:8px}
.food-card-toggle .food-card-meta{margin-top:8px}
.fish-modal.mobile-safe .food-advice-grid,.fish-modal.mobile-safe .food-bucket-grid{grid-template-columns:1fr;gap:8px}
.fish-modal.mobile-safe .food-advice-card{padding:12px 13px;border-radius:14px}
.fish-modal.mobile-safe .food-advice-card strong{font-size:14px}
.fish-modal.mobile-safe .food-card{min-height:0}
body.light-mode .food-advice-card{background:#fff;border-color:rgba(0,0,0,.08)}
body.light-mode .food-advice-card p{color:rgba(0,0,0,.68)}
body.light-mode .food-toolbar-btn{background:#fff;border-color:rgba(0,0,0,.08);color:#1a2030}
body.light-mode .food-toolbar-btn.danger{background:rgba(255,95,95,.08);border-color:rgba(255,95,95,.18);color:#aa4545}
body.light-mode .food-badge{background:rgba(70,130,180,.08);border-color:rgba(70,130,180,.16);color:#1c3d57}
body.light-mode .feature-star{background:#fff;border-color:rgba(0,0,0,.08);color:rgba(0,0,0,.45)}
body.light-mode .feature-star.active{background:rgba(255,214,94,.18);border-color:rgba(255,214,94,.32);color:#8a6400}


/* V0.059 food card polish */

.food-reco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.food-card{padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(12,22,34,.94),rgba(10,18,28,.98));border:1px solid rgba(110,185,210,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.food-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.food-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:15px}
.food-card.type-frozen .food-icon{background:rgba(120,190,255,.14);border-color:rgba(120,190,255,.24)}
.food-card.type-pellet .food-icon{background:rgba(255,185,90,.14);border-color:rgba(255,185,90,.24)}
.food-card.type-flake .food-icon{background:rgba(255,220,120,.14);border-color:rgba(255,220,120,.24)}
.food-card.type-sheet .food-icon{background:rgba(105,220,145,.14);border-color:rgba(105,220,145,.24)}
.food-card.type-liquid .food-icon{background:rgba(95,200,255,.14);border-color:rgba(95,200,255,.24)}
.food-card.type-live .food-icon{background:rgba(220,150,255,.14);border-color:rgba(220,150,255,.24)}
.food-brand{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9fdfff;font-weight:800}
.food-name{font-size:18px;line-height:1.15;font-weight:900;color:#fff;margin-top:6px}
.food-card-meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.food-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#dfefff}
.food-badge.food-type.type-frozen{background:rgba(110,175,255,.16);border-color:rgba(110,175,255,.28);color:#d7ebff}
.food-badge.food-type.type-pellet{background:rgba(255,180,95,.16);border-color:rgba(255,180,95,.28);color:#ffe2bf}
.food-badge.food-type.type-flake{background:rgba(255,220,130,.16);border-color:rgba(255,220,130,.28);color:#fff0c2}
.food-badge.food-type.type-sheet{background:rgba(100,215,140,.16);border-color:rgba(100,215,140,.28);color:#dafbe1}
.food-badge.food-type.type-liquid{background:rgba(90,210,255,.16);border-color:rgba(90,210,255,.28);color:#dbf8ff}
.food-badge.food-type.type-live{background:rgba(206,145,255,.16);border-color:rgba(206,145,255,.28);color:#f1ddff}
.food-badge.food-stage.stage-staple{background:rgba(92,225,182,.16);border-color:rgba(92,225,182,.28);color:#ddfff3}
.food-badge.food-stage.stage-rotate{background:rgba(255,180,95,.16);border-color:rgba(255,180,95,.28);color:#ffe4c4}
.food-badge.food-stage.stage-support,.food-badge.food-stage.stage-specialty{background:rgba(185,145,255,.16);border-color:rgba(185,145,255,.28);color:#f0e4ff}
.food-notes{font-size:14px;line-height:1.45;color:#f4fbff}
.food-usage{font-size:13px;line-height:1.45;color:rgba(222,240,255,.78);margin-top:10px}

.food-section .section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.food-section .section-note{color:rgba(220,236,246,.72);font-size:12px;letter-spacing:.04em}
@media (max-width: 600px){
  .food-card{padding:11px 12px;border-radius:14px}
  .food-name{font-size:17px}
  .food-notes{font-size:13px}
  .food-usage{font-size:12px}
  .food-badge{font-size:10px;padding:4px 8px}
  .food-icon{width:28px;height:28px;font-size:14px}
}

/* === V0.062 modal background + image fallback + 2C3 polish === */
.overlay{
  background:rgba(2,6,10,.90)!important;
  backdrop-filter:blur(6px)!important;
}
.overlay::before{
  background:linear-gradient(180deg, rgba(2,6,10,.82), rgba(2,6,10,.92))!important;
}
.fish-modal{
  background:linear-gradient(180deg, rgba(6,15,24,.95), rgba(6,15,24,.985))!important;
}
.modal-body{
  position:relative;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  isolation:isolate;
}
.fish-modal > .detail-bg-video{display:none!important}
.modal-body.has-detail-video > .detail-bg-video{
  display:block!important;
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.24;
  pointer-events:none;
  filter:saturate(1.06) brightness(.62) blur(.6px);
  z-index:0;
}
.modal-body.has-detail-video > *:not(.detail-bg-video){
  position:relative;
  z-index:1;
}
.fish-modal.mobile-safe .modal-body.has-detail-video > .detail-bg-video{
  opacity:.2;
}


.inventory-panel{max-width:1200px}
.inventory-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}

/* v0.149 — context-sensitive topbar back/close button. Same button in
   the same place: in overview mode shows X icon + "Close" label and
   closes the inventory panel; in catalog mode shows ← icon + "Back"
   label and steps back to the staff home overview. The icon swap is
   pure CSS via the .is-back-mode class so the button never re-renders. */
.inventory-topbar-back{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 16px 10px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.14);
  color:#f4fbff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
  font-family:inherit;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  flex:0 0 auto;
}
.inventory-topbar-back:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}
.inventory-topbar-back:active{transform:scale(.97)}
.inventory-topbar-back .ipb-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  display:none;
}
.inventory-topbar-back .ipb-icon-close{display:block}
.inventory-topbar-back .ipb-icon-back{display:none}
/* v0.175 — Chris hates the aqua Back button. Killed entirely. The
   button is now a charcoal pill with an arrow that gently bounces
   left on hover (subtle hint that it goes back). When in back mode
   the button gets a warm amber border accent instead of teal — same
   accent the existing receive-flow Back button uses for visual
   consistency across the app. */
.inventory-topbar-back.is-back-mode{
  background: linear-gradient(180deg, rgba(60,64,76,0.94), rgba(40,42,50,0.96));
  border-color: rgba(255,203,94,0.5);
  color: #ffcb5e;
  box-shadow:
    0 0 0 1px rgba(255,203,94,0.2),
    0 4px 14px rgba(255,203,94,0.16),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.inventory-topbar-back.is-back-mode:hover{
  background: linear-gradient(180deg, rgba(72,76,90,0.96), rgba(50,52,62,0.98));
  border-color: rgba(255,203,94,0.78);
  box-shadow:
    0 0 0 1px rgba(255,203,94,0.32),
    0 6px 20px rgba(255,203,94,0.28),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Arrow icon bounces left on hover so the user feels the "back" affordance */
.inventory-topbar-back.is-back-mode .ipb-icon-back{
  animation: ipbBackBounce 2.4s ease-in-out infinite;
}
.inventory-topbar-back.is-back-mode:hover .ipb-icon-back{
  animation: ipbBackBounceFast .9s ease-in-out infinite;
}
@keyframes ipbBackBounce{
  0%, 88%, 100% { transform: translateX(0); }
  92%           { transform: translateX(-3px); }
  96%           { transform: translateX(0); }
}
@keyframes ipbBackBounceFast{
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce){
  .inventory-topbar-back.is-back-mode .ipb-icon-back{ animation: none !important; }
}
.inventory-topbar-back.is-back-mode .ipb-icon-close{display:none}
.inventory-topbar-back.is-back-mode .ipb-icon-back{display:block}

/* v0.149 — hide the old toolbar Back button. The topbar back button
   above replaces it. The DOM element stays in place and still gets
   updated by updateInventoryToolbarState so any external references
   keep working, but it never renders visually. */
#inventoryBackBtn{display:none !important}

.inventory-subtitle{margin-top:6px;font-size:13px;color:rgba(255,255,255,.42)}
.inventory-toolbar{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(160px,.6fr) repeat(3,max-content);gap:10px;align-items:center;margin-bottom:18px}
.inventory-search,.inventory-filter{
  /* v0.178 — migrated to design tokens. This is one of FOUR places
     this selector was defined; the other 3 (lines ~3916, ~4514,
     ~9842) have been consolidated through to read from the same
     tokens so they all stay in sync. */
  width:100%;
  padding:12px 14px;
  border-radius: var(--ltc-radius-md);
  background: var(--ltc-surface-input);
  border: 2px solid var(--ltc-border-input);
  color: var(--ltc-text-primary);
  font-size:14px;
  box-shadow: var(--ltc-shadow-input);
}
.inventory-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 16px}
.inventory-summary-card{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:grid;gap:4px}
.inventory-summary-card span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.inventory-summary-card strong{font-size:22px;line-height:1;color:#fff}
.inventory-summary-card small{font-size:11px;color:rgba(255,255,255,.42)}
.inventory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.inventory-card{padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:grid;gap:10px}
.inventory-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.inventory-card-name{font-size:16px;font-weight:800;color:#fff}
.inventory-card-meta{font-size:12px;color:rgba(255,255,255,.4);margin-top:3px}
.inventory-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.inventory-chip{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.inventory-chip span{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:3px}
.inventory-chip strong{display:block;font-size:13px;color:#fff;overflow-wrap:anywhere}
.inventory-kv-editable{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.inventory-field-card{padding:10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);display:grid;gap:8px;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;background-clip:padding-box}
.inventory-field-card:hover{transform:translateY(-1px);border-color:rgba(180,220,255,.18);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.inventory-field-card:focus-visible{outline:2px solid rgba(120,190,255,.5);outline-offset:2px}
.inventory-field-card span{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.inventory-field-card strong{display:block;font-size:14px;color:#fff;overflow-wrap:anywhere;line-height:1.3;min-height:36px}
.inventory-field-btn{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#eef8ff;font-size:12px;font-weight:700;cursor:pointer}
.inventory-field-card.tone-price .inventory-field-btn{background:rgba(90,150,255,.12);border-color:rgba(90,150,255,.24);color:#9fc8ff}
.inventory-field-card.tone-tank .inventory-field-btn,.inventory-field-card.tone-stockno .inventory-field-btn,.inventory-field-card.tone-arrival .inventory-field-btn,.inventory-field-card.tone-vendor .inventory-field-btn{background:rgba(120,170,255,.14);border-color:rgba(120,170,255,.28);color:#9fc0ff}
.inventory-field-card.tone-size .inventory-field-btn{background:rgba(255,210,120,.14);border-color:rgba(255,210,120,.28);color:#ffd27a}
.inventory-field-card.tone-qty .inventory-field-btn{background:rgba(120,255,170,.14);border-color:rgba(120,255,170,.28);color:#8cffb7}
.inventory-field-card.tone-hold .inventory-field-btn{background:rgba(255,170,120,.14);border-color:rgba(255,170,120,.28);color:#ffbf8a}
.inventory-field-card.tone-photo .inventory-field-btn{background:rgba(180,130,255,.15);border-color:rgba(180,130,255,.3);color:#b888ff}
.inventory-actions{display:flex;flex-wrap:wrap;gap:8px}
.inventory-actions .staff-action-btn{flex:1 1 150px;justify-content:center;min-height:40px}
.inventory-meta-row{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;color:rgba(255,255,255,.42)}
.inventory-meta-row span{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.staff-editor{margin-top:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.staff-editor-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.staff-editor-head strong{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.staff-editor-copy{font-size:12px;color:rgba(255,255,255,.42);margin-bottom:10px}
.staff-editor-grid{display:flex;flex-wrap:wrap;gap:8px}
.staff-editor-grid .staff-action-btn{min-height:40px;flex:1 1 140px;justify-content:center}
body.light-mode .inventory-subtitle,body.light-mode .inventory-card-meta,body.light-mode .inventory-chip span,body.light-mode .staff-editor-copy,body.light-mode .inventory-summary-card span,body.light-mode .inventory-summary-card small,body.light-mode .inventory-meta-row{color:rgba(0,0,0,.5)}
body.light-mode .inventory-search,body.light-mode .inventory-filter{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08);color:#1a2030}
body.light-mode .inventory-card,body.light-mode .staff-editor,body.light-mode .inventory-summary-card,body.light-mode .inventory-field-card{background:rgba(0,0,0,.025);border-color:rgba(0,0,0,.08)}
body.light-mode .inventory-card-name,body.light-mode .inventory-chip strong,body.light-mode .staff-editor-head strong,body.light-mode .inventory-summary-card strong,body.light-mode .inventory-field-card strong{color:#1a2030}
@media (max-width: 980px){.inventory-toolbar{grid-template-columns:1fr 1fr}.inventory-toolbar .food-toolbar-btn{width:100%}}
@media (max-width: 900px){.inventory-kv-editable{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 700px){.inventory-topbar{flex-direction:column}.inventory-toolbar{grid-template-columns:1fr}.inventory-kv{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-kv-editable{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-actions .staff-action-btn,.staff-editor-grid .staff-action-btn{flex:1 1 calc(50% - 8px)}}
@media (max-width: 480px){.inventory-kv-editable{grid-template-columns:1fr}.inventory-field-card strong{min-height:0}}


/* === V0.070 staff persistence + undo/history + modal scroll hardening === */
.modal-body{
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.overlay{overflow:auto}
.fish-modal.mobile-safe{overflow:hidden!important}
.fish-modal.mobile-safe .modal-body{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}
.modal-body.has-detail-video > .detail-bg-video{pointer-events:none!important}
.inventory-history{display:flex;flex-wrap:wrap;gap:6px}
.inventory-history.empty{font-size:11px;color:rgba(255,255,255,.34)}
.inventory-history-chip{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:10px;color:rgba(240,248,255,.78)}

.inventory-toolbar-note{display:inline-flex;align-items:center;min-height:40px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(240,248,255,.72);font-size:12px;line-height:1.35;max-width:420px}
.staff-editor .inventory-history{margin-top:10px}


/* === V0.072 → v0.178: input modal field overrides.
   Was navy #102235 + rgba(16,34,53) + aqua focus border. Killed.
   Now uses the v0.177 design tokens so this rule and the early one
   at line ~1915 are in sync. Same charcoal everywhere, amber focus. */
.input-modal-field select,
.input-modal-field option,
.input-modal-field optgroup{
  background: var(--ltc-surface-input) !important;
  color: var(--ltc-text-primary) !important;
}
.input-modal-field input,
.input-modal-field select,
.input-modal-field textarea{
  background: var(--ltc-surface-input) !important;
  border: 2px solid var(--ltc-border-input) !important;
  color: var(--ltc-text-primary) !important;
  box-shadow: var(--ltc-shadow-input) !important;
}
.input-modal-field select{
  appearance:none;
  -webkit-appearance:none;
}
.input-modal-field input:focus,
.input-modal-field select:focus,
.input-modal-field textarea:focus{
  border-color: var(--ltc-accent) !important;
  background: var(--ltc-surface-input-focus) !important;
  box-shadow:
    0 0 0 3px rgba(var(--ltc-accent-rgb), 0.22),
    var(--ltc-shadow-input) !important;
  outline: none;
}
.modal-hero-shell{
  display:grid;
  grid-template-columns:minmax(360px,540px) minmax(0,1fr);
  gap:18px;
  padding:12px;
  margin-bottom:18px;
  border-radius:30px;
  border:1px solid rgba(200,232,255,.10);
  background:linear-gradient(180deg, rgba(28,30,38,.92), rgba(22,24,30,.96));
  box-shadow:var(--shadow-soft);
}
.modal-hero-shell .modal-photo-card,
.modal-hero-shell .modal-headline-bar,
.modal-hero-shell .modal-stat{
  box-shadow:none;
}
.modal-hero-aside{display:grid;gap:14px;align-content:start;min-width:0}
.modal-hero-stats{margin:0}
.modal-layout-after-hero{padding-top:4px}
@media (max-width: 960px){
  .modal-hero-shell{grid-template-columns:1fr;padding:10px;border-radius:24px}
}
.modal-close{
  right:12px !important;
  left:auto !important;
}


/* === V0.074 patch 2: modal hero / close / image reliability === */
#fishOverlay{position:fixed;inset:0;}
#fishOverlay #closeFishBtn,
#closeFishBtn.modal-close{
  position:fixed !important;
  top:calc(12px + env(safe-area-inset-top, 0px)) !important;
  right:max(12px, env(safe-area-inset-right, 0px)) !important;
  left:auto !important;
  bottom:auto !important;
  inset-inline-start:auto !important;
  inset-inline-end:max(12px, env(safe-area-inset-right, 0px)) !important;
  transform:none !important;
  margin:0 !important;
  z-index:500 !important;
}
.modal-hero-shell.unified-hero-shell,
.modal-layout.mobile-stack .modal-hero-shell{
  border-radius:28px;
  border:1px solid rgba(200,232,255,.12);
  background:linear-gradient(180deg, rgba(28,30,38,.92), rgba(22,24,30,.98));
  box-shadow:var(--shadow-soft);
}
.modal-layout.mobile-stack .modal-hero-shell{
  grid-template-columns:1fr;
  gap:12px;
  padding:10px;
}
.modal-layout.mobile-stack .modal-hero-shell .modal-photo-card,
.modal-layout.mobile-stack .modal-hero-shell .modal-headline-bar,
.modal-layout.mobile-stack .modal-hero-shell .modal-stat{
  box-shadow:none;
}
.modal-layout.mobile-stack .modal-hero-shell .modal-headline-bar,
.modal-layout.mobile-stack .modal-hero-shell .mobile-stat-grid{
  margin:0;
}
.modal-layout.mobile-stack .modal-hero-shell .mobile-stat-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 600px) and (pointer:coarse){
  #fishOverlay #closeFishBtn,
  #closeFishBtn.modal-close{
    top:calc(8px + env(safe-area-inset-top, 0px)) !important;
    right:max(10px, env(safe-area-inset-right, 0px)) !important;
    inset-inline-end:max(10px, env(safe-area-inset-right, 0px)) !important;
  }
  .modal-layout.mobile-stack .modal-hero-shell{
    border-radius:16px;
    padding:8px;
    gap:8px;
  }
  .modal-layout.mobile-stack .modal-hero-shell .mobile-stat-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
  }
}


/* === V0.075 Patch 3 — inventory UX, filter rail, and visible select choices === */
.inventory-toolbar{grid-template-columns:minmax(220px,1.6fr) minmax(170px,.75fr) minmax(190px,.9fr) minmax(260px,1fr) repeat(4,max-content)}
.inventory-control{display:grid;gap:6px;min-width:0}
.inventory-control span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,248,255,.55);padding-left:4px}
.inventory-control-search{min-width:220px}
.inventory-search,.inventory-filter{
  color-scheme:dark;
  background: var(--ltc-surface-input);
  border-color: var(--ltc-border-input);
  box-shadow: var(--ltc-shadow-input);
  color: var(--ltc-text-primary);
}
.inventory-filter option,.inventory-filter optgroup,.input-modal-field select option,.input-modal-field select optgroup{background:#2a2c34;color:#f4fbff}
.inventory-quickbar{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;margin:-4px 0 6px;scrollbar-width:thin}
.inventory-chip-filter{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:10px 12px;border-radius:999px;border:1px solid var(--ltc-border-subtle);background:var(--ltc-surface-chip);color:var(--ltc-text-primary);font-size:12px;font-weight:700;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.inventory-chip-filter span{padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;color:rgba(240,248,255,.82)}
.inventory-chip-filter:hover{transform:translateY(-1px);border-color:rgba(var(--ltc-accent-rgb),.4)}
.inventory-chip-filter.is-active{background:rgba(var(--ltc-accent-rgb),.18);border-color:rgba(var(--ltc-accent-rgb),.55);color:#fff}
.inventory-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.inventory-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:11px;color:rgba(240,248,255,.82)}
.inventory-field-card{min-height:124px;align-content:space-between}
.inventory-field-card strong{font-size:15px;min-height:40px}
.inventory-field-btn{margin-top:auto;min-height:38px}
.staff-editor-fields{margin-top:10px}
.staff-editor-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.staff-editor-actions .staff-action-btn{min-height:40px;flex:1 1 150px;justify-content:center}
.input-modal-field-select{gap:10px}
.input-choice-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.input-choice-btn{padding:8px 10px;border-radius:10px;border:1px solid rgba(220,234,248,.16);background:rgba(255,255,255,.05);color:#eef8ff;font-size:12px;font-weight:700;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.input-choice-btn:hover{transform:translateY(-1px);border-color:rgba(90,220,200,.34)}
.input-choice-btn.is-active{background:rgba(90,220,200,.16);border-color:rgba(90,220,200,.36);color:#84f5de}
@media (max-width: 1180px){.inventory-toolbar{grid-template-columns:1fr 1fr 1fr}.inventory-toolbar .inventory-toolbar-note{grid-column:1 / -1}.inventory-toolbar .food-toolbar-btn{width:100%}}
@media (max-width: 820px){.inventory-toolbar{grid-template-columns:1fr 1fr}.inventory-control-search,.inventory-control{min-width:0}.inventory-toolbar .food-toolbar-btn,.inventory-toolbar .inventory-toolbar-note{grid-column:auto}.inventory-chip-filter{padding:9px 11px}}
@media (max-width: 700px){.inventory-toolbar{grid-template-columns:1fr}.inventory-control span{padding-left:2px}.inventory-quickbar{padding-bottom:12px}.staff-editor-fields.inventory-kv-editable{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 480px){.staff-editor-fields.inventory-kv-editable{grid-template-columns:1fr}.input-choice-btn{flex:1 1 calc(50% - 8px);justify-content:center}}


/* === V0.076 Patch 2 follow-up — desktop close placement + mobile drag scrolling === */
body > #closeFishBtn.modal-close.floating-modal-close{
  position:fixed !important;
  top:12px;
  right:12px;
  left:auto;
  bottom:auto;
  z-index:500 !important;
  display:none;
}
@media (min-width:601px){
  body > #closeFishBtn.modal-close.floating-modal-close{
    width:46px;
    height:46px;
    border-radius:14px;
  }
}
@media (max-width:600px) and (pointer:coarse){
  .overlay.show{
    display:flex !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    overflow:hidden !important;
    padding:0 !important;
  }
  .fish-modal.mobile-safe{
    width:100% !important;
    max-width:none !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }
  .fish-modal.mobile-safe .modal-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    padding:54px 10px calc(18px + var(--safe-bottom)) !important;
  }
  .fish-modal.mobile-safe .modal-layout,
  .fish-modal.mobile-safe .modal-left,
  .fish-modal.mobile-safe .modal-right,
  .fish-modal.mobile-safe .modal-section,
  .fish-modal.mobile-safe .modal-photo-card,
  .fish-modal.mobile-safe .reading-block,
  .fish-modal.mobile-safe .origin-card,
  .fish-modal.mobile-safe .staff-card,
  .fish-modal.mobile-safe .fact-card{
    touch-action:pan-y !important;
  }
}


/* === V0.077 Desktop popup cleanup — visible X + no dead hero gap === */
#fishOverlay > #closeFishBtn.modal-close.floating-modal-close{
  display:none;
  position:fixed !important;
  top:max(14px, calc((100vh - min(95vh, 1180px)) / 2 + 14px)) !important;
  right:max(14px, calc((100vw - min(96vw, 1460px)) / 2 + 14px)) !important;
  left:auto !important;
  bottom:auto !important;
  inset-inline-start:auto !important;
  inset-inline-end:max(14px, calc((100vw - min(96vw, 1460px)) / 2 + 14px)) !important;
  z-index:650 !important;
}
#fishOverlay.show > #closeFishBtn.modal-close.floating-modal-close{display:grid !important;}
.modal-hero-shell{display:grid;grid-template-columns:minmax(360px,540px) minmax(0,1fr);gap:22px;align-items:start;margin-bottom:18px;}
.modal-hero-aside{display:grid;gap:18px;align-content:start;min-width:0;}
.modal-hero-compat{margin-top:0;}
.modal-layout.modal-layout-after-hero{padding-top:0;}
@media (min-width: 601px){
  .modal-layout.modal-layout-after-hero{grid-template-columns:minmax(360px,540px) minmax(0,1fr);}
}
@media (max-width: 600px) and (pointer:coarse){
  #fishOverlay > #closeFishBtn.modal-close.floating-modal-close{
    top:calc(8px + env(safe-area-inset-top, 0px)) !important;
    right:max(10px, env(safe-area-inset-right, 0px)) !important;
    inset-inline-end:max(10px, env(safe-area-inset-right, 0px)) !important;
  }
  .modal-hero-shell{grid-template-columns:1fr;gap:10px;margin-bottom:10px;}
}


/* === V0.078 Desktop hero shape cleanup === */
@media (min-width: 601px){
  .modal-hero-shell.modal-hero-shell-desktop{
    display:grid;
    grid-template-columns:minmax(360px,520px) minmax(0,1fr);
    gap:14px;
    padding:0;
    margin-bottom:18px;
    border:none;
    background:transparent;
    box-shadow:none;
  }
  .modal-hero-shell.modal-hero-shell-desktop .modal-photo-card{
    border-radius:30px;
  }
  .modal-hero-shell.modal-hero-shell-desktop .modal-hero-aside{
    display:block;
    min-width:0;
  }
  .modal-hero-cap{
    padding:12px;
    border-radius:30px;
    border:1px solid rgba(200,232,255,.10);
    background:linear-gradient(180deg, rgba(28,30,38,.92), rgba(22,24,30,.96));
    box-shadow:var(--shadow-soft);
    margin-left:-4px;
  }
  .modal-hero-cap .modal-headline-bar,
  .modal-hero-cap .modal-stat{
    box-shadow:none;
  }
  .modal-hero-cap .modal-hero-stats{
    margin-top:12px;
  }
  .modal-layout.modal-layout-after-hero{
    padding-top:0;
  }
  .modal-right .modal-hero-compat{
    margin-top:0;
  }
}

/* === V0.079 popup layout rollback + staff history panel === */
@media (min-width: 601px){
  .modal-top-desktop{
    display:grid;
    grid-template-columns:minmax(360px,540px) minmax(0,1fr);
    gap:18px;
    align-items:start;
    margin-bottom:18px;
  }
  .modal-top-summary{
    display:grid;
    gap:14px;
    align-content:start;
    min-width:0;
  }
  .modal-top-summary .modal-headline-bar,
  .modal-top-summary .modal-hero-stats{
    margin:0;
  }
  .modal-compat-full{
    margin-bottom:18px;
  }
}
.inventory-history-panel{
  margin:0 0 16px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
}
.inventory-history-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.inventory-history-panel-head strong{
  display:block;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.inventory-history-panel-head span,
.inventory-history-empty,
.inventory-history-muted{
  font-size:12px;
  color:rgba(255,255,255,.52);
}
.inventory-history-list{
  display:grid;
  gap:8px;
}
.inventory-history-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.inventory-history-main{
  min-width:0;
}
.inventory-history-name{
  font-size:14px;
  font-weight:800;
  color:#fff;
}
.inventory-history-meta{
  font-size:12px;
  color:rgba(255,255,255,.5);
}
.inventory-history-row-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}
.inventory-history-row-actions .staff-action-btn{
  min-height:34px;
  padding:8px 12px;
}
body.light-mode .inventory-history-panel,
body.light-mode .inventory-history-row{
  background:rgba(0,0,0,.025);
  border-color:rgba(0,0,0,.08);
}
body.light-mode .inventory-history-panel-head strong,
body.light-mode .inventory-history-name{
  color:#1a2030;
}
body.light-mode .inventory-history-panel-head span,
body.light-mode .inventory-history-meta,
body.light-mode .inventory-history-empty,
body.light-mode .inventory-history-muted{
  color:rgba(0,0,0,.55);
}
@media (max-width: 820px){
  .inventory-history-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .inventory-history-row-actions{
    width:100%;
    justify-content:flex-start;
  }
}

.inventory-history-overlay-panel{max-width:980px;width:min(980px,96vw)}
.inventory-card{position:relative;overflow:hidden;padding:12px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:grid;gap:10px;isolation:isolate}
.inventory-card-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.22;z-index:0}
.inventory-card-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,14,23,.2) 0%, rgba(6,14,23,.72) 38%, rgba(6,14,23,.96) 76%)}
.inventory-card-bg img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.06) contrast(1.02)}
.inventory-card > *{position:relative;z-index:1}
.inventory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:12px}
.inventory-kv-editable{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.inventory-field-card{padding:9px;border-radius:14px;gap:6px;min-height:108px}
.inventory-field-card strong{font-size:14px;min-height:34px}
.inventory-field-btn{padding:7px 9px;min-height:34px}
.inventory-actions .staff-action-btn{flex:1 1 132px;min-height:38px}
.inventory-meta-row span{padding:5px 9px}
.inventory-field-card.tone-sales .inventory-field-btn{background:rgba(90,220,200,.12);border-color:rgba(90,220,200,.24);color:#95f2e0}
.sale-history-list{display:grid;gap:10px;margin-top:4px}
.sale-history-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.sale-history-row strong{font-size:15px;color:#fff}
.sale-history-meta{margin-top:4px;font-size:12px;color:rgba(255,255,255,.58)}
body.light-mode .sale-history-row{background:rgba(0,0,0,.025);border-color:rgba(0,0,0,.08)}
body.light-mode .sale-history-row strong{color:#1a2030}
body.light-mode .sale-history-meta{color:rgba(0,0,0,.55)}
@media (max-width: 820px){.sale-history-row{flex-direction:column}}
@media (min-width: 601px){.modal-top-summary .modal-compat-full{margin:0}}


/* === V0.082 staff workflow helper pass === */
.modal-inline-price{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.modal-inline-price strong{font-size:18px;line-height:1;color:#8ff1df;font-weight:900}
.modal-inline-old-price{font-size:13px;color:rgba(255,255,255,.42);text-decoration:line-through}
.inventory-card-ident{display:flex;align-items:flex-start;gap:10px;min-width:0}
.inventory-card-thumb,.inventory-history-thumb{width:56px;height:56px;border-radius:14px;overflow:hidden;position:relative;flex:0 0 56px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.inventory-card-thumb img,.inventory-history-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.inventory-card-thumb .image-placeholder,.inventory-history-thumb .image-placeholder,.input-helper-placeholder{display:grid;place-items:center;width:100%;height:100%;font-size:18px;font-weight:900;letter-spacing:.12em;color:rgba(255,255,255,.55)}
.inventory-history-main{display:flex;align-items:center;gap:12px;min-width:0}
.sale-history-row-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.input-modal-fish-helper{margin:0 0 12px}
.input-helper-shell{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:12px;border-radius:16px;background:rgba(90,220,200,.08);border:1px solid rgba(90,220,200,.16)}
.input-helper-media{width:88px;height:88px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.input-helper-media img{width:100%;height:100%;object-fit:cover;display:block}
.input-helper-head{display:grid;gap:3px}
.input-helper-head strong{font-size:16px;color:#fff}
.input-helper-head span{font-size:12px;color:rgba(255,255,255,.54)}
.input-helper-copy{font-size:12px;line-height:1.45;color:rgba(255,255,255,.58);margin-top:6px}
.input-helper-apply-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.input-helper-sales{display:grid;gap:8px;margin-top:10px}
.input-helper-subtitle{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.input-helper-sale-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(7,18,29,.56);border:1px solid rgba(255,255,255,.06)}
.input-helper-sale-row strong{display:block;font-size:14px;color:#fff}
.input-helper-sale-row span{display:block;margin-top:3px;font-size:11px;color:rgba(255,255,255,.52)}
.input-helper-empty{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.48)}
.input-helper-btn{padding:8px 12px;border-radius:10px;background:rgba(90,220,200,.16);border:1px solid rgba(90,220,200,.28);color:#90f5e3;font-size:12px;font-weight:800;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.input-helper-btn:hover{transform:translateY(-1px);background:rgba(90,220,200,.22)}
.input-helper-btn.subtle{background:rgba(120,170,255,.14);border-color:rgba(120,170,255,.26);color:#afcfff}
.inventory-guidance-card{display:grid;gap:12px;padding:12px 0}
.inventory-guidance-card p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.72)}
.inventory-guidance-actions{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width: 820px){
  .input-helper-shell{grid-template-columns:1fr}
  .input-helper-media{width:100%;height:150px}
  .inventory-card-thumb,.inventory-history-thumb{width:48px;height:48px;flex-basis:48px}
  .sale-history-row-tools{justify-content:flex-start}
}
body.light-mode .modal-inline-old-price{color:rgba(0,0,0,.4)}
body.light-mode .modal-inline-price strong{color:#087d6d}
body.light-mode .input-helper-shell{background:rgba(0,128,110,.05);border-color:rgba(0,128,110,.12)}
body.light-mode .input-helper-copy,body.light-mode .input-helper-head span,body.light-mode .input-helper-subtitle,body.light-mode .inventory-guidance-card p{color:rgba(0,0,0,.58)}
body.light-mode .input-helper-head strong{color:#1a2030}
body.light-mode .input-helper-sale-row,body.light-mode .input-helper-empty{background:rgba(0,0,0,.025);border-color:rgba(0,0,0,.08)}
body.light-mode .input-helper-sale-row strong{color:#1a2030}
body.light-mode .input-helper-sale-row span{color:rgba(0,0,0,.52)}


.modal-headline-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.modal-headline-title-row strong{flex:1 1 220px}
.modal-inline-price{margin-top:0}
.modal-inline-price.sale-inline{margin-left:auto;justify-content:flex-end}
.modal-inline-old-price{font-size:13px;color:rgba(255,255,255,.5);text-decoration:line-through}
@media (max-width: 600px){
  .modal-headline-title-row{flex-direction:column;align-items:flex-start;gap:6px}
  .modal-inline-price.sale-inline{margin-left:0;justify-content:flex-start}
}
@media (min-width: 601px){
  .modal-top-left-column{display:grid;gap:18px;align-content:start;min-width:0}
  .modal-overview-inline{margin:0}
}
.inventory-card-photo{gap:12px}
.inventory-card-media{position:relative;min-height:132px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);display:flex;align-items:flex-end;justify-content:space-between;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.inventory-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.08) contrast(1.04)}
.inventory-card-media-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(5,12,20,.08) 0%, rgba(5,12,20,.18) 22%, rgba(5,12,20,.62) 58%, rgba(5,12,20,.92) 100%);pointer-events:none}
.inventory-card-media-copy{position:relative;z-index:1;padding:14px;display:grid;gap:6px;max-width:calc(100% - 88px)}
.inventory-card-media .inventory-card-name{font-size:19px;line-height:1.03;text-shadow:0 3px 22px rgba(0,0,0,.58)}
.inventory-card-media .inventory-card-meta{color:rgba(245,250,255,.88);text-shadow:0 3px 22px rgba(0,0,0,.58)}
.inventory-card-media .inventory-card-badges{margin-top:2px}
.inventory-status-pill{position:relative;z-index:1;align-self:flex-start;margin:12px}
.inventory-card-bg{opacity:.46}
.inventory-card-bg::after{background:linear-gradient(180deg, rgba(6,14,23,.04) 0%, rgba(6,14,23,.36) 26%, rgba(6,14,23,.88) 76%, rgba(6,14,23,.96) 100%)}
.inventory-card-thumb{display:none}
.inventory-card-top{display:none}
.inventory-guidance-card.with-media{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:start}
.inventory-guidance-media{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);min-height:92px}
.inventory-guidance-media img{width:100%;height:100%;object-fit:cover;display:block}
.toast.toast-action{display:grid;gap:10px;align-items:center;min-width:min(520px,calc(100vw - 40px));padding:14px 16px}
.toast-copy{font-weight:700}
.toast-actions{display:flex;flex-wrap:wrap;gap:8px}
.toast-action-btn{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;padding:8px 12px;border-radius:12px;font-weight:800;cursor:pointer}
.toast-action-btn.ok{background:rgba(94,235,200,.16);border-color:rgba(94,235,200,.28);color:#9bf7df}
.toast-action-btn.ghost{background:rgba(80,160,255,.14);border-color:rgba(80,160,255,.28);color:#9fc5ff}
@media (max-width: 900px){
  .inventory-card-media{min-height:92px}
  .inventory-card-media .inventory-card-name{font-size:16px}
}
@media (max-width: 600px){
  .inventory-guidance-card.with-media{grid-template-columns:1fr}
  .inventory-guidance-media{min-height:120px}
  .toast.toast-action{min-width:calc(100vw - 24px)}
}

#recentChangesBtn{box-shadow:0 10px 24px rgba(90,220,200,.12)}


/* V0.087 inventory full-card photo treatment.
   v0.174 — comprehensive charcoal scrub. Every rgba(N,M,30-ish) navy
   value migrated to charcoal. The radial gradient that opens when
   you click "Held" or "Tanks with fish" was the source of the navy
   Chris kept seeing — it was an entire SUB-VIEW of the inventory
   panel that I'd never touched. */
.inventory-card-fullbg{position:relative;overflow:hidden;min-height:720px;background:radial-gradient(circle at top, rgba(56,60,72,.30), rgba(20,22,28,.96) 66%);border-color:rgba(220,234,248,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 42px rgba(0,0,0,.18);isolation:isolate}
.inventory-card-fullbg-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.95;transform:scale(1.02);filter:saturate(1.06) contrast(1.04) brightness(.86);z-index:0;transition:opacity .2s ease, transform .3s ease}
.inventory-card-fullbg-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(14,16,22,.14) 0%, rgba(14,16,22,.24) 16%, rgba(14,16,22,.62) 42%, rgba(14,16,22,.86) 66%, rgba(14,16,22,.96) 100%);z-index:0}
.inventory-card-fullbg.no-photo .inventory-card-fullbg-image{display:none}
.inventory-card-fullbg > *{position:relative;z-index:1}
.inventory-card-fullbg:hover .inventory-card-fullbg-image{transform:scale(1.035);opacity:.98}
.inventory-card-fullbg .inventory-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 14px 8px;border-radius:18px;background:linear-gradient(180deg, rgba(22,24,30,.32), rgba(22,24,30,.10));backdrop-filter:blur(1px)}
.inventory-card-fullbg .inventory-card-header-copy{min-width:0}
.inventory-card-fullbg .inventory-card-name{font-size:17px;line-height:1.05;text-shadow:0 3px 18px rgba(0,0,0,.58)}
.inventory-card-fullbg .inventory-card-meta{color:rgba(245,250,255,.84);text-shadow:0 3px 18px rgba(0,0,0,.58)}
.inventory-card-fullbg .inventory-card-badges{margin-top:8px}
.inventory-card-fullbg .inventory-status-pill{flex:0 0 auto;align-self:flex-start;background:rgba(28,30,38,.84);border:1px solid rgba(220,234,248,.18);box-shadow:0 8px 18px rgba(0,0,0,.22)}
.inventory-card-fullbg .inventory-kv-editable{margin-top:4px}
.inventory-card-fullbg .inventory-field-card{background:rgba(32,34,42,.78);border-color:rgba(220,234,248,.14);backdrop-filter:blur(3px)}
.inventory-card-fullbg .inventory-field-card:hover{background:rgba(44,46,54,.86)}
.inventory-card-fullbg .inventory-meta-row span,.inventory-card-fullbg .inventory-history-chip{background:rgba(28,30,38,.68);border-color:rgba(220,234,248,.12)}
.inventory-card-fullbg .inventory-actions .staff-action-btn{background:rgba(32,34,42,.78)}
.inventory-card-fullbg .inventory-card-photo-hint{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;background:rgba(28,30,38,.78);border:1px solid rgba(220,234,248,.14);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(235,245,255,.72);z-index:1;pointer-events:none}
.inventory-card-fullbg.has-photo .inventory-card-photo-hint{display:none}
.inventory-card-fullbg.no-photo .inventory-card-photo-hint{display:inline-flex}
.inventory-card-fullbg .inventory-card-bg,.inventory-card-fullbg .inventory-card-media{display:none !important}
.inventory-card-fullbg .image-placeholder{display:none !important}
@media (max-width: 1180px){.inventory-card-fullbg{min-height:680px}}
@media (max-width: 700px){.inventory-card-fullbg{min-height:620px}.inventory-card-fullbg .inventory-card-header{padding:12px 12px 6px}.inventory-card-fullbg .inventory-card-name{font-size:16px}}


/* V0.089 stronger, still restrained microinteractions */
.gauge-card-fx .gauge-liquid,
.gauge-card-fx .gauge-liquid::before,
.gauge-card-fx .gauge-marker{animation:none}
.gauge-card-fx.fx-play .gauge-liquid{animation:gaugeFillReveal 900ms cubic-bezier(.2,.9,.2,1) both}
.gauge-card-fx.fx-play .gauge-liquid::before{animation:liquidSweep 2200ms ease .62s 1 both}
.gauge-card-fx.fx-play .gauge-marker{animation:gaugeMarkerPop 620ms cubic-bezier(.2,.9,.2,1) .16s forwards, gaugeMarkerDrift 4.6s ease-in-out 1.05s infinite}
.gauge-card-fx:hover .gauge-liquid::before{animation:liquidSweep 1400ms ease 0s 1 both}
.gauge-card-fx:hover .gauge-marker{transform:translate(-50%,-50%) scale(1.08)}

.staff-action-btn,.inventory-chip-filter,.mini-pill,.tab,.category-tab,.cta,.inventory-field-btn,.mode-toggle,.input-choice-btn{position:relative;overflow:hidden}
.staff-action-btn::after,.inventory-chip-filter::after,.mini-pill::after,.tab::after,.category-tab::after,.cta::after,.inventory-field-btn::after,.mode-toggle::after,.input-choice-btn::after{content:"";position:absolute;inset:-40% auto -40% -60%;width:42%;background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 48%, rgba(255,255,255,0) 100%);transform:translateX(-180%) skewX(-18deg);pointer-events:none;opacity:.0}
.staff-action-btn:hover::after,.inventory-chip-filter:hover::after,.tab:hover::after,.category-tab:hover::after,.cta:hover::after,.inventory-field-btn:hover::after,.mode-toggle:hover::after,.input-choice-btn:hover::after{opacity:1;animation:buttonSheen 820ms ease 1}
.staff-action-btn:active,.inventory-chip-filter:active,.tab:active,.category-tab:active,.cta:active,.inventory-field-btn:active,.mode-toggle:active,.input-choice-btn:active{transform:translateY(1px) scale(.985)}
.mini-pill:hover::after{opacity:.85;animation:buttonSheen 1000ms ease 1}
@keyframes buttonSheen{0%{transform:translateX(-180%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}

.ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:2;animation:rippleOut .52s ease-out forwards;background:radial-gradient(circle, rgba(255,255,255,.42) 0%, rgba(120,220,255,.22) 34%, rgba(90,220,200,.12) 56%, rgba(255,255,255,0) 72%) !important;opacity:.95 !important;filter:blur(.4px)}
@keyframes rippleOut{from{transform:scale(0);opacity:.9}to{transform:scale(3.9);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .gauge-card-fx .gauge-liquid,
  .gauge-card-fx .gauge-liquid::before,
  .gauge-card-fx .gauge-marker,
  .staff-action-btn::after,.inventory-chip-filter::after,.mini-pill::after,.tab::after,.category-tab::after,.cta::after,.inventory-field-btn::after,.mode-toggle::after,.input-choice-btn::after{animation:none !important;transition:none !important}
}


/* === V0.101 staff/category/folder usability pass === */
.category-row{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:hidden !important;align-items:stretch;gap:8px;padding:10px 12px 2px !important;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.category-row.is-dragging{cursor:grabbing}
.category-row::-webkit-scrollbar{display:none}
.folder-tab{flex:0 0 auto !important;min-width:132px;max-width:184px;padding:10px 12px 9px;white-space:normal;line-height:1.05}
.folder-tab span{display:block;margin-top:4px;font-size:11px}
.folder-content{padding:14px 14px 18px;background:linear-gradient(180deg,rgba(38,40,48,.94),rgba(22,24,30,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 18px 38px rgba(0,0,0,.2),0 0 20px var(--folder-glow),0 18px 36px rgba(0,0,0,.2)}
.category-shell{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 0 24px var(--folder-glow),0 10px 24px rgba(0,0,0,.16)}
.inventory-subtitle{max-width:760px}
.inventory-organizer{display:grid;gap:16px;margin-top:4px}
.inventory-organizer-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 18px;border-radius:18px;background:linear-gradient(180deg,rgba(38,40,48,0.96),rgba(24,26,32,0.98));border:1px solid rgba(220,234,248,0.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 28px rgba(0,0,0,.18)}
.inventory-organizer-hero h3{margin:0 0 6px;font-size:22px;color:#fff}
.inventory-organizer-hero p{margin:0;color:rgba(235,245,255,.72);max-width:620px;line-height:1.45}
.inventory-organizer-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.inventory-task-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.inventory-task-card,.inventory-category-card{display:grid;gap:6px;align-content:start;padding:16px;border-radius:18px;border:1px solid rgba(220,234,248,.14);background:rgba(255,255,255,.045);color:#eef8ff;cursor:pointer;text-align:left;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.inventory-task-card:hover,.inventory-category-card:hover{transform:translateY(-2px);border-color:rgba(90,220,200,.34);background:rgba(90,220,200,.08);box-shadow:0 12px 24px rgba(0,0,0,.16)}
.inventory-task-card strong,.inventory-category-card strong{font-size:15px;color:#fff}
.inventory-task-card span{font-size:28px;font-weight:900;line-height:1;color:#84f5de}
.inventory-task-card.warn span{color:#ffd27a}
.inventory-task-card small,.inventory-category-card span,.inventory-category-card small{color:rgba(235,245,255,.68);line-height:1.35}
.inventory-overview-block{display:grid;gap:10px}
.inventory-overview-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap}
.inventory-overview-head strong{font-size:16px;color:#fff}
.inventory-overview-head span{font-size:12px;color:rgba(235,245,255,.6)}
.inventory-category-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.inventory-catalog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:0 0 14px}
.inventory-catalog-copy{display:grid;gap:4px}
.inventory-catalog-copy strong{font-size:16px;color:#fff}
.inventory-catalog-copy span{font-size:12px;color:rgba(235,245,255,.64);line-height:1.4;max-width:620px}
.inventory-catalog-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:980px){.inventory-organizer-hero,.inventory-catalog-head{flex-direction:column}.inventory-organizer-actions{justify-content:flex-start}}
@media (max-width:700px){.folder-tab{min-width:120px;max-width:160px}.inventory-task-grid,.inventory-category-overview{grid-template-columns:1fr 1fr}.inventory-organizer-hero{padding:14px}.inventory-task-card,.inventory-category-card{padding:14px}}
@media (max-width:520px){.inventory-task-grid,.inventory-category-overview{grid-template-columns:1fr}.folder-content{padding:12px 10px 16px}}

/* === V0.102 Staff inventory polish — less clutter, better back path, compact catalog view === */
.inventory-toolbar-shell{
  position:sticky;
  top:0;
  z-index:12;
  margin:0 0 12px;
  padding:0 0 10px;
  background:linear-gradient(180deg,rgba(8,14,22,.98),rgba(8,14,22,.9) 72%,rgba(8,14,22,0));
  backdrop-filter:blur(8px);
}
.inventory-toolbar{
  display:grid;
  grid-template-columns:minmax(220px,1.5fr) minmax(150px,.7fr) minmax(170px,.85fr) minmax(220px,auto);
  gap:10px;
  align-items:end;
}
.inventory-toolbar-actions{display:flex;justify-content:flex-end;align-items:flex-end;gap:10px;flex-wrap:wrap}
.inventory-back-btn{background:rgba(60,64,76,0.85);border-color:rgba(220,234,248,0.22);color:#f4fbff}
.inventory-back-btn[hidden]{display:none !important}
.inventory-tools-menu{position:relative}
.inventory-tools-menu summary{list-style:none}
.inventory-tools-menu summary::-webkit-details-marker{display:none}
.inventory-tools-popover{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(420px,calc(100vw - 64px));
  padding:14px;
  display:grid;
  gap:12px;
  border-radius:18px;
  border:1px solid rgba(220,234,248,.16);
  background:linear-gradient(180deg,rgba(12,22,34,.98),rgba(7,14,24,.98));
  box-shadow:0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.inventory-tools-head{display:grid;gap:3px}
.inventory-tools-head strong{font-size:14px;color:#fff}
.inventory-tools-head span{font-size:12px;color:rgba(235,245,255,.62);line-height:1.35}
.inventory-tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inventory-tools-grid .food-toolbar-btn{width:100%;justify-content:center}
.inventory-toolbar-note{max-width:none;min-height:auto}
.inventory-panel.catalog-active .inventory-subtitle{max-width:620px;color:rgba(235,245,255,.64)}
.inventory-catalog-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin:0 0 12px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(38,40,48,.96),rgba(22,24,30,.96));
  border:1px solid rgba(220,234,248,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 28px rgba(0,0,0,.14);
}
.inventory-catalog-summary-main{display:grid;gap:4px}
.inventory-catalog-summary-main strong{font-size:15px;color:#fff}
.inventory-catalog-summary-main span{font-size:12px;color:rgba(235,245,255,.66);line-height:1.35}
.inventory-catalog-summary-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.inventory-back-inline{background:rgba(60,64,76,0.85);border-color:rgba(220,234,248,0.22);color:#f4fbff}
.inventory-catalog-head{margin:0 0 10px}
.inventory-catalog-copy span{max-width:760px}
@media (max-width:1180px){
  .inventory-toolbar{grid-template-columns:1fr 1fr;}
  .inventory-toolbar-actions{grid-column:1 / -1;justify-content:space-between}
}
@media (max-width:820px){
  .inventory-toolbar{grid-template-columns:1fr;}
  .inventory-toolbar-actions{justify-content:stretch}
  .inventory-toolbar-actions > *{flex:1 1 auto}
  .inventory-tools-popover{position:static;width:auto}
  .inventory-tools-grid{grid-template-columns:1fr}
  .inventory-catalog-summary{flex-direction:column;align-items:flex-start}
  .inventory-catalog-summary-actions{justify-content:flex-start}
}
@media (max-width:520px){
  .inventory-catalog-summary{padding:12px}
}

/* === V0.103 Staff inventory cleanup — friendlier home, clearer catalog, less top clutter === */
.inventory-topbar{
  align-items:flex-start;
  gap:16px;
  margin-bottom:14px;
}
.inventory-topbar h2{
  letter-spacing:-.02em;
}
.inventory-subtitle{
  margin-top:8px;
  max-width:760px;
  color:rgba(235,245,255,.68);
  line-height:1.45;
}
.inventory-toolbar-shell{
  margin:0 0 10px;
  padding:0 0 12px;
  border-bottom:1px solid rgba(220,234,248,0.08);
}
.inventory-toolbar{
  grid-template-columns:minmax(240px,1.5fr) minmax(150px,.72fr) minmax(170px,.85fr) max-content;
  gap:12px;
  padding:14px;
  border-radius:20px;
  /* v0.164 — navy → charcoal. Chris said "god forsaken shit ass blue" — fixed. */
  background:linear-gradient(180deg,rgba(38,40,48,0.96),rgba(24,26,32,0.97));
  border:1px solid rgba(220,234,248,0.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 28px rgba(0,0,0,.16);
}
.inventory-control span{
  margin-bottom:7px;
  font-size:11px;
  letter-spacing:.09em;
  color:rgba(220,234,248,.62);
}
.inventory-search,
.inventory-filter{
  min-height: var(--ltc-tap);
  border-radius: var(--ltc-radius-md);
  /* v0.178 — migrated to tokens. Was rgba(48,52,62) charcoal-but-dim
     fighting the v0.174 fix. Now reads from --ltc-surface-input. */
  background: var(--ltc-surface-input);
  border: 2px solid var(--ltc-border-input);
  box-shadow: var(--ltc-shadow-input);
  color: var(--ltc-text-primary);
}
.inventory-search:focus,
.inventory-filter:focus{
  /* v0.178 — was rgba(90,220,200) aqua focus border. Now amber via
     the --ltc-accent token. Change the token to change every focus
     state in the app at once. */
  border-color: var(--ltc-accent);
  background: var(--ltc-surface-input-focus);
  box-shadow:
    0 0 0 3px rgba(var(--ltc-accent-rgb), 0.22),
    var(--ltc-shadow-input);
}
.inventory-toolbar-actions{
  align-items:stretch;
}
.inventory-toolbar-actions .food-toolbar-btn,
.inventory-toolbar-actions summary.food-toolbar-btn{
  min-height:44px;
}
.inventory-panel.catalog-active .inventory-subtitle{
  display:none;
}
.inventory-panel.catalog-active .inventory-toolbar{
  padding:12px 14px;
}
.inventory-quickbar{
  gap:9px;
  padding:0 2px 14px;
  margin:0 0 6px;
}
.inventory-chip-filter{
  min-height:44px;
  padding:11px 16px;
  border-radius:14px;
  /* v0.164 — chips were transparent but the border color was blue-tinted. Charcoalized. */
  background:linear-gradient(180deg,rgba(48,52,62,0.85),rgba(32,34,42,0.85));
  border:1px solid rgba(220,234,248,0.14);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.02em;
}
.inventory-chip-filter span{
  background:rgba(255,255,255,.09);
  padding:3px 9px;
  font-size:11px;
  font-weight:900;
}

/* v0.165 — Status pillbox love. Per-filter semantic colors via
   data-filter attribute, bigger tap targets (44px min height +
   bumped padding), ambient bubble layer on the active chip.
   Colors map to the filter's purpose:
     all          → blue (info/neutral)
     instock      → green (good/in stock)
     out          → red (gone/loss)
     quarantine   → amber (warning/needs attention)
     reserved     → purple (held/reserved — same as held color)
     recent       → cyan (secondary info)
     missingspecies → rose (needs species data work)
     missingstore   → orange (needs store data work)
*/
.inventory-chip-filter[data-filter="all"]            { --chip-rgb: 123,207,255; }
.inventory-chip-filter[data-filter="instock"]        { --chip-rgb: 74,222,128;  }
.inventory-chip-filter[data-filter="out"]            { --chip-rgb: 255,154,138; }
.inventory-chip-filter[data-filter="quarantine"]     { --chip-rgb: 255,203,94;  }
.inventory-chip-filter[data-filter="reserved"]       { --chip-rgb: 200,178,255; }
.inventory-chip-filter[data-filter="recent"]         { --chip-rgb: 94,212,220;  }
.inventory-chip-filter[data-filter="missingspecies"] { --chip-rgb: 255,155,182; }
.inventory-chip-filter[data-filter="missingstore"]   { --chip-rgb: 255,168,80;  }

/* idle state shows a hint of the chip's color in the border + count badge */
.inventory-chip-filter[data-filter]{
  border-color: rgba(var(--chip-rgb, 220,234,248), 0.24);
  color: rgba(255,255,255,0.85);
}
.inventory-chip-filter[data-filter] span{
  background: rgba(var(--chip-rgb, 255,255,255), 0.13);
  color: rgba(var(--chip-rgb, 255,255,255), 1);
  border: 1px solid rgba(var(--chip-rgb, 255,255,255), 0.28);
}
.inventory-chip-filter[data-filter]:hover{
  border-color: rgba(var(--chip-rgb, 220,234,248), 0.55);
  background: linear-gradient(180deg,
    rgba(var(--chip-rgb, 90,220,200), 0.11),
    rgba(32,34,42,0.85));
  transform: translateY(-1px);
}
/* Active chip — strong color border + tinted bg + ambient bubbles inside */
.inventory-chip-filter[data-filter].is-active{
  background: linear-gradient(180deg,
    rgba(var(--chip-rgb, 90,220,200), 0.22),
    rgba(var(--chip-rgb, 90,220,200), 0.08)) !important;
  border-color: rgba(var(--chip-rgb, 90,220,200), 0.85) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 1px rgba(var(--chip-rgb, 90,220,200), 0.4),
    0 4px 16px rgba(var(--chip-rgb, 90,220,200), 0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.inventory-chip-filter[data-filter].is-active span{
  background: rgba(var(--chip-rgb, 255,255,255), 0.28) !important;
  color: #fff !important;
  border-color: rgba(var(--chip-rgb, 255,255,255), 0.55) !important;
  box-shadow: 0 0 8px rgba(var(--chip-rgb, 255,255,255), 0.35);
}
/* Ambient rising bubbles on the ACTIVE chip — pure CSS, two pseudo
   elements that rise inside the chip. Uses the chip's color so the
   active filter feels alive. */
.inventory-chip-filter[data-filter].is-active::before{
  content: "";
  position: absolute;
  bottom: 4px;
  left: 18%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.95),
    rgba(var(--chip-rgb, 255,255,255), 0.55) 60%,
    transparent);
  border: 1px solid rgba(255,255,255,0.45);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: chipBubbleRise 4.2s ease-in infinite;
}
.inventory-chip-filter[data-filter].is-active::after{
  /* Override the existing ::after sheen sweep on the active state
     with a second bubble — the sheen is still visible on hover via
     the .inventory-chip-filter:hover::after rule above. */
  content: "";
  position: absolute;
  bottom: 4px;
  left: 68%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.9),
    rgba(var(--chip-rgb, 255,255,255), 0.45) 60%,
    transparent);
  border: 1px solid rgba(255,255,255,0.4);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: chipBubbleRise 5.4s ease-in infinite -2.1s;
  inset: auto auto 4px 68%;  /* override the sheen ::after inset */
  width: 3px !important;
  background-image: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.9),
    rgba(var(--chip-rgb, 255,255,255), 0.45) 60%,
    transparent) !important;
  transform: none !important;
}
@keyframes chipBubbleRise {
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }
  10%  { opacity: 0.9; transform: translateY(-2px) scale(1); }
  60%  { opacity: 0.6; }
  100% { transform: translateY(-26px) scale(0.7); opacity: 0; }
}
/* keep label/count above the bubble layer */
.inventory-chip-filter > span,
.inventory-chip-filter{
  position: relative;
}
.inventory-chip-filter > *{
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce){
  .inventory-chip-filter[data-filter].is-active::before,
  .inventory-chip-filter[data-filter].is-active::after{
    animation: none !important;
    opacity: 0 !important;
  }
}
.inventory-organizer{
  gap:18px;
}
.inventory-home-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:18px 20px;
  border-radius:22px;
  /* v0.164 — navy → charcoal */
  background:linear-gradient(180deg,rgba(38,40,48,0.97),rgba(24,26,32,0.98));
  border:1px solid rgba(220,234,248,0.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 30px rgba(0,0,0,.18);
}
.inventory-home-kicker{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(140,234,220,.72);
  margin-bottom:7px;
}
.inventory-home-copy h3{
  margin:0 0 7px;
  font-size:24px;
  color:#fff;
  letter-spacing:-.02em;
}
.inventory-home-copy p{
  margin:0;
  max-width:700px;
  color:rgba(235,245,255,.72);
  line-height:1.45;
}
.inventory-home-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.inventory-home-stat{
  display:grid;
  gap:4px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid rgba(220,234,248,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.inventory-home-stat span{
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(220,234,248,.64);
}
.inventory-home-stat strong{
  font-size:34px;
  line-height:1;
  color:#fff;
}
.inventory-home-stat small{
  color:rgba(235,245,255,.68);
}
.inventory-home-stat.accent-live{border-color:rgba(90,220,200,.2)}
.inventory-home-stat.accent-quarantine{border-color:rgba(255,205,80,.22)}
.inventory-home-stat.accent-hold{border-color:rgba(126,174,255,.22)}
.inventory-home-stat.accent-recent{border-color:rgba(199,164,255,.22)}
.inventory-overview-lanes{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:14px;
}
.inventory-overview-block{
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(220,234,248,.12);
  background:linear-gradient(180deg,rgba(12,20,31,.95),rgba(7,13,22,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.inventory-overview-head{
  display:grid;
  gap:4px;
  margin-bottom:12px;
}
.inventory-overview-head strong{
  font-size:16px;
  color:#fff;
}
.inventory-overview-head span{
  color:rgba(235,245,255,.64);
  line-height:1.4;
}
.inventory-task-grid{
  gap:10px;
}
.inventory-task-grid-secondary{
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.inventory-task-card,
.inventory-category-card{
  position:relative;
  gap:7px;
  padding:16px 16px 14px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.038));
  border:1px solid rgba(220,234,248,.13);
}
.inventory-task-card strong,
.inventory-category-card strong{
  font-size:16px;
}
.inventory-task-card span{
  font-size:28px;
  font-weight:900;
  line-height:1;
  color:#fff;
}
.inventory-task-card small,
.inventory-category-card small,
.inventory-category-card span,
.inventory-category-card em{
  color:rgba(235,245,255,.68);
}
.inventory-task-card.subtle{
  background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.028));
}
.inventory-task-card.warn{
  border-color:rgba(255,205,80,.22);
}
.inventory-category-block{
  padding-top:16px;
}
.inventory-category-overview{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}
.inventory-category-card{
  padding-right:18px;
}
.inventory-category-count{
  font-size:13px !important;
  font-weight:700;
  color:#f4fbff !important;
}
.inventory-category-card em{
  font-style:normal;
  font-size:12px;
  font-weight:700;
  color:#b7e7ff;
  margin-top:4px;
}
.inventory-catalog-summary{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  padding:16px 18px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(38,40,48,.97),rgba(22,24,30,.98));
}
.inventory-catalog-breadcrumb{
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(220,234,248,0.7);
}
.inventory-catalog-summary-main{
  gap:6px;
}
.inventory-catalog-summary-main strong{
  font-size:20px;
  letter-spacing:-.02em;
}
.inventory-catalog-summary-main span{
  max-width:680px;
}
.inventory-catalog-stat-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.inventory-catalog-stat-pill{
  display:inline-grid;
  gap:2px;
  padding:9px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(220,234,248,.11);
}
.inventory-catalog-stat-pill strong{
  font-size:16px;
  color:#fff;
}
.inventory-catalog-stat-pill small{
  color:rgba(235,245,255,.65);
  font-size:11px;
}
.inventory-catalog-summary-actions{
  align-content:start;
}
.inventory-catalog-head{
  padding:0 4px;
}
.inventory-panel.catalog-active .inventory-toolbar-shell{
  margin-bottom:8px;
}
@media (max-width:1180px){
  .inventory-home-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inventory-overview-lanes{grid-template-columns:1fr;}
}
@media (max-width:960px){
  .inventory-topbar,.inventory-home-hero{flex-direction:column;}
  .inventory-toolbar{grid-template-columns:1fr 1fr;}
  .inventory-toolbar-actions{grid-column:1 / -1;justify-content:flex-start}
  .inventory-catalog-summary{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .inventory-toolbar{grid-template-columns:1fr;}
  .inventory-home-stats{grid-template-columns:1fr 1fr;}
  .inventory-category-overview,.inventory-task-grid,.inventory-task-grid-secondary{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .inventory-home-stats{grid-template-columns:1fr;}
  .inventory-home-copy h3{font-size:21px;}
  .inventory-catalog-summary{padding:14px;}
}


/* v0.104 staff workbench polish */
.inventory-workbench{gap:20px}
.inventory-workbench-hero{
  align-items:stretch;
  gap:18px;
  background:
    radial-gradient(circle at top right, rgba(84,180,255,.16), transparent 34%),
    linear-gradient(180deg,rgba(46,48,56,.97),rgba(22,24,30,.98));
}
.inventory-workbench-glance{
  min-width:290px;
  max-width:360px;
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.035));
  border:1px solid rgba(220,234,248,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.inventory-glance-head{display:grid;gap:3px}
.inventory-glance-head strong{color:#fff;font-size:15px}
.inventory-glance-head span{color:rgba(235,245,255,.62);font-size:12px}
.inventory-glance-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.inventory-glance-pill{
  display:grid;
  gap:2px;
  padding:11px 12px;
  border-radius:16px;
  background:rgba(6,16,28,.54);
  border:1px solid rgba(220,234,248,.12);
}
.inventory-glance-pill b{font-size:22px;line-height:1;color:#fff}
.inventory-glance-pill small{font-size:11px;color:rgba(235,245,255,.68);text-transform:uppercase;letter-spacing:.08em}
.inventory-glance-pill.accent-live{border-color:rgba(90,220,200,.22)}
.inventory-glance-pill.accent-quarantine{border-color:rgba(255,205,80,.24)}
.inventory-glance-pill.accent-hold{border-color:rgba(126,174,255,.22)}
.inventory-glance-pill.accent-recent{border-color:rgba(199,164,255,.22)}
.inventory-workbench-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:14px}
.inventory-primary-block{padding:16px}
.inventory-task-grid-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.inventory-task-card.primary-card{
  padding:18px 18px 16px;
  gap:10px;
  min-height:168px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 26px rgba(0,0,0,.12);
}
.inventory-task-eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(231,242,250,.8);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
}
.inventory-task-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.inventory-task-head strong{font-size:18px !important;line-height:1.15}
.inventory-task-head span{font-size:34px !important;color:#fff}
.inventory-task-card.primary-card small{font-size:13px;line-height:1.45;color:rgba(235,245,255,.72)}
.inventory-task-card.primary-card em{margin-top:auto;font-style:normal;font-size:12px;font-weight:800;color:#d3f9f0;letter-spacing:.02em}
.inventory-task-card.primary-card.tone-live{border-color:rgba(90,220,200,.23);background:linear-gradient(180deg,rgba(30,120,108,.18),rgba(255,255,255,.04))}
.inventory-task-card.primary-card.tone-quarantine{border-color:rgba(255,205,80,.26);background:linear-gradient(180deg,rgba(130,92,20,.2),rgba(255,255,255,.04))}
.inventory-task-card.primary-card.tone-hold{border-color:rgba(126,174,255,.24);background:linear-gradient(180deg,rgba(34,76,130,.2),rgba(255,255,255,.04))}
.inventory-task-card.primary-card.tone-recent{border-color:rgba(199,164,255,.24);background:linear-gradient(180deg,rgba(83,52,136,.2),rgba(255,255,255,.04))}
.inventory-watchlist{display:grid;gap:10px}
.inventory-watch-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 12px;
  align-items:center;
  padding:14px 16px;
  border-radius:18px;
  text-align:left;
  color:#eef8ff;
  cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
  border:1px solid rgba(220,234,248,.12);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.inventory-watch-item:hover{transform:translateY(-2px);border-color:rgba(90,220,200,.28);background:rgba(90,220,200,.08);box-shadow:0 12px 24px rgba(0,0,0,.16)}
.inventory-watch-item strong{font-size:15px;color:#fff}
.inventory-watch-item span{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:26px;font-weight:900;color:#fff}
.inventory-watch-item small{color:rgba(235,245,255,.66);line-height:1.35;max-width:260px}
.inventory-browser-block{padding:16px}
.inventory-category-card{padding:16px 18px 15px}
.inventory-category-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.inventory-category-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(150,230,220,.74)}
.inventory-category-card strong{font-size:17px}
.inventory-category-card small{line-height:1.45}
.inventory-category-card em{margin-top:8px;color:#d1eeff}
.inventory-catalog-summary{
  background:
    radial-gradient(circle at top right, rgba(84,180,255,.12), transparent 32%),
    linear-gradient(180deg,rgba(38,40,48,.97),rgba(22,24,30,.98));
  border:1px solid rgba(220,234,248,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 28px rgba(0,0,0,.14);
}
.inventory-catalog-summary-actions .food-toolbar-btn:first-child{
  border-color:rgba(90,220,200,.26);
  background:rgba(90,220,200,.1);
  color:#d6fff4;
}
@media (max-width:1080px){
  .inventory-workbench-grid{grid-template-columns:1fr}
  .inventory-workbench-glance{max-width:none}
}
@media (max-width:760px){
  .inventory-glance-strip,.inventory-task-grid-primary{grid-template-columns:1fr}
  .inventory-task-card.primary-card{min-height:auto}
}


/* === V0.105 staff receiving + recent sold polish === */
.card-title-row.has-sale .card-old-price-inline,
.card-title-row.has-sale .card-sale-inline{display:inline-flex;align-items:center}
.card-title-row.has-sale .card-old-price-inline{font-size:12px;color:rgba(255,255,255,.55)}
.card-title-row.has-sale .card-sale-inline{display:inline-flex}
.sale-main-badge{min-width:76px}
.sale-main-badge .price-sale-tag{display:block !important;margin-bottom:2px;text-align:center}
.inventory-organizer-actions-stack{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-action{background:linear-gradient(180deg,rgba(90,220,200,.22),rgba(90,220,200,.14));border-color:rgba(90,220,200,.3);color:#d9fff5;font-weight:900}
.hero-secondary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.inventory-workbench-grid-extended{grid-template-columns:1fr 1fr}
.inventory-workbench-grid.lower-grid{align-items:start}
.inventory-receive-shell,.inventory-sales-shell{display:grid;gap:12px}
.inventory-receive-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inventory-task-card.receive-card{min-height:168px;justify-content:space-between;background:linear-gradient(180deg,rgba(34,52,86,.22),rgba(255,255,255,.04));border-color:rgba(220,234,248,.2)}
.inventory-task-card.receive-card em{margin-top:auto;font-style:normal;font-size:12px;font-weight:800;color:#d6ebff}
.inventory-receive-note{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:rgba(235,245,255,.68);font-size:12px;line-height:1.45}
.inventory-sales-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.inventory-sales-metric{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:grid;gap:3px}
.inventory-sales-metric span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(235,245,255,.48)}
.inventory-sales-metric strong{font-size:22px;color:#fff;line-height:1.05}
.inventory-sales-metric small{font-size:11px;color:rgba(235,245,255,.64)}
.inventory-sales-list{display:grid;gap:10px}
.inventory-sales-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.inventory-sales-main{display:grid;gap:4px;min-width:0}
.inventory-sales-main strong{font-size:15px;color:#fff;line-height:1.2}
.inventory-sales-main span{font-size:12px;color:rgba(235,245,255,.62);line-height:1.4}
.inventory-sales-side{display:grid;justify-items:end;gap:8px}
.inventory-sales-side b{font-size:18px;color:#84f5de;line-height:1}
.inventory-sales-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.inventory-sales-actions .input-helper-btn{min-height:34px}
@media (max-width: 980px){
  .inventory-organizer-actions-stack,.inventory-workbench-grid-extended,.inventory-receive-actions,.inventory-sales-metrics{grid-template-columns:1fr}
  .inventory-sales-row{grid-template-columns:1fr}
  .inventory-sales-side{justify-items:start}
  .inventory-sales-actions{justify-content:flex-start}
}

.inventory-add-toolbar{background:linear-gradient(180deg,rgba(90,220,200,.18),rgba(90,220,200,.11));border-color:rgba(90,220,200,.26);color:#d8fff6;font-weight:800}
.inventory-tools-workbench-block{padding:16px}
.inventory-workbench-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.inventory-watch-item.danger{border-color:rgba(255,110,110,.18);background:linear-gradient(180deg,rgba(90,22,28,.28),rgba(255,255,255,.03))}
.inventory-watch-item.danger:hover{border-color:rgba(255,110,110,.28);background:rgba(120,30,40,.22)}
@media (max-width:1080px){.inventory-workbench-tools-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.inventory-workbench-tools-grid{grid-template-columns:1fr}.inventory-organizer-actions-stack,.inventory-receive-actions{grid-template-columns:1fr}}


/* === V0.107 stability audit pass === */
.category-shell{display:block!important;min-height:0!important;padding:0!important;overflow:hidden!important}
.category-row{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  align-content:stretch!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  gap:10px!important;
  padding:10px 14px 4px!important;
  min-height:0!important;
  width:100%!important;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}
.category-row::-webkit-scrollbar{display:none!important}
.folder-tab{
  display:inline-flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:144px!important;
  max-width:184px!important;
  min-height:48px!important;
  white-space:normal!important;
  text-align:center!important;
  line-height:1.05!important;
}
.folder-tab span{display:block!important;margin-top:4px!important}
.analytics-overlay{overflow:auto;padding:22px 16px;align-items:flex-start}
.analytics-panel{width:min(1280px,100%);max-width:1280px;max-height:none;min-height:0}
.inventory-panel{width:min(1280px,100%);max-width:1280px}
.food-settings-panel{width:min(1080px,100%);max-width:1080px}
.inventory-toolbar{grid-template-columns:minmax(240px,1.4fr) minmax(170px,.6fr) minmax(170px,.6fr) auto!important}
.inventory-toolbar-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.inventory-toolbar-actions .food-toolbar-btn{white-space:nowrap}
@media (max-width:960px){
  .analytics-overlay{padding:12px 10px}
  .inventory-toolbar{grid-template-columns:1fr!important}
  .inventory-toolbar-actions{justify-content:flex-start}
}


/* === V0.113 security + sale price visibility polish === */
.card-title-row.has-sale{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:10px;
  align-items:baseline;
}
.card-title-row.has-sale .card-old-price-inline{
  display:inline-flex;
  align-items:baseline;
  font-size:15px;
  font-weight:700;
  color:rgba(255,255,255,.78);
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(255,109,109,.85);
  white-space:nowrap;
  letter-spacing:.01em;
}
.card-title-row.has-sale .card-sale-inline{display:none}
body.light-mode .card-title-row.has-sale .card-old-price-inline{
  color:rgba(15,25,40,.62);
  text-decoration-color:rgba(220,40,40,.85);
}
.cards.compact-mode .card-title-row.has-sale .card-old-price-inline{
  font-size:13px;
  text-decoration-thickness:2px;
}
@media (max-width:540px){
  .card-title-row.has-sale .card-old-price-inline{font-size:14px}
}
.modal-inline-old-price{
  display:inline-block;
  margin-right:10px;
  font-size:18px;
  font-weight:600;
  color:rgba(255,255,255,.62);
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(255,109,109,.85);
}
body.light-mode .modal-inline-old-price{
  color:rgba(15,25,40,.55);
  text-decoration-color:rgba(220,40,40,.85);
}

/* === v0.114 tank-alert + alias polish === */
.receive-match small{font-size:11px;color:#8fd8ff;text-transform:none;letter-spacing:.02em;line-height:1.4}
.inventory-card-aliases{margin-top:6px;font-size:12px;line-height:1.35;color:rgba(235,245,255,.74)}
.inventory-badge.inventory-badge-alert{background:rgba(255,205,80,.16);border-color:rgba(255,205,80,.34);color:#ffd977;font-weight:700}
.inventory-glance-pill.accent-missing{border-color:rgba(255,205,80,.26)}
.inventory-watch-item.tank-alert{border-color:rgba(255,205,80,.2);background:linear-gradient(180deg, rgba(255,205,80,.08), rgba(255,255,255,.02))}
.inventory-watch-item.tank-alert strong{color:#ffe08b}
body.light-mode .inventory-card-aliases{color:rgba(15,25,40,.62)}
body.light-mode .inventory-badge.inventory-badge-alert{background:rgba(255,205,80,.18);border-color:rgba(184,133,0,.24);color:#8a5b00}
body.light-mode .inventory-watch-item.tank-alert strong{color:#8a5b00}

.receive-picker-actions{display:flex;flex-wrap:wrap;gap:8px}
.receive-picker-actions .input-helper-btn{min-height:36px}
.inventory-watch-item.catalog-pending{border-color:rgba(255,206,120,.24);background:linear-gradient(180deg,rgba(255,206,120,.1),rgba(255,206,120,.04))}
.inventory-watch-item.catalog-pending strong{color:#ffd98a}


/* === Claude integration bundle v0.116 === */
/* =============================================================
   LTC FISH BROWSER — POPUP / GAUGE / WATER PARAM CSS BUNDLE
   ============================================================= */
/* This file collects every CSS block ChatGPT needs to make the
   new fish detail popup, the compatibility gauges, and the water
   parameters render correctly. Drop the entire file at the END
   of your style.css so the !important rules override anything
   that came before. Sections are separated by big banner
   comments — DO NOT REORDER THEM, the cascade depends on order.
   ============================================================= */


/* =============================================================
   SECTION 1 — GAUGE GRADIENT VARIABLE (Variant C+)
   Place this in your :root or wherever you keep CSS variables.
   ============================================================= */
:root{
  --gauge-spectrum:linear-gradient(90deg,#103a5e 0%,#1f9bd6 5%,#2db48a 16%,#4cb645 28%,#7bc23a 42%,#b6c92c 54%,#ecc923 64%,#d68a25 76%,#c84a2e 88%,#6e1414 96%,#050000 100%);
}


/* =============================================================
   SECTION 2 — BASE GAUGE TRACK / LIQUID / MARKER / SCALE
   Standard gauge structural CSS. The .gauge-liquid is hidden in
   Section 8 because the V0.106 canvas water replaces its visual
   role — keeping the rules here for compatibility with anything
   else that might reference them.
   ============================================================= */
.gauge-track{
  position:relative;margin-top:12px;height:18px;border-radius:999px;background:var(--gauge-spectrum);overflow:hidden;isolation:isolate;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 8px 16px rgba(0,0,0,.18)
}
.gauge-track::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0))
}
.gauge-liquid{
  position:absolute;left:2px;top:2px;bottom:2px;width:calc(var(--gauge-score, 50%) - 4px);min-width:14px;border-radius:999px;z-index:1;overflow:hidden;
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.26) 18%, rgba(255,255,255,.10) 34%, rgba(255,255,255,.03) 70%);
  box-shadow:0 0 18px rgba(120,220,255,.18), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 8px rgba(10,30,44,.28);
  transform-origin:left center;animation:gaugeFillReveal 760ms cubic-bezier(.22,.8,.2,1) both;
}
.gauge-liquid::before,.gauge-liquid::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.gauge-liquid::before{
  background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 34%, rgba(255,255,255,0) 68%);
  transform:translateX(-120%);animation:liquidSweep 4.8s cubic-bezier(.22,.8,.2,1) .55s infinite;opacity:.85;
}
.gauge-liquid::after{
  inset:auto 8% 2px 8%;height:44%;background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));filter:blur(1px);opacity:.7;
}
.gauge-marker{
  position:absolute;top:50%;transform:translate(-50%,-50%) scale(.78);width:28px;height:28px;border-radius:50%;z-index:3;opacity:0;
  background:#fff;border:5px solid rgba(8,16,25,.96);box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.36);
  animation:gaugeMarkerPop 520ms cubic-bezier(.2,.9,.2,1) .18s forwards, gaugeMarkerDrift 4.2s ease-in-out 1.1s infinite;
}
.gauge-card:nth-child(2) .gauge-liquid{animation-delay:.08s}
.gauge-card:nth-child(2) .gauge-liquid::before{animation-delay:.63s}
.gauge-card:nth-child(2) .gauge-marker{animation-delay:.22s,1.18s}
.gauge-card:nth-child(3) .gauge-liquid{animation-delay:.14s}
.gauge-card:nth-child(3) .gauge-liquid::before{animation-delay:.69s}
.gauge-card:nth-child(3) .gauge-marker{animation-delay:.28s,1.24s}
.gauge-card:nth-child(4) .gauge-liquid{animation-delay:.2s}
.gauge-card:nth-child(4) .gauge-liquid::before{animation-delay:.75s}
.gauge-card:nth-child(4) .gauge-marker{animation-delay:.34s,1.3s}
.gauge-scale{
  display:flex;justify-content:space-between;gap:12px;margin-top:11px;font-size:13px;font-weight:850;color:#c3d4e2
}


/* =============================================================
   SECTION 3 — V0.097 GAUGE VERDICT PILL COLORS
   The verdict text in the gauge head gets color-coded by score
   zone. The classes are picked in gaugeCard() — see file 02.
   ============================================================= */
.gauge-head .gauge-verdict{
  text-shadow:0 1px 4px rgba(0,0,0,.6),0 0 8px rgba(0,0,0,.35);
  letter-spacing:.01em;
}
.gauge-head .gauge-verdict.v-cyan{color:#5ee0ff}
.gauge-head .gauge-verdict.v-green{color:#5eebc8}
.gauge-head .gauge-verdict.v-lime{color:#caf66e}
.gauge-head .gauge-verdict.v-yellow{color:#ffe275}
.gauge-head .gauge-verdict.v-orange{color:#ffba60}
.gauge-head .gauge-verdict.v-red{color:#ff8a6a}



/* =============================================================
   SECTION 4 — V0.093 GAUGE FISH MARKER + BUBBLE TRAIL +
   PER-VARIANT ANIMATIONS
   Replaces the round dot marker with the type-matched fish SVG
   from gaugeFishMarker.js. Includes fishMarkerBob, fishBubTrail,
   all fm* keyframes, and per-variant child element animations.
   ============================================================= */

/* Bigger gauge track in modals so the fish has room to swim. */
.fish-modal .gauges .gauge-track{
  height:36px !important;
  border-radius:18px !important;
}
.fish-modal.mobile-safe .gauges .gauge-track{
  height:28px !important;
  border-radius:14px !important;
}

/* Fish marker overrides — strip the dot styling and let the SVG show */
.gauge-marker.has-fish{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  width:54px !important;
  height:42px !important;
  border-radius:0 !important;
  opacity:0;
  transform:translate(-50%,-50%) !important;
  transition:opacity .5s ease, left 1.6s cubic-bezier(.22,.8,.24,1) !important;
  animation:fishMarkerBob 2.4s ease-in-out infinite !important;
  pointer-events:none;
  z-index:5;
}
.fish-modal.mobile-safe .gauge-marker.has-fish{
  width:42px !important;
  height:32px !important;
}
.gauge-marker.has-fish.show{opacity:1}
.gauge-marker.has-fish > svg{
  width:100%;
  height:100%;
  overflow:visible;
  fill:rgba(8,18,32,.7);
  stroke:#04080f;
  stroke-width:2.4;
  stroke-linejoin:round;
  stroke-linecap:round;
  filter:drop-shadow(0 0 9px var(--glow,rgba(120,200,255,.65))) drop-shadow(0 3px 6px rgba(0,0,0,.6));
}
.gauge-marker.has-fish .eye{fill:#fff;stroke:none}
.gauge-marker.has-fish .pupil{fill:#04080f;stroke:none}

/* Bubble trail behind the fish */
.gauge-marker.has-fish .bub{
  position:absolute;
  right:78%;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,1) 0%,rgba(220,240,255,.92) 60%,rgba(160,200,240,.6) 100%);
  border:1.5px solid rgba(255,255,255,.95);
  box-shadow:0 0 8px rgba(255,255,255,.8),0 0 14px rgba(120,200,255,.55),0 1px 3px rgba(0,0,0,.6);
  animation:fishBubTrail 2.2s ease-out infinite;
  pointer-events:none;
}
.gauge-marker.has-fish .bub:nth-child(1){animation-delay:0s;--bY:-8px;width:7px;height:7px}
.gauge-marker.has-fish .bub:nth-child(2){animation-delay:.55s;--bY:4px;width:10px;height:10px}
.gauge-marker.has-fish .bub:nth-child(3){animation-delay:1.1s;--bY:-3px;width:6px;height:6px}
.gauge-marker.has-fish .bub:nth-child(4){animation-delay:1.65s;--bY:6px;width:8px;height:8px}

/* Keyframes — namespaced "fm*" so they don't collide with anything */
@keyframes fishMarkerBob{
  0%,100%{transform:translate(-50%,-50%) translateY(0)}
  50%{transform:translate(-50%,-50%) translateY(-2.5px)}
}
@keyframes fishBubTrail{
  0%{transform:translate(8px,0) scale(.4);opacity:0}
  18%{opacity:1}
  100%{transform:translate(-34px,var(--bY)) scale(1.2);opacity:0}
}
@keyframes fmWagFast{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes fmWagMid{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes fmFinFlow{0%,100%{transform:rotate(-6deg) scaleX(1)}50%{transform:rotate(6deg) scaleX(1.05)}}
@keyframes fmPuff{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes fmFanOut{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.12)}}
@keyframes fmTentacle{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1px) scaleY(.9)}}
@keyframes fmPulse{0%,100%{transform:scaleY(1) translateY(0)}50%{transform:scaleY(.8) translateY(-2px)}}
@keyframes fmUndulate{0%,100%{transform:skewY(-6deg)}50%{transform:skewY(6deg)}}
@keyframes fmCurl{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* Per-variant child animations — give each fish its own personality */
.gauge-marker.has-fish.v2 .body{animation:fmPuff 1.8s ease-in-out infinite;transform-origin:50% 50%}
.gauge-marker.has-fish.v2 .tail{animation:fmWagMid .5s ease-in-out infinite;transform-origin:12% 50%}
.gauge-marker.has-fish.v3 .topFin,.gauge-marker.has-fish.v3 .botFin{animation:fmFinFlow 1.4s ease-in-out infinite;transform-origin:50% 100%}
.gauge-marker.has-fish.v3 .botFin{transform-origin:50% 0%;animation-delay:.2s}
.gauge-marker.has-fish.v3 .tail{animation:fmWagMid .6s ease-in-out infinite;transform-origin:15% 50%}
.gauge-marker.has-fish.v4 .veil{animation:fmFinFlow 1.2s ease-in-out infinite;transform-origin:20% 50%}
.gauge-marker.has-fish.v4 .ventral{animation:fmFinFlow 1s ease-in-out infinite;transform-origin:70% 20%}
.gauge-marker.has-fish.v7 .curl{animation:fmCurl 1.5s ease-in-out infinite;transform-origin:50% 30%}
.gauge-marker.has-fish.v8 .spines{animation:fmFanOut 1.6s ease-in-out infinite;transform-origin:60% 50%}
.gauge-marker.has-fish.v8 .tail{animation:fmWagMid .5s ease-in-out infinite;transform-origin:18% 50%}
.gauge-marker.has-fish.v10 .body{animation:fmUndulate 1s ease-in-out infinite;transform-origin:50% 50%}
.gauge-marker.has-fish.v11 .tail{animation:fmWagFast .35s ease-in-out infinite;transform-origin:14% 50%}
.gauge-marker.has-fish.v12 .dome{animation:fmPulse 1.5s ease-in-out infinite;transform-origin:50% 30%}
.gauge-marker.has-fish.v12 .ten{animation:fmTentacle 1.5s ease-in-out infinite;transform-origin:50% 0%}
.gauge-marker.has-fish.v12 .ten:nth-child(2){animation-delay:.2s}
.gauge-marker.has-fish.v12 .ten:nth-child(3){animation-delay:.4s}
.gauge-marker.has-fish.v14 .tail{animation:fmWagFast .4s ease-in-out infinite;transform-origin:12% 50%}
.gauge-marker.has-fish.v16 .topFin,.gauge-marker.has-fish.v16 .botFin{animation:fmFinFlow 1s ease-in-out infinite;transform-origin:50% 100%}
.gauge-marker.has-fish.v16 .botFin{transform-origin:50% 0%;animation-delay:.15s}
.gauge-marker.has-fish.v20 .tail{animation:fmWagFast .35s ease-in-out infinite;transform-origin:15% 50%}
.gauge-marker.has-fish.v21 .tail{animation:fmWagMid .5s ease-in-out infinite;transform-origin:14% 50%}
.gauge-marker.has-fish.v21 .pec{animation:fmFinFlow 1s ease-in-out infinite;transform-origin:50% 20%}
.gauge-marker.has-fish.v22 .tail{animation:fmWagFast .32s ease-in-out infinite;transform-origin:14% 50%}
.gauge-marker.has-fish.v23 .claws{animation:fmFinFlow 1.2s ease-in-out infinite;transform-origin:50% 50%}
.gauge-marker.has-fish.v24 .ant{animation:fmFinFlow 1.4s ease-in-out infinite;transform-origin:90% 30%}
.gauge-marker.has-fish.v24 .bodyShape{animation:fmPuff 2.2s ease-in-out infinite;transform-origin:50% 50%}
.gauge-marker.has-fish.v25 .body{animation:fmFanOut 3s ease-in-out infinite;transform-origin:50% 50%}
.gauge-marker.has-fish.v26 .body{animation:fmPuff 2.4s ease-in-out infinite;transform-origin:50% 50%}
.gauge-marker.has-fish.v26 .spines{animation:fmFanOut 2s ease-in-out infinite;transform-origin:50% 50%}
.gauge-marker.has-fish.v27 .ten{animation:fmTentacle 2s ease-in-out infinite;transform-origin:50% 100%}
.gauge-marker.has-fish.v27 .ten:nth-child(2){animation-delay:.2s}
.gauge-marker.has-fish.v27 .ten:nth-child(3){animation-delay:.4s}
.gauge-marker.has-fish.v27 .ten:nth-child(4){animation-delay:.6s}
.gauge-marker.has-fish.v27 .ten:nth-child(5){animation-delay:.3s}
.gauge-marker.has-fish.v28 .top{animation:fmPuff 3s ease-in-out infinite;transform-origin:50% 100%}
.gauge-marker.has-fish.v29 .stalk{animation:fmFinFlow 1.8s ease-in-out infinite;transform-origin:50% 100%}
.gauge-marker.has-fish.v30 .tail{animation:fmWagFast .6s ease-in-out infinite;transform-origin:12% 50%}

/* Reduced-motion: hold the fish at its target with no swim/bob */
@media (prefers-reduced-motion: reduce){
  .gauge-marker.has-fish{animation:none !important;transition:opacity .3s ease !important}
  .gauge-marker.has-fish > svg *{animation:none !important}
  .gauge-marker.has-fish .bub{display:none}
}



/* =============================================================
   SECTION 5 — V0.106 GAUGE WATER CANVAS
   Positions the <canvas data-gauge-canvas> inside .gauge-track
   at z-index 2 (above the gradient, below the fish marker).
   Hides the legacy .gauge-liquid CSS fill since the canvas
   handles fill visualization now.
   ============================================================= */
.gauge-track canvas[data-gauge-canvas]{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:2;
  border-radius:inherit;
  pointer-events:none;
}
/* Hide the legacy CSS liquid fill — canvas water replaces it */
.gauge-track .gauge-liquid{display:none !important}


/* =============================================================
   SECTION 6 — V0.099 + V0.102 MAGAZINE HERO
   Wide hero photo card with magazine overlay, price tag,
   category pill, status pill row, 4-card stat strip.
   ============================================================= */
@media (min-width: 601px){
  .modal-top-desktop.modal-hero-magazine{
    display:block !important;
    grid-template-columns:none !important;
    margin-bottom:22px;
  }
}
.modal-hero-magazine .modal-hero-wide{
  width:100%;
  margin-bottom:18px;
}
.modal-hero-magazine .modal-photo-magazine{
  position:relative;
  width:100%;
  min-height:340px;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg,#1d5a82 0%,#0e3a5c 60%,#08243a 100%);
}
@media (max-width: 900px){
  .modal-hero-magazine .modal-photo-magazine{min-height:260px}
}

/* Price tag in top-right corner of the hero */
.modal-hero-magazine .hero-pricetag{
  position:absolute;
  top:16px;
  right:16px;
  background:rgba(11,22,34,0.86);
  padding:10px 20px;
  border-radius:999px;
  font-size:22px;
  font-weight:800;
  color:#ffe59a;
  border:1px solid rgba(255,229,154,0.42);
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  z-index:5;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.modal-hero-magazine .hero-pricetag .hero-price-old{
  font-size:14px;
  font-weight:600;
  color:rgba(255,229,154,0.55);
  text-decoration:line-through;
}

/* Magazine-style overlay caption — bigger name, scientific, aliases, pills */
.modal-hero-magazine .modal-photo-copy-magazine{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:24px 28px 26px;
  background:linear-gradient(180deg,rgba(11,22,34,0) 0%,rgba(11,22,34,0.55) 35%,rgba(11,22,34,0.92) 100%);
  z-index:4;
}
.modal-hero-magazine .hero-cat-pill{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#b5e896;
  background:rgba(42,74,26,0.85);
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:10px;
}
.modal-hero-magazine .modal-photo-copy-magazine h2{
  margin:0;
  font-size:38px;
  font-weight:900;
  color:#fff;
  line-height:1.05;
  letter-spacing:-0.5px;
  text-shadow:0 2px 8px rgba(0,0,0,0.6);
}
.modal-hero-magazine .modal-photo-copy-magazine .latin{
  display:block;
  margin-top:6px;
  font-size:17px;
  font-style:italic;
  color:rgba(255,255,255,0.82);
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
.modal-hero-magazine .hero-aliases{
  margin-top:4px;
  font-size:14px;
  color:rgba(255,255,255,0.65);
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
/* v0.186 — surfaces the headerSummary content (one-sentence customer
   hook) that was previously only rendered by the deleted mobile
   template. Sits between the aliases and the status pills, gives the
   customer the lead-in copy before they start scanning. Conditional
   in the template — only renders when summaryText() returns non-empty. */
.modal-hero-magazine .hero-summary-line{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.5;
  font-weight:600;
  color:rgba(255,255,255,0.86);
  text-shadow:0 1px 4px rgba(0,0,0,0.55);
  max-width:62ch;
}
.fish-modal.mobile-safe .modal-hero-magazine .hero-summary-line{
  font-size:12.5px;
  margin-top:8px;
  line-height:1.45;
}
.modal-hero-magazine .hero-status-pills{
  display:flex;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}
.modal-hero-magazine .hero-pill{
  font-size:13px;
  padding:6px 14px;
  background:rgba(11,22,34,0.78);
  color:#cce6ff;
  border-radius:999px;
  border:1px solid rgba(120,180,220,0.32);
  font-weight:600;
  backdrop-filter:blur(4px);
}
.modal-hero-magazine .hero-pill.status-pill{
  /* Inherit color from existing reefClass etc */
}

/* 4-card stat strip below the hero photo */
.modal-hero-magazine .modal-hero-statstrip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:22px;
}
.modal-hero-magazine .hero-stat-card{
  background:#262830;
  border:1px solid rgba(120,180,220,0.18);
  border-radius:14px;
  padding:18px 14px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:96px;
}
.modal-hero-magazine .hero-stat-card label{
  font-size:12px;
  color:rgba(220,234,245,0.65);
  text-transform:uppercase;
  letter-spacing:0.8px;
  font-weight:700;
}
.modal-hero-magazine .hero-stat-card strong{
  margin-top:8px;
  font-size:20px;
  font-weight:800;
  color:#fff;
  line-height:1.2;
}
@media (max-width: 700px){
  .modal-hero-magazine .modal-hero-statstrip{grid-template-columns:repeat(2,1fr);gap:10px}
  .modal-hero-magazine .hero-stat-card{min-height:80px;padding:14px 10px}
  .modal-hero-magazine .hero-stat-card strong{font-size:17px}
  .modal-hero-magazine .modal-photo-copy-magazine h2{font-size:28px}
  .modal-hero-magazine .modal-photo-copy-magazine{padding:18px 20px 20px}
  .modal-hero-magazine .hero-pricetag{font-size:18px;padding:8px 16px}
}

/* Gauges + overview spacing in magazine layout */
.modal-hero-magazine .modal-compat-full{margin-bottom:18px}
.modal-hero-magazine .modal-overview-magazine{
  margin-bottom:0;
}

/* Hide the now-redundant headline bar (modalHeaderBar output) — magazine
   hero contains all of that info in the overlay. We remove modalHeaderBar
   from the template path entirely for the magazine layout. */
.modal-hero-magazine .modal-headline-bar{display:none}

/* V0.099 magazine hero — fix conflicts with existing .modal-photo styles */
.modal-hero-magazine .modal-photo-magazine{
  height:360px !important;
  min-height:0 !important;
}
@media (max-width: 900px){
  .modal-hero-magazine .modal-photo-magazine{height:280px !important}
}
@media (max-width: 700px){
  .modal-hero-magazine .modal-photo-magazine{height:220px !important}
}
/* Suppress the existing .modal-photo::after gradient since the magazine
   overlay provides its own dark fade at the bottom */
.modal-hero-magazine .modal-photo-magazine::after{display:none !important}
/* Bigger hero name for drama (override the magazine block above) */
.modal-hero-magazine .modal-photo-copy-magazine h2{font-size:42px !important}
@media (max-width: 700px){
  .modal-hero-magazine .modal-photo-copy-magazine h2{font-size:30px !important}
}
/* Make sure the loaded img sits behind everything else */
.modal-hero-magazine .modal-photo-magazine > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.modal-hero-magazine .modal-photo-magazine .image-placeholder,
.modal-hero-magazine .modal-photo-magazine .skeleton-img{z-index:2}
.modal-hero-magazine .modal-photo-magazine .modal-photo-copy-magazine{z-index:4}
.modal-hero-magazine .modal-photo-magazine .hero-pricetag{z-index:5}

/* ============================================================


/* =============================================================
   SECTION 7 — V0.100 SINGLE-COLUMN MAGAZINE FLOW
   Full popup rebuild. Replaces the old two-column
   modal-layout grid with a flat single-column flow.
   ============================================================= */
.modal-magazine-flow{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:0;
  max-width:880px;
  margin:0 auto;
}

/* Section header — uppercase white text above each block */
.modal-magazine-flow .mag-section-header{
  font-size:14px;
  font-weight:800;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:1.3px;
  margin:0 0 -6px;
}

/* Stat strip — already styled via .modal-hero-statstrip in v0.099 */
.modal-magazine-flow .mag-statstrip{margin-bottom:0}

/* Gauges wrap — strip the modal-section background since it sits
   in a flat flow now, not inside a colored panel */
.modal-magazine-flow .mag-gauges-wrap{
  background:transparent;
  border:none;
  padding:0;
  margin:0;
}
.modal-magazine-flow .mag-gauges-wrap .gauges{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* v0.141 — Quick overview / Staff note / Quick facts now share the
   "friendly" reading-block typography (18px / weight 720 / line-height 1.74)
   that Chris locked in as the canonical body style. They each keep their
   own tinted background so they read as visually distinct sections. */

/* About this fish — teal/aqua tint */
.modal-magazine-flow .mag-overview{
  background:linear-gradient(180deg, rgba(46,48,56,0.55), rgba(28,30,38,0.62));
  border:1px solid rgba(94,235,200,0.32);
  border-radius:22px;
  padding:18px 18px;
}
.modal-magazine-flow .mag-overview p{
  margin:0;
  font-size:18px;
  font-weight:720;
  line-height:1.74;
  color:#eaf8f5;
  font-family:inherit;
}

/* Staff note — purple callout block */
.modal-magazine-flow .mag-staff-note{
  background:linear-gradient(180deg, rgba(40,30,80,0.65), rgba(28,20,60,0.72));
  border:1px solid rgba(155,130,255,0.42);
  border-radius:22px;
  padding:18px 18px;
}
.modal-magazine-flow .mag-staff-note label{
  display:block;
  margin-bottom:8px;
  font-size:15px;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:800;
  color:#c7beff;
}
.modal-magazine-flow .mag-staff-note p{
  margin:0;
  font-size:18px;
  font-weight:720;
  line-height:1.74;
  color:#e7ddff;
  font-family:inherit;
}

/* Quick fact stack — each card uses the friendly body style and a
   dark navy tint to keep visual separation from About/Staff Note. */
.modal-magazine-flow .mag-fact-stack .fact-card{
  padding:16px 16px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(28,30,38,.54), rgba(22,24,30,.66));
  border:1px solid rgba(200,232,255,.08);
  font-size:18px;
  font-weight:720;
  line-height:1.74;
  color:#eff8ff;
}

/* v0.141 — Reading block color modifiers. Each long-form section in the
   "More details" expander gets its own accent so they don't bleed together
   visually. Buying = amber, Behavior = blue, Feeding = green, Recognition
   = purple. The accent colors the left border, the section label, and a
   subtle background tint. */
.reading-block.rb-buying{
  background:linear-gradient(180deg, rgba(60,42,8,.62), rgba(28,18,4,.74));
  border:1px solid rgba(255,203,94,.32);
  border-left:4px solid #ffcb5e;
}
.reading-block.rb-buying strong{color:#ffd87a}

.reading-block.rb-behavior{
  background:linear-gradient(180deg, rgba(46,48,56,.62), rgba(22,24,30,.74));
  border:1px solid rgba(123,207,255,.32);
  border-left:4px solid #7bcfff;
}
.reading-block.rb-behavior strong{color:#9bd9ff}

.reading-block.rb-feeding{
  background:linear-gradient(180deg, rgba(10,52,42,.62), rgba(4,22,18,.74));
  border:1px solid rgba(94,235,200,.32);
  border-left:4px solid #5eebc8;
}
.reading-block.rb-feeding strong{color:#7df0d3}

.reading-block.rb-recognition{
  background:linear-gradient(180deg, rgba(40,28,68,.62), rgba(18,12,30,.74));
  border:1px solid rgba(200,178,255,.32);
  border-left:4px solid #c8b2ff;
}
.reading-block.rb-recognition strong{color:#d4c2ff}

/* v0.141 — Works well with / Use caution with split. The two were both
   reading as dark green/gold, almost indistinguishable on a dark background.
   Now: works = bright green positive, caution = warm rose warning.
   v0.141.1 — !important on background to win over the seafoam class also
   present on the works section, and child .list-pill recolored so the
   inner pills also read as positive vs warning. */
.modal-section.best-with-section{
  background:linear-gradient(180deg, rgba(14,52,42,.92), rgba(6,22,18,.97)) !important;
  border:1px solid rgba(94,235,200,.32);
  border-left:4px solid #5eebc8;
}
.modal-section.best-with-section .section-title h3{color:#7df0d3}
.modal-section.best-with-section .list-pill{
  background:linear-gradient(180deg, rgba(20,90,72,.92), rgba(8,40,32,.97));
  border:1px solid rgba(94,235,200,.38);
  color:#d4fff0;
}

.modal-section.caution-with-section{
  background:linear-gradient(180deg, rgba(58,18,22,.92), rgba(24,8,10,.97)) !important;
  border:1px solid rgba(255,154,138,.36);
  border-left:4px solid #ff9a8a;
}
.modal-section.caution-with-section .section-title h3{color:#ffb6a4}
.modal-section.caution-with-section .list-pill{
  background:linear-gradient(180deg, rgba(102,30,32,.94), rgba(46,12,14,.98));
  border:1px solid rgba(255,154,138,.42);
  color:#ffe2dc;
}

/* v0.141 — Hero stat icon positioning. The card layout itself is in the
   v0.102 consolidated block lower in this file. This rule just defines
   how the inline SVG glyph sits inside the card. */
.modal-magazine-flow .hero-stat-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.modal-magazine-flow .hero-stat-icon svg{
  width:24px;
  height:24px;
  display:block;
}

/* v0.141 — Hero pill entrance bounce. The four pills under the fish
   name (tank size / sizing / region / reef-safe status) slam in from
   above with a small overshoot, staggered ~80ms each so they cascade.
   On tap they trigger a real multi-bounce via heroPillBounce — see JS
   bouncePill() helper which preserves opacity (ltcFx.jelly was clobbering
   the entrance animation's both-fill mode and making the reef-safe pill
   disappear). */
@keyframes heroPillSlamIn{
  0%   {opacity:0; transform:translateY(-22px) scale(1.18)}
  55%  {opacity:1; transform:translateY(4px)   scale(.94)}
  78%  {opacity:1; transform:translateY(-2px) scale(1.04)}
  100% {opacity:1; transform:translateY(0)     scale(1)}
}
@keyframes heroPillBounce{
  0%   {transform:translateY(0)     scale(1)}
  18%  {transform:translateY(-14px) scale(1.08, .94)}
  32%  {transform:translateY(2px)   scale(.94, 1.06)}
  46%  {transform:translateY(-9px)  scale(1.05, .96)}
  60%  {transform:translateY(1px)   scale(.97, 1.03)}
  74%  {transform:translateY(-4px)  scale(1.02, .98)}
  88%  {transform:translateY(0)     scale(1)}
  100% {transform:translateY(0)     scale(1)}
}
.modal-magazine-flow .hero-status-pills .hero-pill{
  cursor:pointer;
  animation:heroPillSlamIn .58s cubic-bezier(.34,1.2,.42,1) both;
  transition:box-shadow .15s ease;
}
.modal-magazine-flow .hero-status-pills .hero-pill:nth-child(1){animation-delay:.08s}
.modal-magazine-flow .hero-status-pills .hero-pill:nth-child(2){animation-delay:.16s}
.modal-magazine-flow .hero-status-pills .hero-pill:nth-child(3){animation-delay:.24s}
.modal-magazine-flow .hero-status-pills .hero-pill:nth-child(4){animation-delay:.32s}
.modal-magazine-flow .hero-status-pills .hero-pill:hover{
  box-shadow:0 6px 18px rgba(94,235,200,.18);
}
.modal-magazine-flow .hero-status-pills .hero-pill.bouncing{
  animation:heroPillBounce .72s cubic-bezier(.34,1.4,.42,1) !important;
  opacity:1 !important;
}

/* Similar fish row — 4 columns on desktop, 2 on tablet, scroll on mobile */
.modal-magazine-flow .mag-similar-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
@media (max-width: 900px){
  .modal-magazine-flow .mag-similar-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 540px){
  .modal-magazine-flow .mag-similar-row{
    grid-template-columns:none;
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
  }
  .modal-magazine-flow .mag-similar-row .similar-card{
    flex:0 0 70%;
    scroll-snap-align:start;
  }
}

/* Inline notice block — when a species has warnings to show */
.modal-magazine-flow .mag-notice-block{
  background:rgba(78,118,40,0.22);
  border:1px solid rgba(150,200,90,0.4);
  border-radius:14px;
  padding:16px 20px;
}
.modal-magazine-flow .mag-notice-block .mag-notice-label{
  font-size:13px;
  color:#caec96;
  text-transform:uppercase;
  letter-spacing:0.9px;
  font-weight:800;
  margin-bottom:8px;
}

/* Gallery row — sits below the hero photo if extra photos exist */
.modal-magazine-flow .mag-gallery-row{margin-top:-4px}

/* Action row at the very bottom */
.modal-magazine-flow .action-row{
  display:flex;
  gap:12px;
  margin-top:8px;
  padding-top:18px;
  border-top:1px solid rgba(120,180,220,0.14);
}

/* OVERRIDE existing two-column grid that was applied to all desktop
   modals — this rule is the foundation that makes the magazine flow
   work. Only applies when modal-magazine-flow is the body content. */
.modal-magazine-flow .modal-top-desktop,
.modal-magazine-flow .modal-layout,
.modal-magazine-flow .modal-layout-after-hero{display:block !important}

/* Hero photo card sits flush in the magazine flow */
.modal-magazine-flow .modal-hero-wide{margin-bottom:0}

/* Tighter spacing inside the magazine on mobile/tablet */
@media (max-width: 700px){
  .modal-magazine-flow{gap:18px;padding:0 4px}
  .modal-magazine-flow .mag-section-header{font-size:13px;letter-spacing:1.1px}
  .modal-magazine-flow .mag-overview p{font-size:15px}
  .modal-magazine-flow .mag-staff-note p{font-size:15px}
}

/* ============================================================


/* =============================================================
   SECTION 8 — V0.101 POPUP WIDTH OVERRIDE
   Tightens the .fish-modal to ~880px max so it fits snugly
   around the magazine content with no dead space.
   ============================================================= */
.fish-modal{
  width:min(96vw, 880px) !important;
  max-width:880px !important;
}
.fish-modal .modal-body{
  padding:56px 18px 24px !important;
}
.modal-magazine-flow{
  max-width:none !important;
  margin:0 !important;
}
@media (max-width: 920px){
  .fish-modal{width:min(98vw, 880px) !important}
  .fish-modal .modal-body{padding:56px 14px 22px !important}
}



/* =============================================================
   SECTION 9 — V0.102 QUICK FACTS + STAT CARD RECOVERY
   Adds the Quick facts top-level section and provides standalone
   .hero-stat-card rules so the stat strip is styled even when
   the .modal-hero-magazine class is on a different ancestor.
   ============================================================= */
/* V0.102 — Quick facts as a top-level section in the magazine flow.
   v0.141: full fact-card styling moved up to the friendly typography
   block; this just keeps the grid wrapper. */
.modal-magazine-flow .mag-fact-stack{
  display:grid;
  gap:12px;
}

/* V0.102 — Make sure the magazine hero CSS (which was scoped to
   .modal-hero-magazine in v0.099) actually applies in the new
   .modal-magazine-flow wrapper. v0.141.1 — rewritten for icon layout:
   left-aligned text with 50px left padding to make room for the
   absolute-positioned SVG icon. */
.modal-magazine-flow .hero-stat-card{
  position:relative;
  background:#262830;
  border:1px solid rgba(120,180,220,0.18);
  border-radius:14px;
  padding:14px 12px 14px 50px;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:84px;
}
.modal-magazine-flow .hero-stat-card label{
  display:block;
  font-size:11px;
  color:rgba(220,234,245,0.6);
  text-transform:uppercase;
  letter-spacing:0.10em;
  font-weight:800;
  line-height:1.1;
}
.modal-magazine-flow .hero-stat-card strong{
  display:block;
  margin-top:5px;
  font-size:17px;
  font-weight:900;
  color:#fff;
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
}
.modal-magazine-flow .modal-hero-statstrip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:0;
}

/* Per-card accent colors — must come AFTER the base rule above so they
   override the neutral border. Each accent paints the icon and adds a
   thicker colored left border. */
.modal-magazine-flow .hero-stat-tank{border-left:4px solid #7bcfff}
.modal-magazine-flow .hero-stat-tank .hero-stat-icon{color:#7bcfff}
.modal-magazine-flow .hero-stat-size{border-left:4px solid #5eebc8}
.modal-magazine-flow .hero-stat-size .hero-stat-icon{color:#5eebc8}
.modal-magazine-flow .hero-stat-diet{border-left:4px solid #ffcb5e}
.modal-magazine-flow .hero-stat-diet .hero-stat-icon{color:#ffcb5e}
.modal-magazine-flow .hero-stat-care{border-left:4px solid #c8b2ff}
.modal-magazine-flow .hero-stat-care .hero-stat-icon{color:#c8b2ff}

@media (max-width: 700px){
  .modal-magazine-flow .modal-hero-statstrip{grid-template-columns:repeat(2,1fr);gap:10px}
  .modal-magazine-flow .hero-stat-card{min-height:72px;padding:12px 10px 12px 46px}
  .modal-magazine-flow .hero-stat-card strong{font-size:15px}
}

/* =============================================================
   SECTION 10 — V0.094 + V0.095 MORE DETAILS COLLAPSE
   Toggleable collapse that holds the longer reading content,
   compatibility pills, foods, and water params.
   ============================================================= */
.more-details-wrap{padding:0 !important;background:transparent !important;border:none !important}
.more-details-wrap .more-details-toggle{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:linear-gradient(180deg,#2c2e36,#1c1e26);
  border:1.5px solid rgba(110,197,255,0.45);
  border-radius:14px;
  padding:18px 22px;
  cursor:pointer;
  color:#fff;
  font-family:inherit;
  text-align:left;
  transition:border-color .2s ease, transform 90ms ease;
}
.more-details-wrap .more-details-toggle:hover{border-color:rgba(110,197,255,0.78)}
.more-details-wrap .more-details-toggle:active{transform:scale(.985)}
.more-details-wrap .mdt-label{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.more-details-wrap .mdt-title{font-size:18px;font-weight:800;color:#fff;letter-spacing:.01em}
.more-details-wrap .mdt-sub{font-size:14px;color:rgba(220,234,245,0.7);font-weight:500}
.more-details-wrap .more-chev{
  font-size:24px;
  color:#6ec5ff;
  font-weight:700;
  transition:transform .25s ease;
  flex:0 0 auto;
  line-height:1;
}
.more-details-wrap.is-open .more-chev{transform:rotate(180deg)}
.more-details-wrap .more-details-content{
  display:none;
  margin-top:14px;
  padding:18px 20px 4px;
  background:linear-gradient(180deg,rgba(40,28,68,0.42),rgba(28,20,48,0.32));
  border:1px solid rgba(140,120,255,.22);
  border-radius:14px;
  animation:moreDetailsFade .35s ease both;
}
.more-details-wrap.is-open .more-details-content{display:block}
@keyframes moreDetailsFade{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .more-details-wrap .more-chev,
  .more-details-wrap .more-details-content{transition:none !important;animation:none !important}
}

/* ============================================================
   V0.095 MORE DETAILS — nested section spacing + accessibility
   font bumps. Inside the More details collapse we now hold the
   reading stack PLUS Works well with / Use caution / foods /
   water params, so the inner sections need spacing rules and
   the inherited section backgrounds need toning down so they
   don't double up against the purple collapse panel.
   ============================================================ */
.more-details-content > * + *{margin-top:14px}
.more-details-content .modal-section{
  background:rgba(11,22,34,0.45) !important;
  border:1px solid rgba(120,180,220,0.16) !important;
  border-radius:12px;
  padding:14px 18px;
}
.more-details-content .modal-section .section-title h3{
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(220,234,245,0.78);
  margin-bottom:10px;
}
.more-details-content .two-col.more-details-twocol{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.more-details-content .reading-stack{margin-bottom:0}
@media (max-width:780px){
  .more-details-content .two-col.more-details-twocol{grid-template-columns:1fr}
}

/* Accessibility: bigger gauge-scale labels (the "Very calm — Very dangerous"
   row under each gauge bar). Was 13px which is borderline for older eyes. */
.gauge-scale{font-size:15px !important;font-weight:800}
@media (max-width:600px){
  .gauge-scale{font-size:13px !important}
}

/* ============================================================


/* =============================================================
   SECTION 11 — V0.105 WATER PARAMETERS GRID + CARDS
   8-card responsive grid for the new water params section.
   The canvas inside each card is styled here.
   ============================================================= */
.modal-water .wp-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:12px;
}
@media (max-width: 680px){
  .modal-water .wp-grid{grid-template-columns:1fr;gap:10px}
}
.modal-water .wp-card{
  padding:14px 16px;
  border-radius:14px;
  background:#262830;
  border:1px solid rgba(120,180,220,.18);
}
.modal-water .wp-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:10px;
}
.modal-water .wp-name{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:#cde3f3;
}
.modal-water .wp-default{
  color:rgba(140,200,240,.4);
  font-weight:800;
  margin-left:4px;
}
.modal-water .wp-ideal{
  font-size:13px;
  font-weight:800;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.modal-water .wp-bar{
  position:relative;
  height:32px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(28,42,62,.9),rgba(14,22,34,.95));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5),inset 0 -1px 2px rgba(255,255,255,.05);
  border:1px solid rgba(120,180,220,.12);
}
.modal-water .wp-bar canvas{
  position:absolute;left:0;top:0;width:100%;height:100%;
  z-index:2;border-radius:inherit;pointer-events:none;
}
.modal-water .wp-bar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 45%);
}
.modal-water .wp-zlbl{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:10px;
  font-weight:900;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.6);
  z-index:3;
  pointer-events:none;
}
.modal-water .wp-zlbl-end{
  transform:translate(-100%,-50%);
}
.modal-water .wp-scale{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  font-size:10px;
  font-weight:700;
  color:rgba(220,234,245,.42);
}

/* ============================================================

/* ============================================================
   V0.118 GAUGE FISH MARKER VERTICAL OVERFLOW FIX
   The fish marker (54x42) is taller than the gauge track (36px
   in modal), so its top and bottom were getting clipped by the
   track's overflow:hidden. This rule lets the marker overflow
   vertically while still clipping it at the left and right
   horizontal bounds (so the fish disappears off the edge of the
   bar at 0% and 100%, like the user wants).
   The gradient bar, canvas water, and gloss highlight stay
   clipped to the rounded pill shape via their own border-radius
   (background-clip:border-box is the default), and the canvas
   element's own border-radius:inherit handles its clipping.
   ============================================================ */
.fish-modal .gauges .gauge-track,
#fishOverlay .gauges .gauge-track{
  overflow:visible !important;
  /* clip-path: clip horizontally at x=0 and x=width, allow 40px
     of vertical overflow on top and bottom for the fish */
  clip-path: inset(-40px 0 -40px 0);
}


/* ============================================================
   V0.120 STAFF HOME — hybrid layout
   Replaces the cluttered inventory workbench with a cleaner
   dashboard: stat cards, recent activity pillbox, alert strip,
   6 verb tiles, then 3 categorized accordion sections that
   tuck rare tools (food settings, export, etc.) out of sight.

   Performance notes:
   - Solid backgrounds, no gradients, no backdrop-filter
   - Minimal shadows, only on tile hover
   - Simple opacity/transform transitions only
   - Replaces ~150 DOM nodes with ~60
   ============================================================ */

.staff-home-v120{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 8px 24px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: #f4fbff;
}

/* === Top kicker row === */
.staff-home-v120 .sh-kicker-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 4px;
}
.staff-home-v120 .sh-kicker-pill{
  background: #ff8a00;
  color: #1a0d00;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 7px 13px;
  border-radius: 999px;
}
.staff-home-v120 .sh-kicker-date{
  font-size: 13px;
  font-weight: 800;
  color: rgba(220,234,248,0.55);
}

/* === Stat card row === */
.staff-home-v120 .sh-stat-row{
  /* v0.161 — bumped from 4-col to auto-fit so the row gracefully
     handles 4, 5, or 6 cards without manual breakpoints. minmax 170
     keeps each card readable, wraps to 3+3 or 2+2+2 on narrower
     screens. Position relative so the swimming fish lane behind it
     can absolute-position into this row. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}
.staff-home-v120 .sh-stat-card{
  /* v0.158 — navy → charcoal */
  background: rgba(28,30,36,0.82);
  border: 1px solid rgba(220,234,248,0.09);
  border-radius: 14px;
  padding: 14px 16px 13px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.staff-home-v120 .sh-stat-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sh-accent, rgba(220,234,248,0.35));
}
.staff-home-v120 .sh-stat-label{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(220,234,248,0.5);
  margin-bottom: 4px;
}
.staff-home-v120 .sh-stat-value{
  font-size: 28px;
  font-weight: 900;
  color: var(--sh-accent-text, #f4fbff);
  line-height: 1.05;
  margin-bottom: 2px;
}
.staff-home-v120 .sh-stat-sub{
  font-size: 11px;
  font-weight: 700;
  color: rgba(220,234,248,0.5);
}

/* Color tones — used by both stat cards and tiles */
.staff-home-v120 .sh-tone-green{ --sh-accent: #4ade80; --sh-accent-text: #4ade80; --sh-accent-bg: rgba(74,222,128,0.08); --sh-accent-border: rgba(74,222,128,0.36); }
.staff-home-v120 .sh-tone-blue{ --sh-accent: #7bcfff; --sh-accent-text: #7bcfff; --sh-accent-bg: rgba(220,234,248,0.07); --sh-accent-border: rgba(220,234,248,0.32); }
.staff-home-v120 .sh-tone-amber{ --sh-accent: #ffcb5e; --sh-accent-text: #ffcb5e; --sh-accent-bg: rgba(255,200,80,0.07); --sh-accent-border: rgba(255,200,80,0.36); }
.staff-home-v120 .sh-tone-purple{ --sh-accent: #c8b2ff; --sh-accent-text: #c8b2ff; --sh-accent-bg: rgba(180,130,255,0.07); --sh-accent-border: rgba(180,130,255,0.34); }
.staff-home-v120 .sh-tone-red{ --sh-accent: #ff9a8a; --sh-accent-text: #ff9a8a; --sh-accent-bg: rgba(220,90,90,0.07); --sh-accent-border: rgba(220,90,90,0.34); }
.staff-home-v120 .sh-tone-gray{ --sh-accent: #b0c4d8; --sh-accent-text: #b0c4d8; --sh-accent-bg: rgba(176,196,216,0.06); --sh-accent-border: rgba(176,196,216,0.24); }
/* v0.161 — added stat-row tones not present in earlier blocks */
.staff-home-v120 .sh-tone-cyan{ --sh-accent: #5ed4dc; --sh-accent-text: #5ed4dc; --sh-accent-bg: rgba(94,212,220,0.08); --sh-accent-border: rgba(94,212,220,0.34); }
.staff-home-v120 .sh-tone-rose{ --sh-accent: #ff9bb6; --sh-accent-text: #ff9bb6; --sh-accent-bg: rgba(255,155,182,0.08); --sh-accent-border: rgba(255,155,182,0.36); }

/* v0.162 — Stat cards are now <button> elements. Base button reset
   + tappable affordance. Text alignment left, font inheritance from
   parent, cursor pointer. Maintains the same visual as the old div
   version but lets us attach onclick handlers and gives users a
   proper button semantic. */
.staff-home-v120 .sh-stat-card-btn{
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  transition: transform .18s cubic-bezier(.34,1.2,.42,1),
              border-color .22s ease,
              box-shadow .25s ease;
}
.staff-home-v120 .sh-stat-card-btn:hover{
  border-color: var(--sh-accent-border, rgba(220,234,248,0.22));
  box-shadow: 0 0 0 1px var(--sh-accent-border, rgba(220,234,248,0.18)),
              0 4px 14px rgba(0,0,0,0.3);
}
.staff-home-v120 .sh-stat-card-btn:active{
  transform: scale(0.97);
}

/* v0.162 — Reaction overlay base. An absolutely positioned transient
   element spawned by statCardReact() on top of the clicked card.
   Does not affect card layout. The specific .sr-* type class drives
   the animation. Auto-removed by JS after ~1.8s. */
.staff-home-v120 .sh-stat-card-btn .sr-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}
.staff-home-v120 .sh-stat-card-btn .sr-overlay svg,
.staff-home-v120 .sh-stat-card-btn .sr-overlay > div{
  width: 60%;
  height: 60%;
  max-width: 90px;
  max-height: 60px;
}

/* --- dollar: three $ symbols float up, fade, stagger --- */
.staff-home-v120 .sr-dollar .sr-glyph{
  position: absolute;
  font-size: 34px;
  font-weight: 900;
  color: #4ade80;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 16px rgba(74,222,128,0.6);
  animation: srDollarFloat 1.4s cubic-bezier(.2,.6,.3,1) forwards;
  opacity: 0;
}
.staff-home-v120 .sr-dollar .sr-dollar-1{ left:30%; animation-delay:0s }
.staff-home-v120 .sr-dollar .sr-dollar-2{ left:50%; animation-delay:.12s; font-size:28px }
.staff-home-v120 .sr-dollar .sr-dollar-3{ left:62%; animation-delay:.24s; font-size:24px }
@keyframes srDollarFloat{
  0%   { transform: translateY(20px) scale(0.6); opacity: 0 }
  15%  { transform: translateY(10px) scale(1.1); opacity: 1 }
  60%  { transform: translateY(-30px) scale(1); opacity: 0.8 }
  100% { transform: translateY(-60px) scale(0.7); opacity: 0 }
}

/* --- pen: notepad appears, pen scribbles, both fade --- */
.staff-home-v120 .sr-pen svg{
  animation: srPenPop 1.6s ease-out forwards;
  opacity: 0;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
}
.staff-home-v120 .sr-pen svg .sr-pen-scribble{
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: srPenScribble 1.2s ease-out forwards .2s;
}
.staff-home-v120 .sr-pen svg .sr-pen-body{
  transform-origin: 14px 32px;
  animation: srPenWrite 1.2s ease-in-out forwards .2s;
}
@keyframes srPenPop{
  0%   { transform: scale(0.6) rotate(-8deg); opacity: 0 }
  15%  { transform: scale(1.05) rotate(0deg); opacity: 1 }
  75%  { transform: scale(1) rotate(0deg); opacity: 1 }
  100% { transform: scale(0.95) rotate(3deg); opacity: 0 }
}
@keyframes srPenScribble{
  to { stroke-dashoffset: 0 }
}
@keyframes srPenWrite{
  0%   { transform: translate(-8px, 4px) rotate(-6deg) }
  25%  { transform: translate(2px, -2px) rotate(2deg) }
  50%  { transform: translate(12px, 2px) rotate(-4deg) }
  75%  { transform: translate(22px, -2px) rotate(2deg) }
  100% { transform: translate(32px, 0) rotate(0deg) }
}

/* --- fish: small fish wiggles past the card --- */
.staff-home-v120 .sr-fish svg{
  animation: srFishWiggle 1.5s ease-in-out forwards;
  opacity: 0;
}
@keyframes srFishWiggle{
  0%   { transform: translateX(-50px) scale(0.7) skewX(-8deg); opacity: 0 }
  15%  { transform: translateX(-20px) scale(1) skewX(8deg); opacity: 1 }
  30%  { transform: translateX(0) scale(1) skewX(-8deg); opacity: 1 }
  45%  { transform: translateX(20px) scale(1) skewX(8deg); opacity: 1 }
  60%  { transform: translateX(40px) scale(1) skewX(-6deg); opacity: 0.8 }
  100% { transform: translateX(70px) scale(0.8) skewX(0deg); opacity: 0 }
}

/* --- box: box drops from top, lid pops, splash sprays --- */
.staff-home-v120 .sr-box .sr-box-wrap{
  position: relative;
  width: 70px;
  height: 60px;
}
.staff-home-v120 .sr-box .sr-box{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 34px;
  margin-left: -23px;
  margin-top: -17px;
  animation: srBoxDrop 1.0s cubic-bezier(.5,1.8,.5,1) forwards;
  opacity: 0;
}
.staff-home-v120 .sr-box .sr-box-body{
  position: absolute;
  left: 0; right: 0; top: 6px; bottom: 0;
  background: linear-gradient(180deg, #b07a3c 0%, #8a5824 100%);
  border: 1.5px solid #5a3a14;
  border-radius: 2px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.25);
}
.staff-home-v120 .sr-box .sr-box-lid{
  position: absolute;
  left: -2px; right: -2px; top: 0;
  height: 8px;
  background: linear-gradient(180deg, #c89454 0%, #9c6c30 100%);
  border: 1.5px solid #5a3a14;
  border-radius: 2px;
  transform-origin: left center;
  animation: srBoxLidFlip 1.4s cubic-bezier(.4,1.5,.5,1) forwards .35s;
}
.staff-home-v120 .sr-box .sr-splash{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(220,234,248,0.6) 60%, rgba(120,200,255,0));
  border: 1px solid rgba(255,255,255,0.5);
  opacity: 0;
  animation: srBoxSplash 1.0s ease-out forwards .55s;
}
.staff-home-v120 .sr-box .sr-splash-1{ --sx: -28px; --sy: -22px }
.staff-home-v120 .sr-box .sr-splash-2{ --sx: 26px;  --sy: -24px; animation-delay: .6s }
.staff-home-v120 .sr-box .sr-splash-3{ --sx: -24px; --sy: 10px; animation-delay: .65s }
.staff-home-v120 .sr-box .sr-splash-4{ --sx: 30px;  --sy: 6px; animation-delay: .7s }
@keyframes srBoxDrop{
  0%   { transform: translateY(-40px) scale(.9); opacity: 0 }
  30%  { transform: translateY(-20px) scale(.95); opacity: 1 }
  55%  { transform: translateY(4px) scale(1.05, 0.9); opacity: 1 }
  70%  { transform: translateY(-2px) scale(.98, 1.02); opacity: 1 }
  100% { transform: translateY(0) scale(1); opacity: 1 }
}
@keyframes srBoxLidFlip{
  0%   { transform: rotate(0deg); opacity: 1 }
  30%  { transform: rotate(-85deg) translateY(-3px); opacity: 1 }
  70%  { transform: rotate(-85deg) translateY(-3px); opacity: 1 }
  100% { transform: rotate(-85deg) translateY(-3px); opacity: 0 }
}
@keyframes srBoxSplash{
  0%   { transform: translate(0, 0) scale(.3); opacity: 0 }
  20%  { transform: translate(calc(var(--sx) * 0.4), calc(var(--sy) * 0.4)) scale(1); opacity: 1 }
  100% { transform: translate(var(--sx), var(--sy)) scale(.5); opacity: 0 }
}

/* --- warn: caution sign pops in with a double-bounce --- */
.staff-home-v120 .sr-warn svg{
  animation: srWarnPop 1.5s cubic-bezier(.4,1.6,.5,1) forwards;
  opacity: 0;
  filter: drop-shadow(0 3px 10px rgba(255,203,94,0.55));
}
@keyframes srWarnPop{
  0%   { transform: scale(0.2) rotate(-20deg); opacity: 0 }
  15%  { transform: scale(1.2) rotate(5deg); opacity: 1 }
  25%  { transform: scale(0.95) rotate(-3deg); opacity: 1 }
  35%  { transform: scale(1.05) rotate(2deg); opacity: 1 }
  45%  { transform: scale(1) rotate(0deg); opacity: 1 }
  80%  { transform: scale(1) rotate(0deg); opacity: 1 }
  100% { transform: scale(0.9) rotate(0deg); opacity: 0 }
}

/* --- register: digits click/scroll like a cash register --- */
.staff-home-v120 .sr-register .sr-register-digits{
  display: flex;
  gap: 4px;
  font-family: "Courier New", monospace;
  font-size: 32px;
  font-weight: 900;
  color: #c8b2ff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 14px rgba(180,130,255,0.5);
  opacity: 0;
  animation: srRegisterFade 1.6s ease-out forwards;
}
.staff-home-v120 .sr-register .sr-digit{
  display: inline-block;
  min-width: 20px;
  text-align: center;
  animation: srRegisterClick 1.4s steps(10, end) forwards;
}
.staff-home-v120 .sr-register .sr-digit:nth-child(1){ animation-delay: 0s }
.staff-home-v120 .sr-register .sr-digit:nth-child(2){ animation-delay: .1s }
.staff-home-v120 .sr-register .sr-digit:nth-child(3){ animation-delay: .2s }
.staff-home-v120 .sr-register .sr-digit:nth-child(4){ animation-delay: .3s }
@keyframes srRegisterFade{
  0%   { opacity: 0; transform: translateY(10px) }
  15%  { opacity: 1; transform: translateY(0) }
  80%  { opacity: 1 }
  100% { opacity: 0; transform: translateY(-10px) }
}
@keyframes srRegisterClick{
  0%   { content: "9" }
  100% { transform: translateY(0) }
}

/* ═══════════════════════════════════════════════════════════════════
   v0.183 — three new stat tile reactions: treasure, clock, heart.
   Each is unique to its tile so the 8 tiles all have distinct
   graphics. Uses design tokens for any palette references.
   ═══════════════════════════════════════════════════════════════════ */

/* --- treasure: stock value tile. Gold bar tumbles in, then silver
       bar, then a diamond pops with sparkles. Total ~1.6s. --- */
.staff-home-v120 .sr-treasure .sr-treasure-wrap{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.staff-home-v120 .sr-treasure svg{
  position: absolute;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}
.staff-home-v120 .sr-treasure .sr-gold-bar{
  width: 56px; height: 26px;
  left: 18%; top: 30%;
  opacity: 0;
  transform: translateY(-30px) rotate(-12deg);
  animation: srGoldDrop 1.6s cubic-bezier(.34,1.5,.42,1) forwards;
}
.staff-home-v120 .sr-treasure .sr-silver-bar{
  width: 56px; height: 26px;
  right: 18%; top: 50%;
  opacity: 0;
  transform: translateY(-30px) rotate(8deg);
  animation: srSilverDrop 1.6s cubic-bezier(.34,1.5,.42,1) .18s forwards;
}
.staff-home-v120 .sr-treasure .sr-diamond{
  width: 38px; height: 38px;
  left: 50%; top: 30%;
  margin-left: -19px;
  opacity: 0;
  transform: scale(0.2) rotate(0deg);
  animation: srDiamondPop 1.4s cubic-bezier(.34,1.8,.42,1) .42s forwards;
}
.staff-home-v120 .sr-treasure .sr-sparkle{
  position: absolute;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.95), 0 0 16px rgba(200,232,255,0.85);
  opacity: 0;
  pointer-events: none;
  animation: srSparkle 1.0s ease-out forwards;
}
.staff-home-v120 .sr-treasure .sr-sparkle-1{ left: 30%; top: 18%; animation-delay: .55s; }
.staff-home-v120 .sr-treasure .sr-sparkle-2{ right: 26%; top: 22%; animation-delay: .68s; }
.staff-home-v120 .sr-treasure .sr-sparkle-3{ left: 48%; top: 64%; animation-delay: .80s; }
@keyframes srGoldDrop{
  0%   { opacity: 0; transform: translateY(-40px) rotate(-12deg); }
  20%  { opacity: 1; }
  55%  { transform: translateY(4px) rotate(-3deg); }
  70%  { transform: translateY(-2px) rotate(-3deg); }
  85%  { transform: translateY(0) rotate(-3deg); opacity: 1; }
  100% { transform: translateY(0) rotate(-3deg); opacity: 0; }
}
@keyframes srSilverDrop{
  0%   { opacity: 0; transform: translateY(-40px) rotate(8deg); }
  20%  { opacity: 1; }
  55%  { transform: translateY(4px) rotate(2deg); }
  70%  { transform: translateY(-2px) rotate(2deg); }
  85%  { transform: translateY(0) rotate(2deg); opacity: 1; }
  100% { transform: translateY(0) rotate(2deg); opacity: 0; }
}
@keyframes srDiamondPop{
  0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
  35%  { opacity: 1; transform: scale(1.25) rotate(8deg); }
  55%  { transform: scale(0.95) rotate(-4deg); }
  75%  { transform: scale(1.05) rotate(2deg); opacity: 1; }
  100% { transform: scale(1.0) rotate(0deg); opacity: 0; }
}
@keyframes srSparkle{
  0%   { opacity: 0; transform: scale(0.4); }
  30%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(0.6) translateY(-10px); }
}

/* --- clock: oldest in stock tile. Clock face with hour and minute
       hands spinning backwards (rewinding through time). --- */
.staff-home-v120 .sr-clock .sr-clock-svg{
  width: 60px; height: 60px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
  opacity: 0;
  animation: srClockFade 1.6s ease-out forwards;
}
.staff-home-v120 .sr-clock .sr-clock-hour{
  transform-origin: 30px 30px;
  animation: srClockHourRewind 1.4s cubic-bezier(.34,1.2,.42,1) forwards;
}
.staff-home-v120 .sr-clock .sr-clock-min{
  transform-origin: 30px 30px;
  animation: srClockMinRewind 1.4s cubic-bezier(.34,1.2,.42,1) forwards;
}
@keyframes srClockFade{
  0%   { opacity: 0; transform: scale(0.5) rotate(-30deg); }
  20%  { opacity: 1; transform: scale(1.0) rotate(0deg); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.0) rotate(0deg); }
}
@keyframes srClockHourRewind{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-540deg); }
}
@keyframes srClockMinRewind{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-1800deg); }
}

/* --- heart: customer holds tile. Three pink hearts pop and float
       upward at staggered intervals. --- */
.staff-home-v120 .sr-heart .sr-heart-wrap{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.staff-home-v120 .sr-heart svg{
  position: absolute;
  width: 36px; height: 32px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 8px rgba(255,140,170,0.5));
  opacity: 0;
}
.staff-home-v120 .sr-heart .sr-heart-1{
  left: 30%; top: 50%; margin-top: -16px;
  animation: srHeartFloat 1.6s cubic-bezier(.34,1.4,.42,1) forwards;
}
.staff-home-v120 .sr-heart .sr-heart-2{
  left: 50%; top: 50%; margin-top: -16px; margin-left: -18px;
  animation: srHeartFloat 1.6s cubic-bezier(.34,1.4,.42,1) .15s forwards;
}
.staff-home-v120 .sr-heart .sr-heart-3{
  right: 30%; top: 50%; margin-top: -16px;
  animation: srHeartFloat 1.6s cubic-bezier(.34,1.4,.42,1) .30s forwards;
}
@keyframes srHeartFloat{
  0%   { opacity: 0; transform: scale(0.2) translateY(0); }
  15%  { opacity: 1; transform: scale(1.3) translateY(-2px); }
  30%  { transform: scale(0.95) translateY(-4px); }
  45%  { transform: scale(1.1) translateY(-8px); }
  100% { opacity: 0; transform: scale(1.0) translateY(-30px); }
}

/* Respect reduced motion for all reactions */
@media (prefers-reduced-motion: reduce){
  .staff-home-v120 .sh-stat-card-btn .sr-overlay{ display: none; }
}

/* v0.162 — Pufferfish ambient animation behind the stat row.
   Replaces v0.161 generic fish. The puffer:
   - Phase 1: swims in from left, small (scale 0.45)
   - Phase 2: stops, puffs up to scale 1.0
   - Phase 3: deflates, swims further right small
   - Phase 4: stops, puffs up bigger (scale 1.15)
   - Phase 5: deflates, drifts up and out
   Total cycle: 22 seconds (16s active + 6s pause off-screen).
   Bubbles shoot AHEAD of the fish (not behind) at varying speeds
   so the cluster stays denser near the fish and spreads out as
   they travel. */
.staff-home-v120 .sh-fish-lane{
  position: absolute;
  left: 8px;
  right: 8px;
  height: 64px;
  margin-top: 8px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.staff-home-v120 .sh-puff-swimmer{
  position: absolute;
  /* v0.170 — Completely rebuilt as a JS-triggered one-shot animation.
     The infinite-loop approach (v0.162-v0.169) had a timing race
     where the animationiteration event sometimes fired during a
     visible portion of the cycle, causing visible teleports. Now JS
     fully controls the lifecycle: set random Y → add .is-swimming
     class → animation runs once → animationend fires → JS waits a
     few seconds → repeat. There is NO cycle boundary, NO continuous
     loop, and NO chance of mid-animation interference. */
  top: 50%;
  left: -90px;
  width: 64px;
  height: 50px;
  transform: translateY(calc(-50% + var(--puff-yshift, 0px)));
  opacity: 0;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45)) drop-shadow(0 0 10px rgba(255,180,80,0.25));
}
.staff-home-v120 .sh-puff-swimmer.is-swimming{
  animation: shPuffSwim 30s cubic-bezier(.45,.05,.55,.95) 1 forwards;
}
.staff-home-v120 .sh-puff-swimmer svg{
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* v0.170 — Body group puff animation also one-shot, triggered by
   parent class. transform-origin centered so the spikes radiate
   outward symmetrically. */
.staff-home-v120 .sh-puff-swimmer .puff-body{
  transform-box: fill-box;
  transform-origin: center center;
  transform: scale(0.45);
}
.staff-home-v120 .sh-puff-swimmer.is-swimming .puff-body{
  animation: shPuffSize 30s cubic-bezier(.4,0,.2,1) 1 forwards;
}
/* Tail wags lightly while the fish is moving */
.staff-home-v120 .sh-puff-swimmer .puff-tail{
  transform-box: fill-box;
  transform-origin: 100% 50%;
}
.staff-home-v120 .sh-puff-swimmer.is-swimming .puff-tail{
  animation: shPuffTailWag .55s ease-in-out infinite;
}

/* v0.169 — Fish position keyframe. Each pass is now a STRAIGHT
   HORIZONTAL line at a fixed vertical baseline. The vertical
   randomization happens between passes via the inline transform's
   `--puff-yshift` variable (set by JS on animationiteration). This
   matches Chris's intent: "finish across screen in one location
   then start at another location when it comes back in." The
   v0.167 within-cycle vertical curve was reading as a teleport
   because the puffer was clearly moving up and down WHILE
   traversing horizontally — not what real fish do at this scale. */
@keyframes shPuffSwim{
  0%   { left: -90px; opacity: 0 }
  6%   { left: -40px; opacity: 1 }
  /* swim in to first puff stop */
  18%  { left: 22%;   opacity: 1 }
  /* hold while puffing */
  30%  { left: 22%;   opacity: 1 }
  /* swim to second puff stop */
  44%  { left: 58%;   opacity: 1 }
  /* hold while puffing again */
  56%  { left: 58%;   opacity: 1 }
  /* drift toward exit */
  70%  { left: 92%;   opacity: 1 }
  78%  { left: 110%;  opacity: 0 }
  100% { left: 110%;  opacity: 0 }
}
/* Body scale keyframe — synced with the swim cycle. Small while
   moving, puffs up at the two stops. */
@keyframes shPuffSize{
  0%, 3%   { transform: scale(0.45) }
  16%      { transform: scale(0.5) }
  18%      { transform: scale(0.95) }   /* puff up */
  21%      { transform: scale(1.0) }     /* fully puffed */
  28%      { transform: scale(1.0) }     /* hold puffed */
  30%      { transform: scale(0.55) }    /* deflate */
  44%      { transform: scale(0.55) }
  46%      { transform: scale(1.05) }    /* puff up bigger */
  50%      { transform: scale(1.15) }
  56%      { transform: scale(1.15) }    /* hold */
  60%      { transform: scale(0.5) }     /* deflate */
  74%, 100%{ transform: scale(0.4) }
}
@keyframes shPuffTailWag{
  0%, 100% { transform: skewY(-6deg) }
  50%      { transform: skewY(6deg) }
}

/* Bubbles ahead of the fish — children of the swimmer wrapper so
   they inherit the fish's animated `left` position. Each bubble's
   own animation translates it RIGHT (forward, ahead of the fish)
   and slightly UP, then fades. Different durations + delays create
   the density falloff: dense near the fish (fast cycles, low offsets),
   sparse further out (slow cycles, high offsets that travel further). */
.staff-home-v120 .sh-puff-bubble{
  position: absolute;
  top: 50%;
  /* Start position: right edge of the fish (around the mouth area).
     The fish svg is 70px wide, mouth is around x=58. */
  left: 56px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.9),
    rgba(180,230,255,0.55) 50%,
    rgba(140,220,255,0) 80%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 0 4px rgba(160,220,255,0.55);
  pointer-events: none;
  transform: translate(0, -50%) scale(0);
  opacity: 0;
}
/* Each bubble: translateX moves it ahead (positive X = right of the
   fish's mouth). Density is higher near the fish (small offsets,
   fast cycles) and falls off as bubbles travel further (larger
   offsets, slower cycles). */
.staff-home-v120 .sh-puff-bubble-1{
  width:5px; height:5px;
  animation: shPuffBubbleAhead 1.8s ease-out infinite;
  animation-delay: 0s;
}
.staff-home-v120 .sh-puff-bubble-2{
  width:4px; height:4px;
  animation: shPuffBubbleAhead 2.1s ease-out infinite;
  animation-delay: 0.35s;
}
.staff-home-v120 .sh-puff-bubble-3{
  width:6px; height:6px;
  animation: shPuffBubbleAhead 2.6s ease-out infinite;
  animation-delay: 0.7s;
}
.staff-home-v120 .sh-puff-bubble-4{
  width:4px; height:4px;
  animation: shPuffBubbleAhead 2.0s ease-out infinite;
  animation-delay: 1.1s;
}
.staff-home-v120 .sh-puff-bubble-5{
  width:5px; height:5px;
  animation: shPuffBubbleAhead 2.4s ease-out infinite;
  animation-delay: 1.5s;
}
.staff-home-v120 .sh-puff-bubble-6{
  width:3px; height:3px;
  animation: shPuffBubbleAhead 1.9s ease-out infinite;
  animation-delay: 1.9s;
}
@keyframes shPuffBubbleAhead{
  0%   { transform: translate(0, -50%) scale(0); opacity: 0 }
  10%  { transform: translate(2px, -50%) scale(1); opacity: 0.85 }
  35%  { transform: translate(18px, calc(-50% - 4px)) scale(0.95); opacity: 0.75 }
  65%  { transform: translate(34px, calc(-50% - 10px)) scale(0.85); opacity: 0.55 }
  90%  { transform: translate(48px, calc(-50% - 16px)) scale(0.6); opacity: 0.2 }
  100% { transform: translate(56px, calc(-50% - 20px)) scale(0.4); opacity: 0 }
}
@media (max-width: 600px){
  .staff-home-v120 .sh-fish-lane{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .staff-home-v120 .sh-puff-swimmer,
  .staff-home-v120 .sh-puff-swimmer .puff-body,
  .staff-home-v120 .sh-puff-swimmer .puff-tail,
  .staff-home-v120 .sh-puff-bubble{ animation: none; opacity: 0; }
}

/* === Pill row (recent + alert) === */
.staff-home-v120 .sh-pill-row{
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.staff-home-v120 .sh-recent-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(22,24,30,0.7);
  border: 1px solid rgba(220,234,248,0.18);
  color: rgba(220,234,248,0.85);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 9px 14px 9px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
  flex-shrink: 0;
}
.staff-home-v120 .sh-recent-pill:hover{
  border-color: rgba(220,234,248,0.42);
  background: rgba(46,48,56,0.5);
}
.staff-home-v120 .sh-recent-pill svg{
  color: rgba(220,234,248,0.55);
  flex-shrink: 0;
}
.staff-home-v120 .sh-recent-pill-count{
  background: rgba(220,234,248,0.18);
  color: #7bcfff;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 2px;
}
.staff-home-v120 .sh-recent-pill-chev{
  font-size: 9px;
  color: rgba(220,234,248,0.5);
  margin-left: 2px;
  transition: transform 200ms;
  display: inline-block;
}
.staff-home-v120 .sh-recent-pill.sh-is-open .sh-recent-pill-chev{
  transform: rotate(180deg);
}

/* === Alert strip === */
.staff-home-v120 .sh-alert-strip{
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,200,80,0.08);
  border: 1px solid rgba(255,200,80,0.36);
  border-left: 4px solid #ffcb5e;
  border-radius: 12px;
  padding: 10px 14px;
}
.staff-home-v120 .sh-alert-icon{
  color: #ffcb5e;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.staff-home-v120 .sh-alert-text{
  flex: 1;
  min-width: 0;
}
.staff-home-v120 .sh-alert-text strong{
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: #ffcb5e;
  margin-bottom: 1px;
}
.staff-home-v120 .sh-alert-text span{
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(220,234,248,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff-home-v120 .sh-alert-btn{
  background: rgba(255,200,80,0.15);
  color: #ffcb5e;
  border: 1px solid rgba(255,200,80,0.42);
  font-family: inherit;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms;
}
.staff-home-v120 .sh-alert-btn:hover{ background: rgba(255,200,80,0.24); }

/* === Recent activity expandable panel === */
.staff-home-v120 .sh-recent-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease, margin-top 240ms ease, padding 240ms ease;
  margin-top: 0;
  padding: 0 14px;
  background: rgba(22,24,30,0.7);
  border: 1px solid rgba(220,234,248,0.12);
  border-radius: 14px;
  margin-bottom: 0;
}
.staff-home-v120 .sh-recent-panel.sh-open{
  max-height: 560px;
  margin-top: 10px;
  padding: 10px 14px 10px;
  margin-bottom: 6px;
}
.staff-home-v120 .sh-activity-row{
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(220,234,248,0.08);
  padding: 9px 4px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms;
}
.staff-home-v120 .sh-activity-row:hover{ background: rgba(220,234,248,0.06); }
.staff-home-v120 .sh-activity-row:last-of-type{ border-bottom: none; }
.staff-home-v120 .sh-activity-time{
  font-size: 11px;
  font-weight: 800;
  color: rgba(220,234,248,0.5);
}
.staff-home-v120 .sh-activity-name{
  font-size: 13px;
  font-weight: 900;
  color: #f4fbff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff-home-v120 .sh-activity-action{
  font-size: 11px;
  font-weight: 800;
  color: #7bcfff;
  background: rgba(220,234,248,0.12);
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: lowercase;
}
.staff-home-v120 .sh-recent-empty{
  font-size: 12px;
  color: rgba(220,234,248,0.5);
  padding: 16px 4px;
  text-align: center;
  font-weight: 700;
}
.staff-home-v120 .sh-recent-more{
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(220,234,248,0.22);
  color: rgba(220,234,248,0.78);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 9px;
  border-radius: 10px;
  margin-top: 8px;
  cursor: pointer;
  transition: border-color 160ms, color 160ms;
}
.staff-home-v120 .sh-recent-more:hover{
  border-color: rgba(220,234,248,0.5);
  color: #7bcfff;
}

/* === Section labels === */
.staff-home-v120 .sh-section-label{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: rgba(220,234,248,0.45);
  margin: 22px 4px 11px;
}

/* === Verb tile grid === */
.staff-home-v120 .sh-tile-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}
.staff-home-v120 .sh-tile{
  background: var(--sh-accent-bg);
  border: 1px solid var(--sh-accent-border);
  border-radius: 18px;
  padding: 20px 16px 18px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: #f4fbff;
  transition: transform 140ms ease, border-color 160ms, background 160ms;
  position: relative;
  overflow: hidden;
}
.staff-home-v120 .sh-tile:hover{
  transform: translateY(-2px);
  border-color: var(--sh-accent);
}
.staff-home-v120 .sh-tile:active{ transform: translateY(0); }
.staff-home-v120 .sh-tile-icon{
  color: var(--sh-accent);
  margin-bottom: 12px;
  display: block;
}
.staff-home-v120 .sh-tile-title{
  font-size: 17px;
  font-weight: 900;
  color: #f4fbff;
  margin-bottom: 4px;
}
.staff-home-v120 .sh-tile-sub{
  font-size: 12px;
  font-weight: 700;
  color: rgba(220,234,248,0.55);
}

/* === Accordion sections === */
.staff-home-v120 .sh-accordion{
  background: rgba(22,24,30,0.7);
  border: 1px solid rgba(220,234,248,0.14);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}
.staff-home-v120 .sh-accordion-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 140ms;
}
.staff-home-v120 .sh-accordion-head:hover{ background: rgba(220,234,248,0.06); }
.staff-home-v120 .sh-accordion-title strong{
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: #f4fbff;
  margin-bottom: 2px;
}
.staff-home-v120 .sh-accordion-title span{
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(220,234,248,0.5);
}
.staff-home-v120 .sh-accordion-chev{
  font-size: 22px;
  font-weight: 900;
  color: rgba(220,234,248,0.4);
  transition: transform 200ms;
  flex-shrink: 0;
  margin-left: 12px;
}
.staff-home-v120 .sh-accordion-head.sh-is-open .sh-accordion-chev{
  transform: rotate(90deg);
  color: #7bcfff;
}
.staff-home-v120 .sh-accordion-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease, padding 240ms ease;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.staff-home-v120 .sh-accordion-body.sh-open{
  max-height: 600px;
  padding: 4px 16px 14px;
}
.staff-home-v120 .sh-acc-btn{
  background: rgba(46,48,56,0.4);
  border: 1px solid rgba(220,234,248,0.18);
  color: rgba(220,234,248,0.85);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms, background 160ms, color 160ms;
}
.staff-home-v120 .sh-acc-btn:hover{
  border-color: rgba(220,234,248,0.5);
  background: rgba(46,48,56,0.7);
  color: #f4fbff;
}
.staff-home-v120 .sh-acc-btn-danger{
  background: rgba(220,90,90,0.08);
  border-color: rgba(220,90,90,0.3);
  color: #ff9a8a;
}
.staff-home-v120 .sh-acc-btn-danger:hover{
  background: rgba(220,90,90,0.16);
  border-color: rgba(220,90,90,0.5);
  color: #ffb5a5;
}
.staff-home-v120 .sh-acc-hint{
  font-size: 11px;
  font-weight: 700;
  color: rgba(220,234,248,0.42);
  font-style: italic;
  padding: 6px 4px 0;
  line-height: 1.5;
}

/* === Responsive — narrower screens === */
@media (max-width: 760px){
  .staff-home-v120 .sh-stat-row{ grid-template-columns: repeat(2, 1fr); }
  .staff-home-v120 .sh-tile-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .staff-home-v120 .sh-stat-row{ grid-template-columns: 1fr 1fr; }
  .staff-home-v120 .sh-tile-grid{ grid-template-columns: 1fr; }
  .staff-home-v120 .sh-stat-value{ font-size: 24px; }
}


/* ============================================================
   V0.121 STAFF HOME — visual polish + drop dev tools
   - Drops import/export/reset (dev-only, hidden from staff)
   - Drops 3 accordions in favor of single icon-circle row
   - Adds colored action dots in activity rows
   - Adds small section dividers with colored markers
   - Friendlier tile wording (handled in JS template)
   ============================================================ */

/* === Section label upgrade — small colored dot + uppercase === */
.staff-home-v120 .sh-section-label{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: rgba(220,234,248,0.6);
  margin: 22px 4px 12px;
}
/* v0.157 — secondary section label (MORE TOOLS). Dimmer + more
   vertical space above it so the eye reads the primary section
   first and only drops down to More Tools after. */
.staff-home-v120 .sh-section-label-secondary{
  color: rgba(220,234,248,0.38);
  font-size: 10px;
  margin-top: 32px;
}
.staff-home-v120 .sh-section-dot{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5eebc8;
  box-shadow: 0 0 0 3px rgba(94,235,200,0.2);
  flex-shrink: 0;
}
.staff-home-v120 .sh-section-dot-blue{
  background: #7bcfff;
  box-shadow: 0 0 0 3px rgba(220,234,248,0.2);
}

/* === Recent activity row — add color dot column === */
.staff-home-v120 .sh-activity-row{
  display: grid;
  grid-template-columns: 14px 90px 1fr auto;
  gap: 12px;
  align-items: center;
}
.staff-home-v120 .sh-activity-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(176,196,216,0.5);
}
.staff-home-v120 .sh-act-green{ background: #5eebc8; color: #5eebc8; }
.staff-home-v120 .sh-act-red{ background: #ff9a8a; color: #ff9a8a; }
.staff-home-v120 .sh-act-blue{ background: #7bcfff; color: #7bcfff; }
.staff-home-v120 .sh-act-purple{ background: #c8b2ff; color: #c8b2ff; }
.staff-home-v120 .sh-act-amber{ background: #ffcb5e; color: #ffcb5e; }
.staff-home-v120 .sh-act-cyan{ background: #5ee0ff; color: #5ee0ff; }
.staff-home-v120 .sh-act-rose{ background: #ff9bb6; color: #ff9bb6; }
.staff-home-v120 .sh-act-gray{ background: #b0c4d8; color: #b0c4d8; }

/* The action pill on the right uses the color from sh-act-* but
   needs a tinted background instead of solid. Override here. */
.staff-home-v120 .sh-activity-action.sh-act-green{ background: rgba(94,235,200,0.14); }
.staff-home-v120 .sh-activity-action.sh-act-red{ background: rgba(220,90,90,0.14); }
.staff-home-v120 .sh-activity-action.sh-act-blue{ background: rgba(220,234,248,0.14); }
.staff-home-v120 .sh-activity-action.sh-act-purple{ background: rgba(180,130,255,0.14); }
.staff-home-v120 .sh-activity-action.sh-act-amber{ background: rgba(255,200,80,0.16); }
.staff-home-v120 .sh-activity-action.sh-act-cyan{ background: rgba(94,224,255,0.14); }
.staff-home-v120 .sh-activity-action.sh-act-rose{ background: rgba(255,155,182,0.14); }
.staff-home-v120 .sh-activity-action.sh-act-gray{ background: rgba(176,196,216,0.12); }

/* === More tools row — circular icon buttons === */
.staff-home-v120 .sh-more-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 8px;
  /* v0.157 — More tools is secondary, push it down from the primary
     tile grid so the eye reads "what needs doing" first. */
  margin-top: 8px;
  opacity: 0.78;
}
.staff-home-v120 .sh-more-row:hover{ opacity: 1; transition: opacity 200ms ease; }
.staff-home-v120 .sh-circle-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* v0.157 — dimmer background than primary tiles */
  background: rgba(22,24,30,0.42);
  border: 1px solid rgba(220,234,248,0.10);
  border-radius: 14px;
  /* Tighter padding to visually shrink the whole circle button */
  padding: 13px 10px 12px;
  cursor: pointer;
  font-family: inherit;
  color: rgba(244,251,255,0.88);
  transition: transform 140ms ease, border-color 160ms, background 160ms;
}
.staff-home-v120 .sh-circle-btn:hover{
  transform: translateY(-2px);
  border-color: var(--sh-accent);
  background: rgba(46,48,56,0.55);
}
.staff-home-v120 .sh-circle-btn:active{ transform: translateY(0); }
.staff-home-v120 .sh-circle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* v0.157 — shrunk from 60 → 44 so the circles don't compete
     with the primary tile icons above */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sh-accent-bg);
  border: 1.5px solid var(--sh-accent-border);
  color: var(--sh-accent);
  flex-shrink: 0;
}
.staff-home-v120 .sh-circle svg{
  /* v0.157 — match the smaller circle */
  width: 20px;
  height: 20px;
}
.staff-home-v120 .sh-circle-label{
  display: block;
  /* v0.157 — smaller + softer to read as secondary */
  font-size: 11px;
  font-weight: 800;
  color: rgba(244,251,255,0.78);
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* === Responsive === */
@media (max-width: 760px){
  .staff-home-v120 .sh-more-row{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .staff-home-v120 .sh-circle{ width: 42px; height: 42px; }
  .staff-home-v120 .sh-circle-label{ font-size: 11px; }
}
@media (max-width: 480px){
  .staff-home-v120 .sh-more-row{ grid-template-columns: 1fr; }
  .staff-home-v120 .sh-circle-btn{ flex-direction: row; padding: 12px 14px; }
  .staff-home-v120 .sh-circle-label{ text-align: left; }
}


/* ============================================================
   V0.122 STAFF HOME ADDITIONS
   - Compact-select dropdown styling for showInputModal
   - Tank chip strip on staff home (between recent activity
     and the verb tile grid)
   - 4-column More tools row (was 3)
   ============================================================ */

/* === Compact-select dropdown (used by Add Uncataloged form) === */
.input-modal-field-compact{
  margin-bottom: 18px;
}
.input-compact-select-wrap{
  position: relative;
  width: 100%;
}
.input-compact-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  /* v0.178 — migrated to design tokens. Was hardcoded charcoal hex,
     fine in isolation but inconsistent with the rest. Now reads
     from --ltc-surface-input so it auto-updates with the system. */
  background: var(--ltc-surface-input);
  border: 2px solid var(--ltc-border-input);
  color: var(--ltc-text-primary);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  padding: 14px 42px 14px 16px;
  border-radius: var(--ltc-radius-md);
  cursor: pointer;
  box-shadow: var(--ltc-shadow-input);
  transition: border-color 160ms, background 160ms, box-shadow 160ms;
}
.input-compact-select:focus{
  outline: none;
  border-color: var(--ltc-accent);
  background: var(--ltc-surface-input-focus);
  box-shadow:
    0 0 0 3px rgba(var(--ltc-accent-rgb), 0.22),
    var(--ltc-shadow-input);
}
.input-compact-select:hover{
  border-color: var(--ltc-border-strong);
}
.input-compact-select option{
  /* v0.178 — was #060f18 (near-black blue). Native <option> elements
     can't use CSS variables in most browsers, so this stays a hex,
     but at least it's a charcoal hex now. */
  background: #2a2c34;
  color: #f4fbff;
  padding: 8px;
}
.input-compact-chev{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: rgba(220,234,248,0.6);
  pointer-events: none;
  font-weight: 900;
}
/* Hide the pill grid for compact selects (it's not rendered, but
   defensive in case any leak through) */
.input-modal-field-compact .input-choice-grid{ display: none !important; }

/* === Tank chip strip === */
/* v0.149 — Tank chips strip redesign. The previous "shitty green" version
   used one teal accent on every chip — visually flat and repetitive. New
   version: per-tank color cycling via :nth-child, larger touch targets,
   water-themed background, dramatic slam-in entrance cascade, and a
   gradient sweep on hover pulled from LTC_Keepers. */
.staff-home-v120 .sh-tank-strip{
  display: flex;
  align-items: center;
  gap: 16px;
  /* v0.167 — navy → charcoal. Chris asked about this 4+ times. */
  background:
    radial-gradient(ellipse at top right, rgba(94,235,200,0.08), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(123,207,255,0.06), transparent 60%),
    linear-gradient(180deg, rgba(38,40,48,0.94), rgba(24,26,32,0.97));
  border: 1px solid rgba(220,234,248,0.14);
  border-radius: 18px;
  padding: 16px 20px;
  margin-top: 14px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Subtle moving water wash across the strip background */
.staff-home-v120 .sh-tank-strip::before{
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(123,207,255,0.06) 50%, transparent);
  pointer-events: none;
  animation: shTankWash 6s ease-in-out infinite;
}
@keyframes shTankWash{
  0%, 100% { left: -50%; }
  50%      { left: 90%; }
}
@media (prefers-reduced-motion: reduce){
  .staff-home-v120 .sh-tank-strip::before{ display: none; }
}

.staff-home-v120 .sh-tank-strip-label{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #7bcfff;
  flex-shrink: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(123,207,255,0.32);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.staff-home-v120 .sh-tank-strip-label::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7bcfff;
  box-shadow: 0 0 12px rgba(123,207,255,0.7);
  animation: shTankDotPulse 2.4s ease-in-out infinite;
}
@keyframes shTankDotPulse{
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.18); }
}

.staff-home-v120 .sh-tank-chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* v0.167 — Tank chips redesigned as round water orbs to match the
   v0.162 receive flow tank pills. Chris asked for this several times.
   v0.168 — fixed three bugs from v0.167:
     1. Water filled the entire orb instead of sitting in the bottom
        portion with a dark "air gap" above (matching the receive
        flow orbs). Fixed by positioning the water layer at top:35%.
     2. Count badge in the top-right corner was clipped by the
        chip's overflow:hidden. Moved overflow to the water layer
        only so the badge can stick out.
     3. Surface shimmer was at the top of the orb instead of at
        the actual water line. Moved to match the new water position.
*/
.staff-home-v120 .sh-tank-chip{
  --tc-accent: #5eebc8;
  --tc-accent-rgb: 94,235,200;
  position: relative;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%,
    rgba(22,24,30,0.96) 0%,
    rgba(12,14,20,1) 70%,
    rgba(6,8,12,1) 100%);
  border: 2px solid rgba(var(--tc-accent-rgb), 0.78);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  /* v0.168 — overflow:visible so the count badge in the top-right
     can stick out past the orb edge. The water layer has its own
     overflow:hidden + border-radius to keep the slosh contained. */
  overflow: visible;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform 200ms cubic-bezier(.34,1.2,.42,1),
    border-color 200ms,
    box-shadow 200ms;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.42),
    inset 0 1px 3px rgba(0,0,0,0.55),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  /* Slam-in entrance — staggered via :nth-child below */
  animation: shTankSlamIn .58s cubic-bezier(.34,1.2,.42,1) both;
}

/* v0.168 — Water container clips to a circle. The water itself
   sits in the BOTTOM portion of the orb (top:35% to bottom), so
   the dark orb base shows through the top 35% as the "air" above
   the water line. Matches the v0.162 receive flow orb design. */
.staff-home-v120 .sh-tank-water{
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
.staff-home-v120 .sh-tank-water-bg{
  position: absolute;
  /* v0.168 — water starts at top:38% leaving an air gap above */
  top: 38%;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg,
    rgba(var(--tc-accent-rgb), 0.6) 0%,
    rgba(var(--tc-accent-rgb), 0.42) 50%,
    rgba(var(--tc-accent-rgb), 0.22) 100%);
}
.staff-home-v120 .sh-tank-slosh{
  position: absolute;
  width: 116px;
  height: 116px;
  left: 50%;
  border-radius: 42%;
  margin-left: -58px;
  pointer-events: none;
}
/* v0.168 — slosh shapes are positioned so their TOP edges create
   the wavy water surface at around the 38% mark. Their large size
   (116×116) means most of the shape is below the orb, with just
   the curved top peeking up to form the water meniscus. */
.staff-home-v120 .sh-tank-slosh-1{
  top: 32%;
  background: rgba(var(--tc-accent-rgb), 0.6);
  animation: shTankSlosh1 5s linear infinite;
}
.staff-home-v120 .sh-tank-slosh-2{
  top: 40%;
  background: rgba(var(--tc-accent-rgb), 0.36);
  animation: shTankSlosh2 7s linear infinite;
}
@keyframes shTankSlosh1 { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes shTankSlosh2 { from{transform:rotate(0)} to{transform:rotate(-360deg)} }

/* v0.168 — surface shimmer at the water line (around 38% from top),
   not at the very top of the orb. */
.staff-home-v120 .sh-tank-surface{
  position: absolute;
  left: 4px; right: 4px;
  top: 36%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.6) 30%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0.6) 70%,
    transparent 100%);
  filter: blur(.5px);
}
.staff-home-v120 .sh-tank-gloss{
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 11px;
  width: 14px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0) 70%);
  pointer-events: none;
}

/* letter centered in the orb */
.staff-home-v120 .sh-tank-letter{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.95),
    0 0 10px rgba(0,0,0,0.85),
    0 1px 0 rgba(0,0,0,0.9);
  z-index: 4;
  pointer-events: none;
  box-shadow: none;
}
/* v0.168 — count badge in the top-right. Now actually visible
   because the chip itself is overflow:visible. Positioned slightly
   outside the orb edge for the classic notification-bubble look. */
.staff-home-v120 .sh-tank-count{
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: rgba(0,0,0,0.85);
  border: 1.5px solid rgba(var(--tc-accent-rgb), 0.95);
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  box-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 0 8px rgba(var(--tc-accent-rgb), 0.4);
  z-index: 6;
  white-space: nowrap;
}

.staff-home-v120 .sh-tank-chip:hover{
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(var(--tc-accent-rgb), 1);
  box-shadow:
    0 0 0 2px rgba(var(--tc-accent-rgb), 0.5),
    0 10px 24px rgba(var(--tc-accent-rgb), 0.35),
    0 4px 14px rgba(0,0,0,0.3),
    inset 0 1px 3px rgba(0,0,0,0.55);
}
.staff-home-v120 .sh-tank-chip:hover .sh-tank-slosh-1{ animation-duration: 2.5s; }
.staff-home-v120 .sh-tank-chip:hover .sh-tank-slosh-2{ animation-duration: 3.6s; }
.staff-home-v120 .sh-tank-chip:active{
  transform: scale(.94);
}

/* Per-chip color cycling. 7 colors rotate so adjacent chips never share
   a color. Pulled from the existing rainbow accent palette used by the
   catalog category rows so the visual language stays consistent. */
.staff-home-v120 .sh-tank-chip:nth-child(7n+1){--tc-accent:#7bcfff;--tc-accent-rgb:123,207,255}
.staff-home-v120 .sh-tank-chip:nth-child(7n+2){--tc-accent:#5eebc8;--tc-accent-rgb:94,235,200}
.staff-home-v120 .sh-tank-chip:nth-child(7n+3){--tc-accent:#c8b2ff;--tc-accent-rgb:200,178,255}
.staff-home-v120 .sh-tank-chip:nth-child(7n+4){--tc-accent:#ffcb5e;--tc-accent-rgb:255,203,94}
.staff-home-v120 .sh-tank-chip:nth-child(7n+5){--tc-accent:#ff9bb6;--tc-accent-rgb:255,155,182}
.staff-home-v120 .sh-tank-chip:nth-child(7n+6){--tc-accent:#5ed4dc;--tc-accent-rgb:94,212,220}
.staff-home-v120 .sh-tank-chip:nth-child(7n+7){--tc-accent:#ffa850;--tc-accent-rgb:255,168,80}

/* v0.167 — slosh phase staggering so the orbs don't all rotate in
   sync. Negative animation-delays start each chip mid-rotation. Per
   design lesson #6 — never synchronize sibling animations. */
.staff-home-v120 .sh-tank-chip:nth-child(1) .sh-tank-slosh-1{animation-delay:-0.0s}
.staff-home-v120 .sh-tank-chip:nth-child(2) .sh-tank-slosh-1{animation-delay:-0.7s}
.staff-home-v120 .sh-tank-chip:nth-child(3) .sh-tank-slosh-1{animation-delay:-1.4s}
.staff-home-v120 .sh-tank-chip:nth-child(4) .sh-tank-slosh-1{animation-delay:-2.1s}
.staff-home-v120 .sh-tank-chip:nth-child(5) .sh-tank-slosh-1{animation-delay:-2.8s}
.staff-home-v120 .sh-tank-chip:nth-child(6) .sh-tank-slosh-1{animation-delay:-3.5s}
.staff-home-v120 .sh-tank-chip:nth-child(7) .sh-tank-slosh-1{animation-delay:-4.2s}
.staff-home-v120 .sh-tank-chip:nth-child(1) .sh-tank-slosh-2{animation-delay:-0.5s}
.staff-home-v120 .sh-tank-chip:nth-child(2) .sh-tank-slosh-2{animation-delay:-1.5s}
.staff-home-v120 .sh-tank-chip:nth-child(3) .sh-tank-slosh-2{animation-delay:-2.5s}
.staff-home-v120 .sh-tank-chip:nth-child(4) .sh-tank-slosh-2{animation-delay:-3.5s}
.staff-home-v120 .sh-tank-chip:nth-child(5) .sh-tank-slosh-2{animation-delay:-4.5s}
.staff-home-v120 .sh-tank-chip:nth-child(6) .sh-tank-slosh-2{animation-delay:-5.5s}
.staff-home-v120 .sh-tank-chip:nth-child(7) .sh-tank-slosh-2{animation-delay:-6.5s}

/* Staggered slam-in entrance — first 12 chips cascade */
.staff-home-v120 .sh-tank-chip:nth-child(1){animation-delay:.04s}
.staff-home-v120 .sh-tank-chip:nth-child(2){animation-delay:.10s}
.staff-home-v120 .sh-tank-chip:nth-child(3){animation-delay:.16s}
.staff-home-v120 .sh-tank-chip:nth-child(4){animation-delay:.22s}
.staff-home-v120 .sh-tank-chip:nth-child(5){animation-delay:.28s}
.staff-home-v120 .sh-tank-chip:nth-child(6){animation-delay:.34s}
.staff-home-v120 .sh-tank-chip:nth-child(7){animation-delay:.40s}
.staff-home-v120 .sh-tank-chip:nth-child(8){animation-delay:.46s}
.staff-home-v120 .sh-tank-chip:nth-child(9){animation-delay:.52s}
.staff-home-v120 .sh-tank-chip:nth-child(10){animation-delay:.58s}
.staff-home-v120 .sh-tank-chip:nth-child(11){animation-delay:.64s}
.staff-home-v120 .sh-tank-chip:nth-child(12){animation-delay:.70s}

@keyframes shTankSlamIn{
  0%   {opacity:0; transform:translateY(-14px) scale(1.12)}
  55%  {opacity:1; transform:translateY(3px) scale(.96)}
  78%  {opacity:1; transform:translateY(-2px) scale(1.03)}
  100% {opacity:1; transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .staff-home-v120 .sh-tank-chip{animation: none}
}

/* === 4-column More tools row === */
.staff-home-v120 .sh-more-row{
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 760px){
  .staff-home-v120 .sh-more-row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .staff-home-v120 .sh-more-row{ grid-template-columns: 1fr; }
}


/* ============================================================
   V0.123 STAFF EDITOR REBUILD (in-modal)
   - Replaces the wall of 8 quick tiles + 6 buttons inside the
     fish detail popup with a structured 4-tile primary grid +
     secondary pill row + collapsed "More edits" section.
   - Tactile feedback via ltcFx (jelly squish + bubble cloud).
   - Reuses the design language from the v0.121 staff home.
   ============================================================ */

/* === ltcFx keyframes === */
@keyframes ltcJellyLight{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.06, 0.94); }
  60%{ transform: scale(0.97, 1.03); }
  100%{ transform: scale(1); }
}

/* === Root container === */
.staff-editor-v123{
  background: linear-gradient(180deg, rgba(22,24,30,0.85), rgba(22,24,30,0.95));
  border: 1px solid rgba(220,234,248,0.16);
  border-radius: 18px;
  padding: 18px;
  margin: 18px 0;
  --se-accent: #5eebc8;
  --se-accent-bg: rgba(94,235,200,0.12);
  --se-accent-border: rgba(94,235,200,0.32);
}

/* v0.148 — STAFF MODE banner. Sits at the top of the staff editor with
   an icon, two-line label, and a one-time gradient sweep on render.
   Visual moment that says "you're in admin mode now" so non-tech-savvy
   staff get a clear identity cue every time they open a fish card. */
.staff-editor-v123 .se-mode-banner{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  margin:-18px -18px 16px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(135deg,
    rgba(94,235,200,0.18) 0%,
    rgba(123,207,255,0.16) 50%,
    rgba(200,178,255,0.18) 100%);
  border-bottom:1px solid rgba(94,235,200,0.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.staff-editor-v123 .se-mode-banner-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:rgba(94,235,200,0.20);
  border:1.5px solid rgba(94,235,200,0.42);
  color:#5eebc8;
  flex:0 0 auto;
  box-shadow:0 4px 14px rgba(94,235,200,0.18);
}
.staff-editor-v123 .se-mode-banner-icon svg{width:22px;height:22px;display:block}
.staff-editor-v123 .se-mode-banner-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.staff-editor-v123 .se-mode-banner-text strong{
  font-size:14px;
  font-weight:900;
  letter-spacing:.16em;
  color:#5eebc8;
  text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
}
.staff-editor-v123 .se-mode-banner-text span{
  font-size:11px;
  font-weight:700;
  color:rgba(232,243,251,.62);
  letter-spacing:.02em;
}
.staff-editor-v123 .se-mode-banner-sweep{
  position:absolute;
  top:0;
  left:-50%;
  width:50%;
  height:100%;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.10) 50%,
    transparent);
  pointer-events:none;
  animation:seBannerSweep 2.4s ease-out 0.3s 1;
}
@keyframes seBannerSweep{
  0%   {left:-50%;opacity:0}
  20%  {opacity:1}
  85%  {opacity:1}
  100% {left:120%;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .staff-editor-v123 .se-mode-banner-sweep{display:none}
}

/* === Header === */
.staff-editor-v123 .se-header{
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(220,234,248,0.1);
}
.staff-editor-v123 .se-status-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.staff-editor-v123 .se-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.staff-editor-v123 .se-status-dot{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.staff-editor-v123 .se-status-green{ background: rgba(74,222,128,0.16); border: 1px solid rgba(74,222,128,0.42); color: #4ade80; }
.staff-editor-v123 .se-status-amber{ background: rgba(255,200,80,0.14); border: 1px solid rgba(255,200,80,0.32); color: #ffcb5e; }
.staff-editor-v123 .se-status-purple{ background: rgba(180,130,255,0.14); border: 1px solid rgba(180,130,255,0.32); color: #c8b2ff; }
.staff-editor-v123 .se-status-red{ background: rgba(220,90,90,0.14); border: 1px solid rgba(255,140,140,0.32); color: #ff9a8a; }
.staff-editor-v123 .se-mini-pill{
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(220,234,248,0.1);
  border: 1px solid rgba(220,234,248,0.22);
  color: rgba(220,234,248,0.78);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.staff-editor-v123 .se-info-row{
  font-size: 12px;
  font-weight: 600;
  color: rgba(220,234,248,0.62);
  line-height: 1.6;
}
.staff-editor-v123 .se-info-row strong{
  color: #f4fbff;
  font-weight: 800;
}

/* === Primary grid (4 BIG tiles) === */
.staff-editor-v123 .se-primary-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.staff-editor-v123 .se-primary-grid-single{
  grid-template-columns: 1fr;
}
.staff-editor-v123 .se-tile{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px 16px;
  background: rgba(22,24,30,0.7);
  border: 1.5px solid var(--se-accent-border);
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  color: #f4fbff;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 140ms ease, border-color 160ms, background 160ms, box-shadow 160ms;
}
.staff-editor-v123 .se-tile:hover{
  transform: translateY(-2px);
  border-color: var(--se-accent);
  background: rgba(46,48,56,0.6);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.staff-editor-v123 .se-tile:active{ transform: translateY(0); }
.staff-editor-v123 .se-tile-wide{ padding: 24px 18px; }
.staff-editor-v123 .se-tile-icon{
  color: var(--se-accent);
  flex-shrink: 0;
}
.staff-editor-v123 .se-tile-title{
  font-size: 14px;
  font-weight: 900;
  color: #f4fbff;
  text-align: center;
  line-height: 1.2;
}
.staff-editor-v123 .se-tile-sub{
  font-size: 11px;
  font-weight: 700;
  color: rgba(220,234,248,0.6);
  text-align: center;
}

/* === Color tones for tiles === */
.staff-editor-v123 .se-tone-green{ --se-accent: #4ade80; --se-accent-bg: rgba(74,222,128,0.14); --se-accent-border: rgba(74,222,128,0.42); }
.staff-editor-v123 .se-tone-blue{ --se-accent: #7bcfff; --se-accent-bg: rgba(220,234,248,0.12); --se-accent-border: rgba(220,234,248,0.32); }
.staff-editor-v123 .se-tone-purple{ --se-accent: #c8b2ff; --se-accent-bg: rgba(180,130,255,0.12); --se-accent-border: rgba(180,130,255,0.32); }
.staff-editor-v123 .se-tone-amber{ --se-accent: #ffcb5e; --se-accent-bg: rgba(255,200,80,0.12); --se-accent-border: rgba(255,200,80,0.32); }
.staff-editor-v123 .se-tone-red{ --se-accent: #ff9a8a; --se-accent-bg: rgba(220,90,90,0.12); --se-accent-border: rgba(255,140,140,0.32); }
.staff-editor-v123 .se-tone-rose{ --se-accent: #ff9bb6; --se-accent-bg: rgba(255,155,182,0.12); --se-accent-border: rgba(255,155,182,0.32); }

/* === Secondary pill row === */
.staff-editor-v123 .se-secondary-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.staff-editor-v123 .se-pill{
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(46,48,56,0.5);
  border: 1px solid rgba(220,234,248,0.18);
  color: rgba(220,234,248,0.78);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 160ms, border-color 160ms, color 160ms, transform 140ms;
}
.staff-editor-v123 .se-pill:hover{
  background: rgba(64,68,80,0.6);
  border-color: rgba(220,234,248,0.4);
  color: #f4fbff;
  transform: translateY(-1px);
}
.staff-editor-v123 .se-pill-red{
  background: rgba(220,90,90,0.1);
  border-color: rgba(255,140,140,0.28);
  color: #ff9a8a;
}
.staff-editor-v123 .se-pill-red:hover{
  background: rgba(220,90,90,0.18);
  border-color: rgba(255,140,140,0.5);
  color: #ffb0a0;
}
.staff-editor-v123 .se-pill-amber{
  background: rgba(255,200,80,0.1);
  border-color: rgba(255,200,80,0.28);
  color: #ffcb5e;
}
.staff-editor-v123 .se-pill-amber:hover{
  background: rgba(255,200,80,0.18);
  border-color: rgba(255,200,80,0.5);
  color: #ffd87e;
}
.staff-editor-v123 .se-pill-rose{
  background: rgba(255,155,182,0.1);
  border-color: rgba(255,155,182,0.28);
  color: #ff9bb6;
}
.staff-editor-v123 .se-pill-rose:hover{
  background: rgba(255,155,182,0.18);
  border-color: rgba(255,155,182,0.5);
  color: #ffaec3;
}

/* === Conditional rollback bar === */
.staff-editor-v123 .se-rollback-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,200,80,0.08);
  border: 1px solid rgba(255,200,80,0.22);
  border-radius: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.staff-editor-v123 .se-rollback-label{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffcb5e;
  flex-shrink: 0;
}
.staff-editor-v123 .se-rollback-buttons{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

/* === More edits collapse === */
.staff-editor-v123 .se-more-wrap{ margin-top: 4px; }
.staff-editor-v123 .se-more-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  background: rgba(46,48,56,0.4);
  border: 1px dashed rgba(220,234,248,0.22);
  border-radius: 12px;
  color: rgba(220,234,248,0.65);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.staff-editor-v123 .se-more-toggle:hover{
  background: rgba(64,68,80,0.5);
  border-color: rgba(220,234,248,0.4);
  color: #f4fbff;
}
.staff-editor-v123 .se-more-chev{
  display: inline-block;
  font-size: 14px;
  transition: transform 220ms;
}
.staff-editor-v123 .se-more-wrap.is-open .se-more-chev{
  transform: rotate(180deg);
}
.staff-editor-v123 .se-more-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms ease;
}
.staff-editor-v123 .se-more-wrap.is-open .se-more-content{
  max-height: 500px;
}
.staff-editor-v123 .se-more-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-top: 12px;
}
.staff-editor-v123 .se-mini-tile{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(22,24,30,0.7);
  border: 1px solid rgba(220,234,248,0.14);
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 160ms, background 160ms, transform 140ms;
}
.staff-editor-v123 .se-mini-tile:hover{
  border-color: rgba(220,234,248,0.35);
  background: rgba(46,48,56,0.5);
  transform: translateY(-1px);
}
.staff-editor-v123 .se-mini-tile-label{
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(220,234,248,0.45);
}
.staff-editor-v123 .se-mini-tile-value{
  font-size: 13px;
  font-weight: 800;
  color: #f4fbff;
}

/* === Responsive === */
@media (max-width: 760px){
  .staff-editor-v123 .se-primary-grid{ grid-template-columns: repeat(2, 1fr); }
  .staff-editor-v123 .se-more-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .staff-editor-v123{ padding: 14px; }
  .staff-editor-v123 .se-tile{ padding: 14px 10px 12px; }
  .staff-editor-v123 .se-tile-title{ font-size: 13px; }
  .staff-editor-v123 .se-tile-sub{ font-size: 10px; }
}


/* ============================================================
   V0.124 INVENTORY CATALOG REBUILD
   - Replaces fat 60-75 node cards with slim 12-15 node rows
   - Drops inline editing (lives in fish modal v0.123 staff editor)
   - Slim banner header replaces stacked summary + head strip
   - ~5x lighter DOM, no photo background processing,
     simple <img loading="lazy"> thumbs instead
   ============================================================ */

/* === Slim banner header === */
.inventory-catalog-banner-v124{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(22,24,30,0.85), rgba(22,24,30,0.95));
  border: 1px solid rgba(220,234,248,0.16);
  border-radius: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.inventory-catalog-banner-v124 .icb-back{
  /* v0.175 — Chris asked for this redundant button to go entirely;
     the topbar Back/Close button at the top-right of the inventory
     panel already does the same job. Hidden via display:none. The
     handler still exists in JS in case anything else references it. */
  display: none !important;
}
.inventory-catalog-banner-v124 .icb-back:hover{
  background: rgba(64,68,80,0.8);
  border-color: rgba(220,234,248,0.32);
  color: #f4fbff;
  transform: translateY(-1px);
}
.inventory-catalog-banner-v124 .icb-title{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.inventory-catalog-banner-v124 .icb-title strong{
  font-size: 18px;
  font-weight: 900;
  color: #f4fbff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inventory-catalog-banner-v124 .icb-title span{
  font-size: 11px;
  font-weight: 700;
  color: rgba(220,234,248,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* === Slim row stack === */
.inventory-rows-v124{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inventory-rows-v124 .inventory-empty-state{
  padding: 40px 20px;
  text-align: center;
  color: rgba(220,234,248,0.5);
  font-size: 14px;
}

/* === Individual row === */
.inventory-row-v124{
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  background: rgba(22,24,30,0.7);
  border: 1px solid rgba(220,234,248,0.12);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: #f4fbff;
  transition: background 160ms, border-color 160ms, transform 120ms;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.inventory-row-v124:hover{
  background: rgba(46,48,56,0.6);
  border-color: rgba(220,234,248,0.32);
  transform: translateX(2px);
}
.inventory-row-v124:active{ transform: translateX(0); }

/* Thumbnail */
.inventory-row-v124 .ir-thumb{
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(46,48,56,0.5);
  border: 1px solid rgba(220,234,248,0.18);
  flex-shrink: 0;
}
.inventory-row-v124 .ir-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inventory-row-v124 .ir-thumb-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: rgba(220,234,248,0.4);
  letter-spacing: 0.1em;
}

/* Main content */
.inventory-row-v124 .ir-main{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.inventory-row-v124 .ir-name-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.inventory-row-v124 .ir-name{
  font-size: 15px;
  font-weight: 800;
  color: #f4fbff;
  line-height: 1.2;
}
.inventory-row-v124 .ir-status{
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.inventory-row-v124 .ir-status-green{ background: rgba(74,222,128,0.16); border: 1px solid rgba(74,222,128,0.42); color: #4ade80; }
.inventory-row-v124 .ir-status-amber{ background: rgba(255,200,80,0.14); border: 1px solid rgba(255,200,80,0.32); color: #ffcb5e; }
.inventory-row-v124 .ir-status-purple{ background: rgba(180,130,255,0.14); border: 1px solid rgba(180,130,255,0.32); color: #c8b2ff; }
.inventory-row-v124 .ir-status-red{ background: rgba(220,90,90,0.14); border: 1px solid rgba(255,140,140,0.32); color: #ff9a8a; }
.inventory-row-v124 .ir-status-gray{ background: rgba(176,196,216,0.1); border: 1px solid rgba(176,196,216,0.22); color: rgba(220,234,248,0.65); }

.inventory-row-v124 .ir-meta{
  font-size: 11px;
  font-weight: 600;
  color: rgba(220,234,248,0.52);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inventory-row-v124 .ir-meta em{
  font-style: italic;
  color: rgba(220,234,248,0.42);
}
.inventory-row-v124 .ir-chips{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.inventory-row-v124 .ir-chip{
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(220,234,248,0.1);
  border: 1px solid rgba(220,234,248,0.22);
  color: rgba(220,234,248,0.75);
  font-size: 10px;
  font-weight: 800;
}
.inventory-row-v124 .ir-chip-warn{
  background: rgba(220,90,90,0.12);
  border-color: rgba(255,140,140,0.32);
  color: #ff9a8a;
}
.inventory-row-v124 .ir-chip-price{
  background: rgba(94,235,200,0.12);
  border-color: rgba(94,235,200,0.32);
  color: #5eebc8;
}
.inventory-row-v124 .ir-chip-mute{
  background: rgba(176,196,216,0.08);
  border-color: rgba(176,196,216,0.18);
  color: rgba(220,234,248,0.55);
}

/* CTA */
.inventory-row-v124 .ir-cta{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.inventory-row-v124 .ir-cta span{
  font-size: 12px;
  font-weight: 800;
  color: rgba(94,235,200,0.7);
  white-space: nowrap;
}
.inventory-row-v124:hover .ir-cta span{
  color: #5eebc8;
}

/* === Responsive === */
@media (max-width: 600px){
  .inventory-row-v124{
    grid-template-columns: 56px 1fr;
    padding: 9px 12px 9px 9px;
  }
  .inventory-row-v124 .ir-thumb{ width: 56px; height: 56px; }
  .inventory-row-v124 .ir-cta{ display: none; }
  .inventory-row-v124 .ir-name{ font-size: 14px; }
}


/* ============================================================
   V0.125 INVENTORY GROUPING
   - Items grouped by tank (default) / category / flat
   - Collapsible group headers via toggleInventoryGroupCollapse
   - Group selector pills in the catalog banner
   - Tightened row: dropped meta line, kept name+status+chips
   ============================================================ */

/* === Banner group selector === */
.inventory-catalog-banner-v124 .icb-group-row{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.inventory-catalog-banner-v124 .icb-group-label{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(220,234,248,0.45);
  margin-right: 4px;
}
.inventory-catalog-banner-v124 .icb-group-btn{
  padding: 8px 14px;
  background: rgba(46,48,56,0.7);
  border: 1.5px solid rgba(220,234,248,0.18);
  border-radius: 999px;
  color: rgba(220,234,248,0.7);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms, transform 140ms;
}
.inventory-catalog-banner-v124 .icb-group-btn:hover{
  background: rgba(64,68,80,0.85);
  color: #f4fbff;
  transform: translateY(-1px);
}
/* v0.175 — semantic per-mode colors instead of one aqua active state.
   3 fixed buttons in this order: Tank → Category → Flat. Each gets
   its own accent so the active one stands out without all three using
   the same teal. */
.inventory-catalog-banner-v124 .icb-group-btn:nth-child(2).is-active{
  /* Tank — blue */
  background: rgba(123,207,255,0.18);
  border-color: rgba(123,207,255,0.6);
  color: #7bcfff;
  box-shadow: 0 0 0 1px rgba(123,207,255,0.3), 0 4px 14px rgba(123,207,255,0.22);
}
.inventory-catalog-banner-v124 .icb-group-btn:nth-child(3).is-active{
  /* Category — purple */
  background: rgba(200,178,255,0.18);
  border-color: rgba(200,178,255,0.6);
  color: #c8b2ff;
  box-shadow: 0 0 0 1px rgba(200,178,255,0.3), 0 4px 14px rgba(200,178,255,0.22);
}
.inventory-catalog-banner-v124 .icb-group-btn:nth-child(4).is-active{
  /* Flat — warm gray */
  background: rgba(220,234,248,0.18);
  border-color: rgba(220,234,248,0.55);
  color: #f4fbff;
  box-shadow: 0 0 0 1px rgba(220,234,248,0.28), 0 4px 14px rgba(220,234,248,0.18);
}

/* === Groups === */
.inv-group{
  margin-bottom: 14px;
}
.inv-group-head{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(46,48,56,0.6), rgba(22,24,30,0.7));
  border: 1px solid rgba(220,234,248,0.18);
  border-radius: 12px;
  color: #f4fbff;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 6px;
  text-align: left;
  transition: background 160ms, border-color 160ms;
  position: sticky;
  top: 0;
  z-index: 2;
}
.inv-group-head:hover{
  background: linear-gradient(180deg, rgba(46,48,56,0.7), rgba(28,30,38,0.8));
  border-color: rgba(220,234,248,0.32);
}
.inv-group-chev{
  display: inline-block;
  font-size: 14px;
  /* v0.175 — was aqua. Neutral now so the count badge is the colored accent. */
  color: rgba(220,234,248,0.7);
  transition: transform 220ms;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.inv-group.is-collapsed .inv-group-chev{
  transform: rotate(-90deg);
}
.inv-group-name{
  flex: 1;
  font-size: 14px;
  font-weight: 900;
  color: #f4fbff;
  letter-spacing: 0.02em;
}
.inv-group-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 9px;
  /* v0.175 — was aqua. Neutral charcoal pill, color rotated per group via :nth-of-type below. */
  background: rgba(60,64,76,0.85);
  border: 1.5px solid rgba(220,234,248,0.22);
  border-radius: 999px;
  color: #f4fbff;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}
/* v0.175 — count badge color rotation per group position so adjacent groups never share an accent */
.inv-group:nth-of-type(7n+1) .inv-group-count{ border-color: rgba(123,207,255,0.55); color:#7bcfff; }
.inv-group:nth-of-type(7n+2) .inv-group-count{ border-color: rgba(94,235,200,0.55); color:#5eebc8; }
.inv-group:nth-of-type(7n+3) .inv-group-count{ border-color: rgba(200,178,255,0.55); color:#c8b2ff; }
.inv-group:nth-of-type(7n+4) .inv-group-count{ border-color: rgba(255,203,94,0.55); color:#ffcb5e; }
.inv-group:nth-of-type(7n+5) .inv-group-count{ border-color: rgba(255,155,182,0.55); color:#ff9bb6; }
.inv-group:nth-of-type(7n+6) .inv-group-count{ border-color: rgba(94,212,220,0.55); color:#5ed4dc; }
.inv-group:nth-of-type(7n+7) .inv-group-count{ border-color: rgba(255,168,80,0.55); color:#ffa850; }
.inv-group-body{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 4000px;
  overflow: hidden;
  transition: max-height 320ms ease;
}
.inv-group.is-collapsed .inv-group-body{
  max-height: 0;
  margin-top: -6px;
}

/* No-tank group gets a warning tint on its header */
.inv-group[data-inv-group="zzz_notank"] .inv-group-head{
  background: linear-gradient(180deg, rgba(220,90,90,0.14), rgba(22,24,30,0.7));
  border-color: rgba(255,140,140,0.32);
}
.inv-group[data-inv-group="zzz_notank"] .inv-group-name{
  color: #ff9a8a;
}
.inv-group[data-inv-group="zzz_notank"] .inv-group-count{
  background: rgba(220,90,90,0.16);
  border-color: rgba(255,140,140,0.4);
  color: #ff9a8a;
}
.inv-group[data-inv-group="zzz_notank"] .inv-group-chev{
  color: #ff9a8a;
}

/* === Tightened row spacing === */
.inventory-row-v124{
  padding: 9px 14px 9px 9px;
  grid-template-columns: 56px 1fr;
}
.inventory-row-v124 .ir-thumb{
  width: 56px;
  height: 56px;
}
.inventory-row-v124 .ir-name{
  font-size: 14px;
}
.inventory-row-v124 .ir-chips{
  margin-top: 4px;
}

/* New chip variant: rose for held / reserved info */
.inventory-row-v124 .ir-chip-rose{
  background: rgba(255,155,182,0.12);
  border-color: rgba(255,155,182,0.32);
  color: #ff9bb6;
}

/* === Responsive === */
@media (max-width: 600px){
  .inventory-catalog-banner-v124{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .inventory-catalog-banner-v124 .icb-group-row{
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .inv-group-head{ padding: 9px 12px; }
  .inv-group-name{ font-size: 13px; }
}


/* ============================================================
   V0.126 INVENTORY MULTI-COLUMN GRID + CATEGORY COLORS
   - Group body becomes auto-flow grid (1-4 cols by width)
   - Each row gets a colored left border by category
   - Default group changed to category (data-driven, not staff-driven)
   ============================================================ */

/* === Multi-column grid === */
.inv-group-body{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
  flex-direction: initial !important;
}

/* === Row gets a colored left border via category accent === */
.inventory-row-v124{
  position: relative;
  border-left: 4px solid var(--cat-accent, #5eebc8);
  padding-left: 12px;
  transition: background 160ms, border-color 160ms, transform 120ms, box-shadow 160ms;
}
.inventory-row-v124:hover{
  border-left-color: var(--cat-accent, #5eebc8);
  box-shadow: -2px 0 0 var(--cat-accent, #5eebc8), 0 6px 16px rgba(0,0,0,0.25);
}

/* === Category color definitions ===
   Each category class sets --cat-accent. Border + name color use it.
   Picked for distinctness on dark navy background. */
.inventory-row-v124.cat-tangs       { --cat-accent: #6ca8ff; }
.inventory-row-v124.cat-angelfish   { --cat-accent: #ffa850; }
.inventory-row-v124.cat-wrasses     { --cat-accent: #c88aff; }
.inventory-row-v124.cat-gobies      { --cat-accent: #6ed884; }
.inventory-row-v124.cat-clownfish   { --cat-accent: #ff9050; }
.inventory-row-v124.cat-damsels     { --cat-accent: #5ed4dc; }
.inventory-row-v124.cat-basslets    { --cat-accent: #e870c8; }
.inventory-row-v124.cat-cardinals   { --cat-accent: #f06060; }
.inventory-row-v124.cat-anthias     { --cat-accent: #ff7faa; }
.inventory-row-v124.cat-butterfly   { --cat-accent: #ffd84a; }
.inventory-row-v124.cat-hawks       { --cat-accent: #ffb84a; }
.inventory-row-v124.cat-rabbits     { --cat-accent: #b8e860; }
.inventory-row-v124.cat-triggers    { --cat-accent: #d04860; }
.inventory-row-v124.cat-puffers     { --cat-accent: #80c8ff; }
.inventory-row-v124.cat-eels        { --cat-accent: #4cb898; }
.inventory-row-v124.cat-lionfish    { --cat-accent: #e85060; }
.inventory-row-v124.cat-other       { --cat-accent: #9eb4c8; }
.inventory-row-v124.cat-shrimp      { --cat-accent: #ff8a78; }
.inventory-row-v124.cat-crabs       { --cat-accent: #d88a4a; }
.inventory-row-v124.cat-snails      { --cat-accent: #c4a060; }
.inventory-row-v124.cat-urchins     { --cat-accent: #8c70c8; }
.inventory-row-v124.cat-starfish    { --cat-accent: #e8c450; }
.inventory-row-v124.cat-anemones    { --cat-accent: #ff90a8; }
.inventory-row-v124.cat-clams       { --cat-accent: #80d8b8; }
.inventory-row-v124.cat-inverts     { --cat-accent: #5ed4c0; }
.inventory-row-v124.cat-default     { --cat-accent: #5eebc8; }

/* === Group header tinted by category color when grouped by category ===
   Uses the same accent variable so the section header matches its rows. */
.inv-group[data-inv-group] .inv-group-head{ position: sticky; top: 0; }

/* === Tighter row internals for grid layout ===
   In narrow columns (320-400px), name+status need to wrap nicely. */
.inventory-row-v124 .ir-name-row{
  flex-wrap: wrap;
  gap: 6px;
}
.inventory-row-v124 .ir-name{
  font-size: 13px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-row-v124 .ir-status{
  font-size: 8px;
  padding: 2px 7px;
}
.inventory-row-v124 .ir-chips{
  margin-top: 3px;
  gap: 5px;
}
.inventory-row-v124 .ir-chip{
  padding: 2px 7px;
  font-size: 9px;
}

/* === Responsive — phone goes back to single column === */
@media (max-width: 600px){
  .inv-group-body{
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   V0.127 HOLD-TO-UNDO BUTTON
   - Replaces small text rollback buttons in the staff editor
   - 2.5 second hold to confirm (touchscreen-friendly)
   - Visual feedback visible AROUND the finger:
     * Fill bar inside the button (color change as you hold)
     * Halo ring outside the button perimeter (the part fingers
       can't cover)
   - Works with pointer events: mouse + touch + stylus
   ============================================================ */
.hold-undo{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 22px;
  border-radius: 14px;
  background: rgba(22,24,30,0.7);
  border: 2px solid var(--hu-accent, #5eebc8);
  color: var(--hu-accent, #5eebc8);
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform 140ms ease, background 200ms;
  flex: 1 1 240px;
  max-width: 100%;
}
.hold-undo:hover{
  background: rgba(46,48,56,0.7);
  transform: translateY(-1px);
}
.hold-undo:active{ transform: translateY(0); }
.hold-undo .hold-fill{
  position: absolute;
  inset: 0;
  background: var(--hu-accent, #5eebc8);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0ms linear, opacity 200ms ease;
  z-index: 0;
}
.hold-undo.is-holding .hold-fill{
  transform: scaleX(1);
  opacity: 0.28;
  transition: transform 2500ms linear, opacity 200ms ease;
}
.hold-undo.is-completed .hold-fill{
  transform: scaleX(1);
  opacity: 0.55;
  transition: opacity 200ms ease;
}
.hold-undo .hold-ring{
  position: absolute;
  inset: -10px;
  border: 3px solid var(--hu-accent, #5eebc8);
  border-radius: 22px;
  opacity: 0;
  transform: scale(0.94);
  transition: transform 0ms linear, opacity 180ms ease;
  pointer-events: none;
  z-index: -1;
  box-shadow: 0 0 30px var(--hu-accent, #5eebc8);
}
.hold-undo.is-holding .hold-ring{
  opacity: 0.65;
  transform: scale(1.05);
  transition: transform 2500ms ease-out, opacity 180ms ease;
}
.hold-undo.is-completed .hold-ring{
  opacity: 0.9;
  transform: scale(1.12);
  transition: transform 200ms ease, opacity 200ms ease;
}
.hold-undo .hold-label{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.hold-undo .hold-icon{
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  font-size: 14px;
  flex-shrink: 0;
}
.hold-undo.is-holding .hold-icon{
  animation: holdIconSpin 2500ms linear;
}
.hold-undo.is-completed .hold-icon{
  animation: none;
}
@keyframes holdIconSpin{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.hold-undo.is-holding{
  background: rgba(46,48,56,0.85);
}
.hold-undo.is-completed{
  background: var(--hu-accent, #5eebc8);
  color: #061018;
}
.hold-undo.is-completed .hold-label{
  text-shadow: none;
}

/* The rollback bar in the staff editor — adjust to host hold buttons */
.staff-editor-v123 .se-rollback-bar{
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px 14px;
}
.staff-editor-v123 .se-rollback-buttons{
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hold-undo .hold-fill{ transition: none !important; }
  .hold-undo .hold-ring{ transition: none !important; }
  .hold-undo.is-holding .hold-fill{ transition: transform 2500ms linear !important; }
  .hold-undo.is-holding .hold-ring{ transition: transform 2500ms linear !important; }
  .hold-undo .hold-icon{ animation: none !important; }
}

/* Phone — slightly smaller text but same hold target */
@media (max-width: 480px){
  .hold-undo{
    font-size: 12px;
    min-height: 50px;
    padding: 11px 16px;
  }
}


/* ============================================================
   V0.127 TANK MOVER + 5-COL STAFF HOME
   ============================================================ */

/* === Cyan tone for new staff home button === */
.staff-home-v120 .sh-tone-cyan{ --sh-accent: #5ed4dc; --sh-accent-bg: rgba(94,212,220,0.12); --sh-accent-border: rgba(94,212,220,0.32); }

/* === 5-column More tools row === */
.staff-home-v120 .sh-more-row{
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1100px){
  .staff-home-v120 .sh-more-row{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px){
  .staff-home-v120 .sh-more-row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .staff-home-v120 .sh-more-row{ grid-template-columns: 1fr; }
}

/* === Tank Mover overlay === */
.tank-mover-overlay .tank-mover-panel{
  width: 95%;
  max-width: 1400px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
}
.tank-mover-topbar{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tank-mover-subtitle{
  font-size: 12px;
  color: rgba(220,234,248,0.55);
  margin-top: 4px;
  max-width: 600px;
  line-height: 1.45;
}

/* === Status bar — idle vs holding a fish === */
.tank-mover-statusbar{
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.tm-status{
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(22,24,30,0.85);
  border: 1px solid rgba(220,234,248,0.18);
  backdrop-filter: blur(8px);
}
.tm-status-idle{
  font-size: 12px;
  font-weight: 700;
  color: rgba(220,234,248,0.55);
  text-align: center;
  letter-spacing: 0.04em;
}
.tm-status-active{
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(94,235,200,0.16), rgba(22,24,30,0.85));
  border-color: rgba(94,235,200,0.4);
  box-shadow: 0 8px 24px rgba(94,235,200,0.15);
  animation: tmStatusPulse 1.6s ease-in-out infinite;
}
@keyframes tmStatusPulse{
  0%, 100% { box-shadow: 0 8px 24px rgba(94,235,200,0.15); }
  50% { box-shadow: 0 8px 32px rgba(94,235,200,0.32); }
}
.tm-status-thumb{
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(46,48,56,0.5);
  border: 2px solid rgba(94,235,200,0.4);
  flex-shrink: 0;
}
.tm-status-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-thumb-placeholder{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: rgba(220,234,248,0.4);
  letter-spacing: 0.1em;
}
.tm-status-copy{
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.tm-status-copy span{
  font-size: 9px; font-weight: 900; letter-spacing: 0.16em;
  color: #5eebc8; text-transform: uppercase;
}
.tm-status-copy strong{
  font-size: 16px; font-weight: 900; color: #f4fbff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-status-copy em{
  font-size: 11px; font-weight: 600; color: rgba(220,234,248,0.6);
  font-style: normal;
}
.tm-status-cancel{
  padding: 9px 16px;
  background: rgba(220,90,90,0.14);
  border: 1px solid rgba(255,140,140,0.32);
  border-radius: 999px;
  color: #ff9a8a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms;
}
.tm-status-cancel:hover{ background: rgba(220,90,90,0.24); }

/* === Tank columns grid === */
.tank-mover-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.tm-column{
  display: flex;
  flex-direction: column;
  background: rgba(22,24,30,0.7);
  border: 1.5px solid rgba(220,234,248,0.18);
  border-radius: 14px;
  overflow: hidden;
  min-height: 200px;
  transition: border-color 200ms, background 200ms, transform 140ms;
}
.tm-column.is-drop-active{
  cursor: pointer;
  border-color: rgba(94,235,200,0.5);
  border-style: dashed;
  background: rgba(20,50,70,0.7);
}
.tm-column.is-drop-active:hover{
  border-color: #5eebc8;
  background: rgba(30,70,90,0.8);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(94,235,200,0.2);
}
.tm-column.tm-warn{
  border-color: rgba(255,140,140,0.32);
  background: rgba(40,15,15,0.5);
}
.tm-column.tm-warn .tm-column-head strong{ color: #ff9a8a; }

.tm-column-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  background: linear-gradient(180deg, rgba(46,48,56,0.6), rgba(22,24,30,0.4));
  border-bottom: 1px solid rgba(220,234,248,0.14);
}
.tm-column-head strong{
  font-size: 14px;
  font-weight: 900;
  color: #f4fbff;
}
.tm-column-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  background: rgba(94,235,200,0.14);
  border: 1px solid rgba(94,235,200,0.32);
  border-radius: 999px;
  color: #5eebc8;
  font-size: 11px;
  font-weight: 900;
}
.tm-column.tm-warn .tm-column-count{
  background: rgba(220,90,90,0.16);
  border-color: rgba(255,140,140,0.4);
  color: #ff9a8a;
}
.tm-column-body{
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.tm-empty{
  text-align: center;
  padding: 24px 12px;
  color: rgba(220,234,248,0.32);
  font-size: 11px;
  font-style: italic;
}
.tm-drop-hint{
  padding: 8px;
  margin: 0 8px 8px;
  text-align: center;
  background: rgba(94,235,200,0.1);
  border: 1px dashed rgba(94,235,200,0.4);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5eebc8;
}

/* === Fish chip === */
.tm-fish-chip{
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px 7px 7px;
  background: rgba(46,48,56,0.5);
  border: 1px solid rgba(220,234,248,0.16);
  border-left: 3px solid var(--cat-accent, #5eebc8);
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: #f4fbff;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 160ms, border-color 160ms, transform 120ms;
}
.tm-fish-chip:hover{
  background: rgba(64,68,80,0.7);
  transform: translateX(2px);
}
.tm-fish-chip.is-selected{
  background: rgba(94,235,200,0.2);
  border-color: #5eebc8;
  border-left-color: #5eebc8;
  box-shadow: 0 0 0 2px rgba(94,235,200,0.3), 0 4px 12px rgba(94,235,200,0.2);
  transform: translateY(-1px);
}
.tm-chip-thumb{
  width: 36px;
  height: 36px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(46,48,56,0.5);
  border: 1px solid rgba(220,234,248,0.18);
  flex-shrink: 0;
}
.tm-chip-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-chip-name{
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
  color: #f4fbff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-chip-tag{
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.tm-chip-tag-amber{ background: rgba(255,200,80,0.18); border: 1px solid rgba(255,200,80,0.4); color: #ffcb5e; }
.tm-chip-tag-purple{ background: rgba(180,130,255,0.18); border: 1px solid rgba(180,130,255,0.4); color: #c8b2ff; }

/* === Add new tank button === */
.tm-column-add{
  background: transparent;
  border: 2px dashed rgba(220,234,248,0.22);
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  min-height: 200px;
}
.tm-add-tank{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: rgba(220,234,248,0.5);
  font-family: inherit;
  cursor: pointer;
  padding: 16px;
  width: 100%;
  transition: color 160ms, transform 140ms;
}
.tm-add-tank:hover{
  color: #5eebc8;
  transform: scale(1.04);
}
.tm-add-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(94,235,200,0.1);
  border: 2px solid rgba(94,235,200,0.32);
  font-size: 28px;
  font-weight: 900;
  color: #5eebc8;
}
.tm-add-tank span:nth-child(2){
  font-size: 13px;
  font-weight: 800;
  color: inherit;
}
.tm-add-tank small{
  font-size: 10px;
  font-weight: 600;
  color: rgba(220,234,248,0.4);
  text-align: center;
}

/* === Responsive === */
@media (max-width: 760px){
  .tank-mover-overlay .tank-mover-panel{ padding: 16px; }
  .tank-mover-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
  .tm-column{ min-height: 160px; }
  .tm-status-active{ flex-wrap: wrap; }
  .tm-status-cancel{ width: 100%; padding: 11px; }
}
@media (max-width: 480px){
  .tank-mover-grid{ grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   V0.128 — visual refresh pack
   - Fish modal close button: single source of truth, lives on the card
   - Input modal: rainbow field accents + rainbow pills with color variety
   - Tank Mover: multi-select visuals, per-column accent stripes, warm
     drop-active state, selected chip rings in its own category color
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Fish modal close button (single source of truth) ---------- */
#fishOverlay .fish-modal { position: relative; }
#fishOverlay #closeFishBtn.modal-close,
#fishOverlay #closeFishBtn.modal-close.floating-modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: 12px !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 650 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center;
  background: linear-gradient(180deg, rgba(20, 40, 60, 0.92), rgba(8, 16, 28, 0.95));
  border: 1.5px solid rgba(200, 232, 255, 0.22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  color: #f4fbff;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(.4,0,.2,1), background 160ms, border-color 160ms;
}
#fishOverlay #closeFishBtn.modal-close:hover {
  transform: scale(1.08);
  background: linear-gradient(180deg, rgba(71, 31, 48, 0.95), rgba(40, 19, 29, 0.98));
  border-color: rgba(245, 97, 77, 0.42);
}
@media (max-width: 600px) and (pointer: coarse) {
  #fishOverlay #closeFishBtn.modal-close {
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    inset-inline-end: max(10px, env(safe-area-inset-right, 0px)) !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* ---------- Input modal field rework ---------- */
.input-modal-field {
  position: relative;
  margin-bottom: 14px;
  padding-left: 12px;
  border-left: 3px solid var(--field-accent, rgba(160, 210, 255, 0.3));
  transition: border-left-color 180ms;
}
.input-modal-field label {
  color: var(--field-accent, rgba(255, 255, 255, 0.4));
  opacity: 0.85;
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* v0.181 — KILLED ANOTHER LATE-CASCADE NAVY INPUT BLOCK.
   This was the THIRD .input-modal-field input definition in the file
   (after lines 1915 and 3814) and was the one actually winning the
   cascade because it's the last !important and sits at the bottom of
   the file. Was rgba(14,28,44) → rgba(8,16,28) navy with rgba(20,40,60)
   navy focus and #5eebc8 aqua focus border. Chris saw "dark blue
   search boxes" in the Add fish modal because of THIS rule.

   I literally wrote a comment 30 lines below this saying "REPLACED
   THE NAVY !IMPORTANT BLOCK" in v0.178pre — but I only replaced the
   .input-choice-btn and .input-modal sections of that block, not
   THIS .input-modal-field section. My bad. Now actually fixed.

   Migrated to design tokens so this rule + the two earlier ones at
   1915 and 3814 are all reading from the same source. */
.input-modal-field input,
.input-modal-field textarea,
.input-modal-field select {
  background: var(--ltc-surface-input) !important;
  border: 2px solid var(--ltc-border-input) !important;
  border-radius: var(--ltc-radius-md) !important;
  padding: 13px 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ltc-text-primary) !important;
  width: 100% !important;
  transition: border-color 180ms, box-shadow 180ms, background 180ms !important;
  font-family: inherit !important;
  box-shadow: var(--ltc-shadow-input) !important;
}
.input-modal-field input:focus,
.input-modal-field textarea:focus,
.input-modal-field select:focus {
  outline: none !important;
  border-color: var(--field-accent, var(--ltc-accent)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--field-accent, var(--ltc-accent)) 28%, transparent),
    0 4px 16px color-mix(in srgb, var(--field-accent, var(--ltc-accent)) 22%, transparent),
    var(--ltc-shadow-input) !important;
  background: var(--ltc-surface-input-focus) !important;
}
.input-modal-field input::placeholder,
.input-modal-field textarea::placeholder {
  color: var(--ltc-text-muted) !important;
}

/* ---------- Input modal pill grid — rainbow with color variety ---------- */
/* v0.178pre — REPLACED THE NAVY !IMPORTANT BLOCK.
   Same disaster as v0.166: a late-cascade block at line 9208 was
   re-setting .input-modal background to navy rgba(14,28,44) with
   !important, which silently overrode the v0.176 charcoal fix
   (which lives at line ~1500). The .input-choice-btn pills also
   used navy as the gradient base, so even with their accent color
   tint they read as "blue/aqua pillboxes on navy background".
   And the .btn-confirm was hardcoded teal with !important, making
   the v0.176 amber theme switch irrelevant.

   All three killed and replaced with charcoal + token-aware rules.
   Per design lesson #12 — fix the root cause not the symptom.
   This is exactly what the v0.177 token system is designed to
   prevent going forward; v0.178 migration will retire these
   one-off overrides entirely. */
.input-choice-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.input-choice-btn {
  position: relative;
  overflow: hidden;
  padding: 11px 16px !important;
  min-height: 42px;
  border-radius: 14px !important;
  /* v0.178pre — was navy gradient base. Now charcoal base with
     accent color tint via --pill-c. Default pill-c is amber, not
     blue, so an unset choice pill no longer reads as blue. */
  border: 1.5px solid color-mix(in srgb, var(--pill-c, #ffcb5e) 38%, rgba(220, 234, 248, 0.18)) !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pill-c, #ffcb5e) 12%, rgba(60, 64, 76, 0.92)),
    color-mix(in srgb, var(--pill-c, #ffcb5e) 5%, rgba(38, 40, 48, 0.96))) !important;
  color: #f4fbff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 160ms cubic-bezier(.4,0,.2,1),
              border-color 160ms, background 160ms, box-shadow 160ms !important;
}
.input-choice-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
}
.input-choice-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--pill-c, #ffcb5e) 60%, transparent) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pill-c, #ffcb5e) 24%, transparent);
}
.input-choice-btn.is-active {
  /* v0.178pre — charcoal base + accent tint, not navy base. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pill-c, #ffcb5e) 50%, rgba(60, 64, 76, 0.92)),
    color-mix(in srgb, var(--pill-c, #ffcb5e) 24%, rgba(38, 40, 48, 0.96))) !important;
  border-color: var(--pill-c, #ffcb5e) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pill-c, #ffcb5e) 38%, transparent),
              0 6px 18px color-mix(in srgb, var(--pill-c, #ffcb5e) 42%, transparent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* v0.178pre — confirm button no longer hardcoded teal. Now reads
   from the modal's --imc-accent variable which is set by the theme
   class on the parent modal. So a 'theme: amber' modal gets an
   amber confirm button automatically. */
.input-modal-actions .btn-confirm {
  background: linear-gradient(180deg,
    rgba(var(--imc-accent-rgb, 255, 203, 94), 0.32),
    rgba(var(--imc-accent-rgb, 255, 203, 94), 0.18)) !important;
  border: 1.5px solid rgba(var(--imc-accent-rgb, 255, 203, 94), 0.6) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.input-modal-actions .btn-cancel {
  background: rgba(60, 64, 76, 0.7) !important;
  border: 1.5px solid rgba(220, 234, 248, 0.18) !important;
  color: rgba(240, 248, 255, 0.78) !important;
  font-weight: 800 !important;
}
/* v0.178pre — modal panel charcoal, NOT navy. Was overriding the
   v0.176 fix because of !important on the late-cascade block. */
.input-modal {
  background: linear-gradient(180deg, rgba(38, 40, 48, 0.98), rgba(22, 24, 30, 0.99)) !important;
  border: 1.5px solid rgba(220, 234, 248, 0.14) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* ---------- Tank Mover v0.128 → v0.180: migrated to tokens.
   Was rgba(18,14,30) → rgba(8,16,28) → rgba(14,10,24) hardcoded
   navy gradient with !important. That's why the tank mover was
   the only menu still showing navy after the v0.179 migration —
   this rule was outside the inventory family I migrated. Now
   reads from --ltc-surface-panel which is true charcoal. ---------- */
.tank-mover-overlay .analytics-panel.tank-mover-panel {
  background: var(--ltc-surface-panel) !important;
  border: 1.5px solid var(--ltc-border-subtle) !important;
}
.tank-mover-topbar h2,
.tank-mover-topbar strong {
  background: linear-gradient(90deg, #7bcfff, #c8b2ff 30%, #ffcb5e 55%, #ff9bb6 80%, #5eebc8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
}
.tank-mover-subtitle {
  font-size: 13px !important;
  color: rgba(220, 234, 248, 0.72) !important;
  line-height: 1.5 !important;
}
.tm-status {
  padding: 14px 18px !important;
  border-radius: 16px !important;
}
.tm-status-idle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px !important;
  color: rgba(220, 234, 248, 0.72) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  font-weight: 600 !important;
  background: linear-gradient(180deg, rgba(14, 28, 44, 0.85), rgba(8, 16, 28, 0.9));
  border: 1px solid rgba(200, 232, 255, 0.1);
}
.tm-idle-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #7bcfff, #4a80c0);
  box-shadow: 0 0 10px rgba(123, 207, 255, 0.6);
  animation: tmIdlePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes tmIdlePulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}
.tm-status-active {
  background: linear-gradient(135deg,
    rgba(255, 180, 60, 0.22) 0%,
    rgba(255, 120, 80, 0.16) 50%,
    rgba(200, 120, 255, 0.14) 100%) !important;
  border: 1.5px solid rgba(255, 200, 100, 0.45) !important;
  box-shadow: 0 8px 28px rgba(255, 160, 60, 0.22),
              0 0 0 1px rgba(255, 200, 100, 0.15) inset !important;
  animation: tmActivePulse 1.8s ease-in-out infinite !important;
}
@keyframes tmActivePulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(255, 160, 60, 0.22), 0 0 0 1px rgba(255, 200, 100, 0.15) inset; }
  50% { box-shadow: 0 12px 40px rgba(255, 160, 60, 0.42), 0 0 0 1px rgba(255, 200, 100, 0.28) inset; }
}
.tm-status-active .tm-status-copy span {
  color: #ffcb5e !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
}
.tm-status-active .tm-status-copy strong {
  font-size: 15px !important;
}
.tm-status-stack {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  min-width: 72px;
  padding-left: 20px;
  flex-shrink: 0;
}
.tm-stack-thumb {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(8, 16, 28, 0.8);
  border: 2.5px solid rgba(255, 200, 100, 0.55);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin-left: -18px;
  flex-shrink: 0;
}
.tm-stack-thumb:first-child { margin-left: 0; }
.tm-stack-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-stack-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 180, 60, 0.36), rgba(255, 120, 80, 0.2));
  border: 2px solid rgba(255, 200, 100, 0.55);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  margin-left: -14px;
  flex-shrink: 0;
}
.tm-status-cancel {
  background: linear-gradient(180deg, rgba(220, 90, 90, 0.28), rgba(160, 50, 60, 0.22)) !important;
  border: 1.5px solid rgba(255, 140, 140, 0.5) !important;
  color: #ffcfcf !important;
  padding: 11px 20px !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
}
.tm-status-cancel:hover { background: linear-gradient(180deg, rgba(255, 100, 100, 0.4), rgba(180, 60, 70, 0.3)) !important; }

/* Column accent stripe — every column gets its own color */
.tm-column {
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tm-accent, #7bcfff) 6%, rgba(8, 16, 28, 0.8)) 0%,
    rgba(8, 16, 28, 0.82) 70%) !important;
  border: 1.5px solid color-mix(in srgb, var(--tm-accent, #7bcfff) 22%, rgba(200, 232, 255, 0.08)) !important;
  overflow: hidden;
}
.tm-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--tm-accent, #7bcfff) 0%,
    color-mix(in srgb, var(--tm-accent, #7bcfff) 60%, #fff) 50%,
    var(--tm-accent, #7bcfff) 100%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--tm-accent, #7bcfff) 48%, transparent);
}
.tm-column-head {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tm-accent, #7bcfff) 14%, rgba(20, 40, 70, 0.6)),
    color-mix(in srgb, var(--tm-accent, #7bcfff) 4%, rgba(8, 16, 28, 0.4))) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--tm-accent, #7bcfff) 22%, transparent) !important;
  padding: 12px 14px !important;
}
.tm-column-head strong {
  color: #fff !important;
  font-size: 14px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.tm-column-count {
  background: color-mix(in srgb, var(--tm-accent, #7bcfff) 22%, rgba(8, 16, 28, 0.5)) !important;
  border: 1px solid color-mix(in srgb, var(--tm-accent, #7bcfff) 48%, transparent) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

/* Drop-active state — warm amber, clearly different from the cool column accents */
.tm-column.is-drop-active {
  border-color: rgba(255, 200, 100, 0.55) !important;
  border-style: dashed !important;
  cursor: pointer;
  animation: tmDropReady 1.6s ease-in-out infinite;
}
@keyframes tmDropReady {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 100, 0.22); }
  50% { box-shadow: 0 0 0 4px rgba(255, 200, 100, 0.22), 0 8px 28px rgba(255, 160, 60, 0.18); }
}
.tm-column.is-drop-active:hover {
  border-color: #ffcb5e !important;
  background: linear-gradient(180deg, rgba(255, 180, 60, 0.18), rgba(14, 28, 44, 0.85)) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(255, 160, 60, 0.32) !important;
}
.tm-drop-hint {
  background: linear-gradient(90deg, rgba(255, 200, 100, 0.14), rgba(255, 140, 60, 0.14)) !important;
  border: 1px dashed rgba(255, 200, 100, 0.55) !important;
  color: #ffd88a !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tm-column.tm-warn {
  background: linear-gradient(180deg, rgba(60, 20, 24, 0.75), rgba(30, 12, 16, 0.85)) !important;
  border-color: rgba(255, 140, 140, 0.35) !important;
}
.tm-column.tm-warn::before {
  background: linear-gradient(90deg, #ff6b6b, #ffa8a8, #ff6b6b);
  box-shadow: 0 0 18px rgba(255, 107, 107, 0.5);
}

/* Fish chips — selected state now rings in the fish's OWN category color */
.tm-fish-chip {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cat-accent, #7bcfff) 10%, rgba(14, 28, 44, 0.55)),
    rgba(8, 16, 28, 0.7)) !important;
  border: 1px solid color-mix(in srgb, var(--cat-accent, #7bcfff) 18%, rgba(200, 232, 255, 0.08)) !important;
  border-left: 4px solid var(--cat-accent, #5eebc8) !important;
  padding: 8px 10px 8px 8px !important;
  transition: transform 140ms cubic-bezier(.4,0,.2,1),
              background 160ms, border-color 160ms, box-shadow 160ms !important;
}
.tm-fish-chip:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cat-accent, #7bcfff) 22%, rgba(20, 40, 70, 0.6)),
    rgba(14, 28, 44, 0.8)) !important;
  transform: translateX(3px) scale(1.015) !important;
  border-color: color-mix(in srgb, var(--cat-accent, #7bcfff) 48%, transparent) !important;
}
.tm-fish-chip.is-selected {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cat-accent, #7bcfff) 42%, rgba(14, 28, 44, 0.7)),
    color-mix(in srgb, var(--cat-accent, #7bcfff) 18%, rgba(8, 16, 28, 0.85))) !important;
  border-color: var(--cat-accent, #5eebc8) !important;
  border-left-color: #fff !important;
  box-shadow: 0 0 0 2.5px var(--cat-accent, #5eebc8),
              0 6px 18px color-mix(in srgb, var(--cat-accent, #5eebc8) 45%, transparent) !important;
  transform: translateY(-1.5px) translateX(2px) !important;
}
.tm-chip-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--cat-accent, #5eebc8);
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.tm-chip-name {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Add-new-tank column — purple accent so it stands apart */
.tm-column-add {
  background: linear-gradient(180deg, rgba(200, 178, 255, 0.06), rgba(14, 10, 24, 0.7)) !important;
  border: 2px dashed rgba(200, 178, 255, 0.32) !important;
}
.tm-column-add::before { display: none; }
.tm-add-tank:hover { color: #c8b2ff !important; }
.tm-add-icon {
  background: linear-gradient(180deg, rgba(200, 178, 255, 0.2), rgba(140, 112, 200, 0.1)) !important;
  border-color: rgba(200, 178, 255, 0.55) !important;
  color: #c8b2ff !important;
  box-shadow: 0 4px 14px rgba(140, 112, 200, 0.3);
}

/* ════════════════════════════════════════════════════════════
   v0.163 — Tank mover water tank visual
   Replaces the old plain-text .tm-column-head with a sloshing-water
   tank that has drifting fish silhouettes inside, derived from the
   actual fish in that tank. Each fish silhouette is colored by its
   CATEGORY color (Tangs blue, Wrasses purple, Clownfish orange, etc).
   Ported from LTC_Tank_Room_Layout_v3.html prototype.
   ════════════════════════════════════════════════════════════ */
.tm-tank-vis {
  position: relative;
  height: 172px;
  background: radial-gradient(ellipse at 50% 60%,
    rgba(8,12,20,0.96) 0%,
    rgba(2,4,8,1) 100%);
  border-bottom: 2px solid rgba(var(--tk-color, 123,207,255), 0.78);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.7), inset 0 -3px 8px rgba(0,0,0,0.5);
}
.tm-tk-water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
  overflow: hidden; z-index: 1;
}
.tm-tk-water-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--tk-color, 123,207,255), 0.55) 0%,
    rgba(var(--tk-color, 123,207,255), 0.34) 50%,
    rgba(var(--tk-color, 123,207,255), 0.18) 100%);
}
/* caustic light dappling on the tank floor — animated bright spots */
.tm-tk-caustics {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 30% 12% at 30% 95%, rgba(255,255,255,0.18), transparent 70%),
    radial-gradient(ellipse 24% 10% at 65% 95%, rgba(255,255,255,0.14), transparent 70%),
    radial-gradient(ellipse 18% 8% at 50% 92%, rgba(255,255,255,0.12), transparent 70%),
    radial-gradient(ellipse 22% 9% at 80% 95%, rgba(255,255,255,0.10), transparent 70%);
  animation: tmTkCaustics 7s ease-in-out infinite;
}
@keyframes tmTkCaustics {
  0%,100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; opacity: .85; }
  50%     { background-position: 6% 0%, -8% 0%, 4% 0%, -6% 0%; opacity: 1; }
}
.tm-tk-slosh {
  position: absolute;
  width: 320px; height: 320px;
  left: 50%; border-radius: 42%;
  margin-left: -160px;
  pointer-events: none;
}
.tm-tk-slosh-1 {
  top: -38%;
  background: rgba(var(--tk-color, 123,207,255), 0.5);
  animation: tmTkSlosh1 5.5s linear infinite;
}
.tm-tk-slosh-2 {
  top: -26%;
  background: rgba(var(--tk-color, 123,207,255), 0.28);
  animation: tmTkSlosh2 8s linear infinite;
}
@keyframes tmTkSlosh1 { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes tmTkSlosh2 { from{transform:rotate(0)} to{transform:rotate(-360deg)} }
.tm-tk-surface {
  position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.7) 0%,
    rgba(255,255,255,0.35) 40%,
    rgba(255,255,255,0) 100%);
  filter: blur(.7px);
  animation: tmTkSurfaceShimmer 4s ease-in-out infinite;
}
@keyframes tmTkSurfaceShimmer {
  0%,100% { opacity: .95; transform: translateY(0); }
  50%     { opacity: 1;   transform: translateY(.5px); }
}
.tm-tk-fish-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.tm-tk-fish-swim {
  position: absolute; width: 18px; height: 11px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 4px rgba(0,0,0,.4));
  animation: tmTkFishDrift var(--dur, 12s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.tm-tk-fish-swim svg { width: 100%; height: 100%; overflow: visible; }
@keyframes tmTkFishDrift {
  0%   { left: 8%;  transform: scaleX(1)  translateY(0); }
  23%  { left: 42%; transform: scaleX(1)  translateY(-1px); }
  47%  { left: 78%; transform: scaleX(1)  translateY(0); }
  50%  { left: 78%; transform: scaleX(-1) translateY(0); }
  73%  { left: 42%; transform: scaleX(-1) translateY(1px); }
  97%  { left: 8%;  transform: scaleX(-1) translateY(0); }
  100% { left: 8%;  transform: scaleX(1)  translateY(0); }
}
.tm-tk-bubble {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.95),
    rgba(180,220,255,0.5) 60%,
    rgba(140,200,240,0));
  border: 1px solid rgba(255,255,255,0.5);
  pointer-events: none; z-index: 3; opacity: 0;
  animation: tmTkBubble var(--bdur, 7s) ease-in infinite;
  animation-delay: var(--bdelay, 0s);
}
@keyframes tmTkBubble {
  0%   { bottom: 6%;  opacity: 0;   transform: scale(.5) translateX(0); }
  8%   { opacity: .95; transform: scale(1)  translateX(0); }
  40%  { transform: scale(1) translateX(2px); }
  60%  { transform: scale(1) translateX(-2px); }
  90%  { opacity: .5; }
  100% { bottom: 90%; opacity: 0;   transform: scale(.7); }
}
.tm-tk-gloss {
  position: absolute; top: 6px; left: 8px; right: 55%; height: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.24), rgba(255,255,255,0));
  border-radius: 8px;
  pointer-events: none; z-index: 4;
}
.tm-tk-gloss-vert {
  position: absolute; top: 8px; bottom: 14px; left: 8px; width: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
  border-radius: 3px;
  pointer-events: none; z-index: 4;
}
.tm-tk-letter {
  position: absolute; top: 8px; left: 12px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff;
  background: rgba(0,0,0,0.6);
  border: 1.5px solid rgba(var(--tk-color, 123,207,255), 0.95);
  border-radius: 50%;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,.5),
              0 0 10px rgba(var(--tk-color, 123,207,255), 0.3);
}
.tm-tk-count {
  position: absolute; top: 9px; right: 11px;
  font-size: 10px; font-weight: 900;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(var(--tk-color, 123,207,255), 0.7);
  color: rgba(var(--tk-color, 123,207,255), 1);
  z-index: 5;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  letter-spacing: .04em;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.tm-tk-name {
  position: absolute; bottom: 9px; left: 0; right: 0;
  text-align: center;
  font-size: 13px; font-weight: 900; color: #fff;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.95),
    0 0 8px rgba(0,0,0,0.85),
    0 0 14px rgba(0,0,0,0.6);
  letter-spacing: .03em;
  padding: 0 8px;
  z-index: 5;
}
/* warn variant for "no tank assigned" — red water border */
.tm-column.tm-warn .tm-tank-vis {
  border-bottom-color: rgba(255,154,138,0.78);
}
/* drop-target glow on the tank visual when something is being held */
.tm-column.is-drop-active .tm-tank-vis {
  border-bottom-color: rgba(255, 200, 100, 0.9);
}
@media (prefers-reduced-motion: reduce) {
  .tm-tk-slosh, .tm-tk-fish-swim, .tm-tk-bubble,
  .tm-tk-caustics, .tm-tk-surface { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-idle-dot, .tm-status-active, .tm-column.is-drop-active { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   V0.129 — inventory panel + foods color variety pack
   Breaks the "wall of aqua on blue" look across the Inventory Manager
   toolbar, filter dropdowns, quickbar, and the Foods section.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Inventory panel background ---------- */
#inventoryOverlay .analytics-panel.inventory-panel {
  /* v0.158 — migrated from navy/purple gradient to charcoal greys.
     The old values had rgba(18,14,30) / rgba(20,10,22) purple-navy
     tones that gave the panel a "hellhole" feel. New direction is
     neutral warm charcoal. */
  background: linear-gradient(165deg,
    rgba(30, 32, 38, 0.96) 0%,
    rgba(22, 24, 30, 0.98) 35%,
    rgba(28, 30, 36, 0.96) 100%) !important;
  border: 1.5px solid rgba(200, 232, 255, 0.09) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
}
#inventoryOverlay .analytics-panel.inventory-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    #7bcfff 0%, #5eebc8 18%, #b8e860 34%,
    #ffcb5e 50%, #ffa850 66%, #ff9bb6 82%, #c8b2ff 100%);
  border-radius: 24px 24px 0 0;
  opacity: 0.85;
  box-shadow: 0 0 24px rgba(180, 200, 255, 0.3);
  pointer-events: none;
  z-index: 2;
}
#inventoryOverlay .analytics-panel.inventory-panel { position: relative; }

/* ---------- Inventory toolbar shell ---------- */
.inventory-toolbar-shell {
  /* v0.158 — migrated from navy tones to warm charcoal */
  background: linear-gradient(180deg,
    rgba(36, 38, 46, 0.62),
    rgba(22, 24, 30, 0.48)) !important;
  border: 1px solid rgba(200, 232, 255, 0.09) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  backdrop-filter: blur(6px);
}

/* Each control label gets its own color accent */
.inventory-control { position: relative; padding-left: 10px; }
.inventory-control::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  /* v0.178 — was #7bcfff blue default. Now reads from --ltc-accent
     (amber by default). Per-control overrides below set semantic
     colors (search=blue, status=teal, category=purple) but the
     fallback is no longer blue. */
  background: var(--ctrl-accent, var(--ltc-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--ctrl-accent, var(--ltc-accent)) 45%, transparent);
}
.inventory-control-search { --ctrl-accent: var(--ltc-c-blue); }
.inventory-control:has(#inventoryStatusFilter) { --ctrl-accent: var(--ltc-c-teal); }
.inventory-control:has(#inventoryCategoryFilter) { --ctrl-accent: var(--ltc-c-purple); }
.inventory-control > span {
  color: var(--ctrl-accent, rgba(235, 245, 255, 0.55)) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  opacity: 0.9;
}

/* v0.166 → v0.174 → v0.178: Search bars and dropdowns.
   v0.178 — final consolidation. Migrated from hardcoded charcoal
   gradients to design tokens. The four legacy duplicate definitions
   earlier in this file have all been migrated to the same tokens
   so this rule is no longer fighting them — it's reinforcing them. */
.inventory-search,
.inventory-filter {
  background: var(--ltc-surface-input) !important;
  border: 2px solid var(--ltc-border-input) !important;
  color: var(--ltc-text-primary) !important;
  font-weight: 700 !important;
  min-height: var(--ltc-tap) !important;
  padding: 12px 14px !important;
  border-radius: var(--ltc-radius-md) !important;
  transition: border-color 180ms, box-shadow 180ms, background 180ms !important;
  box-shadow: var(--ltc-shadow-input) !important;
}
.inventory-search::placeholder {
  color: var(--ltc-text-muted) !important;
  font-style: italic;
}
.inventory-search:focus,
.inventory-filter:focus {
  outline: none !important;
  /* v0.178 — was --ctrl-accent which fell back to #5eebc8 aqua.
     Now uses the per-control semantic accent (set by the rules
     above: blue for search, teal for status, purple for category),
     which is now ALSO referencing tokens. Change the token, every
     focus state updates. */
  border-color: var(--ctrl-accent, var(--ltc-accent)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ctrl-accent, var(--ltc-accent)) 28%, transparent),
    0 4px 16px color-mix(in srgb, var(--ctrl-accent, var(--ltc-accent)) 22%, transparent),
    var(--ltc-shadow-input) !important;
  background: var(--ltc-surface-input-focus) !important;
}
#inventoryStatusFilter { --ctrl-accent: var(--ltc-c-teal); }
#inventoryCategoryFilter { --ctrl-accent: var(--ltc-c-purple); }
#inventorySearch { --ctrl-accent: var(--ltc-c-blue); }

/* Dropdowns get a colored chevron hint via gradient backgrounds on their arrow */
.inventory-filter {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ctrl-accent, var(--ltc-accent)) 50%),
                    linear-gradient(135deg, var(--ctrl-accent, var(--ltc-accent)) 50%, transparent 50%),
                    linear-gradient(180deg, rgba(76,82,96,0.96), rgba(58,62,74,0.98)) !important;
  background-position: calc(100% - 18px) calc(50% - 2px),
                       calc(100% - 13px) calc(50% - 2px),
                       0 0 !important;
  background-size: 6px 6px, 6px 6px, 100% 100% !important;
  background-repeat: no-repeat !important;
  padding-right: 38px !important;
}

/* v0.174 → v0.175 — Idle swimming fish in the empty inventory search.
   v0.174 attempted this with stacked radial gradients on the
   .inventory-control-search label and Chris reported it "does some
   weird ass shit" — almost certainly because the label wrapper is
   taller than the input itself (it has the "SEARCH" caption above)
   and the gradient fish was positioning relative to the wrong box.
   v0.175 fix: scope to a dedicated .inventory-search-wrap that
   contains ONLY the input + clear button, and use a single inline
   SVG data-URI background instead of stacked gradients (more
   reliable across browsers). The fish now lives in the actual
   input area, not the label area. */
.inventory-control-search {
  position: relative;
}
.inventory-search-wrap {
  position: relative;
  display: block;
  width: 100%;
}
/* Reserve room on the right for the clear X button so input text
   never bleeds into the icon. */
.inventory-search-wrap .inventory-search {
  padding-right: 44px !important;
}
/* Idle fish — single SVG background, animates left/right with a flip.
   Hidden when input has content or is focused. */
.inventory-search-wrap::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 22px;
  height: 14px;
  margin-top: -7px;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cellipse cx='17' cy='9' rx='9' ry='5' fill='rgba(123,207,255,0.78)' stroke='rgba(180,220,255,0.7)' stroke-width='0.8'/%3E%3Cpath d='M8 9 L1 3 L3 9 L1 15 Z' fill='rgba(94,235,200,0.7)' stroke='rgba(180,220,255,0.7)' stroke-width='0.8'/%3E%3Ccircle cx='22' cy='8' r='1.1' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 0 4px rgba(94,235,200,0.4));
  animation: invSearchFishSwim 8s cubic-bezier(.45,.05,.55,.95) infinite;
}
.inventory-search-wrap:has(input:not(:placeholder-shown))::before,
.inventory-search-wrap.has-value::before,
.inventory-search-wrap:focus-within::before {
  display: none;
}
@keyframes invSearchFishSwim {
  0%   { left: 14px;            opacity: 0; transform: scaleX(1); }
  8%   { opacity: 0.85; }
  44%  { left: calc(70% - 22px); opacity: 0.85; transform: scaleX(1); }
  48%  { transform: scaleX(-1); }
  52%  { transform: scaleX(-1); }
  56%  { transform: scaleX(1); }
  92%  { left: 14px;            opacity: 0.85; transform: scaleX(1); }
  100% { left: 14px;            opacity: 0; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .inventory-search-wrap::before { animation: none; opacity: 0.5; }
}

/* v0.175 — Clear X button. Red-tinted so it reads as "remove",
   but charcoal-bg so it doesn't fight the search bar. Only visible
   when the input has text. */
.inventory-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 90, 90, 0.18);
  border: 1.5px solid rgba(255, 154, 138, 0.55);
  border-radius: 50%;
  color: #ff9a8a;
  cursor: pointer;
  font-family: inherit;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms, transform 160ms, background 160ms, border-color 160ms;
}
.inventory-search-wrap:has(input:not(:placeholder-shown)) .inventory-search-clear,
.inventory-search-wrap.has-value .inventory-search-clear {
  opacity: 1;
  pointer-events: auto;
}
.inventory-search-clear:hover {
  background: rgba(220, 90, 90, 0.32);
  border-color: rgba(255, 154, 138, 0.85);
  transform: translateY(-50%) scale(1.06);
}
.inventory-search-clear:active {
  transform: translateY(-50%) scale(0.92);
}
@media (prefers-reduced-motion: reduce) {
  .inventory-search-clear { transition: none; }
}

/* v0.174 carryover — old gradient fish on .inventory-control-search
   removed entirely. Kept this rule with display:none in case any
   stale ::after lingers from an older cache. */
.inventory-control-search::after { display: none; }

/* v0.166 — chip filter rules here used to use --chip-c with nth-child
   rainbow cycling, which fought the v0.165 per-filter semantic colors
   via [data-filter]. Removed entirely. The v0.165 rules around line
   ~4135 in this file own chip styling now. Only minimal shared
   properties remain to make sure the chip is wide enough on this
   late-cascade pass. */
.inventory-chip-filter {
  min-height: 44px;
  font-weight: 800;
}

/* ---------- Inventory toolbar note (the help text blurb) ---------- */
.inventory-toolbar-note {
  /* v0.182 — was rgba(14,10,24) navy-purple. Now token charcoal. */
  background: linear-gradient(180deg, rgba(200, 178, 255, 0.10), rgba(28, 30, 38, 0.85)) !important;
  border: 1px solid rgba(200, 178, 255, 0.22) !important;
  color: rgba(230, 220, 255, 0.85) !important;
  border-radius: var(--ltc-radius-md) !important;
  padding: 12px 16px !important;
}

/* ---------- Foods section — rainbow chips and color-accented cards ---------- */
.food-settings-hero .food-settings-metric {
  /* v0.182 — was rgba(14,28,44)/rgba(8,16,28) navy base + #7bcfff
     blue default. Now charcoal base + amber default via tokens. */
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--metric-c, var(--ltc-accent)) 10%, rgba(46, 48, 56, 0.92)),
    rgba(28, 30, 38, 0.96)) !important;
  border: 1px solid color-mix(in srgb, var(--metric-c, var(--ltc-accent)) 28%, var(--ltc-border-subtle)) !important;
  border-radius: var(--ltc-radius-lg) !important;
  overflow: hidden;
}
.food-settings-hero .food-settings-metric::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--metric-c, var(--ltc-accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--metric-c, var(--ltc-accent)) 55%, transparent);
}
.food-settings-metrics .food-settings-metric:nth-child(4n+1) { --metric-c: #7bcfff; }
.food-settings-metrics .food-settings-metric:nth-child(4n+2) { --metric-c: #5eebc8; }
.food-settings-metrics .food-settings-metric:nth-child(4n+3) { --metric-c: #ffcb5e; }
.food-settings-metrics .food-settings-metric:nth-child(4n+4) { --metric-c: #c8b2ff; }
.food-settings-metric span {
  color: color-mix(in srgb, var(--metric-c, #7bcfff) 85%, #fff) !important;
  font-weight: 900;
  opacity: 0.88;
}
.food-settings-metric strong {
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--metric-c, #7bcfff) 42%, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
}

.food-settings-controls {
  background: linear-gradient(180deg, rgba(20, 30, 50, 0.55), rgba(10, 16, 28, 0.4)) !important;
  border: 1px solid rgba(200, 232, 255, 0.1) !important;
  border-radius: 18px !important;
  padding: 16px !important;
}

.food-search {
  position: relative;
  padding-left: 10px;
}
.food-search::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: #ffcb5e;
  box-shadow: 0 0 8px rgba(255, 203, 94, 0.5);
}
.food-search span {
  color: #ffcb5e !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
  opacity: 0.9;
}
.food-search input {
  background: linear-gradient(180deg, rgba(14, 28, 44, 0.92), rgba(8, 16, 28, 0.96)) !important;
  border: 1.5px solid rgba(255, 203, 94, 0.22) !important;
  min-height: 46px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
  color: #f4fbff !important;
  transition: border-color 180ms, box-shadow 180ms !important;
}
.food-search input:focus {
  outline: none !important;
  border-color: #ffcb5e !important;
  box-shadow: 0 0 0 3px rgba(255, 203, 94, 0.24),
              0 4px 16px rgba(255, 203, 94, 0.2) !important;
}

/* Food scope chips — rainbow palette */
.food-scope-chips {
  gap: 10px !important;
}
.food-scope-chip {
  position: relative;
  overflow: hidden;
  min-height: 40px !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--scope-c, #7bcfff) 10%, rgba(14, 28, 44, 0.85)),
    color-mix(in srgb, var(--scope-c, #7bcfff) 4%, rgba(8, 16, 28, 0.92))) !important;
  border: 1.5px solid color-mix(in srgb, var(--scope-c, #7bcfff) 30%, rgba(200, 232, 255, 0.08)) !important;
  color: #eef8ff !important;
  font-weight: 800 !important;
  transition: transform 160ms cubic-bezier(.4,0,.2,1),
              border-color 160ms, background 160ms, box-shadow 160ms !important;
}
.food-scope-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 45%);
  pointer-events: none;
}
.food-scope-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--scope-c, #7bcfff) 52%, transparent) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--scope-c, #7bcfff) 22%, transparent);
}
.food-scope-chip.is-active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--scope-c, #7bcfff) 48%, rgba(14, 28, 44, 0.88)),
    color-mix(in srgb, var(--scope-c, #7bcfff) 22%, rgba(8, 16, 28, 0.94))) !important;
  border-color: var(--scope-c, #7bcfff) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--scope-c, #7bcfff) 35%, transparent),
              0 6px 18px color-mix(in srgb, var(--scope-c, #7bcfff) 38%, transparent) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.food-scope-chip:nth-child(7n+1) { --scope-c: #7bcfff; }
.food-scope-chip:nth-child(7n+2) { --scope-c: #5eebc8; }
.food-scope-chip:nth-child(7n+3) { --scope-c: #ffcb5e; }
.food-scope-chip:nth-child(7n+4) { --scope-c: #ff9bb6; }
.food-scope-chip:nth-child(7n+5) { --scope-c: #c8b2ff; }
.food-scope-chip:nth-child(7n+6) { --scope-c: #ff9a8a; }
.food-scope-chip:nth-child(7n+7) { --scope-c: #b8e860; }

/* Food brand group headings — rainbow titles */
.food-brand-groups .food-brand-group {
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, rgba(20, 30, 50, 0.35), rgba(10, 16, 28, 0.2));
  border: 1px solid rgba(200, 232, 255, 0.06);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.food-brand-groups .food-brand-group::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brand-c, #7bcfff);
  box-shadow: 0 0 12px color-mix(in srgb, var(--brand-c, #7bcfff) 55%, transparent);
}
.food-brand-groups .food-brand-group:nth-child(7n+1) { --brand-c: #7bcfff; }
.food-brand-groups .food-brand-group:nth-child(7n+2) { --brand-c: #5eebc8; }
.food-brand-groups .food-brand-group:nth-child(7n+3) { --brand-c: #ffcb5e; }
.food-brand-groups .food-brand-group:nth-child(7n+4) { --brand-c: #ff9bb6; }
.food-brand-groups .food-brand-group:nth-child(7n+5) { --brand-c: #c8b2ff; }
.food-brand-groups .food-brand-group:nth-child(7n+6) { --brand-c: #ff9a8a; }
.food-brand-groups .food-brand-group:nth-child(7n+7) { --brand-c: #b8e860; }
.food-brand-group-head strong {
  color: var(--brand-c, #fff) !important;
  text-shadow: 0 0 18px color-mix(in srgb, var(--brand-c, #7bcfff) 42%, transparent);
  font-size: 19px !important;
  letter-spacing: -0.01em;
}
.food-brand-group-head span {
  background: color-mix(in srgb, var(--brand-c, #7bcfff) 18%, rgba(8, 16, 28, 0.5)) !important;
  border: 1px solid color-mix(in srgb, var(--brand-c, #7bcfff) 32%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--brand-c, #7bcfff) 80%, #fff) !important;
  font-weight: 900;
}

/* Food cards get a colored left bar matching their brand group's accent */
.food-brand-groups .food-brand-group .food-card {
  border-left: 4px solid color-mix(in srgb, var(--brand-c, #7bcfff) 85%, transparent) !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-c, #7bcfff) 6%, rgba(17, 39, 57, 0.92)),
    rgba(10, 20, 30, 0.96)) !important;
}
.food-brand-groups .food-brand-group .food-card .food-brand {
  color: var(--brand-c, #8fd8ff) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   V0.130 — polish pass
   - Staggered entrance for newly-rendered chips, metrics, brand groups
   - Floating bubble decorations on the Tank Mover topbar
   - Slight tactile lift on chip/tile press states
   ═══════════════════════════════════════════════════════════════════ */

@keyframes ltcChipDrop {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.92); }
  55%  { opacity: 1; transform: translateY(3px)   scale(1.02); }
  78%  { transform: translateY(-1px) scale(0.99); }
  100% { opacity: 1; transform: none; }
}
@keyframes ltcMetricRise {
  0%   { opacity: 0; transform: translateY(14px); }
  60%  { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: none; }
}
@keyframes ltcGroupFade {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}

/* Inventory quickbar chips: staggered drop-in */
.inventory-quickbar .inventory-chip-filter {
  opacity: 0;
  animation: ltcChipDrop 520ms cubic-bezier(.34,1.56,.64,1) forwards;
}
.inventory-quickbar .inventory-chip-filter:nth-child(1)  { animation-delay: 30ms; }
.inventory-quickbar .inventory-chip-filter:nth-child(2)  { animation-delay: 70ms; }
.inventory-quickbar .inventory-chip-filter:nth-child(3)  { animation-delay: 110ms; }
.inventory-quickbar .inventory-chip-filter:nth-child(4)  { animation-delay: 150ms; }
.inventory-quickbar .inventory-chip-filter:nth-child(5)  { animation-delay: 190ms; }
.inventory-quickbar .inventory-chip-filter:nth-child(6)  { animation-delay: 230ms; }
.inventory-quickbar .inventory-chip-filter:nth-child(7)  { animation-delay: 270ms; }
.inventory-quickbar .inventory-chip-filter:nth-child(8)  { animation-delay: 310ms; }
.inventory-quickbar .inventory-chip-filter:nth-child(9)  { animation-delay: 350ms; }
.inventory-quickbar .inventory-chip-filter:nth-child(n+10) { animation-delay: 390ms; }

/* Food metric cards: staggered rise on render */
.food-settings-metrics .food-settings-metric {
  opacity: 0;
  animation: ltcMetricRise 540ms cubic-bezier(.4,0,.2,1) forwards;
}
.food-settings-metrics .food-settings-metric:nth-child(1) { animation-delay: 40ms; }
.food-settings-metrics .food-settings-metric:nth-child(2) { animation-delay: 110ms; }
.food-settings-metrics .food-settings-metric:nth-child(3) { animation-delay: 180ms; }
.food-settings-metrics .food-settings-metric:nth-child(4) { animation-delay: 250ms; }

/* Food scope chips: staggered drop-in (same easing as inventory chips) */
.food-scope-chips .food-scope-chip {
  opacity: 0;
  animation: ltcChipDrop 480ms cubic-bezier(.34,1.56,.64,1) forwards;
}
.food-scope-chips .food-scope-chip:nth-child(1) { animation-delay: 60ms; }
.food-scope-chips .food-scope-chip:nth-child(2) { animation-delay: 110ms; }
.food-scope-chips .food-scope-chip:nth-child(3) { animation-delay: 160ms; }
.food-scope-chips .food-scope-chip:nth-child(4) { animation-delay: 210ms; }
.food-scope-chips .food-scope-chip:nth-child(5) { animation-delay: 260ms; }
.food-scope-chips .food-scope-chip:nth-child(6) { animation-delay: 310ms; }
.food-scope-chips .food-scope-chip:nth-child(n+7) { animation-delay: 360ms; }

/* Food brand groups: gentle fade-up cascade */
.food-brand-groups .food-brand-group {
  opacity: 0;
  animation: ltcGroupFade 540ms cubic-bezier(.4,0,.2,1) forwards;
}
.food-brand-groups .food-brand-group:nth-child(1) { animation-delay: 80ms; }
.food-brand-groups .food-brand-group:nth-child(2) { animation-delay: 160ms; }
.food-brand-groups .food-brand-group:nth-child(3) { animation-delay: 240ms; }
.food-brand-groups .food-brand-group:nth-child(4) { animation-delay: 320ms; }
.food-brand-groups .food-brand-group:nth-child(5) { animation-delay: 400ms; }
.food-brand-groups .food-brand-group:nth-child(n+6) { animation-delay: 480ms; }

/* Tank Mover topbar — floating bubbles decoration */
.tank-mover-topbar {
  position: relative;
  padding-right: 96px;
}
.tank-mover-topbar::before,
.tank-mover-topbar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(220, 245, 255, 0.85), rgba(140, 200, 240, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(140, 200, 240, 0.5));
}
.tank-mover-topbar::before {
  top: 8px;
  right: 28px;
  width: 14px;
  height: 14px;
  animation: tmFloatBubble 4.8s ease-in-out infinite;
}
.tank-mover-topbar::after {
  top: 26px;
  right: 56px;
  width: 9px;
  height: 9px;
  animation: tmFloatBubble 5.6s ease-in-out infinite 1.2s;
}
@keyframes tmFloatBubble {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
  50%      { transform: translateY(-10px) scale(1.08); opacity: 1; }
}

/* Tank Mover topbar — subtle third bubble for depth */
.tank-mover-statusbar {
  position: relative;
}
.tank-mover-statusbar::before {
  content: "";
  position: absolute;
  top: -2px;
  right: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(220, 245, 255, 0.7), rgba(140, 200, 240, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
  animation: tmFloatBubble 4.2s ease-in-out infinite 0.6s;
  z-index: 2;
}

/* Snappier press feedback on chips and tiles */
.inventory-chip-filter:active,
.food-scope-chip:active,
.sh-tile:active,
.sh-circle-btn:active {
  transform: translateY(2px) scale(0.97) !important;
  transition-duration: 80ms !important;
}

/* Reduced motion: kill the entrances and floating bubbles */
@media (prefers-reduced-motion: reduce) {
  .inventory-quickbar .inventory-chip-filter,
  .food-settings-metrics .food-settings-metric,
  .food-scope-chips .food-scope-chip,
  .food-brand-groups .food-brand-group {
    opacity: 1 !important;
    animation: none !important;
  }
  .tank-mover-topbar::before,
  .tank-mover-topbar::after,
  .tank-mover-statusbar::before {
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   V0.131 — hold-undo shrink, Tank Mover DnD visuals, bolder TM borders,
            category-aware dropdown tinting, extra pill/bubble sprinkles
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Shrink hold-undo to a sensible size ---------- */
.hold-undo {
  min-height: 36px !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  border-width: 1.5px !important;
  border-radius: 10px !important;
  gap: 7px !important;
  flex: 1 1 180px !important;
  letter-spacing: 0.03em !important;
}
.hold-undo .hold-icon {
  width: 18px !important;
  height: 18px !important;
  font-size: 11px !important;
  background: rgba(0, 0, 0, 0.38) !important;
}
.hold-undo .hold-icon svg {
  width: 11px !important;
  height: 11px !important;
}
.hold-undo.is-holding .hold-fill {
  transition: transform 1250ms linear, opacity 180ms ease !important;
}
.hold-undo.is-holding .hold-ring {
  transition: transform 1250ms ease-out, opacity 160ms ease !important;
}
.hold-undo .hold-ring {
  inset: -7px !important;
  border-width: 2px !important;
  border-radius: 16px !important;
  box-shadow: 0 0 22px var(--hu-accent, #5eebc8) !important;
}
.hold-undo.is-holding .hold-icon {
  animation: holdIconSpin 1250ms linear !important;
}
@media (max-width: 480px) {
  .hold-undo {
    min-height: 34px !important;
    padding: 5px 12px !important;
    font-size: 10px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hold-undo.is-holding .hold-fill { transition: transform 1250ms linear !important; }
  .hold-undo.is-holding .hold-ring { transition: transform 1250ms linear !important; }
}

/* ---------- Bolder Tank Mover column borders ---------- */
.tm-column {
  border-width: 2.5px !important;
  border-color: color-mix(in srgb, var(--tm-accent, #7bcfff) 45%, rgba(200, 232, 255, 0.12)) !important;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--tm-accent, #7bcfff) 14%, transparent),
              0 0 0 1px color-mix(in srgb, var(--tm-accent, #7bcfff) 18%, transparent) inset !important;
}
.tm-column::before {
  height: 6px !important;
  box-shadow: 0 0 22px color-mix(in srgb, var(--tm-accent, #7bcfff) 65%, transparent),
              0 2px 12px color-mix(in srgb, var(--tm-accent, #7bcfff) 40%, transparent) !important;
}
.tm-column-head {
  padding-top: 14px !important;
}
.tm-column:hover {
  border-color: color-mix(in srgb, var(--tm-accent, #7bcfff) 75%, transparent) !important;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--tm-accent, #7bcfff) 28%, transparent),
              0 0 0 1px color-mix(in srgb, var(--tm-accent, #7bcfff) 35%, transparent) inset !important;
}

/* ---------- Drag-and-drop states ---------- */
.tm-fish-chip {
  cursor: grab !important;
}
.tm-fish-chip:active {
  cursor: grabbing !important;
}
.tm-fish-chip.is-dragging {
  opacity: 0.35 !important;
  transform: scale(0.92) rotate(-2deg) !important;
  filter: blur(0.5px);
}
.tm-column.is-drag-over {
  border-color: #ffcb5e !important;
  border-style: dashed !important;
  background: linear-gradient(180deg,
    rgba(255, 200, 100, 0.22),
    rgba(255, 140, 60, 0.12) 60%,
    rgba(14, 28, 44, 0.88)) !important;
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 0 0 3px rgba(255, 200, 100, 0.35),
              0 16px 42px rgba(255, 160, 60, 0.42) !important;
  animation: tmDragGlow 900ms ease-in-out infinite !important;
}
.tm-column.is-drag-over::before {
  background: linear-gradient(90deg, #ffcb5e, #ffa850, #ffcb5e) !important;
  box-shadow: 0 0 28px rgba(255, 200, 100, 0.75) !important;
  height: 7px !important;
}
@keyframes tmDragGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 200, 100, 0.35), 0 16px 42px rgba(255, 160, 60, 0.42); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 200, 100, 0.5),  0 20px 52px rgba(255, 160, 60, 0.58); }
}
.tm-column.is-drag-over .tm-column-head strong {
  color: #ffe29a !important;
  text-shadow: 0 1px 4px rgba(255, 160, 60, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .tm-column.is-drag-over { animation: none !important; }
  .tm-fish-chip.is-dragging { filter: none; }
}

/* ---------- Category dropdown gets JS-set accent color treatment ----------
   The JS sets --ctrl-accent as an inline style; these rules pick up the var
   and make sure the JS override wins over the v0.129 default. */
#inventoryCategoryFilter {
  border-color: color-mix(in srgb, var(--ctrl-accent, #c8b2ff) 32%, rgba(200, 232, 255, 0.14)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ctrl-accent, #c8b2ff) 18%, transparent),
              0 4px 14px color-mix(in srgb, var(--ctrl-accent, #c8b2ff) 14%, transparent) !important;
  transition: border-color 220ms, box-shadow 220ms, background 220ms !important;
}
#inventoryCategoryFilter:focus {
  border-color: var(--ctrl-accent, #c8b2ff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctrl-accent, #c8b2ff) 28%, transparent),
              0 6px 20px color-mix(in srgb, var(--ctrl-accent, #c8b2ff) 32%, transparent) !important;
}
.inventory-control:has(#inventoryCategoryFilter)::before {
  background: var(--ctrl-accent, #c8b2ff) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--ctrl-accent, #c8b2ff) 55%, transparent) !important;
}
.inventory-control:has(#inventoryCategoryFilter) > span {
  color: var(--ctrl-accent, #c8b2ff) !important;
}

/* ---------- More LTC_Keepers pill/bubble treatments ---------- */
/* Staff action buttons in the editor — give them the palette wash */
.staff-editor-v123 .staff-action-btn {
  background: linear-gradient(180deg,
    rgba(94, 235, 200, 0.1),
    rgba(14, 28, 44, 0.85)) !important;
  border: 1.5px solid rgba(94, 235, 200, 0.28) !important;
  min-height: 42px;
  transition: transform 140ms cubic-bezier(.4,0,.2,1),
              border-color 160ms, background 160ms, box-shadow 160ms !important;
}
.staff-editor-v123 .staff-action-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(94, 235, 200, 0.55) !important;
  box-shadow: 0 6px 18px rgba(94, 235, 200, 0.22);
}
.staff-editor-v123 .staff-action-btn:active {
  transform: translateY(1px) scale(0.98) !important;
}

/* Compare bar chips — rainbow-ish so compared fish stand out */
.compare-bar .chip {
  background: linear-gradient(180deg,
    rgba(123, 207, 255, 0.18),
    rgba(14, 28, 44, 0.85)) !important;
  border: 1.5px solid rgba(123, 207, 255, 0.4) !important;
  transition: transform 140ms cubic-bezier(.4,0,.2,1), box-shadow 160ms !important;
}
.compare-bar .chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(123, 207, 255, 0.28);
}

/* Tank pill row on the staff home — apply rainbow cycle via nth-child */
.sh-tank-strip .tank-pill,
.staff-home-v120 .tank-pill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pill-c, #7bcfff) 12%, rgba(14, 28, 44, 0.85)),
    color-mix(in srgb, var(--pill-c, #7bcfff) 4%, rgba(8, 16, 28, 0.92))) !important;
  border: 1.5px solid color-mix(in srgb, var(--pill-c, #7bcfff) 34%, transparent) !important;
  color: #fff !important;
  transition: transform 140ms cubic-bezier(.4,0,.2,1),
              border-color 160ms, box-shadow 160ms !important;
}
.sh-tank-strip .tank-pill:hover,
.staff-home-v120 .tank-pill:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pill-c, #7bcfff) 65%, transparent) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pill-c, #7bcfff) 26%, transparent);
}
.sh-tank-strip .tank-pill:nth-child(7n+1),
.staff-home-v120 .tank-pill:nth-child(7n+1) { --pill-c: #7bcfff; }
.sh-tank-strip .tank-pill:nth-child(7n+2),
.staff-home-v120 .tank-pill:nth-child(7n+2) { --pill-c: #5eebc8; }
.sh-tank-strip .tank-pill:nth-child(7n+3),
.staff-home-v120 .tank-pill:nth-child(7n+3) { --pill-c: #ffcb5e; }
.sh-tank-strip .tank-pill:nth-child(7n+4),
.staff-home-v120 .tank-pill:nth-child(7n+4) { --pill-c: #ff9bb6; }
.sh-tank-strip .tank-pill:nth-child(7n+5),
.staff-home-v120 .tank-pill:nth-child(7n+5) { --pill-c: #c8b2ff; }
.sh-tank-strip .tank-pill:nth-child(7n+6),
.staff-home-v120 .tank-pill:nth-child(7n+6) { --pill-c: #ff9a8a; }
.sh-tank-strip .tank-pill:nth-child(7n+7),
.staff-home-v120 .tank-pill:nth-child(7n+7) { --pill-c: #b8e860; }

/* Mode toggle buttons (buy/encyclopedia) — bubble-button press + glow */
.mode-btn {
  transition: transform 140ms cubic-bezier(.4,0,.2,1),
              box-shadow 180ms, border-color 180ms !important;
}
.mode-btn:hover {
  box-shadow: 0 6px 18px rgba(123, 207, 255, 0.22) !important;
}
.mode-btn:active {
  transform: translateY(2px) scale(0.97) !important;
}

/* Input modal Confirm button — stronger bubble-button feel */
.input-modal-actions .btn-confirm {
  position: relative;
  overflow: hidden;
  transition: transform 140ms cubic-bezier(.4,0,.2,1), box-shadow 180ms, background 180ms !important;
}
.input-modal-actions .btn-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(94, 235, 200, 0.36) !important;
}
.input-modal-actions .btn-confirm:active {
  transform: translateY(1px) scale(0.98);
}


/* ═══════════════════════════════════════════════════════════════════
   V0.132 — Foods rework: brand badges, type icons, collapse, identity
   ═══════════════════════════════════════════════════════════════════ */

/* Override the v0.129 rainbow nth-child stripe — brand-specific color wins */
.food-brand-groups .food-brand-group {
  padding: 0 !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-c, #7bcfff) 7%, rgba(20, 30, 50, 0.45)),
    rgba(10, 16, 28, 0.4)) !important;
  border: 1.5px solid color-mix(in srgb, var(--brand-c, #7bcfff) 24%, rgba(200, 232, 255, 0.06)) !important;
  border-radius: 18px !important;
  overflow: hidden;
  position: relative;
}
.food-brand-groups .food-brand-group::before {
  content: "" !important;
  height: 4px !important;
  background: linear-gradient(90deg,
    var(--brand-c, #7bcfff) 0%,
    color-mix(in srgb, var(--brand-c, #7bcfff) 65%, #fff) 50%,
    var(--brand-c, #7bcfff) 100%) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--brand-c, #7bcfff) 60%, transparent) !important;
  position: absolute;
  top: 0; left: 0; right: 0;
  pointer-events: none;
  z-index: 1;
}

/* Brand head — clickable button with badge, title, chevron */
.food-brand-group-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 16px 18px 14px !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-c, #7bcfff) 14%, rgba(20, 30, 50, 0.55)),
    color-mix(in srgb, var(--brand-c, #7bcfff) 4%, rgba(10, 16, 28, 0.4))) !important;
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-c, #7bcfff) 22%, transparent) !important;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 200ms;
}
.food-brand-group-head:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-c, #7bcfff) 22%, rgba(20, 30, 50, 0.6)),
    color-mix(in srgb, var(--brand-c, #7bcfff) 8%, rgba(10, 16, 28, 0.45))) !important;
}
.food-brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.food-brand-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}
.food-brand-group-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.food-brand-group-title strong {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--brand-c, #fff) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.005em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--brand-c, #7bcfff) 38%, transparent);
}
.food-brand-group-title em {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: rgba(220, 234, 248, 0.55) !important;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.food-brand-chev {
  font-size: 18px;
  color: color-mix(in srgb, var(--brand-c, #7bcfff) 75%, #fff);
  transition: transform 240ms cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
  padding: 0 4px;
}
.food-brand-group.is-collapsed .food-brand-chev {
  transform: rotate(-90deg);
}

/* Collapsed state — hide the body, keep the head */
.food-brand-group .food-settings-grid {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  max-height: 4000px;
  overflow: hidden;
  transition: max-height 320ms cubic-bezier(.4,0,.2,1), padding 320ms cubic-bezier(.4,0,.2,1), opacity 200ms;
  opacity: 1;
}
.food-brand-group.is-collapsed .food-settings-grid {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* ---------- Food card body — two-column layout ---------- */
.food-card-toggle {
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-c, #7bcfff) 5%, rgba(14, 28, 44, 0.85)),
    rgba(8, 16, 28, 0.92)) !important;
  border: 1.5px solid color-mix(in srgb, var(--brand-c, #7bcfff) 18%, rgba(200, 232, 255, 0.08)) !important;
  border-left: 4px solid var(--brand-c, #7bcfff) !important;
  border-radius: 14px !important;
  padding: 12px 12px 12px 14px !important;
  transition: transform 160ms cubic-bezier(.4,0,.2,1),
              border-color 180ms, box-shadow 180ms;
}
.food-card-toggle:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-c, #7bcfff) 38%, transparent) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-c, #7bcfff) 22%, transparent);
}
.food-card-toggle.is-featured {
  border-color: color-mix(in srgb, var(--brand-c, #7bcfff) 55%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-c, #7bcfff) 38%, transparent),
              0 8px 24px color-mix(in srgb, var(--brand-c, #7bcfff) 28%, transparent);
}
.food-card-toggle.is-dim {
  opacity: 0.55;
  filter: saturate(0.6);
}
.food-card-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px;
}
.food-card-body {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: start;
}
.food-type-svg {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,
    color-mix(in srgb, currentColor 12%, rgba(8, 16, 28, 0.6)),
    rgba(8, 16, 28, 0.85));
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  flex-shrink: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, currentColor 18%, transparent),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.food-type-svg svg {
  width: 36px;
  height: 36px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.food-card-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.food-card-text .food-name {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #f4fbff !important;
  line-height: 1.25;
  margin: 0 !important;
}
.food-card-text .food-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0;
}
.food-card-text .food-notes {
  font-size: 11.5px !important;
  line-height: 1.45;
  color: rgba(220, 234, 248, 0.7) !important;
  margin-top: 2px;
}

/* Type-specific pill colors so types are scannable at a glance */
.food-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  border: 1px solid !important;
}
.food-badge[data-food-type-pill="frozen"]   { background: rgba(80, 180, 255, 0.18); border-color: rgba(80, 180, 255, 0.55); color: #80c8ff; }
.food-badge[data-food-type-pill="pellet"]   { background: rgba(255, 180, 80, 0.16); border-color: rgba(255, 180, 80, 0.55); color: #ffcb5e; }
.food-badge[data-food-type-pill="flake"]    { background: rgba(180, 232, 100, 0.16); border-color: rgba(180, 232, 100, 0.5); color: #b8e860; }
.food-badge[data-food-type-pill="sheet"]    { background: rgba(94, 200, 140, 0.18); border-color: rgba(94, 200, 140, 0.5); color: #80d8b8; }
.food-badge[data-food-type-pill="liquid"]   { background: rgba(200, 130, 255, 0.18); border-color: rgba(200, 130, 255, 0.5); color: #c8b2ff; }
.food-badge[data-food-type-pill="live"]     { background: rgba(255, 140, 110, 0.18); border-color: rgba(255, 140, 110, 0.55); color: #ff9a8a; }

.food-badge[data-food-stage="staple"]    { background: rgba(94, 235, 200, 0.14); border-color: rgba(94, 235, 200, 0.45); color: #5eebc8; }
.food-badge[data-food-stage="rotate"]    { background: rgba(123, 207, 255, 0.14); border-color: rgba(123, 207, 255, 0.45); color: #7bcfff; }
.food-badge[data-food-stage="specialty"] { background: rgba(200, 178, 255, 0.14); border-color: rgba(200, 178, 255, 0.45); color: #c8b2ff; }
.food-badge[data-food-stage="support"]   { background: rgba(255, 200, 100, 0.14); border-color: rgba(255, 200, 100, 0.45); color: #ffcb5e; }

/* Star button — brand-color glow when active */
.feature-star {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(20, 30, 50, 0.6);
  border: 1px solid rgba(200, 232, 255, 0.12);
  color: rgba(220, 234, 248, 0.4);
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.4,0,.2,1), color 160ms, background 160ms, border-color 160ms;
}
.feature-star:hover {
  transform: scale(1.1);
  color: var(--brand-c, #ffcb5e);
  border-color: color-mix(in srgb, var(--brand-c, #ffcb5e) 45%, transparent);
}
.feature-star.active {
  background: linear-gradient(180deg, var(--brand-c, #ffcb5e), color-mix(in srgb, var(--brand-c, #ffcb5e) 75%, #000));
  color: #fff;
  border-color: color-mix(in srgb, var(--brand-c, #ffcb5e) 65%, transparent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand-c, #ffcb5e) 55%, transparent);
}

.food-toggle.compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(20, 30, 50, 0.6);
  border: 1px solid rgba(200, 232, 255, 0.12);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(220, 234, 248, 0.78);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.food-toggle.compact input { accent-color: var(--brand-c, #5eebc8); }

@media (max-width: 480px) {
  .food-brand-group .food-settings-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .food-card-body { grid-template-columns: 52px 1fr; gap: 10px; }
  .food-type-svg { width: 52px; height: 52px; }
  .food-type-svg svg { width: 32px; height: 32px; }
}


/* ═══════════════════════════════════════════════════════════════════
   V0.133 — Food image frame (real photo with SVG fallback)
   ═══════════════════════════════════════════════════════════════════ */

.food-image-frame {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, currentColor 14%, rgba(8, 16, 28, 0.7)),
    rgba(8, 16, 28, 0.92));
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
  flex-shrink: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, currentColor 22%, transparent),
              0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  display: flex;
  align-items: center;
  justify-content: center;
}
.food-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 45%);
  z-index: 2;
}
.food-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.food-svg-fallback {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}
.food-svg-fallback svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
/* When the photo successfully loads it sits on top of the SVG; when both
   the local file and the URL fallback fail, .no-photo is set on the frame
   and the SVG becomes visible. */
.food-image-frame.no-photo .food-svg-fallback {
  z-index: 2;
}
.food-image-frame:not(.no-photo) .food-svg-fallback {
  opacity: 0.25;
}

@media (max-width: 480px) {
  .food-image-frame { width: 56px; height: 56px; }
  .food-svg-fallback { width: 32px; height: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   v0.150 — RECEIVE FLOW OVERLAY (Add Fish/Invert rebuild)
   ═══════════════════════════════════════════════════════════════
   2-step custom modal that replaces the old showInputModal-based
   wall-of-fields layout. Step 1 = fish picker grid with rainbow
   category chips and search. Step 2 = themed form with essentials
   up top + collapsible "more details" expander.
   ─────────────────────────────────────────────────────────────── */

.receive-flow-overlay{
  position:fixed; inset:0; z-index:115;
  display:none; align-items:center; justify-content:center;
  background:rgba(4,8,16,0.88); backdrop-filter:blur(10px);
  padding:20px;
}
.receive-flow-overlay.show{display:flex}

.receive-flow-panel{
  width:100%;
  max-width:980px;
  max-height:92vh;
  /* v0.180 — migrated to tokens */
  background: var(--ltc-surface-panel);
  border: 1px solid var(--ltc-border-subtle);
  border-radius: var(--ltc-radius-xl);
  box-shadow:
    0 40px 100px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.04);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation: rfPanelIn .42s cubic-bezier(.34,1.2,.42,1);
}
@keyframes rfPanelIn{
  0%   {opacity:0; transform:translateY(20px) scale(.96)}
  100% {opacity:1; transform:translateY(0) scale(1)}
}

/* ─── Header ────────────────────────────────────────────────────── */
/* v0.152 — header chrome de-greened. Was teal-tinted background +
   teal back button + teal title icon + teal step indicators. ALL of
   this is now neutral grey/white. Teal only survives where it has
   semantic meaning (not chrome). The receive flow's primary color
   identity comes from the SELECTED FISH'S category color downstream,
   not from a hardcoded brand teal. */
.rf-header{
  display:flex; align-items:center; gap:14px;
  padding:18px 22px;
  background:linear-gradient(180deg,
    rgba(28,32,42,0.95),
    rgba(20,24,32,0.95));
  border-bottom:1px solid rgba(255,255,255,0.08);
  flex:0 0 auto;
}
.rf-back-btn{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px 9px 11px;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  border:1.5px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.85);
  font-size:13px; font-weight:800;
  cursor:pointer; font-family:inherit;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
  flex:0 0 auto;
}
.rf-back-btn svg{width:16px; height:16px}
.rf-back-btn:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.32);
  transform:translateX(-2px);
}
.rf-back-btn:active{transform:scale(.97)}
.rf-back-btn[hidden]{display:none}

.rf-title{
  display:flex; align-items:center; gap:14px;
  flex:1; min-width:0;
}
.rf-title-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:14px;
  background:rgba(255,255,255,0.08);
  border:1.5px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.92);
  flex:0 0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);
}
.rf-title-icon svg{width:24px; height:24px}
.rf-title-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.rf-title-text strong{
  font-size:19px; font-weight:900; color:#f4fbff;
  letter-spacing:.01em;
}
.rf-title-text span{
  font-size:12px; font-weight:700;
  color:rgba(232,243,251,0.55);
  letter-spacing:.04em;
}
.rf-close-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,0.06);
  border:1.5px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.7);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
  -webkit-tap-highlight-color:transparent;
  flex:0 0 auto;
}
.rf-close-btn svg{width:18px; height:18px}
.rf-close-btn:hover{
  background:rgba(255,154,138,0.18);
  border-color:rgba(255,154,138,0.42);
  color:#ff9a8a;
}
.rf-close-btn:active{transform:scale(.94)}

/* v0.152 — Step indicator de-greened. Was teal active state. Now
   uses neutral white for inactive, and the active step glows in a
   contextual color: PURPLE when on step 1 (picking), GOLD when on
   step 2 (filling). Avoids the teal chrome trap and makes the active
   step visually meaningful, not just "the one with the brand color". */
.rf-stepbar{
  display:flex; align-items:center; gap:14px;
  padding:14px 22px;
  background:rgba(16,20,28,0.6);
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex:0 0 auto;
}
.rf-step{
  display:flex; align-items:center; gap:9px;
  font-size:12px; font-weight:800;
  letter-spacing:.05em;
  color:rgba(232,243,251,0.42);
  transition:color .25s ease;
}
.rf-step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1.5px solid rgba(255,255,255,0.18);
  font-size:12px; font-weight:900;
  transition:background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
/* Step 1 active = PURPLE (browsing/picking) */
.rf-step-1.is-active{color:#c8b2ff}
.rf-step-1.is-active .rf-step-num{
  background:rgba(200,178,255,0.20);
  border-color:#c8b2ff;
  color:#c8b2ff;
  box-shadow:0 0 0 4px rgba(200,178,255,0.12);
}
/* Step 1 done = quiet purple */
.rf-step-1.is-done{color:rgba(200,178,255,0.6)}
.rf-step-1.is-done .rf-step-num{
  background:rgba(200,178,255,0.18);
  border-color:rgba(200,178,255,0.42);
  color:#c8b2ff;
}
/* Step 2 active = GOLD (filling/finalizing) */
.rf-step-2.is-active{color:#ffcb5e}
.rf-step-2.is-active .rf-step-num{
  background:rgba(255,203,94,0.20);
  border-color:#ffcb5e;
  color:#ffcb5e;
  box-shadow:0 0 0 4px rgba(255,203,94,0.12);
}
.rf-step-line{
  flex:1;
  height:2px;
  background:linear-gradient(90deg,
    rgba(200,178,255,0.32),
    rgba(255,203,94,0.18));
  border-radius:2px;
  max-width:140px;
}

/* ─── STEP 1: Fish Picker ───────────────────────────────────────── */
.rf-step1-body{
  flex:1; min-height:0;
  overflow-y:auto;
  padding:18px 22px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.rf-step1-body[hidden]{display:none}

.rf-search-bar{
  position:relative;
  display:flex; align-items:center;
  /* v0.180 — migrated to tokens. Was rgba(48,52,62) which was darker
     than the inventory search at rgba(76,82,96), making the receive
     flow search read as "dimmer/bluer" than the rest of the app.
     Now both reference --ltc-surface-input. */
  background: var(--ltc-surface-input);
  border: 2px solid var(--ltc-border-input);
  border-radius: var(--ltc-radius-md);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  flex:0 0 auto;
  box-shadow: var(--ltc-shadow-input);
}
.rf-search-bar:focus-within{
  /* Step 1 = purple identity, focus matches */
  border-color: var(--ltc-c-purple);
  background: var(--ltc-surface-input-focus);
  box-shadow:
    var(--ltc-shadow-input),
    0 0 0 3px rgba(var(--ltc-c-purple-rgb), 0.22);
}
.rf-search-icon{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 8px 0 16px;
  color:rgba(255,255,255,0.45);
}
.rf-search-icon svg{width:20px; height:20px}
.rf-search-input{
  flex:1;
  padding:14px 12px;
  background:transparent;
  border:none;
  /* v0.154 — explicit near-white for the typed text, brighter than
     the inherited #f4fbff to read clearly against the dark search bar */
  color:#fff;
  font-size:17px; font-weight:600;
  font-family:inherit;
  outline:none;
  opacity:1;
}
.rf-search-input::placeholder{color:rgba(255,255,255,0.32); font-weight:500}
.rf-search-clear{
  width:32px; height:32px; margin-right:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.10);
  border:none;
  color:rgba(255,255,255,0.6);
  font-size:20px; font-weight:900;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.rf-search-clear:hover{background:rgba(255,255,255,0.18); color:#fff}

/* v0.151 — Category chips: water wave canvas fill. Each chip has a
   <canvas> inside that paints a sloshing wave in the chip's category
   accent color. Driven by a single shared rAF loop in the receiveFlow
   module (chipWaveLoop) — not 25 separate loops, capped at 30fps. The
   text label sits on top of the canvas with z-index. Active chips get
   a more saturated wave + glow ring; inactive chips have a calmer wave
   so the active state is unmistakable.
   v0.152 — bigger chips + dark pill behind label for readability. */
.rf-cat-chips{
  display:flex; flex-wrap:wrap; gap:10px;
  flex:0 0 auto;
}
.rf-cat-chip{
  position:relative;
  overflow:hidden;
  padding:0;
  height:46px;
  min-width:78px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:2px solid rgba(var(--rfc-rgb), 0.55);
  cursor:pointer; font-family:inherit;
  transition:transform .18s cubic-bezier(.34,1.2,.42,1),
             border-color .18s ease,
             box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.rf-cat-chip-canvas{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border-radius:inherit;
  pointer-events:none;
}
/* v0.154 — text outline (multi-shadow stroke) instead of the dark
   backdrop pill from v0.152. Chris hated the pill-within-a-pill look.
   The outline lets the wave fill show through while keeping the text
   readable against any color the wave is painting underneath. */
.rf-cat-chip-label{
  position:relative;
  z-index:2;
  padding:0 16px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  color:#fff;
  white-space:nowrap;
  /* Multi-shadow outline — 8 directions for a clean black border
     around just the letterforms. Plus a soft drop shadow for depth. */
  text-shadow:
    -1.5px -1.5px 0 #000,
     1.5px -1.5px 0 #000,
    -1.5px  1.5px 0 #000,
     1.5px  1.5px 0 #000,
    -1.5px  0    0 #000,
     1.5px  0    0 #000,
     0    -1.5px 0 #000,
     0     1.5px 0 #000,
     0     2px   4px rgba(0,0,0,0.7);
}
.rf-cat-chip.is-active .rf-cat-chip-label{
  /* Active state — same outline, no inner pill, brighter text */
  color:#fff;
  text-shadow:
    -1.5px -1.5px 0 #000,
     1.5px -1.5px 0 #000,
    -1.5px  1.5px 0 #000,
     1.5px  1.5px 0 #000,
    -1.5px  0    0 #000,
     1.5px  0    0 #000,
     0    -1.5px 0 #000,
     0     1.5px 0 #000,
     0     0     10px rgba(255,255,255,0.4);
}
.rf-cat-chip:hover{
  transform:translateY(-1px) scale(1.04);
  border-color:rgba(var(--rfc-rgb), 0.85);
  box-shadow:0 6px 20px rgba(var(--rfc-rgb), 0.32);
}
.rf-cat-chip.is-active{
  border-color:var(--rfc);
  box-shadow:
    0 0 0 2px rgba(var(--rfc-rgb), 0.38),
    0 8px 24px rgba(var(--rfc-rgb), 0.45);
  transform:scale(1.06);
}
.rf-cat-chip:active{transform:scale(.94)}

/* v0.151 — small subtle "add custom entry" link below the search bar.
   Replaces the prominent bottom button people kept tapping by mistake.
   With ~700 fish in the catalog, the custom entry path is rare so it
   gets the visual weight it deserves: minimal. */
.rf-add-custom-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  flex:0 0 auto;
  padding:0 4px;
  margin-top:-2px;
}
.rf-add-custom-hint{
  font-size:11px;
  font-weight:600;
  color:rgba(220,234,248,0.42);
  letter-spacing:.01em;
}
.rf-add-custom-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px 5px 8px;
  border-radius:8px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(123,207,255,0.75);
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.rf-add-custom-link svg{width:13px; height:13px; flex:0 0 auto}
.rf-add-custom-link:hover{
  background:rgba(123,207,255,0.10);
  color:#7bcfff;
  border-color:rgba(123,207,255,0.32);
}
.rf-add-custom-link:active{transform:scale(.96)}

/* v0.151 — empty state for the picker. Shows when no search query and
   no category filter active, replacing the wall-of-60-cards default. */
.rf-empty-prompt{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 20px;
  text-align:center;
  gap:14px;
  color:rgba(232,243,251,0.62);
  min-height:280px;
}
.rf-empty-icon{
  width:88px; height:88px;
  border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0) 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.35);
  margin-bottom:6px;
  animation:rfEmptyFloat 4s ease-in-out infinite;
}
.rf-empty-icon svg{width:42px; height:42px}
@keyframes rfEmptyFloat{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}
.rf-empty-title{
  font-size:18px;
  font-weight:900;
  color:#f4fbff;
  letter-spacing:.01em;
}
.rf-empty-hint{
  font-size:13px;
  font-weight:600;
  color:rgba(220,234,248,0.55);
  max-width:320px;
  line-height:1.5;
}
@media (prefers-reduced-motion: reduce){
  .rf-empty-icon{ animation:none; }
}

/* v0.151 — Result cards now appear only after a search/category filter,
   so we can afford to make them bigger and more visual: wider min
   column width + larger thumbnail + entrance fade-in. */
.rf-results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:12px;
  flex:1; min-height:0;
}
.rf-result-card{
  --rfc:#7bcfff;
  --rfc-rgb:123,207,255;
  position:relative;
  display:grid;
  grid-template-columns:78px 1fr;
  gap:14px;
  padding:12px 16px 12px 12px;
  background:linear-gradient(135deg,
    rgba(var(--rfc-rgb), 0.14) 0%,
    rgba(var(--rfc-rgb), 0.05) 50%,
    rgba(22,24,30,0.55) 100%);
  border:1.5px solid rgba(var(--rfc-rgb), 0.38);
  border-radius:16px;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  transition:transform .18s cubic-bezier(.34,1.2,.42,1),
             border-color .18s ease,
             background .18s ease,
             box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
  align-items:center;
  min-height:96px;
  overflow:hidden;
  animation:rfResultFadeIn .35s ease-out both;
}
@keyframes rfResultFadeIn{
  0%   {opacity:0; transform:translateY(6px) scale(.98)}
  100% {opacity:1; transform:translateY(0) scale(1)}
}
.rf-result-card:hover{
  transform:translateY(-3px) scale(1.02);
  border-color:var(--rfc);
  background:linear-gradient(135deg,
    rgba(var(--rfc-rgb), 0.26) 0%,
    rgba(var(--rfc-rgb), 0.10) 50%,
    rgba(22,24,30,0.6) 100%);
  box-shadow:
    0 12px 28px rgba(var(--rfc-rgb), 0.30),
    0 4px 12px rgba(0,0,0,0.22);
}
.rf-result-card:active{transform:scale(.97)}
.rf-result-thumb{
  width:78px; height:78px;
  border-radius:12px;
  background:rgba(22,24,30,0.7);
  border:1.5px solid rgba(var(--rfc-rgb), 0.45);
  overflow:hidden;
  position:relative;
  flex:0 0 auto;
  box-shadow:0 4px 12px rgba(var(--rfc-rgb), 0.18);
}
@media (prefers-reduced-motion: reduce){
  .rf-result-card{animation:none}
}
.rf-result-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.rf-result-thumb .image-placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900;
  color:var(--rfc);
  opacity:.6;
}
.rf-result-body{
  display:flex; flex-direction:column; gap:2px;
  min-width:0;
}
.rf-result-name{
  font-size:14px; font-weight:900;
  color:#f4fbff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rf-result-sci{
  font-size:11px; font-weight:600; font-style:italic;
  color:rgba(232,243,251,0.55);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rf-result-meta{
  display:flex; gap:8px; align-items:center;
  margin-top:3px;
}
.rf-result-cat{
  font-size:10px; font-weight:800;
  color:var(--rfc);
  text-transform:uppercase; letter-spacing:.06em;
}
.rf-result-price{
  font-size:12px; font-weight:900;
  color:#5eebc8;
}
.rf-result-badge{
  position:absolute; top:6px; right:6px;
  font-size:9px; font-weight:900;
  padding:3px 7px; border-radius:999px;
  background:rgba(94,235,200,0.20);
  border:1px solid rgba(94,235,200,0.42);
  color:#5eebc8;
  text-transform:uppercase; letter-spacing:.06em;
}
.rf-result-card.rf-result-instock{
  border-color:rgba(94,235,200,0.50);
}

.rf-no-results{
  grid-column:1 / -1;
  display:flex; flex-direction:column; align-items:center;
  gap:10px;
  padding:48px 24px;
  color:rgba(232,243,251,0.45);
  text-align:center;
}
.rf-no-results svg{
  width:42px; height:42px;
  color:rgba(232,243,251,0.30);
}
.rf-no-results p{
  margin:0;
  font-size:16px; font-weight:800;
  color:rgba(232,243,251,0.65);
}
.rf-no-results span{
  font-size:13px;
}

.rf-truncated-note{
  grid-column:1 / -1;
  text-align:center;
  font-size:12px; font-weight:700;
  color:rgba(232,243,251,0.42);
  padding:10px;
}

/* ─── STEP 2: Form ──────────────────────────────────────────────── */
.rf-step2-body{
  flex:1; min-height:0;
  overflow-y:auto;
  padding:18px 22px 22px;
  display:flex; flex-direction:column; gap:16px;
}
.rf-step2-body[hidden]{display:none}

/* v0.151 — Selected fish card. The whole card now bathes in the
   selected fish's category color via a dramatic radial+linear gradient
   pulled from --rfc/--rfc-rgb (set by goToStep2 on the step 2 body
   root, which propagates to this card and everything else themed). */
.rf-selected-card{
  --rfc:#5eebc8;
  --rfc-rgb:94,235,200;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:16px;
  padding:16px 18px 16px 14px;
  background:
    radial-gradient(ellipse at top left, rgba(var(--rfc-rgb), 0.32), transparent 65%),
    radial-gradient(ellipse at bottom right, rgba(var(--rfc-rgb), 0.18), transparent 70%),
    linear-gradient(135deg,
      rgba(var(--rfc-rgb), 0.22) 0%,
      rgba(var(--rfc-rgb), 0.08) 50%,
      rgba(22,24,30, 0.7) 100%);
  border:1.5px solid rgba(var(--rfc-rgb), 0.55);
  border-radius:18px;
  align-items:center;
  flex:0 0 auto;
  box-shadow:
    0 10px 28px rgba(var(--rfc-rgb), 0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
  animation:rfSelCardSlide .5s cubic-bezier(.34,1.2,.42,1);
}
@keyframes rfSelCardSlide{
  0%   { opacity:0; transform:translateY(-12px) scale(.96); }
  60%  { opacity:1; transform:translateY(3px) scale(1.01); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
/* Subtle ambient sweep across the selected card background */
.rf-selected-card::before{
  content:"";
  position:absolute;
  top:0; left:-50%;
  width:60%;
  height:100%;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.06) 50%,
    transparent);
  pointer-events:none;
  animation:rfSelCardSweep 6s ease-in-out infinite;
}
@keyframes rfSelCardSweep{
  0%, 100% { left:-50%; }
  50%      { left:90%; }
}
@media (prefers-reduced-motion: reduce){
  .rf-selected-card{ animation:none; }
  .rf-selected-card::before{ display:none; }
}
.rf-sc-thumb{
  width:90px; height:90px;
  border-radius:14px;
  background:rgba(22,24,30,0.7);
  border:1.5px solid rgba(var(--rfc-rgb), 0.55);
  overflow:hidden;
  position:relative;
  z-index:1;
  box-shadow:0 4px 14px rgba(var(--rfc-rgb), 0.22);
}
.rf-sc-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.rf-sc-thumb .image-placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900;
  color:var(--rfc);
  opacity:.7;
}
.rf-sc-body{display:flex; flex-direction:column; gap:4px; min-width:0; position:relative; z-index:1}
.rf-sc-cat{
  font-size:11px; font-weight:900;
  color:var(--rfc);
  text-transform:uppercase; letter-spacing:.14em;
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
.rf-sc-name{
  font-size:22px; font-weight:900;
  color:#fff;
  letter-spacing:.01em;
  text-shadow:0 1px 6px rgba(0,0,0,0.55);
}
.rf-sc-sci{
  font-size:13px; font-weight:600; font-style:italic;
  color:rgba(255,255,255,0.72);
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.rf-sc-change{
  position:relative;
  z-index:1;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(255,255,255,0.10);
  border:1.5px solid rgba(255,255,255,0.22);
  color:#fff;
  font-size:12px; font-weight:800;
  cursor:pointer; font-family:inherit;
  transition:transform .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
  flex:0 0 auto;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
}
.rf-sc-change:hover{
  background:rgba(255,255,255,0.18);
  transform:translateY(-1px);
}
.rf-sc-change:active{transform:scale(.96)}

/* Essentials grid — qty, price, size */
.rf-essentials{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 16px;
}
.rf-field{display:flex; flex-direction:column; gap:8px}
.rf-field-wide{grid-column:1 / -1}
.rf-field label{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(220,234,248,0.62);
}
.rf-field-icon{
  width:16px; height:16px;
  color:var(--rfc, rgba(255,255,255,0.78));
  filter:drop-shadow(0 0 6px rgba(var(--rfc-rgb, 255,255,255), 0.45));
}
.rf-field input[type="text"],
.rf-field input[type="number"],
.rf-field input[type="date"]{
  width:100%;
  padding:14px 16px;
  border-radius: var(--ltc-radius-md);
  /* v0.180 — migrated to tokens. Was rgba(48,52,62) charcoal-but-dim,
     darker than the inventory search bar at rgba(76,82,96). Now both
     reference --ltc-surface-input so they match. */
  border: 2px solid var(--ltc-border-input);
  background: var(--ltc-surface-input);
  color: var(--ltc-text-primary);
  font-size:16px; font-weight:700;
  font-family:inherit;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: var(--ltc-shadow-input);
  opacity:1;
}
.rf-field input::placeholder{color: var(--ltc-text-muted); font-weight:600}
.rf-field input:focus{
  /* --rfc / --rfc-rgb get set on .rf-step2-body by JS based on the
     selected fish's category color. So focus picks up the category
     accent of whatever fish is being received. */
  border-color: var(--rfc, var(--ltc-accent));
  background: var(--ltc-surface-input-focus);
  box-shadow:
    var(--ltc-shadow-input),
    0 0 0 3px rgba(var(--rfc-rgb, var(--ltc-accent-rgb)), 0.22);
  outline:none;
}
.rf-field input::placeholder{color:rgba(255,255,255,0.30); font-weight:600}

.rf-price-input-wrap{
  position:relative;
  display:flex; align-items:center;
}
.rf-price-prefix{
  position:absolute;
  left:18px;
  font-size:18px; font-weight:900;
  /* v0.154 — toned down green. v0.153 was #4ade80 (radioactive emerald)
     with a 10px glow. Now a slightly cooler/softer green with a smaller
     glow so it reads as money but not as a hazard sign. */
  color:#5cc88a;
  text-shadow:0 0 6px rgba(92,200,138,0.35);
  pointer-events:none;
  z-index:1;
}
/* v0.156 — the specificity of the base .rf-field input[type="text"]
   rule (0,0,2,1) was beating .rf-price-input-wrap input (0,0,1,1) so
   padding-left:16px from the base won over my padding-left:38px. The
   first digit kept sliding under the $. Fix: match specificity with
   [type="text"] selector + !important to close the door on any future
   base rule changes. */
.rf-price-input-wrap input[type="text"],
.rf-price-input-wrap input[type="number"]{
  padding-left:42px !important;
}

/* v0.151 — Size pills overhaul. Per-pill rainbow cycling so the row
   isn't a wall of identical greys. Slam-in entrance cascade. Bouncy
   hover/active feel. Active state picks up the SELECTED FISH'S category
   accent color via the inherited --rfc/--rfc-rgb on the step 2 body
   root, so picking an Angelfish lights the active size pill orange,
   picking a Tang lights it blue, etc. Click feedback is wired in JS:
   ltcFx.bubbles + ltcFx.jelly fire on every tap. */
.rf-size-pills,
.rf-tank-pills{
  display:flex; flex-wrap:wrap; gap:9px;
}
.rf-size-pill,
.rf-tank-pill{
  --pp:#7bcfff;
  --pp-rgb:123,207,255;
  position:relative;
  overflow:hidden;
  padding:0 18px;
  min-height:46px;
  border-radius:999px;
  background:linear-gradient(180deg,
    rgba(var(--pp-rgb), 0.14),
    rgba(var(--pp-rgb), 0.04));
  border:1.5px solid rgba(var(--pp-rgb), 0.42);
  color:rgba(255,255,255,0.92);
  font-size:13px; font-weight:900;
  letter-spacing:.02em;
  cursor:pointer; font-family:inherit;
  transition:transform .18s cubic-bezier(.34,1.2,.42,1),
             background .18s ease,
             border-color .18s ease,
             box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  display:inline-flex; align-items:center; justify-content:center;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  /* Slam-in entrance — staggered via :nth-child below */
  animation:rfSizePillSlam .55s cubic-bezier(.34,1.2,.42,1) both;
}
/* Per-pill rainbow cycling for inactive state. Each pill is a different
   color so the row reads as variety not repetition. */
.rf-size-pill:nth-child(9n+1){--pp:#7bcfff; --pp-rgb:123,207,255}
.rf-size-pill:nth-child(9n+2){--pp:#5eebc8; --pp-rgb:94,235,200}
.rf-size-pill:nth-child(9n+3){--pp:#c8b2ff; --pp-rgb:200,178,255}
.rf-size-pill:nth-child(9n+4){--pp:#ffcb5e; --pp-rgb:255,203,94}
.rf-size-pill:nth-child(9n+5){--pp:#ff9bb6; --pp-rgb:255,155,182}
.rf-size-pill:nth-child(9n+6){--pp:#5ed4dc; --pp-rgb:94,212,220}
.rf-size-pill:nth-child(9n+7){--pp:#ffa850; --pp-rgb:255,168,80}
.rf-size-pill:nth-child(9n+8){--pp:#b8e860; --pp-rgb:184,232,96}
.rf-size-pill:nth-child(9n+9){--pp:#ff8a78; --pp-rgb:255,138,120}
/* Tank pills get the same cycling pattern */
.rf-tank-pill:nth-child(7n+1){--pp:#7bcfff; --pp-rgb:123,207,255}
.rf-tank-pill:nth-child(7n+2){--pp:#5eebc8; --pp-rgb:94,235,200}
.rf-tank-pill:nth-child(7n+3){--pp:#c8b2ff; --pp-rgb:200,178,255}
.rf-tank-pill:nth-child(7n+4){--pp:#ffcb5e; --pp-rgb:255,203,94}
.rf-tank-pill:nth-child(7n+5){--pp:#ff9bb6; --pp-rgb:255,155,182}
.rf-tank-pill:nth-child(7n+6){--pp:#5ed4dc; --pp-rgb:94,212,220}
.rf-tank-pill:nth-child(7n+7){--pp:#ffa850; --pp-rgb:255,168,80}

/* Staggered slam-in entrance for size + tank pills */
.rf-size-pill:nth-child(1),.rf-tank-pill:nth-child(1){animation-delay:.04s}
.rf-size-pill:nth-child(2),.rf-tank-pill:nth-child(2){animation-delay:.10s}
.rf-size-pill:nth-child(3),.rf-tank-pill:nth-child(3){animation-delay:.16s}
.rf-size-pill:nth-child(4),.rf-tank-pill:nth-child(4){animation-delay:.22s}
.rf-size-pill:nth-child(5),.rf-tank-pill:nth-child(5){animation-delay:.28s}
.rf-size-pill:nth-child(6),.rf-tank-pill:nth-child(6){animation-delay:.34s}
.rf-size-pill:nth-child(7),.rf-tank-pill:nth-child(7){animation-delay:.40s}
.rf-size-pill:nth-child(8){animation-delay:.46s}
.rf-size-pill:nth-child(9){animation-delay:.52s}

@keyframes rfSizePillSlam{
  0%   {opacity:0; transform:translateY(-12px) scale(1.10)}
  55%  {opacity:1; transform:translateY(3px) scale(.96)}
  78%  {opacity:1; transform:translateY(-1px) scale(1.02)}
  100% {opacity:1; transform:translateY(0) scale(1)}
}

.rf-size-pill:hover,
.rf-tank-pill:hover{
  background:linear-gradient(180deg,
    rgba(var(--pp-rgb), 0.26),
    rgba(var(--pp-rgb), 0.10));
  border-color:var(--pp);
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 22px rgba(var(--pp-rgb), 0.32);
  color:#fff;
}

/* Active state — uses the SELECTED FISH'S category color (--rfc/--rfc-rgb)
   inherited from the step 2 body root. Falls back to the per-pill
   accent if --rfc isn't set. */
.rf-size-pill.is-active,
.rf-tank-pill.is-active{
  background:linear-gradient(180deg,
    rgba(var(--rfc-rgb, 94,235,200), 0.42),
    rgba(var(--rfc-rgb, 94,235,200), 0.18));
  border-color:var(--rfc, #5eebc8);
  color:#fff;
  box-shadow:
    0 0 0 2px rgba(var(--rfc-rgb, 94,235,200), 0.22),
    0 10px 26px rgba(var(--rfc-rgb, 94,235,200), 0.42);
  transform:scale(1.06);
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}
.rf-size-pill:active,
.rf-tank-pill:active{transform:scale(.94)}

@media (prefers-reduced-motion: reduce){
  .rf-size-pill,.rf-tank-pill{animation:none}
}

/* v0.154 — Size pill ambient bubbles, more natural feel:
   - Faster rise (4s vs 7s)
   - More horizontal drift left/right
   - Longer cycle window (10s) so there are real gaps with NO bubbles
   - Rhythm: bubble 1 at 0%, brief gap, bubble 2 at 25%, longer gap,
     repeat. The keyframes have an off period (no opacity) for ~50%
     of the cycle so the row breathes instead of constant action. */
.rf-size-pill .rf-size-pill-label,
.rf-tank-pill .rf-tank-pill-label{
  position:relative;
  z-index:3;
}
.rf-size-pill::before,
.rf-size-pill::after{
  content:"";
  position:absolute;
  bottom:-6px;
  width:5px; height:5px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.95),
    rgba(var(--pp-rgb), 0.6) 60%,
    rgba(var(--pp-rgb), 0) 100%);
  border:1px solid rgba(255,255,255,0.45);
  pointer-events:none;
  opacity:0;
  z-index:1;
}
.rf-size-pill::before{
  left:30%;
  animation:rfBubbleRise 10s ease-in infinite;
}
.rf-size-pill::after{
  left:60%;
  width:4px; height:4px;
  animation:rfBubbleRise 10s ease-in infinite;
  animation-delay:1.4s;
}
/* The rise itself only takes 0%-32% of the cycle. The remaining 68%
   is silent — no bubble visible — which gives the row natural pauses. */
@keyframes rfBubbleRise{
  0%   {bottom:-6px; opacity:0; transform:translateX(0)}
  3%   {opacity:0.95}
  8%   {transform:translateX(-3px)}
  16%  {transform:translateX(3px)}
  24%  {transform:translateX(-2px); opacity:0.85}
  30%  {bottom:108%; opacity:0; transform:translateX(2px)}
  100% {bottom:108%; opacity:0; transform:translateX(2px)}
}
/* Stagger per pill so adjacent pills never bubble in sync */
.rf-size-pill:nth-child(9n+1)::before{animation-delay:0s}
.rf-size-pill:nth-child(9n+2)::before{animation-delay:1.1s}
.rf-size-pill:nth-child(9n+3)::before{animation-delay:2.2s}
.rf-size-pill:nth-child(9n+4)::before{animation-delay:3.3s}
.rf-size-pill:nth-child(9n+5)::before{animation-delay:4.4s}
.rf-size-pill:nth-child(9n+6)::before{animation-delay:5.5s}
.rf-size-pill:nth-child(9n+7)::before{animation-delay:6.6s}
.rf-size-pill:nth-child(9n+8)::before{animation-delay:7.7s}
.rf-size-pill:nth-child(9n+9)::before{animation-delay:8.8s}
.rf-size-pill:nth-child(9n+1)::after{animation-delay:5.5s}
.rf-size-pill:nth-child(9n+2)::after{animation-delay:6.6s}
.rf-size-pill:nth-child(9n+3)::after{animation-delay:7.7s}
.rf-size-pill:nth-child(9n+4)::after{animation-delay:8.8s}
.rf-size-pill:nth-child(9n+5)::after{animation-delay:0.5s}
.rf-size-pill:nth-child(9n+6)::after{animation-delay:1.6s}
.rf-size-pill:nth-child(9n+7)::after{animation-delay:2.7s}
.rf-size-pill:nth-child(9n+8)::after{animation-delay:3.8s}
.rf-size-pill:nth-child(9n+9)::after{animation-delay:4.9s}

/* v0.158 — BIG TANK ORB REDESIGN
   ===============================
   The tank pill is no longer a rounded-rectangle pill with a tiny orb
   next to a label. It IS an orb now: 76×76 round button with the tank
   letter centered big inside it. Water sloshes in the tank's accent
   color. A dim rotating conic-rainbow layer sits behind the water so
   the orb reads as iridescent / alive — but the tank's dedicated
   accent color still dominates because the water is stronger.

   DOM structure emitted by renderTankPills:
     .rf-tank-pill                ← the orb button (was pill-shaped)
       .rf-tank-orb-rainbow       ← conic rainbow background (dim)
       .rf-tank-orb-w1            ← water shape 1, rotates clockwise
       .rf-tank-orb-w2            ← water shape 2, rotates counter
       .rf-tank-orb-gloss         ← glass highlight top-left
       .rf-tank-pill-label        ← the big letter (NO / A / B / …)

   This completely overrides the shared .rf-size-pill/.rf-tank-pill
   base rules above — sizing, padding, border-radius, and background
   are all re-specified so the orb sits correctly regardless of what
   the size pill inherits. */

/* v0.162 — Tank orb cleaned up. Killed the rotating rainbow conic
   gradient (Chris said it looked like cotton candy chaos). Now: dark
   base + ONLY the accent-colored water sloshing + glass + letter.
   The water IS the dominant color always. Shrunk 60→52 since the
   60s were still too big. */

/* Container: auto-flow row of orbs, wraps if narrow */
.rf-tank-pills{
  display:flex; flex-wrap:wrap; gap:11px;
  justify-content:flex-start;
  align-items:center;
}

.rf-tank-pill{
  position:relative;
  width:52px !important;
  height:52px !important;
  min-height:52px !important;
  padding:0 !important;
  border-radius:50% !important;
  overflow:hidden;
  background:radial-gradient(circle at 50% 55%,
    rgba(22,24,30,0.92) 0%,
    rgba(12,14,20,0.98) 70%,
    rgba(6,8,12,1) 100%) !important;
  border:2px solid rgba(var(--pp-rgb), 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.42),
    inset 0 1px 3px rgba(0,0,0,0.55),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  transition:transform .2s cubic-bezier(.34,1.2,.42,1),
             border-color .2s ease,
             box-shadow .25s ease;
}

/* v0.162 — rainbow layer is now a no-op. Kept the class so the
   render code doesn't need to change, but the element is invisible.
   Future: could repurpose as a single static complementary tint
   if Chris wants more depth, but for now: clean and minimal. */
.rf-tank-orb-rainbow{
  display:none;
}

/* Two rotating water shapes — these ARE the orb's color now.
   The accent dominates because nothing else competes. Sized for
   the 52px orb. */
.rf-tank-orb-w1,
.rf-tank-orb-w2{
  position:absolute;
  width:104px;
  height:104px;
  left:50%;
  border-radius:42%;
  margin-left:-52px;
  pointer-events:none;
  z-index:2;
}
.rf-tank-orb-w1{
  top:32%;
  background:rgba(var(--pp-rgb), 0.55);
  animation:rfOrbSpin1 4.8s linear infinite;
}
.rf-tank-orb-w2{
  top:40%;
  background:rgba(var(--pp-rgb), 0.32);
  animation:rfOrbSpin2 6.6s linear infinite;
}
@keyframes rfOrbSpin1{
  from { transform:rotate(0deg) }
  to   { transform:rotate(360deg) }
}
@keyframes rfOrbSpin2{
  from { transform:rotate(0deg) }
  to   { transform:rotate(-360deg) }
}

/* Glass highlight scaled for 52px orb */
.rf-tank-orb-gloss{
  position:absolute;
  z-index:3;
  top:6px;
  left:9px;
  width:14px;
  height:9px;
  border-radius:50%;
  background:radial-gradient(ellipse,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.rf-tank-orb-gloss::after{
  content:"";
  position:absolute;
  top:-3px; left:-5px;
  width:32px; height:15px;
  border-radius:50%;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0) 60%);
  pointer-events:none;
}

/* Letter scaled for 52px orb */
.rf-tank-pill .rf-tank-pill-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  font-weight:900;
  color:#fff;
  letter-spacing:0;
  z-index:4;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.92),
    0 0 10px rgba(0,0,0,0.75),
    0 1px 0 rgba(0,0,0,0.8);
  pointer-events:none;
}
.rf-tank-orb-no .rf-tank-pill-label{
  font-size:14px;
  letter-spacing:.04em;
}

/* HOVER — scale up, border saturates, subtle outer glow in accent */
.rf-tank-pill:hover{
  transform:translateY(-2px) scale(1.06);
  border-color:var(--pp) !important;
  background:radial-gradient(circle at 50% 55%,
    rgba(40,44,52,0.98) 0%,
    rgba(20,22,28,0.98) 70%,
    rgba(10,12,16,1) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55),
    0 0 22px rgba(var(--pp-rgb), 0.38),
    0 10px 26px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(0,0,0,0.55),
    inset 0 -3px 8px rgba(0,0,0,0.4);
}

/* ACTIVE — pill is SELECTED. Rainbow layer brightens, water alpha
   goes up, border thickens into the accent color fully, strong
   outer glow ring. The letter also picks up a color glow matching
   the selected fish's category (--rfc). */
.rf-tank-pill.is-active{
  border-color:var(--pp) !important;
  background:radial-gradient(circle at 50% 55%,
    rgba(var(--pp-rgb), 0.28) 0%,
    rgba(18,20,26,0.98) 70%,
    rgba(10,12,16,1) 100%) !important;
  box-shadow:
    0 0 0 3px rgba(var(--pp-rgb), 0.55),
    0 0 28px rgba(var(--pp-rgb), 0.55),
    0 10px 26px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(0,0,0,0.55),
    inset 0 -3px 8px rgba(0,0,0,0.4) !important;
  transform:scale(1.08);
}
.rf-tank-pill.is-active .rf-tank-orb-rainbow{
  opacity:1;
  animation-duration:9s;
}
.rf-tank-pill.is-active .rf-tank-orb-w1{
  background:rgba(var(--pp-rgb), 0.78);
  animation-duration:2.8s;
}
.rf-tank-pill.is-active .rf-tank-orb-w2{
  background:rgba(var(--pp-rgb), 0.48);
  animation-duration:3.8s;
}
.rf-tank-pill.is-active .rf-tank-pill-label{
  text-shadow:
    0 2px 4px rgba(0,0,0,0.85),
    0 0 12px rgba(var(--pp-rgb), 0.85),
    0 0 22px rgba(var(--pp-rgb), 0.45);
}

.rf-tank-pill:active{transform:scale(.94) !important}

/* Stagger each orb's rotation phase so the 7 orbs don't all slosh in
   sync — each looks like its own independent water sample. Negative
   delays start them mid-rotation instead of all at zero. */
.rf-tank-pill:nth-child(1) .rf-tank-orb-w1{animation-delay:-0.0s}
.rf-tank-pill:nth-child(2) .rf-tank-orb-w1{animation-delay:-0.6s}
.rf-tank-pill:nth-child(3) .rf-tank-orb-w1{animation-delay:-1.3s}
.rf-tank-pill:nth-child(4) .rf-tank-orb-w1{animation-delay:-2.0s}
.rf-tank-pill:nth-child(5) .rf-tank-orb-w1{animation-delay:-2.7s}
.rf-tank-pill:nth-child(6) .rf-tank-orb-w1{animation-delay:-3.4s}
.rf-tank-pill:nth-child(7) .rf-tank-orb-w1{animation-delay:-4.1s}
.rf-tank-pill:nth-child(1) .rf-tank-orb-w2{animation-delay:-0.4s}
.rf-tank-pill:nth-child(2) .rf-tank-orb-w2{animation-delay:-1.3s}
.rf-tank-pill:nth-child(3) .rf-tank-orb-w2{animation-delay:-2.2s}
.rf-tank-pill:nth-child(4) .rf-tank-orb-w2{animation-delay:-3.1s}
.rf-tank-pill:nth-child(5) .rf-tank-orb-w2{animation-delay:-4.0s}
.rf-tank-pill:nth-child(6) .rf-tank-orb-w2{animation-delay:-4.9s}
.rf-tank-pill:nth-child(7) .rf-tank-orb-w2{animation-delay:-5.8s}
/* Same for the rainbow so siblings don't all turn in sync */
.rf-tank-pill:nth-child(1) .rf-tank-orb-rainbow{animation-delay:-0s}
.rf-tank-pill:nth-child(2) .rf-tank-orb-rainbow{animation-delay:-2.5s}
.rf-tank-pill:nth-child(3) .rf-tank-orb-rainbow{animation-delay:-5s}
.rf-tank-pill:nth-child(4) .rf-tank-orb-rainbow{animation-delay:-7.5s}
.rf-tank-pill:nth-child(5) .rf-tank-orb-rainbow{animation-delay:-10s}
.rf-tank-pill:nth-child(6) .rf-tank-orb-rainbow{animation-delay:-12.5s}
.rf-tank-pill:nth-child(7) .rf-tank-orb-rainbow{animation-delay:-15s}

/* Kill any lingering ::before attempts from older versions */
.rf-tank-pill::before{ content:none !important }

@media (prefers-reduced-motion: reduce){
  .rf-tank-orb-w1,
  .rf-tank-orb-w2,
  .rf-tank-orb-rainbow{animation:none}
}

/* v0.153 — On click, both pill types get a brief flash effect as
   visible confirmation that the tap registered (in addition to the
   ltcFx.bubbles + jelly squish JS already wired). Uses keyframe so
   it plays once per click via the :active state. */
.rf-size-pill:active,
.rf-tank-pill:active{
  animation: rfPillFlash .3s ease-out;
}
@keyframes rfPillFlash{
  0%   {box-shadow: 0 0 0 0 rgba(var(--pp-rgb), 0.9), inset 0 0 0 0 rgba(255,255,255,0.4)}
  50%  {box-shadow: 0 0 0 8px rgba(var(--pp-rgb), 0.0), inset 0 0 18px 4px rgba(255,255,255,0.32)}
  100% {box-shadow: 0 0 0 0 rgba(var(--pp-rgb), 0), inset 0 0 0 0 rgba(255,255,255,0)}
}

@media (prefers-reduced-motion: reduce){
  .rf-size-pill::before,
  .rf-size-pill::after,
  .rf-tank-pill::before{animation:none; opacity:0}
  .rf-size-pill:active,
  .rf-tank-pill:active{animation:none}
}

/* More details toggle + collapsible region */
/* v0.152 — More details expander REMOVED. The fields (tank, stock #,
   arrival, vendor) are now always visible — no more clicks-to-reveal,
   no more hiding things behind expanders. The toggle button is left
   in the DOM hidden via CSS so old references don't break. */
.rf-more-toggle{display:none !important}
.rf-more-fields{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 16px;
  padding:0;
  border:none;
  background:none;
  animation:none;
}
.rf-more-fields[hidden]{display:grid !important}

/* Form actions — cancel + submit */
.rf-actions{
  display:flex; gap:12px;
  margin-top:6px;
  padding-top:18px;
  border-top:1px solid rgba(220,234,248,0.10);
  align-items:stretch;
}
.rf-cancel-btn{
  padding:14px 22px;
  border-radius:14px;
  background:rgba(255,255,255,0.05);
  border:1.5px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.55);
  font-size:14px; font-weight:800;
  cursor:pointer; font-family:inherit;
  letter-spacing:.02em;
  transition:transform .15s ease, background .15s ease, color .15s ease;
  -webkit-tap-highlight-color:transparent;
  min-width:120px;
}
.rf-cancel-btn:hover{
  background:rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.78);
}
.rf-cancel-btn:active{transform:scale(.97)}

.rf-submit-btn{
  flex:1;
  position:relative;
  overflow:hidden;
  padding:14px 22px;
  border-radius:14px;
  /* v0.152 — submit button now uses the SELECTED FISH'S category color
     via --rfc/--rfc-rgb (set on #rfStep2Body in goToStep2). Angelfish
     receive = orange button. Tang = blue. Wrasse = purple. Etc.
     Hardcoded teal is gone. */
  background:linear-gradient(180deg,
    rgba(var(--rfc-rgb, 200,178,255), 0.32),
    rgba(var(--rfc-rgb, 200,178,255), 0.16));
  border:1.5px solid rgba(var(--rfc-rgb, 200,178,255), 0.65);
  color:#fff;
  font-size:15px; font-weight:900;
  cursor:pointer; font-family:inherit;
  letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
  box-shadow:
    0 10px 26px rgba(var(--rfc-rgb, 200,178,255), 0.30),
    inset 0 1px 0 rgba(255,255,255,0.20);
}
.rf-submit-btn svg{width:20px; height:20px}
.rf-submit-btn:hover{
  background:linear-gradient(180deg,
    rgba(var(--rfc-rgb, 200,178,255), 0.42),
    rgba(var(--rfc-rgb, 200,178,255), 0.22));
  box-shadow:
    0 14px 32px rgba(var(--rfc-rgb, 200,178,255), 0.40),
    inset 0 1px 0 rgba(255,255,255,0.22);
  transform:translateY(-1px);
}
.rf-submit-btn:active{transform:scale(.98)}
.rf-submit-btn::before{
  content:"";
  position:absolute;
  top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.40) 50%,
    transparent);
  pointer-events:none;
  transform:skewX(-18deg);
}
.rf-submit-btn.is-firing::before{
  animation:rfSubmitSweep .56s ease-out forwards;
}
@keyframes rfSubmitSweep{
  0%   {left:-100%; opacity:0}
  20%  {opacity:1}
  85%  {opacity:1}
  100% {left:130%; opacity:0}
}
.rf-submit-btn.is-firing{
  animation:rfSubmitFlash .42s ease-out;
}
@keyframes rfSubmitFlash{
  0%   {background:linear-gradient(180deg,
         rgba(var(--rfc-rgb, 200,178,255), 0.55),
         rgba(var(--rfc-rgb, 200,178,255), 0.35))}
  100% {background:linear-gradient(180deg,
         rgba(var(--rfc-rgb, 200,178,255), 0.32),
         rgba(var(--rfc-rgb, 200,178,255), 0.16))}
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 720px){
  .receive-flow-overlay{padding:0}
  .receive-flow-panel{
    max-width:100%;
    max-height:100vh;
    border-radius:0;
    border-left:none; border-right:none;
  }
  .rf-essentials,
  .rf-more-fields{grid-template-columns:1fr}
  .rf-results-grid{grid-template-columns:1fr}
  .rf-title-text strong{font-size:16px}
  .rf-title-text span{font-size:11px}
  .rf-title-icon{width:42px; height:42px}
  .rf-title-icon svg{width:20px; height:20px}
}

@media (prefers-reduced-motion: reduce){
  .receive-flow-panel{animation:none}
  .rf-more-fields{animation:none}
  .rf-submit-btn::before{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   v0.174 — Kelp forest ambient
   Approved by Chris from Animation Experiments 03. Used in two places:
   1. Bottom of the main fish browser viewport (.ltc-kelp-forest in
      index.html, fixed-position behind the UI)
   2. Bottom of the staff hub home view (.sh-kelp-forest, scoped to
      .staff-home-v120, position relative inside that container)
   Same strand pattern, two scope variants. Heights ~80-110px (Chris
   asked for "a little shorter" than the experiment). Each strand
   sways on its own timing 5.5s-8.5s with negative animation-delays
   so the row never sways in lockstep. Honors reduced motion.
   ═══════════════════════════════════════════════════════════════════ */

.ltc-kelp-forest{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.staff-home-v120 .sh-kelp-forest{
  position: relative;
  width: 100%;
  height: 130px;
  margin-top: 24px;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0 0 16px 16px;
}

.ltc-kelp-strand,
.staff-home-v120 .sh-kelp-strand{
  position: absolute;
  bottom: 0;
  width: 7px;
  background: linear-gradient(180deg,
    rgba(80,180,120,0.0) 0%,
    rgba(60,150,100,0.45) 35%,
    rgba(40,120,80,0.85) 100%);
  border-radius: 50% 50% 0 0 / 12px 12px 0 0;
  transform-origin: bottom center;
  filter: blur(0.4px);
}
.ltc-kelp-strand::before, .ltc-kelp-strand::after,
.staff-home-v120 .sh-kelp-strand::before,
.staff-home-v120 .sh-kelp-strand::after{
  content: "";
  position: absolute;
  width: 13px;
  height: 5px;
  border-radius: 50%;
  background: rgba(60,150,100,0.6);
  left: -3px;
}
.ltc-kelp-strand::before,
.staff-home-v120 .sh-kelp-strand::before{ top: 28%; }
.ltc-kelp-strand::after,
.staff-home-v120 .sh-kelp-strand::after{ top: 58%; left: -2px; width: 11px; height: 4px; }

/* shorter than the experiment (was 130-175); 70-118 here.
   v0.175 — bumped from 10 sparse strands to 20 packed strands so it
   actually reads as a forest, not "five bamboo poles in a parking lot"
   per Chris. Positioning is interleaved: strands at 3% intervals
   roughly, with some randomized within-band offset so the line isn't
   perfectly even. Width and opacity vary slightly per strand for
   depth. Both .ltc-kelp-N AND .sh-kelp-strand:nth-child use the
   same per-position rules. */
.ltc-kelp-strand:nth-child(1),  .staff-home-v120 .sh-kelp-strand:nth-child(1)  { left:2%;  height:88px;  width:6px; opacity:.85; animation:ltcKelpSway 7.2s ease-in-out infinite; animation-delay:0s; }
.ltc-kelp-strand:nth-child(2),  .staff-home-v120 .sh-kelp-strand:nth-child(2)  { left:7%;  height:104px; width:7px; opacity:.95; animation:ltcKelpSway 5.8s ease-in-out infinite; animation-delay:-1.2s; }
.ltc-kelp-strand:nth-child(3),  .staff-home-v120 .sh-kelp-strand:nth-child(3)  { left:11%; height:74px;  width:5px; opacity:.78; animation:ltcKelpSway 8.1s ease-in-out infinite; animation-delay:-3s; }
.ltc-kelp-strand:nth-child(4),  .staff-home-v120 .sh-kelp-strand:nth-child(4)  { left:15%; height:118px; width:8px; opacity:1;   animation:ltcKelpSway 6.4s ease-in-out infinite; animation-delay:-2.5s; }
.ltc-kelp-strand:nth-child(5),  .staff-home-v120 .sh-kelp-strand:nth-child(5)  { left:19%; height:90px;  width:6px; opacity:.86; animation:ltcKelpSway 7.9s ease-in-out infinite; animation-delay:-0.8s; }
.ltc-kelp-strand:nth-child(6),  .staff-home-v120 .sh-kelp-strand:nth-child(6)  { left:23%; height:108px; width:7px; opacity:.94; animation:ltcKelpSway 6.1s ease-in-out infinite; animation-delay:-4s; }
.ltc-kelp-strand:nth-child(7),  .staff-home-v120 .sh-kelp-strand:nth-child(7)  { left:28%; height:80px;  width:5px; opacity:.8;  animation:ltcKelpSway 8.5s ease-in-out infinite; animation-delay:-1.8s; }
.ltc-kelp-strand:nth-child(8),  .staff-home-v120 .sh-kelp-strand:nth-child(8)  { left:32%; height:96px;  width:6px; opacity:.88; animation:ltcKelpSway 5.5s ease-in-out infinite; animation-delay:-3.6s; }
.ltc-kelp-strand:nth-child(9),  .staff-home-v120 .sh-kelp-strand:nth-child(9)  { left:36%; height:114px; width:8px; opacity:1;   animation:ltcKelpSway 7.4s ease-in-out infinite; animation-delay:-2.2s; }
.ltc-kelp-strand:nth-child(10), .staff-home-v120 .sh-kelp-strand:nth-child(10) { left:40%; height:84px;  width:6px; opacity:.84; animation:ltcKelpSway 6.8s ease-in-out infinite; animation-delay:-0.4s; }
.ltc-kelp-strand:nth-child(11), .staff-home-v120 .sh-kelp-strand:nth-child(11) { left:44%; height:100px; width:7px; opacity:.92; animation:ltcKelpSway 5.9s ease-in-out infinite; animation-delay:-3.2s; }
.ltc-kelp-strand:nth-child(12), .staff-home-v120 .sh-kelp-strand:nth-child(12) { left:49%; height:74px;  width:5px; opacity:.78; animation:ltcKelpSway 7.7s ease-in-out infinite; animation-delay:-1.5s; }
.ltc-kelp-strand:nth-child(13), .staff-home-v120 .sh-kelp-strand:nth-child(13) { left:53%; height:106px; width:7px; opacity:.95; animation:ltcKelpSway 6.3s ease-in-out infinite; animation-delay:-4.4s; }
.ltc-kelp-strand:nth-child(14), .staff-home-v120 .sh-kelp-strand:nth-child(14) { left:57%; height:88px;  width:6px; opacity:.86; animation:ltcKelpSway 8.3s ease-in-out infinite; animation-delay:-2.7s; }
.ltc-kelp-strand:nth-child(15), .staff-home-v120 .sh-kelp-strand:nth-child(15) { left:62%; height:118px; width:8px; opacity:1;   animation:ltcKelpSway 5.6s ease-in-out infinite; animation-delay:-0.6s; }
.ltc-kelp-strand:nth-child(16), .staff-home-v120 .sh-kelp-strand:nth-child(16) { left:67%; height:80px;  width:5px; opacity:.8;  animation:ltcKelpSway 7.1s ease-in-out infinite; animation-delay:-3.8s; }
.ltc-kelp-strand:nth-child(17), .staff-home-v120 .sh-kelp-strand:nth-child(17) { left:72%; height:96px;  width:6px; opacity:.88; animation:ltcKelpSway 6.6s ease-in-out infinite; animation-delay:-1.1s; }
.ltc-kelp-strand:nth-child(18), .staff-home-v120 .sh-kelp-strand:nth-child(18) { left:78%; height:108px; width:7px; opacity:.94; animation:ltcKelpSway 8.8s ease-in-out infinite; animation-delay:-2.9s; }
.ltc-kelp-strand:nth-child(19), .staff-home-v120 .sh-kelp-strand:nth-child(19) { left:84%; height:84px;  width:6px; opacity:.84; animation:ltcKelpSway 5.7s ease-in-out infinite; animation-delay:-4.2s; }
.ltc-kelp-strand:nth-child(20), .staff-home-v120 .sh-kelp-strand:nth-child(20) { left:90%; height:100px; width:7px; opacity:.92; animation:ltcKelpSway 7.5s ease-in-out infinite; animation-delay:-1.7s; }
.ltc-kelp-strand:nth-child(21), .staff-home-v120 .sh-kelp-strand:nth-child(21) { left:95%; height:74px;  width:5px; opacity:.78; animation:ltcKelpSway 6.9s ease-in-out infinite; animation-delay:-3.4s; }

@keyframes ltcKelpSway{
  0%, 100% { transform: rotate(-4deg) skewX(2deg); }
  50%      { transform: rotate(4deg) skewX(-2deg); }
}
@media (prefers-reduced-motion: reduce){
  .ltc-kelp-strand,
  .staff-home-v120 .sh-kelp-strand{ animation: none !important; }
}

/* v0.175 — Bubbles rising through the kelp forest. Pure CSS, 6
   bubbles per forest, each on its own delay so they never sync.
   Different sizes for variety. Honors reduced motion. */
.ltc-kelp-bubble,
.staff-home-v120 .sh-kelp-bubble{
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.7),
    rgba(180,220,255,0.35) 60%,
    rgba(120,180,235,0.15) 100%);
  border: 1px solid rgba(255,255,255,0.4);
  filter: blur(0.3px);
  opacity: 0;
  animation: ltcKelpBubbleRise 7.5s ease-in infinite;
}
.ltc-kelp-bubble:nth-child(22), .staff-home-v120 .sh-kelp-bubble:nth-child(22) { left:9%;  width:5px;  height:5px;  animation-delay:0s;    animation-duration:8s; }
.ltc-kelp-bubble:nth-child(23), .staff-home-v120 .sh-kelp-bubble:nth-child(23) { left:24%; width:7px;  height:7px;  animation-delay:-2.4s; animation-duration:9.2s; }
.ltc-kelp-bubble:nth-child(24), .staff-home-v120 .sh-kelp-bubble:nth-child(24) { left:38%; width:4px;  height:4px;  animation-delay:-5.1s; animation-duration:7.4s; }
.ltc-kelp-bubble:nth-child(25), .staff-home-v120 .sh-kelp-bubble:nth-child(25) { left:55%; width:6px;  height:6px;  animation-delay:-1.6s; animation-duration:8.6s; }
.ltc-kelp-bubble:nth-child(26), .staff-home-v120 .sh-kelp-bubble:nth-child(26) { left:71%; width:5px;  height:5px;  animation-delay:-3.8s; animation-duration:8s; }
.ltc-kelp-bubble:nth-child(27), .staff-home-v120 .sh-kelp-bubble:nth-child(27) { left:87%; width:7px;  height:7px;  animation-delay:-6.2s; animation-duration:9.4s; }
@keyframes ltcKelpBubbleRise{
  0%   { bottom: 4px;  opacity: 0; transform: translateX(0); }
  10%  { opacity: 0.9; }
  50%  { transform: translateX(3px); }
  100% { bottom: 110px; opacity: 0; transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce){
  .ltc-kelp-bubble,
  .staff-home-v120 .sh-kelp-bubble{ animation: none !important; opacity: 0 !important; }
}

/* v0.175 — A single fish drifts slowly through the kelp from right
   to left, occasionally pausing. Lives at z-index 1 so it's IN the
   kelp not in front of it. ~24 second cycle. */
.ltc-kelp-fish,
.staff-home-v120 .sh-kelp-fish{
  position: absolute;
  width: 26px;
  height: 16px;
  bottom: 38px;
  left: -40px;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cellipse cx='17' cy='9' rx='9' ry='5' fill='rgba(255,168,80,0.85)' stroke='rgba(255,200,130,0.85)' stroke-width='0.8'/%3E%3Cellipse cx='15' cy='10' rx='5' ry='2' fill='rgba(255,220,160,0.5)'/%3E%3Cpath d='M8 9 L1 3 L3 9 L1 15 Z' fill='rgba(255,168,80,0.85)' stroke='rgba(255,200,130,0.85)' stroke-width='0.8'/%3E%3Ccircle cx='22' cy='8' r='1.2' fill='%23000'/%3E%3Cpath d='M22 11 Q24 13 26 11' fill='none' stroke='rgba(120,60,20,0.6)' stroke-width='0.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  animation: ltcKelpFishDrift 28s linear infinite;
}
@keyframes ltcKelpFishDrift{
  0%   { left: -40px;            bottom: 38px; transform: scaleX(1); }
  20%  { left: 22%;              bottom: 44px; }
  35%  { left: 38%;              bottom: 32px; }
  50%  { left: 56%;              bottom: 48px; }
  65%  { left: 72%;              bottom: 36px; }
  85%  { left: 92%;              bottom: 42px; }
  100% { left: calc(100% + 40px); bottom: 38px; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce){
  .ltc-kelp-fish,
  .staff-home-v120 .sh-kelp-fish{ animation: none !important; opacity: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v0.174 — Crab easter egg
   The crab from Experiments 03 (Chris-approved) sprinkled on staff
   menu interactions. JS adds .ltc-crab-active to a container, which
   spawns a temporary <div class="ltc-crab-runner"> that scuttles in
   from off-screen, hangs out briefly at the cursor area, then
   scuttles off. Fully self-contained — runs once and removes itself.
   ═══════════════════════════════════════════════════════════════════ */
.ltc-crab-runner{
  position: fixed;
  width: 36px;
  height: 26px;
  pointer-events: none;
  z-index: 9998;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55));
  /* v0.175 — slowed from 3.4s to 6.8s. Chris said the crab "looks
     like it's on speed". Now scuttles at a believable pace. Leg and
     body keyframes also slowed proportionally. */
  animation: ltcCrabRun 6.8s cubic-bezier(.45,.05,.55,.95) forwards;
}
.ltc-crab-runner svg{ width:100%; height:100%; overflow:visible; }
.ltc-crab-runner .crab-body{ animation: ltcCrabBob .26s ease-in-out infinite; }
.ltc-crab-runner .crab-leg{
  transform-origin: center top;
  animation: ltcCrabLeg .26s ease-in-out infinite;
}
.ltc-crab-runner .crab-leg-1{ animation-delay: 0s; }
.ltc-crab-runner .crab-leg-2{ animation-delay: -.065s; }
.ltc-crab-runner .crab-leg-3{ animation-delay: -.13s; }
.ltc-crab-runner .crab-leg-4{ animation-delay: -.195s; }
.ltc-crab-runner .crab-leg-5{ animation-delay: 0s; }
.ltc-crab-runner .crab-leg-6{ animation-delay: -.065s; }
.ltc-crab-runner .crab-leg-7{ animation-delay: -.13s; }
.ltc-crab-runner .crab-leg-8{ animation-delay: -.195s; }

@keyframes ltcCrabRun{
  0%   { left: var(--crab-start-x, -60px); top: var(--crab-y, 50%); opacity: 0; }
  6%   { opacity: 1; }
  35%  { left: var(--crab-mid-x, 40%); top: var(--crab-y, 50%); opacity: 1; }
  65%  { left: var(--crab-mid-x, 40%); top: var(--crab-y, 50%); opacity: 1; }
  94%  { opacity: 1; }
  100% { left: var(--crab-end-x, 110%); top: var(--crab-y, 50%); opacity: 0; }
}
@keyframes ltcCrabBob{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-1px); }
}
@keyframes ltcCrabLeg{
  0%,100% { transform: rotate(-12deg); }
  50%     { transform: rotate(12deg); }
}
@media (prefers-reduced-motion: reduce){
  .ltc-crab-runner{ display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   v0.187 — STAFF MODE PHONE PORTRAIT RESPONSIVE PASS
   ════════════════════════════════════════════════════════════════════
   The v0.120+ staff hub, v0.123+ in-modal staff editor, and v0.124+
   inventory rows were all built when the only mobile branch was the
   now-deleted modalTemplateMobile. The desktop magazine layout (which
   the merged template uses) had no phone-specific rules for any of
   these classes — all media queries lived inside the now-dead mobile
   template. This block adds phone responsive rules that:

   1. Hide the .sh-fish-lane puffer ambient on phone (was creating a
      ~64px dead zone above the stat tiles because the SVG was sized
      for tablet+ width and the puffer never had room to animate).
   2. Make the .inventory-quickbar chip row obviously horizontal-
      scrollable with snap points + a fade indicator on the right edge
      so customers know there's more to scroll to.
   3. Tighten the .inventory-toolbar-shell padding/margin so the
      sticky toolbar doesn't eat half the visible area.
   4. Collapse the .staff-editor-v123 4-tile primary action grid from
      4-across to 2x2 at phone width.
   5. Make the .se-pill secondary action row horizontally scrollable
      so all 6 pills are reachable instead of getting clipped.
   6. Tighten .inv-group-head padding and .inventory-card-v124
      content for phone width.
   7. Force the staff hub stat tile row from 4 cols → 2 cols at phone
      (it already does this via auto-fill but enforce explicitly).

   All rules are scoped to (max-width: 600px) and (pointer: coarse) to
   match the rest of the app's phone-portrait breakpoint. They do NOT
   touch any locked UI (compatibility gauge, water orbs, hold-to-undo,
   fish markers).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) and (pointer: coarse){

  /* ─── 1. Kill the puffer ambient dead zone ─── */
  .staff-home-v120 .sh-fish-lane{
    display: none !important;
  }

  /* ─── 2. Inventory chip filter row: enforce horizontal scroll ─── */
  .inventory-quickbar{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 8px !important;
    padding: 4px 16px 12px 4px !important;
    margin: 0 -4px 8px !important;
    /* Hide native scrollbar — the gradient fade-out below is the visual cue */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Right-edge fade to indicate "more to scroll" */
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
  }
  .inventory-quickbar::-webkit-scrollbar{ display: none; }
  .inventory-quickbar .inventory-chip-filter{
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    min-height: 40px !important;
    padding: 9px 13px !important;
    font-size: 12px !important;
  }
  .inventory-quickbar .inventory-chip-filter span{
    padding: 2px 7px !important;
    font-size: 10px !important;
  }

  /* ─── 3. Inventory toolbar shell — tighter on phone ─── */
  .inventory-toolbar-shell{
    margin: 0 0 6px !important;
    padding: 0 0 6px !important;
  }
  .inventory-toolbar{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .inventory-toolbar-actions{
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .inventory-toolbar-actions .food-toolbar-btn,
  .inventory-toolbar-actions .inventory-back-btn,
  .inventory-toolbar-actions .inventory-add-toolbar{
    width: 100% !important;
    justify-content: center;
  }

  /* ─── 4. Staff hub kicker row + stat tiles ─── */
  .staff-home-v120 .sh-kicker-row{
    margin-bottom: 10px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .staff-home-v120 .sh-kicker-pill{
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
  .staff-home-v120 .sh-kicker-date{
    font-size: 12px !important;
  }
  .staff-home-v120 .sh-stat-row{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .staff-home-v120 .sh-stat-card{
    padding: 14px 12px !important;
    min-height: 92px !important;
  }
  .staff-home-v120 .sh-stat-label{
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    line-height: 1.25 !important;
  }
  .staff-home-v120 .sh-stat-value{
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  /* ─── 5. In-modal staff editor (v0.123) — fish detail edit block ─── */
  .staff-editor-v123{
    padding: 14px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
  }
  .staff-editor-v123 .se-mode-banner{
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
  }
  .staff-editor-v123 .se-mode-banner strong{
    font-size: 11px !important;
  }
  .staff-editor-v123 .se-mode-banner span{
    font-size: 11px !important;
  }
  /* Primary action tiles: 4-across → 2x2 grid */
  .staff-editor-v123 .se-tile-grid,
  .staff-editor-v123 .se-primary-row{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .staff-editor-v123 .se-tile{
    padding: 14px 10px !important;
    min-height: 96px !important;
    border-radius: 14px !important;
  }
  .staff-editor-v123 .se-tile-wide{
    grid-column: 1 / -1 !important;
  }
  .staff-editor-v123 .se-tile-icon{
    width: 26px !important;
    height: 26px !important;
  }
  .staff-editor-v123 .se-tile-title{
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-top: 6px !important;
  }
  .staff-editor-v123 .se-tile-sub{
    font-size: 11px !important;
    margin-top: 2px !important;
  }
  /* Secondary pills: scrollable horizontal row */
  .staff-editor-v123 .se-pill-row,
  .staff-editor-v123 .se-secondary-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding: 8px 14px 8px 0 !important;
    margin-top: 12px !important;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, black 0, black calc(100% - 18px), transparent 100%);
  }
  .staff-editor-v123 .se-pill-row::-webkit-scrollbar,
  .staff-editor-v123 .se-secondary-row::-webkit-scrollbar{ display: none; }
  .staff-editor-v123 .se-pill{
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }
  /* Rollback bar: tighter padding, full-width buttons */
  .staff-editor-v123 .se-rollback-bar{
    padding: 10px 12px !important;
    margin-top: 12px !important;
    border-radius: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .staff-editor-v123 .se-rollback-label{
    font-size: 10px !important;
    text-align: center;
  }
  .staff-editor-v123 .se-rollback-buttons{
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .staff-editor-v123 .se-rollback-buttons > *{
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 40px !important;
    font-size: 12px !important;
  }
  /* "More edits" collapse — same compact treatment */
  .staff-editor-v123 [data-se-more-toggle]{
    min-height: 40px !important;
    font-size: 12px !important;
    padding: 9px 14px !important;
  }
  .staff-editor-v123 [data-se-more-wrap].is-open .staff-editor-fields{
    grid-template-columns: 1fr !important;
  }
  .staff-editor-v123 .inventory-field-card{
    padding: 12px !important;
  }
  .staff-editor-v123 .inventory-field-card strong{
    font-size: 14px !important;
  }

  /* ─── 6. Inventory group + slim row layout ─── */
  .inventory-rows-v124{
    gap: 6px !important;
  }
  .inv-group-head{
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .inv-group-name{
    font-size: 13px !important;
  }
  .inv-group-count{
    font-size: 11px !important;
    padding: 2px 8px !important;
  }
  .inv-group-chev{
    font-size: 14px !important;
  }
  .inventory-card-v124{
    padding: 12px !important;
    border-radius: 14px !important;
    gap: 10px !important;
  }
  .inventory-card-v124 .inventory-card-name{
    font-size: 14px !important;
  }
  .inventory-card-v124 .inventory-card-meta{
    font-size: 11px !important;
  }
  /* Catalog summary card at top of catalog view */
  .inventory-catalog-summary{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  /* ─── 7. Inventory history overlay (Recent Changes) — phone fit ─── */
  .inventory-history-overlay-panel{
    width: min(96vw, 600px) !important;
    max-width: 96vw !important;
  }
  .inventory-history-main{
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}
/* End v0.187 staff mode phone responsive pass */

/* ════════════════════════════════════════════════════════════════════
   v0.188-exp — EXPERIMENTAL FISH MODAL
   ════════════════════════════════════════════════════════════════════
   New modal layout based on LTC_Staff_EditInPlace_Mockup_v2.html.
   All rules scoped under .fish-modal-exp so they don't collide with
   the legacy modal CSS. Reuses existing classes for gauges, water
   params, statstrip, similar-row, and more-details collapse — only
   the new layout pieces need new CSS.

   Three viewer states layered on body class:
     (no class)              = Customer
     body.is-staff           = Staff display mode
     body.is-edit-mode       = Staff edit mode (implies is-staff)

   Standardized element sizes via custom properties so wrapping
   doesn't warp the layout at different screen sizes.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. Modal sizing — 88vh × 70vw per Chris ─── */
.fish-modal.fish-modal-exp{
  /* Override the legacy width:min(96vw,1460px) / max-height:min(95vh,1180px) */
  width: min(70vw, 1180px) !important;
  height: 88vh !important;
  max-height: 88vh !important;
  min-width: 320px;
  /* Center inside the overlay */
  margin: auto;
}
/* On phone portrait, 70vw is too narrow — use 96vw instead */
@media (max-width: 600px) and (pointer: coarse){
  .fish-modal.fish-modal-exp{
    width: 96vw !important;
    height: 92vh !important;
    max-height: 92vh !important;
  }
}
/* On tablet portrait, expand to 86vw so the inventory grid fits */
@media (min-width: 601px) and (max-width: 980px) and (orientation: portrait){
  .fish-modal.fish-modal-exp{
    width: 86vw !important;
  }
}
/* Landscape phone — full width minus margin, 88vh */
@media (max-width: 900px) and (orientation: landscape){
  .fish-modal.fish-modal-exp{
    width: 92vw !important;
    height: 90vh !important;
  }
}

/* ─── 2. Standardized element sizing custom properties ─── */
.fish-modal.fish-modal-exp{
  --fmx-section-gap: 22px;
  --fmx-card-radius: 16px;
  --fmx-card-padding: 16px;
  --fmx-stat-card-min-h: 84px;
  --fmx-section-header-height: 28px;
  --fmx-banner-height: 56px;
  --fmx-action-btn-min-h: 44px;
  --fmx-amber: var(--c-amber, #ffcb5e);
  --fmx-amber-rgb: 255, 203, 94;
}

/* ─── 3. Staff banner (top of modal in staff mode) ─── */
.fish-modal-exp .fmx-banner{
  display: none; /* hidden by default — only shown in staff mode */
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  margin: 0 0 18px;
  min-height: var(--fmx-banner-height);
  background: linear-gradient(90deg,
    rgba(200,178,255,0.22),
    rgba(94,235,200,0.18) 50%,
    rgba(255,203,94,0.22));
  border: 1px solid rgba(220,234,248,0.14);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
body.is-staff .fish-modal-exp .fmx-banner{
  display: flex;
}
.fish-modal-exp .fmx-banner-icon{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.fish-modal-exp .fmx-banner-icon svg{
  width: 100%;
  height: 100%;
}
.fish-modal-exp .fmx-banner-text{
  flex: 1;
  line-height: 1.2;
  min-width: 0;
}
.fish-modal-exp .fmx-banner-text strong{
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.fish-modal-exp .fmx-banner-text span{
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.78);
  margin-top: 2px;
}
/* Banner button — single slot. Same size + position regardless of label.
   Amber styling in display mode, neutral dark in edit mode. */
.fish-modal-exp .fmx-banner-toggle{
  background: linear-gradient(180deg, rgba(var(--fmx-amber-rgb),0.92), rgba(220,170,60,0.92));
  border: 1.5px solid rgba(255,255,255,0.55);
  color: #1a1408;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: transform 140ms, background 140ms, border-color 140ms;
  min-width: 138px;
  min-height: 36px;
  text-align: center;
  flex: 0 0 auto;
}
.fish-modal-exp .fmx-banner-toggle:hover{
  background: linear-gradient(180deg, rgba(var(--fmx-amber-rgb),1), rgba(232,182,68,1));
  transform: translateY(-1px);
}
body.is-edit-mode .fish-modal-exp .fmx-banner-toggle{
  background: rgba(0,0,0,0.34);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
}
body.is-edit-mode .fish-modal-exp .fmx-banner-toggle:hover{
  background: rgba(0,0,0,0.48);
}

/* ─── 4. Section heading (amber bar style from mockup) ─── */
.fish-modal-exp .fmx-section-header{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220,234,248,0.62);
  margin: 26px 4px 12px;
  padding: 0;
  min-height: var(--fmx-section-header-height);
}
.fish-modal-exp .fmx-section-header::before{
  content: "";
  display: inline-block;
  width: 4px;
  height: 14px;
  background: var(--fmx-amber);
  border-radius: 2px;
  flex: 0 0 auto;
}
.fish-modal-exp .fmx-section-header:first-child{
  margin-top: 6px;
}

/* ─── 5. Status badge in section header ─── */
.fish-modal-exp .fmx-status-badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-left: auto;
}
.fish-modal-exp .fmx-status-green{
  background: rgba(74,222,128,0.18);
  border: 1px solid rgba(74,222,128,0.45);
  color: #4ade80;
}
.fish-modal-exp .fmx-status-amber{
  background: rgba(255,203,94,0.18);
  border: 1px solid rgba(255,203,94,0.45);
  color: #ffcb5e;
}
.fish-modal-exp .fmx-status-rose{
  background: rgba(255,155,182,0.18);
  border: 1px solid rgba(255,155,182,0.45);
  color: #ff9bb6;
}
.fish-modal-exp .fmx-status-red{
  background: rgba(255,154,138,0.18);
  border: 1px solid rgba(255,154,138,0.45);
  color: #ff9a8a;
}

/* ─── 6. Inventory stat grid (6 cards, responsive) ─── */
.fish-modal-exp .fmx-stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.fish-modal-exp .fmx-stat-card{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--fmx-card-padding);
  min-height: var(--fmx-stat-card-min-h);
  background: rgba(46,48,56,0.7);
  border: 1px solid rgba(220,234,248,0.14);
  border-radius: var(--fmx-card-radius);
  position: relative;
  transition: border-color 140ms, background 140ms, transform 140ms;
}
.fish-modal-exp .fmx-stat-label{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220,234,248,0.48);
}
.fish-modal-exp .fmx-stat-value{
  font-size: 22px;
  font-weight: 900;
  color: #f4fbff;
  letter-spacing: -0.01em;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.fish-modal-exp .fmx-stat-value.fmx-stat-money{
  color: #4ade80;
}
.fish-modal-exp .fmx-stat-value.fmx-stat-small{
  font-size: 16px;
}
.fish-modal-exp .fmx-stat-value .fmx-old-price{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-decoration: line-through;
}

/* ─── 7. Editable affordance (only active in edit mode) ─── */
.fish-modal-exp .fmx-editable{
  cursor: default;
}
body.is-edit-mode .fish-modal-exp .fmx-editable{
  cursor: pointer;
  border-color: rgba(var(--fmx-amber-rgb), 0.32);
  border-style: dashed;
  background: rgba(var(--fmx-amber-rgb), 0.04);
}
body.is-edit-mode .fish-modal-exp .fmx-editable:hover{
  border-color: rgba(var(--fmx-amber-rgb), 0.7);
  background: rgba(var(--fmx-amber-rgb), 0.10);
  transform: translateY(-1px);
}
body.is-edit-mode .fish-modal-exp .fmx-editable:active{
  transform: translateY(0);
}
/* Pencil indicator in top-right of editable cards */
body.is-edit-mode .fish-modal-exp .fmx-editable::after{
  content: "✎";
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 14px;
  color: var(--fmx-amber);
  opacity: 0.85;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* ─── 8. Hold / Reserve card ─── */
.fish-modal-exp .fmx-hold-card{
  padding: var(--fmx-card-padding);
  background: rgba(46,48,56,0.7);
  border: 1px solid rgba(220,234,248,0.14);
  border-radius: var(--fmx-card-radius);
  position: relative;
}
.fish-modal-exp .fmx-hold-row{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fish-modal-exp .fmx-hold-chip{
  font-size: 11px;
  font-weight: 900;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(94,235,200,0.16);
  border: 1px solid rgba(94,235,200,0.4);
  color: #5eebc8;
  letter-spacing: 0.08em;
}
.fish-modal-exp .fmx-hold-chip.is-held{
  background: rgba(200,178,255,0.16);
  border-color: rgba(200,178,255,0.4);
  color: #c8b2ff;
}
.fish-modal-exp .fmx-hold-info{
  font-size: 13px;
  color: #f4fbff;
  font-weight: 700;
}
.fish-modal-exp .fmx-hold-info .fmx-muted{
  color: rgba(220,234,248,0.48);
  font-weight: 600;
  font-size: 12px;
}
/* Hold info — v0.188-exp-2: the staff/public split was removed. The
   Inventory header status badge handles customer-visible status now,
   and the Hold/Reserve box is wrapped in .fmx-staff-only. The
   .fmx-hold-info span just shows the full info to staff. */

/* ─── 9. Staff-only and Staff-edit-only section visibility ─── */
.fish-modal-exp .fmx-staff-only,
.fish-modal-exp .fmx-staff-edit-only{
  display: none;
}
body.is-staff .fish-modal-exp .fmx-staff-only{
  display: block;
}
body.is-edit-mode .fish-modal-exp .fmx-staff-edit-only{
  display: block;
}

/* ─── 10. Staff note (amber-tinted card) ─── */
.fish-modal-exp .fmx-staff-note{
  padding: var(--fmx-card-padding);
  background: linear-gradient(180deg, rgba(var(--fmx-amber-rgb),0.10), rgba(var(--fmx-amber-rgb),0.04));
  border: 1px solid rgba(var(--fmx-amber-rgb),0.32);
  border-radius: var(--fmx-card-radius);
  position: relative;
}
.fish-modal-exp .fmx-staff-note p{
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,235,200,0.92);
}
.fish-modal-exp .fmx-staff-note .fmx-empty{
  color: rgba(220,234,248,0.42);
  font-style: italic;
}

/* ─── 11. Status actions (button row, only in edit mode) ─── */
.fish-modal-exp .fmx-status-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fish-modal-exp .fmx-action-btn{
  flex: 1 1 calc(33.333% - 8px);
  min-width: 130px;
  min-height: var(--fmx-action-btn-min-h);
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(220,234,248,0.22);
  background: rgba(46,48,56,0.85);
  color: #f4fbff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 140ms, background 140ms, border-color 140ms;
}
.fish-modal-exp .fmx-action-btn:hover{
  transform: translateY(-1px);
  background: rgba(60,64,76,0.92);
}
.fish-modal-exp .fmx-action-btn.fmx-action-sold{
  border-color: rgba(74,222,128,0.55);
  color: #4ade80;
}
.fish-modal-exp .fmx-action-btn.fmx-action-loss{
  border-color: rgba(255,154,138,0.55);
  color: #ff9a8a;
}
.fish-modal-exp .fmx-action-btn.fmx-action-quarantine{
  border-color: rgba(255,203,94,0.55);
  color: #ffcb5e;
}
.fish-modal-exp .fmx-action-btn.fmx-action-photo{
  border-color: rgba(123,207,255,0.55);
  color: #7bcfff;
}

/* ─── 12. Edit-mode body halo for clear visual feedback ─── */
body.is-edit-mode .fish-modal-exp{
  box-shadow: 0 34px 90px rgba(0,0,0,.50),
              inset 0 0 0 3px rgba(var(--fmx-amber-rgb), 0.28) !important;
}

/* ─── 13. Hide legacy staff editor block when experimental modal is active ───
   The legacy modalTemplate calls renderStaffEditor() which produces a
   .staff-editor-v123 block. The new modalTemplate doesn't call
   renderStaffEditor — it builds inventory + hold + status actions
   inline. But if any other code path injects renderStaffEditor into
   the experimental modal, hide it to avoid duplication. */
.fish-modal-exp .staff-editor-v123{
  display: none;
}

/* ─── 14. Phone portrait responsive overrides ─── */
@media (max-width: 600px) and (pointer: coarse){
  .fish-modal-exp .fmx-stat-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .fish-modal-exp .fmx-stat-card{
    padding: 12px;
    min-height: 72px;
  }
  .fish-modal-exp .fmx-stat-value{
    font-size: 18px;
  }
  .fish-modal-exp .fmx-stat-value.fmx-stat-small{
    font-size: 14px;
  }
  .fish-modal-exp .fmx-banner{
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 10px;
    margin-bottom: 14px;
  }
  .fish-modal-exp .fmx-banner-text{
    flex: 1 1 calc(100% - 50px);
    min-width: 0;
  }
  .fish-modal-exp .fmx-banner-toggle{
    flex: 1 1 100%;
    min-width: 0;
  }
  .fish-modal-exp .fmx-section-header{
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 10px;
  }
  .fish-modal-exp .fmx-action-btn{
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    font-size: 11px;
    padding: 10px 12px;
  }
  .fish-modal-exp .fmx-hold-row{
    gap: 8px;
  }
  .fish-modal-exp .fmx-hold-chip{
    font-size: 10px;
    padding: 4px 10px;
  }
  .fish-modal-exp .fmx-hold-info{
    font-size: 12px;
  }
}

/* ─── 15. Tablet portrait — 3-column inventory grid ─── */
@media (min-width: 601px) and (max-width: 980px) and (orientation: portrait){
  .fish-modal-exp .fmx-stat-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─── 16. Desktop / large landscape — 6-column inventory grid ─── */
@media (min-width: 1100px){
  .fish-modal-exp .fmx-stat-grid{
    grid-template-columns: repeat(6, 1fr);
  }
}
/* End v0.188-exp experimental modal CSS */