/* =============================================================
   QRMENUS — admin design v2 (2026-10)
   The approved admin prototype (qrmenus-admin-claude-kit, reference/style.css) carried onto the real dashboard.
   Everything here is scoped to html.adm2, which only the signed-in dashboard pages carry, so the guest menu and
   the public site keep their own black/white and marketing looks. The old token names used by the pages' own
   <style> blocks are re-pointed at the prototype's palette, so the inline page styles follow without edits.
   ============================================================= */

html.adm2 {
  color-scheme: light;
  /* prototype tokens */
  --a-bg: #f5f7fa; --a-surface: #fff; --a-raised: #f8fafc; --a-ink: #172033; --a-muted: #58677d; --a-soft: #627086;
  --a-line: #e4eaf1; --a-blue: #2563eb; --a-blue-soft: #edf3ff; --a-green: #18794e; --a-green-bg: #eaf8f0;
  --a-amber: #8b5707; --a-amber-bg: #fff7e8; --a-red: #c03640; --a-red-bg: #fff0f1; --a-shadow: 0 20px 70px #17203317;
  --a-sidebar: 248px;
  /* the names the existing pages use */
  --bg: var(--a-bg); --bg-elevated: var(--a-surface); --bg-soft: var(--a-raised); --surface: var(--a-surface); --surface-2: var(--a-raised);
  --ink: var(--a-ink); --ink-2: #34425a; --ink-3: var(--a-muted); --ink-4: var(--a-soft);
  --line: var(--a-line); --line-strong: #cfd8e3; --focusring: rgb(37 99 235 / 22%);
  --brand: var(--a-blue); --brand-deep: #1d4ed8; --brand-hover: #1d4ed8; --brand-soft: var(--a-blue-soft); --brand-softer: #f5f8ff; --brand-fg: #fff;
  --accent: #b45309; --accent-deep: var(--a-amber); --accent-soft: var(--a-amber-bg); --accent-softer: #fffbf2;
  --success: var(--a-green); --success-soft: var(--a-green-bg); --warning: var(--a-amber); --warning-soft: var(--a-amber-bg);
  --danger: var(--a-red); --danger-soft: var(--a-red-bg); --info: var(--a-blue); --info-soft: var(--a-blue-soft);
  --ff-sans: 'Noto Sans Georgian', system-ui, -apple-system, 'Segoe UI', sans-serif; --ff-display: var(--ff-sans);
  --aside-w: var(--a-sidebar); --page-top-h: 77px;
  --sh-1: none; --sh-2: 0 6px 20px #1720330d; --sh-3: 0 12px 40px #17203314; --sh-4: var(--a-shadow);
}
html.adm2[data-theme="dark"] {
  color-scheme: dark;
  --a-bg: #10141c; --a-surface: #191f2a; --a-raised: #202735; --a-ink: #f3f5f9; --a-muted: #abb6c8; --a-soft: #8f9cb2;
  --a-line: #2d3748; --a-blue: #4e8cff; --a-blue-soft: #223655; --a-green: #7dd4a7; --a-green-bg: #15382d;
  --a-amber: #f4ce7d; --a-amber-bg: #3c301c; --a-red: #ffa7ad; --a-red-bg: #452831; --a-shadow: 0 22px 80px #0005;
  --ink-2: #d3d9e3; --line-strong: #3c4860; --focusring: rgb(78 140 255 / 30%);
  /* as before: --brand-deep is the fill under white text, --brand-hover the lighter link colour, --brand-fg the text on --brand */
  --brand-deep: #2563eb; --brand-hover: #8db4ff; --brand-fg: #0b1220; --brand-softer: #1b2a42;
  --accent: #f4ce7d; --accent-softer: #2e2618;
}

/* ---------- base ---------- */
html.adm2 body { background: var(--a-bg); color: var(--a-ink); font-family: var(--ff-sans); font-size: 14px; line-height: 1.6; font-feature-settings: normal; }
html.adm2 :focus-visible { outline: 3px solid #679bff; outline-offset: 3px; border-radius: 4px; }
html.adm2 .admin-shell h1 { font-size: 26px; font-weight: 600; letter-spacing: -.7px; line-height: 1.35; }
html.adm2 .admin-shell h2 { font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: 0; }
html.adm2 .admin-shell h3 { font-size: 15px; font-weight: 600; letter-spacing: 0; }
html.adm2 .numeric, html.adm2 .num { font-variant-numeric: tabular-nums; }
html.adm2 svg.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- shell ---------- */
html.adm2 .admin-shell { display: block; min-height: 100vh; }
html.adm2 .admin-shell .aside {
  position: fixed; inset: 0 auto 0 0; width: var(--a-sidebar); height: 100vh; height: 100dvh; z-index: 30;
  background: var(--a-surface); border-right: 1px solid var(--a-line); padding: 0; gap: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
html.adm2 .admin-shell .main { margin-left: var(--a-sidebar); min-height: 100vh; background: var(--a-bg); padding: 0; min-width: 0; }

/* brand row */
html.adm2 .aside .brand { height: 77px; flex: 0 0 77px; display: flex; align-items: center; gap: 12px; padding: 0 25px; border-bottom: 1px solid var(--a-line); margin: 0; }
html.adm2 .aside .brand-link .logo-dot { width: 31px; height: 31px; font-size: 14px; font-weight: 700; }
html.adm2 .aside .brand .nav-logo { font-size: 19px !important; font-weight: 700; letter-spacing: -.5px; color: var(--a-ink); }
html.adm2 .aside .brand .nav-logo b { color: var(--a-blue); font-weight: 700; }

/* business / branch switcher (biz-switch.js) */
html.adm2 .aside .bs { margin: 20px 18px 6px !important; flex: 0 0 auto !important; }
html.adm2 .aside .bs-btn { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-surface); min-height: 58px; }
html.adm2 .aside .bs-btn:hover { background: var(--a-raised); }
html.adm2 .aside .bs-av { width: 38px; height: 38px; border-radius: 9px; background-color: var(--a-blue-soft); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--a-blue); font-weight: 600; }
html.adm2 .aside .bs-tx b { font-size: 13px; font-weight: 600; color: var(--a-ink); }
html.adm2 .aside .bs-tx small { font-size: 11px; color: var(--a-muted); }

/* nav */
html.adm2 .aside .aside-nav { flex: 1 1 auto; overflow: auto; padding: 14px 12px 18px; gap: 0; }
html.adm2 .aside .bs + .aside-nav, html.adm2 .aside .bs-ph + .aside-nav { padding-top: 8px; }
/* business switcher slot: nav-group.js sets .qr-multi before the first frame, but the placeholder is added later by admin-aside.js (a module), which pushed the nav down 77px. Hold the same 84px (20 margin + 58 button + 6) from the first frame; the placeholder or switcher then takes it over. The placeholder is now as tall as the real button (58px, was 51). biz-switch.js drops .qr-multi when it turns out there is no switcher, so no blank gap stays. */
html.adm2.qr-multi .aside .brand:not(:has(~ .bs)) { margin-bottom: 84px; }
html.adm2.qr-multi .aside .brand:not(:has(~ .bs)) + .aside-nav { padding-top: 8px; }
html.adm2 .aside .bs-ph { flex: 0 0 58px !important; height: 58px !important; }
html.adm2 .aside .aside-link, html.adm2 .aside .dg-h {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 43px; border-radius: 8px; padding: 10px 12px;
  color: var(--a-muted); font-size: 13px; font-weight: 400; text-align: left; background: none; position: relative;
}
html.adm2 .aside .dg { margin: 3px 0; }
html.adm2 .aside .dg-h { color: var(--a-ink); font-weight: 500; }
html.adm2 .aside .dg-h .dg-chev { margin-left: auto; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .15s; }
html.adm2 .aside .dg.col .dg-h .dg-chev { transform: rotate(-90deg); }
html.adm2 .aside .dg:not(.solo) > .dg-b { padding-left: 14px; border-left: 1px solid var(--a-line); margin: 0 0 6px 21px; }
html.adm2 .aside .dg:not(.solo) > .dg-b .aside-link { padding-left: 12px; font-size: 12px; gap: 9px; }
html.adm2 .aside .dg.col > .dg-b { display: none; }
html.adm2 .aside .aside-link:hover, html.adm2 .aside .dg-h:hover { background: var(--a-raised); color: var(--a-ink); }
html.adm2 .aside .aside-link.active { color: var(--a-blue); background: var(--a-blue-soft); font-weight: 600; }
html.adm2 .aside .aside-link.active::before { content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--a-blue); }
html.adm2 .aside .aside-link .ico, html.adm2 .aside .dg-h .ico { width: 20px; height: 20px; font-size: 0; }
html.adm2 .aside .aside-link .ico svg, html.adm2 .aside .dg-h .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.adm2 .aside .dg:not(.solo) > .dg-b .aside-link .ico svg { width: 18px; height: 18px; }

/* footer */
html.adm2 .aside .aside-foot { margin: 0; padding: 12px 18px; border-top: 1px solid var(--a-line); flex: 0 0 auto; }
html.adm2 .aside-foot .aside-user { padding: 4px 0; margin: 0; border: 0; background: none; border-radius: 0; gap: 10px; }
html.adm2 .aside-foot .aside-user .avatar { width: 35px; height: 35px; border-radius: 11px; background: #2563eb; color: #fff; font-size: 13px; font-weight: 600; }
html.adm2 .aside-foot .aside-user .meta .n { font-size: 12px; font-weight: 600; }
html.adm2 .aside-foot .aside-user .meta .e { font-size: 11px; font-weight: 400; color: var(--a-muted); }

/* Ship the final upload overlay before admin-aside.js loads, so navigation
   never paints the legacy blue camera badge over the business picture. */
html.adm2 .aside-foot .avatar-wrap { position: relative; flex: none; line-height: 0; border-radius: 11px; }
html.adm2 .aside-foot #logoPicBtn { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: inherit; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
html.adm2 .aside-foot #logoPicBtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
html.adm2 .aside-foot #logoPicBtn:focus-visible { background: rgba(0,0,0,.45); }
html.adm2 .aside-foot #logoPicBtn:focus-visible svg { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  html.adm2 .aside-foot #logoPicBtn:hover { background: rgba(0,0,0,.45); }
  html.adm2 .aside-foot #logoPicBtn:hover svg { opacity: 1; }
}

/* top bar (built by admin-v2.js) */
html.adm2 .qa-top {
  height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 32px;
  background: var(--a-surface); border-bottom: 1px solid var(--a-line); position: sticky; top: 0; z-index: 28;
}
html.adm2 .qa-crumbs { display: flex; align-items: center; gap: 10px; color: var(--a-muted); font-size: 12px; min-width: 0; flex: 1 1 auto; }
html.adm2 .qa-crumbs strong { color: var(--a-ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.adm2 .qa-top-act { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
html.adm2 .qa-top .mobile-menu-btn { display: none; }
html.adm2 .qa-ctx { font-size: 11px; padding: 4px 9px; border: 1px solid var(--a-line); border-radius: 6px; color: var(--a-muted); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
html.adm2 .qa-top .lang-trigger { height: 40px; border-radius: 9px; border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-muted); font-size: 12px; font-weight: 500; padding: 0 11px; }
html.adm2 .qa-top .lang-trigger:hover { color: var(--a-blue); border-color: var(--a-blue); }
html.adm2 .qa-top .theme-toggle, html.adm2 .qa-icon-btn {
  width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--a-line); border-radius: 9px;
  background: var(--a-surface); color: var(--a-muted); padding: 0; position: static; box-shadow: none; flex: 0 0 auto;
}
html.adm2 .qa-top .theme-toggle:hover, html.adm2 .qa-icon-btn:hover { color: var(--a-blue); border-color: var(--a-blue); transform: none; }
html.adm2 .qa-top .theme-toggle .tsw-knob { width: auto; height: auto; margin: 0; background: none; box-shadow: none; transform: none !important; display: grid; place-items: center; }
html.adm2 .qa-top .theme-toggle svg { width: 20px; height: 20px; }
html.adm2 .qa-top .theme-toggle .i-moon, html.adm2 .qa-top .theme-toggle .i-sun { fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round; stroke-linejoin: round; }
html.adm2 .qa-top .theme-toggle .i-sun circle, html.adm2 .qa-top .theme-toggle .i-moon circle { fill: none !important; stroke: none !important; }
html.adm2 .qa-top .theme-toggle .i-sun { display: none !important; }
html.adm2 .qa-top .theme-toggle .i-moon { display: block !important; }
html.adm2[data-theme="dark"] .qa-top .theme-toggle .i-sun { display: block !important; }
html.adm2[data-theme="dark"] .qa-top .theme-toggle .i-moon { display: none !important; }

/* page header: the pages' own .admin-top / .page-top row becomes the prototype's .page-head */
html.adm2 .admin-shell .main > .admin-top, html.adm2 .admin-shell .main > .page-top {
  position: static; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-direction: row;
  max-width: 1640px; margin: 0 auto; padding: 30px 32px 26px; background: none; border: 0; min-height: 0;
}
html.adm2 .admin-shell .main > .admin-top > div:first-child, html.adm2 .admin-shell .main > .page-top > div:first-child { min-width: 0; flex: 1 1 auto; }
html.adm2 .admin-shell .admin-h, html.adm2 .admin-shell .page-top h1 { font-size: 26px; font-weight: 600; letter-spacing: -.7px; line-height: 1.35; margin: 0; color: var(--a-ink); }
html.adm2 .admin-shell .admin-sub, html.adm2 .admin-shell .page-top .qa-sub { color: var(--a-muted); font-size: 13px; margin-top: 7px; font-weight: 400; }
html.adm2 .admin-shell .page-top .crumbs { display: none; }
html.adm2 .admin-shell .admin-actions, html.adm2 .admin-shell .page-top .actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
html.adm2 .admin-shell .main-inner { max-width: 1640px; margin: 0 auto; padding: 0 32px 40px; }

/* ---------- buttons ---------- */
html.adm2 .btn {
  min-height: 43px; padding: 9px 15px; border-radius: 9px; display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-ink); font-weight: 500; font-size: 12px; line-height: 1.2;
  white-space: nowrap; box-shadow: none; transform: none;
}
html.adm2 .btn:hover:not(:disabled) { background: var(--a-raised); transform: none; box-shadow: none; }
html.adm2 .btn-primary, html.adm2 .btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
html.adm2 .btn-primary:hover:not(:disabled), html.adm2 .btn.primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
html.adm2 .btn-ghost, html.adm2 .btn-soft { background: var(--a-surface); border-color: var(--a-line); color: var(--a-ink); }
html.adm2 .btn-brand-soft { background: var(--a-blue-soft); border-color: transparent; color: var(--a-blue); }
html.adm2 .btn-brand-soft:hover:not(:disabled) { background: var(--a-blue-soft); color: var(--a-blue); border-color: var(--a-blue); }
html.adm2 .btn-secondary { background: var(--a-surface); border-color: var(--a-line); color: var(--a-ink); }
html.adm2 .btn-secondary:hover:not(:disabled) { background: var(--a-raised); }
html.adm2 .btn-danger { background: var(--a-surface); border-color: var(--a-red); color: var(--a-red); }
html.adm2 .btn-danger:hover:not(:disabled) { background: var(--a-red-bg); }
html.adm2 .btn.subtle, html.adm2 .btn-subtle { border-color: transparent; background: transparent; color: var(--a-muted); }
html.adm2 .btn-sm, html.adm2 .btn-xs, html.adm2 .btn.compact { min-height: 34px; padding: 6px 11px; font-size: 11px; border-radius: 8px; }
html.adm2 .btn-lg { min-height: 46px; padding: 11px 18px; font-size: 13px; }
html.adm2 .btn-icon { width: 40px; height: 40px; min-height: 40px; padding: 0; }
html.adm2 .btn svg { width: 17px; height: 17px; }
html.adm2 .btn:disabled { opacity: .5; cursor: default; }

/* ---------- cards, metrics ---------- */
html.adm2 .admin-shell .card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 13px; padding: 23px; box-shadow: none; }
html.adm2 .admin-shell .card-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 21px; padding: 0; border: 0;
  font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--a-ink);
}
html.adm2 .admin-shell .stat-grid { gap: 16px; }
html.adm2 .admin-shell .stat { padding: 20px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; box-shadow: none; }
html.adm2 .admin-shell .stat .lbl { font-size: 12px; color: var(--a-muted); font-weight: 400; }
html.adm2 .admin-shell .stat .val { font-size: 28px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1.4; color: var(--a-ink); }
html.adm2 .admin-shell .stat .sub { font-size: 11px; color: var(--a-muted); }
html.adm2 .admin-shell .stat .si { width: 35px; height: 35px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--a-blue); background: var(--a-blue-soft); }

/* shared prototype helpers the redesigned pages use */
html.adm2 .qa-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
html.adm2 .qa-metric { padding: 20px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; min-width: 0; }
html.adm2 .qa-metric-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
html.adm2 .qa-metric-icon { width: 35px; height: 35px; border-radius: 10px; display: grid; place-items: center; color: var(--a-blue); background: var(--a-blue-soft); }
html.adm2 .qa-metric label { font-size: 12px; color: var(--a-muted); display: block; }
html.adm2 .qa-metric strong { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.4; display: block; }
html.adm2 .qa-metric strong.skel { height: 1.4em; }
html.adm2 .qa-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
html.adm2 .qa-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html.adm2 .qa-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 9px; padding: 0 12px; min-height: 43px; min-width: 180px; flex: 1; max-width: 440px; color: var(--a-muted); }
html.adm2 .qa-search svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
html.adm2 .qa-search input { border: 0 !important; outline: 0 !important; background: transparent !important; width: 100%; min-width: 0; font-size: 12px; height: 41px; padding: 0 !important; box-shadow: none !important; min-height: 0 !important; }
html.adm2 .qa-notice { display: flex; align-items: flex-start; gap: 11px; padding: 16px 19px; border-radius: 10px; font-size: 12px; color: var(--a-blue); background: var(--a-blue-soft); }
html.adm2 .qa-notice.amber { background: var(--a-amber-bg); color: var(--a-amber); }
html.adm2 .qa-notice.green { background: var(--a-green-bg); color: var(--a-green); }
html.adm2 .qa-notice.red { background: var(--a-red-bg); color: var(--a-red); }
html.adm2 .qa-empty { text-align: center; display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 220px; padding: 35px 22px; gap: 10px; color: var(--a-ink); }
html.adm2 .qa-empty p { color: var(--a-muted); font-size: 12px; max-width: 390px; margin: 0; }
html.adm2 .qa-empty svg { width: 33px; height: 33px; color: var(--a-soft); fill: none; stroke: currentColor; stroke-width: 1.8; margin-bottom: 7px; }

/* ---------- badges ---------- */
html.adm2 .badge { padding: 4px 9px; border-radius: 6px; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.4; gap: 5px; background: var(--a-raised); color: var(--a-muted); }
html.adm2 .badge-success, html.adm2 .badge.green { background: var(--a-green-bg); color: var(--a-green); }
html.adm2 .badge-warning, html.adm2 .badge-accent, html.adm2 .badge.amber { background: var(--a-amber-bg); color: var(--a-amber); }
html.adm2 .badge-danger, html.adm2 .badge.red { background: var(--a-red-bg); color: var(--a-red); }
html.adm2 .badge-info, html.adm2 .badge-brand, html.adm2 .badge.blue { background: var(--a-blue-soft); color: var(--a-blue); }
html.adm2 .badge-neutral { background: var(--a-raised); color: var(--a-muted); }

/* ---------- forms ---------- */
html.adm2 .admin-shell .field, html.adm2 .qa-drawer .field { gap: 7px; margin-bottom: 17px; min-width: 0; }
html.adm2 .field label, html.adm2 .qa-field-label { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--a-ink); }
html.adm2 .field .hint, html.adm2 .field small { font-size: 11px; color: var(--a-muted); }
html.adm2 .field input:not([type]), html.adm2 .field input[type="text"], html.adm2 .field input[type="email"], html.adm2 .field input[type="password"],
html.adm2 .field input[type="number"], html.adm2 .field input[type="url"], html.adm2 .field input[type="search"], html.adm2 .field input[type="tel"],
html.adm2 .field input[type="date"], html.adm2 .field input[type="time"], html.adm2 .field select, html.adm2 .field textarea,
html.adm2 input.input, html.adm2 select.input, html.adm2 textarea.input, html.adm2 .qa-input {
  min-height: 43px; width: 100%; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-surface); color: var(--a-ink);
  padding: 10px 12px; font: inherit; font-size: 13px; min-width: 0; box-shadow: none;
}
html.adm2 .field textarea, html.adm2 textarea.input { min-height: 94px; resize: vertical; }
html.adm2 .field input:focus, html.adm2 .field select:focus, html.adm2 .field textarea:focus,
html.adm2 input.input:focus, html.adm2 select.input:focus, html.adm2 textarea.input:focus, html.adm2 .qa-input:focus { border-color: var(--a-blue); box-shadow: 0 0 0 3px var(--focusring); outline: none; }
html.adm2 .field input::placeholder, html.adm2 .field textarea::placeholder, html.adm2 .input::placeholder { color: var(--a-soft); }
html.adm2 .admin-shell input[type="checkbox"], html.adm2 .admin-shell input[type="radio"] { accent-color: #2563eb; }
html.adm2 .qa-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
html.adm2 .qa-form-grid .field { margin-bottom: 0; }
html.adm2 .qa-switch { width: 37px; height: 22px; padding: 3px; border-radius: 20px; background: var(--a-line); display: inline-flex; align-items: center; flex-shrink: 0; border: 0; cursor: pointer; }
html.adm2 .qa-switch::after { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0002; }
html.adm2 .qa-switch[aria-checked="true"] { background: #20b76d; justify-content: flex-end; }
html.adm2 .qa-chips { display: flex; flex-wrap: wrap; gap: 7px; }
html.adm2 .qa-chip { padding: 7px 11px; border-radius: 7px; background: var(--a-surface); border: 1px solid var(--a-line); font-size: 11px; min-height: 34px; color: var(--a-ink); }
html.adm2 .qa-chip.active, html.adm2 .qa-chip[aria-pressed="true"] { color: var(--a-blue); background: var(--a-blue-soft); border-color: var(--a-blue); }

/* ---------- tabs ---------- */
html.adm2 .admin-shell .tabs, html.adm2 .qa-tabs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 0; overflow: visible; }
html.adm2 .admin-shell .tab, html.adm2 .qa-tab {
  padding: 9px 14px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 400; color: var(--a-muted);
  min-height: 40px; margin: 0; background: none; display: inline-flex; align-items: center; gap: 6px;
}
html.adm2 .admin-shell .tab:hover, html.adm2 .qa-tab:hover { background: var(--a-raised); color: var(--a-ink); }
html.adm2 .admin-shell .tab.active, html.adm2 .admin-shell .tab[aria-selected="true"], html.adm2 .qa-tab.active { background: var(--a-blue-soft); color: var(--a-blue); font-weight: 600; border-color: transparent; }
html.adm2 .qa-tab-count, html.adm2 .admin-shell .tab .cnt { font-size: 10px; padding: 1px 5px; background: var(--a-line); border-radius: 4px; margin-left: 2px; color: inherit; }
html.adm2 .qa-tabs.underlined { border-bottom: 1px solid var(--a-line); gap: 18px; }
html.adm2 .qa-tabs.underlined .qa-tab { border-radius: 0; padding-left: 1px; padding-right: 1px; }
html.adm2 .qa-tabs.underlined .qa-tab.active { background: none; border-bottom: 2px solid var(--a-blue); }
html.adm2 .seg { background: var(--a-raised); border-color: var(--a-line); border-radius: 9px; }
html.adm2 .seg > button, html.adm2 .seg > label { font-weight: 500; color: var(--a-muted); border-radius: 7px; }
html.adm2 .seg > button.active, html.adm2 .seg > label.active, html.adm2 .seg > button[aria-pressed="true"] { background: var(--a-surface); color: var(--a-blue); box-shadow: none; }

/* ---------- tables ---------- */
html.adm2 .qa-table-wrap { position: relative; overflow: auto; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; }
html.adm2 table.data, html.adm2 .qa-table-wrap table { width: 100%; border-collapse: collapse; border-spacing: 0; text-align: left; font-size: 12px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; overflow: hidden; }
html.adm2 .qa-table-wrap table { border: 0; border-radius: 0; }
html.adm2 table.data th, html.adm2 .qa-table-wrap th { background: var(--a-raised); color: var(--a-muted); font-weight: 500; font-size: 11px; padding: 14px 17px; white-space: nowrap; letter-spacing: 0; text-transform: none; border-bottom: 0; }
html.adm2 table.data td, html.adm2 .qa-table-wrap td { padding: 16px 17px; border-top: 1px solid var(--a-line); border-bottom: 0; vertical-align: middle; }
html.adm2 table.data tbody tr:hover, html.adm2 .qa-table-wrap tbody tr:hover { background: transparent; }
html.adm2 .qa-right { text-align: right; }
html.adm2 .qa-dish-cell { display: flex; align-items: center; gap: 12px; min-width: 170px; }
html.adm2 .qa-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; flex-shrink: 0; background: var(--a-raised); border: 1px solid var(--a-line); display: inline-grid; place-items: center; color: var(--a-soft); }
html.adm2 .qa-dish-cell small { display: block; color: var(--a-muted); margin-top: 3px; font-size: 12px; }
html.adm2 .qa-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--a-line); }
html.adm2 .qa-list-row:first-child { padding-top: 0; }
html.adm2 .qa-list-row:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- modal / drawer (side editor) ---------- */
html.adm2 .modal-overlay { background: #080e1f66; backdrop-filter: blur(3px); }
html.adm2 .modal { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; box-shadow: var(--a-shadow); }
html.adm2 .qa-overlay { position: fixed; inset: 0; background: #080e1f66; backdrop-filter: blur(3px); z-index: 170; display: flex; justify-content: flex-end; }
html.adm2 .qa-drawer { background: var(--a-surface); color: var(--a-ink); width: 520px; max-width: 100%; height: 100%; display: flex; flex-direction: column; box-shadow: var(--a-shadow); }
html.adm2 .qa-drawer.wide { width: 640px; }
html.adm2 .qa-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--a-line); gap: 14px; flex: 0 0 auto; }
html.adm2 .qa-dialog-head h2 { font-size: 19px; font-weight: 600; margin: 0; }
html.adm2 .qa-dialog-head p { font-size: 12px; color: var(--a-muted); margin: 2px 0 0; }
html.adm2 .qa-dialog-body { overflow: auto; flex: 1; padding: 23px 24px; min-height: 0; }
html.adm2 .qa-dialog-foot { display: flex; gap: 12px; justify-content: flex-end; padding: 17px 24px max(17px, env(safe-area-inset-bottom)); border-top: 1px solid var(--a-line); background: var(--a-surface); flex: 0 0 auto; }
html.adm2 .qa-dialog-foot .btn { flex: 1; min-width: 0; white-space: normal; }

/* ---------- toast, misc ---------- */
html.adm2 .toast { background: #172033; color: #fff; border-radius: 10px; font-size: 12px; box-shadow: var(--a-shadow); }
html.adm2 .toast.success { background: #172033; }
html.adm2 .toast.error { background: #a32b34; }
html.adm2 .alert { border-radius: 10px; font-size: 12px; padding: 16px 19px; }
html.adm2 .alert-info { background: var(--a-blue-soft); color: var(--a-blue); }
html.adm2 .alert-success { background: var(--a-green-bg); color: var(--a-green); }
html.adm2 .alert-warning { background: var(--a-amber-bg); color: var(--a-amber); }
html.adm2 .alert-danger { background: var(--a-red-bg); color: var(--a-red); }
html.adm2 .admin-shell .empty { background: var(--a-surface); border: 1px dashed var(--a-line); border-radius: 12px; color: var(--a-muted); }

/* ---------- mobile bottom bar ---------- */
html.adm2 .mobile-bottom-nav {
  height: calc(64px + env(safe-area-inset-bottom)); padding: 5px 8px max(5px, env(safe-area-inset-bottom)); background: var(--a-surface);
  border-top: 1px solid var(--a-line); box-shadow: none; align-items: center; justify-content: space-around; z-index: 25;
}
html.adm2 .mobile-bottom-nav a, html.adm2 .mobile-bottom-nav button { flex: 0 0 24%; color: var(--a-muted); display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 3px; font-size: 9px; font-weight: 400; min-height: 50px; padding: 0; background: none; border: 0; }
html.adm2 .mobile-bottom-nav .active { color: var(--a-blue); }
html.adm2 .mobile-bottom-nav .ico svg { width: 20px !important; height: 20px !important; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  html.adm2 { --a-sidebar: 225px; }
  html.adm2 .qa-top { padding: 0 24px; }
  html.adm2 .admin-shell .main > .admin-top, html.adm2 .admin-shell .main > .page-top { padding: 25px 24px 26px; }
  html.adm2 .admin-shell .main-inner { padding: 0 24px 25px; }
  html.adm2 .qa-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  html.adm2 .admin-shell .main > .admin-top, html.adm2 .admin-shell .main > .page-top { flex-direction: column; }
  html.adm2 .admin-shell .admin-actions, html.adm2 .admin-shell .page-top .actions { justify-content: flex-start; }
  html.adm2 .qa-crumbs > span:first-child, html.adm2 .qa-crumbs > span:nth-child(2) { display: none; }
}
@media (max-width: 760px) {
  html.adm2 { --a-sidebar: 0px; }
  html.adm2 .admin-shell .aside { width: 275px; transform: translateX(-100%); transition: transform .2s; z-index: 100 !important; box-shadow: none; }
  html.adm2 .admin-shell .aside.open { transform: translateX(0); box-shadow: var(--a-shadow); }
  html.adm2 .aside-overlay { background: #080e1f66 !important; z-index: 99 !important; }
  html.adm2 .admin-shell .main { margin-left: 0; }
  html.adm2 .qa-top { height: 63px; padding: 0 16px; gap: 10px; }
  html.adm2 .qa-top .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0; line-height: 0; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 9px; border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-muted); font-size: 0; }
  html.adm2 .qa-top .mobile-menu-btn::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") center/20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") center/20px no-repeat; }
  html.adm2 .qa-crumbs { font-size: 11px; gap: 7px; }
  html.adm2 .qa-crumbs strong { max-width: 145px; }
  html.adm2 .qa-top-act { gap: 6px; }
  html.adm2 .qa-top .theme-toggle, html.adm2 .qa-top .lang-trigger, html.adm2 .qa-icon-btn { width: 36px; height: 36px; }
  html.adm2 .qa-top .lang-trigger { width: auto; padding: 0 8px; }
  html.adm2 .qa-ctx { display: none; }
  html.adm2 .admin-shell .main > .admin-top, html.adm2 .admin-shell .main > .page-top { padding: 24px 16px 23px; gap: 16px; }
  html.adm2 .admin-shell .admin-h, html.adm2 .admin-shell .page-top h1, html.adm2 .admin-shell h1 { font-size: 23px; letter-spacing: -.5px; }
  html.adm2 .admin-shell .admin-sub, html.adm2 .admin-shell .page-top .qa-sub { font-size: 12px; white-space: normal; }
  html.adm2 .admin-shell .admin-actions, html.adm2 .admin-shell .page-top .actions { width: 100%; gap: 8px; }
  html.adm2 .admin-shell .admin-actions .btn-primary, html.adm2 .admin-shell .page-top .actions .btn-primary { margin-left: auto; }
  html.adm2 .admin-shell .main-inner { padding: 0 16px calc(25px + 64px + env(safe-area-inset-bottom)); }
  html.adm2 .btn { min-height: 43px; padding: 10px 12px; font-size: 11px; }
  html.adm2 .btn-sm, html.adm2 .btn-xs, html.adm2 .btn.compact { min-height: 36px; }
  html.adm2 .admin-shell .card { padding: 18px; border-radius: 11px; }
  html.adm2 .admin-shell .card-h { font-size: 15px; margin-bottom: 16px; }
  html.adm2 .qa-metrics { gap: 10px; margin-bottom: 18px; }
  html.adm2 .qa-metric { padding: 15px; }
  html.adm2 .qa-metric strong { font-size: 25px; }
  html.adm2 .qa-search { max-width: none; min-width: 0; }
  html.adm2 .admin-shell .tabs, html.adm2 .qa-tabs { gap: 3px; margin-bottom: 16px; }
  html.adm2 .admin-shell .tab, html.adm2 .qa-tab { font-size: 11px; padding: 8px 10px; min-height: 39px; }
  html.adm2 table.data th, html.adm2 table.data td, html.adm2 .qa-table-wrap th, html.adm2 .qa-table-wrap td { padding: 13px; font-size: 11px; }
  html.adm2 .qa-form-grid { grid-template-columns: 1fr; gap: 15px; }
  html.adm2 .qa-form-grid.keep-two { grid-template-columns: 1fr 1fr; gap: 12px; }
  html.adm2 .field input, html.adm2 .field textarea, html.adm2 .field select, html.adm2 .qa-input, html.adm2 input.input, html.adm2 textarea.input { font-size: 16px !important; }
  html.adm2 .qa-drawer, html.adm2 .qa-drawer.wide { width: 100%; }
  html.adm2 .qa-dialog-head { padding: 17px 18px; }
  html.adm2 .qa-dialog-head h2 { font-size: 18px; }
  html.adm2 .qa-dialog-body { padding: 20px 18px; }
  html.adm2 .qa-dialog-foot { padding: 14px 18px max(14px, env(safe-area-inset-bottom)); }
  html.adm2 .mobile-bottom-nav { display: flex; }
}
@media (min-width: 761px) { html.adm2 .mobile-bottom-nav { display: none !important; } }
@media (prefers-reduced-motion: reduce) { html.adm2 *, html.adm2 *::before, html.adm2 *::after { transition: none !important; } }
/* role-limited accounts: the bottom bar only offers what the account may open (the sidebar is already limited) */
html.adm2.qr-kitchen .mobile-bottom-nav a, html.adm2.qr-staff .mobile-bottom-nav a:not([data-target="service.html"]) { display: none; }
html.adm2 .qa-dialog-err { margin: 0 24px 14px; padding: 12px 14px; border-radius: 10px; background: var(--a-red-bg); color: var(--a-red); font-size: 12px; }
html.adm2 .qa-icon-btn svg { width: 20px; height: 20px; }
/* admin.html: head buttons that belong to one section */
html.adm2 .page-top [data-sec] { display: none !important; }
html.adm2[data-sec="dashboard"] .page-top [data-sec~="dashboard"], html.adm2[data-sec="menu-edit"] .page-top [data-sec~="menu-edit"],
html.adm2[data-sec="categories"] .page-top [data-sec~="categories"], html.adm2[data-sec="qr"] .page-top [data-sec~="qr"],
html.adm2[data-sec="appearance"] .page-top [data-sec~="appearance"], html.adm2[data-sec="business"] .page-top [data-sec~="business"],
html.adm2[data-sec="contact"] .page-top [data-sec~="contact"] { display: inline-flex !important; }
html.adm2.adm2:not(.qr-show-up) .page-top .actions a[href="subscription.html"] { display: none !important; }
/* dishes */
html.adm2 .qa-dish-cell { background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; font: inherit; }
html.adm2 .qa-dish-cell strong { font-weight: 500; font-size: 12px; display: block; }
html.adm2 .qa-dish-cell:hover strong { color: var(--a-blue); }
html.adm2 img.qa-thumb { display: block; }
html.adm2 .qa-acts { display: flex; gap: 6px; justify-content: flex-end; position: relative; }
html.adm2 .qa-acts .qa-icon-btn { width: 40px; height: 40px; }
html.adm2 .qa-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; padding: 6px; border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-surface); box-shadow: var(--a-shadow); display: flex; flex-direction: column; }
html.adm2 .qa-menu button { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 10px; border-radius: 7px; font-size: 12px; color: var(--a-ink); text-align: left; background: none; border: 0; cursor: pointer; }
html.adm2 .qa-menu button:hover { background: var(--a-raised); }
html.adm2 .qa-menu button.danger { color: var(--a-red); }
html.adm2 .qa-menu svg { width: 17px; height: 17px; }
html.adm2 .qa-avail { display: flex; align-items: center; gap: 10px; }
html.adm2 .qa-count { font-size: 12px; color: var(--a-muted); white-space: nowrap; }
html.adm2 .qa-upload { border: 1px dashed var(--a-soft); border-radius: 10px; min-height: 65px; padding: 14px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; background: var(--a-raised); color: var(--a-muted); font-size: 12px; }
html.adm2 .qa-upload:hover { border-color: var(--a-blue); color: var(--a-blue); }
html.adm2 .qa-dialog-photo { width: 100%; height: 190px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; display: block; }
html.adm2 .qa-check { display: flex; gap: 9px; align-items: center; font-size: 12px; cursor: pointer; }
html.adm2 .qa-check input { margin: 0; width: 17px; height: 17px; }
html.adm2 .qa-check-box { background: var(--a-raised); border: 1px solid var(--a-line); padding: 7px 10px; border-radius: 8px; }
html.adm2 .qa-check-box:has(input:checked) { border-color: var(--a-blue); background: var(--a-blue-soft); color: var(--a-blue); }
html.adm2 .qa-divider { height: 1px; background: var(--a-line); margin: 22px 0; border: 0; }
html.adm2 .qa-spacer { height: 18px; }
html.adm2 .qa-muted { color: var(--a-muted); }
html.adm2 .qa-small { font-size: 12px; }
html.adm2 .qa-lang-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--a-amber); margin-left: 5px; vertical-align: middle; }
@media (max-width: 760px) {
  html.adm2 .qa-table-wrap table { min-width: 620px; }
  html.adm2 .qa-acts .qa-icon-btn { width: 36px; height: 36px; }
}
html.adm2 .sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.adm2 [hidden] { display: none !important; }
html.adm2 .aside .brand .nav-logo { display: inline; }
html.adm2 .qa-prow.off .qa-dish-cell, html.adm2 .qa-prow.off .qa-cat-name { opacity: .6; }
html.adm2 .qa-pname { display: block; font-size: 12px; font-weight: 500; line-height: 1.4; -webkit-line-clamp: unset; }
html.adm2 .qa-cat-name { font-size: 12px; color: var(--a-ink); }
html.adm2 .modal-overlay { z-index: 190; }
html.adm2 .modal { padding: 24px; }
html.adm2 .modal h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
html.adm2 .modal p { font-size: 13px; color: var(--a-muted); margin-bottom: 0; }
html.adm2 .modal-actions { margin-top: 22px; gap: 10px; }
@media (max-width: 760px) { html.adm2 #dishTools .qa-count { display: none; } }
/* grids, dashboard */
/* Visible loading shapes occupy the traffic/quality card's actual sections. */
html.adm2 .qa-load-line { display: block; width: 62%; height: 14px; border-radius: 4px; background: var(--a-line); }
html.adm2 .qa-load-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
html.adm2 .qa-load-head p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--a-muted); flex: 1 1 260px; }
html.adm2 .qa-load-head > div { display: flex; gap: 6px; }
html.adm2 .qa-load-head span { font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--a-line); }
html.adm2 .qa-load-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
html.adm2 .qa-load-stat { flex: 1 1 130px; padding: 14px 16px; border-radius: 14px; background: var(--a-line); }
html.adm2 .qa-load-stat .qa-load-line { background: var(--a-surface); width: 100%; height: auto; font-size: 12px; line-height: 1.6; color: transparent; margin-top: 4px; }
html.adm2 .qa-load-stat .qa-load-number { font-size: 26px; height: 1.1em; width: 40%; margin-top: 0; }
html.adm2 .qa-load-chart { margin-top: 20px; }
html.adm2 .qa-load-chart > .qa-load-line:first-child { height: 1.6em; font-size: 13px; margin-bottom: 10px; }
html.adm2 .qa-load-chart > .qa-load-line:last-child { margin-top: 6px; height: 1.6em; font-size: 11px; }
html.adm2 .qa-load-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
html.adm2 .qa-load-bars i { flex: 1 1 0; height: 60%; border-radius: 3px 3px 0 0; background: var(--a-line); }
html.adm2 .qa-load-breakdown { display: grid; gap: 10px; margin-top: 22px; font-size: 13px; }
html.adm2 .qa-load-breakdown > .qa-load-line { height: 1.6em; }
html.adm2 .qa-load-breakdown > .qa-load-line:last-child { height: calc(1.6em + 19px); }
html.adm2 .qa-load-note { font-size: 13px; height: 1.6em; margin-top: 10px; }
html.adm2 .dq-list > .qa-quality-loading { display: grid; gap: 13px; width: 100%; font-size: 12px; }
html.adm2 .qa-quality-loading .qa-load-line { height: 1.6em; width: 85%; }
html.adm2 .qa-grid { display: grid; gap: 18px; }
html.adm2 .qa-split { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); }
html.adm2 .qa-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.adm2 .qa-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.adm2 .qa-delta { font-size: 10px; color: var(--a-muted); }
html.adm2 .dash-acts { margin-bottom: 22px; }
html.adm2 .card-h a.qa-small { font-size: 12px; font-weight: 400; color: var(--a-blue); }
html.adm2 .dq-ring { width: 115px; height: 115px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(#2563eb 0 calc(var(--p) * 3.6deg), var(--a-line) calc(var(--p) * 3.6deg)); margin: 8px auto 17px; }
html.adm2 .dq-ring::before { content: ''; position: absolute; width: 94px; height: 94px; border-radius: 50%; background: var(--a-surface); }
html.adm2 .dq-ring strong { position: relative; z-index: 1; font-size: 23px; font-weight: 600; }
html.adm2 .dq-list { display: grid; gap: 13px; margin: 20px 0; }
html.adm2 .dq-list > div { display: flex; gap: 10px; font-size: 12px; align-items: center; }
html.adm2 .dq-list svg { width: 17px; height: 17px; color: var(--a-blue); }
html.adm2 .qa-info-rows { display: grid; gap: 14px; font-size: 12px; }
html.adm2 .qa-info-rows > div { display: flex; justify-content: space-between; gap: 12px; }
html.adm2 .qa-info-rows strong { font-weight: 600; font-variant-numeric: tabular-nums; }
html.adm2 .metric-text, html.adm2 .qa-metric strong.metric-text { font-size: 19px; }
@media (max-width: 900px) { html.adm2 .qa-split { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  html.adm2 .qa-cols-2, html.adm2 .qa-cols-3 { grid-template-columns: 1fr; }
  html.adm2 .qa-grid { gap: 14px; }
  html.adm2 .dash-acts { gap: 8px; }
  html.adm2 .dash-acts .btn { flex: 1 1 calc(50% - 8px); }
}
/* categories */
html.adm2 .cat-grid .cat-row { display: block; padding: 23px; margin: 0; }
html.adm2 .cat-grid .cat-row.off { opacity: .7; }
html.adm2 .cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
html.adm2 .cat-head .cat-ic, html.adm2 .cat-head .cat-ic-tile { width: 35px; height: 35px; border-radius: 10px; flex: 0 0 auto; }
html.adm2 .cat-head .cat-acts { display: flex; gap: 5px; }
html.adm2 .cat-head .cat-acts .qa-icon-btn { width: 34px; height: 34px; }
html.adm2 .cat-head .cat-acts .qa-icon-btn svg { width: 16px; height: 16px; }
html.adm2 .cat-head .cat-acts .qa-icon-btn:disabled { opacity: .35; }
html.adm2 .cat-head .cat-acts .cat-del:hover { color: var(--a-red); border-color: var(--a-red); }
html.adm2 .cat-cover { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; margin-bottom: 15px; display: block; }
html.adm2 .cat-grid .cat-nm { font-size: 17px; font-weight: 600; margin: 0; }
html.adm2 .cat-pair { display: flex; justify-content: space-between; font-size: 12px; margin: 14px 0; }
html.adm2 .qa-icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 9px; max-height: none; }
html.adm2 .qa-icon-picker .cm-icon { border: 1px solid var(--a-line); border-radius: 9px; background: var(--a-surface); color: var(--a-muted); font-size: 10px; min-height: 76px; }
html.adm2 .qa-icon-picker .cm-icon.active { border-color: var(--a-blue); background: var(--a-blue-soft); color: var(--a-blue); }
html.adm2 .qa-drawer .cm-shot-box { width: 100%; height: 150px; border-radius: 10px; background: var(--a-raised) center/cover no-repeat; border: 1px solid var(--a-line); display: grid; place-items: center; color: var(--a-soft); font-size: 12px; margin-bottom: 12px; }
@media (max-width: 1180px) { html.adm2 .qa-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { html.adm2 .cat-grid .cat-row { padding: 18px; } }
/* narrow screens: one column (the 1180px two-column rule above comes later in the file and would otherwise win); actions wrap instead of overflowing the card */
@media (max-width: 760px) { html.adm2 .cat-grid.qa-cols-3 { grid-template-columns: 1fr; } }
html.adm2 .cat-head { flex-wrap: wrap; }
html.adm2 .cat-head .cat-acts { flex-wrap: wrap; margin-left: auto; }
/* loading skeletons (subscription.html, quality.html; when to show them is decided on each page): the page's real markup with placeholder text, drawn as soft bars, so it takes the height the content will take; the page's own render replaces it (success, empty and error alike) */
html.adm2 .qa-sk { color: transparent !important; background: var(--a-line) !important; border-color: transparent !important; box-shadow: none !important; border-radius: 6px; user-select: none; pointer-events: none; animation: qa-sk-pulse 1.4s ease-in-out infinite; }
html.adm2 .qa-sk *, html.adm2 .qa-sk::before { visibility: hidden; }
@keyframes qa-sk-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { html.adm2 .qa-sk { animation: none; } }
/* orders (orders.html) and kitchen (kitchen.html): prototype order cards and kanban columns */
html.adm2 .od-live, html.adm2 .kt-live { font-size: 10px; font-weight: 500; padding: 4px 9px; border-radius: 6px; background: var(--a-green-bg); color: var(--a-green); }
html.adm2 .od-live.off { background: var(--a-amber-bg); color: var(--a-amber); }
html.adm2 .kt-live.off { background: var(--a-red-bg); color: var(--a-red); }
html.adm2 .od-tog, html.adm2 .kt-tog { min-height: 43px; border-radius: 9px; border-color: var(--a-line); background: var(--a-surface); color: var(--a-ink); font-size: 12px; font-weight: 500; }
html.adm2 .od-tog[aria-pressed="true"], html.adm2 .kt-tog[aria-pressed="true"] { border-color: var(--a-blue); color: var(--a-blue); background: var(--a-blue-soft); }
html.adm2 .od-sound, html.adm2 .kt-sound { background: var(--a-amber-bg); color: var(--a-amber); font-size: 12px; font-weight: 500; border-radius: 10px; }
html.adm2 .od-tabs .tab .n { font-size: 10px; border-radius: 4px; background: var(--a-line); color: inherit; padding: 1px 5px; }
html.adm2 .od-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
@media (min-width: 1550px) { html.adm2 .od-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.adm2 .od, html.adm2 .kt { padding: 20px; border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: none; }
html.adm2 .od::before, html.adm2 .kt::before { display: none; }
html.adm2 .od-tbl, html.adm2 .kt-tbl { font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.4; }
html.adm2 .od-tbl small, html.adm2 .kt-tbl small { font-family: inherit; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--a-muted); }
html.adm2 .od-no, html.adm2 .kt-no { font-size: 11px; color: var(--a-muted); }
html.adm2 .od-time, html.adm2 .kt-time { font-size: 11px; font-weight: 500; border-radius: 6px; background: var(--a-raised); color: var(--a-muted); }
html.adm2 .od-time.warn, html.adm2 .kt-time.warn { background: var(--a-amber-bg); color: var(--a-amber); }
html.adm2 .od-time.late, html.adm2 .kt-time.late { background: var(--a-red-bg); color: var(--a-red); }
html.adm2 .od-chip { font-size: 10px; font-weight: 500; border-radius: 6px; }
html.adm2 .od-lines li { font-size: 12px; } html.adm2 .od-lines .q { font-weight: 600; }
html.adm2 .kt-lines li { font-size: 13px; } html.adm2 .kt-lines .q { font-weight: 600; color: var(--a-blue); }
html.adm2 .od-note, html.adm2 .kt-note, html.adm2 .kt-lines .nt { background: var(--a-raised); color: var(--a-ink); border: 1px solid var(--a-line); border-radius: 10px; font-size: 12px; }
html.adm2 .od-sum { border-color: var(--a-line); padding-top: 14px; }
html.adm2 .od-sum b, html.adm2 .od-sum strong { font-size: 20px; font-weight: 600; }
html.adm2 .od-sum small, html.adm2 .od-meta { font-size: 11px; color: var(--a-muted); }
html.adm2 .od-paid { color: var(--a-green); }
html.adm2 .od-acts .btn { min-height: 43px; }
html.adm2 .od-acts .btn.ghost { border-color: var(--a-line); color: var(--a-ink); }
html.adm2 .od-acts .btn.danger { color: var(--a-red); border-color: var(--a-red); }
html.adm2 .od-empty, html.adm2 .kt-empty { border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-surface); }
html.adm2 .od-empty h3 { font-size: 17px; font-weight: 600; } html.adm2 .od-empty p { font-size: 12px; color: var(--a-muted); }
html.adm2 .od-hint { border-radius: 10px; background: var(--a-blue-soft); color: var(--a-blue); border: 0; font-size: 12px; }
html.adm2 .od-dlg { border-radius: 16px; border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-ink); }
html.adm2 .od-dlg textarea { border-color: var(--a-line); border-radius: 8px; }
html.adm2 .kt-cols { gap: 18px; }
html.adm2 .kt-col { background: var(--a-raised); padding: 16px; border-radius: 12px; border: 1px solid var(--a-line); min-height: 400px; }
html.adm2 .kt-col h2 { font-size: 13px; font-weight: 600; justify-content: space-between; margin-bottom: 16px; }
html.adm2 .kt-col h2 .n { font-size: 10px; border-radius: 4px; background: var(--a-blue-soft); color: var(--a-blue); }
html.adm2 .kt { padding: 15px; }
html.adm2 .kt-go { min-height: 43px; font-size: 12px; }
html.adm2 .kt-wait { font-size: 11px; color: var(--a-muted); }
html.adm2 .kt-err { border-radius: 10px; background: var(--a-red-bg); color: var(--a-red); font-size: 12px; }
html.adm2 .svc-lock { background: var(--a-surface); border: 1px solid var(--a-line); color: var(--a-ink); border-radius: 13px; padding: 23px; }
html.adm2 .svc-lock h2 { font-family: inherit; font-size: 23px; font-weight: 600; color: var(--a-ink); letter-spacing: -.5px; }
html.adm2 .svc-lock p { color: var(--a-muted); opacity: 1 !important; }
html.adm2 .svc-lock .eb { background: var(--a-blue-soft); color: var(--a-blue); text-transform: none; letter-spacing: 0; font-weight: 500; border-radius: 6px; font-size: 11px; }
html.adm2 .svc-lock li { font-size: 13px; } html.adm2 .svc-lock li::before { color: var(--a-green); }
html.adm2 .svc-lock .cta { background: #2563eb; color: #fff; border-color: #2563eb; }
@media (max-width: 1180px) { html.adm2 .kt-cols { gap: 10px; } html.adm2 .kt-col { padding: 10px; } }
@media (max-width: 900px) { html.adm2 .kt-cols, html.adm2 .od-grid { grid-template-columns: 1fr; } html.adm2 .kt-col { min-height: 150px; padding: 15px; } }
@media (max-width: 760px) { html.adm2 .od { padding: 17px; } }
/* locked feature (not on the plan): calm card instead of the old gradient banners */
html.adm2 .lock { background: var(--a-surface); border: 1px solid var(--a-line); color: var(--a-ink); border-radius: 13px; padding: 23px; box-shadow: none; }
html.adm2 .lock h2 { font-family: inherit; font-size: 23px; font-weight: 600; color: var(--a-ink); letter-spacing: -.5px; }
html.adm2 .lock p { color: var(--a-muted); opacity: 1 !important; }
html.adm2 .lock .eb { background: var(--a-blue-soft); color: var(--a-blue); text-transform: none; letter-spacing: 0; font-weight: 500; border-radius: 6px; font-size: 11px; }
html.adm2 .lock li { font-size: 13px; } html.adm2 .lock li::before { color: var(--a-green); }
html.adm2 .lock .cta { background: #2563eb; color: #fff; border-color: #2563eb; }
html.adm2 .lock .demo { background: var(--a-raised); color: var(--a-ink); border: 1px solid var(--a-line); box-shadow: none; }
html.adm2 .lock .demo div, html.adm2 .lock .demo .ln { border-color: var(--a-line); }
html.adm2 .lock .demo b { color: var(--a-ink); }

/* insights (insights.html) */
html.adm2 .in-seg { background: none; padding: 0; gap: 5px; border-radius: 0; }
html.adm2 .in-seg button { min-height: 40px; padding: 9px 14px; border-radius: 8px; font-size: 12px; font-weight: 400; color: var(--a-muted); }
html.adm2 .in-seg button[aria-pressed="true"] { background: var(--a-blue-soft); color: var(--a-blue); font-weight: 600; box-shadow: none; }
html.adm2 .in-scope { height: 43px; border-radius: 8px; border-color: var(--a-line); background: var(--a-surface); color: var(--a-ink); font-size: 13px; }
html.adm2 .in-note { border-radius: 10px; background: var(--a-blue-soft); color: var(--a-blue); font-size: 12px; }
html.adm2 .ob { border-radius: 12px; border-color: var(--a-line); background: var(--a-surface); padding: 16px 19px; }
html.adm2 .ob .ic { width: 35px; height: 35px; border-radius: 10px; background: var(--a-blue-soft); color: var(--a-blue); }
html.adm2 .ob.warn .ic { background: var(--a-amber-bg); color: var(--a-amber); } html.adm2 .ob.bad .ic { background: var(--a-red-bg); color: var(--a-red); }
html.adm2 .ob b { font-size: 13px; font-weight: 600; } html.adm2 .ob span { font-size: 12px; color: var(--a-muted); }
html.adm2 .in-kpi { gap: 16px; }
html.adm2 .kp { padding: 20px; border-radius: 12px; border-color: var(--a-line); background: var(--a-surface); box-shadow: none; }
html.adm2 .kp small { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--a-muted); }
html.adm2 .kp .v { font-family: inherit; font-size: 28px; font-weight: 600; line-height: 1.4; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
html.adm2 .kp .d { font-size: 10px; font-weight: 500; }
html.adm2 .cd { padding: 23px; border-radius: 13px; border-color: var(--a-line); background: var(--a-surface); box-shadow: none; }
html.adm2 .cd h3 { font-size: 17px; font-weight: 600; } html.adm2 .cd .sub { font-size: 12px; color: var(--a-muted); }
html.adm2 .in-2 { gap: 18px; }
html.adm2 .ls { font-size: 12px; } html.adm2 .ls .nm { font-weight: 500; } html.adm2 .ls .bar { background: var(--a-line); }
html.adm2 .tbl { font-size: 12px; } html.adm2 .tbl th { font-size: 11px; font-weight: 500; color: var(--a-muted); }
html.adm2 .pill { border-radius: 6px; font-size: 10px; font-weight: 500; }
html.adm2 .empty-s { border-radius: 10px; border-color: var(--a-line); font-size: 12px; }
@media (max-width: 760px) { html.adm2 .in-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html.adm2 .in-2 { grid-template-columns: 1fr; } }

/* change history (history.html): prototype timeline card */
html.adm2 .hs-chip { min-height: 40px; height: auto; padding: 9px 14px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--a-muted); font-size: 12px; font-weight: 400; }
html.adm2 .hs-chip:hover { background: var(--a-raised); }
html.adm2 .hs-chip[aria-pressed="true"], html[data-theme="dark"].adm2 .hs-chip[aria-pressed="true"] { background: var(--a-blue-soft); border-color: transparent; color: var(--a-blue); font-weight: 600; }
html.adm2 .hs-bar { justify-content: space-between; }
html.adm2 .hs-bar select { height: 43px; border-radius: 8px; border-color: var(--a-line); background: var(--a-surface); font-size: 13px; }
html.adm2 .hs-day { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--a-muted); margin: 22px 0 10px; }
html.adm2 .hs-list { border-radius: 13px; border-color: var(--a-line); background: var(--a-surface); padding: 23px 23px 0; }
html.adm2 .hs-row { position: relative; border: 0; border-left: 1px solid var(--a-line); margin-left: 10px; padding: 4px 0 25px 34px; gap: 12px; }
html.adm2 .hs-row::before { content: ''; position: absolute; left: -6px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: #2563eb; border: 3px solid var(--a-surface); }
html.adm2 .hs-row:last-child { border-bottom: 0; }
html.adm2 .hs-av { width: 31px; height: 31px; border-radius: 10px; font-size: 12px; }
html.adm2 .hs-t { font-size: 13px; } html.adm2 .hs-t b { font-weight: 600; } html.adm2 .hs-who { color: var(--a-muted); }
html.adm2 .hs-tag { border-radius: 5px; font-size: 11px; font-weight: 500; }
html.adm2 .hs-ln { font-size: 12px; align-items: center; }
html.adm2 .hs-ln s { padding: 4px 9px; background: var(--a-raised); border-radius: 5px; color: var(--a-muted); }
html.adm2 .hs-ln .n { padding: 4px 9px; background: var(--a-green-bg); color: var(--a-green); border-radius: 5px; font-weight: 500; }
html.adm2 .hs-ln .n.up { color: var(--a-amber); background: var(--a-amber-bg); }
html.adm2 .hs-time { font-size: 11px; color: var(--a-muted); }
html.adm2 .hs-empty { border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-surface); }
html.adm2 .hs-empty h3 { font-size: 17px; font-weight: 600; }
/* branches (branches.html): limit card, branch cards, add dialog */
html.adm2 .br-sum { border-radius: 13px; border: 1px solid var(--a-line); background: var(--a-surface); padding: 23px; box-shadow: none; }
html.adm2 .br-use .lbl { font-size: 12px; font-weight: 400; color: var(--a-muted); }
html.adm2 .br-use .num { font-size: 28px; font-weight: 600; }
html.adm2 .br-bar { height: 7px; background: var(--a-line); } html.adm2 .br-bar i { background: #2563eb; } html.adm2 .br-bar.full i { background: #c08a1a; }
html.adm2 .br-plan, html.adm2 .br-side p { font-size: 12px; color: var(--a-muted); }
html.adm2 .br-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
html.adm2 .br-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 23px; border-radius: 13px; border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: none; }
html.adm2 .br-card.cur { border-color: var(--a-blue); box-shadow: none; }
html.adm2 .br-av { width: 44px; height: 44px; border-radius: 12px; background: var(--a-blue-soft) !important; color: var(--a-blue) !important; margin-bottom: 17px; }
html.adm2 .br-nm { font-size: 17px; font-weight: 600; }
html.adm2 .br-tag { border-radius: 6px; font-size: 10px; font-weight: 500; border: 0; background: var(--a-raised); color: var(--a-muted); padding: 4px 9px; }
html.adm2 .br-tag.cur { background: var(--a-blue-soft); color: var(--a-blue); }
html.adm2 .br-tag.warn { background: var(--a-red-bg); color: var(--a-red); }
html.adm2 .br-meta { margin: 12px 0 19px; font-size: 12px; color: var(--a-muted); display: grid; gap: 8px; }
html.adm2 .br-act { justify-content: flex-start; }
html.adm2 .br-btn { min-height: 43px; padding: 9px 15px; border-radius: 9px; border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-ink); font-size: 12px; font-weight: 500; }
html.adm2 .br-btn:hover { background: var(--a-raised); border-color: var(--a-line); }
html.adm2 .br-btn.pri, html[data-theme="dark"].adm2 .br-btn.pri { background: #2563eb; border-color: #2563eb; color: #fff; }
html.adm2 .br-btn.pri:hover { background: #1d4ed8; filter: none; }
html.adm2 .br-note { font-size: 12px; color: var(--a-muted); background: var(--a-blue-soft); color: var(--a-blue); padding: 16px 19px; border-radius: 10px; }
html.adm2 .br-note b { color: inherit; }
html.adm2 .br-empty, html.adm2 .bm-empty, html.adm2 .bm-card { border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-surface); }
html.adm2 .br-modal { background: #080e1f66; backdrop-filter: blur(3px); z-index: 180; }
html.adm2 .br-box { border-radius: 16px; border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: var(--a-shadow); }
html.adm2 .br-box h3 { font-size: 19px; font-weight: 600; }
html.adm2 .br-box label { font-size: 12px; font-weight: 500; color: var(--a-ink); }
html.adm2 .br-box input, html.adm2 .br-box select, html.adm2 .br-box textarea { height: 43px; border-radius: 8px; border-color: var(--a-line); font-size: 13px; }
html.adm2 .br-box textarea { height: auto; }
/* branch menu (branch-menu.html): central data and exceptions as table rows */
html.adm2 .bm-info { border-radius: 10px; background: var(--a-blue-soft); color: var(--a-blue); border: 0; font-size: 12px; padding: 16px 19px; }
html.adm2 .bm-info b { color: inherit; }
html.adm2 .bm-bar input[type="search"] { height: 43px; border-radius: 9px; border-color: var(--a-line); font-size: 12px; max-width: 440px; }
html.adm2 .bm-chip { min-height: 40px; height: auto; padding: 9px 14px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--a-muted); font-size: 12px; font-weight: 400; }
html.adm2 .bm-chip[aria-pressed="true"], html[data-theme="dark"].adm2 .bm-chip[aria-pressed="true"] { background: var(--a-blue-soft); border-color: transparent; color: var(--a-blue); font-weight: 600; }
html.adm2 .bm-cat { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--a-muted); }
html.adm2 .bm-list { border-radius: 12px; border-color: var(--a-line); background: var(--a-surface); }
html.adm2 .bm-row, html.adm2 .bm-own { padding: 16px 17px; border-color: var(--a-line); }
html.adm2 .bm-row.exc { box-shadow: inset 3px 0 0 #2563eb; }
html.adm2 .bm-n b { font-size: 12px; font-weight: 500; } html.adm2 .bm-n small { font-size: 11px; color: var(--a-muted); }
html.adm2 .bm-p input { height: 38px; border-radius: 8px; border-color: var(--a-line); font-size: 13px; }
html.adm2 .bm-rst, html.adm2 .bm-lnk { color: var(--a-blue); font-size: 11px; font-weight: 500; min-height: 34px; }
html.adm2 .bm-lnk.del { color: var(--a-red); }
html.adm2 .bm-h { font-size: 17px; font-weight: 600; } html.adm2 .bm-sub { font-size: 12px; color: var(--a-muted); }
html.adm2 .bm-pr { font-weight: 600; }
html.adm2 .bm-vis { font-size: 11px; }
html.adm2 .sw input:checked + span { background: #20b76d; }