/* ─────────────────────────────────────────────────────────────────────────────
   hercai café — Admin Panel CSS v2
   Dark artisan + functional layout
───────────────────────────────────────────────────────────────────────────── */
:root{
  --ink:#0E0A0C; --ink-2:#16101A; --ink-3:#20182A; --ink-4:#2C2038;
  --brand:#D4833A; --brand-dim:#A86228; --brand-glow:rgba(212,131,58,.15);
  --ivory:#EDE4D8; --ivory-dim:#B8A898; --ivory-faint:#6B5D54;
  --sage:#7A9E78; --sage-bg:rgba(122,158,120,.12);
  --danger:#C0392B; --danger-bg:rgba(192,57,43,.12);
  --line:rgba(255,255,255,.08); --line-hover:rgba(212,131,58,.3);
  --sidebar-w:230px; --topbar-h:58px;
  --radius:12px; --radius-sm:8px;
  --shadow:0 4px 24px rgba(0,0,0,.5); --shadow-sm:0 1px 8px rgba(0,0,0,.35);
  --t:.2s ease;
  --amber-dim:#A86228;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:"DM Sans",system-ui,sans-serif;background:var(--ink);color:var(--ivory);-webkit-font-smoothing:antialiased;min-height:100vh}
/* no grain */
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.admin-sidebar{width:var(--sidebar-w);background:var(--ink-2);border-right:1px solid var(--line);position:fixed;top:0;left:0;bottom:0;z-index:300;display:flex;flex-direction:column;transition:transform var(--t)}
.sidebar-brand{padding:18px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.sidebar-brand img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.85}
.sidebar-ver{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-faint)}
.sidebar-nav{flex:1;padding:12px 8px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;color:var(--ivory-faint);transition:all var(--t);margin-bottom:1px;position:relative}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--ivory)}
.nav-item.active{background:var(--brand-glow);color:var(--brand);border:1px solid rgba(212,131,58,.2)}
.nav-badge{margin-left:auto;background:var(--brand);color:#0E0A0C;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px}
.sidebar-footer{padding:10px 8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.sidebar-link{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:500;color:var(--ivory-faint);transition:all var(--t)}
.sidebar-link:hover{background:rgba(255,255,255,.05);color:var(--ivory)}
.sidebar-logout:hover{color:#E07B70;background:var(--danger-bg)}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:290}
.hidden{display:none!important}

/* ── Admin Body ──────────────────────────────────────────────────────────── */
.admin-body{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
.admin-topbar{height:var(--topbar-h);background:rgba(22,16,26,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:200}
.topbar-toggle{display:none;background:none;border:none;padding:6px;border-radius:6px;color:var(--ivory-faint);transition:color var(--t)}
.topbar-toggle:hover{color:var(--ivory)}
.topbar-title{font-family:"Cormorant Garamond",serif;font-size:20px;font-weight:600;color:var(--brand);flex:1}
.topbar-actions{display:flex;align-items:center;gap:12px}
.topbar-icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;color:var(--ivory-faint);transition:all var(--t);background:none;border:none;cursor:pointer}
.topbar-icon-btn:hover{color:var(--ivory);background:rgba(255,255,255,.06)}
.topbar-badge{position:absolute;top:2px;right:2px;background:var(--brand);color:#0E0A0C;font-size:9px;font-weight:700;padding:0 4px;border-radius:6px;min-width:14px;text-align:center}
.topbar-user{display:flex;align-items:center;gap:10px;padding-left:12px;border-left:1px solid var(--line)}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#0E0A0C;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.user-info{display:flex;flex-direction:column}
.user-name{font-size:13px;font-weight:600;line-height:1.2}
.user-role{font-size:10.5px;color:var(--ivory-faint);letter-spacing:.04em;text-transform:uppercase}
.admin-content{flex:1;padding:22px;max-width:100%}

/* ── Announcements (admin notification bar) ──────────────────────────────── */
.site-announcement{display:flex;align-items:center;gap:10px;padding:10px 22px;font-size:13.5px;font-weight:500}
.announcement-info{background:rgba(74,144,217,.12);color:#7AB5E8;border-bottom:1px solid rgba(74,144,217,.2)}
.announcement-warning{background:rgba(232,160,0,.12);color:#E8C060;border-bottom:1px solid rgba(232,160,0,.2)}
.announcement-success{background:rgba(122,158,120,.12);color:var(--sage);border-bottom:1px solid rgba(122,158,120,.2)}
.announcement-promo{background:var(--brand-glow);color:var(--brand);border-bottom:1px solid var(--line-hover)}
.ann-label{margin-left:auto;font-size:10.5px;opacity:.7;font-weight:600;letter-spacing:.05em;text-transform:uppercase}

/* ── Flash ───────────────────────────────────────────────────────────────── */
.flash-container{padding:12px 22px 0;display:flex;flex-direction:column;gap:8px}
.flash{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;cursor:pointer;transition:opacity .3s,transform .3s;animation:flashIn .3s ease}
@keyframes flashIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.flash-success{background:var(--sage-bg);color:var(--sage);border:1px solid rgba(122,158,120,.25)}
.flash-error{background:var(--danger-bg);color:#E07B70;border:1px solid rgba(192,57,43,.25)}
.flash-info{background:var(--brand-glow);color:var(--brand);border:1px solid var(--line-hover)}
.flash-close{background:none;border:none;font-size:18px;cursor:pointer;opacity:.6;color:inherit}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ivory-faint);margin-bottom:18px}
.bc-link{color:var(--ivory-faint);transition:color var(--t)}.bc-link:hover{color:var(--brand)}
.bc-sep{color:var(--line);opacity:.5}
.bc-current{color:var(--ivory-dim);font-weight:500}

/* ── Panels ──────────────────────────────────────────────────────────────── */
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--line)}
.panel-title{font-family:"Cormorant Garamond",serif;font-size:17px;font-weight:600;color:var(--ivory)}
.panel-body{padding:18px}
.panel-chart{}
.panel-wide{grid-column:1/-1}
.panel-full{grid-column:1/-1}

/* ── Stats Grid ──────────────────────────────────────────────────────────── */
.stats-mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.stats-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:12px;transition:border-color var(--t),box-shadow var(--t)}
.stat-card:hover{border-color:var(--line-hover);box-shadow:0 0 20px rgba(212,131,58,.08)}
.stat-card.stat-primary{border-left:3px solid var(--brand)}
.stat-card.stat-amber{border-left:3px solid var(--brand)}
.stat-card.stat-danger{border-left:3px solid var(--danger)}
.stat-icon{font-size:24px;flex-shrink:0}
.stat-value{font-family:"Cormorant Garamond",serif;font-size:26px;font-weight:600;color:var(--brand);line-height:1}
.stat-label{font-size:11px;font-weight:600;color:var(--ivory-faint);letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.stat-sub{font-size:11px;color:var(--ivory-faint);margin-top:2px}
.stat-trend{font-size:11px;margin-top:4px;font-weight:600}
.trend-up{color:var(--sage)}.trend-down{color:#E07B70}

/* ── Dashboard Grid ──────────────────────────────────────────────────────── */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}

/* ── Bar Chart ───────────────────────────────────────────────────────────── */
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:140px;padding:0 4px}
.bar-col{display:flex;flex-direction:column;align-items:center;flex:1;gap:4px}
.bar-val{font-size:10px;color:var(--ivory-faint);min-height:14px;text-align:center}
.bar{width:100%;min-height:4px;background:var(--brand);border-radius:4px 4px 0 0;transition:height .6s ease;opacity:.85}
.bar:hover{opacity:1}
.bar-label{font-size:10px;color:var(--ivory-faint);white-space:nowrap}

/* Line chart (period) */
.line-chart-wrap{display:flex;align-items:flex-end;gap:3px;height:120px;padding:0 2px}
.line-col{display:flex;flex-direction:column;align-items:center;flex:1;gap:3px}
.line-bar{width:100%;min-height:3px;background:var(--brand);border-radius:3px 3px 0 0;transition:height .5s ease;opacity:.8;position:relative}
.line-bar:hover{opacity:1}
.line-val{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--brand);white-space:nowrap}
.line-label{font-size:9px;color:var(--ivory-faint)}

/* Hour chart */
.hour-chart{display:flex;align-items:flex-end;gap:3px;height:100px}
.hour-col{display:flex;flex-direction:column;align-items:center;flex:1;gap:2px}
.hour-bar{width:100%;min-height:2px;background:var(--brand);border-radius:2px 2px 0 0;opacity:.7;transition:height .4s ease}
.hour-col:hover .hour-bar{opacity:1}
.hour-label{font-size:9px;color:var(--ivory-faint)}

/* ── Top Items ───────────────────────────────────────────────────────────── */
.top-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.top-item:last-child{border-bottom:none}
.top-rank{font-family:"Cormorant Garamond",serif;font-size:18px;font-weight:600;color:var(--brand);width:22px;text-align:center;flex-shrink:0}
.top-icon{font-size:18px;flex-shrink:0}
.top-name{flex:1;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.top-bar-wrap{width:80px;height:4px;background:var(--ink-3);border-radius:2px;flex-shrink:0}
.top-bar{height:100%;background:var(--brand);border-radius:2px;opacity:.7}
.top-count{font-size:12px;font-weight:700;color:var(--brand);width:38px;text-align:right;flex-shrink:0}

/* Mini bar */
.mini-bar-track{flex:1;height:5px;background:var(--ink-3);border-radius:3px;overflow:hidden}
.mini-bar{height:100%;background:var(--brand);border-radius:3px;opacity:.7}

/* ── Activity Log ────────────────────────────────────────────────────────── */
.activity-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px}
.activity-row:last-child{border-bottom:none}
.act-avatar{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#0E0A0C;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.act-body{flex:1;overflow:hidden}
.act-user{font-weight:600;margin-right:6px}
.act-action{color:var(--brand);font-weight:500;font-size:12px}
.act-desc{color:var(--ivory-faint);font-size:12px}
.act-time{font-size:11px;color:var(--ivory-faint);flex-shrink:0;white-space:nowrap}

/* ── Category bars ───────────────────────────────────────────────────────── */
.cat-bar-item{margin-bottom:13px}
.cat-bar-label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.cat-bar-nums{color:var(--ivory-faint);font-size:12px}
.cat-bar-track{height:6px;background:var(--ink-3);border-radius:3px;overflow:hidden}
.cat-bar-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-dim));border-radius:3px;transition:width .6s ease}

/* ── Quick Actions ───────────────────────────────────────────────────────── */
.quick-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.qa-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ivory-dim);transition:all var(--t)}
.qa-card:hover{border-color:var(--line-hover);background:var(--brand-glow);color:var(--ivory)}
.qa-icon{font-size:22px;flex-shrink:0}
.qa-text{display:flex;flex-direction:column}
.qa-text strong{font-weight:600;font-size:13.5px;color:var(--ivory)}
.qa-text span{font-size:11.5px;color:var(--ivory-faint);margin-top:1px}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:9px 14px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ivory-faint);background:var(--ink-3);border-bottom:1px solid var(--line)}
.data-table td{padding:11px 14px;font-size:13.5px;border-bottom:1px solid var(--line);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:rgba(255,255,255,.02)}
.td-empty{text-align:center;padding:40px;color:var(--ivory-faint);font-style:italic}
.td-sub{font-size:12px;color:var(--ivory-faint);margin-top:2px}
.td-item{display:flex;align-items:center;gap:11px}
.td-thumb{width:42px;height:42px;border-radius:8px;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.td-thumb-placeholder{width:42px;height:42px;border-radius:8px;flex-shrink:0;background:var(--ink-3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:18px}
.td-emoji{text-align:center;font-size:20px}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.cat-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:10px;background:var(--ink-3);font-size:12px;font-weight:500;color:var(--ivory-dim);border:1px solid var(--line)}
.status-badge{display:inline-block;padding:3px 10px;border-radius:10px;font-size:11.5px;font-weight:600}
.status-on{background:var(--sage-bg);color:var(--sage)}
.status-off{background:var(--ink-3);color:var(--ivory-faint)}
.price-text{color:var(--brand);font-weight:700}
.role-badge{padding:3px 10px;border-radius:10px;font-size:11.5px;font-weight:600;background:var(--brand-glow);color:var(--brand)}
.role-badge.role-superadmin{background:rgba(122,158,120,.12);color:var(--sage)}
.role-badge.role-viewer{background:var(--ink-3);color:var(--ivory-faint)}
.view-count{font-size:12px;font-weight:700;color:var(--brand)}
.featured-icon{font-size:18px;opacity:.2}.featured-icon.on{opacity:1}
.count-link{font-size:13px;color:var(--brand);font-weight:500}
.count-link:hover{text-decoration:underline}

/* ── Toggle ──────────────────────────────────────────────────────────────── */
.toggle-btn{position:relative;width:38px;height:21px;border-radius:11px;border:none;cursor:pointer;transition:background var(--t);flex-shrink:0}
.toggle-btn.toggle-on{background:#2ecc71}.toggle-btn.toggle-off{background:var(--ink-4)}
.toggle-slider{position:absolute;width:15px;height:15px;background:white;border-radius:50%;top:3px;left:3px;transition:transform var(--t);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.toggle-on .toggle-slider{transform:translateX(17px)}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);background:var(--brand);color:#0E0A0C;border:none;font-size:13.5px;font-weight:700;transition:background var(--t),box-shadow var(--t);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-primary:hover{background:var(--brand-dim);box-shadow:0 2px 16px rgba(212,131,58,.3)}
.btn-secondary{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--radius-sm);background:var(--ink-3);color:var(--ivory-dim);border:1px solid var(--line);font-size:13.5px;font-weight:500;cursor:pointer;transition:all var(--t);text-decoration:none;white-space:nowrap}
.btn-secondary:hover{border-color:var(--brand);color:var(--brand)}
.btn-outline{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--radius-sm);background:transparent;color:var(--brand);border:1px solid rgba(212,131,58,.3);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--t);text-decoration:none;white-space:nowrap}
.btn-outline:hover{border-color:var(--brand);background:var(--brand-glow)}
.btn-full{width:100%;justify-content:center}
.btn-sm{font-size:12px;font-weight:600;color:var(--brand);transition:color var(--t)}
.btn-sm:hover{color:var(--ivory)}
.btn-sm-inline{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--radius-sm);background:var(--brand);color:#0E0A0C;font-size:12.5px;font-weight:700;transition:background var(--t)}
.btn-sm-inline:hover{background:var(--brand-dim)}
.btn-filter{padding:8px 14px;border-radius:var(--radius-sm);background:var(--brand);color:#0E0A0C;border:none;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background var(--t)}
.btn-filter:hover{background:var(--brand-dim)}
.btn-clear-filter{padding:7px 12px;border-radius:var(--radius-sm);color:var(--ivory-faint);font-size:13px;cursor:pointer;transition:color var(--t);background:none;border:none}
.btn-clear-filter:hover{color:var(--danger)}
.action-btns{display:flex;gap:5px;align-items:center}
.btn-icon{width:31px;height:31px;border-radius:var(--radius-sm);border:1px solid var(--line);background:none;display:flex;align-items:center;justify-content:center;color:var(--ivory-faint);cursor:pointer;transition:all var(--t)}
.btn-icon:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-glow)}
.btn-icon.btn-danger:hover{border-color:var(--danger);color:#E07B70;background:var(--danger-bg)}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.search-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.search-group{position:relative;display:flex;align-items:center}
.search-group svg{position:absolute;left:10px;color:var(--ivory-faint);pointer-events:none}
.search-input{padding:8px 12px 8px 32px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13.5px;color:var(--ivory);background:var(--ink-3);outline:none;transition:border-color var(--t);min-width:200px}
.search-input:focus{border-color:var(--brand)}
.filter-select{padding:8px 28px 8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13px;color:var(--ivory-dim);background:var(--ink-3);outline:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 7L1 3h8z' fill='%236B5D54'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border-color var(--t)}
.filter-select:focus{border-color:var(--brand);outline:none}
.result-count{font-size:13px;color:var(--ivory-faint);font-weight:500}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination{display:flex;justify-content:center;gap:6px;padding:14px}
.pg-btn{padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ivory-dim);transition:all var(--t);background:var(--ink-3)}
.pg-btn:hover{border-color:var(--brand);color:var(--brand)}
.pg-btn.pg-active{background:var(--brand);border-color:var(--brand);color:#0E0A0C;font-weight:700}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:15px}
.form-label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:6px}
.req{color:var(--danger)}
.form-control{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:14px;color:var(--ivory);background:var(--ink-3);outline:none;transition:border-color var(--t),box-shadow var(--t)}
.form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,131,58,.12)}
.form-control.input-error{border-color:var(--danger)}
textarea.form-control{resize:vertical;line-height:1.6}
select.form-control{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 7L1 3h8z' fill='%236B5D54'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.form-hint{font-size:12px;color:var(--ivory-faint);margin-top:5px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.form-actions{display:flex;gap:10px;padding-top:4px}
.form-toggles{display:flex;flex-direction:column;gap:12px}
.toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--ivory-dim)}
.toggle-label input[type=checkbox]{display:none}
.toggle-switch{width:36px;height:20px;border-radius:10px;background:var(--ink-4);position:relative;flex-shrink:0;transition:background var(--t);border:1px solid var(--line)}
.toggle-switch::after{content:'';position:absolute;width:14px;height:14px;background:white;border-radius:50%;top:2px;left:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--t)}
.toggle-label input:checked+.toggle-switch{background:#2ecc71;border-color:#2ecc71}
.toggle-label input:checked+.toggle-switch::after{transform:translateX(16px)}
.input-with-unit{position:relative}
.input-with-unit .form-control{padding-right:38px}
.input-unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:var(--ivory-faint);pointer-events:none}
.slug-input-wrap{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--ink-3);transition:border-color var(--t)}
.slug-input-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(212,131,58,.12)}
.slug-prefix{padding:10px 12px;background:var(--ink-4);border-right:1px solid var(--line);font-size:13px;color:var(--ivory-faint);white-space:nowrap}
.slug-input{border:none!important;border-radius:0!important;box-shadow:none!important;flex:1;background:transparent!important}
.emoji-input{font-size:20px;text-align:center}

/* ── Image Upload ────────────────────────────────────────────────────────── */
.image-preview-wrap{margin-bottom:12px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--ink-3);display:flex;align-items:center;justify-content:center}
.image-preview{width:100%;height:100%;object-fit:cover}
.image-placeholder{text-align:center;color:var(--ivory-faint)}
.placeholder-icon{font-size:40px;margin-bottom:8px}
.image-placeholder p{font-size:13px}
.upload-zone{border:2px dashed var(--line);border-radius:var(--radius-sm);padding:22px;text-align:center;cursor:pointer;transition:all var(--t)}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--brand);background:var(--brand-glow)}
.upload-label{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--ivory-dim)}
.upload-label svg{color:var(--brand);margin-bottom:4px}
.upload-text{font-size:13.5px;font-weight:600}
.upload-hint{font-size:12px;color:var(--ivory-faint)}
.image-actions{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:12px}
.img-filename{color:var(--ivory-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.remove-img-label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--danger);font-weight:500}

/* ── Form Layouts ────────────────────────────────────────────────────────── */
.form-layout{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.form-main,.form-sidebar{display:flex;flex-direction:column}
.form-sidebar{position:sticky;top:80px}
.two-col-layout{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
.form-col{position:sticky;top:80px}
.appearance-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stats-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13.5px}
.alert-error{background:var(--danger-bg);color:#E07B70;border:1px solid rgba(192,57,43,.25)}
.alert ul{padding-left:18px;margin-top:4px}

/* ── Color Picker ────────────────────────────────────────────────────────── */
.color-input-wrap{display:flex;align-items:center;gap:10px}
.color-picker{width:44px;height:36px;padding:2px;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;background:none}
.color-text{flex:1}
.color-preview{width:36px;height:36px;border-radius:var(--radius-sm);flex-shrink:0;border:1px solid var(--line)}

/* ── Period Selector ─────────────────────────────────────────────────────── */
.period-selector{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.period-btn{padding:7px 16px;border-radius:24px;border:1px solid var(--line);background:var(--ink-3);font-size:13px;font-weight:500;color:var(--ivory-dim);transition:all var(--t)}
.period-btn:hover{border-color:var(--brand);color:var(--brand)}
.period-btn.active{background:var(--brand);border-color:var(--brand);color:#0E0A0C;font-weight:700}

/* ── Media Library ───────────────────────────────────────────────────────── */
.drop-zone{border:2px dashed var(--line);border-radius:var(--radius);padding:32px;text-align:center;margin-bottom:18px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ivory-faint);transition:all var(--t)}
.drop-zone.drag-active{border-color:var(--brand);background:var(--brand-glow);color:var(--brand)}
.drop-zone p{font-size:14px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.media-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;transition:border-color var(--t),box-shadow var(--t)}
.media-card:hover{border-color:var(--line-hover);box-shadow:var(--shadow-sm)}
.media-img-wrap{position:relative;aspect-ratio:1;overflow:hidden;background:var(--ink-3)}
.media-img-wrap img{width:100%;height:100%;object-fit:cover;transition:filter .3s ease}
.media-card:hover .media-img-wrap img{filter:brightness(.7)}
.media-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;transition:opacity var(--t)}
.media-card:hover .media-overlay{opacity:1}
.media-action{width:32px;height:32px;border-radius:8px;background:rgba(14,10,12,.8);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ivory);cursor:pointer;transition:all var(--t)}
.media-action:hover{background:var(--brand);border-color:var(--brand);color:#0E0A0C}
.media-delete:hover{background:var(--danger)!important}
.media-info{padding:8px 10px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.media-name{font-size:12px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.media-size{font-size:11px;color:var(--ivory-faint);flex-shrink:0}
.media-used{padding:4px 10px 8px;font-size:11px}
.media-used a{color:var(--sage);font-weight:500}

/* ── Logo Upload ─────────────────────────────────────────────────────────── */
.logo-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.logo-upload-item{}
.logo-preview-box{border-radius:var(--radius-sm);padding:20px;display:flex;align-items:center;justify-content:center;min-height:100px;border:1px solid var(--line)}
.logo-preview-box img{max-height:70px;width:auto;margin:0 auto;filter:brightness(0) invert(1);opacity:.85}
.upload-zone-sm{border:2px dashed var(--line);border-radius:var(--radius-sm);padding:12px;text-align:center;cursor:pointer;transition:all var(--t);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--ivory-faint)}
.upload-zone-sm:hover{border-color:var(--brand);background:var(--brand-glow)}
.upload-zone-sm input{display:none}

/* ── Type Buttons (Announcements) ────────────────────────────────────────── */
.type-buttons{display:flex;gap:8px;flex-wrap:wrap}
.type-btn{cursor:pointer}
.type-btn input{display:none}
.type-btn span{display:block;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ivory-dim);transition:all var(--t)}
.type-btn:hover span{border-color:var(--brand);color:var(--brand)}
.type-btn input:checked+span{background:var(--brand);border-color:var(--brand);color:#0E0A0C;font-weight:700}

/* ── User Management ─────────────────────────────────────────────────────── */
.user-avatar-sm{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#0E0A0C;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}

/* ── Settings Info Table ─────────────────────────────────────────────────── */
.info-table{width:100%;border-collapse:collapse}
.info-table td{padding:9px 0;font-size:13px;border-bottom:1px solid var(--line);vertical-align:top}
.info-table tr:last-child td{border-bottom:none}
.info-table td:first-child{color:var(--ivory-faint);font-weight:500;width:45%}
.info-table code{font-size:11px;background:var(--ink-3);padding:2px 6px;border-radius:4px;word-break:break-all}

/* ── Login Page ──────────────────────────────────────────────────────────── */
body.login-page{display:flex;align-items:stretch;justify-content:center;min-height:100vh;background:var(--ink)}
.login-bg{position:fixed;inset:0;background:radial-gradient(ellipse 70% 60% at 40% 50%,#200820 0%,var(--ink) 70%)}
.login-wrap{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;width:100%;padding:20px}
.login-card{background:var(--ink-2);border:1px solid var(--line);border-radius:20px;padding:44px 40px;width:100%;max-width:400px;box-shadow:var(--shadow);animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.login-header{text-align:center;margin-bottom:28px}
.login-logo{height:60px;margin:0 auto 12px;filter:brightness(0) invert(1);opacity:.85}
.login-title{font-family:"Cormorant Garamond",serif;font-size:22px;font-weight:600;color:var(--brand)}
.login-subtitle{font-size:13px;color:var(--ivory-faint);margin-top:4px}
.login-alert{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:13.5px;font-weight:500}
.alert-error.login-alert{background:var(--danger-bg);color:#E07B70;border:1px solid rgba(192,57,43,.25)}
.alert-locked{background:rgba(212,131,58,.1);border:1px solid rgba(212,131,58,.25);color:var(--brand)}
.password-wrap{position:relative}
.password-wrap .form-control{padding-right:44px}
.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ivory-faint);padding:4px;transition:color var(--t)}
.password-toggle:hover{color:var(--brand)}
.btn-login{width:100%;padding:13px;border-radius:var(--radius-sm);background:var(--brand);color:#0E0A0C;border:none;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;transition:background var(--t)}
.btn-login:hover:not(:disabled){background:var(--brand-dim)}
.btn-login:disabled{opacity:.6;cursor:not-allowed}
.login-footer{text-align:center;margin-top:20px}
.back-to-menu{font-size:13px;color:var(--ivory-faint);display:inline-flex;align-items:center;gap:5px;transition:color var(--t)}
.back-to-menu:hover{color:var(--brand)}
.login-default-hint{text-align:center;margin-top:14px}
.login-default-hint small{font-size:11.5px;color:var(--ivory-faint)}
.login-default-hint code{background:var(--ink-3);padding:1px 5px;border-radius:4px}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1200px){.dash-grid{grid-template-columns:1fr}.stats-layout{grid-template-columns:1fr}.appearance-layout{grid-template-columns:1fr}.stats-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){.form-layout{grid-template-columns:1fr}.form-sidebar{position:static}.two-col-layout{grid-template-columns:1fr}.form-col{position:static}.logo-upload-grid{grid-template-columns:1fr}}
@media(max-width:768px){.admin-sidebar{transform:translateX(-100%)}.admin-sidebar.open{transform:translateX(0);box-shadow:var(--shadow)}.admin-body{margin-left:0}.topbar-toggle{display:flex}.admin-content{padding:14px}.stats-mega-grid{grid-template-columns:repeat(2,1fr)}.form-row-2,.form-row-3{grid-template-columns:1fr}.stats-grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.stats-mega-grid{grid-template-columns:1fr 1fr}.media-grid{grid-template-columns:repeat(2,1fr)}.login-card{padding:32px 24px}}

/* ── Extra items list styles ─────────────────────────────────────────────── */
.bulk-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;background:var(--ink-3);border:1px solid var(--line-hover);border-radius:var(--radius-sm);margin-bottom:14px;animation:flashIn .25s ease}
.bulk-count{font-weight:600;font-size:13.5px;color:var(--brand);white-space:nowrap}
.bulk-actions{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.bulk-btn{padding:6px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--ink-2);color:var(--ivory-dim);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--t)}
.bulk-btn:hover{border-color:var(--brand);color:var(--brand)}
.bulk-on:hover{border-color:var(--sage);color:var(--sage)}
.bulk-off:hover{border-color:var(--ivory-faint);color:var(--ivory-faint)}
.bulk-delete:hover{border-color:var(--danger);color:#E07B70}
.bulk-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--ivory-faint);padding:4px 8px}
.featured-toggle{background:none;border:none;font-size:20px;cursor:pointer;opacity:.3;transition:all .2s;padding:0 2px}
.featured-toggle.ft-on{opacity:1}
.featured-toggle:hover{transform:scale(1.2)}
.item-name-link{font-weight:600;color:var(--ivory);transition:color var(--t)}
.item-name-link:hover{color:var(--brand)}

/* ── Allergen chips ──────────────────────────────────────────────────────── */
.allergen-chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:12px;border:1px solid var(--line);background:var(--ink-3);font-size:12px;font-weight:500;color:var(--ivory-dim);cursor:pointer;transition:all .2s;user-select:none}
.allergen-chip input{display:none}
.allergen-chip.selected{border-color:rgba(212,131,58,.5);background:rgba(212,131,58,.12);color:var(--brand)}
.allergen-chip:hover{border-color:var(--brand)}

/* ── Admin Announcement Bar ──────────────────────────────────────────────── */
.admin-ann {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 22px;
  font-size: 12.5px; font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.admin-ann-icon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: currentColor; flex-shrink: 0;
}
.admin-ann-icon svg { display: block; color: var(--ink-2); }
.admin-ann-text { flex: 1; color: var(--ivory-dim); }
.admin-ann-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: currentColor; opacity: .75;
  padding: 3px 8px; border-radius: 6px;
  border: 1px solid currentColor;
  white-space: nowrap;
  transition: opacity var(--t);
}
.admin-ann-link:hover { opacity: 1; }

.admin-ann-info    { color: #5B9FD0; background: rgba(74,144,217,.06); }
.admin-ann-warning { color: #D4A020; background: rgba(220,160,0,.06); }
.admin-ann-success { color: #6CA86A; background: rgba(90,140,88,.06); }
.admin-ann-promo   { color: var(--brand); background: var(--brand-glow); }

/* Remove old site-announcement styles if any */
.site-announcement { display: none; }

/* ── Theme mode selector ─────────────────────────────────────────────────── */
.theme-mode-grid {
  display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.theme-mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 22px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--ink-3);
  cursor: pointer; transition: all var(--t); min-width: 100px;
}
.theme-mode-btn input { display: none; }
.theme-mode-btn:hover { border-color: var(--brand-dim); }
.theme-mode-btn.active {
  border-color: var(--brand); background: var(--brand-glow);
}
.theme-mode-icon { color: var(--ivory-faint); transition: color var(--t); }
.theme-mode-btn.active .theme-mode-icon,
.theme-mode-btn:hover .theme-mode-icon { color: var(--brand); }
.theme-mode-label { font-size: 12px; font-weight: 600; color: var(--ivory-dim); }

/* ── Color picker large ──────────────────────────────────────────────────── */
.color-picker-large {
  width: 52px; height: 44px;
  padding: 2px; border: 2px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer;
  background: none; flex-shrink: 0;
  transition: border-color var(--t);
}
.color-picker-large:hover { border-color: var(--brand); }
.color-presets { display: flex; gap: 7px; flex-wrap: wrap; }
.color-preset-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: all .18s; flex-shrink: 0;
}
.color-preset-btn:hover  { transform: scale(1.15); }
.color-preset-btn.preset-active { border-color: #fff; box-shadow: 0 0 0 2px currentColor; }

/* ── Theme mode selector ─────────────────────────────────────────────────── */
.theme-mode-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--ink-3);
  cursor: pointer; transition: all var(--t); min-width: 110px;
  text-align: center;
}
.theme-mode-btn input { display: none; }
.theme-mode-btn:hover { border-color: var(--brand); }
.theme-mode-btn.active { border-color: var(--brand); background: var(--brand-glow); }
.theme-mode-icon { color: var(--ivory-faint); transition: color var(--t); }
.theme-mode-btn.active .theme-mode-icon,
.theme-mode-btn:hover .theme-mode-icon { color: var(--brand); }
.theme-mode-label { font-size: 13px; font-weight: 600; color: var(--ivory-dim); }
.theme-mode-hint  { font-size: 10px; color: var(--ivory-faint); line-height: 1.3; }