@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,380..640&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{--navy:#0e2a3d;--navy-2:#153a52;--teal:#2f7a6e;--teal-deep:#1f594f;--rust:#b5581f;--sand:#f3efe3;--paper:#fffdf8;--ink:#1b2530;--muted:#6b6153;--line:#e4dcc8;--green:#1f7a4d;--yellow:#a4720b;--red:#b3401f;--font-display:'Fraunces',ui-serif,Georgia,serif;--font-body:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);background:var(--sand);color:var(--ink)}
button,input,select{font:inherit}
button{cursor:pointer;border:0;background:none}
.hidden{display:none!important}
.kicker{font-size:11px;font-weight:700;color:var(--teal-deep)}
.brand-mark{width:44px;height:44px;border-radius:12px;background:var(--rust);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:17px}

/* ---- login ---- */
.login-view{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--navy)}
.login-card{width:min(430px,100%);background:var(--paper);border-radius:22px;padding:34px;box-shadow:0 30px 90px rgba(0,0,0,.35)}
.login-card .brand-mark{margin-bottom:20px}
.login-card h1{font-family:var(--font-display);font-weight:560;font-size:29px;letter-spacing:-.5px;margin:6px 0;color:var(--navy)}
.login-card p{color:var(--muted);line-height:1.6;font-size:13px}
.login-card form{display:grid;gap:11px;margin:20px 0}
.login-card input,.admin-input{border:1px solid var(--line);border-radius:11px;padding:13px;outline:none;background:var(--sand);color:var(--ink)}
.login-card input:focus,.admin-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,122,110,.15)}
.login-card small{color:#98a2b3;line-height:1.5}

.primary{background:var(--rust);color:#fff;border-radius:11px;padding:13px 17px;font-weight:700;font-size:14px}
.primary:hover{filter:brightness(1.06)}
.ghost,.text-btn{background:var(--paper);border:1px solid var(--line);color:var(--navy);border-radius:10px;padding:9px 12px;font-weight:700;font-size:12px}
.text-btn{background:none;border:0;color:var(--teal-deep);padding:0}

/* ---- shell ---- */
.admin-shell{min-height:100vh;display:grid;grid-template-columns:230px 1fr}
.sidebar{background:var(--navy);color:#fff;padding:22px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:10px;padding:3px 8px 28px}
.side-brand b{display:block;font-family:var(--font-display);font-size:16px;font-weight:600}
.side-brand small{display:block;color:#9fb0ca;font-size:10px;margin-top:2px}
.sidebar nav{display:grid;gap:4px}
.nav{height:45px;border-radius:11px;color:#a9b6ca;text-align:left;padding:0 13px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:11px}
.nav.active,.nav:hover{background:rgba(255,255,255,.09);color:#fff}
.logout{margin-top:auto;background:rgba(255,255,255,.07);color:#c8d2e2;padding:12px;border-radius:11px;font-weight:600;font-size:13px}
.main{min-width:0;padding:25px clamp(18px,4vw,48px) 60px}
.admin-top{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px;gap:14px;flex-wrap:wrap}
.admin-top h2{font-family:var(--font-display);font-weight:560;margin:4px 0 0;font-size:28px;letter-spacing:-.5px;color:var(--navy)}
.view-store{color:var(--teal-deep);font-weight:700;font-size:13px}

/* ---- stats & panels ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px}
.stat span{display:block;color:var(--muted);font-size:11px;font-weight:600}
.stat small{display:block;color:var(--muted);font-size:11px}
.stat b{display:block;font-family:var(--font-display);font-weight:600;font-size:26px;margin:6px 0;color:var(--navy)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:16px}
.panel.narrow{max-width:700px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.panel-head h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--navy)}
.panel-head small{color:var(--muted);font-size:11px}

/* ---- sales chart ---- */
.chart-wrap{padding:6px 2px 0}
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:150px}
.chart-bars .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.chart-bars .bar{width:100%;max-width:26px;border-radius:6px 6px 3px 3px;background:var(--teal);min-height:3px;transition:height .3s}
.chart-bars .bar-col.top .bar{background:var(--rust)}
.chart-bars .bar-label{font-size:9px;color:var(--muted);font-weight:700;white-space:nowrap}
.chart-empty{padding:30px;text-align:center;color:var(--muted);font-size:13px}
.top-products{display:grid;gap:10px}
.top-row{display:flex;align-items:center;gap:12px}
.top-row .rank{width:24px;height:24px;border-radius:7px;background:var(--sand);color:var(--navy);font-weight:800;font-size:11px;display:grid;place-items:center;flex:none}
.top-row .fill{flex:1;height:8px;background:var(--sand);border-radius:99px;overflow:hidden}
.top-row .fill i{display:block;height:100%;background:var(--teal);border-radius:99px}
.top-row b{font-size:12px;white-space:nowrap}
.top-row small{color:var(--muted);font-size:11px;white-space:nowrap}

.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse;font-size:12px}
.table th{color:var(--muted);text-align:left;font-size:10px;font-weight:700;padding:10px;border-bottom:1px solid var(--line)}
.table td{padding:12px 10px;border-bottom:1px solid #efe8d8;white-space:nowrap}
.prod-cell{display:flex;align-items:center;gap:10px}
.prod-cell img{width:42px;height:42px;border-radius:9px;object-fit:cover}
.pill{display:inline-flex;padding:5px 8px;border-radius:7px;font-size:10px;font-weight:700;background:var(--sand);color:var(--muted)}
.pill.green{background:#e3f3e9;color:var(--green)}
.pill.yellow{background:#fbeecb;color:var(--yellow)}
.pill.red{background:#fbe4da;color:var(--red)}
.actions{display:flex;gap:6px}
.small-btn{padding:7px 9px;border-radius:8px;background:var(--sand);font-size:11px;font-weight:700;color:var(--navy)}
.small-btn.danger{background:#fbe4da;color:var(--red)}
.settings-form{display:grid;gap:14px}
.settings-form label{display:grid;gap:7px;font-size:12px;font-weight:700}
.security-note{margin-top:22px;background:var(--sand);border-radius:14px;padding:15px;font-size:12px}
.security-note b{color:var(--navy)}
.security-note p{color:var(--muted);line-height:1.55}
.security-note code{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(11,26,39,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal.show{display:flex}
.modal-card{background:var(--paper);width:min(620px,100%);max-height:92vh;overflow:auto;border-radius:20px;padding:22px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.modal-head h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--navy)}
.close{width:36px;height:36px;border-radius:10px;background:var(--sand);font-size:20px}
.product-form{display:grid;gap:12px}
.product-form label{display:grid;gap:6px;font-size:11px;font-weight:700;color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.image-preview{height:190px;border-radius:16px;background:var(--sand);display:grid;place-items:center;color:var(--muted);overflow:hidden}
.image-preview img{width:100%;height:100%;object-fit:cover}
.gallery-hint{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.gallery-hint button{width:42px;height:42px;border-radius:9px;overflow:hidden;border:2px solid transparent}
.gallery-hint button.active{border-color:var(--teal)}
.gallery-hint img{width:100%;height:100%;object-fit:cover;display:block}
.switch{display:flex!important;grid-template-columns:auto 1fr;align-items:center;gap:8px}
.switch input{display:none}
.switch span{width:38px;height:21px;background:#d8cfb8;border-radius:99px;position:relative}
.switch span:after{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+span{background:var(--teal)}
.switch input:checked+span:after{transform:translateX(17px)}
.toast{position:fixed;left:50%;top:18px;transform:translate(-50%,-15px);background:var(--navy);color:#fff;padding:11px 15px;border-radius:11px;z-index:100;opacity:0;transition:.2s;font-size:12px;font-weight:700}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:900px){
  .admin-shell{grid-template-columns:72px 1fr}
  .sidebar{padding:15px 9px}
  .side-brand{justify-content:center}
  .side-brand>div:not(.brand-mark),.nav span,.logout{display:none}
  .nav{justify-content:center;padding:0}
  .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .main{padding:18px 12px 40px}
  .admin-top h2{font-size:24px}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:14px}
  .stat b{font-size:18px}
  .panel{padding:14px}
  .two{grid-template-columns:1fr}
  .view-store{font-size:11px}
}

/* ===== Admin UI Refresh ===== */
body{background:radial-gradient(circle at 90% 0,#fff 0,transparent 34%),var(--sand)}
.sidebar{box-shadow:8px 0 30px rgba(14,42,61,.08)}
.nav{transition:background .18s ease,transform .18s ease}.nav:hover{transform:translateX(2px)}
.stat,.panel{box-shadow:0 8px 28px rgba(14,42,61,.045)}
.stat{transition:transform .2s ease,box-shadow .2s ease}.stat:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(14,42,61,.08)}
.primary,.ghost,.small-btn{transition:transform .18s ease,filter .18s ease}.primary:hover,.ghost:hover,.small-btn:hover{transform:translateY(-1px)}
.promo-editor{margin-top:16px}.promo-editor .settings-form{gap:14px}.promo-editor textarea{resize:vertical;min-height:88px}
.table-wrap{border-radius:12px;overflow:auto}
@media(max-width:820px){.admin-shell{grid-template-columns:1fr}.sidebar{position:sticky;height:auto;z-index:20;padding:12px}.side-brand{padding-bottom:10px}.sidebar nav{display:flex;overflow:auto}.nav{min-width:max-content}.logout{margin-top:10px}.main{padding:18px 14px 45px}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stats{grid-template-columns:1fr 1fr}.stat b{font-size:21px}}