:root{
  --terra:#E05A3A;--terrah:#F06B4A;--terrad:#C04428;
  --olive:#7A9838;--am:#E0960A;
  --ink:#F0E8D8;--ink2:#181210;--ink3:#201810;
  --paper:#141010;--paper2:#1C1610;--paper3:#241E14;
  --worn:#3A2E20;--wornl:#4A3E30;--wornd:#8A7860;
  --cream:#F0E8D8;--card:#1C1610;
  --muted:#9A8870;--green:#4A9A58;--blue:#3A7AC8;--red:#E04030;
  --fnd:"Playfair Display",serif;
  --fnb:"DM Sans",sans-serif;
  --fnm:"DM Mono",monospace;
  --border:1px solid var(--worn);
  --img-bg:var(--paper2);
  --sh:0 1px 3px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.2);
  --sh2:0 6px 28px rgba(0,0,0,.4);
}

/* -- LIGHT THEME -- */
[data-theme="light"]{
  --terra:#C8422A; --terrah:#D95A3C; --terrad:#A33320;
  --olive:#5C6E2A;
  --am:#D4860A;
  --ink:#1A100A; --ink2:#251810; --ink3:#332218;
  --paper:#F5EDD8; --paper2:#EDE0C4; --paper3:#E3D2B0;
  --worn:#C8B898; --wornl:#D8CCB4; --wornd:#A89878;
  --cream:#FAF5EA;
  --card:#FDF8EE;
  --muted:#6A5638;
  --green:#3A7A48; --blue:#3A7AC8; --red:#E04030;
  --sh:0 2px 8px rgba(26,16,10,.1),0 1px 0 rgba(26,16,10,.06);
  --sh2:0 8px 32px rgba(26,16,10,.18);
  --border:1px solid var(--worn);
  --img-bg:var(--paper2);
}

/* -- THEME TRANSITIONS -- */
body, .sb, .main, .topbar, .sc, .tw, .si, .btn, .modal, .bd-box, .fin-card, .fin-section, .pc, .pc-img, th, td {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* -- THEME TOGGLE BUTTON -- */
.theme-toggle{
  width:32px;height:32px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:.9rem;
  transition:all .2s;flex-shrink:0;
  color: var(--cream);
}
.theme-toggle:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);}
[data-theme="light"] .theme-toggle{
  background:rgba(26,16,10,.08);
  border-color:rgba(26,16,10,.15);
  color: var(--ink);
}
[data-theme="light"] .theme-toggle:hover{background:rgba(26,16,10,.14);}
[data-theme="light"] .sb{background:var(--paper2); border-right:1px solid var(--worn);}
[data-theme="light"] .sb-top{border-bottom:1px solid var(--worn); background:var(--paper3);}
[data-theme="light"] .topbar{background:var(--paper); border-bottom:1px solid var(--worn);}
[data-theme="light"] .si, [data-theme="light"] .ssel{background:var(--paper);}
[data-theme="light"] .ni{color:var(--ink); opacity:0.7;}
[data-theme="light"] .ni:hover{background:rgba(26,16,10,.05); color:var(--ink); opacity:1;}
[data-theme="light"] .ni.active{background:var(--paper3); color:var(--terra); opacity:1; border-left-color:var(--terra);}
[data-theme="light"] .sb-grp{color:var(--muted); opacity:0.8;}
[data-theme="light"] .sb-email{color:var(--muted);}
[data-theme="light"] .logout-btn{color:var(--muted);}
[data-theme="light"] .logout-btn:hover{color:var(--terra);}
[data-theme="light"] .sb-bot{border-top:1px solid var(--worn);}
[data-theme="light"] .sb-user{background:var(--paper3); border:1px solid var(--worn);}
[data-theme="light"] tr:hover td{background:rgba(26,16,10,0.02);}
[data-theme="light"] th, [data-theme="light"] td{color:var(--ink);}
[data-theme="light"] .scard-t, [data-theme="light"] .th-t, [data-theme="light"] .form-card-title{color:var(--ink);}
[data-theme="light"] .sc-sub, [data-theme="light"] .fin-sub, [data-theme="light"] .tb-clock{color:var(--muted);}
[data-theme="light"] .sg-btn:hover{color:var(--ink);}
[data-theme="light"] .sz-selected-lbl strong{color:var(--ink);}
[data-theme="light"] .tb-title{color:var(--ink);}
[data-theme="light"] .lf-logo{color:var(--ink);}
[data-theme="light"] .lf-title{color:var(--ink);}
[data-theme="light"] #loginScreen, [data-theme="light"] #splash {background:var(--paper);}
[data-theme="light"] .lg-card {background:var(--card); box-shadow:var(--sh);}
[data-theme="light"] .lg-tag, [data-theme="light"] .lf label {color:var(--muted);}
[data-theme="light"] .lf input {background:var(--paper2); color:var(--ink); border-color:var(--worn);}
[data-theme="light"] .spl-name h1 {color:var(--ink);}
[data-theme="light"] .spl-txt, [data-theme="light"] .spl-name p {color:var(--muted);}
[data-theme="light"] .lg-grid {opacity: 0.1;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:15px}
body{font-family:var(--fnb);background:var(--paper);color:var(--ink);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{cursor:pointer;font-family:var(--fnb)}
input,select,textarea{font-family:var(--fnb);color:var(--ink);background:var(--paper2);}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--paper2)}
::-webkit-scrollbar-thumb{background:var(--terra);border-radius:0}

/* --- SPLASH --- */
#splash{position:fixed;inset:0;z-index:9999;background:var(--ink2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:opacity .6s,visibility .6s}
#splash.out{opacity:0;visibility:hidden;pointer-events:none}
.spl-bg{position:absolute;inset:0;overflow:hidden}
.spl-stripe{position:absolute;left:0;right:0;height:2px;animation:stripeAnim 3s ease-in-out infinite}
.spl-stripe:nth-child(1){top:28%;background:var(--terra);opacity:.3;animation-delay:0s}
.spl-stripe:nth-child(2){top:52%;background:var(--olive);opacity:.18;animation-delay:.5s}
.spl-stripe:nth-child(3){top:76%;background:var(--am);opacity:.22;animation-delay:1s}
@keyframes stripeAnim{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.spl-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(200,66,42,.12) 0%,transparent 65%);animation:glowP 2.6s ease-in-out infinite}
@keyframes glowP{0%,100%{transform:scale(.8);opacity:.4}50%{transform:scale(1.2);opacity:1}}
.spl-corners{position:absolute;inset:0;pointer-events:none}
.spl-c{position:absolute;width:28px;height:28px;border-color:rgba(200,66,42,.35);border-style:solid}
.spl-c.tl{top:28px;left:28px;border-width:2px 0 0 2px}
.spl-c.tr{top:28px;right:28px;border-width:2px 2px 0 0}
.spl-c.bl{bottom:28px;left:28px;border-width:0 0 2px 2px}
.spl-c.br{bottom:28px;right:28px;border-width:0 2px 2px 0}
.spl-logo{position:relative;z-index:2;margin-bottom:24px;animation:fadeUp .8s both}
.spl-logo img{width:160px;height:160px;object-fit:contain;filter:drop-shadow(0 4px 20px rgba(200,66,42,.4))}
.spl-name{position:relative;z-index:2;text-align:center;margin-bottom:32px;animation:fadeUp .8s .15s both}
.spl-name h1{font-family:var(--fnd);font-size:1.7rem;font-weight:900;color:var(--paper);letter-spacing:.3px}
.spl-name h1 em{font-style:italic;color:var(--terra)}
.spl-name p{font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:rgba(200,180,150,.35);margin-top:5px}
.spl-prog{position:relative;z-index:2;width:180px;animation:fadeUp .6s .3s both}
.spl-track{width:100%;height:2px;background:rgba(255,255,255,.08)}
.spl-fill{height:100%;background:var(--terra);width:0%;transition:width .1s linear}
.spl-txt{font-size:.63rem;letter-spacing:2px;text-transform:uppercase;color:rgba(200,180,150,.3);text-align:center;margin-top:8px}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* --- LOGIN --- */
#loginScreen{min-height:100vh;display:none;background:var(--ink2);position:relative;overflow:hidden}
.lg-art{position:absolute;inset:0;background:radial-gradient(ellipse 700px 500px at 15% 60%,rgba(200,66,42,.14) 0%,transparent 55%),radial-gradient(ellipse 400px 400px at 90% 15%,rgba(92,110,42,.1) 0%,transparent 55%)}
.lg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:52px 52px}
.lg-wrap{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.lg-card{background:rgba(245,237,216,.04);border:var(--border);border-top:2px solid var(--terra);padding:40px 36px;width:100%;max-width:380px;backdrop-filter:blur(16px);box-shadow:0 24px 80px rgba(0,0,0,.4)}
.lg-logo-wrap{display:flex;justify-content:center;margin-bottom:12px}
.lg-logo-wrap img{height:100px;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(200,66,42,.35))}
.lg-tag{text-align:center;font-size:.63rem;letter-spacing:3px;text-transform:uppercase;color:rgba(200,180,150,.35);margin-bottom:30px}
.lf{margin-bottom:14px}
.lf label{display:block;font-size:.67rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(200,180,150,.5);margin-bottom:6px}
.lf input{width:100%;padding:11px 13px;background:rgba(255,255,255,.07);border:var(--border);color:var(--ink);font-size:.88rem;outline:none;transition:border .2s}
.lf input:focus{border-color:var(--terra);background:rgba(255,255,255,.1)}
.lf input::placeholder{color:rgba(200,180,150,.25)}
.lg-btn{width:100%;background:var(--terra);color:#fff;border:none;padding:12px;font-weight:700;font-size:.88rem;margin-top:6px;transition:all .2s;letter-spacing:.3px;cursor:pointer}
.lg-btn:hover{background:var(--terrah)}
.lg-btn:disabled{opacity:.5;cursor:not-allowed}
.lg-err{color:#FF6B4A;font-size:.75rem;margin-top:10px;display:none;text-align:center;padding:8px;background:rgba(200,66,42,.12)}

/* --- APP SHELL --- */
#adminApp{display:none}
.layout{display:grid;grid-template-columns:216px 1fr;min-height:100vh}

/* --- SIDEBAR --- */
.sb{background:var(--ink2);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb::-webkit-scrollbar{width:3px}
.sb-top{padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center}
.sb-top img{height:44px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(200,66,42,.3))}
.sb-nav{padding:8px 0;flex:1}
.sb-grp{padding:10px 16px 4px;font-size:.57rem;letter-spacing:3px;text-transform:uppercase;color:rgba(200,160,100,.28);font-weight:700;margin-top:6px}
.ni{display:flex;align-items:center;gap:9px;padding:8px 16px;color:rgba(200,160,100,.45);font-size:.81rem;font-weight:500;cursor:pointer;transition:all .14s;border-left:2px solid transparent;user-select:none}
.ni:hover{color:var(--cream);background:rgba(255,255,255,.04)}
.ni.active{color:#FFCB7A;background:rgba(200,66,42,.1);border-left-color:var(--terra)}
.ni-ic{width:16px;text-align:center;flex-shrink:0;font-size:.85rem}
.ni-badge{margin-left:auto;background:var(--terra);color:#fff;border-radius:20px;font-size:.58rem;font-weight:800;padding:1px 6px;min-width:16px;text-align:center}
.sb-bot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.07)}
.sb-user{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:8px;background:rgba(255,255,255,.04)}
.sb-av{width:28px;height:28px;border-radius:50%;background:var(--terra);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.72rem;font-weight:700;flex-shrink:0}
.sb-email{font-size:.65rem;color:rgba(200,180,150,.38);word-break:break-all}
.logout-btn{display:flex;align-items:center;gap:7px;color:rgba(200,160,100,.3);font-size:.76rem;cursor:pointer;transition:color .2s;background:none;border:none;padding:0}
.logout-btn:hover{color:var(--terrah)}

/* --- TOPBAR --- */
.main{overflow-y:auto;background:var(--paper);color:var(--ink);display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:50;background:rgba(24,18,16,.96);backdrop-filter:blur(12px);padding:0 24px;height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--worn);flex-shrink:0}
.tb-title{font-family:var(--fnd);font-size:1.1rem;font-weight:700;color:var(--ink)}
.tb-r{display:flex;gap:8px;align-items:center}
.tb-clock{font-size:.72rem;color:var(--wornd);font-family:var(--fnm)}

/* --- BUTTONS --- */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;font-weight:600;font-size:.79rem;border:none;transition:all .14s;cursor:pointer;font-family:var(--fnb);white-space:nowrap;line-height:1.4}
.btn-prim{background:var(--terra);color:#fff}.btn-prim:hover{background:var(--terrad)}
.btn-sec{background:var(--card);color:var(--ink);border:var(--border)}.btn-sec:hover{border-color:var(--terra);color:var(--terra)}
.btn-ghost{background:transparent;color:var(--muted);border:var(--border)}.btn-ghost:hover{background:var(--paper2)}
.btn-sm{padding:4px 9px;font-size:.72rem}
.btn-del{background:#FEF2F2;color:#B83020}.btn-del:hover{background:#B83020;color:#fff}
.btn-ok{background:#F0FDF4;color:var(--green)}.btn-ok:hover{background:var(--green);color:#fff}
.btn-inf{background:#EFF6FF;color:var(--blue)}.btn-inf:hover{background:var(--blue);color:#fff}
.btn-warn{background:#FFFBEB;color:var(--am)}.btn-warn:hover{background:var(--am);color:#fff}

/* --- PAGE --- */
.page{display:none;padding:20px 24px;animation:pgIn .18s ease;flex:1}
.page.active{display:block}
@keyframes pgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* --- STAT CARDS --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:18px}
.sc{background:var(--card);border:1px solid var(--worn);border-top:3px solid var(--terra);padding:15px 17px;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
.sc:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.sc.g{border-top-color:var(--green)}.sc.b{border-top-color:var(--blue)}.sc.a{border-top-color:var(--am)}
.sc-ic{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:1.6rem;opacity:.1}
.sc-lbl{font-size:.65rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sc-val{font-family:var(--fnd);font-size:1.9rem;font-weight:700;line-height:1;color:var(--ink)}
.sc-sub{font-size:.68rem;color:var(--wornd);margin-top:4px}

/* --- TABLE CARD --- */
.tw{background:var(--card);border:1px solid var(--worn);box-shadow:var(--sh);overflow:hidden;margin-bottom:16px}
.th{padding:12px 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--worn);gap:8px;flex-wrap:wrap;background:var(--paper2)}
.th-t{font-family:var(--fnd);font-size:.95rem;font-weight:700}
.th-r{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* All inputs: clean, consistent */
.si{padding:6px 10px;border:1.5px solid var(--worn);font-size:.79rem;outline:none;background:var(--paper2);transition:border .18s;color:var(--ink);height:31px}
.si:focus{border-color:var(--terra)}
select.si,select.finput,.fselect{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M1 1l3.5 3L8 1' stroke='%237A6848' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  padding-right:24px;
  cursor:pointer;
}

table{width:100%;border-collapse:collapse}
th{padding:9px 12px;text-align:left;font-size:.64rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);background:var(--paper2);border-bottom:1px solid var(--worn)}
td{padding:10px 12px;border-bottom:1px solid var(--worn);font-size:.81rem;vertical-align:middle;color:var(--ink)}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.04)}
.av{width:27px;height:27px;border-radius:50%;background:var(--terra);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0}

/* Status select in orders table */
.ssel{
  padding:4px 22px 4px 7px;border:1.5px solid var(--worn);font-size:.74rem;font-weight:600;
  background:var(--paper);outline:none;transition:border .14s;color:var(--ink);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%237A6848' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;
  cursor:pointer;
}
.ssel:focus{border-color:var(--terra)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;font-size:.68rem;font-weight:700}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.bp{background:#3A2800;color:#F0A830}.bc{background:#0A1E3A;color:#60A0F0}
.bd{background:#0A2A14;color:#50C870}.bx{background:#3A0A0A;color:#F06060}
.bship{background:#0A2030;color:#40C0E0}.bret{background:#2A0A3A;color:#C080F0}
.ba{background:#0A2A14;color:#50C870}.bsold{background:#3A0A0A;color:#F06060}.bdraft{background:#1A1A2A;color:#8080C0}


/* --- FINANCES --- */
.fin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.fin-card{background:var(--card);border:1px solid var(--worn);padding:18px 20px;box-shadow:var(--sh);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.fin-card:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.fin-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.fin-card.g::before{background:var(--green)}.fin-card.r::before{background:var(--red)}.fin-card.b::before{background:var(--blue)}.fin-card.a::before{background:var(--am)}
.fin-card-ic{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:2rem;opacity:.08}
.fin-lbl{font-size:.6rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fin-val{font-family:var(--fnd);font-size:2rem;font-weight:700;line-height:1;color:var(--ink)}
.fin-sub{font-size:.67rem;color:var(--muted);margin-top:5px}
.fin-section{background:var(--card);border:1px solid var(--worn);box-shadow:var(--sh);margin-bottom:14px;overflow:hidden}
.fin-section-hd{padding:13px 16px;border-bottom:1px solid var(--worn);background:var(--paper2);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.fin-section-title{font-family:var(--fnd);font-size:.92rem;font-weight:700;color:var(--ink)}
.fin-table{width:100%;border-collapse:collapse}
.fin-table th{padding:9px 14px;font-size:.6rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);background:var(--paper2);border-bottom:1px solid var(--worn);text-align:right}
.fin-table th:first-child{text-align:left}
.fin-table td{padding:11px 14px;border-bottom:1px solid var(--worn);font-size:.82rem;color:var(--ink);text-align:right;vertical-align:middle}
.fin-table td:first-child{text-align:left;font-weight:600}
.fin-table tr:last-child td{border-bottom:none}
.fin-table tr:hover td{background:rgba(255,255,255,.04)}
.fin-table-total td{background:var(--paper2)!important;font-weight:700;border-top:2px solid var(--worn)!important}
.fin-pos{color:var(--green);font-weight:700}.fin-neg{color:var(--red);font-weight:700}
.fin-note{font-size:.71rem;color:var(--muted);padding:10px 16px;background:var(--paper2);border-top:1px solid var(--worn)}
.cost-edit{width:78px;padding:4px 7px;border:1.5px solid var(--worn);font-size:.76rem;outline:none;background:var(--paper2);color:var(--ink);transition:border .15s;text-align:right;font-family:var(--fnm)}
.cost-edit:focus{border-color:var(--terra)}
.fin-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.fin-kpi{background:var(--paper2);border:1px solid var(--worn);padding:12px 16px;display:flex;align-items:center;gap:12px}
.fin-kpi-ic{font-size:1.4rem;flex-shrink:0}
.fin-kpi-lbl{font-size:.63rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.fin-kpi-n{font-size:1.2rem;font-weight:700;font-family:var(--fnd);color:var(--ink)}
/* --- PRODUCT GRID --- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px;padding:13px}
.pc{border:var(--border);overflow:hidden;background:var(--card);color:var(--ink);transition:all .2s;box-shadow:0 1px 0 rgba(255,255,255,.03)}
.pc:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.pc-img{height:130px;background:linear-gradient(145deg,var(--paper2),var(--paper3));display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden;position:relative;border-bottom:var(--border)}
.pc-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;}
[data-theme="light"] .pc{background:#F5F3EF;color:var(--ink)}
[data-theme="light"] .pc-img{background:var(--img-bg)}
[data-theme="light"] .pc-img img{mix-blend-mode:multiply;}
.pc-body{padding:10px 11px}
.pc-cat{font-size:.62rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--olive);margin-bottom:2px}
.pc-name{font-weight:700;font-size:.85rem;margin-bottom:4px;line-height:1.25;color:var(--ink)}
.pc-price{font-family:var(--fnd);font-size:1.05rem;font-weight:700;color:var(--terra)}
.pc-ft{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}


/* -- JEANS SIZE GRID -- */
.sz-tabs{display:flex;gap:0;margin-bottom:8px;border-bottom:2px solid var(--worn)}
.sz-tab{padding:5px 14px;font-size:.72rem;font-weight:700;background:none;border:none;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;font-family:var(--fnb)}
.sz-tab.active{color:var(--terra);border-bottom-color:var(--terra)}
.sz-grid{display:flex;flex-wrap:wrap;gap:5px}
.sg-btn{padding:5px 8px;border:1.5px solid var(--worn);background:var(--paper2);color:var(--muted);font-size:.74rem;font-weight:600;cursor:pointer;font-family:var(--fnm);transition:all .14s;min-width:38px;text-align:center}
.sg-btn:hover{border-color:var(--terra);color:var(--cream)}
.sg-btn.selected{background:var(--terra);color:#fff;border-color:var(--terra)}
.sz-selected-lbl{font-size:.7rem;color:var(--muted);margin-top:5px}
.sz-selected-lbl strong{color:var(--cream)}

/* --- FORM ELEMENTS --- */
.form-card{background:var(--card);border:1px solid var(--worn);border-top:3px solid var(--terra);padding:22px;box-shadow:var(--sh);margin-bottom:13px}
.form-card-title{font-family:var(--fnd);font-size:.96rem;font-weight:700;margin-bottom:16px;padding-bottom:11px;border-bottom:1px solid var(--paper3)}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
.fgroup{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.fgroup.full{grid-column:1/-1}
.flabel{font-size:.67rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.flabel .req{color:var(--terra)}
.finput{width:100%;padding:9px 11px;border:1.5px solid var(--worn);font-size:.85rem;outline:none;transition:border .18s,box-shadow .18s;background:var(--paper2);color:var(--ink)}
.finput:focus{border-color:var(--terra);box-shadow:0 0 0 3px rgba(200,66,42,.09)}
.finput::placeholder{color:rgba(122,104,72,.38)}
.ftextarea{resize:vertical;min-height:78px}

/* Image upload */
.img-zone{display:flex;gap:14px;align-items:flex-start}
.img-drop{width:148px;height:148px;flex-shrink:0;border:2px dashed var(--worn);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .2s;background:var(--img-bg);overflow:hidden;position:relative}
.img-drop:hover{border-color:var(--terra);background:rgba(200,66,42,.04)}
/* -- MULTI-IMAGE -- */
.imgs-gallery{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;user-select:none}
.img-thumb{width:90px;height:90px;position:relative;border:2px solid var(--worn);overflow:hidden;flex-shrink:0;background:var(--img-bg);cursor:grab;transition:border-color .18s,opacity .18s,transform .18s;border-radius:2px}
.img-thumb:active{cursor:grabbing}
.img-thumb.dragging{opacity:.35;transform:scale(.92)}
.img-thumb.drag-over{border-color:var(--terra);border-style:dashed;transform:scale(1.06);box-shadow:0 0 0 3px rgba(224,90,58,.3)}
.img-thumb img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;mix-blend-mode:lighten;}
[data-theme="light"] .img-thumb img{mix-blend-mode:multiply;}
.img-num{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;font-size:.6rem;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:6;pointer-events:none;font-family:var(--fnm)}
.img-thumb.main-img{border-color:var(--terra)}
.img-thumb.main-img .img-num{background:var(--terra)}
.img-thumb-rm{position:absolute;top:2px;right:2px;width:19px;height:19px;background:rgba(184,48,32,.9);color:#fff;border:none;border-radius:50%;font-size:.65rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:7;padding:0}
.img-thumb-rm:hover{background:#B83020}
.img-set-main{position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:700;color:#fff;letter-spacing:.3px;text-transform:uppercase;text-align:center;line-height:1.3;opacity:0;transition:opacity .15s;cursor:pointer;z-index:5;padding:4px}
.img-thumb:not(.main-img):hover .img-set-main{opacity:1}
.img-add-btn{width:90px;height:90px;border:2px dashed var(--worn);background:var(--img-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:all .18s;color:var(--muted);font-size:.63rem;font-weight:600;font-family:var(--fnb);border-radius:2px}
.img-add-btn:hover{border-color:var(--terra);color:var(--terra)}
.imgs-hint{font-size:.68rem;color:var(--muted);margin-top:6px}
.img-drop.filled{border-style:solid;border-color:var(--worn)}
.img-drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.img-drop-ic{font-size:1.7rem;opacity:.32;position:relative;z-index:1;transition:transform .2s}
.img-drop:hover .img-drop-ic{transform:scale(1.1)}
.img-drop-tx{font-size:.69rem;color:var(--muted);position:relative;z-index:1;text-align:center;line-height:1.4}
.img-side{flex:1;display:flex;flex-direction:column;gap:7px;justify-content:center}
.img-hint{font-size:.7rem;color:var(--muted);line-height:1.6}

/* --- CATEGORIES --- */
.cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px;padding:13px}
.cat-card{background:var(--card);border:1px solid var(--paper3);padding:13px 15px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--sh);transition:all .18s}
.cat-card:hover{box-shadow:var(--sh2)}
.cat-name{font-weight:700;font-size:.86rem;color:var(--ink)}
.cat-count{font-size:.7rem;color:var(--muted);margin-top:2px}
.cat-add-row{display:flex;gap:9px;padding:13px 15px;border-top:1px solid var(--paper3);align-items:flex-end}

/* --- ANALYTICS --- */
.ag{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:16px}
.ac{background:var(--card);border:1px solid var(--paper3);padding:15px;box-shadow:var(--sh)}
.ac-t{font-family:var(--fnd);font-size:.9rem;font-weight:700;margin-bottom:13px;color:var(--ink)}
.pi{margin-bottom:10px}
.ph{display:flex;justify-content:space-between;font-size:.77rem;margin-bottom:4px;color:var(--ink)}
.pb{height:5px;background:var(--paper3);overflow:hidden}
.pf{height:100%;background:var(--terra);transition:width .7s ease}
.pf.g{background:var(--green)}.pf.b{background:var(--blue)}.pf.a{background:var(--am)}

/* --- SETTINGS --- */
.s2{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}
.scard{background:var(--card);border:1px solid var(--paper3);border-top:3px solid var(--worn);padding:19px;box-shadow:var(--sh)}
.scard-t{font-family:var(--fnd);font-size:.93rem;font-weight:700;margin-bottom:5px;color:var(--ink)}
.scard-d{font-size:.79rem;color:var(--muted);line-height:1.7;margin-bottom:13px}
.soc-row{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.soc-ic{width:26px;text-align:center;font-size:.9rem;flex-shrink:0}

/* --- MODAL --- */
.modal-ov{position:fixed;inset:0;z-index:800;background:rgba(26,16,10,.5);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .18s}
.modal-ov.open{opacity:1;pointer-events:all}
.modal{background:var(--card);border-top:3px solid var(--terra);width:100%;max-width:500px;box-shadow:var(--sh2);overflow:hidden;transform:translateY(8px) scale(.98);transition:all .2s cubic-bezier(.34,1.2,.64,1)}
.modal-ov.open .modal{transform:none}
.mhd{padding:14px 19px;border-bottom:1px solid var(--paper3);display:flex;align-items:center;justify-content:space-between;background:var(--paper)}
.mhd-t{font-family:var(--fnd);font-size:.95rem;font-weight:700}
.mx{background:var(--paper2);border:none;width:27px;height:27px;display:flex;align-items:center;justify-content:center;font-size:.83rem;cursor:pointer;transition:all .14s}
.mx:hover{background:var(--terra);color:#fff}
.mbody{padding:16px 19px;max-height:56vh;overflow-y:auto}
.dr{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--worn);font-size:.81rem}
.dr:last-child{border:none}
.dk{color:var(--muted);font-weight:500;flex-shrink:0;margin-right:10px}
.dv{font-weight:600;text-align:right;max-width:280px;word-break:break-word}
.mft{padding:11px 19px;border-top:1px solid var(--paper3);display:flex;justify-content:flex-end;gap:7px;background:var(--paper)}

/* --- CONFIRM --- */
.con-ov{position:fixed;inset:0;z-index:900;background:rgba(26,16,10,.5);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .18s}
.con-ov.open{opacity:1;pointer-events:all}
.con-box{background:var(--card);border-top:3px solid var(--terra);width:100%;max-width:330px;padding:24px;box-shadow:var(--sh2);text-align:center;transform:scale(.95);transition:transform .2s cubic-bezier(.34,1.2,.64,1)}
.con-ov.open .con-box{transform:none}
.con-t{font-family:var(--fnd);font-size:1.05rem;font-weight:700;margin-bottom:6px}
.con-s{color:var(--muted);font-size:.81rem;line-height:1.6;margin-bottom:18px}
.con-a{display:flex;gap:8px;justify-content:center}

/* --- TOAST --- */
.toast{position:fixed;bottom:20px;left:50%;z-index:1000;transform:translateX(-50%) translateY(80px);background:var(--ink2);color:var(--cream);padding:10px 17px;font-size:.81rem;font-weight:600;box-shadow:3px 3px 0 rgba(26,16,10,.3);border-left:3px solid var(--terra);opacity:0;transition:all .3s cubic-bezier(.34,1.4,.64,1);display:flex;align-items:center;gap:7px;max-width:300px;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--terra)}
.tdot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.toast.err .tdot{background:rgba(255,255,255,.5)}

/* --- BEST DELIVERY MODAL --- */
.bd-overlay{position:fixed;inset:0;z-index:850;background:rgba(10,6,4,.75);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .22s;backdrop-filter:blur(4px)}
.bd-overlay.open{opacity:1;pointer-events:all}
.bd-box{background:var(--card);border:1px solid var(--worn);border-top:3px solid #F0A830;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.6);transform:translateY(10px) scale(.97);transition:all .22s cubic-bezier(.34,1.1,.64,1)}
.bd-overlay.open .bd-box{transform:none}
.bd-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--paper2);border-bottom:1px solid var(--worn);position:sticky;top:0;z-index:2}
.bd-hd-t{font-family:var(--fnd);font-size:1.05rem;font-weight:700;color:var(--ink)}
.bd-close{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;line-height:1;padding:2px 6px;transition:color .14s}
.bd-close:hover{color:var(--ink)}
.bd-body{padding:20px}
.bd-fields{display:flex;flex-direction:column;gap:0;margin-bottom:20px;border:1px solid var(--worn);overflow:hidden}
.bd-field{display:grid;grid-template-columns:160px 1fr;border-bottom:1px solid var(--worn)}
.bd-field:last-child{border-bottom:none}
.bd-label{padding:10px 13px;font-size:.68rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);background:var(--paper2);border-right:1px solid var(--worn);display:flex;align-items:center}
.bd-val{padding:10px 14px;font-size:.84rem;color:var(--ink);word-break:break-word;display:flex;align-items:center}
.bd-actions{display:flex;gap:10px;margin-bottom:16px}
.bd-btn-main{flex:1;background:#F0A830;color:#1A100A;border:none;padding:12px 16px;font-weight:700;font-size:.85rem;cursor:pointer;font-family:var(--fnb);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.bd-btn-main:hover{background:#D09020}
.bd-btn-copy{flex:0 0 auto;background:var(--card);color:var(--ink);border:1.5px solid var(--worn);padding:12px 16px;font-weight:600;font-size:.82rem;cursor:pointer;font-family:var(--fnb);transition:all .15s}
.bd-btn-copy:hover{border-color:#F0A830;color:#F0A830}
.bd-note{font-size:.76rem;color:var(--muted);line-height:1.6;padding:12px 14px;background:rgba(240,168,48,.05);border:1px solid rgba(240,168,48,.15)}

/* --- MOBILE --- */
.mob-menu-btn{display:none;background:none;border:none;color:var(--ink);font-size:1.3rem;padding:4px;cursor:pointer}




/* ------------------------------------------
   RESPONSIVE - TABLET (=1024px)
------------------------------------------ */
@media(max-width:1024px){
  .stats{grid-template-columns:1fr 1fr}
  .fin-grid{grid-template-columns:1fr 1fr}
  .fin-kpi-row{grid-template-columns:1fr 1fr}
  .ag{grid-template-columns:1fr}
  .s2{grid-template-columns:1fr}
  /* Finances layout */
  #page-finances > div[style*="grid-template-columns:1fr 280px"]{grid-template-columns:1fr!important}
  /* Product form */
  .fg3{grid-template-columns:1fr 1fr}
}

/* ------------------------------------------
   RESPONSIVE - MOBILE (=768px)
------------------------------------------ */
@media(max-width:768px){
  /* Layout: hide sidebar, show hamburger */
  .layout{grid-template-columns:1fr}
  .sb{
    display:none;position:fixed;inset:0;z-index:300;
    transition:transform .25s;transform:translateX(-100%);width:240px;
    inset:0 auto 0 0;
  }
  .sb.open{display:flex;transform:translateX(0)}
  .mob-menu-btn{display:block}
  .sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299}
  .sb.open ~ .main .sb-overlay{display:block}

  /* Topbar */
  .topbar{padding:0 12px}
  .tb-clock{display:none}

  /* Stats */
  .stats{grid-template-columns:1fr 1fr;gap:9px}
  .fin-grid{grid-template-columns:1fr 1fr}
  .fin-kpi-row{grid-template-columns:1fr}

  /* Page padding */
  .page{padding:14px 12px}

  /* Tables - horizontal scroll */
  .tw{overflow-x:auto}
  table{min-width:540px}
  th,td{padding:8px 10px;white-space:nowrap}

  /* Orders table - hide less critical columns */
  .ord-col-items,.ord-col-date{display:none}

  /* Forms */
  .fg2,.fg3{grid-template-columns:1fr}
  .s2{grid-template-columns:1fr}
  .ag{grid-template-columns:1fr}
  .form-card{padding:16px}

  /* Product grid */
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

  /* Finances */
  #page-finances > div[style*="grid-template-columns:1fr 280px"]{grid-template-columns:1fr!important;display:flex!important;flex-direction:column!important}
  .fin-section{margin-bottom:12px}
  .fin-table th,.fin-table td{padding:8px 10px;font-size:.75rem}

  /* Settings */
  .soc-row{flex-direction:column;gap:6px}

  /* Dashboard recent table */
  .tw table{min-width:480px}

  /* Modal */
  .con-box,.ord-mod,.bd-box{max-width:94vw;margin:10px}
  .bd-box{max-height:92vh}
  .bd-fields{grid-template-columns:1fr}
  .bd-field{border-right:none!important}

  /* Buttons */
  .btn-sm{padding:5px 9px;font-size:.72rem}
}

/* ------------------------------------------
   RESPONSIVE - SMALL PHONE (=480px)
------------------------------------------ */
@media(max-width:480px){
  /* Stats - single column */
  .stats{grid-template-columns:1fr}
  .fin-grid{grid-template-columns:1fr}
  .sc-val{font-size:1.5rem}
  .fin-val{font-size:1.6rem}

  /* Page */
  .page{padding:10px 10px}

  /* Forms */
  .fg2,.fg3{grid-template-columns:1fr}
  .form-card{padding:12px}
  .form-card-title{font-size:.9rem}
  .finput{padding:8px 9px;font-size:.82rem}

  /* Product grid */
  .pgrid{grid-template-columns:1fr 1fr;gap:8px}
  .pc-img{height:110px}
  .pc-name{font-size:.78rem}
  .pc-price{font-size:.9rem}
  .pc-ft{gap:3px}

  /* Topbar */
  .topbar{height:46px}
  .tb-title{font-size:.92rem}

  /* Jeans size grid */
  .sz-grid{gap:4px}
  .sg-btn{padding:5px 7px;font-size:.7rem;min-width:34px}

  /* Image thumbs */
  .img-thumb{width:72px;height:72px}
  .img-add-btn{width:72px;height:72px}

  /* Toast */
  .toast{left:10px;right:10px;bottom:14px;width:auto}

  /* BD sheet */
  .bd-fields{grid-template-columns:1fr}
  .bd-box{border-radius:0;max-height:100dvh}
}

/* ------------------------------------------
   TOUCH TARGETS
------------------------------------------ */
@media(max-width:768px){
  .ni{padding:11px 16px}
  button,.btn,.ssel{min-height:38px}
  .sg-btn{min-height:36px}
  .si,.finput{min-height:40px}
}

/* ══════════════════════════════════════════
   BULK ACTIONS TOOLBAR
   Appears above the orders table when items
   are selected — slides down from the header
══════════════════════════════════════════ */
.bulk-toolbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(224,90,58,.12), rgba(224,90,58,.06));
  border-bottom: 2px solid var(--terra);
  animation: bulkIn .2s cubic-bezier(.34,1.2,.64,1);
  flex-wrap: wrap;
}
.bulk-toolbar.visible {
  display: flex;
}
@keyframes bulkIn {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:none; }
}
.bulk-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 500;
}
.bulk-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  background: var(--terra);
  color: #fff;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 800;
  padding: 0 5px;
  font-family: var(--fnm);
}
.bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bulk-status-sel {
  min-width: 170px;
  height: 32px;
  font-size: .8rem;
}
/* Checkbox column styling */
.ord-cb {
  width: 15px;
  height: 15px;
  accent-color: var(--terra);
  cursor: pointer;
}
/* Highlight selected rows */
tr.ord-selected td {
  background: rgba(224,90,58,.07) !important;
  border-left: 3px solid var(--terra);
}
tr.ord-selected td:first-child {
  padding-left: 9px;
}
@media(max-width:768px) {
  .bulk-toolbar { flex-direction: column; align-items: flex-start; }
  .bulk-actions  { width: 100%; }
}