/* Samurai Bid — v3 Design System
   Premium / Editorial / Fast
   White canvas · Red accent · Tight typographic hierarchy
*/

/* ───── Tokens ───── */
:root{
  /* Color */
  --bg:#ffffff;
  --surface:#fafafa;
  --surface-2:#f4f4f5;
  --text:#0a0a0a;
  --text-2:#52525b;
  --text-3:#a1a1aa;
  --primary:#dc2626;
  --primary-dark:#b91c1c;
  --primary-tint:#fef2f2;
  --border:#e4e4e7;
  --border-strong:#0a0a0a;
  --success:#16a34a;
  --warning:#d97706;
  --info:#2563eb;

  /* Spacing (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* Radius */
  --r1:6px; --r2:10px; --r3:16px; --r4:24px;

  /* Shadow */
  --shadow-1:0 1px 2px rgba(0,0,0,.04);
  --shadow-2:0 2px 8px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-3:0 8px 24px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-red:0 8px 24px rgba(220,38,38,.18);

  /* Font */
  --font:'Noto Sans Thai','Inter','IBM Plex Sans Thai','Kanit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --fast:.15s var(--ease);
  --base:.24s var(--ease);

  /* Aliases (kept for pages using older naming — map to canonical tokens) */
  --primary-soft:var(--primary-tint);
  --bg-soft:var(--surface-2);
  --bg-card:var(--bg);
  --bg-elev:var(--surface);
  --text-muted:var(--text-2);
  --transition:var(--base);
}

/* ───── Reset ───── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:
  radial-gradient(circle at top left,rgba(220,38,38,.045),transparent 26%),
  linear-gradient(180deg,#fff 0%,#fcfcfc 46%,#f7f7f8 100%);
color:var(--text);line-height:1.55;font-size:15px;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
[hidden]{display:none!important}

/* ───── Layout ───── */
.wrap,.container{max-width:1100px;margin:0 auto;padding:0 28px;width:100%}
html,body{overflow-x:hidden;max-width:100vw}
.footer{max-width:1100px;margin:40px auto 20px;padding:16px 20px;text-align:center;color:var(--text-3);font-size:.82rem;border-top:1px solid var(--border)}

/* Page-ready loading — hide page content until JS sets body.ready */
body:not(.ready) .app-loading{display:flex!important}
.app-loading{display:none;position:fixed;inset:0;z-index:9999;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.app-loading .spin{width:36px;height:36px;border:3px solid #f3f4f6;border-top-color:#dc2626;border-radius:50%;animation:spin .8s linear infinite}
.app-loading .txt{color:#6b7280;font-size:.85rem;font-weight:500}
@keyframes spin{to{transform:rotate(360deg)}}
.stack>*+*{margin-top:var(--s4)}
.stack-lg>*+*{margin-top:var(--s6)}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.spread{flex:1}
.grid{display:grid;gap:var(--s4)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ───── Typography ───── */
.h1{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.h2{font-size:clamp(1.15rem,2.2vw,1.35rem);font-weight:700;letter-spacing:-.01em;color:var(--text)}
.h3{font-size:1rem;font-weight:700;color:var(--text)}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.num{font-variant-numeric:tabular-nums}
.tiny{font-size:.78rem;color:var(--text-2)}

/* ───── Topbar (desktop) ───── */
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--border)}
.topbar .inner{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:var(--s4)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800}
.brand img{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid var(--border);background:#fff}
.brand .b-title{display:flex;flex-direction:column;line-height:1.1}
.brand .b-title .n{font-size:1rem;letter-spacing:-.01em}
.brand .b-title .s{font-size:.64rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.15em;font-weight:600}
.nav{display:flex;gap:var(--s1);margin-left:var(--s4)}
.nav a{padding:8px 12px;border-radius:8px;color:var(--text-2);font-size:.9rem;font-weight:500;transition:var(--fast)}
.nav a:hover{background:var(--surface);color:var(--text)}
.nav a.active{color:var(--text);background:var(--surface-2);font-weight:600}
.nav a.active::after{content:'';display:block;height:2px;background:var(--primary);border-radius:2px;margin-top:4px}
.top-user{margin-left:auto;display:flex;align-items:center;gap:10px}
.top-user .chip{padding:6px 10px;background:var(--surface);border:1px solid var(--border);border-radius:999px;font-size:.8rem;font-weight:600;color:var(--text)}
.top-user .logout{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:transparent;font-size:.8rem;cursor:pointer;color:var(--text-2);transition:var(--fast)}
.top-user .logout:hover{border-color:var(--primary);color:var(--primary)}
.admin-shortcut{display:none;background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;font-weight:700;font-size:.78rem;padding:6px 12px;border-radius:8px;text-decoration:none;line-height:1.2;box-shadow:var(--shadow-red)}
.bell-btn{position:relative;background:transparent;border:none;cursor:pointer;font-size:1.25rem;padding:6px 8px;border-radius:10px;transition:var(--fast)}
.bell-btn:hover{background:var(--surface)}
.bell-badge{position:absolute;top:0;right:0;background:#dc2626;color:#fff;font-size:.6rem;font-weight:800;border-radius:999px;min-width:16px;height:16px;display:none;align-items:center;justify-content:center;padding:0 4px}
.rate-chip{background:linear-gradient(135deg,#fef2f2,#fff)!important;border-color:#fecaca!important;color:#dc2626!important;font-weight:700!important}
.bell-panel{display:none;position:absolute;top:60px;right:14px;width:340px;max-width:calc(100vw - 28px);max-height:70vh;overflow-y:auto;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.16);z-index:60}
.bell-panel-head{padding:12px 14px;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;align-items:center}
.bell-panel-head b{font-size:.92rem}
.bell-mark-all{font-size:.78rem;color:#dc2626;background:transparent;border:none;cursor:pointer;font-weight:700}
.bell-empty{padding:30px;text-align:center;color:#9ca3af;font-size:.85rem}
.bell-item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid #f3f4f6;text-decoration:none;color:#111;transition:var(--fast)}
.bell-item:hover{background:#fafafa}
.bell-item.unread{background:#fef2f2}
.bell-item .icon{font-size:1.35rem;flex:0 0 auto}
.bell-item .body{flex:1;min-width:0}
.bell-item .title{font-size:.86rem;line-height:1.3;margin-bottom:2px;font-weight:500}
.bell-item.unread .title{font-weight:700}
.bell-item .desc{color:#6b7280;font-size:.78rem;line-height:1.4}
.bell-item .ago{color:#9ca3af;font-size:.7rem;margin-top:4px}

/* ───── Bottom nav (mobile) ───── */
.botnav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);padding:6px 0 calc(env(safe-area-inset-bottom) + 6px);z-index:50}
.botnav .inner{display:grid;grid-template-columns:repeat(5,1fr);max-width:540px;margin:0 auto}
.botnav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;color:var(--text-3);font-size:.68rem;font-weight:600;transition:var(--fast)}
.botnav a .i{font-size:1.15rem;line-height:1;filter:grayscale(30%)}
.botnav a.active{color:var(--primary)}
.botnav a.active .i{filter:none}

/* ───── Page / Section ───── */
.page{padding-top:var(--s6);padding-bottom:var(--s16)}
.section-head{margin-bottom:var(--s4)}
.section-head .eyebrow{margin-bottom:var(--s1)}
.section-head .h2{margin-bottom:var(--s1)}
.page-shell{position:relative}
.page-shell::before{content:'';position:absolute;inset:0 0 auto 0;height:320px;background:
  radial-gradient(circle at 85% 10%,rgba(220,38,38,.11),transparent 28%),
  linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,0));
pointer-events:none}
.page-shell>*{position:relative;z-index:1}
.page-head{margin-bottom:var(--s6)}
.page-head .eyebrow{margin-bottom:var(--s2)}
.page-head .h1,.page-head h1{margin-bottom:var(--s2)}
.page-head .lead{max-width:720px;color:var(--text-2);font-size:.96rem;line-height:1.7}
.page-band{background:rgba(255,255,255,.72);border:1px solid rgba(228,228,231,.9);box-shadow:var(--shadow-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:calc(var(--r4) + 2px);padding:var(--s6)}
.page-band-dark{background:
  radial-gradient(circle at 88% 12%,rgba(220,38,38,.42),transparent 34%),
  linear-gradient(145deg,#17171c 0%,#0b0b0f 72%,#1b0d0d 100%);
color:#fff;border-color:rgba(255,255,255,.08);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.page-band-dark .eyebrow{color:#fecaca;text-shadow:0 1px 2px rgba(0,0,0,.28)}
.page-band-dark .h1,
.page-band-dark h1,
.page-band-dark .h2,
.page-band-dark h2,
.page-band-dark .h3,
.page-band-dark h3{color:#fff}
.page-band-dark .h1,
.page-band-dark h1{text-shadow:0 10px 28px rgba(0,0,0,.26)}
.page-band-dark .lead,.page-band-dark .muted,.page-band-dark .tiny{color:rgba(255,255,255,.88)}
.cluster{display:flex;flex-wrap:wrap;gap:10px}
.section-block{margin-bottom:var(--s6)}
.section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);margin-bottom:var(--s4)}
.section-title .eyebrow{margin-bottom:6px}
.section-title .lead,.section-title .muted{max-width:620px}
.section-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ───── Card ───── */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r3);padding:var(--s5)}
.card-tight{padding:var(--s4)}
.card-surface{background:var(--surface)}
.card-ghost{background:transparent;border:1px dashed var(--border)}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.card-link{display:block;transition:var(--base);position:relative;overflow:hidden}
.card-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:#d4d4d8}
.panel{background:rgba(255,255,255,.92);border:1px solid rgba(228,228,231,.95);border-radius:calc(var(--r3) + 2px);padding:var(--s5);box-shadow:var(--shadow-2)}
.panel-soft{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,250,.94))}
.panel-dark{background:linear-gradient(140deg,#18181b,#09090b);color:#fff;border-color:rgba(255,255,255,.08);box-shadow:0 14px 40px rgba(0,0,0,.18)}
.panel-dark .muted,.panel-dark .tiny,.panel-dark .lead{color:rgba(255,255,255,.7)}
.panel-accent{background:linear-gradient(135deg,#fef2f2,#fff);border-color:#fecaca}
.panel-outline{background:transparent;border:1px dashed var(--border)}
.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}
.panel-header .title{font-size:1.02rem;font-weight:800;letter-spacing:-.01em}
.panel-header .sub{font-size:.82rem;color:var(--text-3);margin-top:4px}
.card-stack{display:flex;flex-direction:column;gap:var(--s4)}

/* ───── Button ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:10px;font-weight:600;font-size:.92rem;line-height:1;cursor:pointer;border:1px solid transparent;transition:var(--fast);font-family:var(--font);white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-primary:active{transform:scale(.98)}
.btn-dark{background:var(--text);color:#fff}
.btn-dark:hover{background:#000}
.btn-outline{background:#fff;color:var(--text);border-color:var(--border)}
.btn-outline:hover{border-color:var(--text);background:var(--surface)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface);color:var(--text)}
.btn-danger{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-danger:hover{background:var(--primary);color:#fff}
.btn-block{width:100%}
.btn-lg{padding:14px 20px;font-size:1rem;border-radius:12px}
.btn-sm{padding:6px 10px;font-size:.82rem;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ───── Input ───── */
.input,input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{width:100%;padding:12px 14px;background:#fff;border:1px solid var(--border);border-radius:10px;font-size:15px;color:var(--text);transition:var(--fast)}
input:focus,select:focus,textarea:focus,.input:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.field{display:flex;flex-direction:column;gap:6px}
.field>label{font-size:.82rem;font-weight:600;color:var(--text-2)}
.field>.hint{font-size:.78rem;color:var(--text-3)}

/* ───── Pill / Badge / Status ───── */
.pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.pill-red{background:var(--primary-tint);color:var(--primary)}
.pill-dark{background:var(--text);color:#fff}
.pill-outline{background:transparent;border:1px solid var(--border);color:var(--text-2)}
.pill-gold{background:#fef3c7;color:#92400e}
.pill-green{background:#dcfce7;color:#166534}
.pill-blue{background:#dbeafe;color:#1d4ed8}

.status{display:inline-flex;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.status-draft,.status-pending{background:#f1f5f9;color:#475569}
.status-submitted,.status-pending_verification,.status-fetching{background:#dbeafe;color:#1d4ed8}
.status-quoted,.status-waiting_payment,.status-unpaid,.status-partially_paid{background:#fef3c7;color:#92400e}
.status-ordered,.status-paid,.status-delivered,.status-received_jp_warehouse{background:#dcfce7;color:#166534}
.status-cancelled,.status-rejected,.status-issue{background:#fee2e2;color:#991b1b}
.status-bidding{background:#fef3c7;color:#7c2d12;animation:bidPulse 1.6s ease-in-out infinite}
.status-over_bid{background:#fee2e2;color:#7f1d1d}
@keyframes bidPulse{0%,100%{opacity:1}50%{opacity:.65}}
.status-shipped_by_sea,.status-shipped_by_air,.status-waiting_consolidation{background:#e0e7ff;color:#3730a3}
.status-arrived_thailand,.status-preparing_delivery{background:#ccfbf1;color:#0f766e}

/* ───── KPI Stat ───── */
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--r3);padding:var(--s5);transition:var(--base);position:relative;overflow:hidden}
.stat:hover{border-color:#d4d4d8}
.stat .label{font-size:.72rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}
.stat .value{font-size:2.25rem;font-weight:800;letter-spacing:-.02em;margin-top:6px;line-height:1.1;color:var(--text)}
.stat .value.red{color:var(--primary)}
.stat .trail{font-size:.78rem;color:var(--text-2);margin-top:4px}
.stat.emphasis{background:var(--text);color:#fff;border-color:var(--text)}
.stat.emphasis .label{color:rgba(255,255,255,.6)}
.stat.emphasis .value{color:#fff}
.stat.emphasis .trail{color:rgba(255,255,255,.7)}

/* ───── Shortcut tile ───── */
.tile{background:#fff;border:1px solid var(--border);border-radius:var(--r3);padding:var(--s4);text-align:left;transition:var(--base);display:block;color:var(--text)}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--text)}
.tile .i{width:40px;height:40px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:10px;transition:var(--fast)}
.tile:hover .i{background:var(--primary-tint)}
.tile .t{font-weight:700;font-size:.94rem;margin-bottom:2px}
.tile .s{font-size:.78rem;color:var(--text-3)}

/* ───── Table ───── */
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th{text-align:left;padding:10px 12px;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);border-bottom:1px solid var(--border);background:var(--surface)}
.table td{padding:12px;border-bottom:1px solid var(--border);color:var(--text)}
.table tr:last-child td{border-bottom:0}
.table tr:hover td{background:var(--surface)}
.table-wrap{border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;overflow-x:auto;background:#fff}
.table-wrap.soft{background:rgba(255,255,255,.9);box-shadow:var(--shadow-1)}

/* ───── List / Data cards ───── */
.list-grid{display:grid;gap:var(--s3)}
.list-card{background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:var(--r3);padding:var(--s4);box-shadow:var(--shadow-1);transition:var(--base)}
.list-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:#d4d4d8}
.keyval{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.keyval .item{padding:12px;border-radius:12px;background:var(--surface);border:1px solid #ededee}
.keyval .k{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.keyval .v{margin-top:4px;font-size:.96rem;font-weight:800;color:var(--text)}
.notice{padding:14px 16px;border-radius:14px;border:1px solid transparent;font-size:.88rem;line-height:1.6}
.notice-warm{background:#fffbeb;border-color:#fde68a;color:#78350f}
.notice-danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.notice-info{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.empty-card{grid-column:1/-1;padding:40px 20px;border:1px dashed var(--border);border-radius:18px;background:rgba(255,255,255,.8);text-align:center;color:var(--text-3)}
.empty-card b{color:var(--text)}
.contact-cta{display:inline-block;margin-top:14px;padding:10px 18px;background:linear-gradient(135deg,#06c755,#059669);color:#fff;font-weight:700;text-decoration:none;border-radius:10px;font-size:.85rem}
.media-fallback{display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--text-3)}
.detail-hero{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.detail-product{padding:10px 12px;background:var(--bg-soft);border-radius:8px;margin-bottom:14px}
.detail-note{background:#fef3c7;color:#92400e;padding:10px 12px;border-radius:8px;margin-top:14px;font-size:.85rem}
.inline-metric{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.inline-metric .big{font-size:clamp(1.6rem,3vw,2.15rem);font-weight:900;letter-spacing:-.03em;line-height:1}
.inline-metric .small{font-size:.82rem;color:var(--text-3)}

/* ───── Product preview ───── */
.product{display:grid;grid-template-columns:180px 1fr;gap:var(--s4);align-items:flex-start}
.product .thumb{width:100%;height:180px;background:var(--surface-2);border-radius:12px;object-fit:cover;border:1px solid var(--border)}
.product .title{font-weight:700;font-size:1.05rem;line-height:1.3;color:var(--text);margin-bottom:4px}
.product .price{font-size:1.75rem;font-weight:800;color:var(--primary);letter-spacing:-.02em;line-height:1.1}
.product .meta{font-size:.82rem;color:var(--text-2);margin-top:4px}
.seller{margin-top:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-size:.85rem}

/* ───── Summary panel ───── */
.summary{background:linear-gradient(160deg,#1f2937,#111827);color:#fff;border-radius:var(--r3);padding:var(--s5);margin-top:var(--s4);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.summary .line{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:.92rem;color:rgba(255,255,255,.92)}
.summary .line b{color:#fff;font-weight:700}
.summary .total{border-top:1px solid rgba(255,255,255,.22);margin-top:var(--s2);padding-top:var(--s3);font-size:1.1rem;font-weight:800;color:#fff}
.summary .total b{color:#fca5a5;font-size:1.5rem;font-weight:900}
.summary .note{font-size:.72rem;color:rgba(255,255,255,.7);margin-top:var(--s2)}

/* ───── Toast ───── */
#toast-container{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
@media (min-width:768px){#toast-container{bottom:20px}}
.toast{pointer-events:auto;background:var(--text);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow-3);font-size:.88rem;max-width:360px;animation:slideUp .25s var(--ease)}
.toast.success{background:var(--success)}
.toast.error{background:var(--primary)}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

/* ───── Dialog ───── */
.dialog-backdrop{position:fixed;inset:0;background:rgba(10,10,10,.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;animation:fade .2s var(--ease)}
.dialog{background:#fff;border-radius:var(--r3);padding:var(--s6);max-width:420px;width:100%;box-shadow:var(--shadow-3);animation:pop .25s var(--ease)}
.dialog h3{font-size:1.1rem;margin-bottom:8px}
.dialog .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--s5)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:none;opacity:1}}

/* ───── Skeleton ───── */
.skel{background:linear-gradient(90deg,#ececec 0%,#f5f5f5 50%,#ececec 100%);background-size:200% 100%;animation:shine 1.2s infinite;border-radius:8px}
@keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ───── Empty state ───── */
.empty{text-align:center;padding:var(--s10) var(--s4);color:var(--text-3)}
.empty .i{font-size:2rem;margin-bottom:var(--s2)}

/* ───── Hero login ───── */
.auth-split{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-side{background:var(--text);color:#fff;padding:var(--s12) var(--s10);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-side::before{content:'侍';position:absolute;right:-40px;bottom:-80px;font-size:380px;font-weight:900;color:rgba(255,255,255,.05);line-height:1;pointer-events:none}
.auth-side .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem}
.auth-side .logo img{width:36px;height:36px;border-radius:8px;background:#fff;padding:2px}
.auth-side h1{font-size:2.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-bottom:var(--s3)}
.auth-side p{color:rgba(255,255,255,.86);max-width:420px}
.auth-side::before{color:rgba(255,255,255,.07)}
.auth-side .dot{width:6px;height:6px;background:var(--primary);border-radius:50%;display:inline-block}
.auth-form{display:flex;align-items:center;justify-content:center;padding:var(--s8)}
.auth-form .inner{width:100%;max-width:380px}
.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--border);margin-bottom:var(--s5)}
.tabs button{flex:1;padding:12px;background:none;border:none;cursor:pointer;font-weight:600;font-size:.88rem;color:var(--text-3);border-bottom:2px solid transparent;transition:var(--fast)}
.tabs button.active{color:var(--text);border-bottom-color:var(--primary)}

/* ───── Hero banner (dashboard) ───── */
.hero{padding:var(--s8) 0 var(--s6);border-bottom:1px solid var(--border);margin-bottom:var(--s6)}
.hero .eyebrow{margin-bottom:6px}
.hero h1{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:var(--s1)}
.hero h1 .name{background:linear-gradient(90deg,var(--primary),var(--text));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{color:var(--text-2);font-size:1rem}

/* ───── Sticky submit bar ───── */
.bar-bottom{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);padding:12px 20px calc(env(safe-area-inset-bottom) + 12px);z-index:45;box-shadow:0 -4px 24px rgba(0,0,0,.06)}
.bar-bottom .inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:var(--s3)}

/* ───── Responsive ───── */
@media (max-width:860px){
  .auth-split{grid-template-columns:1fr}
  .auth-side{padding:var(--s8) var(--s6);min-height:auto}
  .auth-side h1{font-size:1.75rem}
  .auth-side::before{font-size:260px;bottom:-60px}
}
@media (max-width:768px){
  body{font-size:14px;padding-bottom:72px}
  .nav{display:none}
  .topbar .inner{padding:10px 16px;gap:8px}
  .brand img{width:28px;height:28px}
  .brand .b-title .n{font-size:.88rem}
  .brand .b-title .s{display:none}
  .top-user{gap:6px}
  .top-user .chip{padding:4px 8px;font-size:.68rem;white-space:nowrap}
  .top-user .chip#rate-chip{display:none}
  .admin-shortcut{padding:5px 10px;font-size:.72rem}
  .top-user .logout{padding:5px 9px;font-size:.72rem}
  .botnav{display:block}
  .wrap,.container{padding:0 24px}
  .page{padding-top:var(--s4);padding-bottom:var(--s10)}
  .page-head,.section-block{margin-bottom:var(--s5)}
  .page-band,.panel{padding:18px;border-radius:20px}
  .page-shell::before{height:220px;background:
    radial-gradient(circle at 80% 8%,rgba(220,38,38,.13),transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,0))}
  .hero{padding:var(--s5) 0 var(--s4)}
  .hero h1{font-size:1.5rem}
  .card{padding:var(--s4);border-radius:12px}
  .stat{padding:var(--s4)}
  .stat .value{font-size:1.55rem}
  .stat .label{font-size:.72rem}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid-2{grid-template-columns:1fr;gap:10px}
  .tile{padding:var(--s3)}
  .tile .i{width:36px;height:36px;font-size:1rem;margin-bottom:8px}
  .tile .t{font-size:.88rem}
  .tile .s{font-size:.72rem}
  .product{grid-template-columns:110px 1fr;gap:var(--s3)}
  .product .thumb{height:110px}
  .product .price{font-size:1.25rem}
  .product .title{font-size:.9rem}
  input,select,textarea{font-size:16px;padding:12px 14px}
  .btn-lg{padding:13px 16px;font-size:.95rem}
  .btn{padding:9px 14px;font-size:.88rem}
  .btn-sm{padding:6px 10px;font-size:.78rem}
  .table th,.table td{padding:8px 10px;font-size:.78rem}
  .section-title h2{font-size:1.1rem}
  .section-title{align-items:flex-start}
  .section-actions{width:100%}
  .h1{font-size:1.5rem!important}
  .h2{font-size:1.1rem!important}
  .footer{margin:30px 24px 20px;padding:14px 10px;font-size:.75rem}
  .bar-bottom{padding:10px 24px calc(env(safe-area-inset-bottom) + 66px)}
  .bar-bottom .inner{gap:10px}
  .bar-bottom .num{font-size:1rem!important}
}
@media (max-width:400px){
  .topbar .inner{padding:8px 16px}
  .top-user .chip{padding:3px 7px;font-size:.64rem}
  .top-user .logout{padding:4px 7px;font-size:.68rem}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat .value{font-size:1.35rem}
  .stat .label{font-size:.68rem}
  .botnav a{font-size:.62rem}
  .botnav a .i{font-size:1rem}
}