/* =====================================================================
   Alea Handles — Product Admin  ·  FINAL stylesheet
   Base theme: "Crisp Data-Dense Pro" (light, high-density enterprise admin)
   Grafts: D2 SVG flash icons + gold-button highlight + disabled inputs;
           D1 gold rationing, flash left-accent-bar, gold-tint active pill;
           D3 brand-only serif + panel h3 gold underline + 22px count-pill.
   CSS only · light theme · one :root token system.
   Fonts to add via <link>:
     Inter            (working content)
     Cormorant Garamond (brand wordmark + login heading only)
   ===================================================================== */

:root{
  /* ---- Brand & accent (gold rationed: active / primary CTA / focus /
          row hover / primary badge / active pill only) ---- */
  --gold:        #B8860B;
  --gold-600:    #9c720a;   /* hover / pressed */
  --gold-700:    #7e5d08;
  --gold-soft:   #fbf3dd;   /* tint background */
  --gold-tint:   #f5e9c4;   /* active-pill fill */
  --gold-line:   #ecdcae;   /* gold-tinted borders */
  --gold-ring:   rgba(184,134,11,.35);

  /* ---- Ink (text) ---- */
  --ink:         #14181f;   /* primary text */
  --ink-2:       #3a424d;   /* secondary text */
  --muted:       #6b7480;   /* tertiary / labels */
  --muted-2:     #939ba6;   /* placeholders / empty */

  /* ---- Surfaces (light workspace) ---- */
  --bg:          #eef1f5;   /* app canvas */
  --surface:     #ffffff;   /* panels, cards */
  --surface-2:   #f7f9fb;   /* subtle fills, zebra, table head */
  --surface-3:   #eff2f6;   /* hover fills */

  --line:        #dfe4ea;   /* borders / dividers */
  --line-2:      #cdd4dd;   /* stronger border */

  /* ---- Slate sidebar ---- */
  --sidebar-bg:   #1c2128;
  --sidebar-fg:   #c4ccd6;
  --sidebar-dim:  #8b95a3;
  --sidebar-hover:#262d36;
  --sidebar-active:#2d343e;
  --sidebar-line: #0e1217;

  --topbar-bg:   #ffffff;

  /* ---- Status ---- */
  --ok:   #1f8a4c;  --ok-bg:  #e7f6ec;  --ok-line:  #b8e2c6;  --ok-deep:  #166537;
  --err:  #c0392b;  --err-bg: #fdecea;  --err-line: #f3c4bf;  --err-deep: #93281d;
  --info: #1f6fb2;  --info-bg:#e8f2fb;  --info-line:#bfdcf2;  --info-deep:#185688;

  /* ---- Radius ---- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 9px;
  --r-pill: 999px;

  /* ---- Spacing scale ---- */
  --s-1: 4px;
  --s-2: 6px;
  --s-3: 8px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 20px;
  --s-7: 28px;
  --s-8: 40px;

  /* ---- Shadows ---- */
  --sh-1: 0 1px 2px rgba(20,24,31,.06), 0 1px 1px rgba(20,24,31,.04);
  --sh-2: 0 4px 12px rgba(20,24,31,.08), 0 1px 3px rgba(20,24,31,.06);
  --sh-pop: 0 12px 32px rgba(20,24,31,.16);

  /* ---- Typography ---- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-brand: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  --topbar-h: 52px;
  --sidebar-w: 208px;
}

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

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

body{
  margin:0;
  font-family:var(--font);
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv05","ss01","tnum";  /* tabular figures for SKU/qty */
}

a{ color:var(--gold-700); text-decoration:none; }
a:hover{ color:var(--gold-600); }

h1,h2,h3{ margin:0; font-weight:650; letter-spacing:-.01em; color:var(--ink); }

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

::selection{ background:var(--gold-ring); }

/* ============================================================ TOPBAR */
.topbar{
  position:sticky;
  top:0;
  z-index:40;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  padding:0 var(--s-6);
  background:var(--topbar-bg);
  border-bottom:1px solid var(--line);
  box-shadow:var(--sh-1);
}

/* Brand wordmark — restrained serif for boutique identity (graft: D3) */
.brand{
  font-family:var(--font-brand);
  font-size:21px;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--ink);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
}
.brand::before{
  content:"";
  width:9px; height:18px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-700) 100%);
  box-shadow:0 0 0 1px rgba(126,93,8,.25) inset;
  flex:0 0 auto;
}
.brand:hover{ color:var(--gold-700); }

.top-actions{
  display:flex;
  align-items:center;
  gap:var(--s-3);
}

.who{
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface-2);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  text-transform:capitalize;
}
.who::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--ok);
}

/* =============================================================== LAYOUT */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  align-items:stretch;
  min-height:calc(100vh - var(--topbar-h));
}

/* ============================================================== SIDEBAR */
.sidebar{
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-line);
  padding:var(--s-4) var(--s-3);
  position:sticky;
  top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  overflow-y:auto;
}

.sidenav{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.sidenav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  padding:8px 10px;
  border-radius:var(--r-md);
  color:var(--sidebar-fg);
  font-size:13px;
  font-weight:550;
  line-height:1.3;
  letter-spacing:.005em;
  border:1px solid transparent;
  transition:background .12s ease, color .12s ease;
}
.sidenav a span:first-child{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
/* Neutral tick marker at rest — gold reserved for hover/active (graft: D1) */
.sidenav a span:first-child::before{
  content:"";
  width:6px; height:6px;
  border-radius:2px;
  background:var(--sidebar-dim);
  flex:0 0 auto;
  transition:background .12s ease, transform .12s ease;
}
.sidenav a:hover{
  background:var(--sidebar-hover);
  color:#fff;
}
.sidenav a:hover span:first-child::before{ background:var(--gold); }

.sidenav a.active{
  background:var(--sidebar-active);
  color:#fff;
  font-weight:650;
  border-color:#39424e;
  position:relative;
}
.sidenav a.active::before{
  content:"";
  position:absolute;
  left:0;                 /* fixed: removed invalid `left:-var(--s-3)` */
  top:6px; bottom:6px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--gold);
}
.sidenav a.active span:first-child::before{ background:var(--gold); transform:scale(1.1); }

.sidenav a:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:1px;
}

/* =============================================================== CONTENT */
.content{
  min-width:0;
  padding:var(--s-6) var(--s-7);
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
}

/* Login / logged-out container */
.container{
  max-width:420px;
  margin:0 auto;
  padding:var(--s-8) var(--s-5);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--line);
}
.page-head h1{
  font-size:21px;
  font-weight:700;
  letter-spacing:-.015em;
}

.muted{ color:var(--muted); }

/* ================================================================ PANELS */
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:var(--s-5) var(--s-5) var(--s-6);
}
.panel + .panel{ margin-top:0; }

.panel h3{
  font-size:14px;
  font-weight:650;
  letter-spacing:-.005em;
  color:var(--ink);
  margin:0 0 var(--s-4);
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line);
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--s-3);
}
.panel h3::before{
  content:"";
  width:4px; height:13px;
  border-radius:2px;
  background:var(--gold);
}
/* Short gold underline accent for brand warmth (graft: D3) */
.panel h3::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:40px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-700));
}

/* Panels wrapping tables: let the table run edge-to-edge (graft: D4 pattern) */
.panel:has(> .list){ padding:0; overflow:hidden; }
.panel:has(> .list) > h3{
  margin:0;
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line);
}
.panel:has(> .list) > h3::after{ left:var(--s-5); }

/* ================================================================ BUTTONS */
.btn{
  --btn-bg:#fff;
  --btn-fg:var(--ink-2);
  --btn-bd:var(--line-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1;
  letter-spacing:.005em;
  padding:9px 14px;
  border-radius:var(--r-md);
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  cursor:pointer;
  white-space:nowrap;
  user-select:none;
  transition:background .12s ease, border-color .12s ease,
             color .12s ease, box-shadow .12s ease, transform .04s ease;
}
.btn:hover{ background:var(--surface-3); border-color:var(--line-2); color:var(--ink); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.btn:disabled,
.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }

.btn-sm{
  padding:6px 10px;
  font-size:12px;
  border-radius:var(--r-sm);
}

/* Topbar plain .btn (e.g. Logout) — neutral, reads on light topbar */
.topbar .btn{
  background:var(--surface);
  color:var(--ink-2);
  border-color:var(--line-2);
}
.topbar .btn:hover{ background:var(--surface-3); color:var(--ink); }

/* Gold = primary brand CTA — inset highlight for tactile depth (graft: D2) */
.btn-gold{
  --btn-fg:#fff;
  --btn-bd:var(--gold-700);
  background:linear-gradient(180deg, #c8950f 0%, var(--gold) 60%, var(--gold-600) 100%);
  color:#fff;
  box-shadow:0 1px 1px rgba(126,93,8,.25),
             inset 0 1px 0 rgba(255,255,255,.18),
             var(--sh-1);
}
.btn-gold:hover{
  background:linear-gradient(180deg, #d2a02a 0%, var(--gold) 55%, var(--gold-600) 100%);
  color:#fff;
  border-color:var(--gold-700);
  box-shadow:0 3px 10px rgba(184,134,11,.32),
             inset 0 1px 0 rgba(255,255,255,.20);
}
.btn-gold:focus-visible{ outline-color:var(--gold-700); }

/* Primary = login sign-in (dark, confident) */
.btn-primary{
  --btn-fg:#fff;
  --btn-bd:#000;
  background:var(--ink);
  color:#fff;
  box-shadow:var(--sh-1);
}
.btn-primary:hover{ background:#000; color:#fff; border-color:#000; }
.btn-primary:focus-visible{ outline-color:var(--gold); }

/* Danger */
.btn-danger{
  --btn-fg:var(--err);
  --btn-bd:var(--err-line);
  background:#fff;
}
.btn-danger:hover{
  background:var(--err);
  color:#fff;
  border-color:var(--err);
}
.btn-danger:focus-visible{ outline-color:var(--err); }

/* Ghost */
.btn-ghost{
  --btn-fg:var(--ink-2);
  --btn-bd:transparent;
  background:transparent;
}
.btn-ghost:hover{ background:var(--surface-3); color:var(--ink); border-color:transparent; }

/* =============================================================== SEARCHBAR */
.searchbar{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.searchbar input,
.searchbar select{ margin:0; }
.searchbar input[type="text"],
.searchbar input[type="search"]{
  flex:1 1 220px;
  min-width:160px;
}

/* ================================================================= FORMS */
.field{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  margin-bottom:var(--s-4);
}
.field label{
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  letter-spacing:.01em;
}

.hint{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.4;
}

.required{ color:var(--err); font-weight:700; margin-left:2px; }

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--s-4) var(--s-5);
}
.form-grid .field{ margin-bottom:0; }

.form-actions{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  flex-wrap:wrap;
  margin-top:var(--s-5);
  padding-top:var(--s-4);
  border-top:1px solid var(--line);
}

/* Inputs — comfier 9-10px padding for occasional users (graft: D1) */
input, select, textarea{
  font-family:inherit;
  font-size:13px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  padding:9px 11px;
  width:100%;
  line-height:1.4;
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
  appearance:none;
  -webkit-appearance:none;
}
/* Checkboxes & radios must keep native rendering — the broad input rule above
   would otherwise turn them into invisible, unclickable full-width boxes. */
/* Radios: native rendering with a gold accent. */
input[type=radio]{
  appearance:auto; -webkit-appearance:auto;
  width:auto; height:auto; padding:0; margin:0;
  border:initial; border-radius:0; background:none; box-shadow:none;
  accent-color:var(--gold); cursor:pointer; vertical-align:middle; flex:0 0 auto;
}
/* Checkboxes: custom designed control — visible white box, gold tick when checked. */
input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; flex:0 0 auto;
  padding:0; margin:0;
  border:1.5px solid var(--line-2); border-radius:5px;
  background:#fff; box-shadow:none; cursor:pointer;
  position:relative; vertical-align:middle;
  transition:background .12s ease, border-color .12s ease;
}
input[type=checkbox]:hover{ border-color:var(--gold); }
input[type=checkbox]:checked{ background:var(--gold); border-color:var(--gold); }
input[type=checkbox]:checked::after{
  content:""; position:absolute; left:5px; top:1px;
  width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible{
  outline:2px solid var(--gold-ring); outline-offset:1px;
}
textarea{ min-height:88px; resize:vertical; line-height:1.55; }

select{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:30px;
  cursor:pointer;
}

input::placeholder,
textarea::placeholder{ color:var(--muted-2); opacity:1; }

input:hover, select:hover, textarea:hover{ border-color:#b7c0cb; }

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:#fffdf6;
  box-shadow:0 0 0 3px var(--gold-ring);
}

input:disabled, select:disabled, textarea:disabled{
  background:var(--surface-2);
  color:var(--muted);
  border-color:var(--line);
  cursor:not-allowed;
  opacity:1;
}

/* ================================================================ TABLES */
table.list{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
  font-variant-numeric:tabular-nums;   /* tnum for SKU / price / qty columns */
}
table.list th,
table.list td{
  text-align:left;
  padding:8px 14px;                     /* tight density for 100+ rows */
  vertical-align:middle;
  border-bottom:1px solid var(--line);
}
table.list thead th{
  background:var(--surface-2);
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding-top:9px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
table.list tbody td{ color:var(--ink-2); }
table.list tbody tr{ transition:background .12s ease; }
/* zebra striping */
table.list tbody tr:nth-child(even){ background:var(--surface-2); }
/* warm gold hover row (gold reserved for interaction) */
table.list tbody tr:hover{ background:var(--gold-soft); }
table.list tbody tr:hover td{ color:var(--ink); }
table.list tbody tr:last-child td{ border-bottom:none; }

/* monospace product code chip */
.code{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  background:var(--surface-3);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:2px 7px;
  letter-spacing:.01em;
  white-space:nowrap;
}

/* ================================================================== TAGS */
.tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
  padding:3px 8px;
  border-radius:var(--r-pill);
  background:var(--surface-3);
  color:var(--ink-2);
  border:1px solid var(--line);
  white-space:nowrap;
}
.tag-proc{
  background:var(--gold-soft);
  color:var(--gold-700);
  border-color:var(--gold-line);
}

/* count pill (sidebar / inline counters) — 22px min for readability (graft: D3) */
.count-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:20px;
  padding:0 6px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  border-radius:var(--r-pill);
  background:#3a434f;
  color:#fff;
  flex:0 0 auto;
}
/* gold-tint pill on active nav (graft: D1 — softer, on-brand) */
.sidenav a.active .count-pill{
  background:var(--gold-tint);
  color:var(--gold-700);
}

/* ============================================================ DETAIL GRID */
.detail-grid{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.detail-grid dt{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  padding:9px 14px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.detail-grid dd{
  margin:0;
  font-size:13px;
  color:var(--ink);
  padding:9px 14px;
  border-bottom:1px solid var(--line);
  word-break:break-word;
}
.detail-grid dt:last-of-type,
.detail-grid dd:last-of-type{ border-bottom:none; }

.empty-val{
  color:var(--muted-2);
  font-style:italic;
  font-size:12.5px;
}
.empty-val::before{ content:"—\00a0"; }

/* =============================================================== GALLERY */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:var(--s-4);
}

.imgcard{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--sh-1);
  transition:box-shadow .12s ease, border-color .12s ease, transform .08s ease;
}
.imgcard:hover{ box-shadow:var(--sh-2); border-color:var(--line-2); transform:translateY(-1px); }
.imgcard img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  background:var(--surface-2);
  display:block;
}
.imgcard.is-primary{
  border-color:var(--gold);
  box-shadow:0 0 0 2px var(--gold-ring), var(--sh-1);
}

.badge-primary{
  position:absolute;
  top:7px; left:7px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg, var(--gold), var(--gold-700));
  color:#fff;
  box-shadow:var(--sh-1);
}
.badge-primary::before{ content:"\2605"; font-size:10px; line-height:1; }  /* star */

.imgcard-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-2);
  padding:7px 9px;
  border-top:1px solid var(--line);
  background:var(--surface-2);
}
.fname{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

/* ================================================================ FLASH
   Redundant status signaling: color + left accent bar + SVG icon
   (grafts: D2 SVG masks, D1/D3 left-rule). Never color alone. */
.flash{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-radius:var(--r-md);
  font-size:13px;
  font-weight:550;
  border:1px solid var(--line);
  border-left-width:4px;
  background:var(--surface);
  color:var(--ink-2);
}
.flash::before{
  content:"";
  width:18px; height:18px;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:center / contain no-repeat;
  mask:center / contain no-repeat;
}
.flash-success{
  background:var(--ok-bg);
  color:var(--ok-deep);
  border-color:var(--ok-line);
  border-left-color:var(--ok);
}
.flash-success::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.1 14.3-4-4 1.4-1.4 2.6 2.6 5.4-5.4 1.4 1.4-6.8 6.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.1 14.3-4-4 1.4-1.4 2.6 2.6 5.4-5.4 1.4 1.4-6.8 6.8Z'/%3E%3C/svg%3E");
}
.flash-error{
  background:var(--err-bg);
  color:var(--err-deep);
  border-color:var(--err-line);
  border-left-color:var(--err);
}
.flash-error::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E");
}
.flash-info{
  background:var(--info-bg);
  color:var(--info-deep);
  border-color:var(--info-line);
  border-left-color:var(--info);
}
.flash-info::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z'/%3E%3C/svg%3E");
}

/* ================================================================ LOGIN */
.login-wrap{
  width:100%;
  max-width:400px;
  padding:var(--s-7) var(--s-7) var(--s-6);
  box-shadow:var(--sh-2);
  border-radius:var(--r-lg);
  border-top:3px solid var(--gold);
}
/* Login heading — serif boutique identity (graft: D3), kept off working content */
.login-wrap h1{
  font-family:var(--font-brand);
  font-size:30px;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--ink);
  text-align:center;
  margin-bottom:var(--s-6);
  padding-bottom:0;
  border-bottom:none;
}
.login-wrap form{ margin-top:var(--s-2); }
.login-wrap .field{ margin-bottom:var(--s-5); }
.login-wrap .field:last-of-type{ margin-bottom:var(--s-6); }
.login-wrap .btn{ width:100%; padding:11px 14px; font-size:13.5px; margin-top:var(--s-2); }
.login-brand{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-brand); font-size:27px; font-weight:600;
  letter-spacing:.2px; color:var(--ink); line-height:1;
}
.login-brand .lb-text{ white-space:nowrap; }
.login-logo{
  width:11px; height:26px; border-radius:3px; flex:0 0 auto;
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-700) 100%);
  box-shadow:0 0 0 1px rgba(126,93,8,.25) inset;
}
.login-sub{
  text-align:center; color:var(--muted); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  margin:8px 0 24px;
}

/* =============================================================== FOOTER */
.footer{
  padding:var(--s-5) var(--s-7);
  font-size:11.5px;
  color:var(--muted);
  text-align:center;
  background:var(--surface);
  border-top:1px solid var(--line);
  letter-spacing:.02em;
}

/* ============================================================ RESPONSIVE
   Sidebar collapses to a horizontal/stacked bar. */
@media (max-width:760px){
  body{ font-size:13px; }

  .topbar{
    padding:0 var(--s-4);
    height:auto;
    min-height:var(--topbar-h);
    flex-wrap:wrap;
    gap:var(--s-2);
    padding-top:10px;
    padding-bottom:10px;
  }
  .brand{ font-size:18px; }
  .top-actions{ gap:var(--s-2); flex-wrap:wrap; }

  .app{ grid-template-columns:1fr; }

  /* Sidebar → horizontal, scrollable bar */
  .sidebar{
    position:static;
    height:auto;
    width:100%;
    padding:var(--s-2) var(--s-3);
    border-right:none;
    border-bottom:1px solid var(--sidebar-line);
    overflow-x:auto;
    overflow-y:hidden;
  }
  .sidenav{
    flex-direction:row;
    flex-wrap:nowrap;
    gap:var(--s-1);
    min-width:max-content;
  }
  .sidenav a{
    white-space:nowrap;
    padding:8px 12px;
  }
  .sidenav a.active::before{
    left:6px; right:6px;
    top:auto; bottom:0;
    width:auto; height:3px;
    border-radius:3px 3px 0 0;
  }

  .content{ padding:var(--s-5) var(--s-4); gap:var(--s-4); }

  .container{ padding:var(--s-6) var(--s-4); max-width:none; }

  .page-head{ flex-wrap:wrap; gap:var(--s-2); }
  .page-head h1{ font-size:18px; }

  .panel{ padding:var(--s-5); }

  .form-grid{ grid-template-columns:1fr; }

  .form-actions{ flex-wrap:wrap; }
  .form-actions .btn{ flex:1 1 auto; }

  .detail-grid{ grid-template-columns:1fr; }
  .detail-grid dt{ border-bottom:none; padding-bottom:2px; }

  .gallery{ grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); }

  /* Under a now-static sidebar the sticky offset is no longer valid:
     reset thead top to 0 so headers pin to the scroll region's top. */
  table.list thead th{ top:0; }
  table.list th, table.list td{ padding:7px 10px; }

  .footer{ padding:var(--s-4); }
}

@media (max-width:420px){
  .top-actions .who{ display:none; }
  .login-wrap h1{ font-size:26px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* ---- Filter bar ---- */
.filterbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:10px 12px; box-shadow:var(--sh-1); margin-bottom:var(--s-5); }
.filterbar .search{ flex:1 1 240px; min-width:200px; }
.filterbar select{ flex:0 0 auto; width:auto; min-width:150px; }
.filterbar input, .filterbar select{ height:38px; }
.filter-actions{ display:flex; gap:8px; margin-left:auto; }
.filter-actions .btn{ height:38px; }

/* ---- Pagination ---- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:6px;
  flex-wrap:wrap; margin:var(--s-5) 0 var(--s-2); }
.pagination a, .pagination .pg{ display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 11px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--surface); color:var(--ink-2);
  font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.pagination a:hover{ background:var(--surface-3); border-color:var(--line-2); text-decoration:none; color:var(--ink); }
.pagination .current{ background:var(--gold); color:#fff; border-color:var(--gold-700); }
.pagination .disabled{ opacity:.45; }
.pagination .gap{ border:none; background:none; min-width:auto; padding:0 2px; color:var(--muted-2); }
.page-meta{ text-align:center; color:var(--muted); font-size:12.5px; margin:4px 0 0; }

/* =====================================================================
   Alea Handles — Product Admin · FINAL RESPONSIVE LAYER  ("Off-canvas drawer")
   APPEND verbatim to the END of assets/style.css. Uses existing :root tokens.
   Desktop (>1024px) is left PIXEL-IDENTICAL — no rule here applies above 1024.

   This block is declared AFTER the legacy `@media (max-width:760px)` /
   `(max-width:420px)` rules already in the file, so where selectors overlap
   (sidebar, sidenav, active accent, thead top) THIS layer wins by source order
   and re-anchors the sidebar as a fixed drawer instead of the legacy
   horizontal-scroll bar. Do not delete the legacy block — it is harmlessly
   superseded; (optionally you may remove lines ~841-916 if you prefer a single
   source of truth, but it is not required).

   Breakpoints:  <=1024 tablet density · <=768 mobile drawer · <=430 small phone
   Table strategy: REAL table preserved everywhere — horizontal momentum scroll
   + sticky first column + right-edge fade (no data-label card collapse, so
   ZERO coupling to column order/count and ZERO PHP edits across the 7 pages).
   Grafts: min-width:max-content + inline max-width reset + .rep-grid stack
   (Judge 2); safe-area-inset + tap-highlight removal (Judges 1 & 3);
   slim tinted scrollbars (Judge 2).
   ===================================================================== */

/* ---- Hamburger toggle + overlay: declared globally, shown only at <=768 ---- */
.nav-toggle{
  display:none;                         /* hidden on desktop/tablet */
  align-items:center;
  justify-content:center;
  width:40px; height:40px;              /* >=40px touch target */
  margin-left:calc(var(--s-2) * -1);
  padding:0;
  border:1px solid transparent;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--ink-2);
  cursor:pointer;
  flex:0 0 auto;
  -webkit-appearance:none; appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle:hover{ background:var(--surface-3); color:var(--ink); }
.nav-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  display:block;
  width:18px; height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .18s ease, opacity .18s ease;
}
.nav-toggle-bars{ position:relative; }
.nav-toggle-bars::before{ position:absolute; left:0; top:-6px; }
.nav-toggle-bars::after{  position:absolute; left:0; top:6px; }
/* Morph the three bars into an X when the drawer is open */
.nav-open .nav-toggle-bars{ background:transparent; }
.nav-open .nav-toggle-bars::before{ transform:translateY(6px) rotate(45deg); }
.nav-open .nav-toggle-bars::after{  transform:translateY(-6px) rotate(-45deg); }

.nav-overlay{
  position:fixed;
  inset:var(--topbar-h) 0 0 0;          /* sits below the sticky topbar */
  z-index:44;                            /* under drawer(45) + topbar(40-on-top via stacking) */
  background:rgba(20,24,31,.46);
  -webkit-backdrop-filter:blur(1px);
  backdrop-filter:blur(1px);
  opacity:0;
  transition:opacity .2s ease;
}
.nav-overlay[hidden]{ display:none; }
.nav-open .nav-overlay{ opacity:1; }

/* ====================================================== TABLET  (<=1024px) */
@media (max-width:1024px){
  :root{ --sidebar-w:184px; }            /* slightly narrower rail; shell intact */
  .content{ padding:var(--s-6) var(--s-6); }
  .filterbar .search{ flex:1 1 200px; }
  .form-grid{ gap:var(--s-4); }
  .gallery{ grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); }
  /* No tap-highlight on the controls users will start tapping */
  .sidenav a, .btn, .pagination a{ -webkit-tap-highlight-color:transparent; }
}

/* ====================================================== MOBILE  (<=768px) */
@media (max-width:768px){
  body{ font-size:13px; }

  /* Reveal hamburger; keep the topbar a tidy single row */
  .nav-toggle{ display:inline-flex; }
  .topbar{ padding:0 var(--s-4); gap:var(--s-3); }
  .brand{ font-size:18px; gap:var(--s-2); min-width:0; }
  .top-actions{ gap:var(--s-2); flex:0 0 auto; }

  /* Collapse the two-column app grid to one column */
  .app{ grid-template-columns:1fr; }

  /* --- Sidebar becomes a fixed off-canvas drawer (OVERRIDES legacy 760 rules) --- */
  .sidebar{
    position:fixed;
    top:var(--topbar-h);
    left:0;
    bottom:0;
    height:auto;                                  /* override desktop calc() */
    width:264px;
    max-width:84vw;
    z-index:45;                                   /* above content + overlay */
    padding:var(--s-4) var(--s-3);
    /* clear the iOS home indicator / Android gesture bar for the last link */
    padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    border-right:1px solid var(--sidebar-line);
    border-bottom:none;                           /* undo legacy bottom border */
    overflow-x:hidden;
    overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .24s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--sh-pop);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#3a434f transparent;
  }
  .sidebar::-webkit-scrollbar{ width:6px; }
  .sidebar::-webkit-scrollbar-thumb{ background:#3a434f; border-radius:var(--r-pill); }
  .sidebar::-webkit-scrollbar-track{ background:transparent; }
  .nav-open .sidebar{ transform:translateX(0); }

  /* Restore the VERTICAL nav (legacy block had made it horizontal) */
  .sidenav{
    flex-direction:column;
    flex-wrap:nowrap;
    gap:2px;
    min-width:0;
  }
  .sidenav a{
    white-space:normal;
    min-height:44px;                              /* touch target */
    padding:10px 12px;
    -webkit-tap-highlight-color:transparent;
  }
  /* Restore the desktop LEFT active-accent (legacy moved it to a bottom underline) */
  .sidenav a.active::before{
    left:0; right:auto;
    top:6px; bottom:6px;
    width:3px; height:auto;
    border-radius:0 3px 3px 0;
  }

  /* Content density */
  .content{ padding:var(--s-5) var(--s-4); gap:var(--s-4); }
  .container{ padding:var(--s-6) var(--s-4); max-width:none; min-height:auto; }

  /* Page head stacks: title above the action button */
  .page-head{
    flex-direction:column;
    align-items:stretch;
    gap:var(--s-3);
  }
  .page-head h1{ font-size:18px; }
  .page-head > .btn,
  .page-head > .form-actions{ width:100%; }
  .page-head .form-actions{ margin:0; flex-wrap:wrap; }
  .page-head .form-actions > .btn,
  .page-head .form-actions form{ flex:1 1 auto; }
  .page-head .btn{ width:100%; min-height:44px; }

  /* Filter bar: every control full-width and stacked */
  .filterbar{ flex-direction:column; align-items:stretch; gap:var(--s-3); }
  .filterbar .search,
  .filterbar select{ flex:1 1 auto; width:100%; min-width:0; }
  .filterbar input,
  .filterbar select{ height:44px; }               /* touch target */
  .filter-actions{ margin-left:0; width:100%; gap:var(--s-3); }
  .filter-actions .btn{ flex:1 1 auto; height:44px; }

  /* Panels */
  .panel{ padding:var(--s-5); }

  /* Forms */
  .form-grid{ grid-template-columns:1fr; }
  .form-actions{ flex-wrap:wrap; gap:var(--s-3); }
  .form-actions .btn{ flex:1 1 auto; min-height:44px; }
  /* 11px vertical padding => ~42px tap height; 13px font keeps desktop look */
  input, select, textarea{ padding:11px 12px; }

  /* reports.php hardcodes inline grid-template-columns:1fr 1fr on .rep-grid —
     override it (inline style, so !important is required) so the two
     "Most searched"/"Most scanned" panels stack instead of squeezing. */
  .rep-grid{ grid-template-columns:1fr !important; }

  /* Detail grid (view.php) -> single column */
  .detail-grid{ grid-template-columns:1fr; }
  .detail-grid dt{ border-bottom:none; padding-bottom:2px; background:var(--surface-2); }
  .detail-grid dd{ padding-top:2px; }

  /* Gallery */
  .gallery{ grid-template-columns:repeat(auto-fill, minmax(128px,1fr)); gap:var(--s-3); }

  /* ---- WIDE TABLES: horizontal momentum scroll + sticky first col + edge fade ---- */
  /* The wrapping panel was overflow:hidden (via :has(>.list)); make it the scroller. */
  .panel:has(> .list),
  .table-wrap{
    position:relative;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--line-2) transparent;
  }
  .panel:has(> .list)::-webkit-scrollbar,
  .table-wrap::-webkit-scrollbar{ height:6px; }
  .panel:has(> .list)::-webkit-scrollbar-thumb,
  .table-wrap::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:var(--r-pill); }
  .panel:has(> .list)::-webkit-scrollbar-track,
  .table-wrap::-webkit-scrollbar-track{ background:transparent; }

  /* Subtle right-edge fade hinting that more columns exist to the right */
  .panel:has(> .list)::after,
  .table-wrap::after{
    content:"";
    position:absolute;
    top:0; right:0; bottom:0;
    width:28px;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(255,255,255,0), var(--surface));
    z-index:3;
  }

  /* Size columns to their actual content so overflow engages naturally on
     EVERY page regardless of column count (4-col galleries .. 8-col index)
     — graft from Judge 2/3, replaces a guessed magic min-width. */
  table.list{ min-width:max-content; }
  /* requests.php (max-width:240px) & logs.php (max-width:280px) set inline
     max-width on cells; release it so they don't stay artificially narrow
     inside the scroller (graft from Judge 2). */
  table.list td[style*="max-width"]{ max-width:none !important; }

  /* thead was offset under the desktop sticky sidebar; pin to scroll-region top */
  table.list thead th{ top:0; }
  table.list th, table.list td{ padding:8px 12px; }   /* keeps ~40px row height */

  /* Sticky first column (product code / primary identifier) */
  table.list thead th:first-child,
  table.list tbody td:first-child{
    position:sticky;
    left:0;
    z-index:2;
    box-shadow:1px 0 0 var(--line);                /* clean detachment edge */
  }
  /* Opaque fill so scrolled cells don't bleed through; match zebra + hover */
  table.list tbody td:first-child{ background:var(--surface); }
  table.list tbody tr:nth-child(even) td:first-child{ background:var(--surface-2); }
  table.list tbody tr:hover td:first-child{ background:var(--gold-soft); }
  table.list thead th:first-child{ background:var(--surface-2); z-index:4; }

  /* Pagination wraps and stays tappable */
  .pagination{ gap:var(--s-2); }
  .pagination a, .pagination .pg{ min-width:40px; height:40px; }

  .footer{ padding:var(--s-4); }

  /* Lock body scroll while the drawer is open */
  body.nav-open{ overflow:hidden; }
}

/* ================================================== SMALL PHONE (<=430px) */
@media (max-width:430px){
  .top-actions .who{ display:none; }               /* room for brand + Logout */
  .brand{ font-size:16px; }
  .content{ padding:var(--s-4) var(--s-3); }
  .panel{ padding:var(--s-4); }
  .login-wrap{ padding:var(--s-6) var(--s-5) var(--s-5); }
  .login-wrap h1{ font-size:26px; }
  .sidebar{ width:88vw; max-width:88vw; }           /* near full-bleed drawer */
  .gallery{ grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); }
}

/* Honour reduced-motion for the new drawer / overlay / hamburger transitions */
@media (prefers-reduced-motion:reduce){
  .sidebar, .nav-overlay, .nav-toggle-bars,
  .nav-toggle-bars::before, .nav-toggle-bars::after{ transition:none !important; }
}

/* ================================================================ */
/* Mobile header + reports refinements (2026-06-25)                 */
/* ================================================================ */
/* Brand wordmark: name + subtle suffix (suffix hides on phones).    */
.brand-name{ font-weight:600; }
.brand-suffix{ color:var(--muted); font-weight:500; }
.brand-suffix::before{ content:"·"; margin:0 .45em; color:var(--line-2); }

@media (max-width:720px){
  /* Keep the top bar a single row: brand may shrink, actions never wrap. */
  .topbar{ flex-wrap:nowrap; }
  .brand{ min-width:0; overflow:hidden; }
  .brand-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .brand-suffix{ display:none; }                 /* just "Alea Handles" on phones */
  .top-actions{ flex:0 0 auto; }                 /* Logout stays inline, top-right */

  /* Reports stat lists: one compact row per metric (label left, value right) */
  /* instead of the tall stacked block the generic .detail-grid produces.     */
  .detail-grid.kv{ grid-template-columns:1fr auto; column-gap:var(--s-5); }
  .detail-grid.kv dt{
    border-bottom:1px solid var(--line); padding:8px 0; background:none;
    align-self:center;
  }
  .detail-grid.kv dd{
    border-bottom:1px solid var(--line); padding:8px 0;
    text-align:right; font-weight:700; font-variant-numeric:tabular-nums;
    align-self:center;
  }
  .detail-grid.kv dt:last-of-type,
  .detail-grid.kv dd:last-of-type{ border-bottom:none; }
}

/* ================================================================ */
/* RESPONSIVE AUDIT — CONSOLIDATED MOBILE FIXES (2026-06-25)         */
/* Touch targets, code-chip overflow, image-card footer, gallery     */
/* toolbar, checkbox tap area, reports chart labels.                 */
/* Reuses the existing 768/430 breakpoints; theme tokens only.       */
/* ================================================================ */

/* Plain in-panel toolbar (gallery_manage filter row) — desktop layout. */
.panel-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.panel-toolbar .search{ flex:1 1 240px; min-width:200px; }

@media (max-width:768px){
  /* Product-code chips wrap so a long code can't force whole-page scroll
     (view.php / edit.php H1, view.php "Add images to …" H3). */
  .code{ white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
  .page-head h1{ display:flex; align-items:center; gap:var(--s-2);
                 flex-wrap:wrap; overflow-wrap:anywhere; }
  .page-head h1 .code{ font-size:1.05rem !important; max-width:100%; }

  /* In-row action buttons reach a >=40px tap height; only cells that actually
     contain buttons become a tidy right-aligned row (text cells untouched). */
  .btn-sm{ min-height:40px; padding:8px 12px; }
  table.list td:last-child:has(.btn){
    display:flex; gap:var(--s-2); justify-content:flex-end;
    align-items:center; flex-wrap:wrap;
  }

  /* Status-filter buttons nested in .page-head .form-actions (requests.php). */
  .page-head .form-actions > .btn,
  .page-head .form-actions .btn{ min-height:44px; }

  /* view.php image-card footer: both buttons stack full-width and tappable. */
  .imgcard-foot{ flex-wrap:wrap; }
  .imgcard-foot form{ flex:1 1 100%; }
  .imgcard-foot .btn{ width:100%; min-height:40px; padding-top:8px; padding-bottom:8px; }

  /* Panel form text inputs fill the panel (release inline min-width floors,
     e.g. galleries.php name field). */
  .panel form input[type="text"]{ min-width:0 !important; width:100%; }

  /* gallery_manage filter toolbar: stack full-width with 44px controls. */
  .panel-toolbar{ flex-direction:column; align-items:stretch; gap:var(--s-3); }
  .panel-toolbar .search{ width:100%; min-width:0; }
  .panel-toolbar input[type="text"]{ height:44px; }
  .panel-toolbar .btn{ width:100%; }

  /* Bigger checkbox tap area in the first table column (gallery_manage). */
  table.list th:first-child,
  table.list td:first-child{ min-width:48px; }
  table.list td:first-child input[type=checkbox]{ width:24px; height:24px; }
  table.list td:first-child input[type=checkbox]:checked::after{ left:7px; top:3px; }

  /* reports.php 14-day activity-bar labels: shrink when cramped. */
  .activity-bars .muted{ font-size:.55rem; letter-spacing:-.02em; }
}

@media (max-width:430px){
  .activity-bars .muted{ display:none; }   /* date labels illegible this narrow */
}

/* ================================================================ */
/* IMAGE UPLOADER (view.php): dropzone + paste + crop + multiple     */
/* ================================================================ */
.dropzone{
  border:2px dashed var(--line-2); border-radius:var(--r-lg);
  background:var(--surface-2); padding:var(--s-7) var(--s-5);
  text-align:center; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone:focus-visible{ border-color:var(--gold); background:var(--gold-soft); outline:none; }
.dropzone.drag{ border-color:var(--gold); background:var(--gold-soft); }
.dropzone .dz-icon{ font-size:26px; line-height:1; color:var(--gold-700); }
.dropzone .dz-title{ margin-top:var(--s-2); font-size:15px; }
.dropzone .dz-link{ color:var(--gold-700); text-decoration:underline; cursor:pointer; }

.staging{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
  gap:var(--s-4); margin-top:var(--s-4);
}
.stage-card{
  position:relative; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; background:var(--surface); box-shadow:var(--sh-1);
}
.stage-card img{ display:block; width:100%; height:120px; object-fit:cover; background:var(--surface-3); }
.stage-card.is-bad{ border-color:var(--err); }
.stage-bad{ position:absolute; top:0; left:0; right:0; background:var(--err-bg);
  color:var(--err-deep); font-size:11px; text-align:center; padding:2px; }
.stage-foot{ display:flex; gap:var(--s-2); padding:var(--s-2); justify-content:space-between; }

.uploader-actions{ display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-4); flex-wrap:wrap; }

.crop-modal{
  position:fixed; inset:0; z-index:200; background:rgba(20,24,31,.66);
  display:flex; align-items:center; justify-content:center; padding:var(--s-4);
}
.crop-modal[hidden]{ display:none; }
.crop-box{
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-pop);
  width:min(760px,96vw); max-height:92vh; display:flex; flex-direction:column; overflow:hidden;
}
.crop-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); }
.crop-canvas{ background:var(--sidebar-bg); padding:var(--s-3); overflow:hidden; }
.crop-canvas img{ display:block; max-width:100%; max-height:64vh; }
.crop-actions{ display:flex; align-items:center; gap:var(--s-2);
  padding:var(--s-4) var(--s-5); border-top:1px solid var(--line); flex-wrap:wrap; }

@media (max-width:430px){
  .staging{ grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); }
  .crop-canvas img{ max-height:52vh; }
  .crop-actions .btn{ flex:1 1 auto; min-height:44px; }
}

/* ================================================================ */
/* COLOUR TAGS: swatches, product chips, edit-form picker            */
/* ================================================================ */
.swatch{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:1px solid rgba(20,24,31,.25); vertical-align:middle; flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.swatch-row{ display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.color-tag{
  display:inline-flex; align-items:center; gap:5px; margin:0 6px 4px 0;
  font-size:12.5px; padding:2px 9px 2px 6px; border:1px solid var(--line);
  border-radius:var(--r-pill); background:var(--surface-2); white-space:nowrap;
}
.color-pick{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.color-chip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:6px 12px 6px 9px; border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--surface); font-size:13px; user-select:none;
}
.color-chip input{ width:16px; height:16px; }
.color-chip:hover{ border-color:var(--gold); }
.color-chip:has(input:checked){ border-color:var(--gold); background:var(--gold-soft); box-shadow:0 0 0 1px var(--gold-ring); }
.color-chip.is-review{ border-style:dashed; }
.color-chip.is-review .cc-name::after{ content:" \2022 review"; color:var(--err); font-size:11px; }
@media (max-width:430px){ .color-chip{ flex:1 1 44%; } }

/* per-image colour badge (clickable) + searchable picker (view.php gallery) */
.imgcard a{ position:relative; display:block; }
.img-color-badge{
  position:absolute; left:6px; bottom:6px;
  display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  background:rgba(20,24,31,.82); color:#fff; font-size:11px; line-height:1.4;
  padding:3px 9px 3px 5px; border-radius:var(--r-pill); max-width:calc(100% - 12px);
  border:1px solid transparent; transition:background .12s ease, border-color .12s ease;
}
.img-color-badge:hover, .img-color-badge:focus-visible{ background:rgba(20,24,31,.93); border-color:var(--gold); outline:none; }
.img-color-badge .swatch{ width:10px; height:10px; border-color:rgba(255,255,255,.5); }
.img-color-badge .icb-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.img-color-badge.is-empty{ background:rgba(20,24,31,.55); border:1px dashed rgba(255,255,255,.65); }

.cp-modal{ position:fixed; inset:0; z-index:210; background:rgba(20,24,31,.55);
  display:flex; align-items:center; justify-content:center; padding:var(--s-4); }
.cp-modal[hidden]{ display:none; }
.cp-box{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-pop);
  width:min(440px,96vw); max-height:82vh; display:flex; flex-direction:column; overflow:hidden; }
.cp-head{ display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); }
.cp-search{ display:block; margin:var(--s-4) var(--s-5) var(--s-2);
  padding:9px 12px; font-size:14px; }
.cp-list{ overflow-y:auto; padding:var(--s-2) var(--s-4) var(--s-3);
  display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cp-option{ display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  font-size:13px; text-align:left; color:var(--ink); }
.cp-option:hover{ border-color:var(--gold); background:var(--gold-soft); }
.cp-option.is-current{ border-color:var(--gold); background:var(--gold-tint); font-weight:600; }
.cp-option .swatch{ width:14px; height:14px; }
.cp-foot{ display:flex; align-items:center; gap:12px;
  padding:var(--s-3) var(--s-5) var(--s-4); border-top:1px solid var(--line); }
@media (max-width:430px){ .cp-list{ grid-template-columns:1fr; } }

/* product list cover thumbnail + colour badge (index.php) */
.list-thumb-cell{ width:72px; }
.list-thumb{ position:relative; display:block; width:60px; height:60px;
  border-radius:var(--r-md); overflow:hidden; background:var(--surface-3); }
.list-thumb > a{ display:block; width:100%; height:100%; }
.list-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.list-thumb-empty{ display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); font-size:24px; font-weight:300; border:1px dashed var(--line-2); text-decoration:none; }
.list-thumb .img-color-badge{ left:3px; bottom:3px; padding:2px 3px; gap:0; }
.list-thumb .img-color-badge .icb-name{ display:none; }   /* swatch-only dot on the list */
.list-thumb .img-color-badge .swatch{ width:12px; height:12px; }

/* in-page image lightbox (view.php) — click a photo to view + browse prev/next */
.lightbox{ position:fixed; inset:0; z-index:300; background:rgba(10,12,16,.93);
  display:flex; align-items:center; justify-content:center; }
.lightbox[hidden]{ display:none; }
.lb-stage{ position:relative; max-width:92vw; max-height:88vh; display:flex; align-items:center; justify-content:center; }
.lb-stage img{ max-width:92vw; max-height:88vh; object-fit:contain; border-radius:var(--r-md); box-shadow:0 12px 44px rgba(0,0,0,.55); background:#0a0c10; transition:opacity .2s ease; }
.lb-count{ position:absolute; left:0; right:0; bottom:-30px; text-align:center; color:#fff; font-size:13px; letter-spacing:.3px; }
.lb-nav{ position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:none; font-size:30px; line-height:1; cursor:pointer; }
.lb-nav:hover{ background:rgba(255,255,255,.26); }
.lb-prev{ left:18px; } .lb-next{ right:18px; }
.lb-close{ position:absolute; z-index:3; top:14px; right:20px; width:42px; height:42px; background:none; border:none;
  color:#fff; font-size:34px; line-height:1; cursor:pointer; }
.lb-tools{ position:absolute; z-index:3; top:14px; left:18px; display:flex; gap:8px; }
.lb-rot{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; border:none; font-size:22px; line-height:1; cursor:pointer; }
.lb-rot:hover{ background:rgba(255,255,255,.26); }
@media (max-width:600px){ .lb-nav{ width:40px; height:40px; font-size:24px; } .lb-prev{ left:6px; } .lb-next{ right:6px; } .lb-tools{ top:10px; left:8px; } .lb-rot{ width:38px; height:38px; font-size:19px; } }