/* ==========================================================
   AdminLab — back-office shell and parts, on top of kit/pl.css
   ========================================================== */
[data-site="dukkan"] { --brand: #c2410c; --brand-rgb: 194, 65, 12; --brand-ink: #9a3412; --accent: #111c3a; --accent-rgb: 17, 28, 58; --page: #f6f5f2; --surface: #ffffff; --surface-2: #f6f5f2; --line: #e8e4de; --side: #111c3a; --side-ink: #c9cfe0; --gold: #f59e0b; }
[data-site="dukkan"][data-bs-theme="dark"] { --brand: #c2410c; --brand-ink: #fdba74; --accent: #c7d2fe; --page: #0d0f14; --surface: #161920; --surface-2: #1c2028; --line: #2a2f39; --ink: #eef0f4; --muted: #a3a9b6; --side: #0a0c11; --side-ink: #aeb4c4; }
[data-site="wamy"] { --brand: #017672; --brand-rgb: 1, 118, 114; --brand-ink: #00625e; --accent: #022847; --accent-rgb: 2, 40, 71; --page: #eef4f5; --surface: #ffffff; --surface-2: #eef4f5; --line: #e2eaee; --side: #022847; --side-ink: #b9d3dc; --gold: #05e4aa; }
[data-site="wamy"][data-bs-theme="dark"] { --brand: #01807b; --brand-rgb: 1, 128, 123; --brand-ink: #4fe3d2; --accent: #e6f1f3; --page: #061520; --surface: #0a1c28; --surface-2: #12293a; --line: #1a3242; --ink: #e6f1f3; --muted: #8fa6b2; --side: #04121c; --side-ink: #a9bcc6; }
body { background: var(--page); font-size: 16px; }
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; white-space: nowrap; }
.hide-s { }
@media (max-width: 767.98px) { .hide-s { display: none !important; } }

/* ---------- shell ---------- */
.ad-app { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100dvh; transition: grid-template-columns 220ms ease; }
.side-mini .ad-app { grid-template-columns: 84px minmax(0, 1fr); }
.ad-side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--side); color: var(--side-ink); z-index: 60; }
.sd-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; }
.sd-logo { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; font-size: 21px; font-weight: 800; line-height: 1.2; }
.sd-logo .mk { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; background: var(--brand); font-size: 1.2rem; }
.sd-logo small { display: block; color: var(--side-ink); font-size: 15px; font-weight: 600; }
.sd-close { display: none; color: #fff; }
.sd-nav { flex: 1; overflow-y: auto; padding: 6px 12px; scrollbar-width: thin; }
.sd-h { margin: 16px 12px 6px; color: rgba(201,207,224,.6); font-size: 15px; font-weight: 800; }
.sd-nav a { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 46px; padding: 0 12px; border-radius: 12px; color: var(--side-ink); text-decoration: none; font-weight: 700; }
.sd-nav a > i { width: 22px; font-size: 1.15rem; text-align: center; }
.sd-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sd-nav a[aria-current="page"] { background: rgba(255,255,255,.1); color: #fff; }
.sd-nav a[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: -12px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--brand); }
.sd-nav .cnt { margin-inline-start: auto; min-width: 26px; padding: 0 .4rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: 15px; font-weight: 800; text-align: center; line-height: 1.6; }
.sd-nav .cnt.warn { background: #7660c4; }
.sd-foot { display: grid; gap: 6px; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.sd-store { display: flex; align-items: center; gap: .6rem; padding: 8px 12px; font-size: 15px; font-weight: 700; }
.sd-store .dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.15); }
.sd-mini { display: flex; align-items: center; gap: .8rem; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--side-ink); font: 700 15px var(--font); cursor: pointer; }
.sd-mini:hover { background: rgba(255,255,255,.07); color: #fff; }
.sd-mini i { width: 22px; font-size: 1.15rem; }
/* mini sidebar: icons only, the label shows as a tooltip */
.side-mini .ad-side .lbl, .side-mini .sd-nav .cnt { display: none; }
.side-mini .sd-h { height: 1px; margin: 12px; background: rgba(255,255,255,.08); }
.side-mini .sd-nav a, .side-mini .sd-mini, .side-mini .sd-store { justify-content: center; padding: 0; }
.side-mini .sd-mini i { transform: scaleX(-1); }
.side-mini .sd-head { justify-content: center; }
.side-mini .sd-nav a:hover::after, .side-mini .sd-nav a:focus-visible::after { content: attr(data-tip); position: absolute; inset-inline-start: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 70; padding: .3rem .8rem; border-radius: 10px; background: #0b1024; color: #fff; font-size: 15px; white-space: nowrap; box-shadow: var(--shadow-lg); }
.side-mini .sd-nav a .cnt { display: block; position: absolute; top: 4px; inset-inline-end: 10px; min-width: 10px; width: 10px; height: 10px; padding: 0; font-size: 0; }
.ad-scrim { display: none; }
.ad-main { min-width: 0; display: flex; flex-direction: column; }
.ad-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: .8rem; min-height: 68px; padding: 0 clamp(14px, 2vw, 28px); background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ad-burger { display: none; }
.ad-search { flex: 1; max-width: 560px; display: flex; align-items: center; gap: .6rem; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted); font: 500 15px var(--font); text-align: start; cursor: pointer; }
.ad-search span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ad-search:hover { border-color: rgba(var(--brand-rgb), .5); }
kbd { display: inline-block; padding: .05rem .45rem; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font: 700 15px var(--mono); }
.ad-acts { display: flex; align-items: center; gap: .3rem; margin-inline-start: auto; }
.ad-pop { position: relative; }
.icon-btn { position: relative; }
.icon-btn .badge-n { position: absolute; top: -2px; inset-inline-end: -2px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 15px; font-weight: 800; line-height: 22px; text-align: center; }
.pop-pan { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; display: none; width: min(380px, calc(100vw - 24px)); padding: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.pop-pan.sm { width: 240px; }
.pop-pan.is-open { display: grid; gap: 2px; animation: pl-pop 160ms ease; }
.pp-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 8px; }
.pp-h button { min-height: 40px; border: 0; background: none; color: var(--brand-ink); font: 700 15px var(--font); cursor: pointer; }
.nt { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .7rem; padding: 10px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.nt:hover { background: var(--surface-2); }
.nt > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--brand-ink); }
.nt b { display: block; font-size: 15px; } .nt > span > span { color: var(--muted); font-size: 15px; }
.nt.unread b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-start: .4rem; border-radius: 50%; background: var(--brand); vertical-align: middle; }
.pop-pan.sm a, .pop-pan.sm button { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: 0 .8rem; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 700 15px var(--font); text-decoration: none; cursor: pointer; text-align: start; }
.pop-pan.sm a:hover, .pop-pan.sm button:hover { background: var(--surface-2); }
.pop-pan.sm .out { color: var(--danger); }
.ad-me { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 .5rem; border: 1px solid transparent; border-radius: 14px; background: none; color: var(--ink); font-family: var(--font); text-align: start; cursor: pointer; line-height: 1.3; }
.ad-me:hover { background: var(--surface); border-color: var(--line); }
.ad-me small { display: block; color: var(--muted); font-size: 15px; }
.av { width: 40px; height: 40px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; background: hsl(var(--h, 20) 70% 92%); color: hsl(var(--h, 20) 55% 32%); font-weight: 800; font-size: 17px; }
[data-bs-theme="dark"] .av { background: hsl(var(--h, 20) 35% 24%); color: hsl(var(--h, 20) 70% 82%); }
.av.lg { width: 64px; height: 64px; font-size: 26px; }
.ad-content { flex: 1; display: grid; gap: clamp(16px, 1.6vw, 22px); align-content: start; padding: clamp(16px, 2vw, 28px); min-width: 0; }
@media (max-width: 991.98px) {
  .ad-app, .side-mini .ad-app { grid-template-columns: minmax(0, 1fr); }
  .ad-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(300px, 86vw); transform: translateX(110%); transition: transform 260ms cubic-bezier(.2,.7,.3,1); visibility: hidden; }
  [dir="ltr"] .ad-side { transform: translateX(-110%); }
  .ad-side.is-open { transform: none; visibility: visible; }
  .side-mini .ad-side .lbl, .side-mini .sd-nav .cnt { display: revert; }
  .side-mini .sd-nav a, .side-mini .sd-store { justify-content: flex-start; padding: 0 12px; }
  .side-mini .sd-h { height: auto; margin: 16px 12px 6px; background: none; }
  .side-mini .sd-head { justify-content: space-between; }
  .ad-scrim.on { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8,10,22,.5); }
  .sd-close { display: inline-grid; } .sd-mini { display: none; }
  .ad-burger { display: inline-grid; }
  .ad-search span, .ad-search kbd { display: none; } .ad-search { flex: 0 0 auto; width: 46px; padding: 0; justify-content: center; }
}

/* ---------- page parts ---------- */
.pg-h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .8rem 1rem; }
.pg-h h1 { font-size: clamp(24px, 2.4vw, 32px); margin: 0; }
.pg-h p { margin: .15rem 0 0; color: var(--muted); }
.pg-h .acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .2rem; padding: 0; list-style: none; color: var(--muted); font-size: 15px; }
.crumbs li + li::before { content: "/"; margin-inline-end: .3rem; opacity: .6; }
.crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { color: var(--brand-ink); text-decoration: underline; }
.box { min-width: 0; padding: clamp(16px, 1.6vw, 22px); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.box-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 14px; }
.box-h h2 { font-size: 18px; margin: 0; }
.box-h .muted { font-size: 15px; }
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .7rem; border-radius: 999px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.pill.info { background: var(--info-bg); color: var(--info); } .pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.bad { background: var(--danger-bg); color: var(--danger); }
.pill.mute { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.pill.brand { background: rgba(var(--brand-rgb), .1); color: var(--brand-ink); }
.who { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.who b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { display: block; color: var(--muted); font-size: 15px; }
.lk { color: var(--ink); font-weight: 800; text-decoration: none; }
.lk:hover { color: var(--brand-ink); text-decoration: underline; }
.thumbs { display: inline-flex; align-items: center; }
.thumbs img, .thumbs .more { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; border: 2px solid var(--surface); background: var(--surface-2); }
.thumbs > * + * { margin-inline-start: -10px; }
.thumbs .more { display: inline-grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--muted); }
.risk { color: var(--warn); margin-inline-start: .4rem; }
.prod { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.prod img { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; background: var(--surface-2); }
.prod small { display: block; color: var(--muted); font-size: 15px; }
.tbl.compact .prod img { width: 34px; height: 34px; }
.tagx { display: inline-flex; padding: 0 .6rem; margin-inline-end: .3rem; border-radius: 8px; background: rgba(var(--brand-rgb), .1); color: var(--brand-ink); font-size: 15px; font-weight: 800; white-space: nowrap; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.kpi { display: grid; gap: .15rem; }
.kpi .lbl { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-weight: 700; font-size: 15px; }
.kpi .lbl i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--brand-rgb), .1); color: var(--brand-ink); }
.kpi .val { font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; line-height: 1.3; }
.kpi .val small { font-size: 15px; color: var(--muted); font-weight: 600; }
.chg { font-size: 15px; font-weight: 700; } .chg.up { color: var(--ok); } .chg.down { color: var(--danger); }
.kpi svg { display: block; width: 100%; height: 40px; margin-top: 6px; overflow: visible; }
@media (max-width: 1199.98px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .kpis { grid-template-columns: minmax(0, 1fr); } }
.tgl { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; cursor: pointer; }
.tgl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tgl > span { position: relative; width: 44px; height: 26px; flex: 0 0 auto; border-radius: 26px; background: var(--line); transition: background var(--ease); }
.tgl > span::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: inset-inline-start var(--ease); }
.tgl input:checked + span { background: var(--ok); }
.tgl input:checked + span::after { inset-inline-start: 21px; }
.tgl input:focus-visible + span { outline: 3px solid rgba(var(--brand-rgb), .5); outline-offset: 2px; }
.tgl em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--muted); }
.utabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.utabs button, .utabs a { display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 0 .9rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: 800 15px var(--font); white-space: nowrap; cursor: pointer; text-decoration: none; }
.utabs [aria-pressed="true"], .utabs [aria-selected="true"], .utabs [aria-current="page"] { color: var(--ink); border-color: var(--brand); }
.utabs .n { min-width: 24px; padding: 0 .4rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 15px; text-align: center; }
.utabs [aria-pressed="true"] .n { background: rgba(var(--brand-rgb), .12); color: var(--brand-ink); }
.empty { display: grid; justify-items: center; gap: .4rem; padding: 40px 20px; text-align: center; }
.empty > i { font-size: 2.4rem; color: var(--muted); }

/* ---------- data table (tbl) ---------- */
.tcard { min-width: 0; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); container-type: inline-size; }
.tbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: 14px 16px; }
.tsearch { position: relative; flex: 1 1 260px; max-width: 420px; }
.tsearch i { position: absolute; top: 50%; inset-inline-start: 14px; transform: translateY(-50%); color: var(--muted); }
.tsearch input { width: 100%; min-height: 46px; padding: 0 14px; padding-inline-start: 42px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: 500 15px var(--font); }
.tsearch input:focus { outline: none; border-color: rgba(var(--brand-rgb), .6); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .12); }
.tbar .sp { flex: 1; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.tbl th, .tbl td { padding: 10px 14px; text-align: start; vertical-align: middle; border-top: 1px solid var(--line); }
.tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--muted); font-weight: 800; white-space: nowrap; border-top: 0; }
.tbl th button.srt { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.tbl th button.srt::after { content: "\F127"; font-family: "bootstrap-icons"; font-size: .8rem; opacity: .45; }
.tbl th[aria-sort="ascending"] button.srt::after { content: "\F148"; opacity: 1; }
.tbl th[aria-sort="descending"] button.srt::after { content: "\F128"; opacity: 1; }
.tbl th[aria-sort] { color: var(--ink); }
.tbl tbody tr { transition: background var(--ease); }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.tbl tbody tr.is-sel { background: rgba(var(--brand-rgb), .06); }
.tbl tbody tr[hidden] { display: none; }
.tbl .sel { width: 44px; }
.tbl .sel input { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }
.tbl .amt { font-weight: 800; white-space: nowrap; }
.tbl .act { width: 56px; text-align: end; }
.tbl td small.u { display: block; color: var(--muted); font-size: 15px; }
.tbl.compact th, .tbl.compact td { padding-block: 5px; }
.tbl.compact .thumbs img, .tbl.compact .av { width: 30px; height: 30px; font-size: 15px; }
.bulk { position: sticky; bottom: 12px; z-index: 5; display: none; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 12px 12px; padding: 10px 14px; border-radius: 16px; background: var(--accent); color: #fff; box-shadow: var(--shadow-lg); }
[data-bs-theme="dark"] .bulk { background: #26304f; }
.bulk.on { display: flex; animation: pl-pop 160ms ease; }
.bulk b { margin-inline-end: auto; }
.bulk .btx { --h: 40px; font-size: 15px; }
.bulk .btx-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.bulk .btx-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.tfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.pager { display: flex; align-items: center; gap: .3rem; }
.pager button { min-width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: 700 15px var(--font); cursor: pointer; }
.pager button[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.pager button[disabled] { opacity: .4; cursor: not-allowed; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { min-height: 44px; min-width: 44px; padding: 0 .8rem; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 700 15px var(--font); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.tnone { display: none; padding: 40px 20px; text-align: center; color: var(--muted); }
.tnone.on { display: block; }
/* below 640px of its own width the table becomes cards (labels from data-label); wider tables scroll inside .tbl-wrap */
@container (max-width: 640px) {
  .tbl thead { display: none; }
  .tbl, .tbl tbody { display: block; }
  .tbl tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .3rem 1rem; padding: 14px 16px; padding-inline-start: 50px; border-top: 1px solid var(--line); }
  .tbl tbody tr[hidden] { display: none; }
  .tbl td { display: block; padding: 0; border: 0; }
  .tbl td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 15px; font-weight: 700; }
  .tbl td.sel { position: absolute; top: 14px; inset-inline-start: 14px; width: auto; }
  .tbl td.act { position: absolute; top: 8px; inset-inline-end: 8px; width: auto; }
  /* the row's title cell (first data cell) spans the card and drops its label */
  .tbl td.sel + td, .tbl td:first-child[data-label] { grid-column: 1 / -1; padding-inline-end: 44px; }
  .tbl td.sel + td::before, .tbl td:first-child[data-label]::before { display: none; }
  .tbl tbody tr:not(:has(td.sel)) { padding-inline-start: 16px; }
}

/* ---------- forms / save bar ---------- */
.savebar { position: sticky; bottom: 0; z-index: 40; display: none; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; margin: 0 calc(-1 * clamp(16px, 2vw, 28px)) calc(-1 * clamp(16px, 2vw, 28px)); padding: 12px clamp(16px, 2vw, 28px); background: var(--accent); color: #fff; box-shadow: 0 -10px 30px rgba(0,0,0,.15); }
[data-bs-theme="dark"] .savebar { background: #26304f; }
.savebar.on { display: flex; animation: sb-in 220ms ease; }
@keyframes sb-in { from { transform: translateY(100%); } }
.savebar b { margin-inline-end: auto; display: inline-flex; align-items: center; gap: .5rem; }
.savebar .btx-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.savebar .btx-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.fm-field .hint { color: var(--muted); font-size: 15px; }
.fm-select-b { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 500 16px var(--font); cursor: pointer; }

/* ---------- command palette ---------- */
.ad-pal { width: min(640px, calc(100vw - 24px)); margin-top: 12vh; padding: 0; }
.pal-in { display: flex; align-items: center; gap: .7rem; padding: 6px 16px; border-bottom: 1px solid var(--line); }
.pal-in i { color: var(--muted); font-size: 1.1rem; }
.pal-in input { flex: 1; min-width: 0; min-height: 56px; border: 0; background: none; outline: none; color: var(--ink); font: 500 18px var(--font); }
.pal-l { max-height: min(420px, 55vh); overflow-y: auto; padding: 8px; }
.pal-l .g { padding: 8px 10px 4px; color: var(--muted); font-size: 15px; font-weight: 800; }
.pal-l [role="option"] { display: flex; align-items: center; gap: .8rem; min-height: 48px; padding: 0 12px; border-radius: 12px; color: var(--ink); text-decoration: none; cursor: pointer; }
.pal-l [role="option"] > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--brand-ink); }
.pal-l [role="option"] small { margin-inline-start: auto; color: var(--muted); font-size: 15px; }
.pal-l [aria-selected="true"] { background: rgba(var(--brand-rgb), .08); }
.pal-l mark { padding: 0; background: none; color: var(--brand-ink); font-weight: 800; }
.pal-f { display: flex; gap: 1.2rem; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.pal-f kbd { margin-inline-end: .2rem; }
@media (max-width: 575.98px) { .ad-pal { margin-top: 0; } .pal-f { display: none; } }

/* ---------- confirm dialog ---------- */
.ad-confirm { width: min(460px, calc(100vw - 24px)); }
.ad-confirm .dl-body { display: grid; gap: .6rem; padding: 24px; }
.ac-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--warn-bg); color: var(--warn); font-size: 1.4rem; }
.ad-confirm.danger .ac-ic { background: var(--danger-bg); color: var(--danger); }
.ad-confirm h3 { margin: .2rem 0 0; font-size: 20px; }
.ad-confirm p { margin: 0; }
.ac-acts { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: .6rem; }
.ad-confirm.danger #acOk { background: var(--danger); }

/* ---------- charts (plain SVG, drawn by admin.js at the box's real width) ---------- */
.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { font: 600 15px var(--font); fill: var(--muted); }
.chart .grid line { stroke: var(--line); }
.chart .ln { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart .ln.s0 { stroke: var(--brand); } .chart .ln.s1 { stroke: #94a3b8; stroke-dasharray: 6 6; stroke-width: 2.5; }
.chart .area { fill: url(#adGrad); opacity: .9; }
.chart .bar { fill: var(--brand); }
.chart .bar.s1 { fill: #cbd5e1; }
[data-bs-theme="dark"] .chart .bar.s1 { fill: #3b4456; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .dot { fill: var(--surface); stroke: var(--brand); stroke-width: 3; }
.chart .guide { stroke: var(--muted); stroke-dasharray: 3 4; }
.ctip { position: absolute; z-index: 5; pointer-events: none; min-width: 150px; padding: 8px 12px; border-radius: 12px; background: #0b1024; color: #fff; font-size: 15px; line-height: 1.6; box-shadow: var(--shadow-lg); transform: translate(-50%, -110%); white-space: nowrap; }
.ctip b { display: block; }
.ctip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: .4rem; vertical-align: middle; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--muted); font-size: 15px; font-weight: 700; }
.legend i { display: inline-block; width: 14px; height: 4px; border-radius: 4px; margin-inline-end: .4rem; vertical-align: middle; background: var(--brand); }
.legend i.s1 { background: #94a3b8; }