:root {
  --bg: #0c0907;
  --panel: #15100d;
  --panel-2: #1b1410;
  --line: rgba(214, 173, 98, .18);
  --line-strong: rgba(214, 173, 98, .38);
  --gold: #d6ad62;
  --gold-bright: #f0cc82;
  --cream: #f4ead8;
  --muted: #a8957f;
  --green: #67ad88;
  --danger: #e78a80;
  --shadow: 0 24px 70px rgba(0, 0, 0, .42);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 10%, rgba(214,173,98,.07), transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(111,62,34,.12), transparent 28%),
    linear-gradient(180deg, #0b0806 0%, #120d0a 46%, #0a0705 100%);
  color: var(--cream);
  font-family: Vazirmatn, system-ui, sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.ambient { position: fixed; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: -1; opacity: .22; }
.ambient-one { top: -160px; right: -120px; background: #6e431f; }
.ambient-two { bottom: -160px; left: -140px; background: #a25c2c; opacity: .12; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px;
  width: min(1380px, calc(100% - 36px)); margin: 18px auto 0; padding: 14px 18px;
  background: rgba(13, 10, 8, .82); border: 1px solid rgba(255,255,255,.06); border-bottom-color: var(--line);
  border-radius: 22px; backdrop-filter: blur(22px); box-shadow: 0 16px 55px rgba(0,0,0,.25);
}
.brand { display: flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 14px; color: var(--gold); background: rgba(214,173,98,.06); }
.brand-mark svg { width: 20px; }
.brand b { display: block; font-size: 14px; letter-spacing: .16em; line-height: 1.05; }
.brand small { display: block; margin-top: 2px; color: var(--muted); letter-spacing: .08em; font-size: 8px; }
.desktop-nav { display: flex; justify-content: center; gap: 30px; }
.desktop-nav a { color: #c7b7a5; font-size: 13px; transition: .25s; }
.desktop-nav a:hover { color: var(--gold-bright); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center; position: relative;
  border: 1px solid rgba(255,255,255,.06); border-radius: 14px; color: #d9cab7; background: rgba(255,255,255,.025);
  transition: .25s;
}
.icon-btn:hover { transform: translateY(-2px); border-color: var(--line-strong); color: var(--gold-bright); box-shadow: 0 12px 30px rgba(214,173,98,.08); }
.icon-btn svg { width: 18px; }
#cart-count { position: absolute; top: 4px; left: 4px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 99px; background: var(--gold); color: #1b120b; font-size: 9px; font-weight: 900; }
.mobile-menu-btn { display: none; }

.page-shell { width: min(1380px, calc(100% - 36px)); margin: 34px auto 90px; }
.hero { min-height: 620px; display: grid; grid-template-columns: 1fr 1.12fr; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 34px; background: linear-gradient(125deg, #120d09 0%, #17100d 48%, #0d0907 100%); box-shadow: var(--shadow); }
.hero-copy { padding: 82px 74px; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: 12px; letter-spacing: .14em; font-weight: 800; }
.eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--gold); }
.hero h1 { font-size: clamp(46px, 5vw, 90px); line-height: 1.06; margin: 22px 0 18px; letter-spacing: -.055em; max-width: 680px; }
.hero h1 span { color: var(--gold-bright); }
.hero p { color: #b5a696; line-height: 2; max-width: 580px; font-size: 15px; }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.btn { min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 15px; border: 1px solid transparent; transition: .25s; font-weight: 800; font-size: 13px; }
.btn svg { width: 16px; }
.btn-primary { color: #21150b; background: linear-gradient(135deg, var(--gold-bright), #c4934a); box-shadow: 0 14px 30px rgba(214,173,98,.16); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 35px rgba(214,173,98,.25); }
.btn-ghost { background: rgba(255,255,255,.025); border-color: var(--line); color: #dfd1be; }
.btn-ghost:hover { border-color: var(--line-strong); }
.hero-visual { position: relative; min-height: 620px; }
.hero-visual::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #17100d 0%, rgba(23,16,13,.2) 30%, rgba(10,8,6,.0) 65%); z-index: 1; pointer-events: none; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.06) brightness(.78); }
.hero-badge { position: absolute; z-index: 2; right: 34px; bottom: 34px; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(15,10,7,.72); backdrop-filter: blur(12px); }
.hero-badge strong { display: block; font-size: 18px; color: var(--gold-bright); }
.hero-badge span { color: #b9aa98; font-size: 10px; }

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin: 76px 0 24px; }
.section-head h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.04em; }
.section-head p { margin: 0; color: var(--muted); font-size: 13px; }
.section-link { color: var(--gold-bright); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }

.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.product-card { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)); border: 1px solid var(--line); border-radius: 24px; transition: .3s; }
.product-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 24px 55px rgba(0,0,0,.28); }
.product-image { position: relative; aspect-ratio: .93; overflow: hidden; background: #0e0a08; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: .4s; filter: saturate(.9) contrast(1.05) brightness(.84); }
.product-card:hover .product-image img { transform: scale(1.045); }
.product-pill { position: absolute; top: 12px; right: 12px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.10); border-radius: 99px; background: rgba(9,7,5,.67); backdrop-filter: blur(8px); color: #e7d7c1; font-size: 10px; }
.product-save { position: absolute; top: 12px; left: 12px; }
.product-save.is-saved { color: var(--gold-bright); border-color: var(--line-strong); background: rgba(214,173,98,.11); }
.product-save svg.is-fav { color: var(--gold-bright); fill: currentColor; stroke-width: 1.9; transform: scale(1.04); }
.product-info { padding: 17px; }
.product-info h3 { margin: 0; font-size: 17px; }
.product-meta { color: var(--muted); font-size: 11px; margin: 7px 0 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.product-price { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.price strong { font-size: 18px; color: var(--gold-bright); }
.price small { color: var(--muted); font-size: 10px; }
.product-actions { display: flex; gap: 8px; }
.product-actions .btn { min-height: 40px; padding: 0 13px; }

.stats-band { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 74px; border-block: 1px solid var(--line); }
.stat { padding: 26px 18px; text-align: center; border-inline-start: 1px solid var(--line); }
.stat:first-child { border-inline-start: 0; }
.stat strong { display: block; font-size: 32px; color: var(--gold-bright); }
.stat span { color: var(--muted); font-size: 11px; }

.story-card { margin-top: 74px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 30px; overflow: hidden; background: #120d09; }
.story-card img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; filter: brightness(.72) saturate(.9); }
.story-copy { padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.story-copy h2 { font-size: 46px; line-height: 1.16; margin: 14px 0; letter-spacing: -.04em; }
.story-copy p { color: var(--muted); line-height: 2; }
.story-points { display: grid; gap: 12px; margin-top: 18px; }
.story-point { display: flex; gap: 12px; align-items: start; }
.story-point .mini-icon { width: 34px; height: 34px; display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;color:var(--gold);flex:0 0 auto; }
.story-point h4 { margin: 0 0 2px; font-size: 13px; }
.story-point p { margin: 0; font-size: 11px; line-height: 1.8; }

.shop-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.018); }
.searchbox { flex: 1; min-width: 220px; position: relative; }
.searchbox input, .field input, .field textarea, .field select { width: 100%; background: #100b09; border: 1px solid var(--line); color: var(--cream); border-radius: 14px; outline: none; padding: 12px 14px; transition: .25s; }
.searchbox svg { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: var(--muted); width: 16px; }
.searchbox input { padding-right: 40px; }
.field input:focus, .field textarea:focus, .field select:focus, .searchbox input:focus { border-color: var(--line-strong); box-shadow: 0 0 0 4px rgba(214,173,98,.05); }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.filter-chip { border: 1px solid var(--line); background: transparent; color:#bcae9d; border-radius:99px; padding:10px 14px; font-size:11px; }
.filter-chip.active { color:#21150b; background:var(--gold); border-color:var(--gold); }

.empty { padding: 80px 24px; text-align: center; border: 1px dashed var(--line); border-radius: 22px; color: var(--muted); }
.empty svg { width: 40px; height: 40px; margin: 0 auto 15px; color: var(--gold); }

.drawer { position: fixed; inset: 0; z-index: 90; display:flex; justify-content:flex-start; pointer-events:none; }
.drawer.open { pointer-events:auto; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.62); opacity:0; transition:.25s; }
.drawer.open .drawer-backdrop { opacity:1; }
.drawer-panel { position:relative; width:min(470px,100%); height:100%; background:#110c09; border-inline-start:1px solid var(--line); transform:translateX(-100%); transition:.28s; display:flex; flex-direction:column; box-shadow:40px 0 100px rgba(0,0,0,.4); }
.drawer.open .drawer-panel { transform:translateX(0); }
.drawer-head { padding:24px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.drawer-head h3 { margin:0; }
.drawer-items { flex:1; overflow:auto; padding:16px 24px; }
.cart-item { display:grid; grid-template-columns:70px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.cart-item img { width:70px; height:80px; object-fit:cover; border-radius:14px; border:1px solid var(--line); }
.cart-item h4 { margin:0 0 5px; font-size:13px; }
.cart-item p { margin:0; color:var(--muted); font-size:10px; }
.stepper { display:flex; align-items:center; gap:7px; margin-top:9px; }
.stepper button { width:27px;height:27px;border-radius:9px;border:1px solid var(--line);background:transparent;color:#e2d4c0; }
.drawer-foot { padding:20px 24px; border-top:1px solid var(--line); }
.total-row { display:flex;justify-content:space-between;gap:12px;margin-bottom:13px; }
.total-row span {color:var(--muted);font-size:12px}.total-row strong {color:var(--gold-bright)}

.modal-backdrop { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.72); display:grid; place-items:center; padding:18px; }
.modal { width:min(820px,100%); max-height:90vh; overflow:auto; background:#120d0a; border:1px solid var(--line); border-radius:26px; box-shadow:0 30px 120px rgba(0,0,0,.6); }
.modal-head { padding:18px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:14px; }
.modal-head h3 { margin:0; font-size:18px; }
.modal-body { padding:22px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { color:#c9b8a3; font-size:11px; font-weight:700; }
.field textarea { min-height:120px; resize:vertical; }
.auth-tabs { display:flex; gap:8px; margin-bottom:18px; }
.auth-tab { flex:1; padding:12px; border-radius:14px; border:1px solid var(--line); background:transparent; color:var(--muted); }
.auth-tab.active { border-color:var(--line-strong); color:var(--gold-bright); background:rgba(214,173,98,.06); }

.product-detail { display:grid; grid-template-columns:.96fr 1fr; gap:24px; }
.product-detail-image { min-height:450px; border-radius:22px; overflow:hidden; border:1px solid var(--line); }
.product-detail-image img { width:100%;height:100%;object-fit:cover; }
.product-detail-copy h2 { font-size:40px; line-height:1.2; margin:5px 0 9px; }
.product-detail-copy p { color:var(--muted); line-height:2; }
.detail-price { color:var(--gold-bright); font-size:28px; font-weight:900; margin:18px 0; }
.detail-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:22px 0; }
.detail-chip { padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.018); }
.detail-chip span { display:block;color:var(--muted);font-size:9px;margin-bottom:4px; }.detail-chip strong {font-size:11px}

.dashboard { display:grid; gap:20px; }
.admin-top { display:flex; justify-content:space-between; align-items:end; gap:20px; }
.admin-top h1 { margin:0; font-size:46px; }
.admin-top p { margin:7px 0 0; color:var(--muted); }
.admin-shell { display:grid; grid-template-columns:230px 1fr; gap:18px; }
.admin-side { position:sticky; top:110px; align-self:start; display:grid; gap:8px; padding:14px; border:1px solid var(--line); border-radius:22px; background:rgba(255,255,255,.018); }
.admin-side button { display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:13px;border:1px solid transparent;background:transparent;color:#bfae9b;text-align:right; }
.admin-side button:hover,.admin-side button.active { background:rgba(214,173,98,.07); color:var(--gold-bright); border-color:var(--line); }
.admin-side button svg { width:16px; }
.admin-main { min-width:0; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.kpi { padding:18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)); }
.kpi span { display:block;color:var(--muted);font-size:10px;margin-bottom:9px;}.kpi strong{font-size:27px;color:var(--gold-bright)}
.panel { padding:18px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.015); }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:15px; }.panel-head h3{margin:0;font-size:16px}
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:680px; }
th,td { padding:12px 10px; text-align:right; border-bottom:1px solid rgba(255,255,255,.06); font-size:11px; }
th{color:var(--muted);font-weight:600;} td strong{color:#e8dccd}
.status { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:99px; font-size:9px; border:1px solid var(--line); }
.status.paid,.status.completed{color:#9de4ba;border-color:rgba(103,173,136,.3);background:rgba(103,173,136,.05)}
.status.pending_payment,.status.processing,.status.shipped{color:#e6c47b;background:rgba(214,173,98,.06)}
.status.canceled,.status.failed{color:#f0a39a;background:rgba(231,138,128,.06)}
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.role-actions { display:flex; flex-wrap:wrap; gap:6px; min-width:250px; }
.role-btn { border:1px solid var(--line); background:rgba(255,255,255,.018); color:var(--muted); border-radius:10px; padding:7px 9px; font-size:9px; cursor:pointer; transition:.2s; }
.role-btn:hover:not(:disabled) { border-color:var(--line-strong); color:var(--gold-bright); transform:translateY(-1px); }
.role-btn.active { background:rgba(214,173,98,.09); border-color:var(--line-strong); color:var(--gold-bright); }
.role-btn:disabled { cursor:not-allowed; opacity:.52; }
.self-tag { display:inline-block; margin-inline-start:7px; color:var(--gold); font-size:9px; }

.site-footer { width:min(1380px,calc(100% - 36px)); margin:0 auto 24px; padding-top:52px; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; }
.footer-grid > div { display:grid; align-content:start; gap:10px; }
.footer-brand { margin-bottom:8px; }.footer-grid p,.footer-grid span,.footer-grid a{color:var(--muted);font-size:11px;line-height:1.9}.footer-grid h4{margin:0 0 5px;color:#e6d6c1;font-size:12px}
.footer-bottom { margin-top:40px; padding-top:16px; border-top:1px solid rgba(255,255,255,.05); display:flex; justify-content:space-between; gap:12px; color:#6f6255; font-size:9px; }

.toast-root { position:fixed; inset-inline-start:18px; bottom:18px; z-index:110; display:grid; gap:8px; }
.toast { min-width:250px; max-width:360px; padding:13px 14px; border:1px solid var(--line); border-radius:16px; background:#150f0c; box-shadow:0 18px 50px rgba(0,0,0,.35); animation:toastIn .25s ease; font-size:11px; }
.toast.success { border-color:rgba(103,173,136,.28) }.toast.error{border-color:rgba(231,138,128,.28)}
@keyframes toastIn { from { transform:translateY(8px); opacity:0; } to{transform:none;opacity:1;} }

.mobile-nav { display:none; }

@media (max-width:1100px){
  .topbar{grid-template-columns:auto auto;justify-content:space-between}.desktop-nav{display:none}.mobile-menu-btn{display:grid}
  .hero{grid-template-columns:1fr}.hero-visual{min-height:430px}.hero-copy{padding:56px 42px}.product-grid{grid-template-columns:repeat(2,1fr)}
  .story-card{grid-template-columns:1fr}.story-copy{padding:44px}.stats-band{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-inline-start:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}
  .admin-shell{grid-template-columns:1fr}.admin-side{position:static;grid-template-columns:repeat(3,1fr)}.admin-side button{justify-content:center;text-align:center}.kpi-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .topbar,.page-shell,.site-footer{width:min(100% - 20px,1380px)}.topbar{margin-top:10px;padding:11px 12px}.brand-mark{width:38px;height:38px}.nav-actions{gap:4px}.nav-actions .icon-btn{width:38px;height:38px}
  .hero-copy{padding:44px 24px}.hero h1{font-size:47px}.hero-visual{min-height:360px}.hero-badge{right:18px;bottom:18px}
  .section-head{align-items:start;flex-direction:column;margin-top:56px}.product-grid{grid-template-columns:1fr}.story-copy{padding:30px 24px}.story-copy h2{font-size:34px}.story-card img{min-height:300px}.stats-band{grid-template-columns:1fr 1fr}.stat strong{font-size:26px}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column}.form-grid,.product-detail,.admin-grid{grid-template-columns:1fr}.product-detail-image{min-height:320px}.admin-top{align-items:start;flex-direction:column}.admin-top h1{font-size:36px}.admin-side{grid-template-columns:1fr 1fr}.kpi-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){ .stats-band{grid-template-columns:1fr}.stat{border-inline-start:0!important}.stat+.stat{border-top:1px solid var(--line)}.footer-grid{grid-template-columns:1fr}.admin-side{grid-template-columns:1fr}.kpi-grid{grid-template-columns:1fr}.hero h1{font-size:41px}.hero-actions .btn{width:100%} }


/* Global live search */
.search-modal { max-width: 760px; }
.global-searchbox { position:relative; }
.global-searchbox svg { position:absolute; right:16px; top:50%; transform:translateY(-50%); width:19px; color:var(--gold); pointer-events:none; }
.global-searchbox input { width:100%; background:#100b09; border:1px solid var(--line-strong); color:var(--cream); border-radius:18px; outline:none; padding:16px 48px 16px 16px; font-size:14px; }
.global-searchbox input:focus { border-color:var(--gold); box-shadow:0 0 0 4px rgba(214,173,98,.07), 0 12px 45px rgba(0,0,0,.22); }
.search-suggestions { margin-top:16px; display:grid; gap:8px; max-height:min(56vh,520px); overflow:auto; padding-right:2px; }
.search-results-label { color:var(--muted); font-size:10px; letter-spacing:.08em; padding:4px 2px; }
.search-result { display:grid; grid-template-columns:58px 1fr auto 18px; align-items:center; gap:12px; width:100%; text-align:right; background:rgba(255,255,255,.018); border:1px solid var(--line); color:var(--cream); border-radius:16px; padding:8px 10px; cursor:pointer; transition:.18s ease; }
.search-result:hover, .search-result:focus-visible { border-color:var(--line-strong); transform:translateY(-1px); background:rgba(214,173,98,.055); outline:none; }
.search-result img { width:58px; height:58px; object-fit:cover; border-radius:12px; background:#19110d; }
.search-result-main { min-width:0; display:grid; gap:4px; }
.search-result-main strong { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-result-main small { color:var(--muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-result-price { font-size:10px; color:var(--gold); white-space:nowrap; }
.search-result > svg { color:var(--muted); width:16px; }
.search-hint, .search-empty { padding:28px 14px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); text-align:center; line-height:2; font-size:11px; }
@media (max-width:700px){ .search-result { grid-template-columns:50px 1fr 18px; } .search-result img{width:50px;height:50px}.search-result-price{display:none}.search-modal{width:calc(100vw - 24px)} }


/* COFFEE TIME admin live control */
.admin-grid-wide { grid-template-columns: 1.2fr .8fr; }
.live-badge { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.02); color:var(--muted); font-size:9px; letter-spacing:.08em; }
.live-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#76706a; box-shadow:0 0 0 3px rgba(118,112,106,.08); }
.live-badge[data-status="connected"] { color:#a8e3bd; border-color:rgba(115,185,143,.25); }
.live-badge[data-status="connected"]::before { background:#6fca91; box-shadow:0 0 0 3px rgba(111,202,145,.12); }
.live-badge[data-status="connecting"] { color:#e6d3a8; }
.live-badge[data-status="connecting"]::before { background:#d6ad62; }
.nav-badge { margin-inline-start:auto; min-width:20px; height:20px; display:inline-grid; place-items:center; padding:0 5px; border-radius:999px; background:rgba(214,173,98,.14); border:1px solid rgba(214,173,98,.25); color:var(--gold-bright); font-size:8px; }
.notification-list { display:grid; gap:9px; }
.notification-item { display:grid; grid-template-columns:38px 1fr auto; gap:11px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.012); }
.notification-item.unread { background:rgba(214,173,98,.04); border-color:rgba(214,173,98,.18); }
.notification-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; color:var(--gold-bright); background:rgba(214,173,98,.07); }
.notification-icon svg { width:17px; }
.notification-title { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.notification-title small { color:var(--muted); font-size:8px; white-space:nowrap; }
.notification-main p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.8; }
.mini-list { display:grid; gap:8px; }
.mini-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; }
.mini-row > div { min-width:0; }
.mini-row strong,.mini-row small { display:block; }
.mini-row small { color:var(--muted); margin-top:4px; font-size:8px; }
@media (max-width:900px){ .admin-grid-wide{grid-template-columns:1fr;} }