/* SiteMetrics — redesign 8 Oct 2026. Tokens -> light/dark; shell (sidebar / tab bar); components; pages. */
:root {
  color-scheme: light dark;
  --bg: #F6F7F9; --surface: #FFFFFF; --surface-2: #F0F2F5; --row-hover: #F4F6FA;
  --border: #E3E6EB; --border-strong: #CDD2DA;
  --text: #14181F; --text-2: #4A5261; --text-3: #5F6676;
  --accent: #2563EB; --accent-hover: #1D4FD7; --accent-soft: #E8F0FE; --accent-text: #1D4ED8; --on-accent: #FFFFFF; --focus: #2563EB;
  --fresh: #16A34A; --stale: #D97706; --missing: #9AA3B2; --busy: #2563EB;
  --stop-bg: #FDECEC; --stop-text: #B42318; --warn-bg: #FFF4E0; --warn-text: #9A5B00;
  --info-bg: #EEF2F7; --info-text: #475467; --good-bg: #E7F6EC; --good-text: #136C35;
  --stop-solid: #D92D20; --warn-solid: #D97706;
  --sc-a-bg: #DCFCE7; --sc-a-tx: #166534; --sc-b-bg: #DBEAFE; --sc-b-tx: #1E40AF; --sc-c-bg: #FEF3C7; --sc-c-tx: #92400E;
  --sc-d-bg: #FFE4D5; --sc-d-tx: #9A3412; --sc-x-bg: #D92D20; --sc-x-tx: #FFFFFF;
  --sh-1: 0 1px 2px rgba(16,24,40,.06); --sh-sb: 8px 0 24px -12px rgba(16,24,40,.18);
  --sh-drawer: -12px 0 32px -8px rgba(16,24,40,.18); --sh-toast: 0 8px 24px rgba(16,24,40,.16);
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  --t-fast: 120ms; --t-base: 220ms; --ease: cubic-bezier(.2,.8,.2,1);
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --sb-w: 60px; --sb-w-open: 216px; --row-h: 36px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1116; --surface: #161A21; --surface-2: #1E232C; --row-hover: #1B2029;
    --border: #2A303A; --border-strong: #3A4250;
    --text: #E7EAF0; --text-2: #A9B1BE; --text-3: #7D8696;
    --accent: #4C8DFF; --accent-hover: #6AA0FF; --accent-soft: #17284A; --accent-text: #8DB6FF; --on-accent: #0B1220; --focus: #6AA0FF;
    --fresh: #3FB950; --stale: #D29922; --missing: #5C6576; --busy: #4C8DFF;
    --stop-bg: #3A1618; --stop-text: #FF8A80; --warn-bg: #352611; --warn-text: #F2B866;
    --info-bg: #222833; --info-text: #A9B1BE; --good-bg: #13281B; --good-text: #5BD48A;
    --stop-solid: #E5484D; --warn-solid: #D29922;
    --sc-a-bg: #12301E; --sc-a-tx: #6EE7A0; --sc-b-bg: #14264A; --sc-b-tx: #93BBFF; --sc-c-bg: #33270F; --sc-c-tx: #F5C46B;
    --sc-d-bg: #3A1E12; --sc-d-tx: #FF9F70; --sc-x-bg: #C42B30; --sc-x-tx: #FFFFFF;
    --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-sb: 8px 0 24px -12px rgba(0,0,0,.6);
    --sh-drawer: -12px 0 32px -8px rgba(0,0,0,.6); --sh-toast: 0 8px 24px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1116; --surface: #161A21; --surface-2: #1E232C; --row-hover: #1B2029;
  --border: #2A303A; --border-strong: #3A4250;
  --text: #E7EAF0; --text-2: #A9B1BE; --text-3: #7D8696;
  --accent: #4C8DFF; --accent-hover: #6AA0FF; --accent-soft: #17284A; --accent-text: #8DB6FF; --on-accent: #0B1220; --focus: #6AA0FF;
  --fresh: #3FB950; --stale: #D29922; --missing: #5C6576; --busy: #4C8DFF;
  --stop-bg: #3A1618; --stop-text: #FF8A80; --warn-bg: #352611; --warn-text: #F2B866;
  --info-bg: #222833; --info-text: #A9B1BE; --good-bg: #13281B; --good-text: #5BD48A;
  --stop-solid: #E5484D; --warn-solid: #D29922;
  --sc-a-bg: #12301E; --sc-a-tx: #6EE7A0; --sc-b-bg: #14264A; --sc-b-tx: #93BBFF; --sc-c-bg: #33270F; --sc-c-tx: #F5C46B;
  --sc-d-bg: #3A1E12; --sc-d-tx: #FF9F70; --sc-x-bg: #C42B30; --sc-x-tx: #FFFFFF;
  --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-sb: 8px 0 24px -12px rgba(0,0,0,.6);
  --sh-drawer: -12px 0 32px -8px rgba(0,0,0,.6); --sh-toast: 0 8px 24px rgba(0,0,0,.5);
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/20px var(--font); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; }
code, kbd, .mono { font-family: var(--mono); }
kbd { font-size: 11px; padding: 1px 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; color: var(--text-2); background: var(--surface); line-height: 16px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mut { color: var(--text-3); }
.sm { font-size: 12.5px; line-height: 16px; }
.grow { flex: 1; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.d-up { color: var(--good-text); font-variant-numeric: tabular-nums; }
.d-stop { color: var(--stop-text); }
.d-warn { color: var(--warn-text); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 500 13.5px/1 var(--font); cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); text-decoration: none !important; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.98); }
.btn .ic { width: 16px; height: 16px; }
.btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.primary kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .7; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.loading { position: relative; color: transparent !important; }
.btn.loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid var(--on-accent); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.chev-d { width: 14px !important; height: 14px !important; margin-left: -2px; opacity: .7; }
.iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent;
  color: var(--text-2); cursor: pointer; flex: none; transition: background var(--t-fast), color var(--t-fast); }
.iconbtn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.iconbtn.sm { width: 32px; height: 32px; }
.iconbtn .ic { width: 18px; height: 18px; }
.iconbtn:disabled { opacity: .35; cursor: default; background: transparent; }
.lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.lnk:hover { color: var(--accent-text); text-decoration: underline; }
input, textarea, select { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); }
input:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
.fld { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.fld input { height: 40px; padding: 0 12px; width: 100%; }
.search { position: relative; display: flex; align-items: center; width: 280px; max-width: 100%; }
.search .ic { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.search input { width: 100%; height: 32px; padding: 0 34px 0 32px; font-size: 13.5px; }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { position: absolute; right: 8px; pointer-events: none; }
.search input:focus ~ kbd, .search input:not(:placeholder-shown) ~ kbd { display: none; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .sw { width: 32px; height: 18px; border-radius: 99px; background: var(--border-strong); position: relative; transition: background var(--t-fast); flex: none; }
.switch .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform var(--t-base) var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + .sw { background: var(--accent); }
.switch input:checked + .sw::after { transform: translateX(14px); }
.switch input:focus-visible + .sw { outline: 2px solid var(--focus); outline-offset: 2px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-1); min-width: 0; }
.card-t { font-size: 15px; line-height: 22px; font-weight: 600; margin: 0 0 12px; display: block; }
.toolbar .card-t { margin: 0; }
.sec-t { font-size: 15px; font-weight: 600; margin: 24px 0 12px; }
.lbl { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }

/* banners, pills, dots */
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); margin: 0 0 12px; font-size: 13.5px; }
.banner .ic { width: 18px; height: 18px; }
.banner span { flex: 1; min-width: 0; }
.banner.stop { background: var(--stop-bg); color: var(--stop-text); }
.banner.warn { background: var(--warn-bg); color: var(--warn-text); }
.banner.info { background: var(--info-bg); color: var(--info-text); }
.banner.sm { padding: 8px 12px; font-size: 12.5px; margin: 8px 0 0; }
.banner code { font-size: 12px; word-break: break-word; }
.fd { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; vertical-align: middle; margin-left: 6px; background: var(--missing); }
.fd-fresh { background: var(--fresh); } .fd-stale { background: var(--stale); } .fd-missing { background: var(--missing); }
.fd-stop { background: var(--stop-solid); }
.fd-busy { background: var(--busy); animation: pulse 1.2s ease-in-out infinite; }
.ph-sub .fd, .kpi .fd { margin: 0 6px 0 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill-busy { background: var(--accent-soft); color: var(--accent-text); } .pill-busy i { animation: pulse 1.2s ease-in-out infinite; }
.pill-warn { background: var(--warn-bg); color: var(--warn-text); }
.pill-stop { background: var(--stop-bg); color: var(--stop-text); }
.pill-ok { background: var(--good-bg); color: var(--good-text); }
.adot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fresh); flex: none; margin-right: 8px; }
.cdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; margin-right: 6px; }
.cdot.stop { background: var(--stop-solid); } .cdot.warn { background: var(--warn-solid); }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; margin-left: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* score + flags + sources */
.sc { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-sm); font: 700 12px/1 var(--font); }
.sc.big { width: 28px; height: 28px; font-size: 14px; }
.sc-A { background: var(--sc-a-bg); color: var(--sc-a-tx); } .sc-B { background: var(--sc-b-bg); color: var(--sc-b-tx); }
.sc-C { background: var(--sc-c-bg); color: var(--sc-c-tx); } .sc-D { background: var(--sc-d-bg); color: var(--sc-d-tx); }
.sc-X { background: var(--sc-x-bg); color: var(--sc-x-tx); }
.fl { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-sm); font-size: 12px; font-weight: 500; max-width: 200px; white-space: nowrap; vertical-align: middle; }
.fl span { overflow: hidden; text-overflow: ellipsis; }
.fl .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.fl-stop { background: var(--stop-bg); color: var(--stop-text); } .fl-warn { background: var(--warn-bg); color: var(--warn-text); } .fl-info { background: var(--info-bg); color: var(--info-text); }
.fl-more { display: inline-grid; place-items: center; height: 22px; padding: 0 6px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); vertical-align: middle; }
.flags { display: inline-flex; gap: 4px; align-items: center; flex-wrap: nowrap; max-width: 260px; overflow: hidden; vertical-align: middle; }
.flags .fl { flex: 0 1 auto; min-width: 48px; }
.flags .fl-more { flex: none; }
.al-main .flags { max-width: 210px; }
.srcs { display: inline-flex; gap: 4px; }
.src { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--surface-2); color: var(--text-2); font: 600 11px/1 var(--font); }
.src-l { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 500; }
.src-l.act { background: var(--good-bg); color: var(--good-text); }
.src-l .adot { margin-right: 6px; }

/* skeleton */
.sk { display: block; height: 12px; border-radius: 4px; margin: 6px 0; background: linear-gradient(90deg, var(--surface-2) 25%, var(--row-hover) 37%, var(--surface-2) 63%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.sk-blk { height: 120px; border-radius: var(--r-lg); margin: 16px 0; background: var(--surface-2); }

/* ---------- login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px 28px; display: grid; gap: 16px; box-shadow: var(--sh-toast); }
.login-mark { width: 40px; height: 40px; }
.login-card h1 { font-size: 20px; font-weight: 650; margin-top: -4px; }
.login-card .btn { height: 40px; }
.login-err { color: var(--stop-text); margin: -4px 0 0; min-height: 20px; font-size: 13px; }

/* ---------- shell ---------- */
.app { display: flex; height: 100dvh; overflow: hidden; }
.main { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; position: relative; }

/* sidebar — FocusDesk se: band = sirf icons; JS .open; keyboard ke liye :has(:focus-visible) */
.sb { flex: none; width: var(--sb-w); height: 100%; z-index: 40; display: flex; flex-direction: column; gap: 2px; padding: 0 10px 12px;
  background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; white-space: nowrap;
  transition: width var(--t-base) var(--ease), box-shadow var(--t-base) ease; }
.sb.open, .sb:has(:focus-visible) { width: var(--sb-w-open); box-shadow: var(--sh-sb); }
.sb-edge { position: fixed; left: var(--sb-w); top: 0; bottom: 0; width: 6px; z-index: 39; }
.sb.open + .sb-edge { display: none; }
.sb-brand { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 6px; margin: 0 -2px 6px; background: none; border: 0; color: var(--text); cursor: pointer;
  font: 650 15px/1 var(--font); letter-spacing: -.01em; border-radius: var(--r-md); flex: none; }
.sb-brand .mark { width: 28px; height: 28px; flex: none; }
.sb-items { display: flex; flex-direction: column; gap: 2px; }
.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--border); }
.sb-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--text-2); font: 500 14px/1 var(--font); text-align: left; cursor: pointer; text-decoration: none !important;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease; }
.sb-item:hover { background: var(--surface-2); color: var(--text); }
.sb-item:active { transform: scale(.97); }
.sb-item.on { background: var(--accent-soft); color: var(--accent-text); }
.sb-item.on::before { content: ''; position: absolute; left: -10px; top: 10px; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sb-ic { position: relative; display: grid; place-items: center; flex: none; }
.sb-dot { position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--stop-solid); box-shadow: 0 0 0 2px var(--surface); }
.sb-dot.static { position: static; margin-left: auto; box-shadow: none; }
.sb-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--stop-bg); color: var(--stop-text);
  font: 600 11px/20px var(--font); text-align: center; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--t-fast); }
.sb.open .sb-badge, .sb:has(:focus-visible) .sb-badge { opacity: 1; }
.sb.open .sb-item[data-k="alerts"] .sb-dot, .sb:has(:focus-visible) .sb-item[data-k="alerts"] .sb-dot { opacity: 0; }
.sb-label { opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity var(--t-fast) ease, transform var(--t-base) var(--ease), visibility 0s linear var(--t-fast); }
.sb.open .sb-label, .sb:has(:focus-visible) .sb-label { opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-base) ease 60ms, transform var(--t-base) var(--ease) 60ms, visibility 0s linear; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 4px 10px; min-width: 0; }
.sb-user .u { display: grid; min-width: 0; }
.sb-user b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sb-user small { font-size: 12px; color: var(--text-3); }
.sb:not(.open):not(:has(:focus-visible)) .sb-user { height: 0; padding: 0; overflow: hidden; }
.av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font: 650 13px/1 var(--font); flex: none; }
.av.lg { width: 40px; height: 40px; font-size: 16px; }

/* page header */
.ph { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 28px;
  background: var(--bg); border-bottom: 1px solid var(--border); }
.ph-l { min-width: 0; flex: 1; }
.ph-t { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ph h1 { font-size: 20px; line-height: 28px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.ph-meta { color: var(--text-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ph-sub { font-size: 12px; color: var(--text-3); display: flex; align-items: center; }
.ph-r { display: flex; gap: 8px; align-items: center; }
.net-pill { align-self: center; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--warn-bg); color: var(--warn-text); }
.page { padding: 24px 28px 40px; outline: none; }
.attr { font-size: 12px; color: var(--text-3); margin: 12px 0 0; }
.attr a { color: var(--text-2); text-decoration: underline; }

/* menu, toasts */
.menu { position: fixed; z-index: 100; min-width: 200px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-toast); }
.mi { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; background: none; border-radius: 6px; color: var(--text);
  font: 400 13.5px/1 var(--font); cursor: pointer; text-align: left; }
.mi:hover, .mi:focus-visible { background: var(--surface-2); outline: none; }
.mi .ic { width: 16px; height: 16px; color: var(--text-3); }
.mi input { margin: 0; accent-color: var(--accent); }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 44px; max-width: 380px; padding: 8px 10px 8px 14px; border-radius: var(--r-md);
  background: var(--text); color: var(--bg); box-shadow: var(--sh-toast); font-size: 13.5px; animation: tin var(--t-base) var(--ease); transition: opacity .18s, transform .18s; }
.toast .ic { width: 18px; height: 18px; color: var(--fresh); }
.toast.err { background: var(--stop-bg); color: var(--stop-text); border: 1px solid currentColor; }
.toast.err .ic { color: currentColor; }
.toast .iconbtn { color: inherit; width: 28px; height: 28px; }
.toast.out { opacity: 0; transform: translateY(6px); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* ---------- chips + toolbar ---------- */
.chips-wrap { position: relative; margin-bottom: 12px; }
.chips-wrap::before, .chips-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 24px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity var(--t-fast); }
.chips-wrap.fl::before, .chips-wrap.fr::after { opacity: 1; }
.chips-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.chips-wrap::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.card .chips-wrap::before { background: linear-gradient(90deg, var(--surface), transparent); }
.card .chips-wrap::after { background: linear-gradient(-90deg, var(--surface), transparent); }
.chips { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: 500 13px/1 var(--font); cursor: pointer; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast); }
.chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
.chip .cn { margin-left: 6px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip.on .cn { color: var(--bg); opacity: .7; }
.chip-div { flex: none; width: 1px; height: 20px; background: var(--border-strong); margin: 0 6px; }
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-width: 0; }
.toolbar.foot { margin: 12px 0 0; }
.pg { display: inline-flex; align-items: center; gap: 2px; }
.pg-t { font-size: 13px; margin-right: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- tables ---------- */
.tw-box { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.card .tw-box { border-radius: var(--r-md); }
.tw { overflow: auto; max-height: calc(100dvh - 220px); }
.tw-prog { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 6; overflow: hidden; opacity: 0; }
.tw-box.busy .tw-prog { opacity: 1; }
.tw-prog::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; background: var(--accent); animation: indet 1.1s ease-in-out infinite; }
@keyframes indet { from { left: -30%; } to { left: 100%; } }
.tw-box.busy tbody { opacity: .6; transition: opacity var(--t-fast); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 18px; }
.tbl th { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--border-strong); height: 38px; padding: 0 12px;
  font-size: 12px; font-weight: 600; color: var(--text-2); text-align: left; white-space: nowrap; }
.tbl th.num { text-align: right; }
.tbl td { height: var(--row-h); padding: 0 12px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.tbl.compact { --row-h: 36px; }
.tbl.comfy { --row-h: 44px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr[data-d] { cursor: pointer; }
.tbl tbody tr[data-d]:hover td { background: var(--row-hover); }
.tbl tbody tr.sel td { background: var(--accent-soft); }
.tbl tbody tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.tbl tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.th-b { display: inline-flex; align-items: center; gap: 4px; height: 100%; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
th.num .th-b { justify-content: flex-end; }
.sort-ic { width: 14px; height: 14px; opacity: 0; transition: opacity var(--t-fast); }
.th-b:hover .sort-ic { opacity: .4; }
th.sorted { color: var(--text); }
th.sorted .sort-ic { opacity: 1; color: var(--accent-text); }
.tbl .c-dom { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 220px; max-width: 300px; font-weight: 600; }
.tbl th.c-dom { z-index: 4; }
.tbl tbody tr[data-d]:hover td.c-dom { background: var(--row-hover); }
.tbl tbody tr.sel td.c-dom { background: var(--accent-soft); }
.tw-box.sx .c-dom { box-shadow: 6px 0 8px -6px rgba(0,0,0,.25); }
.tw-box.sx tr.sel td.c-dom { box-shadow: inset 2px 0 0 var(--accent), 6px 0 8px -6px rgba(0,0,0,.25); }
.dom-in { display: flex; align-items: center; min-width: 0; }
.dom-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 260px; }
.tbl .c-score { width: 56px; text-align: center; }
.tbl .c-countries { max-width: 160px; }
.tbl .c-countries .ell { display: block; max-width: 160px; color: var(--text-2); }
.tbl .c-post { color: var(--text-2); }
.tbl .c-flags { min-width: 120px; }
.tbl .c-flags .fl { max-width: 180px; }
.tbl td.c-act { text-align: right; width: 1%; }
.tbl.plain td { cursor: default; }
.tbl .sk-row td { cursor: default; }
.tbl .sk-row .sk { margin: 0; width: 70%; }
.tbl .sk-row .c-dom .sk { width: 60%; }
.empty-row td { height: auto !important; padding: 0 !important; cursor: default; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 56px 16px; text-align: center; color: var(--text-2); white-space: normal; }
.empty.sm { padding: 24px 16px; flex-direction: row; }
.empty .big { width: 48px; height: 48px; color: var(--text-3); stroke-width: 1.5; }
.empty .ok-ic, .ok-ic { color: var(--fresh) !important; }
.empty b { font-size: 15px; color: var(--text); }

/* ---------- drawer ---------- */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(560px, 92vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--sh-drawer);
  transform: translateX(100%); transition: transform 200ms var(--ease); }
.drawer.in { transform: none; }
.dr-grip { display: none; }
.dr-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--border); flex: none; }
.dr-t { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.dr-t h2 { font-size: 18px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dr-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; overscroll-behavior: contain; }
.dr-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dr-meta .fp { margin-left: 4px; }
.dr-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dr-flags .fl { max-width: 100%; }
.dr-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.dr-acts .btn { height: 32px; font-size: 13px; padding: 0 10px; }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mt { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; }
.mt.wide { grid-column: 1 / -1; }
.mt-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mt-v { font-size: 24px; line-height: 28px; font-weight: 650; font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.mt-v small { font-size: 13px; font-weight: 600; }
.fp { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.fp .fd { margin: 0; }
.fp-fresh { background: var(--good-bg); color: var(--good-text); } .fp-stale { background: var(--warn-bg); color: var(--warn-text); }
.fp-missing { background: var(--surface-2); color: var(--text-3); } .fp-busy { background: var(--accent-soft); color: var(--accent-text); }
.spark { display: block; width: 100%; height: 56px; margin-top: 6px; overflow: visible; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.spark circle { fill: var(--accent); }
.ctry { display: grid; gap: 4px; margin: 8px 0; font-size: 12.5px; }
.ctry-r { display: grid; grid-template-columns: minmax(0, 120px) 1fr 44px; gap: 8px; align-items: center; }
.ctry-r b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-2); }
.bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.hist { margin-top: 6px; font-size: 12.5px; }
.hist summary { cursor: pointer; color: var(--text-2); width: fit-content; padding: 2px 0; }
.hist ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 180px; overflow-y: auto; }
.hist li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--border); color: var(--text-3); }
.hist li b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.dsec { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.dsec h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.st { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 12px; font-weight: 600; background: var(--surface-2); }
.st-ok { background: var(--good-bg); color: var(--good-text); }
.st-down, .st-error, .st-parked { background: var(--stop-bg); color: var(--stop-text); }
.st-blocked, .st-redirect { background: var(--warn-bg); color: var(--warn-text); }

/* ---------- Overview ---------- */
.kpis, .wks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; color: var(--text); text-decoration: none !important; }
.kpi.link { transition: border-color var(--t-fast), transform var(--t-fast); }
.kpi.link:hover { border-color: var(--border-strong); }
.kpi.link:active { transform: scale(.99); }
.kv-n { font-size: 28px; line-height: 32px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kv-n.sm { font-size: 22px; }
.kv-n small { font-size: 14px; font-weight: 500; }
.kpi small { display: flex; align-items: center; gap: 2px; font-size: 12.5px; }
.kpi small .ic { width: 14px; height: 14px; }
.k-stop .kv-n { color: var(--stop-text); } .k-warn .kv-n { color: var(--warn-text); }
.meter { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.meter i { display: block; height: 100%; background: var(--accent); }
.meter.m-warn i { background: var(--warn-solid); } .meter.m-stop i { background: var(--stop-solid); }
.wk { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.wk-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wk-h > div { display: grid; min-width: 0; }
.wk-h b { font-size: 14px; font-weight: 600; }
.wk-h small { font-size: 12px; }
.wk-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wk-n b { display: block; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.wk-n small { font-size: 11.5px; color: var(--text-3); }
.wks.big .wk-n b { font-size: 22px; }
.wk-x { font-size: 12px; color: var(--text-3); margin-top: -4px; }
.ov-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.att { list-style: none; margin: 0 -8px; padding: 0; }
.att a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px; border-radius: var(--r-md); color: var(--text); text-decoration: none; }
.att a:hover { background: var(--surface-2); }
.att-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; }
.att-ic .ic { width: 16px; height: 16px; }
.att-ic.stop { background: var(--stop-bg); color: var(--stop-text); } .att-ic.warn { background: var(--warn-bg); color: var(--warn-text); }
.att-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att b { font-variant-numeric: tabular-nums; }
.att .chev { width: 16px; height: 16px; color: var(--text-3); }
.recent { list-style: none; margin: 0 -8px; padding: 0; }
.recent button { display: grid; gap: 2px; width: 100%; padding: 8px; border: 0; border-radius: var(--r-md); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.recent button:hover { background: var(--surface-2); }
.recent .ell { display: block; font-size: 13.5px; font-family: var(--mono); font-size: 12.5px; }
.recent small { font-size: 12px; }

/* ---------- Check ---------- */
.ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ck-main { display: grid; gap: 16px; min-width: 0; }
.ck-in textarea { display: block; width: 100%; min-height: 120px; max-height: 320px; padding: 10px 12px; font: 13px/20px var(--mono); resize: vertical; }
.ck-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ck-rh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-3); margin: 0 0 12px; }
.legend .fd { margin: 0 4px 0 0; }
.ck-res .tw { max-height: none; }
.ck-tbl td { height: auto; padding: 8px 8px; }
.ck-tbl th { padding: 0 8px; }
.ck-tbl .c-dom { min-width: 170px; padding-left: 12px; }
.ck-tbl .dom-in .srcs { margin-left: 8px; }
.ck-tbl .dom-in .src { width: 18px; height: 18px; font-size: 10.5px; }
.ck-tbl td.c-act .btn span { display: none; }
.ck-tbl td.c-act .btn { width: 32px; padding: 0; }
.ck-tbl .c-dom .flags { display: flex; margin-top: 4px; }
.mc { display: inline-grid; justify-items: end; gap: 1px; }
.mc b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mc small { font-size: 11px; line-height: 14px; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
.mc small .fd { margin: 0; }
.mc .f-stale { color: var(--warn-text); } .mc .f-busy { color: var(--accent-text); }
.ss-btns { display: inline-flex; gap: 4px; margin-top: 2px; }
.ss-b { font-family: inherit; font-size: 11px; font-weight: 600; line-height: 16px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--accent-text); cursor: pointer; }
.ss-b:hover, .ss-b:focus-visible { background: var(--surface-2); border-color: var(--border-strong); }
.ck-side { position: sticky; top: 88px; }
.ck-side .sk { margin: 12px 0; }

/* ---------- Do not sell ---------- */
.al-grid { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 20px; align-items: start; }
.al-main .tbl .c-dom { min-width: 160px; }
.al-main .tbl .c-flags .fl { max-width: 170px; }
.al-list { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; }
.al-gt { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 8px 10px 4px; }
.al-list .chip-div { width: auto; height: 1px; margin: 8px 10px; }
.al-it { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-2);
  font: 500 13.5px/1 var(--font); text-align: left; cursor: pointer; flex: none; }
.al-it:hover { background: var(--surface-2); color: var(--text); }
.al-it.on { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); font-weight: 600; }
.al-it .ell { flex: 1; }
.al-it .cn { color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: 8px; }
.al-note { display: flex; align-items: center; margin: -4px 0 12px; }

/* ---------- Queue ---------- */
.q-fail { margin-top: 24px; }
.q-fail .tw { max-height: none; }
.c-err { max-width: 420px; }
.c-err code { display: block; max-width: 420px; font-size: 12px; color: var(--text-2); }

/* ---------- Settings ---------- */
/* Settings (21 Oct UX review): Clients upar poori chaudai, baaki cards masonry (CSS columns) — beech me khaali jagah nahi */
.set-page { display: grid; gap: 16px; max-width: 1240px; min-width: 0; }
.set-cols { columns: 3 300px; column-gap: 16px; }
.set-cols > .card { break-inside: avoid; display: block; width: 100%; margin: 0 0 16px; }
.set-wide { min-width: 0; }
.cl-head { margin-bottom: 12px; } .cl-head .card-t { margin-bottom: 4px; } .cl-head p { margin: 0; }
.cl-pool { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.cl-meter { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 8px; }
.cl-mh { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cl-mh b { color: var(--text); }
.cl-add { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.3fr) 140px 150px auto; gap: 10px; align-items: end; margin: 0; }
.cl-add .fld { min-width: 0; }
.cl-add .fld input { width: 100%; height: 36px; padding: 0 10px; }
.cl-add .btn { height: 36px; }
.cl-hint { margin: 6px 0 14px; }
.cl-new { margin: 0 0 14px; align-items: flex-start; } .cl-new code { font: 13px/20px var(--mono); user-select: all; }
.cl-in { height: 30px; padding: 0 8px; font-size: 13px; }
.cl-num { width: 58px; text-align: right; } .cl-label { width: 100%; min-width: 130px; max-width: 200px; }
.cl-lim { display: grid; grid-template-columns: 58px auto; gap: 4px 6px; align-items: center; font-size: 12px; padding: 4px 0; }
.cl-tbl td { vertical-align: middle; height: auto; padding-top: 6px; padding-bottom: 6px; }
.cl-use { font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.cl-use .cl-full b, .cl-use .cl-full .mut { color: var(--stop-text); }
.cl-act { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.cl-off td:not(:last-child) { opacity: .55; }
.btn.cl-danger { color: var(--stop-text); }
.btn.cl-confirm { background: var(--stop-bg); border-color: var(--stop-solid); color: var(--stop-text); }
.cl-empty { margin: 4px 0 0; }
@media (max-width: 900px) { .cl-add { grid-template-columns: 1fr 1fr; } .cl-add .btn { grid-column: 1 / -1; } }
@media (max-width: 560px) { .cl-add { grid-template-columns: minmax(0, 1fr); } .set-cols { columns: 1; } }
.ck-quota { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; max-width: 1100px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border-radius: var(--r-md); margin-bottom: 10px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: 500 13px/1 var(--font); cursor: pointer; }
.seg button .ic { width: 16px; height: 16px; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-1), 0 0 0 1px var(--border); }
.acct { display: flex; align-items: center; gap: 12px; }
.keys dt { white-space: nowrap; }

/* ---------- phone tab bar + More sheet ---------- */
.tb { display: none; }
.sheet-back { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.4); opacity: 0; transition: opacity 200ms; }
.sheet-back.in { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 4px 12px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 200ms var(--ease); box-shadow: var(--sh-toast); }
.sheet.in { transform: none; }
.sheet .dr-grip, .drawer .dr-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 6px auto 4px; }
.sheet .dr-grip { display: block; }
.ms-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px 8px; font-size: 15px; }
.ms-list { display: grid; gap: 2px; }
.ms-foot { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.ms-item { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: none; color: var(--text); font: 500 15px/1 var(--font); text-decoration: none !important; cursor: pointer; text-align: left; }
.ms-item.on { background: var(--accent-soft); color: var(--accent-text); }
.ms-item:active { background: var(--surface-2); }
.ms-user { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }

/* ---------- responsive ---------- */
@media (min-width: 1024px) {
  .chips { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
  .chips-wrap::before, .chips-wrap::after { display: none; }
}
@media (max-width: 1279px) {
  .page { padding: 20px 24px 40px; }
  .ph { padding: 10px 24px; }
  .ck-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-side { position: static; }
}
@media (max-width: 1023px) {
  .drawer { width: min(480px, 92vw); }
  .tbl .c-countries, .tbl .c-post { display: none; }
  .al-grid { grid-template-columns: minmax(0, 1fr); }
  .al-list { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; padding-bottom: 4px; }
  .al-list::-webkit-scrollbar { display: none; }
  .al-gt { display: none; }
  .al-list .chip-div { width: 1px; height: 20px; margin: 8px 4px; flex: none; }
  .al-it { border: 1px solid var(--border); border-radius: var(--r-pill); height: 32px; background: var(--surface); white-space: nowrap; }
  .al-it.on { background: var(--text); color: var(--bg); box-shadow: none; border-color: var(--text); }
  .al-it.on .cn { color: var(--bg); opacity: .7; }
  .ov-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sb, .sb-edge { display: none; }
  .tb { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--border);
    padding: 0 4px env(safe-area-inset-bottom); }
  html.kbd .tb { display: none; }
  .tb-item { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px;
    background: none; border: 0; color: var(--text-3); font: 600 11px/1 var(--font); cursor: pointer; text-decoration: none !important; }
  .tb-item.on { color: var(--accent-text); }
  .tb-item.on::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .tb-ic { position: relative; display: grid; }
  .tb-ic .ic { width: 22px; height: 22px; }
  .tb-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main { padding-bottom: calc(56px + env(safe-area-inset-bottom) + 16px); }
  html.kbd .main { padding-bottom: 16px; }
  .ph { min-height: 56px; padding: 8px 16px; }
  .ph h1 { font-size: 18px; }
  .page { padding: 16px 16px 24px; }
  .card { padding: 16px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { width: 100%; order: -1; }
  .toolbar .search kbd { display: none; }
  .search input, .ck-in textarea, .fld input { font-size: 16px; }
  .tw { max-height: none; }
  .tbl .c-dom { min-width: 140px; max-width: 170px; }
  .dom-t { max-width: 150px; }
  .tbl .c-spam, .tbl .c-change, .tbl .c-age, .tbl .c-where { display: none; }
  .ck-tbl .c-spam, .ck-tbl .c-age, .ck-tbl .c-health, .ck-tbl .c-where { display: none; }
  .tbl td.c-act .btn span { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px 14px; }
  .kv-n { font-size: 22px; line-height: 28px; }
  .wks { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wk { gap: 8px; }
  .set-grid { grid-template-columns: minmax(0, 1fr); }
  .toasts { left: 16px; right: 16px; bottom: calc(56px + env(safe-area-inset-bottom) + 12px); align-items: stretch; }
  .toast { max-width: none; }
  .drawer { width: 100%; top: 0; border-left: 0; border-radius: 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom); z-index: 80; }
  .drawer.in { transform: none; }
  .drawer .dr-grip { display: block; }
  .dr-h { padding: 4px 8px 10px 16px; }
  .dr-body { padding: 14px 16px 24px; }
  .mgrid { grid-template-columns: minmax(0, 1fr); }
  .ck-row .btn.primary { width: 100%; }
  .kbd-on { display: none; }
  /* touch: har tap target >= 44px */
  .iconbtn, .iconbtn.sm { width: 44px; height: 44px; }
  .btn, .btn.sm, .dr-acts .btn { height: 44px; }
  .search input { height: 44px; }
  .chip, .al-it { height: 40px; }
  .chips { padding: 2px; }
  .seg button { height: 44px; }
  .tbl td.c-act .btn { width: 44px; padding: 0; }
  .c-err, .c-err code { max-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb, .sb-label, .drawer, .sheet, .sheet-back, .toast, .switch .sw::after { transition-duration: 0ms !important; transition-delay: 0ms !important; }
  .sk, .fd-busy, .pill-busy i, .tw-prog::after { animation: none !important; }
  .toast { animation: none; }
}

/* Settings > Sidebar pages */
.pg-checks { display: grid; gap: 2px; margin-top: 8px; }
.chk-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: var(--r-md); cursor: pointer; }
.chk-row:hover { background: var(--surface-2); }
.chk-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.chk-row .chk-ic { display: inline-flex; color: var(--text-2, var(--text-3)); }
.chk-row .chk-ic svg { width: 18px; height: 18px; }
.chk-row.is-fixed { cursor: default; opacity: .75; }
.chk-row.is-fixed input { cursor: default; }
.c-res { max-width: 460px; } .c-res .ell { display: block; max-width: 460px; }
@media (max-width: 760px) { .c-res, .c-res .ell { max-width: 200px; } }

/* Coverage page */
.cv { display: grid; gap: 12px; }
.cv { min-width: 0; } .cv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.cv-t { border: 1px solid var(--line, var(--border)); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 2px; }
.cv-t small { color: var(--text-3); font-size: 12px; }
.cv-t b { font-size: 22px; font-variant-numeric: tabular-nums; }
.cv-tbl td, .cv-tbl th { white-space: nowrap; }
.cv-tbl td { vertical-align: middle; }
.cv-p { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.cv-p span { font-variant-numeric: tabular-nums; font-size: 13px; width: 38px; text-align: right; }
.cv-n { font: inherit; color: inherit; background: none; border: 0; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.cv-n.b { font-weight: 700; }
.cv-n:hover, .cv-n:focus-visible { background: var(--surface-2); }
.cv-n.on { background: var(--text); color: var(--bg); text-decoration: none; }
.cv-list { border: 1px solid var(--line, var(--border)); border-radius: var(--r-md); padding: 12px; display: grid; gap: 10px; min-width: 0; }
.cv-lh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-lh .sp { flex: 1; }
.cv-list .tw { max-height: 480px; overflow: auto; }
.cv-ltbl td { white-space: nowrap; }
.cv-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.cv-bar i { display: block; height: 100%; border-radius: 4px; }
.cv-bar .b-ok { background: var(--good-text); } .cv-bar .b-warn { background: var(--warn-solid, #b25e00); } .cv-bar .b-stop { background: var(--stop-solid, #c62828); }
.t-ok { color: var(--good-text, #136C35); } .t-warn { color: var(--warn-text, #9a5b00); } .t-stop { color: var(--stop-text, #c62828); }

/* 9 Oct: Check page staff view */
.ck-tbl .site-ok { color: var(--ok, #1a7f37); font-size: 13px; white-space: nowrap; }
.ck-tbl .c-site { white-space: nowrap; }
.ck-tbl .c-dom .iconbtn.sm { opacity: .6; }
.ck-tbl .c-dom .iconbtn.sm:hover, .ck-tbl .c-dom .iconbtn.sm:focus-visible { opacity: 1; }
.ck-grid.ck-solo { grid-template-columns: minmax(0, 1fr); }

/* 21 Oct 2026: Ask Senior page */
.pill-idle { background: var(--info-bg); color: var(--info-text); }
.ask-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.ask-side { padding: 0; position: sticky; top: 8px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; overflow: hidden; }
.ask-side-h { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ask-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ask-li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-md); color: var(--text); min-width: 0; }
.ask-li:hover { background: var(--row-hover); text-decoration: none; }
.ask-li.on { background: var(--accent-soft); }
.ask-li .pill { align-self: flex-start; margin-top: 2px; }
.ask-empty { padding: 10px; margin: 0; }
.ask-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ask-chat { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ask-intro p { margin: 0 0 8px; }
.ask-th { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ask-th .ask-back { display: none; }
.ask-msgs { display: flex; flex-direction: column; gap: 14px; }
.ask-msg.me { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ask-bub { max-width: min(680px, 92%); background: var(--accent-soft); color: var(--text); padding: 10px 14px; border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg); white-space: normal; overflow-wrap: anywhere; }
.ask-ans { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--sh-1); min-width: 0; overflow-wrap: anywhere; }
.ask-ans p { margin: 0 0 10px; max-width: 80ch; }
.ask-ans ul, .ask-ans ol { margin: 0 0 10px; padding-left: 22px; }
.ask-ans li { margin: 2px 0; }
.ask-ans code { font-size: 12.5px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }
.ask-h { font-size: 15px; line-height: 22px; font-weight: 600; margin: 14px 0 6px; }
.ask-ans > .ask-h:first-child { margin-top: 0; }
h4.ask-h { font-size: 14px; }
.ask-q { border-left: 3px solid var(--border-strong); padding: 4px 12px; color: var(--text-2); margin: 0 0 10px; }
.ask-tbl { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); }
.ask-tbl .tbl th { position: static; height: auto; padding: 8px 10px; white-space: nowrap; }
.ask-tbl .tbl td { height: auto; padding: 7px 10px; white-space: normal; vertical-align: top; min-width: 60px; }
.ask-tbl .tbl tr:last-child td { border-bottom: 0; }
.ask-code { border: 1px solid var(--border-strong); border-radius: var(--r-md); margin: 0 0 12px; overflow: hidden; }
.ask-code-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; background: var(--surface-2); font-size: 12.5px; color: var(--text-2); }
.ask-code pre { margin: 0; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13.5px/20px var(--font); color: var(--text); background: var(--surface); }
.ask-use { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ask-wait { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; }
.ask-compose { padding: 12px; position: sticky; bottom: 8px; }
.ask-compose textarea { width: 100%; resize: vertical; min-height: 64px; max-height: 40vh; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 10px 12px; font: inherit; color: var(--text); background: var(--surface); }
.ask-compose textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.ask-cbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
@media (max-width: 760px) {
  .ask-wrap { grid-template-columns: minmax(0, 1fr); }
  .ask-side { position: static; max-height: none; }
  .pg-ask.ask-open .ask-side { display: none; }
  .pg-ask:not(.ask-open) .ask-main .ask-chat { display: none; }
  .ask-th .ask-back { display: inline-grid; }
  .ask-ans { padding: 12px; }
  .ask-compose { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* Settings sub-sidebar (malik 21 Oct): Invest / Marketing CRM jaisa — sticky left list, right me ek section */
.set-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; max-width: 1280px; }
.set-nav { position: sticky; top: 84px; display: grid; gap: 14px; padding: 4px 0; }
.sn-g { display: grid; gap: 2px; }
.sn-h { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 0 10px 4px; }
.sn-i { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-md); color: var(--text-2); text-decoration: none; font-size: 14px; }
.sn-i .ic { width: 16px; height: 16px; flex: none; }
.sn-i:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.cl-act { flex-wrap: wrap; }
.sn-i.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.sn-i:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.set-body { min-width: 0; display: grid; gap: 16px; }
.set-body > .card:not(.set-wide) { max-width: 760px; }
@media (max-width: 860px) {
  .set-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .set-nav { position: sticky; top: 64px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; background: var(--bg); scrollbar-width: none; }
  .sn-g { display: contents; } .sn-h { display: none; }
  .sn-i { flex: none; height: 34px; border: 1px solid var(--border); border-radius: var(--r-pill); white-space: nowrap; }
}

/* ===== 21 Oct Phase 1 (client premium): login, client shell, welcome, header (i), bade buttons ===== */
.login-wrap { width: 100%; max-width: 880px; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(16,24,40,.25); }
.login-brand { background: linear-gradient(150deg, #1D4ED8 0%, #2563EB 55%, #3B82F6 100%); color: #fff; padding: 40px 36px; display: grid; align-content: start; gap: 20px; }
.lb-top { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.login-brand .login-mark { width: 36px; height: 36px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.2)); }
.login-brand h2 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.01em; margin: 8px 0 0; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14.5px; line-height: 21px; }
.lb-list li { display: flex; gap: 10px; align-items: flex-start; } .lb-list .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #BFDBFE; }
.lb-by { margin: auto 0 0; padding-top: 24px; font-size: 12.5px; opacity: .8; }
.login-wrap .login-card { max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 40px 36px; align-content: center; }
.login-wrap .login-card h1 { margin: 0; font-size: 22px; }
.login-sub { margin: -8px 0 4px; }
.login-help { margin: 0; } .login-help a { font-weight: 600; }
@media (max-width: 760px) {
  .login-wrap { grid-template-columns: minmax(0, 1fr); }
  .login-brand { padding: 24px 22px; gap: 12px; } .login-brand h2 { font-size: 19px; line-height: 26px; } .lb-list { font-size: 13.5px; gap: 8px; } .lb-by { padding-top: 4px; }
  .login-wrap .login-card { padding: 24px 22px; }
}
/* client shell: sidebar / tab bar nahi, header me brand */
.is-client .sb, .is-client .sb-edge, .is-client .tb { display: none !important; }
.ph-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; white-space: nowrap; } .ph-mark { width: 28px; height: 28px; }
.ph-div { width: 1px; height: 24px; background: var(--border); flex: none; }
.is-client .ph { gap: 14px; flex-wrap: wrap; }
.is-client .ph-r { flex-wrap: wrap; justify-content: flex-end; }
.cq { display: flex; gap: 6px; flex-wrap: wrap; }
.cq-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cq-chip b { font-weight: 700; } .cq-chip.cq-out { background: var(--stop-bg); color: var(--stop-text); }
.ck-note { margin: 10px 0 0; }
/* welcome */
.ck-welcome { display: grid; gap: 12px; }
.ck-welcome h2 { font-size: 18px; margin: 0; } .ck-welcome > p { margin: -4px 0 0; }
.ckw-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.ckw-steps li { counter-increment: s; border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px 12px 50px; position: relative; display: grid; gap: 2px; font-size: 13.5px; }
.ckw-steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.ckw-steps span { color: var(--text-3); }
.ck-welcome #ckSample { justify-self: start; }
.ckw-means { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 4px 0 0; font-size: 13px; padding-top: 12px; border-top: 1px solid var(--border); }
.ckw-means dt { font-weight: 600; } .ckw-means dd { margin: 0; color: var(--text-2); }
/* header (i), country, bade mini buttons */
.th-i { display: inline-flex; align-items: center; gap: 4px; cursor: help; } .th-i .ic { width: 13px; height: 13px; opacity: .55; }
.mc .cc { font-size: 11.5px; color: var(--text-2); font-weight: 500; }
.ss-btns { gap: 6px; margin-top: 4px; }
.ss-b { min-height: 26px; min-width: 32px; padding: 0 8px; font-size: 12px; border-radius: 7px; }
.is-client .ck-tbl td.c-act .btn span { display: inline; }
.is-client .ck-tbl td.c-act .btn { width: auto; padding: 0 10px; }
#ckLimit .btn { flex: none; }

/* ===== 21 Oct Phase 2: rang scale, sort, CSV, Recent checks ===== */
.qv { display: inline-block; min-width: 30px; padding: 1px 7px; border-radius: 6px; text-align: right; }
.qv.q-hi { background: var(--good-bg); color: var(--good-text); }
.qv.q-mid { background: color-mix(in srgb, var(--good-bg) 55%, transparent); color: var(--good-text); }
.qv.q-low { background: var(--warn-bg); color: var(--warn-text); }
.qv.q-poor { background: var(--stop-bg); color: var(--stop-text); }
.lg-q { display: inline-flex; gap: 4px; margin-left: 8px; cursor: help; } .lg-q .qv { min-width: 0; font-size: 11.5px; font-weight: 600; }
.th-s { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.th-s:hover { color: var(--text); } .th-s:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.th-arr { font-size: 11px; opacity: .45; } th[aria-sort="ascending"] .th-arr, th[aria-sort="descending"] .th-arr { opacity: 1; color: var(--accent-text); }
.ck-rh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-hist { padding: 0; } .ck-hist summary { padding: 16px 20px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ckh-list { list-style: none; margin: 0; padding: 0 20px 14px; display: grid; gap: 0; }
.ckh-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.ckh-d { font-weight: 600; } .ckh-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .ckh-list li { grid-template-columns: minmax(0, 1fr) auto; } .ckh-s { display: none; } }

/* ===== 21 Oct Phase 3: phone cards, footer, Get more checks ===== */
.ck-cards { display: none; }
.ph-mark { flex: none; }
.ck-foot { display: grid; gap: 6px; padding: 8px 4px 24px; font-size: 12.5px; line-height: 19px; color: var(--text-2); }
.ck-foot p { margin: 0; }
.ck-up { display: flex; gap: 12px; align-items: flex-start; border-color: var(--accent); background: var(--accent-soft); }
.ck-up-b { flex: 1; display: grid; gap: 6px; } .ck-up h2 { margin: 0; font-size: 16px; } .ck-up p { margin: 0; font-size: 13.5px; }
@media (max-width: 760px) {
  .ck-res .tw-box { display: none; }
  .ck-cards { display: grid; gap: 10px; }
  .ckc { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; display: grid; gap: 10px; background: var(--surface); }
  .ckc-h { display: flex; align-items: center; gap: 6px; min-width: 0; } .ckc-h .dom-t { font-weight: 600; max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ckc-m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ckc-t { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; }
  .ckc-t > small { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
  .ckc-h .site-ok, .ckc-h .fl { white-space: nowrap; flex: none; }
  .ckc-t .mc { justify-items: start; }
  .ckc-a { display: flex; justify-content: flex-end; } .ckc-a .btn span { display: inline; }
  .ss-b { min-height: 32px; min-width: 40px; }
  .is-client #phTitle, .is-client .ph-div, .is-client #phMeta { display: none; }
  .is-client .ph { padding: 10px 14px; }
  .is-client #cOut span { display: none; }
  /* client header phone par 2 line: brand + buttons, neeche quota chips */
  .is-client .ph { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; }
  .is-client .ph-l { display: none; } .is-client .ph-r { display: contents; }
  .is-client #cqChips { order: 9; grid-column: 1 / -1; }
  .cq-chip { height: 28px; padding: 0 10px; font-size: 12px; }
  .ck-rh .btn span { display: inline; }
}

/* ===== 21 Oct: search box + results header + sticky table header ===== */
.ck-in-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .ck-in-h .card-t { margin: 0; }
.ck-cnt { font-size: 12.5px; font-weight: 600; color: var(--accent-text); background: var(--accent-soft); border-radius: var(--r-pill); padding: 1px 9px; }
.ck-cnt:empty { display: none; }
.ck-hint { line-height: 18px; }
.ck-in.is-compact { padding-top: 14px; padding-bottom: 14px; }
.ck-in.is-compact .ck-row { margin-top: 10px; }
.ck-rt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ck-rt h2 { margin: 0; font-size: 17px; }
.ck-rt .mut { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.ck-res .ck-rh { margin-bottom: 14px; }
.ck-foot2 { display: grid; gap: 4px; margin-top: 12px; } .ck-foot2 .legend { margin: 0; } .ck-foot2 .attr { margin: 0; }
/* table header page scroll par upar chipka rahe (page header ke theek neeche) */
@media (min-width: 761px) {
  .ck-res .tw-box, .ck-res .tw { overflow: visible; }
  .ck-res .ck-tbl th { position: sticky; top: var(--ph-h, 64px); z-index: 5; box-shadow: 0 1px 0 var(--border-strong); }
  .ck-res .ck-tbl th:first-child { border-top-left-radius: var(--r-lg); } .ck-res .ck-tbl th:last-child { border-top-right-radius: var(--r-lg); }
}