/* ───────────────────────────────────────────────────────────
   Bhopal.info — Backend (Admin Console)
   Auth + app-shell styles. Builds on portal.css tokens & vocab.
   ─────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   AUTH  (login / forgot / reset)
   ════════════════════════════════════════════════════════════ */
.auth{min-height:100vh;display:flex;font-family:var(--sans);background:#fff}

/* ── brand panel (charcoal) ── */
.auth-brand{width:46%;max-width:620px;background:#141414;color:#fff;padding:54px 56px;display:flex;flex-direction:column;flex-shrink:0}
.auth-brand .blogo{height:54px;align-self:flex-start}
.auth-brand .keyline{width:42px;height:3px;background:var(--orange);margin:38px 0 24px}
.auth-brand h2{font-family:var(--serif);font-size:31px;font-weight:700;line-height:1.25;letter-spacing:-.01em;max-width:420px}
.auth-brand .btag{font-size:14.5px;color:#9a9a9a;margin-top:16px;line-height:1.65;max-width:380px}
.auth-brand .btag b{color:#dcdcdc;font-weight:600}
.auth-brand .bstats{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;border-top:1px solid #2a2a2a;padding-top:30px;margin-bottom:26px}
.auth-brand .bstat .v{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1}
.auth-brand .bstat .l{font-size:12px;color:#8a8a8a;margin-top:6px;line-height:1.35}
.auth-brand .bdisc{display:flex;align-items:flex-start;gap:10px;font-size:11.5px;color:#6f6f6f;line-height:1.55}
.auth-brand .bdisc i{width:14px;height:14px;color:var(--orange-m);flex-shrink:0;margin-top:1px}

/* ── form side ── */
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 40px;position:relative;min-width:0}
.auth-top{position:absolute;top:26px;right:34px;display:flex;align-items:center;gap:14px}
.auth-top .help{font-size:12.5px;color:var(--g500)}
.auth-top .help a{color:var(--red);font-weight:600}
.auth-lang{display:inline-flex;gap:5px}
.auth-lang .lang-btn{border-color:var(--g300);color:var(--g700)}
.auth-lang .lang-btn.active{background:var(--red);color:#fff;border-color:var(--red)}
.auth-mlogo{display:none}

.auth-card{width:100%;max-width:382px}
.auth-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--orange-h)}
.auth-card h1{font-family:var(--serif);font-size:27px;font-weight:700;color:var(--g900);margin:10px 0 6px;line-height:1.2}
.auth-card .lead{font-size:14px;color:var(--g700);margin-bottom:30px;line-height:1.5}

.auth-form{display:flex;flex-direction:column;gap:18px}
.auth-form .field > label{display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap}
.auth-form .forgot{font-size:11px;font-weight:600;color:var(--red);text-transform:none;letter-spacing:0;white-space:nowrap}
.auth-form .forgot:hover{color:var(--red-h)}
.auth-form .input-group{height:48px}
.auth-form .input-group .input{font-size:14.5px}
.auth-form .eye{display:flex;align-items:center;padding:0 14px;color:var(--g500);cursor:pointer;background:none;border:none;align-self:stretch}
.auth-form .eye:hover{color:var(--red)}
.auth-form .btn{height:48px;margin-top:6px;font-size:14px}

.chk{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--g700);cursor:pointer;user-select:none}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk .box{width:18px;height:18px;border:1.5px solid var(--g300);border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all 150ms;flex-shrink:0}
.chk .box i{width:12px;height:12px;color:#fff;opacity:0}
.chk input:checked + .box{background:var(--red);border-color:var(--red)}
.chk input:checked + .box i{opacity:1}

.auth-note{display:flex;align-items:flex-start;gap:9px;font-size:11.5px;line-height:1.5;color:var(--g500);margin-top:24px;padding-top:20px;border-top:1px solid var(--g100)}
.auth-note i{width:14px;height:14px;flex-shrink:0;margin-top:1px;color:var(--g400)}
.auth-alt{font-size:13px;color:var(--g500);text-align:center;margin-top:22px}
.auth-alt a{color:var(--red);font-weight:600}

@media(max-width:900px){
  .auth-brand{display:none}
  .auth-mlogo{display:block;position:absolute;top:24px;left:34px}
  .auth-mlogo img{height:42px}
}
@media(max-width:480px){
  .auth-main{padding:88px 26px 40px}
  .auth-top .help{display:none}
}

/* ════════════════════════════════════════════════════════════
   APP SHELL  (sidebar + topbar)
   ════════════════════════════════════════════════════════════ */
.ad-layout{display:flex;min-height:100vh;background:var(--g50)}

/* ── sidebar ── */
.ad-sidebar{width:252px;background:#fff;border-right:1px solid var(--g200);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;flex-shrink:0;z-index:60}
.ad-brand{display:flex;align-items:center;gap:11px;padding:0 18px;border-bottom:1px solid var(--g200);height:64px;flex-shrink:0}
.ad-brand img{height:30px;flex-shrink:0}
.ad-brand .lk{display:flex;flex-direction:column;line-height:1.05;border-left:1px solid var(--g200);padding-left:11px}
.ad-brand .lk .n{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--g900)}
.ad-brand .lk .r{font-size:9.5px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.1em;margin-top:3px}
.ad-nav{flex:1;overflow-y:auto;padding:16px 12px}
.ad-group{margin-bottom:18px}
.ad-group:last-child{margin-bottom:0}
.ad-group .gl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--g400);padding:0 10px;margin-bottom:8px}
.ad-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:6px;font-size:13.5px;font-weight:500;color:var(--g700);cursor:pointer;position:relative;transition:background 150ms,color 150ms;margin-bottom:1px}
.ad-item i{width:17px;height:17px;color:var(--g500);flex-shrink:0;transition:color 150ms}
.ad-item:hover{background:var(--g50);color:var(--g900)}
.ad-item:hover i{color:var(--red)}
.ad-item.active{background:var(--red-lt);color:var(--red);font-weight:600}
.ad-item.active i{color:var(--red)}
.ad-item.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;background:var(--red);border-radius:0 3px 3px 0}
.ad-item .count{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--orange);color:#fff;border-radius:20px;padding:1px 7px;min-width:19px;text-align:center;line-height:1.5}
.ad-item.active .count{background:var(--red)}

/* sidebar account footer */
.ad-acct{border-top:1px solid var(--g200);padding:11px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0;transition:background 150ms}
.ad-acct:hover{background:var(--g50)}
.ad-acct .av{width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14px;font-weight:700;flex-shrink:0}
.ad-acct .who{min-width:0;flex:1}
.ad-acct .who .nm{font-size:13px;font-weight:600;color:var(--g900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-acct .who .rl{font-size:11px;color:var(--g500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-acct .out{width:16px;height:16px;color:var(--g400);flex-shrink:0}
.ad-acct:hover .out{color:var(--red)}

/* ── main column ── */
.ad-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ad-topbar{height:64px;background:#fff;border-bottom:1px solid var(--g200);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:50}
.ad-burger{display:none;width:34px;height:34px;border:1px solid var(--g200);border-radius:6px;align-items:center;justify-content:center;background:#fff;cursor:pointer;color:var(--g700);flex-shrink:0}
.ad-burger i{width:18px;height:18px}
.ad-head .tt{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--g900);line-height:1.1}
.ad-head .cr{font-size:11.5px;color:var(--g500);margin-top:1px;display:flex;align-items:center;gap:5px}
.ad-head .cr i{width:11px;height:11px}
.ad-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.ad-tsearch{display:flex;align-items:center;background:var(--g100);border:1px solid var(--g200);border-radius:6px;overflow:hidden;width:240px;transition:border-color 150ms,background 150ms}
.ad-tsearch:focus-within{border-color:var(--red);background:#fff;width:280px}
.ad-tsearch i{width:15px;height:15px;color:var(--g500);margin-left:11px;flex-shrink:0}
.ad-tsearch input{flex:1;border:none;background:transparent;font-family:var(--sans);font-size:13px;color:var(--g900);padding:8px 10px;outline:none}
.ad-tsearch input::placeholder{color:var(--g400)}
.ad-tsearch kbd{font-family:var(--sans);font-size:10px;color:var(--g500);background:#fff;border:1px solid var(--g200);border-radius:3px;padding:1px 5px;margin-right:8px}
.ad-icbtn{position:relative;width:36px;height:36px;border:1px solid var(--g200);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--g700);cursor:pointer;transition:all 150ms;flex-shrink:0}
.ad-icbtn:hover{border-color:var(--red);color:var(--red)}
.ad-icbtn i{width:17px;height:17px}
.ad-icbtn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--orange);border:1.5px solid #fff}
.ad-tlang{display:inline-flex;gap:4px}
.ad-tlang .lang-btn{border-color:var(--g300);color:var(--g700);font-size:11px}
.ad-tlang .lang-btn.active{background:var(--red);color:#fff;border-color:var(--red)}
.ad-content{padding:26px 28px 40px;max-width:1320px;width:100%;margin:0 auto;flex:1}
.ad-backdrop{display:none}

@media(max-width:1000px){
  .ad-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform 200ms}
  .ad-sidebar.open{transform:translateX(0)}
  .ad-burger{display:flex}
  .ad-tsearch{width:160px}.ad-tsearch:focus-within{width:190px}
  .ad-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;display:none}
  .ad-backdrop.show{display:block}
}
@media(max-width:680px){
  .ad-tsearch,.ad-tlang{display:none}
  .ad-content{padding:18px 16px 32px}
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD
   ════════════════════════════════════════════════════════════ */
.pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.pg-head h1{font-family:var(--serif);font-size:25px;font-weight:700;color:var(--g900);line-height:1.15}
.pg-head .sub{font-size:13.5px;color:var(--g700);margin-top:5px}
.pg-head .acts{display:flex;gap:9px;flex-shrink:0}

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--g200);border-radius:8px;padding:17px 19px}
.kpi .ktop{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.kpi .kic{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.kpi .kic i{width:19px;height:19px}
.kic.red{background:var(--red-lt)} .kic.red i{color:var(--red)}
.kic.orange{background:var(--orange-lt)} .kic.orange i{color:var(--orange-h)}
.kic.green{background:var(--green-lt)} .kic.green i{color:var(--green-d)}
.kic.gray{background:var(--g100)} .kic.gray i{color:var(--g700)}
.kpi .kdelta{font-size:12px;font-weight:700;display:flex;align-items:center;gap:3px}
.kpi .kdelta i{width:13px;height:13px}
.kdelta.up{color:var(--green-d)} .kdelta.down{color:var(--red)} .kdelta.flat{color:var(--g500)}
.kpi .kv{font-family:var(--serif);font-size:31px;font-weight:700;color:var(--g900);line-height:1}
.kpi .kl{font-size:13px;color:var(--g700);margin-top:5px;font-weight:500}

.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}
.dash-grid.even{grid-template-columns:1fr 1fr}
.panel-hd .pa{font-size:12px;font-weight:600;color:var(--red);display:flex;align-items:center;gap:4px;cursor:pointer}
.panel-hd .pa i{width:13px;height:13px}
.panel-hd .pa:hover{color:var(--red-h)}
.panel-bd.flush{padding:0}
.panel-bd.flush .dtable-wrap{border:none;border-radius:0}
.panel-bd.flush .dtable th{background:#fff}

/* listing cell w/ avatar */
.lcell{display:flex;align-items:center;gap:11px}
.lcell .lav{width:34px;height:34px;border-radius:6px;flex-shrink:0}
.lcell .ln{font-weight:600;color:var(--g900)}
.lcell .lm{font-size:11.5px;color:var(--g500);margin-top:1px}

/* activity feed */
.feed{display:flex;flex-direction:column}
.feed-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--g100)}
.feed-item:last-child{border-bottom:none}
.feed-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feed-dot i{width:15px;height:15px}
.feed-dot.red{background:var(--red-lt)} .feed-dot.red i{color:var(--red)}
.feed-dot.orange{background:var(--orange-lt)} .feed-dot.orange i{color:var(--orange-h)}
.feed-dot.green{background:var(--green-lt)} .feed-dot.green i{color:var(--green-d)}
.feed-dot.gray{background:var(--g100)} .feed-dot.gray i{color:var(--g700)}
.feed-tx{font-size:13px;color:var(--g700);line-height:1.45}
.feed-tx b{color:var(--g900);font-weight:600}
.feed-tm{font-size:11px;color:var(--g400);margin-top:2px}

/* review list */
.rev{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--g100);align-items:flex-start}
.rev:last-child{border-bottom:none}
.rev .rthumb{width:54px;height:42px;border-radius:5px;flex-shrink:0}
.rev .rt{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--g900);line-height:1.3}
.rev .rm{font-size:11.5px;color:var(--g500);margin-top:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rev .ra{margin-left:auto;display:flex;gap:6px;flex-shrink:0}

/* simple bar chart */
.chart{display:flex;align-items:flex-end;gap:12px;height:172px;padding-top:8px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:9px;height:100%}
.chart .bwrap{width:100%;display:flex;justify-content:center;align-items:flex-end;flex:1}
.chart .bar{width:62%;background:var(--red);border-radius:4px 4px 0 0;min-height:4px;transition:height 400ms}
.chart .bar.alt{background:var(--orange-m)}
.chart .xl{font-size:11px;color:var(--g500);font-weight:500}
.chart-legend{display:flex;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--g100)}
.chart-legend .lg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--g700)}
.chart-legend .sw{width:11px;height:11px;border-radius:3px}
.chart-legend .sw.red{background:var(--red)} .chart-legend .sw.orange{background:var(--orange-m)}

/* quick actions */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qa{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--g200);border-radius:7px;cursor:pointer;transition:all 150ms;background:#fff}
.qa:hover{border-color:var(--red);background:var(--red-lt)}
.qa .qic{width:34px;height:34px;border-radius:7px;background:var(--g50);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 150ms}
.qa:hover .qic{background:#fff}
.qa .qic i{width:17px;height:17px;color:var(--g700);transition:color 150ms}
.qa:hover .qic i{color:var(--red)}
.qa .qt{font-size:13px;font-weight:600;color:var(--g900)}
.qa .qd{font-size:11px;color:var(--g500);margin-top:1px}

@media(max-width:1100px){.kpi-row{grid-template-columns:repeat(2,1fr)}.dash-grid,.dash-grid.even{grid-template-columns:1fr}}
@media(max-width:560px){.kpi-row{grid-template-columns:1fr}.qa-grid{grid-template-columns:1fr}}

/* ── toast (shared backend) ── */
.ad-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--g900);color:#fff;padding:12px 20px;border-radius:7px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:9px;opacity:0;pointer-events:none;transition:all 250ms;z-index:300;white-space:nowrap}
.ad-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ad-toast i{width:16px;height:16px;color:var(--green)}
.row-out{transition:opacity 200ms;opacity:.32}

/* ════════════════════════════════════════════════════════════
   SHARED PAGE PRIMITIVES (list pages, editors, settings)
   ════════════════════════════════════════════════════════════ */
/* toolbar: search + filters + actions */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.tb-search{display:flex;align-items:center;background:#fff;border:1px solid var(--g200);border-radius:6px;overflow:hidden;flex:1;min-width:200px;max-width:340px}
.tb-search:focus-within{border-color:var(--red)}
.tb-search i{width:16px;height:16px;color:var(--g500);margin-left:12px;flex-shrink:0}
.tb-search input{flex:1;border:none;background:transparent;font-family:var(--sans);font-size:13.5px;color:var(--g900);padding:9px 12px;outline:none}
.tb-search input::placeholder{color:var(--g400)}
.tb-spacer{flex:1}
.tb-sel{font-family:var(--sans);font-size:13px;color:var(--g700);background:#fff;border:1px solid var(--g200);border-radius:6px;padding:9px 30px 9px 12px;cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239E9E9E' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 10px center}
.tb-sel:focus{border-color:var(--red)}

/* segmented filter pills */
.segs{display:inline-flex;background:var(--g100);border:1px solid var(--g200);border-radius:7px;padding:3px}
.seg{font-size:12.5px;font-weight:600;color:var(--g700);padding:6px 13px;border-radius:5px;cursor:pointer;border:none;background:transparent;display:flex;align-items:center;gap:6px;white-space:nowrap;transition:all 150ms}
.seg .c{font-size:10.5px;font-weight:700;background:var(--g200);color:var(--g700);border-radius:20px;padding:1px 6px;line-height:1.5}
.seg:hover{color:var(--g900)}
.seg.active{background:#fff;color:var(--red);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg.active .c{background:var(--red);color:#fff}

/* tabs (underline) */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--g200);margin-bottom:22px}
.tab{font-size:13.5px;font-weight:600;color:var(--g500);padding:11px 15px;cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:7px;transition:color 150ms}
.tab i{width:15px;height:15px}
.tab:hover{color:var(--g900)}
.tab.active{color:var(--red);border-bottom-color:var(--red)}

/* pagination */
.pager{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:12px;flex-wrap:wrap}
.pager .info{font-size:12.5px;color:var(--g500)}
.pager .pages{display:flex;gap:5px}
.pager .pg{min-width:32px;height:32px;border:1px solid var(--g200);background:#fff;border-radius:6px;font-size:13px;font-weight:600;color:var(--g700);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 150ms}
.pager .pg i{width:15px;height:15px}
.pager .pg:hover{border-color:var(--red);color:var(--red)}
.pager .pg.active{background:var(--red);border-color:var(--red);color:#fff}
.pager .pg:disabled{opacity:.4;cursor:default}

/* tiny meta + avatars used across pages */
.uav{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:var(--serif);color:#fff;flex-shrink:0}
.u-cell{display:flex;align-items:center;gap:10px}
.u-cell .un{font-weight:600;color:var(--g900)}
.u-cell .ue{font-size:11.5px;color:var(--g500);margin-top:1px}
.rolepill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em}
.rolepill i{width:11px;height:11px}
.rp-admin{background:var(--red-lt);color:var(--red)}
.rp-editor{background:var(--orange-lt);color:var(--orange-h)}
.rp-mod{background:#E3F2FD;color:#1565C0}
.rp-viewer{background:var(--g100);color:var(--g700)}
.dot-status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--g700)}
.dot-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g400)}
.dot-status.on::before{background:var(--green)}
.dot-status.off::before{background:var(--g400)}

/* card grids (partners / roles / modules) */
.card-grid{display:grid;gap:16px}
.cg-3{grid-template-columns:repeat(3,1fr)}
.cg-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.cg-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.cg-3,.cg-2{grid-template-columns:1fr}}

/* toggle switch */
.sw-toggle{position:relative;width:40px;height:23px;flex-shrink:0;cursor:pointer}
.sw-toggle input{position:absolute;opacity:0;width:0;height:0}
.sw-toggle .tr{position:absolute;inset:0;background:var(--g300);border-radius:20px;transition:background 180ms}
.sw-toggle .tr::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform 180ms;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw-toggle input:checked + .tr{background:var(--green)}
.sw-toggle input:checked + .tr::after{transform:translateX(17px)}

/* empty state */
.empty{text-align:center;padding:54px 20px;color:var(--g500)}
.empty i{width:38px;height:38px;color:var(--g300);margin-bottom:12px}
.empty h4{font-family:var(--serif);font-size:17px;color:var(--g900);margin-bottom:5px}
.empty p{font-size:13.5px;max-width:340px;margin:0 auto}

/* slide-over drawer (editors) */
.drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity 220ms;z-index:200}
.drawer-mask.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:560px;max-width:94vw;background:var(--g50);transform:translateX(100%);transition:transform 260ms cubic-bezier(.4,0,.2,1);z-index:210;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.12)}
.drawer.open{transform:translateX(0)}
.drawer-hd{height:62px;background:#fff;border-bottom:1px solid var(--g200);display:flex;align-items:center;gap:12px;padding:0 20px;flex-shrink:0}
.drawer-hd .dt{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--g900)}
.drawer-hd .x{margin-left:auto;width:34px;height:34px;border:1px solid var(--g200);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--g700);cursor:pointer}
.drawer-hd .x:hover{border-color:var(--red);color:var(--red)}
.drawer-bd{flex:1;overflow-y:auto;padding:22px}
.drawer-ft{background:#fff;border-top:1px solid var(--g200);padding:14px 20px;display:flex;gap:10px;justify-content:flex-end;flex-shrink:0}
@media(max-width:560px){.drawer{width:100vw}}

/* form bits for editors/settings */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.fld > label{font-size:12px;font-weight:600;color:var(--g700);text-transform:uppercase;letter-spacing:.04em}
.fld .inp,.fld textarea,.fld select{font-family:var(--sans);font-size:14px;color:var(--g900);background:#fff;border:1px solid var(--g300);border-radius:6px;padding:10px 12px;outline:none;width:100%}
.fld textarea{resize:vertical;min-height:90px;line-height:1.5}
.fld .inp:focus,.fld textarea:focus,.fld select:focus{border-color:var(--red)}
.fld .hint{font-size:11.5px;color:var(--g500)}
.full{grid-column:1/-1}

/* settings two-col */
.set-wrap{display:grid;grid-template-columns:212px 1fr;gap:26px;align-items:start}
.set-nav{position:sticky;top:84px;display:flex;flex-direction:column;gap:2px}
.set-nav a{font-size:13.5px;font-weight:500;color:var(--g700);padding:9px 12px;border-radius:6px;text-decoration:none;display:flex;align-items:center;gap:10px;transition:all 150ms}
.set-nav a i{width:16px;height:16px;color:var(--g500)}
.set-nav a:hover{background:var(--g100);color:var(--g900)}
.set-nav a.active{background:var(--red-lt);color:var(--red);font-weight:600}
.set-nav a.active i{color:var(--red)}
.set-row{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid var(--g100)}
.set-row:last-child{border-bottom:none}
.set-row .meta{flex:1;min-width:0}
.set-row .meta .t{font-size:14px;font-weight:600;color:var(--g900)}
.set-row .meta .d{font-size:12.5px;color:var(--g500);margin-top:3px;line-height:1.5}
@media(max-width:820px){.set-wrap{grid-template-columns:1fr}.set-nav{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:8px}.fgrid{grid-template-columns:1fr}}

/* stat strip for analytics */
.metric{background:#fff;border:1px solid var(--g200);border-radius:8px;padding:16px 18px}
.metric .ml{font-size:12.5px;color:var(--g700);font-weight:500;display:flex;align-items:center;gap:7px}
.metric .ml i{width:14px;height:14px;color:var(--g500)}
.metric .mv{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--g900);margin-top:9px;line-height:1}
.metric .md{font-size:11.5px;font-weight:700;margin-top:6px;display:flex;align-items:center;gap:3px}
.metric .md i{width:12px;height:12px}
.md.up{color:var(--green-d)} .md.down{color:var(--red)}

/* horizontal bar list (analytics top-pages) */
.hbar{display:flex;align-items:center;gap:12px;padding:10px 0}
.hbar .hl{font-size:13px;color:var(--g900);width:170px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .htrk{flex:1;height:9px;background:var(--g100);border-radius:6px;overflow:hidden}
.hbar .hfill{height:100%;background:var(--red);border-radius:6px}
.hbar .hv{font-size:12.5px;font-weight:700;color:var(--g700);width:56px;text-align:right;flex-shrink:0}

/* line chart container */
.lchart{width:100%;height:230px}
.donut-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.donut-leg{display:flex;flex-direction:column;gap:10px;flex:1;min-width:160px}
.donut-leg .dl{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--g700)}
.donut-leg .dl .sw{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.donut-leg .dl .dv{margin-left:auto;font-weight:700;color:var(--g900)}