:root { --ink:#211638; --leaf:#21005D; --leaf-light:#4C16A8; --mint:#E8E0F5; --cream:#F7F4FF; --paper:#FFFFFF; --line:#D9CFF0; --muted:#827790; --text-secondary:#514565; --saffron:#FFC928; --accent-hover:#F0B800; --success:#237A48; --danger:#C62828; --disabled:#E8E2F0; --divider:#E8E0F5; --bright:#4C16A8; --shadow:0 18px 50px rgba(33,22,56,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.eyebrow { color:var(--leaf); font-size:11px; font-weight:800; letter-spacing:1.4px; }
.brand-mark { display:flex; align-items:center; gap:11px; }
.brand-mark b,.brand-mark small { display:block; }
.brand-mark b { font-size:13px; letter-spacing:1px; }
.brand-mark small { color:var(--leaf); font-size:10px; font-weight:800; letter-spacing:2px; margin-top:3px; }
.brand-icon { display:block; width:44px; height:44px; object-fit:cover; background:var(--ink); border-radius:14px; }
.auth-layout { min-height:100vh; display:grid; grid-template-columns:1.08fr .92fr; }
.auth-visual { display:flex; flex-direction:column; justify-content:space-between; min-height:100vh; padding:42px clamp(36px,8vw,120px); color:#fff; background:linear-gradient(135deg,rgba(13,45,36,.96),rgba(18,86,67,.9)),url('https://images.unsplash.com/photo-1607623814075-e51df1bdc82f?auto=format&fit=crop&w=1600&q=80') center/cover; }
.auth-visual .brand-mark b { color:#fff; }
.auth-visual .brand-mark small { color:#9ad3b8; }
.auth-visual-copy { max-width:550px; margin:auto 0; }
.auth-visual-copy .eyebrow { color:#9ad3b8; }
.auth-visual-copy h1 { margin:18px 0; font-size:clamp(42px,5vw,76px); line-height:.98; letter-spacing:-3px; }
.auth-visual-copy em { color:var(--saffron); font-style:normal; }
.auth-visual-copy p { max-width:380px; color:#d5e7df; font-size:17px; line-height:1.55; }
.visual-stats { display:flex; gap:55px; padding-top:28px; border-top:1px solid rgba(255,255,255,.2); }
.visual-stats b,.visual-stats small { display:block; }.visual-stats small { color:#9bc4b2; margin-top:5px; }
.auth-panel { display:grid; place-items:center; position:relative; padding:36px; background:var(--cream); }
.auth-panel .mobile-brand { display:none; }
.login-card { width:min(100%,410px); padding:14px; }
.login-card h2 { margin:12px 0 5px; font-size:35px; letter-spacing:-1px; }
.login-card form { margin-top:28px; }
label { display:block; margin-bottom:17px; color:var(--ink); font-size:13px; font-weight:750; }
input { display:block; width:100%; height:50px; margin-top:8px; padding:0 15px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:12px; outline:none; }
input:focus { border-color:var(--leaf); box-shadow:0 0 0 4px rgba(27,128,104,.1); }
.button { border:0; border-radius:12px; padding:14px 18px; font-weight:800; }.button.primary { color:#fff; background:var(--ink); }.button.full { display:flex; justify-content:space-between; width:100%; }.button:hover { transform:translateY(-1px); }
.form-error { min-height:20px; color:var(--danger); font-size:12px; font-weight:700; }
.demo-note { margin-top:22px; padding:13px 15px; background:var(--mint); border-radius:12px; font-size:12px; }.demo-note span { color:var(--leaf); font-size:10px; font-weight:900; letter-spacing:1px; }.demo-note p { margin:7px 0 0; }
.auth-footer { position:absolute; bottom:28px; color:var(--muted); font-size:11px; text-align:center; }
.admin-layout { min-height:100vh; display:flex; }
.sidebar { position:sticky; top:0; display:flex; flex-direction:column; width:258px; height:100vh; padding:30px 17px 22px; color:#d9eee5; background:var(--ink); }.sidebar-brand { padding:0 12px 28px; }.sidebar-brand b { color:#fff; }.sidebar-brand small { color:#80c4a7; }
.branch-selector { display:flex; align-items:center; gap:10px; padding:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:12px; }.branch-selector small,.branch-selector b { display:block; }.branch-selector small { color:#80c4a7; font-size:9px; letter-spacing:1px; }.branch-selector b { margin-top:3px; color:#fff; font-size:13px; }.status-dot { width:8px; height:8px; background:#60ce91; border-radius:50%; box-shadow:0 0 0 4px rgba(96,206,145,.12); }.chevron { margin-left:auto; color:#9bc4b2; }
nav { display:grid; gap:5px; margin-top:25px; }.nav-item { display:flex; align-items:center; gap:13px; width:100%; padding:12px 13px; color:#a9c9bd; background:transparent; border:0; border-radius:10px; text-align:left; font-size:13px; }.nav-item span { width:18px; color:#8ec7ae; font-size:17px; text-align:center; }.nav-item i { margin-left:auto; padding:2px 7px; color:var(--ink); background:var(--saffron); border-radius:9px; font-size:10px; font-style:normal; font-weight:900; }.nav-item:hover,.nav-item.active { color:#fff; background:rgba(255,255,255,.1); }.nav-item.active span { color:var(--saffron); }.sidebar-bottom { display:grid; gap:5px; margin-top:auto; }.help-link,.logout-link { padding:11px 13px; color:#a9c9bd; background:none; border:0; text-align:left; font-size:12px; }.help-link span,.logout-link span { display:inline-grid; place-items:center; width:18px; margin-right:10px; color:#8ec7ae; }
.admin-main { min-width:0; flex:1; }.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:34px clamp(22px,4vw,58px) 23px; border-bottom:1px solid var(--line); background:var(--paper); }.topbar h1 { margin:8px 0 0; font-size:27px; letter-spacing:-.7px; }.topbar-actions { display:flex; align-items:center; gap:18px; }.icon-button,.notification-button { display:grid; place-items:center; position:relative; width:38px; height:38px; color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:11px; }.notification-button i { position:absolute; top:-5px; right:-5px; display:grid; place-items:center; width:16px; height:16px; color:#fff; background:var(--danger); border:2px solid #fff; border-radius:50%; font-size:9px; font-style:normal; }.admin-profile { display:flex; align-items:center; gap:9px; font-size:12px; }.admin-profile b,.admin-profile small { display:block; }.admin-profile small { color:var(--muted); margin-top:2px; }.avatar { display:grid; place-items:center; width:35px; height:35px; color:#fff; background:var(--leaf); border-radius:50%; font-weight:800; }
.view-root { padding:32px clamp(22px,4vw,58px) 60px; }.section-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:20px; }.section-head h2 { margin:0; font-size:18px; }.ghost-button { padding:9px 13px; color:var(--leaf); background:transparent; border:1px solid #a8d8c4; border-radius:9px; font-size:12px; font-weight:800; }.primary-small { padding:10px 14px; color:#fff; background:var(--ink); border:0; border-radius:9px; font-size:12px; font-weight:800; }
.section-actions { display:flex; align-items:center; gap:10px; }
.setting-control { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.danger-button { padding:10px 14px; color:#fff; background:var(--danger); border:0; border-radius:9px; font-size:12px; font-weight:800; }
.danger-button:disabled { opacity:.55; cursor:wait; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.metric-card { padding:19px; background:var(--paper); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); }.metric-card .metric-icon { float:right; display:grid; place-items:center; width:34px; height:34px; color:var(--leaf); background:var(--mint); border-radius:10px; }.metric-card small,.metric-card strong { display:block; }.metric-card small { color:var(--muted); font-size:11px; font-weight:700; }.metric-card strong { margin:11px 0 7px; font-size:26px; letter-spacing:-1px; }.trend { color:var(--leaf); font-size:11px; font-weight:800; }.trend.down { color:var(--danger); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,.85fr); gap:20px; margin-top:23px; }.panel { padding:20px; background:var(--paper); border:1px solid var(--line); border-radius:16px; }.chart { display:flex; align-items:end; gap:12px; height:185px; padding:22px 3px 0; border-bottom:1px solid var(--line); }.bar-wrap { display:flex; flex:1; height:100%; flex-direction:column; justify-content:end; align-items:center; gap:7px; }.bar { width:100%; max-width:34px; background:linear-gradient(180deg,var(--bright,#39a982),var(--leaf)); border-radius:7px 7px 2px 2px; }.bar-wrap small { color:var(--muted); font-size:10px; }.legend { display:flex; justify-content:space-between; margin-top:14px; color:var(--muted); font-size:11px; }.legend b { color:var(--ink); font-size:17px; }.legend .dot { display:inline-block; width:7px; height:7px; margin-right:5px; background:var(--leaf); border-radius:50%; }.legend .dot.saffron { background:var(--saffron); }
.quick-list { display:grid; gap:3px; }.quick-row { display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); font-size:12px; }.quick-row:last-child { border:0; }.quick-row b { display:block; }.quick-row small { display:block; margin-top:3px; color:var(--muted); }.pill { display:inline-flex; padding:5px 8px; border-radius:6px; font-size:10px; font-weight:850; }.pill.green { color:#187054; background:#dcf4e8; }.pill.orange { color:#99601c; background:#fff0d9; }.pill.red { color:#a93838; background:#fde3e3; }.pill.blue { color:#2c6993; background:#e2f0fa; }
.table-panel { margin-top:22px; overflow:hidden; padding:0; }.table-panel .section-head { margin:0; padding:20px; }.data-table { width:100%; border-collapse:collapse; font-size:12px; }.data-table th { padding:0 20px 12px; color:var(--muted); border-bottom:1px solid var(--line); text-align:left; font-size:10px; letter-spacing:.5px; text-transform:uppercase; }.data-table td { padding:15px 20px; border-bottom:1px solid var(--line); }.data-table tr:last-child td { border:0; }.item-name { display:flex; align-items:center; gap:9px; font-weight:800; }.item-thumb { display:grid; place-items:center; width:32px; height:32px; background:var(--mint); border-radius:8px; }.price { font-weight:850; }.select-small { padding:7px 9px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:7px; font-size:11px; }
.category-panel { margin-bottom:22px; }.inline-form { display:grid; grid-template-columns:1fr 1.2fr auto; gap:10px; margin:4px 0 18px; }.inline-form input { margin:0; height:40px; }.category-list { display:grid; gap:8px; }.category-row { display:grid; grid-template-columns:minmax(150px,1fr) minmax(160px,1fr) auto auto; align-items:center; gap:9px; padding:10px 0; border-top:1px solid var(--line); }.category-row b,.category-row small { display:block; }.category-row small { margin-top:3px; color:var(--muted); font-size:11px; }.category-name-input { height:34px; margin:0; }.price-list { display:grid; gap:3px; min-width:130px; }.variant-price { color:var(--ink); font-size:11px; }.data-table td small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }.status-hint.success { color:#187054; }.status-hint.warning { color:#99601c; }.status-hint.danger { color:#a93838; }
.catalog-thumb { display:block; width:32px; height:32px; object-fit:cover; border-radius:8px; }
.modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:22px; background:rgba(13,35,29,.5); }.modal-card { width:min(100%,560px); max-height:90vh; overflow:auto; padding:24px; background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.2); }.modal-card .section-head { margin-bottom:18px; }.modal-card label { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; }.modal-card label .select-small { min-width:220px; }.modal-card textarea { display:block; width:100%; min-height:78px; margin-top:8px; padding:12px 15px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:12px; outline:none; resize:vertical; }.modal-card textarea:focus { border-color:var(--leaf); box-shadow:0 0 0 4px rgba(27,128,104,.1); }.form-two-column { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.form-two-column label { display:block; }.form-two-column .select-small { width:100%; margin-top:8px; }.variant-editor { display:grid; gap:9px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }.variant-editor > small { color:var(--muted); }.variant-edit-row { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:8px; }.variant-edit-row input { height:38px; margin:0; }.product-create-variant { grid-template-columns:1.2fr .8fr .8fr .8fr auto; }.add-variant-button { justify-self:start; }.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.branch-card,.partner-card { padding:18px; background:var(--paper); border:1px solid var(--line); border-radius:15px; }.branch-card h3,.partner-card h3 { margin:12px 0 5px; font-size:15px; }.branch-card p,.partner-card p { margin:0; color:var(--muted); font-size:12px; }.card-meta { display:flex; justify-content:space-between; align-items:center; margin-top:16px; color:var(--muted); font-size:11px; }.partner-top { display:flex; align-items:center; gap:10px; }.partner-avatar { display:grid; place-items:center; width:39px; height:39px; color:var(--ink); background:var(--mint); border-radius:50%; font-weight:900; }.partner-top h3 { margin:0; }.partner-top p { margin-top:3px; }.setting-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }.setting-row:last-child { border:0; }.setting-row b,.setting-row small { display:block; }.setting-row small { margin-top:4px; color:var(--muted); font-size:11px; }
.toast { position:fixed; right:24px; bottom:24px; z-index:5; padding:12px 16px; color:#fff; background:var(--ink); border-radius:10px; box-shadow:var(--shadow); font-size:12px; transform:translateY(100px); opacity:0; transition:.25s; }.toast.visible { transform:translateY(0); opacity:1; }.mobile-only { display:none; }
.report-filters { display:flex; align-items:flex-end; gap:10px; }.report-filters label { margin:0; color:var(--muted); font-size:10px; }.report-filters input { width:145px; height:38px; margin-top:5px; padding:0 9px; font-size:12px; }
.report-presets { display:flex; justify-content:flex-end; gap:7px; margin-bottom:8px; }.report-presets .ghost-button { padding:7px 10px; font-size:10px; }
 .banner-settings { margin-top:22px; }.banner-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }.banner-card { padding:16px; background:var(--cream); border:1px solid var(--line); border-radius:15px; }.banner-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }.banner-card h3 { margin:6px 0 0; font-size:15px; }.banner-preview { display:flex; align-items:flex-end; height:120px; margin:15px 0; padding:10px; color:#fff; background-color:var(--ink); background-position:center; background-size:cover; border-radius:11px; overflow:hidden; }.banner-preview span { padding:4px 7px; background:rgba(22,51,44,.8); border-radius:5px; font-size:10px; }.banner-card label { margin-bottom:11px; }.banner-card input,.banner-card textarea { display:block; width:100%; margin-top:6px; padding:9px 10px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; outline:none; }.banner-card input { height:38px; }.banner-card textarea { min-height:56px; resize:vertical; }.banner-card input:focus,.banner-card textarea:focus { border-color:var(--leaf); box-shadow:0 0 0 3px rgba(27,128,104,.1); }.banner-card .select-small { width:100%; margin-top:6px; }.banner-enabled { display:flex; align-items:center; justify-content:space-between; gap:8px; }.banner-enabled input[type="checkbox"] { width:18px; height:18px; margin:0; accent-color:var(--leaf); }
@media(max-width:1050px) { .metric-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid { grid-template-columns:1fr; }.cards-grid { grid-template-columns:repeat(2,1fr); }.banner-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:760px) { .auth-layout { display:block; }.auth-visual { display:none; }.auth-panel { min-height:100vh; align-content:start; padding:28px 20px; }.auth-panel .mobile-brand { display:flex; margin-bottom:55px; }.auth-footer { position:static; margin-top:35px; }.sidebar { position:fixed; z-index:4; left:-270px; transition:.2s; }.sidebar.open { left:0; }.topbar { padding:22px 18px; }.mobile-only { display:grid; }.topbar h1 { font-size:21px; }.topbar .eyebrow { font-size:9px; }.admin-profile span:not(.avatar) { display:none; }.topbar-actions { gap:7px; }.view-root { padding:24px 18px 45px; }.metric-grid { gap:10px; }.metric-card { padding:14px; }.metric-card strong { font-size:21px; }.table-panel { overflow-x:auto; }.data-table { min-width:700px; }.cards-grid { grid-template-columns:1fr; }.inline-form { grid-template-columns:1fr; }.category-row { grid-template-columns:1fr 1fr; }.category-row > div { grid-column:1 / -1; }.category-row .category-name-input { grid-column:1 / -1; }.section-actions { align-items:flex-end; flex-direction:column; }.report-presets { justify-content:flex-start; }.report-filters { width:100%; align-items:stretch; flex-wrap:wrap; }.report-filters label { flex:1; }.report-filters input { width:100%; }.modal-card label { align-items:flex-start; flex-direction:column; gap:7px; }.modal-card label .select-small { width:100%; }.form-two-column { grid-template-columns:1fr; gap:0; }.variant-edit-row,.product-create-variant { grid-template-columns:1fr 1fr; }.variant-edit-row span { grid-column:1 / -1; }.product-create-variant button { grid-column:1 / -1; justify-self:start; } }
@media(max-width:760px) { .banner-grid { grid-template-columns:1fr; } }

/* Palette-only brand refresh. Layout, sizing, typography and behavior remain unchanged. */
.auth-visual { background:linear-gradient(135deg,rgba(33,0,93,.96),rgba(76,22,168,.9)),url('https://images.unsplash.com/photo-1607623814075-e51df1bdc82f?auto=format&fit=crop&w=1600&q=80') center/cover; }
.auth-visual .brand-mark small,.auth-visual-copy .eyebrow,.visual-stats small { color:var(--line); }
.auth-visual-copy p { color:var(--divider); }
input:focus,.modal-card textarea:focus,.banner-card input:focus,.banner-card textarea:focus { box-shadow:0 0 0 4px rgba(33,0,93,.1); }
.sidebar { color:var(--divider); }
.sidebar-brand small,.branch-selector small { color:var(--line); }
.status-dot { background:var(--success); box-shadow:0 0 0 4px rgba(35,122,72,.12); }
.chevron { color:var(--line); }
.nav-item,.help-link,.logout-link { color:var(--line); }
.nav-item span,.help-link span,.logout-link span { color:var(--border); }
.ghost-button { border-color:var(--border); }
.bar { background:linear-gradient(180deg,var(--bright),var(--leaf)); }
.pill.green,.status-hint.success { color:var(--success); }
.pill.green { background:var(--divider); }
.pill.orange,.status-hint.warning { color:var(--accent-hover); }
.pill.orange { background:#FFF3CC; }
.pill.red,.status-hint.danger { color:var(--danger); }
.pill.red { background:#F8DEDE; }
.pill.blue { color:var(--leaf-light); background:var(--divider); }
.modal-backdrop { background:rgba(33,22,56,.5); }
.modal-card textarea:focus { box-shadow:0 0 0 4px rgba(33,0,93,.1); }
.banner-preview span { background:rgba(33,22,56,.8); }
.banner-card input:focus,.banner-card textarea:focus { box-shadow:0 0 0 3px rgba(33,0,93,.1); }