/* SHABAB PERFUME POS — styles. Themes via data-theme on <html>, button looks via data-look. */

:root{
  --bg:#FFF4F7;--panel:#FFFFFF;--panel2:#FFF9FB;--line:#F3D6E0;--line2:#FBEAF0;--ink:#3A1D2B;--muted:#7A5566;
  --accent:#B83A66;--accent-ink:#FFFFFF;--accent-soft:#FDE4EC;--accent-dark:#8E2449;--gold:#8A6418;--gold-soft:#FBF1DC;
  --ok:#1E6B3A;--ok-soft:#E3F2E8;--warn:#9A3412;--warn-soft:#FFEDD5;--bad:#B3261E;--bad-soft:#FDE8E7;
  --side:#FFFFFF;--side-ink:#4A2636;--shadow:0 1px 2px rgba(80,20,40,.06),0 6px 20px rgba(80,20,40,.05);
  --r:16px;--rs:10px;--font:Manrope,'Segoe UI',Tahoma,sans-serif;--disp:Cormorant,Georgia,serif;
}
html[data-theme=gold]{--bg:#0F0C09;--panel:#1A1510;--panel2:#211A13;--line:#3A2E1E;--line2:#2B2218;--ink:#F5E9CC;--muted:#C9B48A;--accent:#D4AF37;--accent-ink:#1A1206;--accent-soft:#33291A;--accent-dark:#F1D27A;--gold:#E7C766;--gold-soft:#2C2416;--side:#140F0B;--side-ink:#EADBB7;--ok:#8FD19E;--ok-soft:#1E2E21;--warn:#F2B27A;--warn-soft:#3A2614;--bad:#FF9C94;--bad-soft:#3A1A18;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}
html[data-theme=estee]{--bg:#080604;--panel:#110D09;--panel2:#17120C;--line:#3A2E18;--line2:#241C10;--ink:#F7ECCF;--muted:#BFA77A;--accent:#D4AF37;--accent-ink:#140E05;--accent-soft:#2A2112;--accent-dark:#F3D77E;--gold:#E9C46A;--gold-soft:#2A2112;--side:#050403;--side-ink:#E9DCB8;--ok:#8FD9A4;--ok-soft:#14261A;--warn:#F2C27A;--warn-soft:#2E2210;--bad:#FF9C94;--bad-soft:#331816;--shadow:0 1px 0 rgba(212,175,55,.08) inset,0 10px 30px rgba(0,0,0,.55)}
html[data-theme=oud]{--bg:#16110E;--panel:#211914;--panel2:#291F19;--line:#3E3027;--line2:#30251E;--ink:#F3E6DA;--muted:#C7AE9A;--accent:#C47A3D;--accent-ink:#FFFFFF;--accent-soft:#3A2A1E;--accent-dark:#F0B07A;--gold:#E3B66B;--gold-soft:#33271A;--side:#120D0A;--side-ink:#EBDACB;--ok:#8FD19E;--ok-soft:#1E2E21;--warn:#F2B27A;--warn-soft:#3A2614;--bad:#FF9C94;--bad-soft:#3A1A18;--shadow:0 8px 24px rgba(0,0,0,.35)}
html[data-theme=rose]{--bg:#FBEFF3;--panel:#FFFFFF;--line:#EFC5D3;--accent:#C2185B;--accent-soft:#FADDE8;--accent-dark:#8C1042;--side:#7A1340;--side-ink:#FCE6EF}
html[data-theme=pearl]{--bg:#F7F6F3;--panel:#FFFFFF;--panel2:#FBFAF8;--line:#E6E2DA;--line2:#EFEDE8;--ink:#23201C;--muted:#6B655C;--accent:#2F2A24;--accent-ink:#FFFFFF;--accent-soft:#EFECE6;--accent-dark:#000;--side:#FFFFFF;--side-ink:#2F2A24}
html[data-theme=lavender]{--bg:#F6F3FB;--line:#E2D8F2;--line2:#EEE8F8;--ink:#2A2140;--muted:#6C6283;--accent:#6D4BB5;--accent-soft:#ECE5F8;--accent-dark:#4B2F8C;--side-ink:#3A2C5C}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}
[dir=rtl] body,.ar{font-family:Tajawal,var(--font)}
a{color:var(--accent-dark);text-decoration:none}
h1,h2,h3{margin:0}
h1.disp,.disp{font-family:var(--disp);font-weight:700;letter-spacing:.3px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh}
.side{width:262px;flex:none;background:var(--side);color:var(--side-ink);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto;z-index:20}
.brand{display:flex;align-items:center;gap:12px;padding:18px 18px 10px}
.brand .logo{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--panel2);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:24px;font-weight:700;color:var(--accent-dark);overflow:hidden;flex:none}
.brand .logo img{width:100%;height:100%;object-fit:contain}
.brand b{font-family:var(--disp);font-size:22px;letter-spacing:2.5px;line-height:1;display:block}
.brand small{font-size:10.5px;letter-spacing:2.5px;font-weight:700;color:var(--muted)}
.nav{padding:6px 10px 10px;display:flex;flex-direction:column;gap:2px}
.nav .g{font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:var(--muted);padding:14px 12px 4px;display:flex;justify-content:space-between;cursor:pointer;user-select:none;border:0;background:none;text-align:left;width:100%}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--rs);color:var(--side-ink);font-size:13.5px;font-weight:500}
.nav a .dot{width:6px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--accent) 35%,transparent);flex:none}
.nav a:hover{background:var(--accent-soft)}
.nav a.on{background:var(--accent-soft);color:var(--accent-dark);font-weight:700}
.nav a.on .dot{background:var(--accent)}
.nav .lock{margin-left:auto;color:var(--gold)}
.maker{margin:auto 12px 12px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#15110D;color:#F3E3B5}
.maker img{width:34px;height:34px;border-radius:9px}
.maker small{display:block;font-size:9.5px;letter-spacing:1.4px;color:#CDB98A}
.maker b{display:block;font-size:13px;letter-spacing:1px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.top .burger{display:none}
.top .who{margin-left:auto;display:flex;align-items:center;gap:10px}
.page{padding:22px 24px 60px;display:flex;flex-direction:column;gap:18px}
.ptitle{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ptitle h1{font-family:var(--disp);font-size:34px;line-height:1}
.ptitle p{margin:4px 0 0;color:var(--muted)}

/* ---------- parts ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card h2{font-size:15.5px;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kpi .l{font-size:12.5px;font-weight:600;color:var(--muted)}
.kpi .v{font-family:var(--disp);font-size:31px;font-weight:700;line-height:1.15}
.kpi .s{font-size:12.5px;color:var(--muted)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp{flex:1}
.muted{color:var(--muted)}.small{font-size:12px}.b{font-weight:700}.r{text-align:right}.c{text-align:center}
.mono{font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:8px;background:var(--accent-soft);color:var(--accent-dark);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--gold-soft);color:var(--gold)}.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.grey{background:var(--line2);color:var(--muted)}
.note{font-size:12.5px;color:var(--gold);background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:10px;padding:8px 12px}
.empty{padding:30px;text-align:center;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn.gold{background:#1A140E;color:#F3E3B5;border-color:#1A140E}
.btn.ghost{background:transparent;border-color:transparent}
.btn.danger{color:var(--bad)}
.btn.sm{min-height:32px;padding:0 10px;font-size:12.5px;border-radius:9px}
.btn.big{min-height:54px;font-size:16px;border-radius:14px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon{width:18px;height:18px;flex:none}

label.f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--muted)}
.in,select.in,textarea.in{height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:0 12px;color:var(--ink);font-size:14px;font-weight:500;width:100%;min-width:0}
textarea.in{height:auto;min-height:70px;padding:10px 12px}
.in:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.form .wide{grid-column:1/-1}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--accent)}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 12px;height:42px;min-width:220px}
.search input{border:0;outline:0;background:transparent;flex:1;min-width:0;height:100%}

table.t{width:100%;border-collapse:collapse}
table.t th{font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:10px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.t tr.click{cursor:pointer}table.t tr.click:hover td{background:var(--panel2)}
.tw{overflow-x:auto;margin:0 -4px;padding:0 4px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:var(--panel);padding:8px 14px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;color:var(--muted)}
.tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* bars */
.bars{display:flex;align-items:flex-end;gap:6px;height:160px;border-bottom:1px solid var(--line)}
.bars div{flex:1;border-radius:6px 6px 0 0;background:color-mix(in srgb,var(--accent) 35%,var(--panel));min-height:2px}
.bars div.hi{background:var(--accent)}
.blab{display:flex;gap:6px}.blab span{flex:1;text-align:center;font-size:10.5px;color:var(--muted)}
.meter{height:8px;border-radius:4px;background:var(--line2);overflow:hidden}.meter i{display:block;height:100%;border-radius:4px;background:var(--bad)}
.li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line2)}
.li:first-of-type{border-top:0}

/* modal + toast */
.modal-bg{position:fixed;inset:0;background:rgba(30,10,20,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal{background:var(--panel);border-radius:20px;width:min(640px,100%);max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);border:1px solid var(--line)}
.modal.wide{width:min(980px,100%)}
.modal .mh{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.modal .mh h3{font-size:17px;flex:1}
.modal .mb{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.modal .mf{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--panel)}
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;align-items:center}
.toast{background:#2A1520;color:#fff;padding:11px 18px;border-radius:12px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:90vw}
.toast.bad{background:var(--bad)}.toast.ok{background:#1E6B3A}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:28px;padding:20px;background:radial-gradient(circle at 20% 10%,var(--accent-soft),transparent 50%),var(--bg)}
.lbox{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;align-items:stretch}
.lbox .shoplogo{width:84px;height:84px;margin:0 auto;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:42px;font-weight:700;color:var(--accent-dark);overflow:hidden;background:var(--panel2)}
.lbox .shoplogo img{width:100%;height:100%;object-fit:contain}
.users{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.users button{border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer}
.users button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.dots{display:flex;justify-content:center;gap:12px;height:18px}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);display:block}
.dots i.on{background:var(--accent)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.keypad button{height:58px;border-radius:16px;border:1px solid var(--line);background:var(--panel2);font-size:22px;font-weight:700;cursor:pointer}
.keypad button:active{background:var(--accent-soft)}
.powered{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:var(--muted);letter-spacing:1px}
.powered img{width:22px;height:22px;border-radius:6px}

/* ---------- POS ---------- */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:16px;align-items:start}
.pos .cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.pos .cats button{flex:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:12px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:transform .08s}
.tile:active{transform:scale(.97)}
.tile .n{font-weight:700;font-size:14px;line-height:1.25}
.tile .k{font-size:11px;color:var(--muted);font-weight:600}
.tile .p{font-weight:800;font-size:15px;color:var(--accent-dark)}
.tile .stk{position:absolute;top:8px;right:8px}
.tile .sw{width:28px;height:4px;border-radius:2px;background:var(--accent)}
.tile .ph{width:calc(100% + 24px);margin:-12px -12px 2px;height:118px;object-fit:cover;border-radius:15px 15px 0 0;background:#fff;display:block}
.tile.hasph .sw{display:none}
.tile .phx{display:flex;align-items:center;justify-content:center;padding:6px 0;background:radial-gradient(circle at 50% 60%,var(--accent-soft),transparent 70%)}
.tile.hasph .row{position:absolute;top:8px;right:8px;width:auto!important}
html[data-look=glass] .tile{background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:blur(10px)}
html[data-look=3d] .tile{box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 35%,var(--line)),var(--shadow)}
html[data-look=pill] .tile{border-radius:28px}
html[data-look=outline] .tile{box-shadow:none;border:2px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:transparent}
html[data-look=gradient] .tile{background:linear-gradient(160deg,var(--panel),var(--accent-soft))}
html[data-look=soft] .tile{border-color:transparent;background:var(--accent-soft);box-shadow:none}
.cart{position:sticky;top:76px;display:flex;flex-direction:column;max-height:calc(100vh - 96px)}
.cart .lines{overflow:auto;flex:1;min-height:120px}
.cline{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line2)}
.cline .q{display:flex;align-items:center;gap:6px}
.cline .q button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);font-weight:800;cursor:pointer}
.totals{border-top:2px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:4px}
.totals .grand{font-family:var(--disp);font-size:34px;font-weight:700;display:flex;justify-content:space-between;align-items:baseline}
.payk{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.payk button{height:48px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);font-weight:800;cursor:pointer}

/* blend builder + cost panel */
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.costbox{position:sticky;top:76px}
.costbox .v{font-family:var(--disp);font-size:36px;font-weight:700}

/* ---------- vault ---------- */
.vault{background:radial-gradient(circle at 15% 0%,#2a2113,transparent 45%),#0E0B08;color:#F3E3B5;border-radius:24px;padding:26px;border:1px solid #3a2e1e;min-height:70vh}
.vault h1{font-family:var(--disp);font-size:38px;color:#E7C766;letter-spacing:1px}
.vault .sub{color:#C9B48A}
.vault .in{background:#1A1510;border-color:#3A2E1E;color:#F5E9CC}
.vault .tabs button{background:#1A1510;border-color:#3A2E1E;color:#C9B48A}
.vault .tabs button.on{background:#D4AF37;border-color:#D4AF37;color:#1A1206}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px}
.vcard{position:relative;border-radius:18px;padding:16px;background:linear-gradient(160deg,#1E1812,#120E0A);border:1px solid #3A2E1E;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left;color:inherit;transition:border-color .15s,transform .1s}
.vcard:hover{border-color:#D4AF37;transform:translateY(-2px)}
.vcard .code{font-size:11px;letter-spacing:2px;color:#B89A55;font-weight:800}
.vcard .nm{font-family:var(--disp);font-size:23px;font-weight:700;color:#F6E7B8;line-height:1.1}
.vcard .ins{font-size:12px;color:#C9B48A}
.vcard .notes{font-size:11.5px;color:#9E8A63}
.vcard .fam{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:7px;background:#2C2416;color:#E7C766}
.vlock{display:flex;flex-direction:column;align-items:center;gap:18px;padding:30px 10px;text-align:center}
.vlock .emb{width:110px;height:110px;border-radius:50%;border:2px solid #D4AF37;display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(212,175,55,.25)}
.vlock .keypad{width:min(300px,100%)}
.vlock .keypad button{background:#1A1510;border-color:#3A2E1E;color:#F3E3B5}
.vlock .dots i{border-color:#D4AF37}.vlock .dots i.on{background:#D4AF37}
.vt td,.vt th{border-color:#2E2519!important;color:#F3E3B5}

/* ---------- small screens / phone app ---------- */
@media (max-width:1100px){.pos{grid-template-columns:1fr}.cart{position:static;max-height:none}.split{grid-template-columns:1fr}.costbox{position:static}}
@media (max-width:820px){
  .side{position:fixed;left:-280px;top:0;transition:left .2s;box-shadow:0 0 40px rgba(0,0,0,.2)}
  .side.open{left:0}
  .top .burger{display:inline-flex}
  .page{padding:16px 14px 80px}
  .ptitle h1{font-size:28px}
  .search{min-width:0;flex:1}
}
@media print{.side,.top{display:none}}

/* ---------- top search ---------- */
.gsearch{position:relative;flex:1;max-width:520px;min-width:180px}
.gsearch .search{min-width:0}
.gres{position:absolute;top:46px;left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.15);max-height:70vh;overflow:auto;z-index:50;padding:6px}
.gres .h{font-size:10.5px;font-weight:800;letter-spacing:1.4px;color:var(--muted);padding:8px 10px 4px}
.gres a{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink)}
.gres a:hover,.gres a.on{background:var(--accent-soft)}
.gres a span{color:var(--muted);font-size:12px;white-space:nowrap}

/* ---------- SHABAB AI ---------- */
#sbai-btn{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;border:1px solid var(--line);background:var(--panel);box-shadow:0 8px 28px rgba(120,60,200,.28);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:90;transition:transform .15s}
#sbai-btn:hover{transform:scale(1.07) rotate(8deg)}
#sbai{position:fixed;right:20px;bottom:88px;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 120px));background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.25);z-index:95;display:flex;flex-direction:column;overflow:hidden}
#sbai[hidden]{display:none}
#sbai .ah{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,color-mix(in srgb,#FF6FA8 12%,var(--panel)),color-mix(in srgb,#3FA9FF 12%,var(--panel)))}
#sbai .ah small{display:block;color:var(--muted);font-size:12px}
#sbai .am{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
#sbai .msg{max-width:88%;padding:10px 12px;border-radius:14px;font-size:13.5px;line-height:1.45}
#sbai .msg > div{margin-top:6px}#sbai .msg .ares{margin-top:4px}
#sbai .msg.ai{background:var(--panel2);border:1px solid var(--line2);align-self:flex-start}
#sbai .msg.me{background:var(--accent);color:var(--accent-ink);align-self:flex-end}
#sbai .ares{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px;background:var(--panel);border:1px solid var(--line2);color:var(--ink);font-size:13px}
#sbai .ares span{color:var(--muted);font-size:11.5px}
#sbai .as{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 8px}
#sbai .as button{border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:5px 10px;font-size:12px;cursor:pointer;color:var(--ink)}
#sbai .af{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
#sbai .af input{flex:1;height:40px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--panel);min-width:0}
@media (max-width:820px){#sbai-btn{bottom:14px;right:14px;width:52px;height:52px}#sbai{right:12px;bottom:76px}.gsearch{order:5;max-width:none;flex-basis:100%}}
.exbar{display:flex;justify-content:flex-end;gap:2px;margin:-4px 0 4px}
.exbar .btn{min-height:28px;padding:0 8px;font-size:12px;color:var(--muted)}
.exbar .btn:hover{color:var(--accent-dark)}
.vault .exbar .btn{color:#C9B48A}

/* ESTEE brand */
.lposter{width:min(380px,36vw);border-radius:26px;overflow:hidden;box-shadow:0 18px 50px rgba(40,20,0,.35);background:#000;flex:none}
.lposter img{display:block;width:100%;height:auto}
@media (max-width:860px){.lposter{display:none}}
.tagline{display:block;font-family:var(--disp);font-style:italic;font-size:13px;letter-spacing:1.5px;color:var(--gold)}
.brand .tagline{font-size:11px;margin-top:1px}
.lbox .shoplogo{border-color:#C9A24A}

.nav a .nb{margin-left:auto;min-width:20px;height:20px;border-radius:10px;background:var(--bad);color:#fff;font-size:11px;font-weight:800;display:inline-grid;place-items:center;padding:0 6px}
.nav a .nb[hidden]{display:none}

/* ===== ESTEE — black & gold premium ===== */
html[data-theme=estee] body{background:radial-gradient(1200px 600px at 75% -10%,rgba(212,175,55,.10),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(212,175,55,.06),transparent 60%),var(--bg);background-attachment:fixed}
html[data-theme=estee] .side{border-right:1px solid rgba(212,175,55,.22);background:linear-gradient(180deg,#0B0806,#050403 60%)}
html[data-theme=estee] .brand b{background:linear-gradient(100deg,#B8862B,#F6E27A 45%,#D4AF37 60%,#9A7020);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=estee] .brand .logo{border:1.5px solid #C9A24A;box-shadow:0 0 18px rgba(212,175,55,.35)}
html[data-theme=estee] .nav .g{color:#9C8456}
html[data-theme=estee] .nav a.on{background:linear-gradient(90deg,rgba(212,175,55,.22),rgba(212,175,55,.04));color:#F6E27A;box-shadow:inset 3px 0 0 #D4AF37}
html[data-theme=estee] .nav a.on .dot{background:#F6E27A;box-shadow:0 0 8px #D4AF37}
html[data-theme=estee] .card{background:linear-gradient(180deg,rgba(255,236,180,.035),rgba(0,0,0,0)),var(--panel);border-color:rgba(212,175,55,.22)}
html[data-theme=estee] .ptitle h1,html[data-theme=estee] h1.disp,html[data-theme=estee] .kpi .v{background:linear-gradient(100deg,#C9A24A,#FFF0B8 42%,#E9C46A 58%,#A87C22);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=estee] .btn{background:#15100A;border-color:rgba(212,175,55,.3);color:#F3E3B5}
html[data-theme=estee] .btn:hover{border-color:#D4AF37;box-shadow:0 0 0 3px rgba(212,175,55,.12)}
html[data-theme=estee] .btn.pri,html[data-theme=estee] .tabs button.on{background:linear-gradient(135deg,#B8862B,#F3D77E 45%,#D4AF37 70%,#A87C22);border-color:#D4AF37;color:#140E05;text-shadow:0 1px 0 rgba(255,255,255,.25)}
html[data-theme=estee] .btn.pri:hover{filter:brightness(1.08)}
html[data-theme=estee] .in,html[data-theme=estee] select.in,html[data-theme=estee] textarea.in{background:#0D0A07;border-color:rgba(212,175,55,.25);color:var(--ink)}
html[data-theme=estee] .in:focus{border-color:#D4AF37;box-shadow:0 0 0 3px rgba(212,175,55,.15)}
html[data-theme=estee] .tile{background:linear-gradient(160deg,#17120C,#0D0A07);border-color:rgba(212,175,55,.25)}
html[data-theme=estee] .tile:hover{border-color:#D4AF37;box-shadow:0 0 22px rgba(212,175,55,.18)}
html[data-theme=estee] .tile .p{color:#F3D77E}
html[data-theme=estee] table.t th{color:#C9A24A;border-color:rgba(212,175,55,.25)}
html[data-theme=estee] table.t td{border-color:rgba(212,175,55,.10)}
html[data-theme=estee] .modal{background:#100C08;border:1px solid rgba(212,175,55,.35);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 40px rgba(212,175,55,.12)}
html[data-theme=estee] .bars div{background:linear-gradient(180deg,#F3D77E,#9A7020)}
html[data-theme=estee] .bars div.hi{background:linear-gradient(180deg,#FFF4C8,#D4AF37);box-shadow:0 0 12px rgba(212,175,55,.6)}
html[data-theme=estee] .login{background:radial-gradient(circle at 30% 20%,rgba(212,175,55,.16),transparent 55%),#060403}
html[data-theme=estee] .lbox{background:#0E0B07;border-color:rgba(212,175,55,.35);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 50px rgba(212,175,55,.10)}
html[data-theme=estee] .keypad button{background:#15100A;border-color:rgba(212,175,55,.25);color:#F3E3B5}
html[data-theme=estee] header.top,html[data-theme=estee] .top{border-color:rgba(212,175,55,.2)}
html[data-theme=estee] ::-webkit-scrollbar{width:10px;height:10px}
html[data-theme=estee] ::-webkit-scrollbar-thumb{background:#3A2E18;border-radius:10px}
html[data-theme=estee] ::-webkit-scrollbar-track{background:#080604}

/* ===== menu 1.3: icons, one group open at a time ===== */
.nav{gap:1px}
.nav a.home,.nav .grp>.g{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:12px;border:0;background:none;cursor:pointer;color:var(--side-ink);font:inherit;text-align:left}
.nav a.home{font-weight:700;font-size:14px;margin-bottom:4px}
.nav .gi{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-dark);flex:none}
.nav .grp>.g{font-size:11.5px;font-weight:800;letter-spacing:1.2px;color:var(--side-ink);margin-top:2px}
.nav .grp>.g .gt{flex:1}
.nav .grp>.g .gc{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:1px 7px;letter-spacing:0}
.nav .grp>.g .chev{color:var(--muted);font-size:16px;transition:transform .15s;width:12px;text-align:center}
.nav .grp>.g:hover,.nav a.home:hover{background:var(--accent-soft)}
.nav .grp.open>.g .chev{transform:rotate(90deg)}
.nav .grp.open>.g{color:var(--accent-dark)}
.nav .grp.open>.g .gi{background:var(--accent);color:var(--accent-ink)}
.nav .grp .gl{display:none;padding:2px 0 6px 22px;margin-left:14px;border-left:1.5px solid var(--line)}
.nav .grp.open .gl{display:flex;flex-direction:column;gap:1px;animation:gopen .16s ease}
@keyframes gopen{from{opacity:0;transform:translateY(-3px)}}
.nav .gl a{padding:7px 10px;font-size:13.5px}
.nav a.home.on{background:var(--accent-soft);color:var(--accent-dark)}
html[data-theme=estee] .nav .gi{background:rgba(212,175,55,.12);color:#E9C46A}
html[data-theme=estee] .nav .grp.open>.g .gi{background:linear-gradient(135deg,#B8862B,#F3D77E);color:#140E05;box-shadow:0 0 12px rgba(212,175,55,.35)}
html[data-theme=estee] .nav .grp.open>.g{color:#F6E27A}
html[data-theme=estee] .nav .grp .gl{border-color:rgba(212,175,55,.25)}
html[data-theme=estee] .nav .grp>.g .gc{background:#15100A;border-color:rgba(212,175,55,.25)}

/* About */
.about{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.ab-hero{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.ab-logo{width:220px;border-radius:18px;flex:none}
.ab-own{margin-top:12px;font-size:13px;line-height:1.7;padding:12px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.ab-founder{display:flex;gap:22px;align-items:center}
.ab-photo{width:120px;height:120px;border-radius:50%;border:3px solid var(--accent);flex:none;object-fit:cover}
.ab-time{position:relative;display:flex;flex-direction:column;gap:18px;padding-left:8px}
.ab-step{display:grid;grid-template-columns:18px 96px 1fr;gap:12px;align-items:start;position:relative}
.ab-step:not(:last-child):before{content:"";position:absolute;left:8px;top:18px;bottom:-22px;width:2px;background:var(--line)}
.ab-dot{width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.ab-when{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--accent-dark);line-height:1}
.ab-step p{margin:4px 0 0;color:var(--muted);line-height:1.7}
.ab-c{display:flex;flex-direction:column;gap:4px;color:inherit}
@media (max-width:700px){.ab-step{grid-template-columns:18px 1fr}.ab-when{grid-column:2}.ab-step>div:last-child{grid-column:2}.ab-founder{flex-direction:column;text-align:center}}
/* Customise */
.cz-g{border-bottom:1px solid var(--line2);padding:8px 0}
.cz-head{font-size:13px;letter-spacing:.6px}
.cz-items{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:6px 0 0 26px}
.cz-f{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2)}
@media (max-width:700px){.cz-items{grid-template-columns:1fr}}
html[data-theme=estee] .ab-own{background:#0D0A07}
.pill.gold{background:var(--gold-soft);color:var(--gold)}
.nav .grp>.g .gt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.9px;font-size:11px}

/* ===== font styles (Settings → Themes & looks) ===== */
html[data-font=royal]{--disp:Cinzel,Georgia,serif;--font:Montserrat,'Segoe UI',Tahoma,sans-serif}
html[data-font=modern]{--disp:Playfair,Georgia,serif;--font:Poppins,'Segoe UI',Tahoma,sans-serif}
html[data-font=clean]{--disp:Inter,'Segoe UI',sans-serif;--font:Inter,'Segoe UI',Tahoma,sans-serif}
html[data-font=soft]{--disp:Marcellus,Georgia,serif;--font:Nunito,'Segoe UI',Tahoma,sans-serif}
html[data-font=fashion]{--disp:Bodoni,Didot,Georgia,serif;--font:Lato,'Segoe UI',Tahoma,sans-serif}
html[data-font=arabic]{--disp:Cairo,Tahoma,sans-serif;--font:Cairo,Tahoma,sans-serif}
html[data-font=system]{--disp:Georgia,'Times New Roman',serif;--font:'Segoe UI',Tahoma,Arial,sans-serif}
html[data-font=royal] .ptitle h1,html[data-font=royal] .kpi .v{letter-spacing:.5px}
html[data-font=clean] .ptitle h1,html[data-font=clean] h1.disp,html[data-font=clean] .kpi .v,html[data-font=arabic] .ptitle h1,html[data-font=arabic] .kpi .v{font-weight:700;letter-spacing:-.3px}
/* text size */
html[data-size=s] body{font-size:13px}
html[data-size=l] body{font-size:15.5px}
html[data-size=xl] body{font-size:17px}
html[data-size=l] .nav a,html[data-size=l] .tile .n{font-size:15px}
html[data-size=xl] .nav a,html[data-size=xl] .tile .n{font-size:16.5px}
html[data-size=xl] .btn{min-height:46px;font-size:15.5px}
html[data-size=s] .nav a{font-size:12.5px}
/* spacing */
html[data-density=compact] .card{padding:12px}
html[data-density=compact] .page{padding:14px 16px}
html[data-density=compact] table.t td,html[data-density=compact] table.t th{padding-top:5px;padding-bottom:5px}
html[data-density=compact] .tile{min-height:92px;padding:9px}
html[data-density=roomy] .card{padding:24px}
html[data-density=roomy] .tile{min-height:128px}
/* corners */
html[data-radius=square]{--r:6px;--rs:5px}
html[data-radius=square] .btn,html[data-radius=square] .in,html[data-radius=square] .tile,html[data-radius=square] .tabs button,html[data-radius=square] .pill{border-radius:6px}
html[data-radius=round]{--r:24px;--rs:14px}
html[data-radius=round] .btn,html[data-radius=round] .in{border-radius:999px}
html[data-radius=round] .tile{border-radius:22px}

/* ===== more themes ===== */
html[data-theme=emerald]{--bg:#06140F;--panel:#0C1F18;--panel2:#11281F;--line:#1E4434;--line2:#16342A;--ink:#EAF5EE;--muted:#9CC2AE;--accent:#D4AF37;--accent-ink:#0A1A12;--accent-soft:#163A2C;--accent-dark:#F1D27A;--gold:#E7C766;--gold-soft:#1A3326;--side:#04100B;--side-ink:#DDEFE4;--ok:#8FD9A4;--ok-soft:#123222;--warn:#F2C27A;--warn-soft:#2E2610;--bad:#FF9C94;--bad-soft:#331816;--shadow:0 10px 30px rgba(0,0,0,.45)}
html[data-theme=sapphire]{--bg:#070C1C;--panel:#0E1630;--panel2:#131D3C;--line:#24345F;--line2:#1A2749;--ink:#E9EEFB;--muted:#9EAED6;--accent:#7FA2FF;--accent-ink:#06102A;--accent-soft:#1A2850;--accent-dark:#B9CCFF;--gold:#D9C27A;--gold-soft:#262A3A;--side:#050916;--side-ink:#DCE4F8;--ok:#8FD9A4;--ok-soft:#122A22;--warn:#F2C27A;--warn-soft:#2E2610;--bad:#FF9C94;--bad-soft:#331816;--shadow:0 10px 30px rgba(0,0,0,.45)}
html[data-theme=champagne]{--bg:#FBF7EF;--panel:#FFFFFF;--panel2:#FDFAF4;--line:#EADFC8;--line2:#F3ECDD;--ink:#2B2216;--muted:#7D6C51;--accent:#A9832F;--accent-ink:#FFFFFF;--accent-soft:#F5ECD7;--accent-dark:#7A5D1C;--gold:#8A6418;--gold-soft:#F8F0DC;--side:#FFFDF8;--side-ink:#3A2E1E;--shadow:0 1px 2px rgba(80,60,20,.06),0 6px 20px rgba(80,60,20,.06)}
html[data-theme=rosegold]{--bg:#FBF3F1;--panel:#FFFFFF;--panel2:#FEF8F7;--line:#F0D8D2;--line2:#F7E9E5;--ink:#3B2420;--muted:#86605A;--accent:#B76E79;--accent-ink:#FFFFFF;--accent-soft:#F8E2E0;--accent-dark:#8C4A55;--gold:#A0743F;--gold-soft:#F8EDE0;--side:#2E1C1A;--side-ink:#F5E3DF;--shadow:0 1px 2px rgba(90,40,40,.06),0 6px 20px rgba(90,40,40,.06)}
html[data-theme=rosegold] .side{background:linear-gradient(180deg,#3A2421,#241513)}
html[data-theme=rosegold] .nav a.on{background:rgba(232,180,170,.18);color:#FFE1DA}
html[data-theme=rosegold] .nav .gi{background:rgba(232,180,170,.16);color:#F3C9C0}
html[data-theme=rosegold] .nav .grp.open>.g{color:#FFE1DA}
html[data-theme=rosegold] .nav .grp>.g .gc{background:#3A2421;border-color:#5A3A35;color:#E9C9C2}
html[data-theme=rosegold] .brand b{color:#FFE9E3}
html[data-theme=champagne] .btn.pri{background:linear-gradient(135deg,#C9A24A,#A9832F)}
html[data-theme=emerald] .btn.pri,html[data-theme=emerald] .tabs button.on{background:linear-gradient(135deg,#B8862B,#F3D77E 50%,#D4AF37)}

/* Themes & looks page */
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.th-card{border:2px solid var(--line);border-radius:16px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:10px;text-align:left;transition:transform .1s}
.th-card:hover,.ft-card:hover{transform:translateY(-2px)}
.th-card.on,.ft-card.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.th-mini{display:flex;gap:8px;height:54px}.th-mini i{width:34%;border-radius:8px}.th-mini>span{flex:1;display:flex;flex-direction:column;gap:6px}.th-mini b{flex:1;border-radius:6px}
.th-name{font-weight:800;font-size:13px}
.ft-card{border:2px solid var(--line);border-radius:16px;padding:14px;background:var(--panel2);cursor:pointer;display:flex;flex-direction:column;gap:4px;text-align:left;color:var(--ink)}
.ft-h{font-size:24px;font-weight:700;line-height:1.1}.ft-b{font-size:13px}.ft-n{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-top:4px}

.lgbox{width:100%;height:110px;border:1px dashed var(--line);border-radius:12px;display:grid;place-items:center;margin:6px 0;overflow:hidden;background:var(--panel2)}
.lgbox img{max-width:90%;max-height:100px;object-fit:contain}