/* SmartPack QR — "Ragam Nusantara" design system (v1)
   Tokens are named exactly like the Figma variables' WEB code syntax (--color-*, --space-*, --radius-*).
   Light values live on :root; dark values on :root[data-theme=dark]. Components use tokens only.
   Legacy token names (--accent, --surface, --r-md …) are kept as aliases so older console markup keeps working.
   Sections: 1 tokens · 2 base & a11y · 3 controls · 4 feedback · 5 brand & signature elements · 6 public shell
             7 public components · 8 public pages · 9 passport/scan/status · 10 console · 11 auth/account · 12 responsive */

/* Self-hosted fonts (SIL Open Font License, see /assets/fonts/OFL-*.txt) */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/bricolage-grotesque-wght.woff2') format('woff2-variations'),url('../fonts/bricolage-grotesque-wght.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-400.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-700.woff2') format('woff2');}


/* ========== 1. Tokens ========== */
:root{
  /* primitives */
  --color-tarum-50:#EEF0FA;--color-tarum-100:#D9DDF3;--color-tarum-300:#8E98D6;--color-tarum-400:#6472C4;--color-tarum-500:#3D4DB0;--color-tarum-600:#2E3C96;--color-tarum-700:#243078;--color-tarum-800:#1B245A;--color-tarum-900:#121833;
  --color-kunyit-50:#FFF8E6;--color-kunyit-100:#FEEDBF;--color-kunyit-300:#F8CD5C;--color-kunyit-400:#F2B92A;--color-kunyit-500:#E0A10F;--color-kunyit-600:#B87F08;--color-kunyit-700:#8C5F09;--color-kunyit-800:#5E4007;
  --color-pandan-50:#ECF7EF;--color-pandan-100:#D2EDDA;--color-pandan-300:#7FC596;--color-pandan-400:#52AD73;--color-pandan-500:#2F8F55;--color-pandan-600:#237344;--color-pandan-700:#1B5A36;--color-pandan-800:#143F27;
  --color-terakota-50:#FDF0EB;--color-terakota-100:#F9D9CC;--color-terakota-300:#EC9C7D;--color-terakota-400:#E07A55;--color-terakota-500:#CF5A33;--color-terakota-600:#AE4424;--color-terakota-700:#85331C;--color-terakota-800:#5C2413;
  --color-laut-50:#E8F6F6;--color-laut-100:#C6E9EA;--color-laut-300:#6FC2C4;--color-laut-400:#3FA5A9;--color-laut-500:#1E8A8F;--color-laut-600:#16706F;--color-laut-700:#115657;--color-laut-800:#0B3B3B;
  --color-manggis-50:#F6EEF5;--color-manggis-100:#EAD5E7;--color-manggis-300:#C184B8;--color-manggis-400:#A95F9D;--color-manggis-500:#8E3F82;--color-manggis-600:#74306A;--color-manggis-700:#5A2552;--color-manggis-800:#3E1938;
  --color-cabai-50:#FDECEC;--color-cabai-100:#F9D2D0;--color-cabai-300:#EE8A85;--color-cabai-400:#E0605A;--color-cabai-500:#C8322B;--color-cabai-600:#A5261F;--color-cabai-700:#7F1D18;
  --color-beras-0:#FFFFFF;--color-beras-25:#FFFFFF;--color-beras-50:#FAFAF8;--color-beras-100:#F2F1EE;--color-beras-200:#E4E2DD;--color-beras-300:#CDCAC3;--color-beras-400:#A8A49B;--color-beras-500:#807B72;--color-beras-600:#605C54;--color-beras-700:#44413B;--color-beras-800:#2D2B27;--color-beras-900:#1C1B18;--color-beras-950:#121211;
  --color-malam-sunken:#0D0B09;--color-malam-kunyit:#2B2208;--color-malam-pandan:#10271A;--color-malam-cabai:#2E1110;--color-malam-laut:#0C2626;

  /* semantic — light */
  --color-bg-canvas:var(--color-beras-50);--color-bg-surface:var(--color-beras-0);--color-bg-surface-raised:var(--color-beras-25);--color-bg-sunken:var(--color-beras-100);--color-bg-inverse:var(--color-tarum-900);
  --color-text-primary:var(--color-beras-900);--color-text-secondary:var(--color-beras-700);--color-text-tertiary:var(--color-beras-600);
  --color-text-on-brand:var(--color-beras-0);--color-text-on-accent:var(--color-tarum-900);--color-text-on-inverse:var(--color-beras-50);--color-text-link:var(--color-tarum-600);
  --color-border-default:var(--color-beras-200);--color-border-strong:var(--color-beras-300);
  --color-brand-primary:var(--color-tarum-600);--color-brand-primary-hover:var(--color-tarum-700);--color-brand-primary-subtle:var(--color-tarum-50);
  --color-accent-default:var(--color-kunyit-400);--color-accent-hover:var(--color-kunyit-500);--color-accent-subtle:var(--color-kunyit-50);
  --color-status-success:var(--color-pandan-600);--color-status-success-subtle:var(--color-pandan-50);
  --color-status-warning:var(--color-kunyit-700);--color-status-warning-subtle:var(--color-kunyit-50);
  --color-status-danger:var(--color-cabai-600);--color-status-danger-subtle:var(--color-cabai-50);--color-status-danger-hover:var(--color-cabai-700);
  --color-status-info:var(--color-laut-600);--color-status-info-subtle:var(--color-laut-50);
  --color-focus-ring:var(--color-kunyit-400);
  --color-category-pangan-bg:var(--color-kunyit-50);--color-category-pangan-fg:var(--color-kunyit-700);--color-category-pangan-solid:var(--color-kunyit-400);
  --color-category-agro-bg:var(--color-pandan-50);--color-category-agro-fg:var(--color-pandan-700);--color-category-agro-solid:var(--color-pandan-500);
  --color-category-kriya-bg:var(--color-terakota-50);--color-category-kriya-fg:var(--color-terakota-700);--color-category-kriya-solid:var(--color-terakota-500);
  --color-category-laut-bg:var(--color-laut-50);--color-category-laut-fg:var(--color-laut-700);--color-category-laut-solid:var(--color-laut-500);
  --color-category-fesyen-bg:var(--color-manggis-50);--color-category-fesyen-fg:var(--color-manggis-700);--color-category-fesyen-solid:var(--color-manggis-500);
  --color-category-umum-bg:var(--color-tarum-50);--color-category-umum-fg:var(--color-tarum-700);--color-category-umum-solid:var(--color-tarum-500);
  --color-nav-bg:var(--color-tarum-900);--color-nav-item-active:var(--color-tarum-800);--color-nav-fg:var(--color-beras-50);--color-nav-fg-muted:var(--color-tarum-300);--color-nav-divider:var(--color-tarum-800);

  /* spacing & radius */
  --space-0:0px;--space-2:2px;--space-4:4px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;--space-48:48px;--space-64:64px;--space-80:80px;
  --radius-none:0px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;

  /* effects */
  --shadow-card:0 1px 2px rgba(28,27,24,.06),0 4px 12px rgba(28,27,24,.06);
  --shadow-raised:0 8px 24px rgba(28,27,24,.12);
  --shadow-focus:0 0 0 3px var(--color-focus-ring);

  /* type */
  --font-display:'Bricolage Grotesque','Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-code:'Space Grotesk',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --motif-ink:url("/assets/img/motif-tenun.svg");--motif-paper:url("/assets/img/motif-tenun-light.svg");

  /* layout */
  --content:1280px;--gutter:80px;--section-y:64px;--edge:max(var(--gutter),calc((100% - var(--content))/2));
  --control-h:44px;--control-sm:36px;--control-lg:52px;--bottom-nav-h:76px;--header-h:77px;
  color-scheme:light;

  /* ---- legacy aliases (console & older markup) ---- */
  --font:var(--font-body);--mono:var(--font-code);
  --navy:var(--color-nav-bg);--navy-2:var(--color-tarum-800);
  --accent:var(--color-brand-primary);--accent-hover:var(--color-brand-primary-hover);--accent-soft:var(--color-brand-primary-subtle);--accent-soft-ink:var(--color-text-link);
  --whatsapp:var(--color-brand-primary);--whatsapp-ink:var(--color-text-on-brand);
  --page:var(--color-bg-canvas);--canvas:var(--color-bg-canvas);--surface:var(--color-bg-surface);--surface-2:var(--color-bg-surface-raised);--surface-3:var(--color-bg-sunken);--surface-inverse:var(--color-bg-inverse);
  --text:var(--color-text-primary);--text-2:var(--color-text-secondary);--muted:var(--color-text-tertiary);--muted-2:var(--color-beras-400);--placeholder:var(--color-text-tertiary);
  --border:var(--color-border-default);--border-strong:var(--color-border-strong);
  --link:var(--color-text-link);--link-hover:var(--color-brand-primary-hover);
  --on-dark:var(--color-nav-fg);--on-dark-2:var(--color-tarum-100);--on-dark-muted:var(--color-tarum-300);--on-dark-link:var(--color-kunyit-300);--on-dark-line:rgba(251,247,238,.16);
  --success:var(--color-status-success);--success-bg:var(--color-status-success-subtle);--success-line:color-mix(in srgb,var(--color-status-success) 38%,var(--color-status-success-subtle));
  --danger:var(--color-status-danger);--danger-bg:var(--color-status-danger-subtle);--danger-line:color-mix(in srgb,var(--color-status-danger) 38%,var(--color-status-danger-subtle));
  --warning:var(--color-status-warning);--warning-bg:var(--color-status-warning-subtle);--warning-line:color-mix(in srgb,var(--color-status-warning) 38%,var(--color-status-warning-subtle));
  --info:var(--color-status-info);--info-bg:var(--color-status-info-subtle);--info-line:color-mix(in srgb,var(--color-status-info) 38%,var(--color-status-info-subtle));
  --header-bg:color-mix(in srgb,var(--color-bg-canvas) 94%,transparent);--nav-bg:var(--color-bg-surface);--nav-active:var(--color-brand-primary-subtle);--nav-active-ink:var(--color-brand-primary);
  --media-bg:var(--color-bg-sunken);--overlay-chip:var(--color-bg-surface);--overlay-chip-ink:var(--color-text-primary);
  --focus-ring:var(--shadow-focus);
  --shadow-xs:0 1px 2px rgba(28,27,24,.06);--shadow-sm:var(--shadow-card);--shadow-md:var(--shadow-raised);--shadow-lg:0 24px 56px rgba(18,24,51,.28);
  --r-xs:var(--radius-sm);--r-sm:var(--radius-sm);--r-md:var(--radius-lg);--r-lg:20px;--r-xl:var(--radius-xl);--r-pill:var(--radius-full);
  --blue:var(--accent);--blue-2:var(--accent-hover);--green:var(--color-status-success);
  --app-bg:var(--canvas);--panel:var(--surface);--panel-subtle:var(--surface-2);--panel-raised:var(--surface);
  --ink:var(--text);--ink-soft:var(--text-2);--ink-muted:var(--muted);--line:var(--border);--line-strong:var(--border-strong);
  --brand-50:var(--accent-soft);--brand-600:var(--accent);--brand-700:var(--accent-hover);--focus:var(--focus-ring);
}
:root[data-theme=dark]{
  color-scheme:dark;
  --color-bg-canvas:var(--color-beras-950);--color-bg-surface:var(--color-beras-900);--color-bg-surface-raised:var(--color-beras-800);--color-bg-sunken:var(--color-malam-sunken);--color-bg-inverse:var(--color-beras-50);
  --color-text-primary:var(--color-beras-50);--color-text-secondary:var(--color-beras-300);--color-text-tertiary:var(--color-beras-400);
  --color-text-on-brand:var(--color-tarum-900);--color-text-on-accent:var(--color-tarum-900);--color-text-on-inverse:var(--color-beras-900);--color-text-link:var(--color-tarum-300);
  --color-border-default:var(--color-beras-700);--color-border-strong:var(--color-beras-600);
  --color-brand-primary:var(--color-tarum-300);--color-brand-primary-hover:var(--color-tarum-100);--color-brand-primary-subtle:var(--color-tarum-900);
  --color-accent-default:var(--color-kunyit-300);--color-accent-hover:var(--color-kunyit-400);--color-accent-subtle:var(--color-malam-kunyit);
  --color-status-success:var(--color-pandan-300);--color-status-success-subtle:var(--color-malam-pandan);
  --color-status-warning:var(--color-kunyit-300);--color-status-warning-subtle:var(--color-malam-kunyit);
  --color-status-danger:var(--color-cabai-300);--color-status-danger-subtle:var(--color-malam-cabai);--color-status-danger-hover:var(--color-cabai-400);
  --color-status-info:var(--color-laut-300);--color-status-info-subtle:var(--color-malam-laut);
  --color-focus-ring:var(--color-kunyit-300);
  --color-category-pangan-bg:var(--color-kunyit-800);--color-category-pangan-fg:var(--color-kunyit-100);--color-category-pangan-solid:var(--color-kunyit-300);
  --color-category-agro-bg:var(--color-pandan-800);--color-category-agro-fg:var(--color-pandan-100);--color-category-agro-solid:var(--color-pandan-400);
  --color-category-kriya-bg:var(--color-terakota-800);--color-category-kriya-fg:var(--color-terakota-100);--color-category-kriya-solid:var(--color-terakota-400);
  --color-category-laut-bg:var(--color-laut-800);--color-category-laut-fg:var(--color-laut-100);--color-category-laut-solid:var(--color-laut-400);
  --color-category-fesyen-bg:var(--color-manggis-800);--color-category-fesyen-fg:var(--color-manggis-100);--color-category-fesyen-solid:var(--color-manggis-400);
  --color-category-umum-bg:var(--color-tarum-800);--color-category-umum-fg:var(--color-tarum-100);--color-category-umum-solid:var(--color-tarum-400);
  --shadow-card:0 1px 2px rgba(0,0,0,.3);--shadow-raised:0 10px 28px rgba(0,0,0,.45);--shadow-xs:none;
  --on-dark-line:rgba(251,247,238,.14);
}

/* ========== 2. Base & accessibility ========== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--color-text-primary);background:var(--color-bg-canvas);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,dd{overflow-wrap:anywhere}
h1,h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}
.muted{color:var(--color-text-tertiary)}
.ui-icon{width:20px;height:20px;flex:0 0 auto}
.overline{display:inline-block;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary)}
.overline.dark{color:var(--color-text-tertiary)}
.overline.on-dark{color:var(--color-kunyit-300)}
.code,.mono-code{font-family:var(--font-code);font-weight:500;letter-spacing:0}
.link,.text-action,.icon-link{font-weight:600;color:var(--color-text-link);text-underline-offset:3px}
.link:hover,.text-action:hover,.icon-link:hover{color:var(--color-brand-primary-hover);text-decoration:underline}
.text-action{white-space:nowrap}
.full{width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-80px;z-index:300;background:var(--color-accent-default);color:var(--color-text-on-accent);padding:12px 16px;border-radius:var(--radius-md);font-weight:700;transition:top .15s ease}
.skip-link:focus{top:12px}
:focus{outline:none}
:focus-visible{outline:2px solid transparent;box-shadow:var(--shadow-focus);border-radius:var(--radius-xs)}
.button:focus-visible,.icon-button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{border-radius:var(--radius-md)}
main:focus{outline:none}
:root[data-theme=dark] img[src*="/fallback/"]{filter:brightness(.8) saturate(.9)}
[data-focus-on-load],[data-form-errors],[id]{scroll-margin-top:96px}
[data-focus-on-load]:focus,[data-form-errors]:focus,.trace-results:focus,.scan-result:focus{outline:none;box-shadow:none}
[hidden]{display:none!important}
.container{width:100%;max-width:calc(var(--content) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.only-dark{display:none!important}
:root[data-theme=dark] .only-dark{display:revert!important}
:root[data-theme=dark] .only-light{display:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ========== 3. Controls ========== */
.button,button.button{--btn-h:var(--control-h);border:1.5px solid transparent;border-radius:var(--radius-md);min-height:var(--btn-h);padding:0 var(--space-16);font-weight:600;font-size:14px;line-height:20px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);text-align:center;background:transparent;color:var(--color-text-primary);transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;white-space:nowrap}
.button .ui-icon{width:18px;height:18px}
.button.primary{background:var(--color-brand-primary);color:var(--color-text-on-brand)}
.button.primary:hover{background:var(--color-brand-primary-hover)}
.button.secondary{background:var(--color-bg-surface);border-color:var(--color-brand-primary);color:var(--color-brand-primary)}
.button.secondary:hover{background:var(--color-brand-primary-subtle)}
.button.accent{background:var(--color-accent-default);color:var(--color-text-on-accent)}
.button.accent:hover{background:var(--color-accent-hover)}
.button.ghost{background:transparent;border-color:transparent;color:var(--color-text-primary)}
.button.ghost:hover{background:var(--color-bg-sunken)}
.button.danger{background:var(--color-status-danger);border-color:var(--color-status-danger);color:var(--color-text-on-brand)}
.button.danger:hover{background:var(--color-status-danger-hover);border-color:var(--color-status-danger-hover)}
.button.whatsapp{background:var(--color-brand-primary);color:var(--color-text-on-brand)}
.button.whatsapp:hover{background:var(--color-brand-primary-hover)}
.button.secondary-on-dark{background:transparent;color:var(--color-nav-fg);border-color:rgba(251,247,238,.45)}
.button.secondary-on-dark:hover{background:rgba(251,247,238,.08)}
.button.light{background:var(--color-beras-50);color:var(--color-tarum-900)}
.button.light:hover{background:var(--color-beras-0)}
.button.compact,.button.sm{--btn-h:var(--control-sm);padding:0 var(--space-12);font-size:14px}
.button.lg{--btn-h:var(--control-lg);padding:0 var(--space-20);font-size:16px;line-height:24px}
.button.lg .ui-icon{width:20px;height:20px}
.button[disabled],.button[aria-disabled=true]{background:var(--color-bg-sunken);border-color:var(--color-border-default);color:var(--color-text-tertiary);cursor:not-allowed}
.icon-button{width:44px;height:44px;border:1px solid var(--color-border-default);border-radius:var(--radius-full);display:grid;place-items:center;background:var(--color-bg-surface);color:var(--color-text-primary);padding:0;flex:0 0 auto;transition:background-color .15s ease}
.icon-button:hover{background:var(--color-bg-sunken)}
.icon-button.quiet{box-shadow:none}
.icon-button .ui-icon{width:20px;height:20px}
.page-actions,.action-group{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}
.action-group>input,.action-group>select{flex:1 1 220px;min-width:0}
.action-group>small{flex:1 1 100%;color:var(--color-text-tertiary)}

input,select,textarea{width:100%;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);padding:10px 12px;background:var(--color-bg-surface);color:var(--color-text-primary);outline:0;min-height:var(--control-h);font-size:16px;line-height:24px;transition:border-color .15s ease,box-shadow .15s ease}
select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23857A67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
textarea{min-height:112px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--color-text-tertiary);opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--color-brand-primary);box-shadow:0 0 0 1px var(--color-brand-primary),var(--shadow-focus)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--color-brand-primary)}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:var(--shadow-focus)}
input[type=file]{padding:9px}
label{display:grid;gap:6px;font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-primary)}
label small,.field-hint{font-weight:400;color:var(--color-text-secondary);font-size:13px;line-height:18px}
.req,label.is-required>.label-text::after{color:var(--color-status-danger);font-weight:800}
label.is-required>.label-text::after{content:" *"}
.req{margin-left:2px}
[aria-invalid=true],.is-invalid{border-color:var(--color-status-danger)}
[aria-invalid=true]:focus,.is-invalid:focus{box-shadow:0 0 0 1px var(--color-status-danger),0 0 0 4px color-mix(in srgb,var(--color-status-danger) 25%,transparent)}
.field-error{display:flex;align-items:flex-start;gap:6px;margin:2px 0 0;color:var(--color-status-danger);font-size:13px;font-weight:600;line-height:18px}
.field-error::before{content:"";flex:0 0 16px;height:16px;margin-top:1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.search-field{display:flex;align-items:center;gap:10px;border:1px solid var(--color-border-strong);background:var(--color-bg-surface);border-radius:var(--radius-sm);padding:0 12px;min-width:0;min-height:var(--control-h)}
.search-field:focus-within{border-color:var(--color-brand-primary);box-shadow:0 0 0 1px var(--color-brand-primary),var(--shadow-focus)}
.search-field input{border:0;padding-left:0;padding-right:0;box-shadow:none;background:transparent;min-width:0;min-height:40px}
.search-field input:focus{box-shadow:none}
.search-field .ui-icon{color:var(--color-text-tertiary);width:18px;height:18px}
.search-field.pill{border-radius:var(--radius-full);padding:0 8px 0 16px}
.search-kbd{font-family:var(--font-code);font-size:12px;line-height:16px;font-weight:500;padding:2px 8px;border-radius:var(--radius-xs);background:var(--color-bg-sunken);color:var(--color-text-secondary)}
.light-field{background:var(--color-bg-surface);border-color:var(--color-border-strong)}
.check{display:flex;align-items:center;gap:8px;border:1px solid var(--color-border-default);padding:10px;border-radius:var(--radius-sm);font-weight:500}
.check input{width:18px;min-height:0}
.check-row{display:grid;grid-template-columns:auto 1fr;align-items:flex-start;gap:10px;font-weight:500}
.check-row input{width:18px;height:18px;min-height:0;margin-top:2px}
.password-field{position:relative}
.password-field input{padding-right:48px}
.password-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border:0;background:transparent;color:var(--color-text-tertiary);border-radius:var(--radius-sm);padding:0}
.password-toggle:hover{background:var(--color-bg-sunken);color:var(--color-text-primary)}
.password-toggle .ui-icon{width:19px;height:19px}
[data-password-strength]{color:var(--color-text-tertiary)}
[data-password-strength][data-state=valid]{color:var(--color-status-success)}

/* badges — Badge Status: always icon + text */
.status-pill,.badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--radius-xs);padding:0 10px 0 8px;min-height:26px;font-size:12px;font-weight:600;line-height:16px;background:var(--color-bg-sunken);color:var(--color-text-secondary);white-space:nowrap;border:1px solid var(--color-border-strong)}
.badge .ui-icon,.status-pill .ui-icon{width:14px;height:14px}
.badge.sm{min-height:22px;padding:0 8px 0 6px;font-size:11px;gap:4px}
.badge.sm .ui-icon{width:12px;height:12px}
.status-pill.active,.badge.active,.badge.verified,.badge.freshness-ok,.badge.success{background:var(--color-status-success-subtle);color:var(--color-status-success);border-color:var(--success-line)}
.status-pill.inactive,.badge.inactive,.badge.freshness-expired,.badge.danger{background:var(--color-status-danger-subtle);color:var(--color-status-danger);border-color:var(--danger-line)}
.status-pill.pending,.badge.pending,.badge.warning,.badge.freshness-soon{background:var(--color-status-warning-subtle);color:var(--color-status-warning);border-color:var(--warning-line)}
.badge.info{background:var(--color-status-info-subtle);color:var(--color-status-info);border-color:var(--info-line)}
.badge.neutral,.badge.freshness-unknown{background:var(--color-bg-sunken);color:var(--color-text-secondary);border-color:var(--color-border-strong)}
.success-text{color:var(--color-status-success)}
.danger-text{color:var(--color-status-danger)}
.inline-code,.qr-link{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-code);font-weight:500;font-size:12px;line-height:16px;background:var(--color-bg-sunken);border-radius:var(--radius-xs);padding:4px 8px;color:var(--color-text-primary)}

/* ========== 4. Feedback: flash/toast, form errors, empty state, pagination ========== */
.page-alerts{max-width:calc(var(--content) + 2*var(--gutter));margin:0 auto;padding:16px var(--gutter) 0;display:grid;gap:10px}
.page-alerts:not(:has(*)){display:none}
.admin-content>.page-alerts{padding:0;margin-bottom:16px;max-width:none}
.flash{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;border:1px solid var(--color-border-default);border-radius:var(--radius-md);padding:14px 12px 14px 18px;background:var(--color-bg-surface);color:var(--color-text-primary);font-weight:500;box-shadow:var(--shadow-card);overflow:hidden}
.flash::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--flash-tone,var(--color-status-info))}
.flash>.ui-icon{width:32px;height:32px;padding:7px;border-radius:var(--radius-full);background:var(--flash-bg,var(--color-status-info-subtle));color:var(--flash-tone,var(--color-status-info));margin-top:-4px}
.flash p{margin:0;line-height:22px;color:var(--color-text-secondary)}
.flash p strong,.flash-title{display:block;color:var(--color-text-primary);font-weight:700}
.flash-success{--flash-tone:var(--color-status-success);--flash-bg:var(--color-status-success-subtle)}
.flash-error{--flash-tone:var(--color-status-danger);--flash-bg:var(--color-status-danger-subtle)}
.flash-warning{--flash-tone:var(--color-status-warning);--flash-bg:var(--color-status-warning-subtle)}
.flash-info{--flash-tone:var(--color-status-info);--flash-bg:var(--color-status-info-subtle)}
.flash-close{width:32px;height:32px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);display:grid;place-items:center;padding:0;margin:-6px -4px -6px 0;font-size:22px;line-height:1}
.flash-close:hover{background:var(--color-bg-sunken);color:var(--color-text-primary)}
.form-errors{border:1px solid var(--danger-line);border-left:4px solid var(--color-status-danger);background:var(--color-status-danger-subtle);color:var(--color-status-danger);padding:12px 16px;border-radius:var(--radius-md);margin-bottom:14px}
.form-errors strong{display:block}
.form-errors ul{margin:6px 0 0;padding-left:18px;font-weight:500;color:var(--color-text-primary)}
.form-errors li+li{margin-top:2px}
.page-alerts .form-errors{margin-bottom:0}
.toast{padding:12px 14px;border-radius:var(--radius-md);margin-bottom:14px;font-weight:600;border:1px solid transparent}
.toast.success{background:var(--color-status-success-subtle);color:var(--color-status-success);border-color:var(--success-line)}
.toast.error{background:var(--color-status-danger-subtle);color:var(--color-status-danger);border-color:var(--danger-line)}
.toast.warning{background:var(--color-status-warning-subtle);color:var(--color-status-warning);border-color:var(--warning-line)}
/* Empty State: three stacked diamonds (kunyit dashed + laut + terakota) with a line icon */
.empty-state{padding:32px 24px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-lg);display:grid;gap:8px;justify-items:center;text-align:center;color:var(--color-text-secondary);background:var(--color-bg-surface-raised)}
.empty-state strong,.empty-state h2,.empty-state h3{color:var(--color-text-primary);font-family:var(--font-display);font-size:22px;line-height:28px;font-weight:700;margin:4px 0 0;max-width:36ch}
.empty-state>span,.empty-state>p{max-width:46ch;line-height:22px;margin:0}
.empty-state.wide{grid-column:1/-1}
.empty-state.compact{padding:16px;justify-items:start;text-align:left}
.empty-state.compact strong{font-size:16px;line-height:22px;font-family:var(--font-body)}
.empty-state .empty-icon{position:relative;width:88px;height:88px;display:grid;place-items:center;margin:0 0 8px;color:var(--color-kunyit-700)}
.empty-state .empty-icon::before,.empty-state .empty-icon::after{content:"";position:absolute;width:40px;height:40px;border-radius:8px;transform:rotate(45deg);z-index:0}
.empty-state .empty-icon::before{left:-8px;top:26px;background:var(--color-category-laut-bg)}
.empty-state .empty-icon::after{right:-8px;top:26px;background:var(--color-category-kriya-bg)}
.empty-state .empty-icon>.ui-icon{position:relative;z-index:1;width:28px;height:28px}
.empty-state .empty-icon>.diamond{position:absolute;inset:14px;border:1.5px dashed var(--color-accent-default);background:var(--color-accent-subtle);border-radius:10px;transform:rotate(45deg);z-index:1}
.empty-state .empty-icon:not(:has(.diamond))>.ui-icon{width:28px;height:28px}
.empty-state .empty-icon:not(:has(.diamond)){background:radial-gradient(closest-side,var(--color-accent-subtle) 0 98%,transparent)}
:root[data-theme=dark] .empty-state .empty-icon{color:var(--color-kunyit-300)}
.empty-state .button{margin-top:8px}
.empty-state.compact .button{justify-self:start}
.empty-inline{color:var(--color-text-tertiary)}
.pagination{margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.pagination-summary{margin:0;color:var(--color-text-tertiary);font-size:13px}
.pagination-summary strong{color:var(--color-text-primary);font-weight:700;font-family:var(--font-code)}
.pagination-list{display:flex;align-items:center;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.pagination-link{min-width:44px;height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-bg-surface);color:var(--color-text-primary);font-weight:600;font-size:14px;line-height:1;font-family:var(--font-code)}
.pagination-link>span:not(.sr-only){font-family:var(--font-body)}
a.pagination-link:hover{border-color:var(--color-border-strong);background:var(--color-bg-sunken)}
.pagination-link[aria-current=page]{background:var(--color-tarum-900);border-color:var(--color-tarum-900);color:var(--color-beras-50)}
:root[data-theme=dark] .pagination-link[aria-current=page]{background:var(--color-beras-50);border-color:var(--color-beras-50);color:var(--color-tarum-900)}
.pagination-link.is-disabled{color:var(--color-text-tertiary);background:var(--color-bg-sunken);cursor:not-allowed}
.pagination-link .ui-icon{width:16px;height:16px}
.pagination-ellipsis{min-width:24px;text-align:center;color:var(--color-text-tertiary)}

/* ========== 5. Brand & signature elements ========== */
/* Pita Ragam — six sector colours */
.pita-ragam{display:block;height:4px;width:100%;flex:0 0 auto;background:linear-gradient(90deg,var(--color-category-pangan-solid) 0 16.666%,var(--color-category-agro-solid) 16.666% 33.333%,var(--color-category-kriya-solid) 33.333% 50%,var(--color-category-laut-solid) 50% 66.666%,var(--color-category-fesyen-solid) 66.666% 83.333%,var(--color-category-umum-solid) 83.333% 100%)}
.pita-ragam.is-6{height:6px}
.pita-ragam.is-vertical{width:4px;height:auto;align-self:stretch;background:linear-gradient(180deg,var(--color-category-pangan-solid) 0 16.666%,var(--color-category-agro-solid) 16.666% 33.333%,var(--color-category-kriya-solid) 33.333% 50%,var(--color-category-laut-solid) 50% 66.666%,var(--color-category-fesyen-solid) 66.666% 83.333%,var(--color-category-umum-solid) 83.333% 100%)}
/* sector tones: every sector-coloured element reads --tone-* */
.tone-pangan{--tone-bg:var(--color-category-pangan-bg);--tone-fg:var(--color-category-pangan-fg);--tone-solid:var(--color-category-pangan-solid)}
.tone-agro{--tone-bg:var(--color-category-agro-bg);--tone-fg:var(--color-category-agro-fg);--tone-solid:var(--color-category-agro-solid)}
.tone-kriya{--tone-bg:var(--color-category-kriya-bg);--tone-fg:var(--color-category-kriya-fg);--tone-solid:var(--color-category-kriya-solid)}
.tone-laut{--tone-bg:var(--color-category-laut-bg);--tone-fg:var(--color-category-laut-fg);--tone-solid:var(--color-category-laut-solid)}
.tone-fesyen{--tone-bg:var(--color-category-fesyen-bg);--tone-fg:var(--color-category-fesyen-fg);--tone-solid:var(--color-category-fesyen-solid)}
.tone-umum{--tone-bg:var(--color-category-umum-bg);--tone-fg:var(--color-category-umum-fg);--tone-solid:var(--color-category-umum-solid)}
.tone-netral{--tone-bg:var(--color-bg-surface);--tone-fg:var(--color-text-primary);--tone-solid:var(--color-text-secondary)}
/* tenun motif texture (≤8% opacity, dark panels only) */
.panel-motif,.hero-panel-motif{position:absolute;inset:0;background-image:var(--motif-paper);background-size:48px 48px;opacity:.07;pointer-events:none}

/* Logo */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--color-text-primary);min-width:0;flex:0 0 auto;border-radius:var(--radius-sm)}
.brand-mark{width:36px;height:36px;object-fit:contain;flex:0 0 auto;border-radius:var(--radius-xs)}
.brand-word{display:inline-flex;align-items:center;gap:5px;min-width:0}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:26px;letter-spacing:-.03em;font-variation-settings:"opsz" 14;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-tag{font-family:var(--font-code);font-weight:700;font-size:13px;line-height:18px;letter-spacing:.04em;padding:1px 5px;border-radius:var(--radius-xs);background:var(--color-kunyit-400);color:var(--color-tarum-900)}
.brand.is-inverse{color:var(--color-beras-50)}
.brand.is-sm .brand-mark{width:28px;height:28px}
.brand.is-sm .brand-name{font-size:18px;line-height:22px}
.brand.is-sm .brand-tag{font-size:11px;line-height:15px}

/* Partner logos — uploaded images, optical height 36 (desktop) / 24 (mobile strip) */
.partners{display:flex;flex-direction:column;gap:3px;min-width:0}
.partners-label{font-size:10px;line-height:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary);white-space:nowrap}
.partners-list{display:flex;align-items:center;gap:16px;list-style:none;margin:0;padding:0;min-width:0}
.partner-logo{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:content-box;height:36px;border-radius:var(--radius-xs)}
.partner-logo img{display:block;max-height:36px;max-width:120px;width:auto;height:auto;object-fit:contain}
a.partner-logo:hover{opacity:.85}
.partners-strip{flex-direction:row;align-items:center;justify-content:center;gap:12px;padding:6px var(--gutter);background:var(--color-bg-surface-raised);border-top:1px solid var(--color-border-default)}
.partners-strip .partners-label{font-size:10px;padding-right:12px;border-right:1px solid var(--color-border-strong);line-height:20px}
.partners-strip .partner-logo{height:28px}
.partners-strip .partner-logo img{max-height:24px;max-width:96px}
.partners-footer{margin-top:20px;gap:8px}
@media (min-width:1280px){.partner-strip{display:none}}
.partners-footer .partners-list{flex-wrap:wrap;gap:12px 20px}

/* Chip Kategori */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:var(--radius-full);border:1px solid color-mix(in srgb,var(--tone-solid) 55%,transparent);background:var(--tone-bg);color:var(--tone-fg);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;max-width:100%;flex:0 0 auto}
.chip>span:last-child{overflow:hidden;text-overflow:ellipsis}
.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--tone-solid);flex:0 0 auto}
.chip-check{width:14px;height:14px}
.chip.is-md{height:36px;padding:0 14px 0 12px;font-size:14px;line-height:20px;gap:8px}
.chip.is-md .chip-dot{width:8px;height:8px}
.chip.is-md .chip-check{width:16px;height:16px}
.chip.tone-netral{border-color:var(--color-border-strong)}
.chip.is-selected{background:var(--tone-fg);border-color:var(--tone-fg);color:var(--color-beras-0)}
.chip.tone-netral.is-selected{background:var(--color-tarum-900);border-color:var(--color-tarum-900);color:var(--color-beras-50)}
:root[data-theme=dark] .chip.is-selected{color:var(--color-beras-900)}
:root[data-theme=dark] .chip.tone-netral.is-selected{background:var(--color-beras-50);border-color:var(--color-beras-50);color:var(--color-tarum-900)}
a.chip{min-height:24px}
a.chip:hover{border-color:var(--tone-solid)}
a.chip.is-md{position:relative}
a.chip.is-md::after{content:"";position:absolute;inset:-4px 0}
.chip-scroller{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px var(--gutter);margin:0 calc(-1*var(--gutter));scroll-padding-inline:var(--gutter)}
.chip-scroller::-webkit-scrollbar{display:none}

/* Foto Produk — photo or sector placeholder */
.photo{position:relative;display:block;overflow:hidden;background:var(--tone-bg,var(--color-bg-sunken));aspect-ratio:4/3;isolation:isolate}
.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.photo-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--tone-fg)}
.photo-ph::before{content:"";position:absolute;width:81%;aspect-ratio:1;border-radius:50%;right:-34%;top:-17%;background:var(--tone-solid);opacity:.2}
.photo-diamond{position:absolute;width:26.5%;aspect-ratio:1;border:1.5px dashed var(--tone-solid);opacity:.7;transform:rotate(45deg)}
.photo-icon{position:relative;width:15%;height:auto;aspect-ratio:1;min-width:24px;max-width:72px;stroke-width:1.6}
.photo.has-photo .photo-ph{display:none}
:root[data-theme=dark] .photo-ph::before{opacity:.28}
.qr-badge{position:absolute;left:11px;top:11px;z-index:2;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px 0 6px;border-radius:var(--radius-xs);border:1px solid var(--color-status-success);background:var(--color-bg-surface);color:var(--color-status-success);font-size:11px;line-height:14px;font-weight:600;white-space:nowrap}
.qr-badge .ui-icon{width:12px;height:12px}

/* Cap Terverifikasi — rubber stamp */
.stamp{--stamp:96px;position:relative;display:inline-grid;place-items:center;width:var(--stamp);height:var(--stamp);border-radius:50%;background:var(--color-status-success-subtle);border:2.5px solid var(--color-status-success);color:var(--color-status-success);transform:rotate(-8deg);flex:0 0 auto}
.stamp::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px dashed var(--color-status-success);opacity:.9}
.stamp-inner{position:relative;display:grid;justify-items:center;gap:2px;text-align:center}
.stamp-icon{width:calc(var(--stamp)*.25);height:calc(var(--stamp)*.25)}
.stamp-label{font-size:calc(var(--stamp)*.088);line-height:1.3;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.stamp-sub{font-family:var(--font-code);font-weight:500;font-size:calc(var(--stamp)*.094);line-height:1.2}
.stamp.is-sm{--stamp:72px}
.stamp.is-lg{--stamp:116px}

/* Avatar Usaha */
.seller-logo{position:relative;width:48px;height:48px;border-radius:var(--radius-md);background:var(--tone-bg,var(--color-bg-sunken));border:1.5px solid var(--tone-solid,var(--color-border-strong));color:var(--tone-fg,var(--color-text-primary));display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.seller-logo::after{content:"";position:absolute;left:-1.5px;right:-1.5px;bottom:-1.5px;height:4px;background:var(--tone-solid)}
.seller-logo.has-logo{background:var(--color-bg-surface)}
.seller-logo img{width:100%;height:100%;object-fit:contain;padding:4px;background:var(--color-bg-surface)}
.seller-initials{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em;font-variation-settings:"opsz" 14;line-height:1}
.seller-logo.sm{width:36px;height:36px;border-radius:10px}
.seller-logo.sm .seller-initials{font-size:13px}
.seller-logo.large{width:56px;height:56px}
.seller-logo.large .seller-initials{font-size:20px}
.seller-logo.xlarge{width:96px;height:96px;border-radius:var(--radius-lg);border-width:2px;box-shadow:var(--shadow-card)}
.seller-logo.xlarge .seller-initials{font-size:36px}
.seller-logo.xlarge::after{height:6px}

/* Info Row */
.info-list{margin:0;display:grid}
.info-row{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:14px 0;border-bottom:1px solid var(--color-border-default)}
.info-row:last-child{border-bottom:0}
.info-row-icon{grid-row:1/3;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-bg-sunken);color:var(--color-text-secondary);display:grid;place-items:center}
.info-row-icon .ui-icon{width:18px;height:18px}
.info-row dt{font-size:12px;line-height:16px;font-weight:600;color:var(--color-text-tertiary)}
.info-row dd{margin:0;font-size:15px;line-height:22px;color:var(--color-text-primary);white-space:pre-line}

/* ========== 6. Public shell ========== */
.public-shell{background:var(--color-bg-canvas);color:var(--color-text-primary);min-height:100vh;display:flex;flex-direction:column}
.site-header{position:sticky;top:0;z-index:80;background:var(--header-bg);border-bottom:1px solid var(--color-border-default);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)}
.site-header-bar{height:72px;display:flex;align-items:center;gap:28px;padding:0 var(--edge)}
.lockup{display:flex;align-items:center;gap:16px;min-width:0;flex:0 0 auto}
.lockup-divider{width:1px;height:40px;background:var(--color-border-strong);flex:0 0 auto}
.site-nav{flex:0 0 auto}
.site-nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.site-nav a{position:relative;display:flex;align-items:center;min-height:44px;font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-secondary);white-space:nowrap}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:3px;border-radius:2px;background:var(--color-accent-default);transform:scaleX(0);transition:transform .15s ease}
.site-nav a:hover{color:var(--color-text-primary)}
.site-nav a:hover::after{transform:scaleX(.5)}
.site-nav a[aria-current=page]{font-weight:700;color:var(--color-text-primary)}
.site-nav a[aria-current=page]::after{transform:none}
.site-search{margin-left:auto;flex:1 1 200px;min-width:150px;max-width:240px}
.site-search .search-field{min-height:44px}
.site-search input{font-size:14px}
.site-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.site-search-toggle{display:none}
.site-header-bar.is-compact-search .site-search{display:none}
.site-header-bar.is-compact-search .site-search-toggle{display:grid}
.site-header-bar.is-compact-search .site-actions{margin-left:auto}
.site-nav li[hidden]{display:none}
.nav-more{position:relative}
.nav-more summary{display:flex;align-items:center;gap:4px;min-height:44px;font-size:14px;font-weight:600;color:var(--color-text-secondary);cursor:pointer;list-style:none;white-space:nowrap}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more summary .ui-icon{width:16px;height:16px;transition:transform .15s ease}
.nav-more details[open] summary .ui-icon{transform:rotate(180deg)}
.nav-more-menu{position:absolute;top:calc(100% + 6px);left:-12px;min-width:200px;display:grid!important;gap:2px!important;padding:8px;margin:0;list-style:none;background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-raised);z-index:90}
.nav-more-menu a{padding:0 10px;border-radius:var(--radius-sm)}
.nav-more-menu a::after{display:none}
.nav-more-menu a:hover{background:var(--color-bg-sunken)}
.site-account{padding:0 12px}
.site-account[aria-current=page]{background:var(--color-bg-sunken)}
.public-main{flex:1 0 auto;display:block;min-height:60vh}
.bottom-nav{display:none}

/* footer */
.site-footer{margin-top:80px;background:var(--color-bg-sunken);color:var(--color-text-secondary)}
.site-footer-inner{display:grid;grid-template-columns:minmax(260px,360px) repeat(3,minmax(0,1fr));gap:32px 64px;padding:48px var(--edge) 32px}
.footer-brand{display:grid;gap:12px;align-content:start}
.footer-brand>p{margin:0;font-size:14px;line-height:20px;max-width:360px}
.footer-col h2{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:700;color:var(--color-text-primary);margin:0 0 10px;letter-spacing:0}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.footer-col a{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:14px;color:var(--color-text-secondary)}
.footer-col a:hover{color:var(--color-text-link);text-decoration:underline;text-underline-offset:3px}
.footer-col .ui-icon{width:16px;height:16px;color:var(--color-text-tertiary)}
.footer-contact address{display:flex;gap:8px;font-style:normal;font-size:14px;line-height:20px;margin-top:8px}
.footer-contact address .ui-icon{width:16px;height:16px;margin-top:2px;color:var(--color-text-tertiary)}
.site-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px var(--edge);border-top:1px solid var(--color-border-default);font-size:12px;line-height:16px;color:var(--color-text-tertiary)}
.footer-theme{display:inline-flex;align-items:center;gap:6px;min-height:36px;border:0;background:transparent;color:var(--color-text-secondary);font-size:12px;font-weight:600;padding:0 8px;border-radius:var(--radius-sm)}
.footer-theme:hover{background:var(--color-bg-canvas)}
.footer-theme .ui-icon{width:16px;height:16px}

/* ========== 7. Public components ========== */
/* section scaffolding */
.section{padding-top:var(--section-y)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.section-head h2{font-size:32px;line-height:38px;letter-spacing:-.01em;margin:8px 0 0;font-weight:700}
.section-sub{margin:8px 0 0;color:var(--color-text-secondary);font-size:16px;line-height:24px;max-width:640px}
.section-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--color-text-link);white-space:nowrap}
.section-link .ui-icon{width:18px;height:18px}
.section-link:hover{text-decoration:underline;text-underline-offset:3px}
.section-body{white-space:pre-line}

/* Product Card */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.product-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card);overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised);border-color:var(--color-border-strong)}
.product-card:focus-within{box-shadow:var(--shadow-raised),var(--shadow-focus)}
.product-card-media{width:100%}
.product-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;min-width:0;flex:1}
.product-card-title{margin:0;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0;color:var(--color-text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card-title a::after{content:"";position:absolute;inset:0;z-index:3}
.product-card-title a:focus-visible{box-shadow:none}
.product-card-meta{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;line-height:20px;color:var(--color-text-secondary);width:100%;min-width:0}
.product-card-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-card-meta .ui-icon{width:14px;height:14px;color:var(--color-text-tertiary)}
.product-card-excerpt{margin:0;font-size:14px;line-height:20px;color:var(--color-text-tertiary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding-top:8px;margin-top:auto}
.product-card-price{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin:0;min-width:0}
.product-card-price strong{font-family:var(--font-code);font-weight:700;font-size:20px;line-height:24px;letter-spacing:-.01em;color:var(--color-text-primary)}
.product-card-price strong.is-empty{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-secondary)}
.product-card-price span{font-size:14px;line-height:20px;color:var(--color-text-tertiary)}
.qr-check{display:none;width:28px;height:28px;border-radius:50%;background:var(--color-status-success-subtle);color:var(--color-status-success);place-items:center;flex:0 0 auto}
.qr-check .ui-icon{width:18px;height:18px}

/* Seller Card */
.seller-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.seller-card{position:relative;display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card);min-width:0}
.seller-card:hover{border-color:var(--color-border-strong)}
.seller-card-id{display:flex;align-items:center;gap:12px;min-width:0}
.seller-card-info{display:grid;gap:2px;min-width:0;flex:1}
.seller-card-name{display:flex;align-items:center;gap:6px;margin:0;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0;min-width:0}
.seller-card-name a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.seller-card-name a::after{content:"";position:absolute;inset:0;z-index:1}
.seller-card-name a:focus-visible{box-shadow:none}
.seller-card:focus-within{box-shadow:var(--shadow-card),var(--shadow-focus)}
.seller-verified{width:16px;height:16px;color:var(--color-status-success)}
.seller-card-loc{display:flex;align-items:center;gap:4px;margin:0;font-size:14px;line-height:20px;color:var(--color-text-secondary);min-width:0}
.seller-card-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seller-card-loc .ui-icon{width:14px;height:14px;color:var(--color-text-tertiary)}
.seller-card-stats{display:flex;gap:16px;margin:0;padding:8px 12px;border-radius:var(--radius-sm);background:var(--color-bg-sunken)}
.seller-card-stats>div{display:flex;flex-direction:column-reverse;min-width:0;flex:1}
.seller-card-stats dt{font-size:12px;line-height:16px;font-weight:600;color:var(--color-text-tertiary)}
.seller-card-stats dd{margin:0;font-family:var(--font-code);font-weight:700;font-size:16px;line-height:20px;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seller-card-stats dd.is-text{font-family:var(--font-body);font-size:14px}
.seller-card-desc{margin:0;font-size:14px;line-height:20px;color:var(--color-text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seller-card-actions{position:relative;z-index:2;margin-top:auto}
.seller-card-chevron{width:20px;height:20px;color:var(--color-text-tertiary)}
.seller-card.is-row{padding:16px}

/* Batch Card */
.batch-card{--tone:var(--color-status-success);position:relative;display:flex;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);color:var(--color-text-primary);box-shadow:var(--shadow-card);overflow:hidden;min-width:0}
.batch-card::before{content:"";flex:0 0 5px;background:var(--tone)}
.batch-card.tone-warning{--tone:var(--color-status-warning)}
.batch-card.tone-danger{--tone:var(--color-status-danger)}
.batch-card.tone-neutral{--tone:var(--color-text-secondary)}
.batch-card.tone-info{--tone:var(--color-status-info)}
.batch-card-body{flex:1;display:grid;gap:12px;padding:16px;min-width:0}
.batch-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.batch-card-title{display:grid;gap:2px;min-width:0}
.batch-label{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary)}
.batch-code{margin:0;font-family:var(--font-code);font-weight:700;font-size:16px;line-height:22px;letter-spacing:0;word-break:break-all}
.batch-product{margin:-4px 0 0;font-size:14px;line-height:20px;color:var(--color-text-secondary)}
.batch-product a{font-weight:600;color:var(--color-text-link)}
.batch-product a:hover{text-decoration:underline}
.batch-dates{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0}
.batch-dates>div{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:8px;align-items:center}
.batch-dates .ui-icon{grid-row:1/3;width:18px;height:18px;color:var(--color-text-secondary)}
.batch-dates dt{font-size:12px;line-height:16px;font-weight:600;color:var(--color-text-tertiary)}
.batch-dates dd{margin:0;font-size:14px;line-height:20px;font-weight:600}
.batch-meter{display:grid;gap:6px}
.batch-meter-label{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:16px;font-weight:600;color:var(--color-text-secondary)}
.batch-meter-value{color:var(--tone)}
.meter{height:6px;border-radius:var(--radius-full);background:var(--color-bg-sunken);overflow:hidden}
.meter>span{display:block;height:100%;width:var(--meter,0%);border-radius:3px;background:var(--tone)}
.batch-qty{margin:0;font-size:13px;line-height:18px;color:var(--color-text-tertiary)}
.batch-qty strong{font-family:var(--font-code);color:var(--color-text-secondary);font-weight:500}
.batch-note{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:var(--radius-sm);font-size:13px;line-height:18px;font-weight:600}
.batch-note .ui-icon{width:16px;height:16px;margin-top:1px}
.batch-note.tone-warning{background:var(--color-status-warning-subtle);color:var(--color-status-warning)}
.batch-note.tone-danger{background:var(--color-status-danger-subtle);color:var(--color-status-danger)}
.batch-qc{border-top:1px dashed var(--color-border-default);padding-top:10px}
.batch-qc summary{cursor:pointer;font-weight:600;color:var(--color-text-link);font-size:13px;display:inline-flex;align-items:center;gap:6px;list-style:none;min-height:32px}
.batch-qc summary::-webkit-details-marker{display:none}
.batch-qc summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.batch-qc[open] summary::before{transform:rotate(45deg)}
.batch-qc p{margin:8px 0 0;color:var(--color-text-secondary);white-space:pre-line;line-height:1.6}
.batch-card-foot{display:flex;justify-content:flex-end}
.batch-card-foot .link{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.batch-card-foot .ui-icon{width:16px;height:16px}
.batch-list,.trace-result-list{display:grid;gap:12px}
.batch-more-list{margin-top:12px}
@media (min-width:1280px){
  .partners-footer li.is-dup{display:none}
  .partners-footer:not(:has(li:not(.is-dup))){display:none}
}

/* ========== 8. Public pages ========== */
/* page header */
.pub-head{padding-top:32px;padding-bottom:8px}
.pub-head h1{font-size:40px;line-height:44px;font-weight:800;letter-spacing:-.015em;margin:8px 0 8px;font-variation-settings:"opsz" 14}
.pub-head>p{margin:0;max-width:720px;font-size:16px;line-height:24px;color:var(--color-text-secondary)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0;font-size:12px;line-height:16px;color:var(--color-text-tertiary)}
.breadcrumb li{display:inline-flex;align-items:center;gap:4px;min-width:0}
.breadcrumb li+li::before{content:"/";color:var(--color-border-strong)}
.breadcrumb a{color:var(--color-text-secondary);display:inline-flex;min-height:24px;align-items:center}
.breadcrumb a:hover{color:var(--color-text-link);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--color-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40ch}
.trace-search{display:flex;gap:8px;margin-top:20px;max-width:720px;flex-wrap:wrap}
.trace-search .search-field{flex:1 1 280px}
.result-line{margin:0 0 16px;color:var(--color-text-secondary)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,620px) minmax(0,676px);justify-content:space-between;gap:48px;align-items:center;padding:56px 0 24px var(--edge);min-height:600px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.hero-pill{display:inline-flex;align-items:center;gap:8px;margin:0;padding:4px 12px 4px 6px;border-radius:var(--radius-full);border:1px solid var(--color-border-default);background:var(--color-bg-surface);font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-secondary);max-width:100%}
.hero-dots{display:inline-flex;flex:0 0 auto}
.hero-dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--color-bg-surface);margin-left:-6px}
.hero-dots i:first-child{margin-left:0}
.hero-dots i:nth-child(1){background:var(--color-category-pangan-solid)}.hero-dots i:nth-child(2){background:var(--color-category-agro-solid)}.hero-dots i:nth-child(3){background:var(--color-category-kriya-solid)}.hero-dots i:nth-child(4){background:var(--color-category-laut-solid)}.hero-dots i:nth-child(5){background:var(--color-category-fesyen-solid)}.hero-dots i:nth-child(6){background:var(--color-category-umum-solid)}
.hero-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(48px,5.3vw,76px);line-height:1;letter-spacing:-.03em;font-variation-settings:"opsz" 14;color:var(--color-text-primary);text-wrap:balance}
.hero-title span{color:var(--color-brand-primary)}
.hero-title.is-long{font-size:clamp(44px,4.3vw,62px);line-height:1.03}
.hero-panel.no-batch .hero-card{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg)}
.hero-panel.no-batch .hero-card:hover{transform:translate(-50%,-52%) rotate(-2deg)}
.hero-lead{margin:0;max-width:540px;font-size:18px;line-height:28px;color:var(--color-text-secondary)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-search{display:none;width:100%}
.hero-trust{display:flex;align-items:center;gap:12px;padding-top:8px;border-radius:var(--radius-md);min-height:56px}
.avatar-stack{display:flex}
.avatar-stack .seller-logo{margin-right:-12px;box-shadow:0 0 0 2px var(--color-bg-canvas)}
.avatar-stack .seller-logo:last-child{margin-right:0}
.hero-trust-copy{display:grid;font-size:14px;line-height:20px;margin-left:4px}
.hero-trust-copy strong{font-weight:600;color:var(--color-text-primary)}
.hero-trust-copy span{color:var(--color-text-tertiary)}
.hero-trust-arrow{width:18px;height:18px;color:var(--color-text-link);transition:transform .15s ease}
.hero-trust:hover .hero-trust-arrow{transform:translateX(3px)}
.hero-trust:hover strong{color:var(--color-text-link)}
/* hero panel (tarum) */
.hero-panel{position:relative;height:560px;background:var(--color-nav-bg);border-radius:40px 0 0 40px;overflow:hidden;isolation:isolate}
.hero-panel-label{position:absolute;right:13px;top:36px;display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 12px;border-radius:var(--radius-full);background:var(--color-nav-item-active);color:var(--color-nav-fg);font-size:12px;line-height:16px;font-weight:600;z-index:2}
.hero-panel-label .ui-icon{width:16px;height:16px;color:var(--color-kunyit-300)}
.hero-panel-kicker{display:none}
.hero-card{position:absolute;left:64px;top:70px;width:280px;display:flex;flex-direction:column;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-raised);overflow:hidden;transform:rotate(-4deg);z-index:1;color:var(--color-text-primary);transition:transform .2s ease}
.hero-card:hover{transform:rotate(-2deg) translateY(-4px)}
.hero-card-photo{width:100%}
.hero-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;min-width:0}
.hero-card-name{font-size:18px;line-height:26px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-card-seller{display:flex;align-items:center;gap:6px;font-size:14px;line-height:20px;color:var(--color-text-secondary);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hero-card-seller .ui-icon{width:14px;height:14px;flex:0 0 auto}
.hero-card-price{display:flex;align-items:baseline;gap:4px;padding-top:8px}
.hero-card-price b{font-family:var(--font-code);font-size:20px;line-height:24px;font-weight:700;letter-spacing:-.01em}
.hero-card-price span{font-size:14px;color:var(--color-text-tertiary)}
.hero-batch{position:absolute;left:270px;top:326px;width:358px;transform:rotate(3deg);box-shadow:var(--shadow-raised);z-index:2}
.hero-batch .batch-qty,.hero-batch .batch-note,.hero-batch .batch-qc{display:none}
.hero-stamp{position:absolute;left:470px;top:150px;z-index:3;--stamp:116px;background:var(--color-bg-surface)}
.hero-panel-pita{position:absolute;left:0;right:0;bottom:0;z-index:3}

/* promo strip (hero banners) */
.promo-strip{padding-top:24px}
.promo-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:16px;overflow-x:auto;list-style:none;margin:0;padding:0 0 4px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.promo-list>li{scroll-snap-align:start;display:flex}
.promo-card{flex:1;display:flex;align-items:center;gap:16px;padding:12px 16px 12px 12px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card);min-height:88px}
a.promo-card:hover{border-color:var(--color-border-strong)}
.promo-card img{width:64px;height:64px;border-radius:var(--radius-md);object-fit:cover;flex:0 0 auto;background:var(--color-bg-sunken)}
.promo-copy{display:grid;gap:2px;min-width:0;flex:1}
.promo-copy strong{font-size:15px;line-height:22px}
.promo-copy small{font-size:13px;color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promo-cta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--color-text-link);white-space:nowrap}
.promo-cta .ui-icon{width:16px;height:16px}

/* sector tiles */
.sector-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.sector-tile{position:relative;display:flex;flex-direction:column;height:100%;min-height:116px;padding:20px;border-radius:var(--radius-lg);background:var(--tone-bg);color:var(--tone-fg);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.sector-tile::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tone-solid)}
.sector-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.sector-tile-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.sector-icon{width:32px;height:32px;stroke-width:1.8}
.sector-arrow{width:18px;height:18px;transition:transform .15s ease}
.sector-tile:hover .sector-arrow{transform:translate(2px,-2px)}
.sector-tile strong{font-size:18px;line-height:26px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sector-tile small{font-size:12px;line-height:16px;font-weight:500;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.section .chip-scroller{display:none}

/* how it works */
.how{display:grid;grid-template-columns:minmax(0,380px) minmax(0,836px);justify-content:space-between;gap:48px;align-items:start;padding-top:80px}
.how-intro h2{font-size:40px;line-height:44px;font-weight:800;letter-spacing:-.015em;margin:16px 0 16px;font-variation-settings:"opsz" 14}
.how-intro p{margin:0 0 12px;font-size:16px;line-height:24px;color:var(--color-text-secondary)}
.how-link{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.how-link .ui-icon{width:18px;height:18px}
.how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.how-steps>li{position:relative;display:grid;grid-template-columns:48px 1fr;grid-template-areas:"icon num" "title title" "text text";row-gap:16px;padding:24px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card)}
.how-icon{grid-area:icon;width:48px;height:48px;border-radius:var(--radius-md);background:var(--tone-bg);color:var(--tone-fg);display:grid;place-items:center}
.how-icon .ui-icon{width:24px;height:24px}
.how-num{grid-area:num;justify-self:end;align-self:center;font-family:var(--font-code);font-weight:700;font-size:28px;line-height:32px;letter-spacing:-.01em;color:var(--color-text-tertiary)}
.how-steps strong{grid-area:title;font-size:18px;line-height:26px}
.how-steps p{grid-area:text;margin:-8px 0 0;font-size:14px;line-height:20px;color:var(--color-text-secondary)}
.trace-help{margin-top:48px}

/* mission panel */
.mission-panel{position:relative;display:grid;grid-template-columns:minmax(0,728px) minmax(0,360px);justify-content:space-between;gap:48px;align-items:center;padding:70px 64px 64px;border-radius:var(--radius-xl);background:var(--color-nav-bg);color:var(--color-nav-fg);overflow:hidden;isolation:isolate}
.mission-pita{position:absolute;left:0;right:0;top:0}
.mission-copy h2{margin:16px 0;font-size:40px;line-height:44px;font-weight:800;letter-spacing:-.015em;color:var(--color-beras-50);font-variation-settings:"opsz" 14}
.mission-copy p{margin:0;font-size:18px;line-height:28px;color:var(--color-nav-fg-muted)}
.mission-values{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.mission-values li{position:relative;display:grid;gap:2px;padding-left:22px}
.mission-values li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:6px;border-radius:3px;background:var(--tone-solid)}
.mission-values strong{font-family:var(--font-display);font-size:24px;line-height:30px;font-weight:700;color:var(--color-beras-50)}
.mission-values span{font-size:14px;line-height:20px;color:var(--color-nav-fg-muted)}
:root[data-theme=dark] .mission-panel,:root[data-theme=dark] .hero-panel{background:var(--color-tarum-900);box-shadow:inset 0 0 0 1px var(--color-tarum-800)}

/* configurable sections */
.cta-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding:40px;border-radius:var(--radius-xl);background:var(--color-accent-subtle);border:1px solid color-mix(in srgb,var(--color-accent-default) 45%,transparent)}
.cta-band.has-media{grid-template-columns:160px minmax(0,1fr) auto}
.cta-band-media{width:160px;height:120px;border-radius:var(--radius-lg);object-fit:cover;background:var(--color-bg-sunken)}
.cta-band h2{font-size:28px;line-height:34px;margin:8px 0}
.cta-band p{margin:0;color:var(--color-text-secondary);max-width:680px;line-height:24px}
.cta-band .section-body{margin-top:8px}
.community-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:40px;border-radius:var(--radius-xl);background:var(--color-bg-surface);border:1px solid var(--color-border-default)}
.community-card.no-media{grid-template-columns:minmax(0,1fr)}
.community-media{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);background:var(--color-bg-sunken)}
.community-card h2{font-size:32px;line-height:38px;margin:8px 0 12px}
.community-card p{color:var(--color-text-secondary);line-height:24px;margin:0 0 12px;max-width:640px}
.announcement-wrap{padding-top:24px}
.announcement{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:var(--radius-lg);background:var(--color-status-warning-subtle);border:1px solid var(--warning-line);color:var(--color-text-primary)}
.announcement-icon{width:40px;height:40px;border-radius:50%;background:var(--color-bg-surface);color:var(--color-status-warning);display:grid;place-items:center;flex:0 0 auto}
.announcement-copy{display:grid;gap:2px;min-width:0;flex:1}
.announcement-copy span{color:var(--color-text-secondary);font-size:14px}
.announcement .link{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.announcement .link .ui-icon{width:16px;height:16px}

/* catalog */
.catalog{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;padding-top:24px;align-items:start}
.catalog-filter{position:sticky;top:96px;display:grid;gap:24px}
.catalog-search{display:grid;gap:8px}
.catalog-search .search-field input{font-size:14px}
.filter-label{margin:0 0 8px;font-size:14px;line-height:20px;font-weight:600}
.filter-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.filter-option{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px 0 8px;border-radius:var(--radius-sm);font-size:14px;color:var(--color-text-secondary)}
.filter-option:hover{background:var(--color-bg-sunken);color:var(--color-text-primary)}
.filter-box{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--color-border-strong);background:var(--color-bg-surface);display:grid;place-items:center;flex:0 0 auto}
.filter-box .ui-icon{width:12px;height:12px;stroke-width:3;opacity:0}
.filter-option.is-active{background:var(--tone-bg);color:var(--tone-fg);font-weight:600}
.filter-option.tone-netral.is-active{background:var(--color-bg-sunken);color:var(--color-text-primary)}
.filter-option.is-active .filter-box{background:var(--tone-fg);border-color:var(--tone-fg);color:var(--color-beras-0)}
.filter-option.tone-netral.is-active .filter-box{background:var(--color-tarum-900);border-color:var(--color-tarum-900)}
:root[data-theme=dark] .filter-option.is-active .filter-box{color:var(--color-beras-900)}
:root[data-theme=dark] .filter-option.tone-netral.is-active .filter-box{background:var(--color-beras-50);border-color:var(--color-beras-50)}
.filter-option.is-active .filter-box .ui-icon{opacity:1}
.filter-reset{justify-self:start}
.catalog-main{min-width:0}
.catalog-chips{display:none}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.catalog-count{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.catalog-count h2{margin:0;font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:500;color:var(--color-text-secondary);letter-spacing:0}
.catalog-count h2 strong{font-family:var(--font-code);font-weight:700;color:var(--color-text-primary)}
.active-filters{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.active-filters .chip{height:28px}
.chip-x{width:12px;height:12px;margin-left:2px}
.catalog-sort{display:flex;align-items:center;gap:8px}
.catalog-sort label{font-size:13px;font-weight:500;color:var(--color-text-tertiary);white-space:nowrap}
.catalog-sort select{width:auto;min-width:190px;font-size:14px;min-height:40px;padding-top:8px;padding-bottom:8px}
.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ========== 9. Passport, scan, status ========== */
.passport{padding-top:24px}
.passport-layout{display:grid;grid-template-columns:minmax(0,752px) minmax(0,480px);justify-content:space-between;column-gap:48px;margin-top:16px;align-items:start}
.passport-col{display:grid;gap:28px;min-width:0}
.passport-col-main{grid-column:1;grid-row:1}
.passport-col-side{grid-column:2;grid-row:1}
.passport-summary{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.passport-batches,.passport-seller,.passport-info,.passport-history{min-width:0}
.passport-photo-card{position:relative;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card);overflow:hidden}
.passport-photo{aspect-ratio:4/3}
.passport-photo .photo-icon{max-width:88px}
.passport-stamp{position:absolute;right:24px;top:28px;z-index:3;--stamp:112px;background:var(--color-bg-surface)}
.passport-summary h1{margin:0;font-size:40px;line-height:44px;font-weight:800;letter-spacing:-.015em;font-variation-settings:"opsz" 14}
.passport-lead{margin:0;font-size:16px;line-height:24px;color:var(--color-text-secondary)}
.passport-price-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex-wrap:wrap}
.passport-price{display:flex;align-items:baseline;gap:6px;margin:0}
.passport-price strong{font-family:var(--font-code);font-weight:700;font-size:28px;line-height:32px;letter-spacing:-.01em}
.passport-price span{font-size:14px;color:var(--color-text-tertiary)}
.code-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-xs);background:var(--color-bg-sunken);font-family:var(--font-code);font-weight:500;font-size:12px;line-height:16px;color:var(--color-text-secondary)}
.code-pill .ui-icon{width:14px;height:14px}
.code-inline{font-family:var(--font-code);font-weight:500;background:color-mix(in srgb,var(--color-bg-surface) 70%,transparent);padding:1px 6px;border-radius:var(--radius-xs);word-break:break-all}
.passport-actions{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;width:100%;margin-top:4px}
.passport-actions .button:only-child{grid-column:1/-1}
.passport-verified-note{display:flex;gap:8px;align-items:flex-start;margin:4px 0 0;padding:12px 14px;border-radius:var(--radius-md);background:var(--color-status-success-subtle);color:var(--color-status-success);font-size:14px;line-height:20px;font-weight:500;width:100%}
.passport-verified-note .ui-icon{width:18px;height:18px;margin-top:1px}
.passport-h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.passport-h2 .ui-icon{width:20px;height:20px;color:var(--color-brand-primary)}
.passport-h2-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.passport-h2-row .muted{font-size:12px}
.info-card,.aside-card{padding:4px 20px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card)}
.info-card>.muted{margin:16px 0}
.info-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.info-grid .info-row:nth-last-child(2):nth-child(odd){border-bottom:0}
.passport-description{margin:0;padding:16px 0;border-top:1px solid var(--color-border-default);color:var(--color-text-secondary);line-height:24px;white-space:pre-line}
.history-list{list-style:none;margin:0;padding:0;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card)}
.history-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--color-border-default)}
.history-list li:last-child{border-bottom:0}
.history-main{display:grid;min-width:0}
.history-code{font-family:var(--font-code);font-weight:700;font-size:14px;line-height:20px;word-break:break-all}
.history-dates{font-size:12px;line-height:16px;color:var(--color-text-tertiary)}
.passport-seller .seller-card-actions{margin-top:0}
.passport-related{padding-top:64px}
.batch-more{margin-top:12px;border-top:0;padding-top:0}

/* scan */
.scan-page{max-width:calc(760px + 2*var(--gutter));padding-top:32px;display:grid;gap:24px}
.scan-result{display:grid;gap:16px}
.scan-banner{position:relative;display:grid;gap:12px;padding:28px 24px 24px;border-radius:var(--radius-xl);border:1px solid var(--sb-tone);background:var(--sb-bg);overflow:hidden}
.scan-banner.is-verified{--sb-tone:var(--color-status-success);--sb-bg:var(--color-status-success-subtle)}
.scan-banner.is-hold{--sb-tone:var(--color-status-warning);--sb-bg:var(--color-status-warning-subtle)}
.scan-banner.is-expired{--sb-tone:var(--color-status-danger);--sb-bg:var(--color-status-danger-subtle)}
.scan-banner.is-missing{--sb-tone:var(--color-text-secondary);--sb-bg:var(--color-bg-sunken)}
.scan-banner-edge{position:absolute;left:0;right:0;top:0;height:6px;background:var(--sb-tone)}
.scan-banner-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.scan-banner-icon{width:64px;height:64px;border-radius:50%;border:2px solid var(--sb-tone);background:var(--color-bg-surface);color:var(--sb-tone);display:grid;place-items:center}
.scan-banner-icon .ui-icon{width:30px;height:30px}
.scan-banner-time{font-family:var(--font-code);font-size:12px;line-height:16px;font-weight:500;color:var(--color-text-secondary)}
.scan-banner-overline{margin:4px 0 0;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sb-tone)}
.scan-banner-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:34px;line-height:38px;letter-spacing:-.015em;font-variation-settings:"opsz" 14;color:var(--color-text-primary)}
.scan-banner-message p{margin:0;font-size:16px;line-height:24px;color:var(--color-text-secondary)}
.scan-product{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;padding:12px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card)}
.scan-product-photo{width:96px;height:96px;aspect-ratio:1;border-radius:var(--radius-md)}
.scan-product-photo .photo-icon{min-width:28px}
.scan-product-body{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.scan-product-name{margin:0;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.scan-product-name a::after{content:"";position:absolute;inset:0}
.scan-product .product-card-price strong{font-size:16px;line-height:20px}
.scan-next{padding:20px 24px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface)}
.scan-next h2{margin:0 0 12px;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.scan-next ol{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:12px}
.scan-next li{counter-increment:step;display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:15px;line-height:22px;color:var(--color-text-secondary)}
.scan-next li::before{content:counter(step);width:24px;height:24px;border-radius:50%;border:1.5px solid var(--color-accent-default);background:var(--color-accent-subtle);color:var(--color-text-primary);font-family:var(--font-code);font-weight:700;font-size:12px;display:grid;place-items:center}
.scan-actions{display:grid;gap:10px}
.scan-actions .button{width:100%}
/* scanner */
.scanner{border-radius:var(--radius-xl);overflow:hidden;background:var(--color-nav-bg);box-shadow:var(--shadow-raised)}
.scanner-stage{position:relative;padding:32px 24px 20px;color:var(--color-nav-fg);text-align:center;isolation:isolate}
.scanner-head{position:relative;display:grid;gap:6px;justify-items:center;margin-bottom:24px}
.scanner-head h1,.scanner-head h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:28px;line-height:34px;letter-spacing:-.01em;color:var(--color-beras-50);max-width:18ch;font-variation-settings:"opsz" 14}
.scanner-head p{margin:0;font-size:14px;line-height:20px;color:var(--color-nav-fg-muted);max-width:44ch}
.viewfinder{position:relative;width:min(100%,300px);aspect-ratio:1;margin:0 auto;border-radius:20px;background:rgba(251,247,238,.05);display:grid;place-items:center}
.vf-corner{position:absolute;width:44px;height:44px;border:5px solid var(--color-kunyit-400);z-index:3;pointer-events:none}
.vf-corner.tl{left:-10px;top:-10px;border-right:0;border-bottom:0;border-top-left-radius:18px}
.vf-corner.tr{right:-10px;top:-10px;border-left:0;border-bottom:0;border-top-right-radius:18px}
.vf-corner.bl{left:-10px;bottom:-10px;border-right:0;border-top:0;border-bottom-left-radius:18px}
.vf-corner.br{right:-10px;bottom:-10px;border-left:0;border-top:0;border-bottom-right-radius:18px}
.scanner-idle{display:grid;justify-items:center;gap:20px}
.vf-ghost{width:88px;height:88px;color:rgba(251,247,238,.28);stroke-width:1.4}
.scanner-live{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#000}
.scanner-live video{width:100%;height:100%;object-fit:cover}
.vf-line{position:absolute;left:12%;right:12%;top:50%;height:3px;border-radius:2px;background:var(--color-kunyit-400);box-shadow:0 0 12px rgba(242,185,42,.7);animation:vf-sweep 2.4s ease-in-out infinite alternate}
@keyframes vf-sweep{from{transform:translateY(-90px)}to{transform:translateY(90px)}}
.scanner-controls{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:12px;z-index:4}
.scanner-ctrl{width:48px;height:48px;border-radius:50%;border:0;background:rgba(18,24,51,.72);color:var(--color-beras-50);display:grid;place-items:center}
.scanner-ctrl:hover{background:rgba(18,24,51,.9)}
.scanner-ctrl[aria-pressed=true]{background:var(--color-kunyit-400);color:var(--color-tarum-900)}
.scanner-status{position:relative;min-height:20px;margin:16px 0 0;font-size:14px;line-height:20px;color:var(--color-nav-fg-muted)}
.scanner-status[data-state=error]{color:var(--color-cabai-300)}
.scanner-status[data-state=success]{color:var(--color-pandan-300)}
.scanner-sheet{position:relative;display:grid;gap:8px;padding:20px 24px 24px;border-radius:24px 24px 0 0;background:var(--color-bg-surface);color:var(--color-text-primary)}
.sheet-grip{justify-self:center;width:40px;height:4px;border-radius:2px;background:var(--color-border-strong);margin-bottom:4px}
.sheet-title{margin:0;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.sheet-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.sheet-row .search-field input{font-family:var(--font-code);font-weight:500}

/* status pages (qr inactive / not found / errors) */
.status-page{max-width:calc(720px + 2*var(--gutter));padding-top:56px;padding-bottom:24px;display:grid;gap:16px;justify-items:center;text-align:center}
.status-page .status-banner{width:100%;text-align:left}
.status-help{margin:0;color:var(--color-text-secondary);font-size:15px;line-height:22px;max-width:560px}
.status-card{width:100%;display:grid;gap:4px;padding:16px 20px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);text-align:left}
.status-card strong{font-size:16px}
.status-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.status-icon{position:relative;width:96px;height:96px;display:grid;place-items:center;color:var(--color-kunyit-700);margin-bottom:8px}
.status-icon .diamond{position:absolute;inset:18px;border:1.5px dashed var(--color-accent-default);background:var(--color-accent-subtle);border-radius:12px;transform:rotate(45deg)}
.status-icon::before,.status-icon::after{content:"";position:absolute;width:44px;height:44px;border-radius:9px;transform:rotate(45deg);top:26px}
.status-icon::before{left:-10px;background:var(--color-category-laut-bg)}
.status-icon::after{right:-10px;background:var(--color-category-kriya-bg)}
.status-icon .ui-icon{position:relative;z-index:1;width:30px;height:30px}
.status-icon .diamond{z-index:1}
.status-icon.is-danger{color:var(--color-status-danger)}
.status-icon.is-danger .diamond{border-color:var(--color-status-danger);background:var(--color-status-danger-subtle)}
:root[data-theme=dark] .status-icon{color:var(--color-kunyit-300)}
.status-code{font-family:var(--font-code);font-size:13px;font-weight:700;color:var(--color-text-tertiary);letter-spacing:.08em}
.status-page h1{margin:0;font-size:40px;line-height:44px;font-weight:800;letter-spacing:-.015em;font-variation-settings:"opsz" 14}
.status-page>p{margin:0;color:var(--color-text-secondary);font-size:16px;line-height:24px;max-width:560px}
.status-page .identifier{font-family:var(--font-code);background:var(--color-bg-sunken);padding:2px 8px;border-radius:var(--radius-xs);word-break:break-all}
.minimal-shell .site-header-bar{justify-content:space-between}
.minimal-footer{margin-top:64px;background:var(--color-bg-sunken);text-align:center;color:var(--color-text-tertiary);font-size:13px}
.minimal-footer p{margin:0;padding:16px var(--gutter)}

/* seller profile */
.seller-page{padding-top:24px}
.seller-hero{margin-top:16px;border:1px solid var(--color-border-default);border-radius:var(--radius-xl);background:var(--color-bg-surface);box-shadow:var(--shadow-card);overflow:hidden}
.seller-cover{position:relative;height:200px;background:var(--color-accent-subtle);overflow:hidden}
.seller-cover-motif{position:absolute;inset:0;background-image:var(--motif-ink);background-size:48px 48px;opacity:.08}
:root[data-theme=dark] .seller-cover-motif{background-image:var(--motif-paper)}
.seller-cover-loc{position:absolute;right:16px;top:16px;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 32px);padding:6px 10px;border-radius:var(--radius-full);background:var(--color-bg-surface);font-size:12px;line-height:16px;font-weight:600;color:var(--color-text-secondary);box-shadow:var(--shadow-card)}
.seller-cover-loc .ui-icon{width:14px;height:14px;color:var(--color-status-danger);flex:0 0 auto}
.seller-cover-pita{position:absolute;left:0;right:0;bottom:0}
.seller-hero-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:end;padding:0 40px 32px;margin-top:-56px;position:relative}
.seller-hero-logo{grid-column:1/-1;margin-bottom:4px}
.seller-hero-copy{min-width:0}
.seller-hero-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.seller-hero-title h1{margin:0;font-size:40px;line-height:44px;font-weight:800;letter-spacing:-.015em;font-variation-settings:"opsz" 14}
.seller-hero-copy p{margin:8px 0 0;max-width:640px;font-size:16px;line-height:24px;color:var(--color-text-secondary)}
.seller-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.seller-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;margin-top:32px;align-items:start}
.seller-main{display:grid;gap:32px;min-width:0}
.stat-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.stat-tile{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card);overflow:hidden}
.stat-tile::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--tone-solid)}
.stat-tile dt{display:flex;align-items:center;gap:10px;font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-secondary)}
.stat-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--tone-bg);color:var(--tone-fg);display:grid;place-items:center}
.stat-icon .ui-icon{width:18px;height:18px}
.stat-tile dd{margin:0;font-family:var(--font-code);font-weight:700;font-size:28px;line-height:32px;letter-spacing:-.01em}
.tabs-line{border-bottom:1px solid var(--color-border-default);margin-bottom:20px}
.tabs-line h2{display:inline-flex;gap:6px;margin:0 0 -1px;padding:10px 0;border-bottom:3px solid var(--color-accent-default);font-family:var(--font-body);font-size:15px;line-height:22px;font-weight:700;letter-spacing:0}
.seller-products{grid-template-columns:repeat(3,minmax(0,1fr))}
.seller-aside{position:sticky;top:96px;display:grid;gap:16px}
.aside-card h2{margin:16px 0 4px;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.aside-card dd .link{word-break:break-all}
.aside-links{padding:4px 0 16px}

/* QR center & batch list */
.qr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.qr-card{display:grid;grid-template-columns:156px minmax(0,1fr);gap:20px;align-items:center;padding:20px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card);min-width:0}
.qr-card-code{padding:12px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--color-border-default)}
.qr-card-code img{width:100%;height:auto}
.qr-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.qr-card h2{margin:0;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.qr-card h2 a:hover{color:var(--color-text-link);text-decoration:underline}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.batch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.trace-content{padding-top:24px}
.trace-result-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.trace-result-heading h2{margin:0;font-size:24px;line-height:30px}
.trace-result-heading span{color:var(--color-text-secondary);font-size:14px}
.trace-result-heading strong{font-family:var(--font-code)}
.trace-results .trace-result-list{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ========== 10. Console ("Konsol", Figma page Konsol) ==========
   Owned by the console pass. Tokens only (--color-*, --space-*, --radius-*, --shadow-*); the sidebar keeps the tarum
   nav tokens in both themes. Sub-sections: 10a shell & sidebar · 10b top bar · 10c mobile header & bottom nav ·
   10d page head, stat tiles, dashboard · 10e lists, tables, toolbar, tabs · 10f forms · 10g configuration & Logo & Mitra ·
   10h applications, categories, users, QR */

/* ---- 10a. Shell & sidebar (Sidebar Konsol 11:1400, Sidebar Item 11:953) ---- */
.app-shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh;background:var(--color-bg-canvas)}
.console-sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--color-nav-bg);color:var(--color-nav-fg);overflow:hidden;isolation:isolate;z-index:60}
.console-motif{position:absolute;left:0;right:0;bottom:0;height:62%;background-image:var(--motif-paper);background-size:48px 48px;opacity:.06;pointer-events:none;z-index:-1;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
.console-sidebar-inner{flex:1;display:flex;flex-direction:column;gap:4px;min-height:0;padding:24px 20px 20px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-tarum-700) transparent}
.console-sidebar .brand{align-self:flex-start;margin-bottom:20px}
.console-sidebar .brand:focus-visible,.console-mobile-head .brand:focus-visible{box-shadow:var(--shadow-focus)}
.workspace-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);background:var(--color-nav-item-active);min-width:0;margin-bottom:16px}
.workspace-initials{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--color-accent-default);color:var(--color-tarum-900);display:grid;place-items:center;flex:0 0 auto;font-family:var(--font-display);font-weight:800;font-size:14px;font-variation-settings:"opsz" 14}
.workspace-initials.has-logo{background:#fff;padding:2px;overflow:hidden}
.workspace-initials.has-logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:calc(var(--radius-sm) - 2px)}
.workspace-text{display:grid;min-width:0}
.workspace-text strong{font-size:14px;line-height:20px;font-weight:600;color:var(--color-nav-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-text small{font-size:12px;line-height:16px;font-weight:600;color:var(--color-nav-fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-nav{display:grid;gap:4px}
.console-nav ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
.console-nav-label{margin:4px 0 0;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-nav-fg-muted);opacity:.85}
.console-nav-item{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px 0 12px;border-radius:var(--radius-sm);color:var(--color-nav-fg-muted);font-size:14px;line-height:20px;font-weight:600;transition:background-color .15s ease,color .15s ease}
.console-nav-item>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-nav-item .ui-icon{width:20px;height:20px}
.console-nav-item:hover{background:rgba(251,247,238,.06);color:var(--color-nav-fg)}
.console-nav-item.is-active{background:var(--color-nav-item-active);color:var(--color-nav-fg);font-weight:700}
.console-nav-item.is-active::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--color-accent-default)}
.console-nav-item.is-active .ui-icon{color:var(--color-accent-default)}
.console-nav-item:focus-visible,.console-user-link:focus-visible,.console-logout:focus-visible{box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
.console-nav-count{min-width:22px;padding:1px 7px;border-radius:var(--radius-full);background:var(--color-accent-default);color:var(--color-tarum-900);font-family:var(--font-code);font-weight:700;font-size:12px;line-height:16px;text-align:center}
.console-sidebar-foot{margin-top:auto;padding-top:16px;display:grid;gap:4px}
.console-user{display:flex;align-items:center;gap:6px;border-top:1px solid var(--color-nav-divider);padding-top:12px;margin-top:4px}
.console-user-link{flex:1;display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;border-radius:var(--radius-sm);padding:0 4px 0 0}
.console-user-link:hover .console-user-text strong{text-decoration:underline;text-underline-offset:3px}
.console-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:var(--color-category-fesyen-bg);color:var(--color-category-fesyen-fg);display:grid;place-items:center;flex:0 0 auto;font-family:var(--font-display);font-weight:800;font-size:14px;font-variation-settings:"opsz" 14}
:root[data-theme=dark] .console-avatar{background:var(--color-manggis-50);color:var(--color-manggis-700)}
.console-user-text{display:grid;min-width:0}
.console-user-text strong{font-size:14px;line-height:20px;font-weight:600;color:var(--color-nav-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-user-text small{font-size:12px;line-height:16px;font-weight:600;color:var(--color-nav-fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-logout{width:44px;height:44px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-nav-fg-muted);display:grid;place-items:center;padding:0}
.console-logout:hover{background:rgba(251,247,238,.08);color:var(--color-nav-fg)}
.console-logout .ui-icon{width:18px;height:18px}
.admin-workspace{min-width:0;background:var(--color-bg-canvas)}
.admin-content{max-width:1440px;margin:0 auto;padding:24px 32px 80px;min-width:0}
.admin-content>.page-alerts{padding:0;margin-bottom:16px;max-width:none}

/* ---- 10b. Top bar (Konsol Top Bar 23:2451) ---- */
.console-topbar{position:sticky;top:0;z-index:50}
.console-mobile-head{display:none}
.console-topbar-bar{height:72px;display:flex;align-items:center;gap:12px;padding:0 32px;background:color-mix(in srgb,var(--color-bg-canvas) 94%,transparent);border-bottom:1px solid var(--color-border-default);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)}
.console-crumbs{flex:1;min-width:0}
.console-crumbs ol{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0;font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-tertiary);min-width:0}
.console-crumbs li{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.console-crumbs li+li::before{content:"/";color:var(--color-text-tertiary)}
.console-crumbs li:last-child{overflow:hidden}
.console-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-text-tertiary)}
.console-crumbs a:hover{color:var(--color-text-link);text-decoration:underline;text-underline-offset:3px}
.console-crumbs [aria-current]{font-weight:700;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis}
.console-search{flex:0 1 280px;min-width:180px}
.console-search .search-field{min-height:44px}
.console-search input{font-size:14px;min-height:40px}
.console-primary{flex:0 0 auto}

/* ---- 10c. Mobile header & bottom nav (Ringkasan 390, 24:4765) ---- */
.admin-mobile-nav{display:none}
.icon-button.on-dark{background:transparent;border-color:rgba(251,247,238,.24);color:var(--color-nav-fg)}
.icon-button.on-dark:hover{background:rgba(251,247,238,.08)}
.account-menu{position:relative}
.account-menu summary{list-style:none;cursor:pointer}
.account-menu summary::-webkit-details-marker{display:none}
.console-avatar.is-button{width:44px;height:44px;border:2px solid rgba(251,247,238,.24)}
.account-menu>div{position:absolute;right:0;top:52px;width:232px;padding:8px;background:var(--color-bg-surface);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-raised);display:grid;gap:2px;z-index:100}
.account-summary{display:grid;padding:8px;border-bottom:1px solid var(--color-border-default);margin-bottom:4px;min-width:0}
.account-summary strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-summary small{color:var(--color-text-tertiary)}
.account-menu a,.account-menu button,.admin-more-sheet button{border:0;background:transparent;color:var(--color-text-primary);min-height:44px;padding:0 10px;text-align:left;font-weight:600;display:flex;align-items:center;gap:10px;border-radius:var(--radius-sm);width:100%}
.account-menu a:hover,.account-menu button:hover,.admin-more-sheet button:hover{background:var(--color-bg-sunken)}
.menu-danger{color:var(--color-status-danger)!important}

/* ---- 10d. Page head, stat tiles, dashboard ---- */
.admin-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.admin-page-head>div:first-child{min-width:0}
.admin-page-head h1{margin:4px 0 4px;font-family:var(--font-display);font-size:32px;line-height:38px;font-weight:700;letter-spacing:-.01em;font-variation-settings:"opsz" 14}
.admin-page-head p{margin:0;max-width:720px;font-size:14px;line-height:20px;color:var(--color-text-secondary)}
.admin-page-head .page-actions{flex:0 0 auto}
.back-link{display:inline-flex;align-items:center;gap:4px;min-height:36px;margin:-8px 0 4px -6px;padding:0 10px 0 4px;border-radius:var(--radius-sm);color:var(--color-text-secondary);font-size:14px;font-weight:600}
.back-link:hover{color:var(--color-text-link);background:var(--color-bg-sunken)}
.back-link .ui-icon{width:18px;height:18px}
.head-count{font-family:var(--font-code);font-weight:700;color:var(--color-text-primary)}
/* Stat Tile (10:444): reuses the public .stat-tile, adds console sizing + a hint line instead of a trend (no history data) */
.console-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 24px;padding:0;list-style:none}
.stat-label{display:flex;align-items:center;gap:10px;font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-secondary);min-width:0}
.stat-value{font-family:var(--font-code);font-weight:700;font-size:28px;line-height:32px;letter-spacing:-.01em;color:var(--color-text-primary)}
.console-stats.n-3,.console-stats.n-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.console-stats.n-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.console-stats .stat-tile{padding:0;gap:0;transition:border-color .15s ease,box-shadow .15s ease}
.console-stats .stat-tile::before{height:3px}
.console-stats a.stat-tile-link{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:inherit;color:inherit;height:100%}
.console-stats .stat-tile:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-raised)}
.console-stats .stat-tile:focus-within{box-shadow:var(--shadow-card),var(--shadow-focus)}
.console-stats a.stat-tile-link:focus-visible{box-shadow:none}
.stat-icon{border-radius:var(--radius-md)}
.stat-hint{display:flex;align-items:center;gap:6px;font-size:14px;line-height:20px;color:var(--color-text-tertiary);min-width:0}
.stat-hint span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-hint .ui-icon{width:16px;height:16px;color:var(--color-text-link);margin-left:auto;flex:0 0 auto}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
.dash-col{display:grid;gap:24px;min-width:0}
.panel,.data-panel,.form-section{background:var(--color-bg-surface);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);min-width:0}
.data-panel,.form-section{padding:20px}
.panel{overflow:hidden}
.panel-head,.panel-title,.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.panel-head{padding:16px 20px;border-bottom:1px solid var(--color-border-default)}
.panel-title,.panel-heading{margin-bottom:16px}
.panel-head h2,.panel-title h2,.panel-heading h2{margin:0;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0;display:flex;align-items:center;gap:8px}
.panel-title p{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--color-text-secondary)}
.panel-title>div,.panel-heading>div{min-width:0}
.panel-head>a,.panel-title>a:not(.button){display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--color-text-link);white-space:nowrap}
.panel-head>a:hover,.panel-title>a:not(.button):hover{text-decoration:underline;text-underline-offset:3px}
.count-pill{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 7px;border-radius:var(--radius-full);background:var(--color-accent-subtle);border:1px solid color-mix(in srgb,var(--color-accent-default) 60%,transparent);color:var(--color-text-primary);font-family:var(--font-code);font-weight:700;font-size:12px;line-height:16px}
.greeting-date{display:block;font-size:12px;line-height:16px;font-weight:600;color:var(--color-text-tertiary)}
/* Perlu perhatian */
.attention-list{list-style:none;margin:0;padding:0}
.attention-item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 20px;border-top:1px solid var(--color-border-default)}
.attention-item:first-child{border-top:0}
.attention-icon{width:36px;height:36px;border-radius:var(--radius-full);display:grid;place-items:center;background:var(--tone-bg);color:var(--tone-fg)}
.attention-icon .ui-icon{width:18px;height:18px}
.attention-item.is-danger{--tone-bg:var(--color-status-danger-subtle);--tone-fg:var(--color-status-danger)}
.attention-item.is-warning{--tone-bg:var(--color-status-warning-subtle);--tone-fg:var(--color-status-warning)}
.attention-item.is-info{--tone-bg:var(--color-status-info-subtle);--tone-fg:var(--color-status-info)}
.attention-copy{display:grid;min-width:0}
.attention-copy strong{font-size:14px;line-height:20px;font-weight:600}
.attention-copy span{font-size:12px;line-height:16px;color:var(--color-text-tertiary)}
.attention-empty{display:flex;align-items:center;gap:12px;padding:20px;color:var(--color-text-secondary)}
.attention-empty .attention-icon{--tone-bg:var(--color-status-success-subtle);--tone-fg:var(--color-status-success)}
.attention-empty strong{display:block;color:var(--color-text-primary)}
/* Produk terbaru */
.recent-list{list-style:none;margin:0;padding:0}
.recent-item{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 20px;border-top:1px solid var(--color-border-default)}
.recent-item:first-child{border-top:0}
.recent-item:hover{background:var(--color-bg-surface-raised)}
.recent-item .photo{width:44px;height:44px;aspect-ratio:1;border-radius:var(--radius-sm)}
.recent-item .photo-icon{min-width:18px}
.recent-copy{display:grid;min-width:0}
.recent-copy a{font-size:14px;line-height:20px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-copy a::after{content:"";position:absolute;inset:0}
.recent-copy a:focus-visible{box-shadow:none}
.recent-item:focus-within{box-shadow:inset var(--shadow-focus)}
.recent-copy span{font-size:12px;line-height:16px;color:var(--color-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* dark call-to-action panel (Pengajuan usaha) */
.cta-panel{position:relative;padding:20px;border-radius:var(--radius-lg);background:var(--color-nav-bg);color:var(--color-nav-fg);overflow:hidden;isolation:isolate}
:root[data-theme=dark] .cta-panel{box-shadow:inset 0 0 0 1px var(--color-tarum-800)}
.cta-panel .panel-motif{z-index:-1}
.cta-panel h2{margin:4px 0 8px;font-family:var(--font-display);font-size:24px;line-height:30px;font-weight:700;color:var(--color-beras-50)}
.cta-panel p{margin:0 0 16px;font-size:14px;line-height:20px;color:var(--color-nav-fg-muted)}
.cta-panel .button{width:100%}
.health-list{margin:0;padding:4px 20px 12px;display:grid}
.health-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--color-border-default)}
.health-list>div:first-child{border-top:0}
.health-list dt{font-size:14px;color:var(--color-text-secondary)}
.health-list dd{margin:0;font-family:var(--font-code);font-weight:700;font-size:16px}
.quick-links{display:grid;gap:4px;padding:8px 12px 12px}
.quick-links a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:var(--radius-sm);font-weight:600;color:var(--color-text-primary)}
.quick-links a:hover{background:var(--color-bg-sunken)}
.quick-links .ui-icon{color:var(--color-text-link);width:20px;height:20px}

/* ---- 10e. Lists, tables, toolbar, tabs ---- */
.data-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.data-toolbar .toolbar-search{flex:1 1 280px;min-width:0;max-width:520px}
.data-toolbar .toolbar-search input{font-size:14px}
.toolbar-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar-filters select{width:auto;min-width:168px;font-size:14px}
.status-tabs{display:flex;gap:24px;margin:0 0 16px;padding:0;list-style:none;border-bottom:1px solid var(--color-border-default);overflow-x:auto;scrollbar-width:none}
.status-tabs::-webkit-scrollbar{display:none}
.status-tabs a,.config-tabs a{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-secondary);white-space:nowrap}
.status-tabs a::after,.config-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:2px 2px 0 0;background:var(--color-accent-default);transform:scaleX(0);transition:transform .15s ease}
.status-tabs a:hover,.config-tabs a:hover{color:var(--color-text-primary)}
.status-tabs a[aria-current=page],.config-tabs a[aria-current=page]{color:var(--color-text-primary);font-weight:700}
.status-tabs a[aria-current=page]::after,.config-tabs a[aria-current=page]::after{transform:none}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-surface)}
.enterprise-table{width:100%;border-collapse:collapse;min-width:720px;font-size:14px;line-height:20px}
.enterprise-table th{position:sticky;top:0;z-index:1;padding:12px 16px;text-align:left;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-tertiary);background:var(--color-bg-surface-raised);border-bottom:1px solid var(--color-border-default);white-space:nowrap}
.enterprise-table td{padding:12px 16px;border-bottom:1px solid var(--color-border-default);vertical-align:middle}
.enterprise-table tr:last-child td{border-bottom:0}
.enterprise-table tbody tr:hover td{background:var(--color-bg-surface-raised)}
.enterprise-table .num{text-align:right;font-family:var(--font-code);font-weight:500;white-space:nowrap}
.enterprise-table th.num{font-family:var(--font-body)}
.enterprise-table .nowrap{white-space:nowrap}
.enterprise-table .cell-actions{text-align:right;white-space:nowrap}
.enterprise-table .cell-actions .action-group{justify-content:flex-end;flex-wrap:nowrap}
.enterprise-table .muted{color:var(--color-text-tertiary)}
.table-product{display:flex;align-items:center;gap:12px;min-width:200px}
.table-product>.photo{width:40px;height:40px;aspect-ratio:1;border-radius:var(--radius-sm);flex:0 0 auto}
.table-product>.photo .photo-icon{min-width:16px}
.table-product>span:last-child{display:grid;min-width:0}
.table-product strong{font-size:14px;line-height:20px;font-weight:600}
.table-product small{font-size:12px;line-height:16px;color:var(--color-text-tertiary);max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-product small.code{font-family:var(--font-code)}
.table-product .seller-logo{width:40px;height:40px;border-radius:var(--radius-sm)}
.table-product .seller-initials{font-size:14px}
.table-qr{width:56px;height:56px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:#fff;padding:4px}
.qr-state{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--color-text-secondary);white-space:nowrap}
.qr-state .ui-icon{width:16px;height:16px;color:var(--color-status-success)}
.qr-state.is-off .ui-icon{color:var(--color-status-danger)}
a.qr-state.is-link{text-decoration:none;padding:6px 10px;margin:-6px -10px;border-radius:var(--radius-full);transition:background-color .15s,color .15s}
a.qr-state.is-link:hover,a.qr-state.is-link:focus-visible{background:var(--color-brand-primary-subtle);color:var(--color-brand-primary);text-decoration:underline;text-underline-offset:3px}
.cell-stack{display:grid;gap:4px;justify-items:start;min-width:0}
.cell-stack small{color:var(--color-text-tertiary);font-size:12px}
.cell-clamp{max-width:260px;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.inline-code.strong{font-weight:700;font-size:13px;max-width:260px}
.mono{font-family:var(--font-code)}
.entity-avatar{width:48px;height:48px;border-radius:var(--radius-full);background:var(--color-category-umum-bg);color:var(--color-category-umum-fg);display:grid;place-items:center;flex:0 0 auto;font-family:var(--font-display);font-weight:800;font-size:16px;font-variation-settings:"opsz" 14}
.entity-avatar.sm{width:36px;height:36px;font-size:13px}
.role-badge{background:var(--color-brand-primary-subtle);color:var(--color-text-link);border-color:color-mix(in srgb,var(--color-brand-primary) 30%,transparent)}
.row-note{justify-content:flex-end}
.small-note{font-size:12px;white-space:nowrap}
/* outline danger for per-row actions (solid danger stays for confirmations) */
.button.danger-outline{background:var(--color-bg-surface);border-color:var(--danger-line);color:var(--color-status-danger)}
.button.danger-outline:hover{background:var(--color-status-danger-subtle);border-color:var(--color-status-danger)}
/* icon + text buttons collapse to icon-only inside dense tables (label stays for assistive tech) */
.enterprise-table .button.has-icon{width:36px;padding:0}
.enterprise-table .button.has-icon .btn-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.button.has-icon .ui-icon{width:18px;height:18px}
/* small table/row buttons: 36px visual, 44px hit area */
.admin-content .button.compact{position:relative}
.admin-content .button.compact::after{content:"";position:absolute;inset:-4px 0}
.icon-action{position:relative;width:36px;height:36px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-bg-surface);color:var(--color-text-secondary);display:inline-grid;place-items:center;padding:0;flex:0 0 auto}
.icon-action::after{content:"";position:absolute;inset:-4px}
.icon-action:hover{background:var(--color-bg-sunken);color:var(--color-text-primary)}
.icon-action .ui-icon{width:18px;height:18px}
.icon-action.is-danger:hover{color:var(--color-status-danger);border-color:var(--danger-line)}
.category-admin-card>.cat-actions{flex-wrap:nowrap;gap:6px}
.category-admin-card>.cat-actions form{margin:0}
.icon-action[disabled]{opacity:.4;cursor:not-allowed}
/* mobile cards */
.mobile-entity-list{display:none}
.mobile-entity-card{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) 18px;gap:12px;align-items:center;padding:12px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);color:var(--color-text-primary);box-shadow:var(--shadow-card);min-width:0}
.mobile-entity-card.is-link:hover{border-color:var(--color-border-strong)}
.mobile-entity-card>.photo{width:64px;height:64px;aspect-ratio:1;border-radius:var(--radius-md)}
.mobile-entity-card>.photo .photo-icon{min-width:22px}
.mobile-entity-card.no-media{grid-template-columns:minmax(0,1fr) 18px}
.mobile-entity-card.logo{grid-template-columns:56px minmax(0,1fr) 18px}
.mobile-entity-card.has-actions{grid-template-columns:48px minmax(0,1fr)}
.mobile-entity-card.has-actions>.action-group{grid-column:1/-1;border-top:1px solid var(--color-border-default);padding-top:10px}
.mobile-entity-card.has-actions>.action-group>*{flex:1 1 auto}
.mobile-entity-card.has-actions>.action-group form .button{width:100%}
.mobile-entity-card.no-media.is-batch{border-left:4px solid var(--tone,var(--color-status-success))}
.is-batch.tone-warning{--tone:var(--color-status-warning)}.is-batch.tone-danger{--tone:var(--color-status-danger)}.is-batch.tone-neutral{--tone:var(--color-text-tertiary)}.is-batch.tone-info{--tone:var(--color-status-info)}
.entity-copy{display:grid;gap:2px;justify-items:start;min-width:0}
.entity-copy>small,.entity-copy>span{max-width:100%;color:var(--color-text-tertiary);font-size:12px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entity-copy h3{margin:0;max-width:100%;font-family:var(--font-body);font-size:16px;line-height:22px;font-weight:700;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entity-copy h3.mono{font-family:var(--font-code);font-size:15px}
.entity-meta{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.entity-meta strong{font-family:var(--font-code);font-size:14px}
.entity-chevron{width:18px;height:18px;color:var(--color-text-tertiary)}
.entity-facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 2px}
.entity-facts div{display:grid;min-width:0}
.entity-facts dt{font-size:11px;line-height:14px;font-weight:600;color:var(--color-text-tertiary);white-space:nowrap}
.entity-facts dd{margin:0;font-size:13px;font-weight:600;white-space:nowrap}
.qr-mobile-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;padding:14px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card);min-width:0}
.qr-mobile-card>img{width:88px;height:88px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:#fff;padding:5px}
.qr-mobile-card .qr-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qr-mobile-card .qr-actions>form{grid-column:1/-1}
.qr-mobile-card .qr-actions .button{width:100%;padding:0 8px}
.qr-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---- 10f. Forms (Input 6:83, Form Batch 26:1556) ---- */
.form-shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.form-shell.single{grid-template-columns:minmax(0,880px);justify-content:start}
.form-main{display:grid;gap:24px;min-width:0}
.form-aside{display:grid;gap:16px;min-width:0}
.sticky-card{position:sticky;top:96px;display:grid;gap:16px}
.form-section-title{margin-bottom:16px}
.form-section-title h2{margin:0;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.form-section-title p{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--color-text-secondary)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid .span-2{grid-column:1/-1}
.field{display:grid;gap:8px;min-width:0;align-content:start}
.field>label{gap:0}
.field-label{font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-primary)}
.field .check-row{font-size:14px}
.form-actions{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.form-actions.stacked{display:grid;gap:8px;margin-top:4px}
.form-section-title .req{margin:0 1px}
/* stepped card: one surface split into numbered sections with a footer bar (Form Batch) */
.form-card{padding:0;overflow:hidden}
.form-card>.form-errors{margin:0;border-radius:0;border-width:0 0 1px;border-left:0;padding:14px 20px}
.form-step{padding:20px;border-top:1px solid var(--color-border-default)}
.form-step:first-of-type{border-top:0}
.form-card>.form-errors+.form-step{border-top:0}
.form-step-title{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;align-items:start;margin-bottom:16px}
.step-num{grid-row:1/3;width:24px;height:24px;margin-top:1px;border-radius:var(--radius-xs);background:var(--color-tarum-900);color:var(--color-beras-50);display:grid;place-items:center;font-family:var(--font-code);font-weight:700;font-size:12px}
:root[data-theme=dark] .step-num{background:var(--color-beras-50);color:var(--color-tarum-900)}
.form-step-title h2{margin:0;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.form-step-title p{margin:0;font-size:12px;line-height:16px;color:var(--color-text-tertiary)}
.form-card-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--color-border-default);background:var(--color-bg-surface-raised);flex-wrap:wrap}
.form-card-foot .foot-note{margin-right:auto;font-size:12px;line-height:16px;color:var(--color-text-tertiary)}
.aside-title{display:flex;align-items:center;gap:8px;margin:0 0 -4px;font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-secondary)}
.aside-title .ui-icon{width:18px;height:18px}
.tip-card{padding:16px;border-radius:var(--radius-lg);background:var(--color-accent-subtle);border:1px solid color-mix(in srgb,var(--color-accent-default) 45%,transparent)}
.tip-card .overline{color:var(--color-status-warning)}
.tip-card p{margin:6px 0 0;font-size:14px;line-height:20px;color:var(--color-text-secondary)}
.info-card-tone{padding:16px;border-radius:var(--radius-lg);background:var(--color-status-info-subtle);border:1px solid var(--info-line);color:var(--color-text-secondary);font-size:14px;line-height:20px}
.info-card-tone h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:14px;line-height:20px;font-weight:700;color:var(--color-text-primary)}
.info-card-tone h3 .ui-icon{width:18px;height:18px;color:var(--color-status-info)}
.info-card-tone ul{margin:0;padding-left:18px;display:grid;gap:4px}
.rules-note{margin:8px 0 0}
.input-prefix{display:flex;align-items:stretch;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg-surface);overflow:hidden}
.input-prefix>span{display:grid;place-items:center;padding:0 12px;background:var(--color-bg-sunken);color:var(--color-text-secondary);font-family:var(--font-code);font-weight:500;border-right:1px solid var(--color-border-default)}
.input-prefix input{border:0;border-radius:0}
.input-prefix:focus-within{border-color:var(--color-brand-primary);box-shadow:0 0 0 1px var(--color-brand-primary),var(--shadow-focus)}
.input-prefix.is-invalid{border-color:var(--color-status-danger)}
.input-prefix input:focus{box-shadow:none}
input.mono{font-family:var(--font-code);font-weight:500}
input:disabled,select:disabled,textarea:disabled{background:var(--color-bg-sunken);color:var(--color-text-tertiary);cursor:not-allowed}
/* file inputs (JS wraps them in .file-picker with Indonesian text; the raw input stays usable without JS) */
input[type=file]{background:var(--color-bg-surface-raised);border-style:dashed;cursor:pointer;color:var(--color-text-secondary);font-size:14px}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:13px;margin-right:10px;border:1px solid var(--color-border-strong);background:var(--color-bg-surface);color:var(--color-text-primary);border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer}
.file-picker{position:relative;display:flex;align-items:center;gap:10px;min-height:var(--control-h);padding:6px 12px 6px 6px;border:1.5px dashed var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg-surface-raised);min-width:0}
.file-picker:hover{border-color:var(--color-brand-primary)}
.file-picker:focus-within{border-color:var(--color-brand-primary);box-shadow:var(--shadow-focus)}
.file-picker>input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0;padding:0;border:0}
.file-picker-button{flex:0 0 auto;border:1px solid var(--color-border-strong);background:var(--color-bg-surface);color:var(--color-text-primary);border-radius:var(--radius-sm);padding:6px 12px;font-weight:600;font-size:13px}
.file-picker-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-tertiary);font-size:13px}
.file-picker.has-file .file-picker-name{color:var(--color-text-primary);font-weight:600}
.file-picker:has(input[aria-invalid=true]){border-color:var(--color-status-danger)}
.upload-field{gap:8px}
.upload-field.inline{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:16px}
.upload-copy{display:grid;gap:8px;min-width:0}
.upload-thumb{width:72px;height:72px;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--color-border-default);background:var(--color-bg-sunken)}
.upload-thumb.square{object-fit:contain;padding:6px;background:var(--color-bg-surface-raised)}
.upload-thumb.on-dark{background:var(--color-nav-bg)}
.upload-thumb.wide{width:100%;height:120px}
.form-product-preview{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--color-border-default);background:var(--color-bg-sunken)}
.logo-preview{width:96px;height:96px;border-radius:var(--radius-lg);border:1.5px solid var(--color-border-strong);background:var(--color-category-umum-bg);overflow:hidden;display:grid;place-items:center}
.logo-preview img{width:100%;height:100%;object-fit:contain;padding:6px;background:var(--color-bg-surface)}
.logo-placeholder{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--color-category-umum-fg)}
.advanced-settings{padding:0}
.advanced-settings>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;min-height:44px;border-radius:var(--radius-lg)}
.advanced-settings>summary::-webkit-details-marker{display:none}
.advanced-settings>summary>span{display:grid;gap:2px}
.advanced-settings>summary strong{font-size:16px}
.advanced-settings>summary small{color:var(--color-text-secondary);font-size:13px}
.advanced-settings>summary:hover{background:var(--color-bg-surface-raised)}
.advanced-chevron{transition:transform .15s ease;color:var(--color-text-tertiary)}
.advanced-settings[open]>summary .advanced-chevron{transform:rotate(90deg)}
.advanced-settings[open]>summary{border-bottom:1px solid var(--color-border-default);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.advanced-settings>.form-grid{padding:18px 20px 20px}
.inline-alert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;border:1px solid var(--color-border-default);border-radius:var(--radius-md);padding:12px 14px;background:var(--color-bg-surface-raised);color:var(--color-text-secondary);margin:0 0 16px}
.inline-alert p{margin:0;line-height:1.55}
.inline-alert .ui-icon{margin-top:1px}
.inline-alert.warning{background:var(--color-status-warning-subtle);border-color:var(--warning-line);color:var(--color-status-warning)}
.inline-alert.warning p{color:var(--color-text-primary)}
.inline-alert.info{background:var(--color-status-info-subtle);border-color:var(--info-line);color:var(--color-status-info)}
.inline-alert.info p{color:var(--color-text-primary)}
.form-grid>.inline-alert{margin:0}
.tenant-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0}
.check{min-height:44px;border-radius:var(--radius-sm);background:var(--color-bg-surface)}
.check:has(input:checked){border-color:var(--color-brand-primary);background:var(--color-brand-primary-subtle)}
.check-row.align-end{align-self:end;min-height:var(--control-h);align-items:center}
.summary-list{display:grid;margin:0 0 12px}
.summary-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--color-border-default)}
.summary-list>div:last-child{border-bottom:0}
.summary-list dt{color:var(--color-text-secondary);font-size:14px}
.summary-list dd{margin:0;font-weight:700;text-align:right}
.mobile-form-bar{display:none}
/* Sakelar (29:3879): 44×26, on = brand primary, off = border/strong; always paired with a text label */
input.switch{appearance:none;-webkit-appearance:none;width:44px!important;height:26px!important;min-height:0;border-radius:var(--radius-full);background:var(--color-border-strong);position:relative;cursor:pointer;flex:0 0 auto;border:0;padding:0;margin:0;transition:background-color .15s ease}
input.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--color-beras-0);box-shadow:0 1px 3px rgba(18,24,51,.3);transition:transform .15s ease}
input.switch:checked{background:var(--color-brand-primary)}
input.switch:checked::after{transform:translateX(18px)}
:root[data-theme=dark] input.switch::after{background:var(--color-beras-50)}
:root[data-theme=dark] input.switch:checked::after{background:var(--color-tarum-900)}
input.switch:focus-visible{box-shadow:var(--shadow-focus)}
.settings-list{display:grid;gap:0;margin-bottom:8px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid var(--color-border-default);cursor:pointer;font-weight:500;min-height:44px}
.settings-list .setting-row:first-child{border-top:0}
.setting-row>span{display:grid;gap:2px;min-width:0}
.setting-row strong{font-weight:600;font-size:14px}
.setting-row small{color:var(--color-text-secondary);font-size:13px;line-height:18px;font-weight:400}
/* theme choice */
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:0;padding:0;margin:0}
.choice-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:start;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:14px;background:var(--color-bg-surface);cursor:pointer;font-weight:500}
.choice-card small{color:var(--color-text-secondary);font-weight:400}
.choice-card:has(input:checked){border-color:var(--color-brand-primary);box-shadow:inset 0 0 0 1px var(--color-brand-primary);background:var(--color-brand-primary-subtle)}
.choice-card:has(input:focus-visible){box-shadow:var(--shadow-focus)}
.choice-swatch{grid-column:1/-1;grid-row:1;height:56px;border-radius:var(--radius-md);border:1px solid var(--color-border-default)}
.choice-card>input{grid-row:2;margin-top:2px}
.choice-card>span:last-child{grid-row:2;grid-column:2;display:grid;gap:2px}
.choice-swatch.light{background:linear-gradient(90deg,var(--color-beras-50) 0 62%,var(--color-beras-0) 62%)}
.choice-swatch.dark{background:linear-gradient(90deg,var(--color-beras-950) 0 62%,var(--color-beras-900) 62%)}
.choice-swatch.system{background:linear-gradient(135deg,var(--color-beras-50) 0 50%,var(--color-beras-950) 50%)}

/* ---- 10g. Configuration & Logo & Mitra (Pengaturan 30:6068) ---- */
.config-tabs{display:flex;gap:24px;border-bottom:1px solid var(--color-border-default);margin:-8px 0 24px;overflow-x:auto;scrollbar-width:none}
.config-tabs::-webkit-scrollbar{display:none}
.config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.config-list{display:grid}
.config-list article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--color-border-default)}
.config-list article:first-child{border-top:0}
.config-list article>div:first-child{display:grid;gap:4px;justify-items:start;min-width:0}
.config-list small{color:var(--color-text-tertiary);overflow-wrap:anywhere}
.config-list article>.action-group{display:flex;flex:0 0 auto;flex-wrap:nowrap}
/* live header preview */
.brand-preview{position:relative;padding:20px 24px 24px;border-radius:var(--radius-xl);background:var(--color-bg-sunken);border:1px solid var(--color-border-default);margin-bottom:24px}
.brand-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.brand-preview-head h2{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0}
.brand-preview-head h2 .ui-icon{width:18px;height:18px}
.brand-preview-note{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;line-height:16px;color:var(--color-text-secondary)}
.brand-preview-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-status-success)}
.brand-preview-grid{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:16px;align-items:start}
.preview-label{display:block;margin-bottom:6px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary)}
.preview-frame{border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-canvas);overflow:hidden;box-shadow:var(--shadow-card)}
.preview-chrome{display:flex;align-items:center;gap:6px;height:24px;padding:0 10px;background:var(--color-bg-surface);border-bottom:1px solid var(--color-border-default)}
.preview-chrome i{width:7px;height:7px;border-radius:50%;background:var(--color-border-strong)}
.preview-chrome span{margin-left:8px;padding:1px 8px;border-radius:var(--radius-full);background:var(--color-bg-sunken);font-size:10px;line-height:14px;color:var(--color-text-tertiary)}
.preview-header{pointer-events:none;user-select:none}
.preview-header .pita-ragam{height:3px}
.preview-header-bar{display:flex;align-items:center;gap:14px;padding:10px 14px;min-width:0}
.preview-header-bar .lockup{gap:12px;min-width:0}
.preview-header-bar .lockup-divider{height:28px}
.preview-header-bar .brand-mark{width:26px;height:26px}
.preview-header-bar .brand-name{font-size:16px;line-height:20px}
.preview-header-bar .brand-tag{font-size:10px;line-height:14px}
.preview-header-bar .partner-logo{height:26px}
.preview-header-bar .partner-logo img{max-height:26px;max-width:88px}
.preview-header-bar .partners-label{font-size:8px;line-height:10px}
.preview-header-bar .partners-list{gap:10px}
.preview-nav{display:flex;gap:10px;margin-left:auto;font-size:11px;font-weight:600;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden}
.preview-nav b{color:var(--color-text-primary);box-shadow:inset 0 -2px var(--color-accent-default)}
.preview-scan{flex:0 0 auto;padding:4px 8px;border-radius:var(--radius-sm);background:var(--color-accent-default);color:var(--color-text-on-accent);font-size:10px;font-weight:700}
.preview-phone{border:3px solid var(--color-tarum-900);border-radius:20px;background:var(--color-bg-canvas);overflow:hidden;box-shadow:var(--shadow-card)}
:root[data-theme=dark] .preview-phone{border-color:var(--color-beras-600)}
.preview-phone .preview-header-bar{padding:8px 10px;gap:8px;justify-content:space-between}
.preview-phone .brand-mark{width:22px;height:22px}
.preview-phone .brand-name{font-size:13px;line-height:16px}
.preview-phone .brand-tag{font-size:9px;line-height:12px;padding:0 4px}
.preview-phone .partners-strip{padding:4px 8px;gap:8px}
.preview-phone .partners-strip .partners-label{font-size:7px;line-height:14px;padding-right:6px}
.preview-phone .partners-strip .partner-logo{height:20px}
.preview-phone .partners-strip .partner-logo img{max-height:16px;max-width:64px}
.preview-empty{padding:4px 14px 10px;margin:0;font-size:11px;color:var(--color-text-tertiary)}
.partners-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.partners-main,.partners-side{display:grid;gap:24px;min-width:0}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 20px 16px;flex-wrap:wrap}
.card-head>div{min-width:0;flex:1 1 320px}
.card-head h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.card-head p{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--color-text-secondary)}
.slot-pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-full);background:var(--color-bg-sunken);font-size:12px;line-height:16px;font-weight:600;color:var(--color-text-secondary)}
.app-logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0 20px 20px}
.app-logo-card{border:1px solid var(--color-border-default);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-surface)}
.app-logo-stage{display:grid;place-items:center;height:96px;padding:12px;background:var(--color-beras-50)}
.app-logo-stage.is-dark{background:var(--color-tarum-900)}
.app-logo-stage .brand{color:var(--color-beras-900)}
.app-logo-stage.is-dark .brand{color:var(--color-beras-50)}
.app-logo-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.app-logo-meta>div{display:grid;min-width:0}
.app-logo-meta strong{font-size:14px;line-height:20px}
.app-logo-meta small{font-size:12px;line-height:16px;color:var(--color-text-tertiary)}
.partner-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-border-default)}
.partner-row{display:grid;grid-template-columns:44px 136px minmax(0,1fr) auto;gap:16px;align-items:start;padding:16px 20px;border-bottom:1px solid var(--color-border-default)}
.partner-row.has-error{background:color-mix(in srgb,var(--color-status-danger-subtle) 45%,transparent)}
.partner-order{display:grid;justify-items:center;gap:4px;align-self:center}
.partner-order form{margin:0}
.partner-order .icon-action{width:44px;height:36px}
.partner-order .icon-action::after{inset:-4px 0}
.partner-order b{font-family:var(--font-code);font-weight:500;font-size:14px;line-height:20px}
.partner-preview{display:grid;gap:8px;justify-items:stretch;min-width:0}
.partner-box{display:grid;place-items:center;height:64px;padding:8px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-bg-canvas);overflow:hidden}
.partner-box img{max-height:36px;max-width:112px;width:auto;height:auto;object-fit:contain}
:root[data-theme=dark] .partner-box{background:var(--color-beras-50)}
.partner-box.is-empty{border:1.5px dashed var(--color-border-strong);color:var(--color-text-tertiary);font-size:12px;line-height:16px;font-weight:600;text-align:center;gap:2px}
:root[data-theme=dark] .partner-box.is-empty{background:var(--color-bg-sunken)}
.partner-box.is-empty .ui-icon{width:18px;height:18px}
.partner-preview .file-picker{min-height:36px;padding:4px 8px 4px 4px}
.partner-preview .file-picker-button{padding:4px 8px;font-size:12px}
.partner-preview .file-picker-name{font-size:12px}
.partner-preview input[type=file]{font-size:12px;padding:6px;min-height:36px}
.partner-fields{display:grid;gap:10px;min-width:0}
.partner-fields-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}
.partner-meta{margin:0;font-family:var(--font-code);font-weight:500;font-size:12px;line-height:16px;color:var(--color-text-tertiary);overflow-wrap:anywhere}
.partner-meta.is-warn{color:var(--color-status-warning);font-family:var(--font-body);font-weight:600}
.input-icon{position:relative}
.input-icon>.ui-icon{position:absolute;left:12px;top:13px;width:18px;height:18px;color:var(--color-text-tertiary);pointer-events:none}
.input-icon>input{padding-left:38px}
.partner-controls{display:grid;justify-items:center;gap:10px;align-self:center}
.partner-switch{display:grid;justify-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:600;color:var(--color-text-secondary);min-width:72px;cursor:pointer;min-height:44px;align-content:center}
.partner-actions{display:flex;gap:8px;align-items:center}
.partner-remove{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--color-text-secondary);min-height:32px}
.partner-remove input{width:16px;height:16px}
.partner-add{margin:16px 20px 20px;padding:16px;border:1.5px dashed color-mix(in srgb,var(--color-accent-default) 70%,var(--color-border-strong));border-radius:var(--radius-md);background:var(--color-accent-subtle)}
.partner-add>summary{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--color-text-link);text-align:center;flex-wrap:wrap}
.partner-add>summary::-webkit-details-marker{display:none}
.partner-add>summary small{font-weight:400;color:var(--color-text-tertiary)}
.partner-add>summary .ui-icon{width:18px;height:18px}
.partner-add[open]>summary{margin-bottom:12px}
.partner-add .form-grid{align-items:end}
.partner-full{margin:16px 20px 20px}
.side-card{padding:20px}
.side-card h2{margin:0 0 4px;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.side-card .setting-row{align-items:flex-start}
.side-card .setting-row input.switch{margin-top:2px}

/* ---- 10h. Applications, categories, users, QR ---- */
.application-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.application-list{display:grid;gap:12px}
.application-card{border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:16px;background:var(--color-bg-surface-raised);min-width:0}
.application-card-head{display:flex;justify-content:space-between;gap:12px}
.application-card-head>div{display:grid;min-width:0}
.application-card-head strong{font-size:16px;line-height:22px}
.application-card-head span{color:var(--color-text-tertiary);font-size:12px;overflow-wrap:anywhere}
.application-card-head .badge{flex:0 0 auto;align-self:flex-start}
.application-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}
.application-card dl div{display:grid;min-width:0}
.application-card dl .span-all{grid-column:1/-1}
.application-card dt{font-size:12px;line-height:16px;font-weight:600;color:var(--color-text-tertiary)}
.application-card dd{margin:0;font-size:14px;font-weight:600}
.application-desc{margin:12px 0 0;color:var(--color-text-secondary);line-height:1.55}
.application-note{margin:10px 0 0;padding:8px 10px;border-radius:var(--radius-sm);background:var(--color-bg-sunken);font-size:13px;color:var(--color-text-secondary)}
.review-form{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:8px;margin-top:12px}
.review-form select,.review-form input{font-size:14px}
.review-form .button{min-height:44px}
.category-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.category-admin-card{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:start;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:14px;background:var(--color-bg-surface);min-width:0;overflow:hidden}
.category-admin-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tone-solid)}
.category-admin-card>.cat-thumb{width:64px;height:64px;border-radius:var(--radius-md);background:var(--tone-bg);color:var(--tone-fg);display:grid;place-items:center;overflow:hidden}
.category-admin-card>.cat-thumb img{width:100%;height:100%;object-fit:cover}
.category-admin-card>.cat-thumb .ui-icon{width:28px;height:28px}
.category-admin-card h2{margin:6px 0 2px;font-family:var(--font-body);font-size:16px;line-height:22px;font-weight:700;letter-spacing:0}
.category-admin-card p{margin:0;font-size:13px;line-height:18px;color:var(--color-text-secondary)}
.category-admin-card small{font-size:12px;color:var(--color-text-tertiary)}
.cat-head{display:flex;gap:6px;flex-wrap:wrap}

/* ========== 11. Auth & account ========== */
.auth-page{position:relative;min-height:calc(100vh - 150px);display:grid;place-items:center;padding:48px 16px 96px;background:var(--color-bg-canvas);isolation:isolate;overflow:hidden}
.auth-page::before{content:"";position:absolute;inset:0;background-image:var(--motif-ink);background-size:48px 48px;opacity:.05;z-index:-1;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0,transparent 70%);mask-image:radial-gradient(ellipse at 50% 40%,#000 0,transparent 70%)}
:root[data-theme=dark] .auth-page::before{background-image:var(--motif-paper)}
.auth-card{position:relative;width:min(100%,480px);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:36px 32px 32px;background:var(--color-bg-surface);color:var(--color-text-primary);box-shadow:var(--shadow-raised);overflow:hidden}
.auth-card>.pita-ragam{position:absolute;left:0;right:0;top:0;height:6px}
.auth-card-wide{width:min(100%,720px)}
.auth-icon{width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--color-accent-subtle);color:var(--color-kunyit-700);margin-bottom:16px;border:1.5px dashed var(--color-accent-default)}
:root[data-theme=dark] .auth-icon{color:var(--color-kunyit-300)}
.auth-icon .ui-icon{width:22px;height:22px}
.auth-card h1{margin:8px 0 8px;font-family:var(--font-display);font-size:32px;line-height:38px;font-weight:800;letter-spacing:-.015em;font-variation-settings:"opsz" 14}
.auth-card>p{margin:0 0 24px;font-size:15px;line-height:22px;color:var(--color-text-secondary)}
.auth-card form{display:grid;gap:16px}
.auth-card .form-grid{align-items:start}
.auth-card .check-row{margin-top:2px}
.auth-options{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.auth-options .check-row{min-height:44px;align-items:center}
.auth-options>a,.auth-switch a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--color-text-link);text-underline-offset:3px}
.auth-options>a:hover,.auth-switch a:hover{text-decoration:underline}
.auth-switch{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border-default);color:var(--color-text-secondary);flex-wrap:wrap;font-size:14px}
.auth-alerts{display:none;gap:10px}
.auth-alerts:has(*){display:grid;margin-bottom:16px}
.auth-alerts .form-errors{margin:0}
.auth-card form>.field{margin:0}
.account-page{max-width:calc(1100px + 2*var(--gutter));margin:0 auto;padding:40px var(--gutter) 96px}
.account-page.narrow{max-width:calc(820px + 2*var(--gutter))}
.account-page>.back-link{margin-bottom:12px}
.account-hero{margin-bottom:24px}
.account-hero h1{margin:8px 0 8px;font-family:var(--font-display);font-size:40px;line-height:44px;font-weight:800;letter-spacing:-.015em;font-variation-settings:"opsz" 14}
.account-hero p{margin:0;max-width:700px;font-size:16px;line-height:24px;color:var(--color-text-secondary)}
.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.account-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--color-border-default);background:var(--color-bg-surface);border-radius:var(--radius-lg);padding:24px;min-width:0;box-shadow:var(--shadow-card);overflow:hidden}
.account-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tone-solid,var(--color-border-strong))}
.account-card h2{margin:0 0 12px;font-family:var(--font-body);font-size:18px;line-height:26px;font-weight:700;letter-spacing:0}
.account-card p{margin:0;color:var(--color-text-secondary);line-height:22px}
.account-card dl{display:grid;margin:0}
.account-card dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--color-border-default);padding:10px 0;min-width:0}
.account-card dl div:last-child{border-bottom:0}
.account-card dt{color:var(--color-text-secondary);font-size:14px}
.account-card dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere;min-width:0}
.account-card .card-actions{margin-top:auto;padding-top:16px}
.account-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.account-card-head h2{margin:0}
.account-card.highlight{background:var(--color-nav-bg);border-color:var(--color-nav-bg);color:var(--color-nav-fg);isolation:isolate}
:root[data-theme=dark] .account-card.highlight{box-shadow:inset 0 0 0 1px var(--color-tarum-800)}
.account-card.highlight h2{color:var(--color-beras-50)}
.account-card.highlight p{color:var(--color-nav-fg-muted)}
.account-card.highlight .panel-motif{z-index:-1}
.review-note{margin-top:12px!important;font-size:13px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--color-bg-sunken);color:var(--color-text-secondary)!important}
.account-logout{margin-top:24px;display:flex;justify-content:flex-end}
.account-logout .button{color:var(--color-status-danger)}
.public-form{background:var(--color-bg-surface)}
.public-form .form-actions{margin-top:20px}
.state-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:24px;background:var(--color-bg-surface);box-shadow:var(--shadow-card)}
.state-card h2{margin:0 0 6px;font-family:var(--font-body);font-size:20px;line-height:28px;font-weight:700;letter-spacing:0}
.state-card p{margin:0;color:var(--color-text-secondary);line-height:1.6}
.state-card .card-actions{margin-top:16px}
.state-icon{width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-status-success-subtle);color:var(--color-status-success);display:grid;place-items:center}

/* ========== 12. Responsive ========== */
/* 12b. Console, auth & account */
@media (min-width:1024px){
  /* keep the tarum rail continuous when the page is taller than the viewport */
  .app-shell{background:linear-gradient(90deg,var(--color-nav-bg) 264px,var(--color-bg-canvas) 264px)}
  /* the top-bar breadcrumb replaces the back link on wide screens */
  .admin-content .back-link{display:none}
}
@media (max-width:1279px){
  .console-stats,.console-stats.n-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .console-stats.n-3,.console-stats.n-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dash-grid{grid-template-columns:minmax(0,1fr) 340px}
  .partners-layout{grid-template-columns:minmax(0,1fr)}
  .partners-side{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .category-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .console-search{flex-basis:220px}
}
@media (max-width:1023px){
  .app-shell{display:block;padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom))}
  .console-sidebar{display:none}
  .console-topbar-bar{display:none}
  .console-mobile-head{display:block;background:var(--color-nav-bg);color:var(--color-nav-fg)}
  .console-mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 16px}
  .console-mobile-actions{display:flex;align-items:center;gap:8px}
  .console-mobile-head .brand-name{color:var(--color-beras-50)}
  .admin-content{padding:20px 16px 96px}
  .admin-mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;left:0;right:0;bottom:0;z-index:95;background:var(--color-bg-surface);border-top:1px solid var(--color-border-default);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(28,27,24,.06)}
  .admin-mobile-nav>a,.admin-more>summary{display:grid;place-items:center;align-content:center;gap:2px;min-height:56px;border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:11px;font-weight:600;text-align:center;line-height:1.2;list-style:none;cursor:pointer}
  .admin-more>summary::-webkit-details-marker{display:none}
  .admin-mobile-nav>a.active,.admin-mobile-nav>a[aria-current=page]:not(.admin-mobile-fab),.admin-more.has-active>summary,.admin-more[open]>summary{color:var(--color-text-link);font-weight:700}
  .admin-mobile-nav>a.active .ui-icon,.admin-more.has-active>summary .ui-icon{color:var(--color-brand-primary)}
  .admin-mobile-nav .ui-icon{width:22px;height:22px}
  .admin-mobile-nav span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .admin-mobile-fab{display:grid;place-items:center;min-height:56px}
  .fab-disc{width:52px;height:52px;margin-top:-22px;border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--color-brand-primary);color:var(--color-text-on-brand);box-shadow:0 6px 16px rgba(46,60,150,.35),0 0 0 4px var(--color-bg-surface)}
  .fab-disc .ui-icon{width:24px;height:24px}
  .admin-mobile-fab:focus-visible{box-shadow:none}
  .admin-mobile-fab:focus-visible .fab-disc{box-shadow:var(--shadow-focus)}
  .admin-more{position:relative}
  .admin-more-sheet{position:absolute;right:0;bottom:calc(100% + 10px);width:min(280px,calc(100vw - 24px));max-height:calc(100vh - 160px);overflow-y:auto;background:var(--color-bg-surface);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);padding:8px;display:grid;gap:2px}
  .admin-more-sheet a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:var(--radius-sm);font-weight:600;color:var(--color-text-primary)}
  .admin-more-sheet a>span:first-of-type{flex:1}
  .admin-more-sheet a:hover{background:var(--color-bg-sunken)}
  .admin-more-sheet a.active,.admin-more-sheet a[aria-current=page]{background:var(--color-brand-primary-subtle);color:var(--color-text-link)}
  .admin-more-sheet form{border-top:1px solid var(--color-border-default);margin-top:4px;padding-top:4px}
  .admin-page-head{align-items:flex-start}
  .admin-page-head h1{font-size:28px;line-height:34px}
  .dash-grid{grid-template-columns:minmax(0,1fr)}
  .form-shell{grid-template-columns:minmax(0,1fr)}
  .sticky-card{position:static}
  .config-grid{grid-template-columns:minmax(0,1fr)}
  .form-grid,.form-grid.three{grid-template-columns:minmax(0,1fr)}
  .form-grid .span-2{grid-column:auto}
  .tenant-checks{grid-template-columns:minmax(0,1fr)}
  .choice-grid{grid-template-columns:minmax(0,1fr)}
  .upload-thumb.wide{height:140px}
  .application-grid{grid-template-columns:minmax(0,1fr)}
  .brand-preview-grid{grid-template-columns:minmax(0,1fr)}
  .brand-preview-grid>div:last-child{max-width:260px}
}
@media (max-width:767px){
  :root{--console-nav-h:69px}
  .admin-page-head{display:grid;gap:12px;margin-bottom:20px}
  .admin-page-head .page-actions{width:100%}
  .admin-page-head .page-actions .button{flex:1 1 auto}
  .back-link{margin-top:-4px}
  .console-stats,.console-stats.n-3,.console-stats.n-5,.console-stats.n-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .console-stats a.stat-tile-link{padding:14px;gap:8px}
  .console-stats .stat-value{font-size:24px;line-height:28px}
  .console-stats .stat-label{font-size:13px;gap:8px}
  .console-stats .stat-icon{width:32px;height:32px}
  .stat-hint{font-size:12px;line-height:16px}
  .data-panel,.form-section{padding:16px}
  .panel-head{padding:14px 16px}
  .attention-item{grid-template-columns:36px minmax(0,1fr) auto;padding:12px 16px}
  .attention-item .button{padding:0 10px}
  .recent-item{padding:10px 16px}
  .desktop-data{display:none}
  .mobile-entity-list{display:grid;gap:10px}
  .data-toolbar{align-items:stretch}
  .data-toolbar .toolbar-search{flex-basis:100%;max-width:none}
  .toolbar-filters{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar-filters select,.toolbar-filters .button{min-width:0;width:100%}
  .toolbar-filters:has(>select:nth-of-type(2))>.button{grid-column:1/-1}
  .toolbar-filters:has(>select:nth-of-type(2)):has(>.button.ghost)>.button{grid-column:auto}
  .config-tabs,.status-tabs{margin-left:-16px;margin-right:-16px;padding:0 16px;gap:20px}
  .category-admin-grid{grid-template-columns:minmax(0,1fr)}
  .application-card dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review-form{grid-template-columns:minmax(0,1fr)}
  .review-form>.button{width:100%}
  .config-list article{flex-wrap:wrap}
  .config-list article>.action-group{width:100%}
  .config-list article>.action-group>*{flex:1 1 0}
  .config-list article>.action-group form .button{width:100%}
  .upload-field.inline{grid-template-columns:64px minmax(0,1fr)}
  .upload-thumb{width:64px;height:64px}
  .summary-list>div{flex-wrap:wrap}
  .application-card-head{flex-wrap:wrap}
  /* long forms: sticky save bar above the console bottom nav */
  .form-shell.has-mobile-bar .form-actions.has-mobile-bar,.form-card.has-mobile-bar .form-card-foot{display:none}
  .mobile-form-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px;position:sticky;z-index:40;bottom:calc(var(--console-nav-h) + env(safe-area-inset-bottom));margin:16px -16px 0;padding:10px 16px;background:color-mix(in srgb,var(--color-bg-surface) 94%,transparent);border-top:1px solid var(--color-border-default);box-shadow:0 -6px 18px rgba(28,27,24,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .form-shell.has-mobile-bar{grid-template-columns:minmax(0,1fr)}
  .mobile-form-bar .button{min-height:48px}
  .advanced-settings>summary{padding:15px}
  .advanced-settings>.form-grid{padding:15px}
  .form-actions:not(.stacked){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .form-actions:not(.stacked)>.button:only-child{grid-column:1/-1}
  .form-step{padding:16px}
  .form-card>.form-errors{padding:12px 16px}
  /* Logo & Mitra */
  .brand-preview{padding:16px;border-radius:var(--radius-lg)}
  .brand-preview-grid>div:first-child{display:none}
  .brand-preview-grid>div:last-child{max-width:none}
  .partners-side{grid-template-columns:minmax(0,1fr)}
  .app-logo-grid{grid-template-columns:minmax(0,1fr);padding:0 16px 16px}
  .card-head{padding:16px 16px 12px}
  .partner-row{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px}
  .partner-order{grid-row:1/3;align-self:start}
  .partner-fields{grid-column:2}
  .partner-fields-row{grid-template-columns:minmax(0,1fr)}
  .partner-controls{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
  .partner-switch{grid-template-columns:auto auto;align-items:center;min-width:0}
  .partner-add,.partner-full{margin:12px 16px 16px}
  /* auth & account */
  .auth-page{padding:24px 16px 96px;place-items:start center}
  .auth-card{padding:28px 20px 24px;box-shadow:var(--shadow-card)}
  .auth-card h1{font-size:28px;line-height:34px}
  .auth-card .form-grid{grid-template-columns:minmax(0,1fr)}
  .auth-card .form-grid .span-2{grid-column:auto}
  .account-page{padding:24px var(--gutter) 48px}
  .account-hero h1{font-size:32px;line-height:38px}
  .account-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .account-card{padding:20px}
  .state-card{grid-template-columns:minmax(0,1fr);padding:20px}
  .state-card .card-actions{display:grid}
}
@media (max-width:389px){
  .console-stats,.console-stats.n-3,.console-stats.n-5,.console-stats.n-6{grid-template-columns:minmax(0,1fr)}
  .console-mobile-head .brand-tag{display:none}
}

/* ========== 12a. Public responsive ========== */
@media (min-width:1500px){
  .hero{padding-right:var(--edge)}
  .hero-panel{border-radius:40px}
}
@media (max-width:1279px){
  :root{--gutter:40px}
  .site-header-bar{gap:20px}
  .site-search{display:none}
  .site-search-toggle{display:grid}
  .lockup-partners,.lockup-divider{display:none}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:32px;min-height:0}
  .hero-panel{height:520px}
  .hero-card{left:40px;width:260px}
  .hero-batch{left:180px;top:320px;width:330px}
  .hero-stamp{left:auto;right:36px;top:110px;--stamp:100px}
  .hero-panel-label{display:none}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sector-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .how{grid-template-columns:minmax(0,1fr);gap:24px}
  .how-intro{max-width:640px}
  .mission-panel{grid-template-columns:minmax(0,1fr);padding:56px 48px 48px}
  .mission-values{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-footer-inner{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px}
  .passport-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:32px}
  .info-grid{grid-template-columns:minmax(0,1fr)}
  .info-grid .info-row:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--color-border-default)}
  .seller-layout{grid-template-columns:minmax(0,1fr) 300px}
  .seller-products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  :root{--header-h:65px}
  .site-header-bar{height:60px;padding:0 var(--gutter);gap:8px}
  .lockup{flex:1 1 auto}
  .site-nav,.site-account,.site-scan{display:none}
  .site-actions{gap:8px;margin-left:auto}
  .public-main{padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 16px)}
  .minimal-shell .public-main{padding-bottom:0}
  .minimal-shell .site-scan{display:inline-flex}
  .site-footer{margin-top:64px;padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom))}
  .minimal-shell .minimal-footer{padding-bottom:0}
  /* bottom nav with the raised kunyit scan button */
  .bottom-nav{display:block;position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--color-bg-surface);border-top:1px solid var(--color-border-default);padding:6px 8px env(safe-area-inset-bottom);box-shadow:0 -6px 20px rgba(28,27,24,.06)}
  .bottom-nav ul{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);max-width:560px;margin:0 auto;padding:0;list-style:none}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;border-radius:var(--radius-md);color:var(--color-text-tertiary)}
  .bottom-nav-icon{width:48px;height:28px;border-radius:var(--radius-full);display:grid;place-items:center;transition:background-color .15s ease}
  .bottom-nav-icon .ui-icon{width:22px;height:22px}
  .bottom-nav-label{font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .bottom-nav a[aria-current=page]{color:var(--color-brand-primary)}
  .bottom-nav a[aria-current=page] .bottom-nav-icon{background:var(--color-brand-primary-subtle)}
  .bottom-nav a[aria-current=page] .bottom-nav-label{font-weight:700}
  .bottom-nav a:not([aria-current=page]) .bottom-nav-icon{color:var(--color-text-primary)}
  .bottom-nav li.is-scan a{position:relative;justify-content:flex-end;padding-bottom:2px;color:var(--color-text-primary)}
  .bottom-nav li.is-scan .bottom-nav-icon{position:absolute;top:-27px;left:50%;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;background:var(--color-accent-default);border:4px solid var(--color-bg-surface);box-shadow:var(--shadow-raised);color:var(--color-text-on-accent)}
  .bottom-nav li.is-scan .bottom-nav-icon .ui-icon{width:28px;height:28px;color:var(--color-text-on-accent)}
  .bottom-nav li.is-scan a[aria-current=page] .bottom-nav-icon{background:var(--color-accent-hover)}
  .bottom-nav li.is-scan .bottom-nav-label{font-weight:700}
  /* hero */
  .hero{grid-template-columns:minmax(0,1fr);padding:40px var(--gutter) 8px;gap:32px}
  .hero-copy{max-width:720px}
  .hero-panel{border-radius:var(--radius-xl);height:auto;min-height:0;padding:24px 20px 40px}
  .hero-panel-kicker{position:relative;display:grid;gap:2px;margin:0 0 20px;color:var(--color-beras-50);font-size:14px;line-height:20px;font-weight:600;z-index:1}
  .hero-panel-kicker span{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-kunyit-300)}
  .hero-card{position:relative;left:auto;top:auto;width:auto;max-width:520px;margin:0 auto;flex-direction:row;transform:rotate(-2.5deg)}
  .hero-card:hover{transform:rotate(-1deg)}
  .hero-card-photo{width:120px;flex:0 0 120px;aspect-ratio:auto}
  .hero-card-photo .qr-badge{display:none}
  .hero-card-body{padding:14px 16px}
  .hero-batch{display:none}
  .hero-stamp{left:auto;right:16px;top:16px;--stamp:80px}
  .sector-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mission-values{grid-template-columns:minmax(0,1fr)}
  .site-footer-inner{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
  /* catalog */
  .catalog{grid-template-columns:minmax(0,1fr);padding-top:16px}
  .catalog-filter{position:static;display:block}
  .catalog-filter .filter-group,.filter-reset{display:none}
  .catalog-chips{display:flex;margin-top:16px;margin-bottom:16px}
  /* passport → single column in reading order */
  .passport-layout{display:flex;flex-direction:column;align-items:stretch;gap:28px}
  .passport-col{display:contents}
  .passport-media-col{order:1}.passport-summary{order:2}.passport-batches{order:3}.passport-seller{order:4}.passport-info{order:5}.passport-history{order:6}
  .passport-stamp{--stamp:96px;right:16px;top:20px}
  .info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seller-layout{grid-template-columns:minmax(0,1fr)}
  .seller-aside{position:static}
  .qr-grid,.batch-grid,.trace-results .trace-result-list{grid-template-columns:minmax(0,1fr)}
  .how-steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  :root{--gutter:16px;--section-y:40px}
  .site-header-bar{height:60px}
  .brand-name{font-size:20px;line-height:24px}
  .site-actions .icon-button{width:44px;height:44px}
  .partners-strip{padding:6px 16px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
  .partners-strip:has(.partners-list>li:nth-child(2):last-child),.partners-strip:has(.partners-list>li:only-child){justify-content:center}
  .page-alerts{padding:12px var(--gutter) 0}
  .section-head{align-items:flex-end;margin-bottom:16px;gap:12px}
  .section-head h2{font-size:24px;line-height:30px;margin-top:4px}
  .section-head .overline{display:none}
  #products .section-head .overline,#businesses .section-head .overline{display:none}
  .section-link{font-size:14px}
  .pub-head{padding-top:20px}
  .pub-head h1{font-size:32px;line-height:38px}
  .pub-head>p{font-size:14px;line-height:20px}
  /* hero */
  .hero{padding-top:24px;gap:24px}
  .hero-copy{gap:16px}
  .hero-pill{font-size:12px;line-height:16px;padding:4px 10px 4px 5px}
  .hero-dots i{width:12px;height:12px;margin-left:-5px}
  .hero-title{font-size:40px;line-height:44px;letter-spacing:-.015em}
  .hero-lead{font-size:16px;line-height:24px}
  .hero-actions{display:grid;width:100%}
  .hero-actions .button{width:100%}
  .hero-actions .button.secondary{display:none}
  .hero-search{display:block}
  .hero-trust{display:none}
  .hero-card-photo{width:104px;flex-basis:104px}
  .hero-card-name{font-size:17px;line-height:24px}
  .hero-card-price b{font-size:18px}
  .hero-card .chip{height:22px}
  .hero-stamp{--stamp:68px;right:12px;top:12px}
  .promo-list{grid-auto-columns:85%}
  /* sectors → chip scroller */
  .sector-grid{display:none}
  .section .chip-scroller{display:flex}
  /* product rail (home, related) */
  .product-grid.is-rail{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gutter));padding:4px var(--gutter) 12px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .product-grid.is-rail::-webkit-scrollbar{display:none}
  .product-grid.is-rail>.product-card{scroll-snap-align:start}
  .product-card:hover{transform:none}
  /* compact product list (catalog, seller) */
  .is-compact-list,.seller-products{grid-template-columns:minmax(0,1fr);gap:12px}
  .is-compact-list .product-card,.seller-products .product-card{flex-direction:row;align-items:stretch;padding:12px;gap:14px}
  .is-compact-list .product-card-media,.seller-products .product-card-media{width:104px;height:104px;flex:0 0 104px;aspect-ratio:1;border-radius:var(--radius-md);align-self:flex-start}
  .is-compact-list .qr-badge,.seller-products .qr-badge{display:none}
  .is-compact-list .qr-check,.seller-products .qr-check{display:grid}
  .is-compact-list .product-card-body,.seller-products .product-card-body{padding:0;gap:4px}
  .is-compact-list .product-card-title,.seller-products .product-card-title{font-size:17px;line-height:24px}
  .is-compact-list .product-card-foot,.seller-products .product-card-foot{padding-top:2px}
  .is-compact-list .product-card-price strong,.seller-products .product-card-price strong{font-size:17px;line-height:22px}
  .is-compact-list .chip,.seller-products .chip{height:22px}
  /* sellers */
  .seller-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .seller-card{padding:16px}
  /* how it works → timeline card */
  .how{padding-top:48px}
  .how-intro h2{font-size:32px;line-height:38px;margin:8px 0 12px}
  .how-steps{gap:0;padding:8px 20px;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card)}
  .how-steps>li{grid-template-columns:36px 1fr;grid-template-areas:"icon title" ". text";column-gap:14px;row-gap:4px;padding:14px 0;border:0;border-radius:0;box-shadow:none;background:none}
  .how-steps>li:not(:last-child)::after{content:"";position:absolute;left:17px;top:54px;bottom:-12px;width:2px;background:var(--color-border-default)}
  .how-icon{width:36px;height:36px;border-radius:var(--radius-sm)}
  .how-icon .ui-icon{width:20px;height:20px}
  .how-num{grid-area:title;justify-self:start;align-self:start;font-size:12px;line-height:26px;font-weight:500}
  .how-steps strong{padding-left:24px;font-size:17px}
  .how-steps p{margin:0}
  .trace-help{margin-top:32px}
  /* mission */
  .mission-panel{padding:40px 20px 28px;border-radius:var(--radius-xl);gap:28px}
  .mission-copy h2{font-size:28px;line-height:34px}
  .mission-copy p{font-size:15px;line-height:22px}
  .mission-values{gap:16px}
  .mission-values strong{font-size:20px;line-height:26px}
  .cta-band,.cta-band.has-media{grid-template-columns:minmax(0,1fr);padding:24px 20px;gap:16px}
  .cta-band-media{width:100%;height:160px}
  .cta-band .button{width:100%}
  .community-card{grid-template-columns:minmax(0,1fr);padding:24px 20px;gap:20px}
  .community-card h2,.cta-band h2{font-size:24px;line-height:30px}
  .announcement{flex-wrap:wrap}
  /* footer */
  .site-footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:32px var(--gutter) 24px}
  .footer-contact{grid-column:1/-1}
  .site-footer-bottom{padding:12px var(--gutter)}
  /* catalog */
  .catalog-toolbar{margin-bottom:12px}
  .catalog-sort label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .catalog-sort select{min-width:0;width:auto;border:0;background-color:transparent;font-weight:600;padding-left:4px;padding-right:32px}
  .pagination{justify-content:center}
  .pagination-summary{width:100%;text-align:center}
  .pagination-link>span:not(.sr-only){display:none}
  .pagination-link{min-width:44px;padding:0 10px}
  /* passport */
  .passport{padding-top:16px}
  .passport-summary h1{font-size:32px;line-height:38px}
  .passport-price strong{font-size:26px}
  .passport-actions{grid-template-columns:minmax(0,1fr) auto}
  .passport-actions .button.secondary{padding:0 16px}
  .passport-stamp{--stamp:80px;right:12px;top:14px}
  .info-grid{grid-template-columns:minmax(0,1fr)}
  .info-card,.aside-card{padding:4px 16px}
  .batch-dates{gap:12px}
  .batch-card-head{flex-wrap:wrap}
  /* scan */
  .scan-page{padding-top:16px;gap:16px}
  .scan-banner{padding:24px 20px 20px}
  .scan-banner-title{font-size:30px;line-height:34px}
  .scan-next{padding:16px 18px}
  .scanner{margin:0 calc(-1*var(--gutter));border-radius:0}
  .scanner-stage{padding:28px 16px 16px}
  .scanner-head h1,.scanner-head h2{font-size:24px;line-height:30px}
  .viewfinder{width:min(100%,260px)}
  .scanner-sheet{padding:16px 16px 20px}
  /* status */
  .status-page{padding-top:32px}
  .status-page h1{font-size:30px;line-height:36px}
  .status-actions{display:grid;width:100%}
  .status-actions .button{width:100%}
  /* seller */
  .seller-cover{height:140px}
  .seller-hero-body{grid-template-columns:minmax(0,1fr);padding:0 20px 20px;margin-top:-44px}
  .seller-hero-logo.seller-logo.xlarge{width:80px;height:80px}
  .seller-hero-title h1{font-size:30px;line-height:36px}
  .seller-hero-actions{display:grid;grid-template-columns:auto minmax(0,1fr)}
  .stat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .stat-tile{padding:16px}
  .stat-tile dd{font-size:24px}
  .qr-card{grid-template-columns:104px minmax(0,1fr);gap:14px;padding:14px}
  .card-actions{flex-wrap:wrap}
  .trace-search{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .trace-search .search-field{grid-column:1/-1}
}
@media (max-width:767px){
  .section-head{flex-wrap:wrap}
  .section-head>div{flex:1 1 220px;min-width:0}
  .section-sub{font-size:14px;line-height:20px}
  .announcement{flex-direction:column;align-items:flex-start;gap:10px}
  .hero-title.is-long{font-size:34px;line-height:38px}
}
@media (max-width:1023px){
  .hero-panel.no-batch .hero-card{left:auto;top:auto;transform:rotate(-2.5deg)}
  .hero-panel.no-batch .hero-card:hover{transform:rotate(-1deg)}
}
@media (max-width:389px){
  .brand-tag{display:none}
  .hero-title{font-size:36px;line-height:40px}
  .bottom-nav{padding-left:2px;padding-right:2px}
  .bottom-nav-label{font-size:11px}
}
@media print{
  .site-header,.bottom-nav,.site-footer,.console-sidebar,.console-topbar,.admin-mobile-nav,.mobile-form-bar,.skip-link,.scanner{display:none}
  body{background:#fff;color:#000}
}
/* uploaded partner logos are often dark artwork: give them a rice-paper plate in dark mode */
:root[data-theme=dark] .partner-logo{background:#FFFFFF;padding:4px 10px;border-radius:var(--radius-sm)}
:root[data-theme=dark] .partner-logo img{max-height:28px}
:root[data-theme=dark] .partners-strip .partner-logo{padding:2px 8px}
:root[data-theme=dark] .partners-strip .partner-logo img{max-height:20px}

/* Storage health alert (dashboard, admin only) */
.storage-alert{margin-bottom:var(--space-24);padding:var(--space-16) var(--space-20);border:1px solid var(--color-status-warning);background:var(--color-status-warning-subtle);border-radius:var(--radius-lg)}
.storage-alert.is-danger{border-color:var(--color-status-danger);background:var(--color-status-danger-subtle)}
.storage-alert h2{display:flex;align-items:center;gap:8px;margin:0 0 var(--space-8);font-size:16px;line-height:24px;color:var(--color-text-primary)}
.storage-alert.is-danger h2 .ui-icon{color:var(--color-status-danger)}
.storage-alert.is-warning h2 .ui-icon{color:var(--color-status-warning)}
.storage-alert p{margin:0 0 var(--space-8);color:var(--color-text-primary);font-size:14px;line-height:20px}
.storage-alert-list{margin:0;padding-left:20px;font-size:14px;line-height:22px;color:var(--color-text-secondary)}
button.is-busy,.btn.is-busy{opacity:.7;cursor:progress}
.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);flex-wrap:wrap;margin-top:var(--space-32);padding:var(--space-20);border:1px solid var(--color-status-danger);border-radius:var(--radius-lg);background:var(--color-status-danger-subtle)}
.danger-zone h2{margin:0 0 4px;font-size:16px;line-height:24px;color:var(--color-text-primary)}
.danger-zone p{margin:0;max-width:680px;font-size:14px;line-height:20px;color:var(--color-text-secondary)}
.danger-zone form{margin:0}
.cell-actions .action-group{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.cell-actions .action-group form{margin:0}

/* Map preview card (seller page, passport) */
.map-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-surface);color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.map-card:hover{border-color:var(--color-brand-primary);box-shadow:var(--shadow-raised,0 8px 24px rgba(46,41,35,.12))}
.map-card:focus-visible{outline:3px solid var(--color-focus-ring,#F2B92A);outline-offset:2px}
.map-card-frame{position:relative;display:block;height:200px;background:var(--color-bg-sunken)}
.map-card.is-compact .map-card-frame{height:160px}
.map-card-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;filter:saturate(.9)}
[data-theme=dark] .map-card-frame iframe{filter:saturate(.8) brightness(.9)}
.map-card-pin{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:var(--radius-full);display:grid;place-items:center;background:var(--color-bg-surface);color:var(--color-status-danger);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.map-card-pin .ui-icon{width:18px;height:18px}
.map-card-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--color-border-default)}
.map-card-text{display:grid;min-width:0}
.map-card-text strong{font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-primary)}
.map-card-text small{font-size:12px;line-height:16px;color:var(--color-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-card-cta{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-size:13px;font-weight:600;color:var(--color-brand-primary)}
.map-card-cta .ui-icon{width:14px;height:14px}
.map-card:hover .map-card-cta{text-decoration:underline;text-underline-offset:3px}
.seller-aside .map-card{margin-top:4px}
.seller-card-map{position:relative;z-index:2;margin-top:12px}

/* Passport information tabs */
.info-tabs{padding:0}
.tab-list{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 12px;border-bottom:1px solid var(--color-border-default)}
.tab-list::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;margin:0 0 -1px;padding:14px 12px 12px;border:0;border-bottom:3px solid transparent;background:none;color:var(--color-text-secondary);font:inherit;font-size:14px;line-height:20px;font-weight:600;cursor:pointer;white-space:nowrap}
.tab .ui-icon{width:16px;height:16px}
.tab:hover{color:var(--color-text-primary)}
.tab[aria-selected=true]{color:var(--color-text-primary);border-bottom-color:var(--color-accent-default)}
.tab:focus-visible{outline:3px solid var(--color-focus-ring,#F2B92A);outline-offset:-3px;border-radius:var(--radius-sm)}
.info-tabs:not(.is-enhanced) .tab-list{display:none}
.tab-panel{padding:20px}
.info-tabs:not(.is-enhanced) .tab-panel+.tab-panel{border-top:1px solid var(--color-border-default)}
.tab-panel:focus-visible{outline:3px solid var(--color-focus-ring,#F2B92A);outline-offset:-3px}
.tab-panel-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16px;line-height:24px;font-weight:700;color:var(--color-text-primary)}
.info-tabs.is-enhanced .tab-panel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.info-points{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.info-points li{position:relative;padding-left:22px;font-size:15px;line-height:23px;color:var(--color-text-primary)}
.info-points li::before{content:"";position:absolute;left:4px;top:8px;width:7px;height:7px;border-radius:2px;background:var(--color-accent-default);transform:rotate(45deg)}
.info-text{margin:0;font-size:15px;line-height:24px;color:var(--color-text-primary)}

/* Passport photo slider */
.gallery{min-width:0}
.gallery-frame{position:relative}
.gallery-stage{position:relative}
.gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;aspect-ratio:4/3;background:var(--color-bg-sunken)}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track:focus-visible{outline:3px solid var(--color-focus-ring,#F2B92A);outline-offset:-3px}
.gallery-slide{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.gallery-slide img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-nav{position:absolute;top:50%;z-index:4;width:40px;height:40px;margin-top:-20px;border:0;border-radius:var(--radius-full);display:grid;place-items:center;background:color-mix(in srgb,var(--color-bg-surface) 92%,transparent);color:var(--color-text-primary);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;transition:opacity .15s}
.gallery-nav .ui-icon{width:20px;height:20px}
.gallery-nav.is-prev{left:12px}.gallery-nav.is-next{right:12px}
.gallery-nav:disabled{opacity:0;pointer-events:none}
.gallery-nav:focus-visible{outline:3px solid var(--color-focus-ring,#F2B92A);outline-offset:2px}
.gallery-count{position:absolute;left:12px;bottom:12px;z-index:4;padding:3px 10px;border-radius:var(--radius-full);background:rgba(18,24,51,.72);color:#fff;font-family:var(--font-code);font-size:12px;line-height:18px;font-weight:600}
.gallery-dots{position:absolute;left:0;right:0;bottom:14px;z-index:4;display:none;justify-content:center;gap:6px}
.gallery-dot{width:8px;height:8px;padding:0;border:0;border-radius:var(--radius-full);background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.12);cursor:pointer}
.gallery-dot.is-active{width:20px;background:#fff}
.gallery-thumbs-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;padding:12px;border-top:1px solid var(--color-border-default);background:var(--color-bg-surface)}
.gallery-thumb-btn{flex:0 0 72px;height:72px;padding:0;border:2px solid transparent;border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-sunken);cursor:pointer;opacity:.75;transition:opacity .15s,border-color .15s}
.gallery-thumb-btn img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-thumb-btn:hover{opacity:1}
.gallery-thumb-btn.is-active{opacity:1;border-color:var(--color-brand-primary)}
.gallery-thumb-btn:focus-visible{outline:3px solid var(--color-focus-ring,#F2B92A);outline-offset:2px}
@media (max-width:760px){
  .gallery-thumbs-row{display:none}
  .gallery-dots{display:flex}
  .gallery-count{bottom:auto;top:12px}
  .gallery-nav{width:34px;height:34px;margin-top:-17px}
}

/* Console: extra product photos */
.gallery-field{display:grid;gap:8px}
.gallery-label{font-size:14px;line-height:20px;font-weight:600;color:var(--color-text-primary)}
.gallery-label small{font-weight:500;color:var(--color-text-tertiary)}
.gallery-thumbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.gallery-thumb{position:relative;display:grid;gap:4px;padding:4px;border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-surface)}
.gallery-thumb img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:calc(var(--radius-md) - 4px);background:var(--color-bg-sunken)}
.gallery-remove{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--color-status-danger);cursor:pointer}
.gallery-remove input{width:14px;height:14px;margin:0;accent-color:var(--color-status-danger)}
.gallery-thumb:has(.gallery-remove input:checked) img{opacity:.35;filter:grayscale(1)}
.gallery-main{padding:3px 4px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-bg-surface);color:var(--color-brand-primary);font:inherit;font-size:11px;line-height:14px;font-weight:600;cursor:pointer}
.gallery-main:hover{border-color:var(--color-brand-primary)}
.gallery-thumb.is-new{border-style:dashed}
.gallery-new-tag{position:absolute;left:8px;top:8px;padding:1px 6px;border-radius:var(--radius-full);background:var(--color-accent-default);color:var(--color-tarum-900,#121833);font-size:10px;line-height:14px;font-weight:700}
.inline-note{margin:0;font-size:13px;line-height:18px;color:var(--color-text-tertiary)}
.gallery-cancel{padding:3px 4px;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);background:var(--color-bg-surface);color:var(--color-status-danger);font:inherit;font-size:11px;line-height:14px;font-weight:600;cursor:pointer}
.gallery-cancel:hover{border-color:var(--color-status-danger)}