/* =========================================================
   ASMATA Admin — theme tokens (brand-matched)
   Set data-theme on <html> (document.documentElement).
   ========================================================= */

   :root,
   [data-theme="light"] {
     /* Layout */
     --admin-sidebar-w: 240px;
     --admin-topbar-h: 56px;
     --radius: 14px;
   
     /* Brand core */
     --brand-green:       #1a5c2e;
     --brand-green-dark:  #0f3d1e;
     --brand-yellow:      #f2b91c;
     --brand-yellow-dark: #c9930a;
     --brand-blue:        #1668d6;
     --brand-ink:         #0d2416;
   
     /* Surfaces */
     --admin-bg:          #f7f5ee;
     --admin-surface:     #ffffff;
     --admin-surface-alt: #f2efe4;
   
     /* Borders */
     --admin-border:        rgba(26, 92, 46, 0.12);
     --admin-border-strong: rgba(26, 92, 46, 0.28);
   
     /* Brand / primary */
     --admin-primary:         #1a5c2e;
     --admin-primary-soft:    #e6f1e9;
     --admin-accent:          #f2b91c;
     --admin-accent-soft:     #fdf3d4;
     --admin-text-on-primary: #ffffff;
     --admin-text-on-accent:  #0d2416;
   
     /* Status */
     --admin-danger:       #b91c1c;
     --admin-danger-soft:  #fde2e2;
     --admin-danger-text:  #5c0000;
     --admin-success:      #1a5c2e;
     --admin-success-soft: #e6f1e9;
     --admin-warn:         #b26a00;
     --admin-warn-soft:    #fdf3d4;
   
     /* Text */
     --admin-text:       #0d2416;
     --admin-text-muted: #3d5546;
     --admin-text-faint: #7a8a7f;
   
     /* Overlays / scrollbar / focus */
     --admin-overlay:         rgba(13, 36, 22, 0.45);
     --admin-overlay-strong:  rgba(13, 36, 22, 0.55);
     --admin-overlay-modal:   rgba(13, 36, 22, 0.65);
     --admin-scrollbar-thumb: #c9cdc4;
     --admin-focus-ring:      #1668d6;
   
     /* Brand mark gradient */
     --admin-brand-mark-from: #1a5c2e;
     --admin-brand-mark-to:   #0f3d1e;
   
     /* Gate gradient */
     --admin-gate-from: #f7f5ee;
     --admin-gate-to:   #e6f1e9;
   
     /* Shadows */
     --admin-shadow-sm:    0 1px 2px rgba(13, 36, 22, 0.06);
     --admin-shadow-md:    0 6px 20px rgba(13, 36, 22, 0.08);
     --admin-shadow-modal: 0 20px 60px rgba(13, 36, 22, 0.25);
     --admin-shadow-toast: 0 10px 32px rgba(13, 36, 22, 0.18);
   }
   
   [data-theme="dark"] {
     --admin-bg:          #0a1410;
     --admin-surface:     #12201a;
     --admin-surface-alt: #16261f;
   
     --admin-border:        rgba(242, 185, 28, 0.14);
     --admin-border-strong: rgba(242, 185, 28, 0.30);
   
     --admin-primary:         #f2b91c;
     --admin-primary-soft:    #2a2410;
     --admin-accent:          #6bbf59;
     --admin-accent-soft:     #17301e;
     --admin-text-on-primary: #0d2416;
     --admin-text-on-accent:  #0d2416;
   
     --admin-danger:       #f87171;
     --admin-danger-soft:  #3b1414;
     --admin-danger-text:  #fecaca;
     --admin-success:      #6bbf59;
     --admin-success-soft: #17301e;
     --admin-warn:         #f2b91c;
     --admin-warn-soft:    #2a2410;
   
     --admin-text:       #f4f4f5;
     --admin-text-muted: #b0b8b2;
     --admin-text-faint: #7a8a7f;
   
     --admin-overlay:         rgba(0, 0, 0, 0.55);
     --admin-overlay-strong:  rgba(0, 0, 0, 0.70);
     --admin-overlay-modal:   rgba(0, 0, 0, 0.75);
     --admin-scrollbar-thumb: #3a3a3d;
     --admin-focus-ring:      #f2b91c;
   
     --admin-brand-mark-from: #f2b91c;
     --admin-brand-mark-to:   #c9930a;
   
     --admin-gate-from: #12201a;
     --admin-gate-to:   #0a1410;
   
     --admin-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.5);
     --admin-shadow-md:    0 6px 20px rgba(0, 0, 0, 0.6);
     --admin-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.7);
     --admin-shadow-toast: 0 10px 32px rgba(0, 0, 0, 0.6);
   }
   
   /* =========================================================
      Reset
      ========================================================= */
   
   *,
   *::before,
   *::after { box-sizing: border-box; }
   
   html,
   body {
     margin: 0;
     padding: 0;
     height: 100%;
     max-width: 100%;
     overflow: hidden;
     overscroll-behavior: none;
   }
   
   .admin-body {
     background: var(--admin-bg);
     color: var(--admin-text);
     font-family: "Plus Jakarta Sans", system-ui, sans-serif;
     -webkit-font-smoothing: antialiased;
   }
   
   ::-webkit-scrollbar { width: 10px; height: 10px; }
   ::-webkit-scrollbar-thumb {
     background: var(--admin-scrollbar-thumb);
     border-radius: 999px;
   }
   ::-webkit-scrollbar-track { background: transparent; }
   
   [data-theme="dark"] .sf-product-thumb img,
   [data-theme="dark"] .sf-pd-main img,
   [data-theme="dark"] .sf-pd-thumb img {
     filter: brightness(0.92);
   }
   
   /* =========================================================
      Gate / login
      ========================================================= */
   
   .gate {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(
       180deg,
       var(--admin-gate-from) 0%,
       var(--admin-gate-to) 100%
     );
     padding: 20px;
     z-index: 100;
   }
   .gate[hidden] { display: none; }
   
   .gate-card {
     width: 100%;
     max-width: 420px;
     background: var(--admin-surface);
     color: var(--admin-text);
     padding: 28px 24px;
     border-radius: 20px;
     box-shadow: var(--admin-shadow-md);
   }
   
   .gate-title {
     font-size: 24px;
     font-weight: 700;
     margin: 0 0 6px;
     color: var(--admin-primary);
     letter-spacing: -0.01em;
   }
   .gate-lede {
     font-size: 14px;
     color: var(--admin-text-muted);
     margin: 0 0 18px;
   }
   .gate-foot {
     font-size: 13px;
     color: var(--admin-text-faint);
     text-align: center;
     margin: 18px 0 0;
   }
   .gate-foot a { color: var(--admin-primary); text-decoration: none; }
   .gate-foot a:hover { text-decoration: underline; }
   
   .spinner-lg {
     width: 36px;
     height: 36px;
     border: 3px solid var(--admin-accent-soft);
     border-top-color: var(--admin-accent);
     border-radius: 999px;
     animation: spin 800ms linear infinite;
     margin: 0 auto 16px;
   }
   .gate-card > p {
     text-align: center;
     color: var(--admin-text-muted);
     font-size: 14px;
     margin: 0;
   }
   
   /* =========================================================
      Form fields
      ========================================================= */
   
   .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
   .field label { font-size: 12px; font-weight: 600; color: var(--admin-text); }
   .field-error { font-size: 12px; color: var(--admin-danger); min-height: 14px; }
   
   .input-wrap { position: relative; display: flex; align-items: center; }
   .input-wrap .material-symbols-outlined {
     position: absolute;
     left: 12px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 20px;
     color: var(--admin-text-faint);
     pointer-events: none;
   }
   
   .input {
     width: 100%;
     padding: 12px 14px 12px 40px;
     font-size: 14px;
     color: var(--admin-text);
     background: var(--admin-surface-alt);
     border: 1px solid transparent;
     border-radius: 12px;
     outline: none;
     transition: background-color 160ms, border-color 160ms, box-shadow 160ms;
   }
   .input:focus {
     background: var(--admin-surface);
     border-color: var(--admin-focus-ring);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-focus-ring) 15%, transparent);
   }
   .input[aria-invalid="true"] {
     border-color: var(--admin-danger);
     background: var(--admin-danger-soft);
   }
   .input::placeholder { color: var(--admin-text-faint); }
   
   .input-toggle {
     position: absolute;
     right: 8px;
     top: 50%;
     transform: translateY(-50%);
     width: 32px;
     height: 32px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border: 0;
     background: transparent;
     color: var(--admin-text-faint);
     cursor: pointer;
     border-radius: 8px;
   }
   .input-toggle:hover { color: var(--admin-primary); }
   
   .btn-block {
     width: 100%;
     padding: 12px 16px;
     font-size: 15px;
     font-weight: 600;
     border-radius: 12px;
     border: 0;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
   }
   .btn-block-primary {
     background: var(--admin-primary);
     color: var(--admin-text-on-primary);
   }
   .btn-block-primary:hover:not(:disabled) {
     background: var(--admin-accent);
     color: var(--admin-text-on-accent);
   }
   .btn-block:disabled { opacity: 0.65; cursor: not-allowed; }
   
   .spinner {
     width: 16px;
     height: 16px;
     border: 2px solid color-mix(in srgb, var(--admin-text-on-primary) 50%, transparent);
     border-top-color: var(--admin-text-on-primary);
     border-radius: 999px;
     animation: spin 700ms linear infinite;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   /* =========================================================
      Alerts
      ========================================================= */
   
   .alert {
     display: flex;
     gap: 8px;
     align-items: flex-start;
     padding: 10px 12px;
     border-radius: 12px;
     font-size: 13px;
     line-height: 1.4;
     margin-bottom: 12px;
   }
   .alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
   .alert-error { background: var(--admin-danger-soft); color: var(--admin-danger-text); }
   .alert-success { background: var(--admin-success-soft); color: var(--admin-success); }
   .alert-info { background: var(--admin-accent-soft); color: var(--admin-text-on-accent); }
   .alert[hidden] { display: none; }
   
   /* =========================================================
      Topbar
      ========================================================= */
   
   .admin-topbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: var(--admin-topbar-h);
     z-index: 50;
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 0 12px;
     background: color-mix(in srgb, var(--admin-surface) 94%, transparent);
     border-bottom: 1px solid var(--admin-border);
     color: var(--admin-text);
   }
   @media (min-width: 1024px) {
     .admin-topbar { padding: 0 20px; }
   }
   @media (prefers-reduced-motion: no-preference) {
     .admin-topbar {
       backdrop-filter: saturate(180%) blur(12px);
       -webkit-backdrop-filter: saturate(180%) blur(12px);
     }
   }
   
   .admin-topbar-menu {
     width: 36px;
     height: 36px;
     border: 0;
     background: transparent;
     border-radius: 8px;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--admin-text-muted);
     flex-shrink: 0;
   }
   .admin-topbar-menu:hover {
     background: var(--admin-primary-soft);
     color: var(--admin-primary);
   }
   @media (min-width: 1024px) {
     .admin-topbar-menu { display: none; }
   }
   
   .admin-topbar-brand {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     color: var(--admin-primary);
     flex-shrink: 0;
   }
   .admin-topbar-brand-mark {
     width: 30px;
     height: 30px;
     border-radius: 8px;
     background: linear-gradient(
       135deg,
       var(--admin-brand-mark-from) 0%,
       var(--admin-brand-mark-to) 100%
     );
     color: #ffffff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
   [data-theme="dark"] .admin-topbar-brand-mark { color: #0d2416; }
   .admin-topbar-brand-mark .material-symbols-outlined { font-size: 18px; }
   .admin-topbar-brand-name {
     display: flex;
     flex-direction: column;
     line-height: 1.1;
   }
   .admin-topbar-brand-name strong {
     font-size: 14px;
     color: var(--admin-text);
   }
   .admin-topbar-brand-name span {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--admin-accent);
   }
   
   .admin-topbar-actions {
     margin-left: auto;
     display: flex;
     gap: 4px;
   }
   .admin-topbar-icon {
     width: 36px;
     height: 36px;
     border-radius: 8px;
     border: 0;
     background: transparent;
     color: var(--admin-text-muted);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
   }
   .admin-topbar-icon:hover {
     background: var(--admin-primary-soft);
     color: var(--admin-primary);
   }
   .admin-topbar-icon .material-symbols-outlined { font-size: 20px; }
   
   .admin-brand {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     color: var(--admin-primary);
   }
   .admin-brand-mark {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     border-radius: 10px;
     background: linear-gradient(
       135deg,
       var(--admin-brand-mark-from) 0%,
       var(--admin-brand-mark-to) 100%
     );
     color: #ffffff;
   }
   [data-theme="dark"] .admin-brand-mark { color: #0d2416; }
   .admin-brand-name {
     display: flex;
     flex-direction: column;
     line-height: 1.1;
   }
   .admin-brand-name strong { font-size: 14px; color: var(--admin-text); }
   .admin-brand-name span {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--admin-accent);
   }
   
   .icon-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 10px;
     border: 0;
     background: transparent;
     color: var(--admin-text-muted);
     cursor: pointer;
   }
   .icon-btn:hover {
     background: var(--admin-primary-soft);
     color: var(--admin-primary);
   }
   
   /* =========================================================
      Shell
      ========================================================= */
   
   .admin-shell {
     display: flex;
     height: 100vh;
     height: 100dvh;
     padding-top: var(--admin-topbar-h);
     overflow: hidden;
   }
   
   /* =========================================================
      Sidebar
      ========================================================= */
   
   .admin-sidebar {
     position: fixed;
     top: var(--admin-topbar-h);
     bottom: 0;
     left: 0;
     width: min(82vw, 320px);
     max-width: 320px;
     background: var(--admin-surface);
     border-right: 1px solid var(--admin-border);
     transform: translateX(-105%);
     transition: transform 220ms ease;
     will-change: transform;
     z-index: 60;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
     overscroll-behavior: contain;
   }
   .admin-sidebar.open { transform: translateX(0); }
   
   @media (min-width: 1024px) {
     .admin-sidebar {
       position: static;
       top: auto;
       transform: none;
       width: var(--admin-sidebar-w);
       max-width: var(--admin-sidebar-w);
       flex-shrink: 0;
       z-index: 1;
       will-change: auto;
     }
   }
   
   .admin-sidebar-nav {
     padding: 12px 8px;
     display: flex;
     flex-direction: column;
     gap: 2px;
     flex: 1;
   }
   
   .admin-sidebar-footer {
     padding: 12px;
     border-top: 1px solid var(--admin-border);
     margin-top: auto;
   }
   .admin-sidebar-user {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 6px;
   }
   .admin-sidebar-user-avatar {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     background: var(--admin-primary);
     color: var(--admin-text-on-primary);
     font-size: 13px;
     font-weight: 700;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   .admin-sidebar-user-info {
     display: flex;
     flex-direction: column;
     line-height: 1.2;
     min-width: 0;
   }
   .admin-sidebar-user-info strong {
     font-size: 13px;
     color: var(--admin-text);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .admin-sidebar-user-info span {
     font-size: 11px;
     color: var(--admin-text-faint);
     letter-spacing: 0.03em;
   }
   
   /* =========================================================
      Backdrop
      ========================================================= */
   
   .admin-backdrop,
   .sidebar-backdrop {
     position: fixed;
     inset: var(--admin-topbar-h) 0 0 0;
     background: var(--admin-overlay);
     z-index: 55;
     backdrop-filter: blur(2px);
   }
   .sidebar-backdrop { z-index: 45; }
   .admin-backdrop[hidden],
   .sidebar-backdrop[hidden] { display: none; }
   @media (min-width: 1024px) {
     .admin-backdrop,
     .sidebar-backdrop { display: none !important; }
   }
   
   /* =========================================================
      Main
      ========================================================= */
   
   .admin-main {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     overscroll-behavior: contain;
     outline: none;
   }
   
   .admin-content {
     max-width: 1400px;
     width: 100%;
     margin: 0 auto;
     padding: 24px 16px 80px;
     color: var(--admin-text);
   }
   @media (min-width: 768px) { .admin-content { padding: 32px 24px 96px; } }
   @media (min-width: 1024px) { .admin-content { padding: 32px 32px 96px; } }
   
   /* =========================================================
      Sidebar nav items
      ========================================================= */
   
   .admin-nav-group-label {
     padding: 12px 12px 4px;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--admin-text-faint);
   }
   .admin-nav-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 9px 12px;
     border-radius: 8px;
     color: var(--admin-text);
     font-size: 14px;
     font-weight: 500;
     text-decoration: none;
     transition: background-color 120ms, color 120ms;
   }
   .admin-nav-item:hover { background: var(--admin-primary-soft); }
   .admin-nav-item .material-symbols-outlined {
     font-size: 20px;
     color: var(--admin-text-muted);
     flex-shrink: 0;
   }
   .admin-nav-item:hover .material-symbols-outlined { color: var(--admin-primary); }
   .admin-nav-item.active {
     background: var(--admin-primary);
     color: var(--admin-text-on-primary);
   }
   .admin-nav-item.active .material-symbols-outlined {
     color: var(--admin-text-on-primary);
   }
   
   .sidebar-head { padding: 16px 16px 6px; }
   .sidebar-title {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--admin-text-faint);
   }
   .sidebar-nav {
     padding: 6px 8px 16px;
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
   
   .nav-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
     border-radius: 10px;
     color: var(--admin-text);
     font-size: 14px;
     font-weight: 500;
     text-decoration: none;
     cursor: pointer;
     border: 0;
     background: transparent;
     width: 100%;
     text-align: left;
   }
   .nav-item:hover { background: var(--admin-primary-soft); }
   .nav-item.active {
     background: var(--admin-primary);
     color: var(--admin-text-on-primary);
   }
   .nav-item.active .material-symbols-outlined {
     color: var(--admin-text-on-primary);
   }
   .nav-item .material-symbols-outlined {
     font-size: 20px;
     color: var(--admin-text-muted);
   }
   .nav-item .nav-badge {
     margin-left: auto;
     font-size: 10px;
     padding: 2px 6px;
     background: var(--admin-accent-soft);
     color: var(--admin-text-on-accent);
     border-radius: 999px;
     font-weight: 700;
   }
   .nav-item.active .nav-badge {
     background: color-mix(in srgb, var(--admin-text-on-primary) 20%, transparent);
     color: var(--admin-text-on-primary);
   }
   
   .sidebar-foot {
     margin-top: auto;
     padding: 12px;
     border-top: 1px solid var(--admin-border);
   }
   .sidebar-user { display: flex; gap: 10px; align-items: center; }
   .avatar {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: var(--admin-primary);
     color: var(--admin-text-on-primary);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 13px;
   }
   .sidebar-user-info {
     display: flex;
     flex-direction: column;
     line-height: 1.2;
     min-width: 0;
   }
   .sidebar-user-info strong {
     font-size: 13px;
     color: var(--admin-text);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .sidebar-user-info span {
     font-size: 11px;
     color: var(--admin-text-faint);
     letter-spacing: 0.04em;
   }
   
   /* =========================================================
      Page head
      ========================================================= */
   
   .page-head {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-bottom: 20px;
   }
   @media (min-width: 768px) {
     .page-head {
       flex-direction: row;
       align-items: flex-end;
       justify-content: space-between;
     }
   }
   .page-title {
     font-size: clamp(20px, 3.6vw, 26px);
     font-weight: 700;
     color: var(--admin-primary);
     margin: 0 0 4px;
     letter-spacing: -0.01em;
   }
   .page-lede {
     font-size: 14px;
     color: var(--admin-text-muted);
     margin: 0;
   }
   
   /* =========================================================
      Buttons
      ========================================================= */
   
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 10px 14px;
     font-size: 13px;
     font-weight: 600;
     border-radius: 10px;
     border: 0;
     cursor: pointer;
     text-decoration: none;
     transition: background-color 160ms, transform 120ms;
     font-family: inherit;
     color: var(--admin-text);
   }
   .btn:active { transform: scale(0.98); }
   .btn-sm { padding: 7px 10px; font-size: 12px; }
   
   .btn-primary {
     background: var(--admin-primary);
     color: var(--admin-text-on-primary);
   }
   .btn-primary:hover:not(:disabled) {
     background: var(--admin-accent);
     color: var(--admin-text-on-accent);
   }
   
   .btn-secondary {
     background: var(--admin-primary-soft);
     color: var(--admin-primary);
   }
   .btn-secondary:hover:not(:disabled) { background: var(--admin-accent-soft); }
   
   .btn-danger {
     background: var(--admin-danger-soft);
     color: var(--admin-danger-text);
   }
   .btn-danger:hover:not(:disabled) {
     background: color-mix(in srgb, var(--admin-danger) 25%, var(--admin-danger-soft));
   }
   
   .btn:disabled { opacity: 0.55; cursor: not-allowed; }
   
   /* =========================================================
      Filters bar
      ========================================================= */
   
   .filters {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     background: var(--admin-surface);
     padding: 12px;
     border-radius: var(--radius);
     box-shadow: var(--admin-shadow-sm);
     margin-bottom: 16px;
   }
   .filters input,
   .filters select {
     font: inherit;
     font-size: 13px;
     padding: 9px 12px;
     border-radius: 10px;
     background: var(--admin-surface-alt);
     color: var(--admin-text);
     border: 1px solid transparent;
     outline: none;
     min-width: 0;
     font-family: inherit;
   }
   .filters input:focus,
   .filters select:focus {
     background: var(--admin-surface);
     border-color: var(--admin-accent);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-focus-ring) 15%, transparent);
   }
   .filters .grow { flex: 1 1 220px; }
   .filters-actions { display: flex; gap: 6px; margin-left: auto; }
   
   /* =========================================================
      Table
      ========================================================= */
   
   .table-wrap {
     background: var(--admin-surface);
     border-radius: var(--radius);
     box-shadow: var(--admin-shadow-sm);
     overflow: hidden;
   }
   .table-scroll {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     max-width: 100%;
   }
   .table-wrap,
   .table-scroll { max-width: 100%; }
   
   table.admin-table {
     width: 100%;
     border-collapse: collapse;
     min-width: 720px;
     font-size: 13px;
   }
   .admin-table thead th {
     text-align: left;
     padding: 12px 14px;
     background: var(--admin-surface-alt);
     font-weight: 700;
     font-size: 11px;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: var(--admin-text-faint);
     border-bottom: 1px solid var(--admin-border);
     white-space: nowrap;
   }
   .admin-table tbody td {
     padding: 12px 14px;
     border-bottom: 1px solid var(--admin-border);
     vertical-align: middle;
     color: var(--admin-text);
   }
   .admin-table tbody tr:hover { background: var(--admin-surface-alt); }
   .admin-table tbody tr:last-child td { border-bottom: 0; }
   
   .table-cell-title { font-weight: 600; }
   .table-cell-sub {
     font-size: 12px;
     color: var(--admin-text-faint);
     margin-top: 2px;
   }
   .table-actions {
     display: flex;
     gap: 6px;
     justify-content: flex-end;
     flex-wrap: wrap;
   }
   
   /* =========================================================
      Status chips
      ========================================================= */
   
   .chip {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 3px 8px;
     border-radius: 999px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     background: var(--admin-primary-soft);
     color: var(--admin-text-muted);
   }
   .chip-success { background: var(--admin-success-soft); color: var(--admin-success); }
   .chip-danger { background: var(--admin-danger-soft); color: var(--admin-danger-text); }
   .chip-warn { background: var(--admin-warn-soft); color: var(--admin-warn); }
   .chip-info { background: var(--admin-accent-soft); color: var(--admin-text-on-accent); }
   .chip-neutral {
     background: var(--admin-primary-soft);
     color: var(--admin-text-muted);
   }
   
   /* =========================================================
      Pagination
      ========================================================= */
   
   .pagination {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 12px 14px;
     font-size: 13px;
     border-top: 1px solid var(--admin-border);
     flex-wrap: wrap;
   }
   .pagination-info { color: var(--admin-text-faint); }
   .pagination-controls { display: flex; gap: 4px; }
   .page-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 32px;
     height: 32px;
     border-radius: 8px;
     border: 1px solid var(--admin-border);
     background: var(--admin-surface);
     color: var(--admin-text);
     font-size: 13px;
     cursor: pointer;
     font-family: inherit;
   }
   .page-btn:hover:not(:disabled) { background: var(--admin-primary-soft); }
   .page-btn[aria-current="true"] {
     background: var(--admin-primary);
     color: var(--admin-text-on-primary);
     border-color: var(--admin-primary);
   }
   .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
   
   /* =========================================================
      Dashboard
      ========================================================= */
   
   .stat-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
     margin-bottom: 20px;
   }
   @media (min-width: 640px) {
     .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
   }
   @media (min-width: 1024px) {
     .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
   }
   
   .stat-card {
     background: var(--admin-surface);
     padding: 14px 16px;
     border-radius: var(--radius);
     box-shadow: var(--admin-shadow-sm);
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   .stat-label {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: var(--admin-text-faint);
   }
   .stat-value {
     font-size: clamp(20px, 3.6vw, 26px);
     font-weight: 700;
     color: var(--admin-primary);
     letter-spacing: -0.01em;
   }
   .stat-sub { font-size: 12px; color: var(--admin-text-faint); }
   
   .activity-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px;
   }
   @media (min-width: 1024px) {
     .activity-grid { grid-template-columns: 1fr 1fr; }
   }
   
   .activity-card {
     background: var(--admin-surface);
     border-radius: var(--radius);
     box-shadow: var(--admin-shadow-sm);
     padding: 14px 16px;
   }
   .activity-title {
     font-size: 14px;
     font-weight: 700;
     color: var(--admin-primary);
     margin: 0 0 10px;
   }
   .activity-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   .activity-item {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     padding: 8px 0;
     border-bottom: 1px dashed var(--admin-border);
   }
   .activity-item:last-child { border-bottom: 0; }
   .activity-dot {
     width: 8px;
     height: 8px;
     border-radius: 999px;
     background: var(--admin-accent);
     margin-top: 6px;
     flex-shrink: 0;
   }
   .activity-body { flex: 1; min-width: 0; }
   .activity-body .line-1 {
     font-size: 13px;
     font-weight: 600;
     color: var(--admin-text);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .activity-body .line-2 {
     font-size: 11px;
     color: var(--admin-text-faint);
   }
   
   /* =========================================================
      Modal
      ========================================================= */
   
   .modal-host {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
     z-index: 200;
     background: var(--admin-overlay-modal);
   }
   .modal-host[hidden] { display: none; }
   .modal {
     background: var(--admin-surface);
     color: var(--admin-text);
     border-radius: var(--radius);
     max-width: 560px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: var(--admin-shadow-modal);
   }
   .modal-head { padding: 18px 20px 8px; }
   .modal-title {
     font-size: 18px;
     font-weight: 700;
     color: var(--admin-primary);
     margin: 0;
   }
   .modal-sub {
     font-size: 13px;
     color: var(--admin-text-faint);
     margin: 4px 0 0;
   }
   .modal-body { padding: 12px 20px; }
   .modal-foot {
     padding: 12px 20px 20px;
     display: flex;
     gap: 8px;
     justify-content: flex-end;
     flex-wrap: wrap;
   }
   
   /* =========================================================
      Toast
      ========================================================= */
   
   .toast-host {
     position: fixed;
     bottom: 16px;
     right: 16px;
     z-index: 300;
     display: flex;
     flex-direction: column;
     gap: 8px;
     pointer-events: none;
     max-width: min(360px, calc(100vw - 32px));
   }
   .toast {
     background: var(--admin-surface);
     color: var(--admin-text);
     border: 1px solid var(--admin-border);
     border-radius: 12px;
     padding: 12px 14px;
     box-shadow: var(--admin-shadow-toast);
     display: flex;
     gap: 10px;
     align-items: flex-start;
     font-size: 13px;
     pointer-events: auto;
     animation: toast-in 220ms ease;
   }
   .toast.success { border-left: 4px solid var(--admin-success); }
   .toast.error { border-left: 4px solid var(--admin-danger); }
   .toast.info { border-left: 4px solid var(--admin-accent); }
   .toast .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
   .toast.success .material-symbols-outlined { color: var(--admin-success); }
   .toast.error .material-symbols-outlined { color: var(--admin-danger); }
   .toast.info .material-symbols-outlined { color: var(--admin-accent); }
   .toast-body { flex: 1; min-width: 0; }
   .toast-title { font-weight: 600; margin: 0 0 2px; color: var(--admin-text); }
   .toast-msg { margin: 0; color: var(--admin-text-muted); }
   @keyframes toast-in {
     from { opacity: 0; transform: translateY(8px); }
     to { opacity: 1; transform: none; }
   }
   
   /* =========================================================
      Empty
      ========================================================= */
   
   .empty {
     padding: 40px 20px;
     text-align: center;
     color: var(--admin-text-faint);
   }
   .empty .material-symbols-outlined {
     font-size: 40px;
     color: var(--admin-border-strong);
   }
   .empty h3 {
     font-size: 15px;
     color: var(--admin-primary);
     margin: 8px 0 4px;
   }
   .empty p { font-size: 13px; margin: 0; }
   
   /* =========================================================
      Skeleton
      ========================================================= */
   
   .skeleton {
     background: linear-gradient(
       90deg,
       var(--admin-surface-alt) 0%,
       var(--admin-surface) 50%,
       var(--admin-surface-alt) 100%
     );
     background-size: 200% 100%;
     animation: shimmer 1.4s infinite;
     border-radius: 6px;
     height: 14px;
   }
   @keyframes shimmer {
     0% { background-position: 200% 0; }
     100% { background-position: -200% 0; }
   }
   
   /* =========================================================
      Utility
      ========================================================= */
   
   .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .mt-2 { margin-top: 8px; }
   .mt-4 { margin-top: 16px; }
   .mb-2 { margin-bottom: 8px; }
   .mb-4 { margin-bottom: 16px; }
   .row { display: flex; gap: 8px; flex-wrap: wrap; }
   .row-between {
     display: flex;
     gap: 8px;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
   }
   .muted { color: var(--admin-text-faint); font-size: 12px; }
   .mono {
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
     font-size: 12px;
     color: inherit;
   }
   .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;
   }
   
   /* =========================================================
      Focus
      ========================================================= */
   
   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   select:focus-visible,
   textarea:focus-visible {
     outline: 2px solid var(--admin-focus-ring);
     outline-offset: 2px;
     border-radius: 8px;
   }
   
   /* =========================================================
      Mobile safety
      ========================================================= */
   
   .admin-content,
   .admin-topbar {
     max-width: 100%;
     overflow-x: clip;
   }
   
   @media (max-width: 479px) {
     .filters > * {
       flex: 1 1 100%;
       min-width: 0;
     }
     .filters-actions {
       margin-left: 0;
       width: 100%;
     }
     .filters-actions .btn { width: 100%; }
   
     .modal-host { padding: 12px; }
     .modal-body,
     .modal-head,
     .modal-foot {
       padding-left: 14px;
       padding-right: 14px;
     }
   }
   
   .admin-content input,
   .admin-content select,
   .admin-content textarea,
   .admin-content button {
     max-width: 100%;
   }
   
   .page-head,
   .page-head > div { min-width: 0; }
   
   @media (min-width: 1024px) {
     #menu-toggle { display: none; }
   }
   
   /* =========================================================
   Announcement banner — token-driven, light + dark
   ========================================================= */

.asmata-announcement {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--sf-accent-soft, var(--admin-accent-soft, #fdf3d4));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border: 1px solid color-mix(
    in srgb,
    var(--sf-accent, var(--admin-accent, #f2b91c)) 30%,
    transparent
  );
  margin-bottom: 24px;
  overflow: hidden;
}

.asmata-announcement-image {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
}
.asmata-announcement-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asmata-announcement-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--sf-accent, var(--admin-accent, #f2b91c)) 25%,
    transparent
  );
  color: var(--brand-green-dark, var(--sf-success, var(--admin-success, #0f3d1e)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.asmata-announcement-icon .material-symbols-outlined { font-size: 20px; }

.asmata-announcement-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.asmata-announcement-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  color: inherit;
}
.asmata-announcement-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: inherit;
  opacity: 0.9;
}

.asmata-announcement-close {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  position: relative;
  z-index: 1;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.asmata-announcement-close:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.asmata-announcement-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px 4px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  opacity: 0.85;
  position: relative;
  z-index: 1;
  transition: opacity 120ms ease, background-color 120ms ease;
}
.asmata-announcement-more:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.asmata-announcement-more .material-symbols-outlined { font-size: 16px; }

/* ---------- Dark-mode overrides ---------- */

[data-theme="dark"] .asmata-announcement {
  background: color-mix(
    in srgb,
    var(--sf-accent, var(--admin-accent, #f2b91c)) 12%,
    var(--sf-bg-subtle, var(--admin-surface-alt, #16261f))
  );
  color: #f5e6b3;
  border-color: color-mix(
    in srgb,
    var(--sf-accent, var(--admin-accent, #f2b91c)) 35%,
    transparent
  );
}

[data-theme="dark"] .asmata-announcement-icon {
  background: color-mix(
    in srgb,
    var(--sf-accent, var(--admin-accent, #f2b91c)) 30%,
    transparent
  );
  color: var(--brand-yellow, #f2b91c);
}

/* =========================================================
   Manual payment modal — token-driven colors + dark mode
   ========================================================= */

/* Tabs container */
.pay-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
  border-radius: 10px;
  padding: 4px;
}

/* Individual tab */
.pay-tab {
  flex: 1;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.pay-tab:hover:not(:disabled):not(.pay-tab-active) {
  background: color-mix(in srgb, var(--sf-text, var(--admin-text, #0d2416)) 6%, transparent);
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.pay-tab-active {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  box-shadow: 0 1px 3px rgba(13, 36, 22, 0.08);
}
.pay-tab-disabled,
.pay-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Breakdown card */
.pay-breakdown {
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  line-height: 1.7;
}
.pay-breakdown-row {
  display: flex;
  justify-content: space-between;
}
.pay-breakdown-total {
  border-top: 1px solid var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
  padding-top: 8px;
  margin-top: 8px;
  font-weight: 600;
  color: var(--sf-text, var(--admin-text, #0d2416));
}

/* Account card */
.pay-account {
  border: 1px solid var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.pay-account-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  margin-bottom: 10px;
}
.pay-account-grid {
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.pay-account-number-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pay-account-number {
  flex: 1;
}
.pay-account-mono {
  font-size: 15px;
}
.pay-account-note {
  font-size: 12px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  margin: 10px 0 0;
}
.pay-account-skeleton {
  width: 100%;
  height: 120px;
}

/* Upload section */
.pay-help {
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
  margin: 0 0 10px;
}
.pay-input {
  padding-left: 14px;
}
.pay-textarea {
  min-height: 60px;
  resize: vertical;
}
.pay-optional {
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
  font-weight: 400;
}
.pay-hint {
  font-size: 12px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.pay-file {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: var(--sf-bg-subtle, var(--admin-surface-alt, #f2efe4));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border: 1px solid transparent;
}
.pay-file:focus {
  outline: 2px solid var(--focus-ring, var(--sf-accent, var(--admin-accent, #1668d6)));
  outline-offset: 2px;
}

/* Error text inside account card */
.pay-error {
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
  font-size: 13px;
  margin: 0;
}

/* Dark-mode refinements */
[data-theme="dark"] .pay-tab-active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .pay-account {
  background: var(--sf-surface, var(--admin-surface, #12201a));
}

.badge-sponsored {
  background: var(--brand-yellow, #f2b91c);
  color: var(--brand-ink, #0d2416);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* =========================================================
   Trader boosts — token-driven colors + dark mode
   ========================================================= */

/* Toolbar */
.boost-toolbar { margin-bottom: 16px; }
.boost-toolbar-actions { gap: 8px; }
.boost-toolbar-icon { font-size: 16px; }

/* Loading skeleton */
.boost-skeleton {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  border-radius: 14px;
}

/* Error / empty states */
.boost-error-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 14px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 40px 24px;
}
.boost-error-icon {
  font-size: 48px;
  color: var(--sf-danger, var(--admin-danger, #b91c1c));
}
.boost-error-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.boost-error-actions { margin-top: 16px; }

.boost-empty-state {
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
  border-radius: 14px;
  box-shadow: var(--sf-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 48px 24px;
  text-align: center;
}
.boost-empty-icon {
  font-size: 48px;
  color: var(--sf-text-faint, var(--admin-text-faint, #7a8a7f));
}
.boost-empty-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.boost-empty-msg { margin-top: 6px; }
.boost-empty-actions { margin-top: 16px; }

/* Section heading in the group list */
.boost-section-title {
  margin: 20px 0 10px;
  font-size: 14px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}

/* Boost card */
.boost-card {
  margin-bottom: 12px;
}
.boost-card-head { align-items: flex-start; }
.boost-card-head-text { flex: 1; min-width: 0; }
.boost-card-target {
  font-weight: 600;
  font-size: 15px;
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.boost-card-meta {
  margin-top: 4px;
  font-size: 13px;
}
.boost-card-actions {
  gap: 8px;
  margin-top: 12px;
}

/* Active boost stats */
.boost-active-stats {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
}
.boost-active-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--sf-success, var(--admin-success, #1a5c2e));
}
[data-theme="dark"] .boost-active-value {
  color: var(--sf-success, var(--admin-success, #6bbf59));
}
.boost-active-started {
  font-size: 13px;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
}

/* Pending review note */
.boost-pending-review-note {
  margin-top: 12px;
  font-size: 12px;
}

/* Pending payment panel */
.boost-pending-payment {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  background: var(--sf-warn-soft, var(--admin-warn-soft, #fdf3d4));
  color: var(--sf-warn, var(--admin-warn, #b26a00));
}
[data-theme="dark"] .boost-pending-payment {
  background: var(--sf-warn-soft, var(--admin-warn-soft, #2a2410));
  color: var(--brand-yellow, #f2b91c);
}
.boost-pending-payment-msg {
  margin: 6px 0 0;
  line-height: 1.5;
}
.boost-pending-payment-account {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
}

/* Rejected panel */
.boost-rejected {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  background: var(--sf-danger-soft, var(--admin-danger-soft, #fde2e2));
  color: var(--sf-danger-text, var(--admin-danger-text, #5c0000));
}
[data-theme="dark"] .boost-rejected {
  background: var(--sf-danger-soft, var(--admin-danger-soft, #3b1414));
  color: var(--sf-danger, var(--admin-danger, #f87171));
}
.boost-rejected-msg { margin: 6px 0 0; }

/* Modal — create boost */
.boost-input {
  padding-left: 14px;
}
.boost-field-hint {
  font-size: 12px;
}
.boost-price-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 10px;
  background: var(--sf-accent-soft, var(--admin-accent-soft, #fdf3d4));
  color: var(--sf-text, var(--admin-text, #0d2416));
}
[data-theme="dark"] .boost-price-panel {
  background: var(--sf-accent-soft, var(--admin-accent-soft, #2a2410));
  color: var(--brand-yellow, #f2b91c);
}
.boost-price-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.boost-price-value {
  font-weight: 700;
  font-size: 15px;
}
.boost-price-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

/* Modal — submit proof */
.boost-proof-intro {
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--sf-warn-soft, var(--admin-warn-soft, #fdf3d4));
  color: var(--sf-warn, var(--admin-warn, #b26a00));
}
[data-theme="dark"] .boost-proof-intro {
  background: var(--sf-warn-soft, var(--admin-warn-soft, #2a2410));
  color: var(--brand-yellow, #f2b91c);
}
.boost-proof-amount { font-weight: 600; }

.boost-proof-account {
  padding: 14px;
  border: 1px solid var(--sf-border, var(--admin-border, rgba(26, 92, 46, 0.12)));
  border-radius: 12px;
  margin-bottom: 14px;
  background: var(--sf-surface, var(--admin-surface, #ffffff));
  color: var(--sf-text, var(--admin-text, #0d2416));
}
.boost-proof-account-number {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.boost-proof-account-mono { font-size: 15px; }

.boost-file-input {
  padding-left: 14px;
  padding: 10px;
}

/* Help card at the bottom */
.boost-help-card {
  margin-top: 20px;
}
.boost-help-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sf-text-muted, var(--admin-text-muted, #3d5546));
}

/* =========================================================
   Admin boosts — token-driven colors + dark mode
   ========================================================= */

/* Revenue grid */
.ab-revenue-grid { margin-bottom: 16px; }

/* Boost card */
.ab-boost-card { margin-bottom: 12px; }
.ab-boost-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ab-boost-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--admin-surface-alt, #f2efe4);
  flex-shrink: 0;
}
.ab-boost-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-boost-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-boost-thumb-icon {
  color: var(--admin-text-faint, #7a8a7f);
}
.ab-boost-head-text {
  flex: 1;
  min-width: 0;
}
.ab-boost-target {
  font-weight: 600;
  font-size: 15px;
  color: var(--admin-text, #0d2416);
}
.ab-boost-scope {
  margin-top: 2px;
  font-size: 12px;
}

/* Meta grid (trader, amount) */
.ab-boost-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
}

/* Active stats (started, ends, clicks) */
.ab-boost-active-stats {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--admin-border, rgba(26, 92, 46, 0.12));
  font-size: 13px;
}

/* Pending review submission note */
.ab-boost-submitted {
  margin-top: 8px;
  font-size: 12px;
}

/* Rejected reason box */
.ab-boost-rejection {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  background: var(--admin-danger-soft, #fde2e2);
  color: var(--admin-danger-text, #5c0000);
}
[data-theme="dark"] .ab-boost-rejection {
  background: var(--admin-danger-soft, #3b1414);
  color: var(--admin-danger, #f87171);
}

/* Action row */
.ab-boost-actions {
  gap: 8px;
  margin-top: 12px;
}
.ab-action-icon { font-size: 14px; }

/* Loading skeleton */
.ab-skeleton {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  border-radius: 14px;
}

/* Empty state */
.ab-empty-state {
  background: var(--admin-surface, #ffffff);
  color: var(--admin-text, #0d2416);
  border-radius: 14px;
  box-shadow: var(--admin-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 48px 24px;
  text-align: center;
}
.ab-empty-icon {
  font-size: 48px;
  color: var(--admin-text-faint, #7a8a7f);
}
.ab-empty-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--admin-text, #0d2416);
}
.ab-empty-msg { margin-top: 6px; }

/* Error state */
.ab-error-state {
  background: var(--admin-surface, #ffffff);
  color: var(--admin-text, #0d2416);
  border-radius: 14px;
  box-shadow: var(--admin-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 48px 24px;
  text-align: center;
}
.ab-error-icon {
  font-size: 48px;
  color: var(--admin-danger, #b91c1c);
}
.ab-error-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--admin-text, #0d2416);
}
.ab-error-msg { margin-top: 6px; }
.ab-error-actions { margin-top: 16px; }

/* Pagination */
.ab-pagination { margin-top: 12px; }

/* Detail modal */
.ab-detail-skeleton {
  width: 100%;
  height: 200px;
  border-radius: 12px;
}
.ab-detail-error {
  color: var(--admin-danger, #b91c1c);
}
.ab-detail-grid {
  display: grid;
  gap: 10px;
  font-size: 13px;
  color: var(--admin-text, #0d2416);
}
.ab-detail-paidto {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  background: var(--admin-primary-soft, #e6f1e9);
  color: var(--admin-text, #0d2416);
}
[data-theme="dark"] .ab-detail-paidto {
  background: var(--admin-primary-soft, #2a2410);
  color: var(--admin-text, #f4f4f5);
}
.ab-detail-paidto-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-text-faint, #7a8a7f);
  margin-bottom: 6px;
}

.ab-detail-screenshot-wrap {
  margin-top: 14px;
}
.ab-detail-screenshot-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--admin-text, #0d2416);
}
.ab-detail-screenshot {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--admin-border, rgba(26, 92, 46, 0.12));
}

/* Reject modal */
.ab-reject-intro {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--admin-text-muted, #3d5546);
  line-height: 1.5;
}
.ab-reject-textarea {
  padding-left: 14px;
  min-height: 80px;
  resize: vertical;
}

/* Trader shop share page */
.share-page {
  max-width: 720px;
}

.share-url-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.share-url-row input {
  flex: 1;
  min-width: 0;
}

.share-qr-wrap {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: var(--admin-surface-alt);
  border-radius: 12px;
}

.share-qr-wrap canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.share-caption {
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--admin-surface-alt);
}

.share-caption-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.share-caption-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-text-faint);
}

.share-caption-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--admin-text);
}

/* Reuse the product share modal styles inside the trader panel */
.pd-share-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 480px) {
  .pd-share-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pd-share-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: var(--admin-surface-alt);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: var(--admin-text);
  font-size: 12px;
  font-family: inherit;
  transition: background-color 120ms, border-color 120ms;
}

.pd-share-target:hover {
  background: var(--admin-primary-soft);
  border-color: var(--admin-border-strong);
}

.pd-share-target .material-symbols-outlined {
  font-size: 24px;
  color: var(--brand-green, #1a5c2e);
}

[data-theme="dark"] .pd-share-target .material-symbols-outlined {
  color: var(--brand-yellow, #f2b91c);
}

/* SVG icons inside share targets */
.pd-share-target svg {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--brand-green, #1a5c2e);
  transition: color 120ms ease, transform 120ms ease;
}

[data-theme="dark"] .pd-share-target svg {
  color: var(--brand-yellow, #f2b91c);
}

/* Lift the icon slightly on hover for a tactile feel */
.pd-share-target:hover svg {
  transform: translateY(-1px);
}

/* Brand-accurate hover colors.
   The parent already has hover styling; these override the icon color
   on hover to match each platform. */
.pd-share-target[aria-label*="WhatsApp"]:hover svg {
  color: #25D366;
}
.pd-share-target[aria-label*="Twitter"]:hover svg {
  color: #000000;
}
[data-theme="dark"] .pd-share-target[aria-label*="Twitter"]:hover svg {
  color: #ffffff;
}
.pd-share-target[aria-label*="Facebook"]:hover svg {
  color: #1877F2;
}
.pd-share-target[aria-label*="Telegram"]:hover svg {
  color: #229ED9;
}

/* =========================================================
   Delivery detail — token-driven colors + dark mode
   ========================================================= */

/* Pickup card */
.dd-pickup-card { margin-bottom: 16px; }
.dd-pickup-shop { flex: 1; min-width: 0; }
.dd-pickup-shop-name {
  font-weight: 600;
  color: var(--admin-text, #0d2416);
}
.dd-pickup-items {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--admin-text-muted, #3d5546);
}

/* =========================================================
   Delivery — Customer card (Deliver to)
   ========================================================= */

   .dd-customer-card {
    background: var(--admin-surface, #ffffff);
    color: var(--admin-text, #0d2416);
    border: 1px solid var(--admin-border, rgba(26, 92, 46, 0.12));
    border-radius: 14px;
    box-shadow: var(--admin-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
    padding: 16px;
    margin-bottom: 16px;
  }
  
  [data-theme="dark"] .dd-customer-card {
    background: var(--admin-surface, #12201a);
    color: var(--admin-text, #f4f4f5);
    border-color: var(--admin-border, rgba(242, 185, 28, 0.14));
    box-shadow: var(--admin-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.5));
  }
  
  /* Address block inside the card */
  .dd-customer-card .delivery-address {
    background: transparent;
    color: inherit;
    font-size: 13px;
    line-height: 1.55;
  }
  
  /* Address label ("Home", "Office", etc.) */
  .dd-customer-card .delivery-address .title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--admin-text-faint, #7a8a7f);
    margin-bottom: 4px;
  }
  
  /* Bold lines inside the address (full name) */
  .dd-customer-card .delivery-address strong {
    color: var(--admin-text, #0d2416);
    font-weight: 600;
  }
  
  /* Address body lines (street, city, state) */
  .dd-customer-address {
    margin-top: 6px;
    color: var(--admin-text-muted, #3d5546);
  }
  
  /* Instructions block */
  .dd-customer-instructions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--admin-border, rgba(26, 92, 46, 0.12));
    color: var(--admin-text-muted, #3d5546);
  }
  .dd-customer-instructions strong {
    color: var(--admin-text, #0d2416);
  }
  
  /* Actions row */
  .dd-customer-actions {
    gap: 8px;
    margin-top: 10px;
  }
  .dd-action-icon { font-size: 16px; }
  .dd-action-icon-lg { font-size: 20px; }
  
  /* Dark mode: reinforce the token values in case the parent card overrides */
  [data-theme="dark"] .dd-customer-card .delivery-address {
    color: var(--admin-text, #f4f4f5);
  }
  [data-theme="dark"] .dd-customer-card .delivery-address strong {
    color: var(--admin-text, #f4f4f5);
  }
  [data-theme="dark"] .dd-customer-address {
    color: var(--admin-text-muted, #b0b8b2);
  }
  [data-theme="dark"] .dd-customer-instructions {
    color: var(--admin-text-muted, #b0b8b2);
    border-top-color: var(--admin-border, rgba(242, 185, 28, 0.14));
  }
  [data-theme="dark"] .dd-customer-instructions strong {
    color: var(--admin-text, #f4f4f5);
  }

  .admin-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  
  .admin-topbar-brand-logo {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
  }
  
  .admin-topbar-brand-role {
    font-size: 13px;
    font-weight: 500;
    color: var(--admin-text-muted, #6b7280);
    letter-spacing: 0.02em;
  }

  /* =========================================================
   KYT admin review — trust dimension grid
   ========================================================= */

.kyt-admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  .kyt-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Individual trust dimension panel */
.kyt-admin-dim {
  border: 1px solid var(--admin-border, rgba(26, 92, 46, 0.12));
  border-radius: 12px;
  overflow: hidden;
  background: var(--admin-surface, #ffffff);
}

.kyt-admin-dim-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--admin-surface-alt, #f2efe4);
  border-bottom: 1px solid var(--admin-border, rgba(26, 92, 46, 0.12));
}

.kyt-admin-dim-icon {
  font-size: 20px;
  color: var(--admin-primary, #1a5c2e);
  flex-shrink: 0;
  margin-top: 1px;
}

[data-theme="dark"] .kyt-admin-dim-icon {
  color: var(--brand-yellow, #f2b91c);
}

.kyt-admin-dim-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--admin-text, #0d2416);
}

.kyt-admin-dim-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--admin-text-muted, #3d5546);
  line-height: 1.5;
}

[data-theme="dark"] .kyt-admin-dim-meta {
  color: var(--admin-text-muted, #b0b8b2);
}

.kyt-admin-dim-body {
  padding: 12px;
}

/* Image thumbnails — clickable to open full image in a new tab */
.kyt-admin-img {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--admin-surface-alt, #f2efe4);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 120ms ease;
}

.kyt-admin-img:hover {
  border-color: var(--admin-primary, #1a5c2e);
}

[data-theme="dark"] .kyt-admin-img:hover {
  border-color: var(--brand-yellow, #f2b91c);
}

.kyt-admin-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kyt-admin-img-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: rgba(13, 36, 22, 0.72);
  backdrop-filter: blur(4px);
}

.kyt-admin-img-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--admin-danger-soft, #fde2e2);
  color: var(--admin-danger, #b91c1c);
  text-align: center;
  padding: 16px;
  font-size: 12px;
}

.kyt-admin-img-error .material-symbols-outlined {
  font-size: 28px;
}

/* Cross-check prompt */
.kyt-admin-crosscheck {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 10px;
  background: var(--admin-accent-soft, #fdf3d4);
  border: 1px solid color-mix(in srgb, var(--admin-accent, #f2b91c) 25%, transparent);
  font-size: 13px;
  color: var(--admin-text, #0d2416);
}

[data-theme="dark"] .kyt-admin-crosscheck {
  background: color-mix(in srgb, var(--brand-yellow, #f2b91c) 10%, var(--admin-surface, #12201a));
  color: var(--admin-text, #f4f4f5);
}

.kyt-admin-crosscheck .material-symbols-outlined {
  font-size: 22px;
  color: var(--admin-primary, #1a5c2e);
  flex-shrink: 0;
  margin-top: 1px;
}

[data-theme="dark"] .kyt-admin-crosscheck .material-symbols-outlined {
  color: var(--brand-yellow, #f2b91c);
}

/* Prior review info block */
.kyt-admin-prior strong {
  color: var(--admin-primary, #1a5c2e);
}

[data-theme="dark"] .kyt-admin-prior strong {
  color: var(--brand-yellow, #f2b91c);
}

/* Wider modal for KYT review — the default 560px is cramped */
#modal-host .modal:has(.kyt-admin-grid) {
  max-width: 880px;
  width: calc(100vw - 32px);
}

/* Success (delivered) card */
.dd-success-card {
  background: var(--admin-success-soft, #e6f1e9);
  border: 1px solid color-mix(
    in srgb,
    var(--admin-success, #1a5c2e) 40%,
    transparent
  );
}
.dd-status-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.dd-success-icon {
  color: var(--admin-success, #1a5c2e);
  font-size: 24px;
}
.dd-success-title {
  color: var(--admin-success, #1a5c2e);
}
[data-theme="dark"] .dd-success-card {
  background: var(--admin-success-soft, #17301e);
  border-color: color-mix(in srgb, var(--admin-success, #6bbf59) 35%, transparent);
}
[data-theme="dark"] .dd-success-icon,
[data-theme="dark"] .dd-success-title {
  color: var(--admin-success, #6bbf59);
}

/* Failed card */
.dd-failed-card {
  background: var(--admin-danger-soft, #fde2e2);
  border: 1px solid color-mix(
    in srgb,
    var(--admin-danger, #b91c1c) 40%,
    transparent
  );
}
.dd-failed-icon {
  color: var(--admin-danger, #b91c1c);
  font-size: 24px;
}
.dd-failed-title {
  color: var(--admin-danger, #b91c1c);
}
.dd-failed-msg {
  margin: 2px 0 0;
  color: var(--admin-danger-text, #5c0000);
}
.dd-failed-help { margin-top: 6px; }
[data-theme="dark"] .dd-failed-card {
  background: var(--admin-danger-soft, #3b1414);
  border-color: color-mix(in srgb, var(--admin-danger, #f87171) 35%, transparent);
}
[data-theme="dark"] .dd-failed-icon,
[data-theme="dark"] .dd-failed-title {
  color: var(--admin-danger, #f87171);
}
[data-theme="dark"] .dd-failed-msg {
  color: var(--admin-danger, #f87171);
}

/* Status time (below "Delivered") */
.dd-status-time { margin: 2px 0 0; }

/* Next step help */
.dd-next-help { margin: 0 0 12px; }

/* Back link */
.dd-back-wrap { margin-bottom: 16px; }
.dd-back-link { font-size: 13px; }
.dd-back-icon { font-size: 16px; }

/* Summary card */
.dd-summary-card { margin-bottom: 16px; }
.dd-order-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--admin-text, #0d2416);
}
.dd-order-status { margin-top: 2px; }

/* Empty state */
.dd-empty-state {
  background: var(--admin-surface, #ffffff);
  color: var(--admin-text, #0d2416);
  border-radius: 14px;
  box-shadow: var(--admin-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 48px 24px;
}
.dd-empty-icon {
  font-size: 48px;
  color: var(--admin-text-faint, #7a8a7f);
}
.dd-empty-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--admin-text, #0d2416);
}
.dd-empty-actions { margin-top: 12px; }

/* Error state */
.dd-error-state {
  background: var(--admin-surface, #ffffff);
  color: var(--admin-text, #0d2416);
  border-radius: 14px;
  box-shadow: var(--admin-shadow-sm, 0 1px 2px rgba(13, 36, 22, 0.06));
  padding: 48px 24px;
}
.dd-error-icon {
  font-size: 48px;
  color: var(--admin-danger, #b91c1c);
}
.dd-error-title {
  font-size: 18px;
  margin-top: 12px;
  color: var(--admin-text, #0d2416);
}

/* Loading skeleton */
.dd-skeleton {
  width: 100%;
  height: 200px;
  border-radius: 14px;
}

/* Failure modal */
.dd-fail-intro {
  font-size: 14px;
  color: var(--admin-text-muted, #3d5546);
  margin: 0 0 12px;
}
.dd-input { padding-left: 14px; }
   
   /* =========================================================
      Print
      ========================================================= */
   
   @media print {
     .admin-topbar,
     .admin-sidebar,
     .admin-backdrop,
     .sidebar-backdrop,
     .toast-host,
     .modal-host { display: none !important; }
   }