@font-face { font-family: "Yekan Bakh"; font-weight: 300; font-display: swap; src: url(/fonts/YekanBakh-Light.woff2) format("woff2"); }
@font-face { font-family: "Yekan Bakh"; font-weight: 400; font-display: swap; src: url(/fonts/YekanBakh-Regular.woff2) format("woff2"); }
@font-face { font-family: "Yekan Bakh"; font-weight: 600; font-display: swap; src: url(/fonts/YekanBakh-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Yekan Bakh"; font-weight: 700; font-display: swap; src: url(/fonts/YekanBakh-Bold.woff2) format("woff2"); }
@font-face { font-family: "Yekan Bakh"; font-weight: 800; font-display: swap; src: url(/fonts/YekanBakh-ExtraBold.woff2) format("woff2"); }

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f1f3f7; --surface-3: #e9edf3;
  --border: #e2e6ed; --border-strong: #cfd5df;
  --text: #101828; --text-2: #475467; --muted: #6b7484;
  --accent: #2563eb; --accent-hover: #1d4fd7; --accent-soft: #e9f0ff; --accent-text: #1e40af;
  --bar: #c5cbd5;
  --good: #137a3d; --good-soft: #e5f5ea; --bad: #b42318; --bad-soft: #fdeceb;
  --warn: #a15c07; --warn-soft: #fdf3e2; --info-soft: #eef2f7;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #6250d6; --s-other: #b9bfc9;
  --radius: 14px; --radius-sm: 10px;
  --sidebar: 248px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1117; --surface: #151a22; --surface-2: #1b212b; --surface-3: #232a36;
    --border: #262d39; --border-strong: #353e4d;
    --text: #e9edf3; --text-2: #b4bccb; --muted: #8b95a6;
    --accent: #5b8def; --accent-hover: #7aa3f3; --accent-soft: rgba(91, 141, 239, .15); --accent-text: #a9c3fa;
    --bar: #3c4554;
    --good: #4cc27a; --good-soft: rgba(76, 194, 122, .13); --bad: #f0786d; --bad-soft: rgba(240, 120, 109, .13);
    --warn: #e8a64a; --warn-soft: rgba(232, 166, 74, .13); --info-soft: #1b212b;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #9085e9; --s-other: #4a5361;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117; --surface: #151a22; --surface-2: #1b212b; --surface-3: #232a36;
  --border: #262d39; --border-strong: #353e4d;
  --text: #e9edf3; --text-2: #b4bccb; --muted: #8b95a6;
  --accent: #5b8def; --accent-hover: #7aa3f3; --accent-soft: rgba(91, 141, 239, .15); --accent-text: #a9c3fa;
  --bar: #3c4554;
  --good: #4cc27a; --good-soft: rgba(76, 194, 122, .13); --bad: #f0786d; --bad-soft: rgba(240, 120, 109, .13);
  --warn: #e8a64a; --warn-soft: rgba(232, 166, 74, .13); --info-soft: #1b212b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #9085e9; --s-other: #4a5361;
}

/* ── base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 400 15px/1.8 "Yekan Bakh", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.icon { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }

/* ── shell ──────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 20px 14px;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: #fff;
  display: grid; place-items: center; flex: none; }
.brand-mark .icon { width: 20px; height: 20px; }
.brand-title { font-weight: 700; font-size: 15px; line-height: 1.4; }
.brand-sub { font-size: 12px; color: var(--muted); }
.nav-group { margin-top: 8px; }
.nav-label { font-size: 12px; color: var(--muted); padding: 10px 10px 6px; font-weight: 600; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px;
  color: var(--text-2); font-weight: 600; text-decoration: none; margin-bottom: 2px;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--accent-soft); color: var(--accent-text); }
.sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.admin-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--good); padding: 0 10px; }

.main { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.topbar-inner { max-width: 1240px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.page-head { flex: 1 1 260px; min-width: 0; }
.page-title { font-size: 20px; font-weight: 700; margin: 0; line-height: 1.5; }
.page-sub { font-size: 13px; color: var(--muted); margin: 0; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn.menu-btn { display: none; }
#view:focus { outline: none; }
.content { max-width: 1240px; margin: 0 auto; padding: 24px 28px 64px; }

/* ── buttons & controls ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); }
.btn-danger:hover { background: var(--bad-soft); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-icon { width: 40px; padding: 0; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 14px; }
.btn-sm.btn-icon { width: 34px; }
.btn-block { width: 100%; justify-content: flex-start; }

.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmented button {
  border: 0; background: transparent; color: var(--text-2); height: 32px; padding: 0 14px; border-radius: 8px;
  cursor: pointer; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

.select { position: relative; display: inline-block; min-width: 180px; }
.select-btn {
  width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 12px 0 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface);
  cursor: pointer; text-align: right;
}
.select-btn:hover { border-color: var(--muted); }
.select-btn .value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn .placeholder { color: var(--muted); }
.select-btn .icon { color: var(--muted); transition: transform .15s; }
.select.open .select-btn .icon { transform: rotate(180deg); }
.select-pop {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 100%; max-width: 340px; z-index: 50;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 6px; display: none;
}
.select.open .select-pop { display: block; }
.select-search { width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; margin-bottom: 6px; background: var(--surface-2); }
.select-list { max-height: 300px; overflow-y: auto; }
.select-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; white-space: nowrap;
}
.select-opt:hover, .select-opt.focus { background: var(--surface-2); }
.select-opt[aria-selected="true"] { color: var(--accent-text); font-weight: 600; }
.select-opt .hint { color: var(--muted); font-size: 13px; }
.select-empty { padding: 10px; color: var(--muted); font-size: 14px; }

.input, .textarea {
  width: 100%; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 10px;
  padding: 0 12px; height: 40px;
}
.textarea { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.8; }
.input:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search { position: relative; flex: 1 1 220px; max-width: 340px; }
.search .icon { position: absolute; top: 11px; right: 12px; color: var(--muted); }
.search .input { padding-right: 38px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; color: var(--text-2); font-weight: 600; }
.field-hint { font-size: 12px; color: var(--muted); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 40px; height: 22px; border-radius: 99px; background: var(--surface-3); position: relative; transition: background .15s; border: 1px solid var(--border-strong); }
.switch .track::after { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); transition: right .15s; }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { right: 20px; }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.checkbox { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .spacer { flex: 1; }

/* ── cards, tiles ───────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; min-width: 0; }
.card + .card, .card + .grid, .grid + .card, .grid + .grid { margin-top: 20px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.card-title { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 9px; }
.card-title .icon { color: var(--muted); }
.card-sub { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.lead { font-size: 15px; color: var(--text-2); margin: -6px 0 16px; }
.lead strong { color: var(--text); }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 14px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; min-width: 0; }
.tile-label { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.tile-label .icon { width: 16px; height: 16px; color: var(--muted); }
.tile-value { font-size: 26px; font-weight: 700; line-height: 1.35; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tile.accent { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

.delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.delta .icon { width: 15px; height: 15px; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--muted); }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.badge .icon { width: 14px; height: 14px; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.info { background: var(--surface-2); color: var(--text-2); }
.badge.accent { background: var(--accent-soft); color: var(--accent-text); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; background: var(--surface-2); color: var(--text-2); font-size: 12.5px; white-space: nowrap; }

/* ── bar list (one measure across items) ────────────────────────────────── */
.bars { display: grid; gap: 4px; }
.bar-row { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) minmax(92px, auto); align-items: center; gap: 14px; padding: 6px 8px; border-radius: 9px; }
.bar-row:hover { background: var(--surface-2); }
.bar-row.link { cursor: pointer; }
.bar-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; display: flex; }
.bar-fill { height: 100%; background: var(--bar); border-radius: 99px; min-width: 3px; }
.bar-row.hl .bar-label { color: var(--accent-text); font-weight: 700; }
.bar-value { text-align: left; font-weight: 600; white-space: nowrap; }
.bar-row.hl .bar-value { font-weight: 700; }

/* ── tables ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.table th {
  position: sticky; top: 0; background: var(--surface); text-align: right; font-weight: 600; font-size: 13px; color: var(--muted);
  padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none;
}
.table th.sortable { cursor: pointer; }
.table th.sortable:hover { color: var(--text); }
.table th .th-in { display: inline-flex; align-items: center; gap: 4px; }
.table th .icon { width: 14px; height: 14px; }
.table th.sorted { color: var(--text); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr:hover td { background: var(--surface-2); }
.table tr.hl td { background: var(--accent-soft); }
.table tr.hl:hover td { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-2)); }
.table .n { text-align: left; min-width: 84px; }
.table th.n { text-align: left; }
.table .wrap { white-space: normal; min-width: 240px; max-width: 420px; }
.table td.first, .table th.first { position: sticky; right: 0; z-index: 1; background: var(--surface); }
.table th.first { z-index: 2; }
.table tbody tr:hover td.first { background: var(--surface-2); }
.table tr.hl td.first { background: color-mix(in srgb, var(--accent-soft) 100%, var(--surface)); }
.rank { color: var(--muted); width: 36px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.pager .btns { display: flex; gap: 6px; }
.pager-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pager-nav .btn { gap: 5px; }
.pager-count { color: var(--muted); }
.pager-count small { opacity: .75; }
.page-nums { display: flex; align-items: center; gap: 4px; }
.page-num { min-width: 34px; justify-content: center; padding-inline: 8px; font-variant-numeric: tabular-nums; }
.page-num.is-current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.page-gap { padding: 0 2px; color: var(--muted); user-select: none; }
/* on a phone the numbers are the first thing to go; the two labelled buttons stay */
@media (max-width: 560px) { .page-nums { display: none; } .pager { justify-content: center; } }

.who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.table .who { min-width: 230px; }
.table .who-text { min-width: 0; }
.who-text { min-width: 0; display: grid; line-height: 1.45; }
.who-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: right; }
.who-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-3); display: grid; place-items: center; color: var(--text-2); font-weight: 700; font-size: 14px; }
.avatar.lg { width: 72px; height: 72px; font-size: 26px; }

.post-cell { display: grid; gap: 3px; line-height: 1.6; min-width: 260px; max-width: 460px; white-space: normal; }
.post-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.post-cap { color: var(--text-2); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── lists ──────────────────────────────────────────────────────────────── */
.list { display: grid; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); min-width: 0; }
.list-row:last-child { border-bottom: 0; }
.list-row.link { cursor: pointer; border-radius: 8px; }
.list-row.link:hover { background: var(--surface-2); }
.list-val { display: flex; align-items: center; gap: 16px; flex: none; }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); display: grid; justify-items: center; gap: 8px; }
.empty .icon { width: 28px; height: 28px; }

/* ── charts ─────────────────────────────────────────────────────────────── */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: inherit; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .axis-line { stroke: var(--border-strong); stroke-width: 1; }
.chart .axis-text { fill: var(--muted); font-size: 12.5px; }
.chart .guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-wrap { position: relative; }
.chart-tip {
  position: fixed; z-index: 60; pointer-events: none; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); padding: 10px 12px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow-lg);
  min-width: 150px; display: grid; gap: 4px;
}
.chart-tip .tip-title { font-weight: 700; margin-bottom: 2px; }
.chart-tip .tip-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; white-space: nowrap; }
.chart-tip .tip-name { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; font-size: 13.5px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.share-bar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--surface); }
.share-bar > span { display: block; height: 100%; min-width: 3px; }
.share-list { display: grid; gap: 2px; margin-top: 16px; }
.share-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 64px; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.share-row:last-child { border-bottom: 0; }
.share-row .v { text-align: left; white-space: nowrap; }
.share-row .p { text-align: left; color: var(--muted); white-space: nowrap; }
.share-row.hl { font-weight: 700; }
.multiples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.multiples .card { margin: 0 !important; }
.picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pick-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); font-weight: 600; }
.pick-chip .x { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--surface-2); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.pick-chip .x:hover { color: var(--bad); }
.pick-chip .x .icon { width: 14px; height: 14px; }
.plus { font-size: 12px; color: var(--warn); font-weight: 700; margin-inline-start: 2px; cursor: help; }

/* ── progress, status ───────────────────────────────────────────────────── */
.progress { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); border-radius: 99px; transition: width .4s; }
.status-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 20px; margin-top: 18px; }
.kv div { display: grid; gap: 2px; }
.kv dt { font-size: 12.5px; color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.log { direction: ltr; text-align: left; font: 12.5px/1.7 Consolas, "Cascadia Mono", monospace; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: var(--text-2); }
.log .ok { color: var(--good); }
.log .bad { color: var(--bad); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-items: end; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.note { background: var(--info-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--text-2); display: flex; gap: 10px; align-items: flex-start; }
.note .icon { color: var(--muted); margin-top: 3px; }
.bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); margin-bottom: 14px; }

/* ── page header (single page) ──────────────────────────────────────────── */
.profile { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.profile h2 { margin: 0; font-size: 20px; direction: ltr; text-align: right; }
.profile .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

/* ── modal, toast, skeleton ─────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 80; background: rgba(10, 14, 20, .45); display: grid; place-items: center; padding: 16px; }
.modal { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 24px; }
.modal h3 { margin: 0 0 6px; font-size: 18px; }
.modal .body { display: grid; gap: 16px; margin: 16px 0 22px; }
.modal .foot { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
.toasts { position: fixed; bottom: 20px; left: 20px; z-index: 90; display: grid; gap: 10px; }
.toast { display: flex; gap: 10px; align-items: center; background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); max-width: 380px; }
.toast.bad { background: var(--bad); color: #fff; }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-box { border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--border)); background: var(--bad-soft); color: var(--bad); border-radius: 12px; padding: 14px 16px; display: flex; gap: 10px; align-items: center; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid-2, .multiples { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); z-index: 70; transform: translateX(105%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(10, 14, 20, .4); z-index: 65; }
  .btn.menu-btn { display: inline-flex; }
  .topbar-inner { padding: 12px 16px; }
  .content { padding: 18px 16px 48px; }
}
@media (max-width: 600px) {
  .card { padding: 16px; }
  .table-wrap { margin: 0 -16px; padding: 0 16px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 14px; }
  .tile-value { font-size: 21px; }
  .bar-row { grid-template-columns: minmax(70px, 96px) minmax(0, 1fr) minmax(70px, auto); gap: 10px; padding: 6px 4px; }
  .page-title { font-size: 18px; }
  .topbar-actions { width: 100%; }
  .topbar-actions .segmented { flex: 1; }
  .topbar-actions .segmented button { flex: 1; padding: 0 8px; }
  .select { min-width: 0; flex: 1 1 160px; }
  .search { max-width: none; }
  .toasts { left: 12px; right: 12px; }
  /* tables become stacked cards: each value sits next to its own label */
  .table-wrap { margin: 0; padding: 0; overflow: visible; }
  table.table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tbody tr { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--surface); }
  .table tbody tr:hover td, .table tr.hl td, .table tr.hl:hover td, .table tbody tr:hover td.first, .table tr.hl td.first { background: transparent; }
  .table tr.hl { background: var(--accent-soft) !important; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
  .table td { border: 0; padding: 6px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; white-space: normal; text-align: left; min-width: 0; }
  .table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: right; flex: none; }
  .table td[data-label=""]::before { display: none; }
  .table td.first, .table td[data-label=""] { justify-content: flex-start; text-align: right; position: static; }
  .table td.first { padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--border); }
  .table td.rank-cell { display: none; }
  .table .n { min-width: 0; }
  .table .who { min-width: 0; }
  .post-cell { min-width: 0; max-width: none; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .sidebar, .topbar-actions, .menu-btn { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .card, .tile { box-shadow: none; break-inside: avoid; }
}

/* ══ visual identity ═══════════════════════════════════════════════════════
   Navy sidebar, a gradient hero, colour-coded tiles and brands. */
:root {
  --navy-1: #0a1a3f; --navy-2: #142d6b;
  --grad-hero: linear-gradient(125deg, #1e40af 0%, #2563eb 38%, #4f46e5 72%, #7c3aed 100%);
  --t-blue: #2563eb; --t-blue-bg: #e8f0ff;
  --t-green: #059669; --t-green-bg: #e3f7ef;
  --t-violet: #7c3aed; --t-violet-bg: #f1eaff;
  --t-orange: #ea580c; --t-orange-bg: #fff0e5;
  --t-pink: #db2777; --t-pink-bg: #ffe8f2;
  --t-teal: #0891b2; --t-teal-bg: #e2f6fa;
  --t-amber: #d97706; --t-amber-bg: #fff4dc;
  --page-glow: radial-gradient(1100px 420px at 85% -12%, rgba(79, 70, 229, .13), transparent 70%),
               radial-gradient(900px 360px at 5% -8%, rgba(14, 165, 233, .12), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-blue: #6ea2ff; --t-blue-bg: rgba(110, 162, 255, .14);
    --t-green: #34d399; --t-green-bg: rgba(52, 211, 153, .13);
    --t-violet: #a78bfa; --t-violet-bg: rgba(167, 139, 250, .14);
    --t-orange: #fb923c; --t-orange-bg: rgba(251, 146, 60, .14);
    --t-pink: #f472b6; --t-pink-bg: rgba(244, 114, 182, .14);
    --t-teal: #22d3ee; --t-teal-bg: rgba(34, 211, 238, .12);
    --t-amber: #fbbf24; --t-amber-bg: rgba(251, 191, 36, .13);
    --page-glow: radial-gradient(1100px 420px at 85% -12%, rgba(99, 102, 241, .20), transparent 70%),
                 radial-gradient(900px 360px at 5% -8%, rgba(14, 165, 233, .14), transparent 70%);
  }
}
:root[data-theme="dark"] {
  --t-blue: #6ea2ff; --t-blue-bg: rgba(110, 162, 255, .14);
  --t-green: #34d399; --t-green-bg: rgba(52, 211, 153, .13);
  --t-violet: #a78bfa; --t-violet-bg: rgba(167, 139, 250, .14);
  --t-orange: #fb923c; --t-orange-bg: rgba(251, 146, 60, .14);
  --t-pink: #f472b6; --t-pink-bg: rgba(244, 114, 182, .14);
  --t-teal: #22d3ee; --t-teal-bg: rgba(34, 211, 238, .12);
  --t-amber: #fbbf24; --t-amber-bg: rgba(251, 191, 36, .13);
  --page-glow: radial-gradient(1100px 420px at 85% -12%, rgba(99, 102, 241, .20), transparent 70%),
               radial-gradient(900px 360px at 5% -8%, rgba(14, 165, 233, .14), transparent 70%);
}
body { background: var(--page-glow), var(--bg); background-attachment: fixed; }
.topbar { background: color-mix(in srgb, var(--bg) 72%, transparent); }

/* sidebar */
.sidebar { background: linear-gradient(180deg, var(--navy-1) 0%, var(--navy-2) 100%); border-left: 0; color: #fff; }
.brand-mark { background: linear-gradient(135deg, #fbbf24, #f97316); box-shadow: 0 6px 16px rgba(249, 115, 22, .35); }
.brand-title { color: #fff; }
.brand-sub, .nav-label { color: rgba(255, 255, 255, .55); }
.nav a { color: rgba(255, 255, 255, .78); }
.nav a .icon { color: rgba(255, 255, 255, .6); }
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a.active { background: linear-gradient(90deg, rgba(99, 102, 241, .95), rgba(59, 130, 246, .95)); color: #fff; box-shadow: 0 6px 18px rgba(59, 130, 246, .35); }
.nav a.active .icon { color: #fff; }
.sidebar-foot { border-top-color: rgba(255, 255, 255, .12); }
.sidebar .btn-ghost { color: rgba(255, 255, 255, .85); }
.sidebar .btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.admin-chip { color: #6ee7b7; }

/* controls */
.segmented { background: var(--surface); box-shadow: var(--shadow); }
.segmented button[aria-pressed="true"] { background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, .3); }
.btn-primary { background: linear-gradient(135deg, #2563eb, #4f46e5); border-color: transparent; box-shadow: 0 6px 16px rgba(37, 99, 235, .28); }
.btn-primary:hover { background: linear-gradient(135deg, #1d4ed8, #4338ca); }

/* hero */
.hero { position: relative; overflow: hidden; border-radius: 20px; padding: 26px 28px; color: #fff; background: var(--grad-hero); box-shadow: 0 18px 40px rgba(37, 99, 235, .28); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; }
.hero::before { width: 340px; height: 340px; left: -90px; top: -150px; }
.hero::after { width: 220px; height: 220px; left: 180px; bottom: -130px; background: rgba(255, 255, 255, .06); }
.hero-top { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; flex-wrap: wrap; }
.hero-top .avatar { width: 60px; height: 60px; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.hero-title { font-size: 20px; font-weight: 800; margin: 0; }
.hero-sub { color: rgba(255, 255, 255, .78); font-size: 13.5px; margin: 2px 0 0; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; position: relative; z-index: 1; }
.hero-stat { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.hero-stat .k { font-size: 13px; color: rgba(255, 255, 255, .82); }
.hero-stat .v { font-size: 26px; font-weight: 800; line-height: 1.4; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-stat .s { font-size: 12.5px; color: rgba(255, 255, 255, .78); margin-top: 2px; }
.hero-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .18); border-radius: 99px; padding: 3px 12px; font-size: 13px; font-weight: 600; }
.hero-pill .icon { width: 15px; height: 15px; }

/* tiles with a coloured icon */
.tile { position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.icon-bubble { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.icon-bubble .icon { width: 18px; height: 18px; color: inherit !important; }
.tile::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tone, transparent); opacity: .9; }
.tile-value { font-size: 28px; font-weight: 800; }
.tone-blue { --tone: var(--t-blue); } .tone-blue .icon-bubble, .icon-bubble.tone-blue { background: var(--t-blue-bg); color: var(--t-blue); }
.tone-green { --tone: var(--t-green); } .tone-green .icon-bubble, .icon-bubble.tone-green { background: var(--t-green-bg); color: var(--t-green); }
.tone-violet { --tone: var(--t-violet); } .tone-violet .icon-bubble, .icon-bubble.tone-violet { background: var(--t-violet-bg); color: var(--t-violet); }
.tone-orange { --tone: var(--t-orange); } .tone-orange .icon-bubble, .icon-bubble.tone-orange { background: var(--t-orange-bg); color: var(--t-orange); }
.tone-pink { --tone: var(--t-pink); } .tone-pink .icon-bubble, .icon-bubble.tone-pink { background: var(--t-pink-bg); color: var(--t-pink); }
.tone-teal { --tone: var(--t-teal); } .tone-teal .icon-bubble, .icon-bubble.tone-teal { background: var(--t-teal-bg); color: var(--t-teal); }
.tone-amber { --tone: var(--t-amber); } .tone-amber .icon-bubble, .icon-bubble.tone-amber { background: var(--t-amber-bg); color: var(--t-amber); }

/* cards */
.card { border-radius: 18px; }
.card-title { font-size: 16.5px; font-weight: 800; }
.card-title .icon-bubble { width: 32px; height: 32px; }
.card-title .icon-bubble .icon { width: 17px; height: 17px; }

/* bars: thicker, gradient, with logos */
.bar-row { grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) minmax(96px, auto); padding: 7px 8px; }
.bar-label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bar-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-label .avatar { width: 26px; height: 26px; font-size: 11px; }
.bar-track { height: 14px; background: color-mix(in srgb, var(--surface-2) 85%, transparent); }
.bar-fill { background: linear-gradient(270deg, var(--fill, var(--bar)), color-mix(in srgb, var(--fill, var(--bar)) 62%, #ffffff)); }
.bar-row.hl { background: var(--accent-soft); }
.bar-value { font-weight: 700; }

/* ranks, chips */
.medal { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 800; color: #fff; }
.medal.m1 { background: linear-gradient(135deg, #fcd34d, #f59e0b); }
.medal.m2 { background: linear-gradient(135deg, #cbd5e1, #64748b); }
.medal.m3 { background: linear-gradient(135deg, #fdba74, #c2410c); }
.chip.k-reel { background: var(--t-violet-bg); color: var(--t-violet); }
.chip.k-image { background: var(--t-teal-bg); color: var(--t-teal); }
.chip.k-carousel { background: var(--t-amber-bg); color: var(--t-amber); }
.table th { background: var(--surface-2); }
.table thead th:first-child { border-top-right-radius: 10px; }
.table thead th:last-child { border-top-left-radius: 10px; }

@media (max-width: 900px) { .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .hero { padding: 20px 18px; border-radius: 16px; }
  .hero-stat .v { font-size: 21px; }
  .table th { background: transparent; }
}

.hero-plus { font-size: 15px; font-weight: 700; opacity: .85; margin-inline-start: 3px; }
.hero-stat .v .hero-trend { width: 22px; height: 22px; margin-inline-end: 6px; vertical-align: -3px; }

/* ── hero stats with visuals ── */
.hero-stat { display: grid; gap: 10px; padding: 16px 18px; }
.hs-head { display: flex; align-items: center; gap: 9px; }
.hs-icon { width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .2); display: grid; place-items: center; flex: none; }
.hs-icon .icon { width: 16px; height: 16px; }
.hs-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 64px; }
.hs-main { min-width: 0; }
.hero-stat .v { font-size: 28px; margin: 0; display: flex; align-items: center; gap: 8px; }
.hero-stat .s { margin: 0; }
.hs-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .9); }
.hs-chip .icon { width: 13px; height: 13px; }
.hs-chip.up { color: #047857; }
.hs-chip.down { color: #b91c1c; }
.ring-wrap { flex: none; width: 64px; height: 64px; }
.ring { width: 64px; height: 64px; display: block; }
.spark-wrap { flex: 1 1 90px; max-width: 140px; height: 44px; }
.spark { width: 100%; height: 100%; display: block; }
.min-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); vertical-align: middle; line-height: 1.7; margin-inline-start: 6px; cursor: help; }
.hero .min-tag { background: rgba(255, 255, 255, .22); color: #fff; }
.partial { display: inline-flex; vertical-align: -2px; margin-inline-start: 5px; cursor: help; color: var(--warn); }
.partial-ico { width: 15px; height: 15px; }
.plus, .hero-plus { display: none; }

/* ── insight cards: gradient, with a tiny chart each ── */
.insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.insight { position: relative; overflow: hidden; border-radius: 18px; padding: 20px 22px; color: #fff; min-height: 168px; display: grid; align-content: start; gap: 6px; box-shadow: 0 12px 28px rgba(16, 24, 40, .14); transition: transform .15s; }
.insight:hover { transform: translateY(-3px); }
.insight.g-green { background: linear-gradient(135deg, #047857 0%, #059669 45%, #10b981 100%); }
.insight.g-violet { background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #8b5cf6 100%); }
.insight.g-pink { background: linear-gradient(135deg, #be123c 0%, #db2777 50%, #ec4899 100%); }
.insight .wm { position: absolute; left: -18px; bottom: -22px; opacity: .14; pointer-events: none; }
.insight .wm .icon { width: 120px; height: 120px; stroke-width: 1.6; }
.in-head { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .9); position: relative; }
.in-icon { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .2); display: grid; place-items: center; }
.in-icon .icon { width: 17px; height: 17px; }
.in-value { font-size: 32px; font-weight: 800; line-height: 1.35; position: relative; }
.in-value small { font-size: 16px; font-weight: 600; opacity: .85; }
.in-note { font-size: 13px; color: rgba(255, 255, 255, .85); position: relative; }
.in-progress { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; margin-top: 8px; position: relative; }
.in-progress span { display: block; height: 100%; background: #fff; border-radius: 99px; }
.vs { display: grid; gap: 7px; margin-top: 6px; position: relative; }
.vs-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.vs-row > span:first-child { color: rgba(255, 255, 255, .9); white-space: nowrap; }
.vs-track { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .2); overflow: hidden; display: flex; }
.vs-track span { display: block; height: 100%; border-radius: 99px; }
.vs-row.us .vs-track span { background: #fff; }
.vs-row.them .vs-track span { background: rgba(255, 255, 255, .5); }
.vs-row strong { white-space: nowrap; font-weight: 700; }
@media (max-width: 1100px) { .insights { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .hero-stat .v { font-size: 22px; } .in-value { font-size: 26px; } }

.coverage-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; margin-bottom: 20px;
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border)); color: var(--text); font-size: 14px; line-height: 1.8; }
.coverage-banner > .icon { color: var(--warn); width: 22px; height: 22px; margin-top: 2px; }
.coverage-banner strong { display: block; color: var(--warn); }
.coverage-banner.strong { background: color-mix(in srgb, var(--warn-soft) 70%, var(--bad-soft)); }

/* ══ کانون‌گرام: Instagram-flavoured identity ═════════════════════════════ */
:root {
  --ig: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
  --ig-soft: linear-gradient(120deg, #4f5bd5 0%, #962fbf 30%, #d62976 64%, #f56040 90%, #fa7e1e 100%);
}
.brand-mark { background: var(--ig); box-shadow: 0 8px 20px rgba(214, 41, 118, .35); }
.gram-glyph { width: 24px; height: 24px; }
.brand-title { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.nav a.active { background: linear-gradient(90deg, #962fbf, #d62976 70%, #f56040); box-shadow: 0 8px 20px rgba(214, 41, 118, .32); }
.segmented button[aria-pressed="true"], .btn-primary { background: linear-gradient(135deg, #962fbf, #d62976); box-shadow: 0 6px 16px rgba(214, 41, 118, .28); }
.btn-primary:hover { background: linear-gradient(135deg, #7e22ce, #be185d); }
.hero { background: var(--ig-soft); box-shadow: 0 20px 44px rgba(150, 47, 191, .32); }
.hero::before { background: rgba(255, 255, 255, .10); }

/* story ring around profile pictures */
.story { display: inline-grid; place-items: center; padding: 2px; border-radius: 50%; background: var(--ig); flex: none; }
.story > .avatar { border: 2px solid var(--surface); }
.story.lg { padding: 3px; }
.hero .story > .avatar { border-color: rgba(255, 255, 255, .9); }
.hero-top .story .avatar { width: 58px; height: 58px; border-width: 3px; }

/* hero stat: the trend line sits under the number, full width */
.hs-body:has(.spark-wrap) { flex-direction: column; align-items: stretch; gap: 8px; }
.hs-body .spark-wrap { max-width: none; width: 100%; flex: none; height: 40px; }

/* motion */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero, .insight, .card, .tile, .coverage-banner { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.insights > :nth-child(2) { animation-delay: .06s; } .insights > :nth-child(3) { animation-delay: .12s; }
.bar-fill { transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.in-progress span { transition: width 1s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .hero, .insight, .card, .tile, .coverage-banner { animation: none; } .bar-fill, .in-progress span { transition: none; } }

/* reel cards */
.reel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.reel-card { border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.reel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.reel-cover { position: relative; color: #fff; padding: 14px 16px 16px; min-height: 140px; display: grid; align-content: space-between; }
.reel-cover.c1 { background: linear-gradient(135deg, #962fbf, #d62976 60%, #fa7e1e); }
.reel-cover.c2 { background: linear-gradient(135deg, #4f5bd5, #962fbf); }
.reel-cover.c3 { background: linear-gradient(135deg, #d62976, #f56040); }
.reel-cover.c4 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.reel-cover.c5 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.reel-cover.c6 { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.reel-top { display: flex; justify-content: space-between; align-items: center; }
.reel-rank { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .25); display: grid; place-items: center; font-size: 12.5px; font-weight: 800; }
.reel-date { font-size: 12.5px; background: rgba(0, 0, 0, .18); padding: 2px 10px; border-radius: 99px; }
.reel-plays { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.reel-plays .icon { width: 26px; height: 26px; fill: #fff; }
.reel-plays strong { font-size: 30px; font-weight: 800; line-height: 1.2; }
.reel-sub { font-size: 12.5px; opacity: .85; }
.reel-body { padding: 12px 14px 10px; display: grid; gap: 8px; flex: 1; }
.reel-who { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); min-width: 0; }
.reel-who:hover { text-decoration: none; }
.reel-who .avatar { width: 30px; height: 30px; font-size: 12px; }
.reel-cap { margin: 0; font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.7; }
.reel-stats { display: flex; align-items: center; gap: 16px; color: var(--text-2); font-size: 13.5px; margin-top: auto; }
.reel-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.reel-stats > span .icon { width: 16px; height: 16px; }
.reel-stats > span:first-child .icon { color: #e11d48; }
.reel-stats .btn { margin-inline-start: auto; }

@media (max-width: 600px) {
  .hs-body { flex-wrap: wrap; min-height: 0; }
  .ring-wrap, .ring { width: 50px; height: 50px; }
  .hero-stat { padding: 12px 13px; }
  .hs-head .k { font-size: 12.5px; line-height: 1.5; }
}

/* blue identity (matches the Kanoongram logo) */
:root {
  --ig: linear-gradient(45deg, #06b6d4 0%, #2563eb 40%, #4f46e5 70%, #7c3aed 100%);
  --ig-soft: linear-gradient(120deg, #0e7490 0%, #2563eb 32%, #4f46e5 64%, #7c3aed 100%);
}
.brand-mark { background: var(--ig); box-shadow: 0 8px 20px rgba(37, 99, 235, .4); }
.gram-glyph { width: 26px; height: 26px; }
.nav a.active { background: linear-gradient(90deg, #2563eb, #4f46e5 60%, #7c3aed); box-shadow: 0 8px 20px rgba(59, 91, 235, .35); }
.segmented button[aria-pressed="true"], .btn-primary { background: linear-gradient(135deg, #2563eb, #4f46e5); box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
.btn-primary:hover { background: linear-gradient(135deg, #1d4ed8, #4338ca); }
.hero { background: var(--ig-soft); box-shadow: 0 20px 44px rgba(37, 99, 235, .32); }
.reel-cover.c1 { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.reel-cover.c3 { background: linear-gradient(135deg, #0891b2, #2563eb); }

/* six top reels always fill whole rows: 3 / 2 / 1 per row */
.reel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .reel-grid { grid-template-columns: minmax(0, 1fr); } }

/* compact coverage notice */
.coverage-banner { display: block; padding: 10px 16px; border-radius: 12px; font-size: 13.5px; }
.cov-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cov-line strong { display: inline; color: var(--warn); }
.cov-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); flex: none; }
.cov-icon .icon { width: 15px; height: 15px; }
.cov-toggle { margin-inline-start: auto; border: 0; background: transparent; color: var(--warn); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 8px; }
.cov-toggle:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.cov-toggle .icon { width: 15px; height: 15px; transition: transform .15s; }
.cov-toggle.open .icon { transform: rotate(180deg); }
.cov-more { margin-top: 8px; color: var(--text-2); line-height: 1.9; padding-inline-start: 36px; }

/* donut */
.donut-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; }
.donut { width: 200px; height: 200px; }
.donut .slice { stroke: var(--surface); stroke-width: 2; transition: transform .15s; transform-origin: 100px 100px; cursor: default; }
.donut .slice:hover, .donut .slice.hl { transform: scale(1.04); }
.donut-big { font-size: 28px; font-weight: 800; fill: var(--text); }
.donut-sub { font-size: 12.5px; fill: var(--muted); }
.donut-wrap .share-list { margin-top: 0; }
@media (max-width: 600px) { .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } .donut-wrap .share-list { width: 100%; } }

/* podium */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; padding-top: 6px; }
.podium-col { display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--text); min-width: 0; }
.podium-col:hover { text-decoration: none; }
.podium-col:hover .podium-step { filter: brightness(1.06); }
.podium-who { display: grid; justify-items: center; gap: 4px; min-width: 0; max-width: 100%; text-align: center; }
.podium-who .avatar.lg { width: 64px; height: 64px; }
.podium-col.p1 .podium-who .avatar.lg { width: 78px; height: 78px; }
.podium-name { font-weight: 700; direction: ltr; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.podium-sub { font-size: 12.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-value { font-size: 20px; font-weight: 800; }
.podium-col.p1 .podium-value { font-size: 24px; color: var(--t-amber); }
.podium-step { width: 100%; border-radius: 14px 14px 6px 6px; display: grid; place-items: start center; padding-top: 12px; }
.podium-col.p1 .podium-step { height: 120px; background: linear-gradient(180deg, #fde68a, #f59e0b); }
.podium-col.p2 .podium-step { height: 88px; background: linear-gradient(180deg, #e2e8f0, #94a3b8); }
.podium-col.p3 .podium-step { height: 64px; background: linear-gradient(180deg, #fed7aa, #ea580c); }
.podium-step .medal { width: 34px; height: 34px; font-size: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); border: 2px solid rgba(255, 255, 255, .7); }

/* brand ranking numbers */
.medal.sm { width: 22px; height: 22px; font-size: 11.5px; flex: none; }
.bar-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.bar-row { grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) minmax(96px, auto); }
.brand-name { font-weight: 800; }

/* reel card: clickable, rank in the corner */
.reel-card { cursor: pointer; }
.reel-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.reel-top { justify-content: flex-start; padding-inline-start: 50px; min-height: 28px; }
.reel-corner { position: absolute; top: 0; right: 0; min-width: 48px; height: 46px; padding: 0 10px; border-bottom-left-radius: 18px;
  display: grid; place-items: center; font-size: 22px; font-weight: 800; background: rgba(255, 255, 255, .95); color: #1e293b; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.reel-corner.c-m1 { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.reel-corner.c-m2 { background: linear-gradient(135deg, #e2e8f0, #64748b); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.reel-corner.c-m3 { background: linear-gradient(135deg, #fdba74, #c2410c); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }

/* post details window */
.modal { width: min(600px, 100%); }
.pm-who { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.pm-who:hover { text-decoration: none; background: var(--surface-3); }
.pm-who .avatar { width: 44px; height: 44px; }
.pm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pm-stat { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); min-width: 0; }
.pm-v { font-size: 18px; font-weight: 800; white-space: nowrap; }
.pm-k { font-size: 12.5px; color: var(--muted); }
.pm-caption { white-space: pre-wrap; line-height: 1.9; max-height: 260px; overflow: auto; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; color: var(--text-2); }
.pm-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.pm-meta dt { font-size: 12.5px; color: var(--muted); }
.pm-meta dd { margin: 0; font-weight: 600; }
@media (max-width: 600px) { .pm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-meta { grid-template-columns: minmax(0, 1fr); } }

.table .who:has(.brand-name) { min-width: 150px; }
.table .who:has(.brand-name) .avatar { width: 34px; height: 34px; }

/* rank column: every rank sits in the same 26px circle, so medals and plain numbers line up */
.rank { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 700; }
.table td.rank-cell { width: 44px; text-align: center; }
.table td.rank-cell .medal, .table td.rank-cell .rank { vertical-align: middle; }


/* ══ responsive system ════════════════════════════════════════════════════
   ≥1200 full sidebar · 900–1199 icon rail · <900 bottom bar + "more" sheet.
   On phones the wide card rows become swipeable carousels. */
.bottom-nav { display: none; }
.nav-text { min-width: 0; }

/* icon rail */
@media (min-width: 900px) and (max-width: 1199px) {
  :root { --sidebar: 80px; }
  .sidebar { padding: 18px 10px; align-items: center; }
  .brand { padding: 4px 0 18px; justify-content: center; }
  .brand > div:last-child, .nav-label, .nav-text, .brand-sub { display: none; }
  .nav { width: 100%; }
  .nav-group { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 6px; }
  .nav-group:first-child { border-top: 0; }
  .nav a { justify-content: center; padding: 12px 0; }
  .nav a .icon { width: 21px; height: 21px; }
  .sidebar-foot { width: 100%; }
  .sidebar .btn-block { justify-content: center; padding: 0; }
  .admin-chip { justify-content: center; padding: 0; }
  .topbar-inner, .content { padding-inline: 22px; }
}

/* phones & small tablets: bottom bar, sidebar becomes the "more" sheet */
@media (max-width: 899px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .btn.menu-btn { display: none; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; inset: auto 0 0 0; z-index: 60;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px); border-top: 1px solid var(--border); box-shadow: 0 -6px 24px rgba(16, 24, 40, .08);
  }
  .bottom-nav a, .bottom-nav button {
    display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; border: 0; background: transparent;
    color: var(--muted); font-size: 11.5px; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 52px; align-content: center;
  }
  .bottom-nav .icon { width: 22px; height: 22px; }
  .bottom-nav a.active { color: var(--accent); }
  .bottom-nav a.active .icon { background: linear-gradient(135deg, #2563eb, #4f46e5); color: #fff; border-radius: 10px; padding: 4px; width: 32px; height: 28px; box-shadow: 0 4px 12px rgba(37, 99, 235, .35); }
  .sidebar { position: fixed; top: auto; bottom: 0; right: 0; left: 0; width: auto; height: auto; max-height: 82vh; z-index: 70;
    border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform .25s cubic-bezier(.2, .7, .2, 1);
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 40px rgba(0, 0, 0, .35); }
  .sidebar::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .3); margin: 4px auto 12px; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(10, 14, 20, .45); z-index: 65; }
  .sidebar .nav a { padding: 12px 12px; }
  .insights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .insight { padding: 16px; min-height: 0; }
  .in-value { font-size: 26px; }
  .vs-row { grid-template-columns: 64px minmax(0, 1fr) auto; font-size: 12px; gap: 6px; }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* phones: carousels instead of tall stacks */
@media (max-width: 640px) {
  .topbar-inner { padding: 10px 14px; gap: 10px; }
  .page-title { font-size: 17px; }
  .page-sub { font-size: 11.5px; }
  .topbar-actions { width: 100%; flex-wrap: nowrap; }
  .topbar-actions .segmented { flex: 1; }
  .content { padding: 14px 12px 32px; }
  .card { padding: 16px 14px; border-radius: 16px; }
  .card-head { margin-bottom: 14px; }
  .card-head .segmented { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .card-head .segmented::-webkit-scrollbar { display: none; }
  .card-head .actions { width: 100%; }

  .hero { padding: 18px 14px 16px; border-radius: 18px; }
  .hero-top .actions { width: 100%; }
  .hero-stats, .insights, .reel-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px;
    margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .hero-stats::-webkit-scrollbar, .insights::-webkit-scrollbar, .reel-grid::-webkit-scrollbar { display: none; }
  .hero-stats > *, .insights > *, .reel-grid > * { flex: 0 0 78%; scroll-snap-align: start; }
  .insights, .reel-grid { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }
  .reel-grid > * { flex-basis: 74%; }
  .hero-stat .v { font-size: 24px; }
  .hs-body { min-height: 0; }

  /* brand ranking: name + value on one line, the bar underneath */
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; row-gap: 6px; padding: 8px 6px; }
  .bar-label { grid-area: label; }
  .bar-value { grid-area: value; }
  .bar-track { grid-area: track; height: 10px; }

  .podium { gap: 8px; }
  .podium-who .avatar.lg { width: 50px; height: 50px; }
  .podium-col.p1 .podium-who .avatar.lg { width: 60px; height: 60px; }
  .podium-name { font-size: 12px; }
  .podium-value { font-size: 16px; }
  .podium-col.p1 .podium-value { font-size: 19px; }
  .podium-col.p1 .podium-step { height: 92px; }
  .podium-col.p2 .podium-step { height: 68px; }
  .podium-col.p3 .podium-step { height: 50px; }

  .donut, .donut-wrap > svg { width: 180px; height: 180px; }

  /* dialogs become bottom sheets */
  .overlay { place-items: end stretch; padding: 0; }
  .modal { width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); animation: sheet .25s cubic-bezier(.2, .7, .2, 1); }
  .modal .foot .btn { flex: 1; }
  .pm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .btn { height: 42px; }
  .btn-sm { height: 36px; }
  .coverage-banner { font-size: 12.5px; }
}
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* select list lives on the top layer while open */
.select-pop.portal { display: block; position: fixed; z-index: 120; right: auto; top: 0; }

.section-title { display: flex; align-items: center; gap: 10px; margin: 30px 2px 4px; font-size: 18px; font-weight: 800; color: var(--text); }
.section-title .icon { width: 22px; height: 22px; color: var(--accent); }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); margin-inline-start: 8px; }
.section-title + .grid { margin-top: 14px; }

/* cards side by side: same top, same height (the stacked-card margin must not apply in a grid) */
.grid > .card, .grid > .card + .card { margin-top: 0; }
.grid-2 { align-items: stretch; }
.grid-2 > .card { display: flex; flex-direction: column; }
.grid-2 > .card > :last-child { flex: 1; }

/* "view all" */
.view-all { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: var(--surface); }
.view-all:hover { background: var(--accent-soft); text-decoration: none; }
.view-all .icon { width: 16px; height: 16px; }

/* calmer reel thumbnails: a soft tint per card, dark text, coloured play icon */
.reel-cover { color: var(--text); min-height: 128px; border-bottom: 1px solid var(--border); }
.reel-cover.c1 { background: linear-gradient(135deg, var(--t-blue-bg), color-mix(in srgb, var(--t-violet-bg) 70%, var(--surface))); --rc: var(--t-blue); }
.reel-cover.c2 { background: linear-gradient(135deg, var(--t-violet-bg), color-mix(in srgb, var(--t-blue-bg) 70%, var(--surface))); --rc: var(--t-violet); }
.reel-cover.c3 { background: linear-gradient(135deg, var(--t-teal-bg), color-mix(in srgb, var(--t-blue-bg) 70%, var(--surface))); --rc: var(--t-teal); }
.reel-cover.c4 { background: linear-gradient(135deg, var(--t-blue-bg), color-mix(in srgb, var(--t-teal-bg) 70%, var(--surface))); --rc: var(--t-blue); }
.reel-cover.c5 { background: linear-gradient(135deg, var(--t-amber-bg), color-mix(in srgb, var(--t-orange-bg) 70%, var(--surface))); --rc: var(--t-orange); }
.reel-cover.c6 { background: linear-gradient(135deg, var(--t-green-bg), color-mix(in srgb, var(--t-teal-bg) 70%, var(--surface))); --rc: var(--t-green); }
.reel-plays .icon { fill: var(--rc); color: var(--rc); }
.reel-plays strong { color: var(--text); }
.reel-sub { color: var(--muted); opacity: 1; }
.reel-date { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); }
.reel-corner { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(16, 24, 40, .1); }

/* top-10 reels: compact cards, rank circle poking out of the corner */
.reel-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 14px; padding-top: 10px; }
.reel-card { position: relative; overflow: visible; border-radius: 14px; }
.reel-cover { border-radius: 14px 14px 0 0; min-height: 0; padding: 12px 12px 12px; gap: 2px; }
.reel-top { padding-inline-start: 22px; min-height: 22px; }
.reel-date { font-size: 11.5px; padding: 1px 8px; }
.reel-plays { margin-top: 8px; gap: 6px; }
.reel-plays .icon { width: 18px; height: 18px; }
.reel-plays strong { font-size: 21px; }
.reel-sub { font-size: 11.5px; }
.reel-body { padding: 10px 11px 8px; gap: 6px; }
.reel-who .avatar { width: 26px; height: 26px; }
.reel-who .who-name { font-size: 13px; }
.reel-who .who-sub { font-size: 11.5px; }
.reel-cap { -webkit-line-clamp: 1; font-size: 12.5px; }
.reel-stats { gap: 12px; font-size: 12.5px; }
.reel-stats .btn-sm.btn-icon { width: 30px; height: 30px; }
.reel-corner { display: none; }
.reel-badge {
  position: absolute; top: -10px; right: -10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 800; background: var(--surface); color: var(--text);
  border: 2px solid var(--border-strong); box-shadow: 0 4px 10px rgba(16, 24, 40, .14);
}
.reel-badge.b-m1 { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #fff; border-color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.reel-badge.b-m2 { background: linear-gradient(135deg, #e2e8f0, #64748b); color: #fff; border-color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.reel-badge.b-m3 { background: linear-gradient(135deg, #fdba74, #c2410c); color: #fff; border-color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
@media (max-width: 999px) { .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .reel-grid { display: flex; padding-top: 12px; padding-inline-start: 22px; }
  .reel-grid > * { flex-basis: 62%; }
}

.chart .date-tick { stroke: var(--muted); stroke-width: 1.5; }
.chart .date-band { fill: var(--surface-2); opacity: .8; }

/* change pills */
.delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 99px; font-weight: 700; font-size: 13.5px; line-height: 1.6; white-space: nowrap; }
.delta .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.delta.up { background: var(--good-soft); color: var(--good); }
.delta.down { background: var(--bad-soft); color: var(--bad); }
.delta.flat { background: var(--surface-2); color: var(--muted); }
.tile-value .delta { font-size: 22px; padding: 2px 12px 2px 10px; }
.tile-value .delta .icon { width: 20px; height: 20px; }

/* "View all" pinned to the top-left corner of its card */
.card.has-viewall { position: relative; }
.card.has-viewall > .view-all { position: absolute; top: 20px; left: 22px; z-index: 1; }
.card.has-viewall .card-titles { padding-left: 128px; }
.card.has-viewall .card-head > .actions { margin-left: 128px; }
@media (max-width: 640px) {
  .card.has-viewall > .view-all { top: 14px; left: 14px; }
  .card.has-viewall .card-head > .actions { margin-left: 0; }
}

.vs-row { grid-template-columns: 76px minmax(0, 1fr) auto; }
.vs-row > span:first-child { overflow: hidden; text-overflow: ellipsis; }

/* brand: logo and name on one line (centred together), tagline below; the whole block goes home */
.brand { display: grid; gap: 6px; padding: 4px 8px 20px; text-decoration: none; color: inherit; border-radius: 12px; }
.brand:hover { text-decoration: none; }
.brand:hover .brand-title { color: #fff; opacity: .9; }
.brand-row { display: flex; align-items: center; gap: 11px; }
.brand-title { line-height: 1; }
.brand-sub { display: block; line-height: 1.6; padding-inline-start: 2px; }
@media (min-width: 900px) and (max-width: 1199px) {
  .brand { justify-items: center; }
  .brand-row .brand-title { display: none; }
}

/* Yekan Bakh digits sit 0.085em above the middle of their line box (measured from the font):
   pad the top by twice that so numbers are optically centred in every circle. */
.medal, .rank, .reel-badge, .bar-rank, .reel-rank, .reel-corner, .podium-step .medal {
  line-height: 1; padding-top: .17em; box-sizing: border-box;
}

/* ── readability on the coloured cards ── */
/* deeper gradients: white text keeps ≥4.5:1 contrast across the whole card */
.hero { background: linear-gradient(120deg, #0c4a6e 0%, #1e40af 34%, #3730a3 66%, #5b21b6 100%); }
.insight.g-green { background: linear-gradient(135deg, #064e3b 0%, #065f46 45%, #047857 100%); }
.insight.g-violet { background: linear-gradient(135deg, #3b0764 0%, #5b21b6 50%, #6d28d9 100%); }
.insight.g-pink { background: linear-gradient(135deg, #831843 0%, #9d174d 50%, #be185d 100%); }
.hero, .insight { text-shadow: 0 1px 1px rgba(0, 0, 0, .18); }
.hero-sub, .hero-stat .k, .hero-stat .s, .in-head, .in-note, .vs-row > span:first-child { color: rgba(255, 255, 255, .95); }
.hero-sub { font-size: 14px; }
.hero-stat .k, .in-head { font-size: 14px; font-weight: 700; }
.hero-stat .s, .in-note { font-size: 13.5px; }
.hero-stat { background: rgba(0, 0, 0, .16); border-color: rgba(255, 255, 255, .18); }
.hero-stat .v, .in-value { letter-spacing: .2px; }
.hero-pill { background: rgba(0, 0, 0, .2); font-size: 13.5px; }
.vs-row { font-size: 13.5px; }
.vs-row strong { font-size: 14px; }
.vs-track { background: rgba(255, 255, 255, .22); height: 10px; }
.insight .wm { opacity: .08; }
.hs-chip { text-shadow: none; }
.hero .min-tag { background: rgba(0, 0, 0, .22); text-shadow: none; }

/* every hero number starts at the same height, right under its label */
.hs-body { align-items: flex-start; }
.hero-stat { align-content: start; }
/* follower change: the number itself is green (growth) or red (decline) */
.hs-change { display: inline-flex; align-items: center; gap: 6px; }
.hs-change .icon { width: 24px; height: 24px; stroke-width: 2.8; }
.hs-change.up { color: #6ee7b7; }
.hs-change.down { color: #fca5a5; }

/* reel card head: plays up top (right), date with calendar icon in the left corner */
.reel-cover { align-content: start; gap: 2px; padding-top: 14px; }
.reel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-inline-start: 16px; }
.reel-head .reel-plays { margin-top: 0; }
.reel-date { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-top: 2px; }
.reel-date .icon { width: 13px; height: 13px; color: var(--muted); }

.reel-head .reel-plays { gap: 5px; min-width: 0; }
.reel-head .reel-plays strong { font-size: 19px; white-space: nowrap; }
.reel-head .reel-plays .icon { width: 16px; height: 16px; }
.reel-head { padding-inline-start: 12px; }
.reel-date { font-size: 11px; padding: 1px 7px; }
.reel-date .icon { width: 12px; height: 12px; }

/* reel card head: date alone in the top-left corner, plays right under it (no overlap at any width) */
.reel-head { flex-direction: column; align-items: stretch; gap: 4px; padding-inline-start: 0; }
.reel-head .reel-date { order: -1; align-self: flex-end; margin: 0; }
.reel-head .reel-plays { margin-top: 2px; }
.reel-head .reel-plays strong { font-size: 20px; }
.reel-cover { padding: 10px 12px 10px; }

/* posts list: icons on every value, page with its picture, brand named in a chip */
.th-ic { display: inline-flex; align-items: center; gap: 5px; }
.th-ic .icon { width: 15px; height: 15px; }
.post-date { display: inline-flex; align-items: center; gap: 4px; }
.post-date .icon, .post-meta .chip .icon { width: 13px; height: 13px; }
.post-page { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 190px; }
.post-page:hover { text-decoration: none; }
.post-page:hover .who-name { color: var(--accent); }
.post-page .avatar { width: 34px; height: 34px; }
.post-page .who-text { gap: 3px; }
.brand-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); font-weight: 600; width: fit-content; }
.brand-chip .swatch { width: 9px; height: 9px; border-radius: 50%; }
.brand-chip.is-kanoon { color: var(--accent-text); background: var(--accent-soft); padding: 1px 9px 1px 8px; border-radius: 99px; }
.metric { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.metric .icon { width: 16px; height: 16px; }
.metric.m-plays .icon { color: var(--t-violet); fill: color-mix(in srgb, var(--t-violet) 25%, transparent); }
.metric.m-likes .icon { color: #e11d48; }
.metric.m-comments .icon { color: var(--t-blue); }
.table .post-cell .post-cap { color: var(--text-2); }
@media (max-width: 640px) { .post-page { min-width: 0; } }

.metric.none { color: var(--muted); font-weight: 600; cursor: help; }
.metric.none .icon { opacity: .5; }

/* "View all": same 40px height as the segmented control next to it, with a clear gap */
.card.has-viewall > .view-all { height: 40px; padding: 0 14px; border-radius: 11px; font-size: 14px; }
.card.has-viewall .card-head > .actions { margin-left: 150px; }
.card.has-viewall .card-titles { padding-left: 150px; }
@media (max-width: 640px) { .card.has-viewall > .view-all { height: 36px; } .card.has-viewall .card-head > .actions { margin-left: 0; } .card.has-viewall .card-titles { padding-left: 120px; } }

/* vertical-axis title */
.chart .axis-title { fill: var(--text-2); font-size: 12.5px; font-weight: 700; }

/* bigger rank circles on the top-reels cards */
.reel-badge { width: 44px; height: 44px; font-size: 19px; top: -13px; right: -13px; border-width: 3px; }
.reel-top, .reel-head { padding-inline-start: 22px; }

/* pictures in pickers and chips */
.opt-main { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.opt-main .avatar, .opt-main .story { flex: none; }
.opt-main .avatar { width: 26px; height: 26px; font-size: 11px; }
.pick-chip .avatar { width: 24px; height: 24px; font-size: 10px; }
.pick-chip .story { padding: 1.5px; }

/* (?) help icons */
.help { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--muted); cursor: help; flex: none; vertical-align: middle; margin-inline-start: 4px; }
.help .icon { width: 16px; height: 16px; }
.help:hover, .help:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; }
.insight .help, .hero .help { color: rgba(255, 255, 255, .85); }
.insight .help:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.chart-tip .tip-text { max-width: 300px; white-space: normal; line-height: 1.8; font-size: 13px; }
.card-title .help { margin-inline-start: 2px; }

/* post extras */
.pm-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric.m-reshares .icon { color: var(--t-teal); }
.pm-extras { display: grid; gap: 10px; }
.pm-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.pm-facts dt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.pm-facts dt .icon { width: 14px; height: 14px; }
.pm-facts dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-chips .chip .icon { width: 13px; height: 13px; }
@media (max-width: 640px) { .pm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-facts { grid-template-columns: minmax(0, 1fr); } }

.pm-stat { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 6px; }
.pm-stat .icon-bubble { width: 30px; height: 30px; }
.pm-v { font-size: 17px; }
.pm-k { display: inline-flex; align-items: center; gap: 2px; }
.pm-sub { font-size: 11px; color: var(--muted); }

/* tooltips (help and chart) above everything, including dialogs (80) and dropdowns (120) */
.chart-tip { z-index: 200; }

/* post covers */
.pm-cover { position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--surface-2); max-height: 360px; }
.pm-cover img { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.pm-cover.is-reel img { object-fit: contain; background: #000; }
.pm-play { position: absolute; inset: 0; display: grid; place-items: center; }
.pm-play .icon { width: 56px; height: 56px; color: #fff; fill: rgba(255, 255, 255, .9); filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45)); }
.reel-cover.has-img { background: linear-gradient(180deg, rgba(8, 12, 24, .15) 0%, rgba(8, 12, 24, .72) 100%), var(--img) center / cover no-repeat; color: #fff; min-height: 150px; }
.reel-cover.has-img .reel-plays strong, .reel-cover.has-img .reel-sub { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.reel-cover.has-img .reel-plays .icon { color: #fff; fill: #fff; }
.reel-cover.has-img .reel-date { background: rgba(0, 0, 0, .4); color: #fff; border-color: transparent; }
.reel-cover.has-img .reel-date .icon { color: #fff; }
.reel-cover.has-img .reel-head { margin-top: auto; }
.post-row { display: flex; align-items: flex-start; gap: 12px; min-width: 300px; }
.post-thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-2); }
.post-thumb.empty { display: grid; place-items: center; color: var(--muted); }
.post-thumb.empty .icon { width: 20px; height: 20px; }
@media (max-width: 640px) { .post-row { min-width: 0; } }

/* ── Amargram: sign-in screen, user box, company switcher ─────────────────── */
.auth { display: none; }
body.signed-out .shell, body.signed-out .bottom-nav { display: none; }
body.signed-out .auth { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; }
.auth-card { position: relative; width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 30px 28px 26px; display: grid; gap: 18px; }
.auth-card > .btn-icon { position: absolute; top: 14px; left: 14px; }
.auth-brand { display: flex; align-items: center; gap: 14px; }
.auth-brand .brand-mark { width: 52px; height: 52px; border-radius: 15px; flex: none; display: grid; place-items: center; }
.auth-brand .brand-mark svg { width: 32px; height: 32px; }
.auth-brand h1 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; }
.auth-brand p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.auth-form { display: grid; gap: 14px; }
.auth-form .btn-block { height: 44px; font-size: 15px; margin-top: 4px; justify-content: center; }
.auth-error { color: var(--bad); font-size: 13.5px; min-height: 1.2em; }
.auth-error:empty { display: none; }

.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #fff; min-width: 0; }
.user-chip .icon { color: #6ee7b7; flex: none; }
.user-chip .nav-text { display: grid; line-height: 1.35; min-width: 0; }
.user-chip strong { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip small { font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.foot-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.foot-actions .btn { justify-content: center; }
.tenant-switch { display: grid; gap: 6px; }
.tenant-switch .select-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; }
.tenant-switch .select-btn .icon { color: rgba(255, 255, 255, .7); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.field.wide { grid-column: 1 / -1; }
.field small { font-size: 12px; line-height: 1.6; }
@media (min-width: 900px) and (max-width: 1199px) {
  .user-chip { justify-content: center; padding: 8px 0; }
  .foot-actions { grid-template-columns: 1fr; }
  .tenant-switch { display: none; }
}
/* post modal: how the numbers moved between collections */
.pm-trend { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; }
.pm-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pm-trend-head h4 { margin: 0; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.pm-trend-head h4 .icon { color: var(--accent); }
.pm-trend-head .segmented button { padding-inline: 10px; font-size: 12.5px; }
.pm-trend-lead { margin: 0; font-size: 13.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pm-snaps { display: grid; gap: 2px; max-height: 220px; overflow: auto; }
.pm-snap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "when val delta" "when span span"; align-items: center; gap: 2px 12px; padding: 8px 4px; border-top: 1px solid var(--border); }
.pm-snap:first-child { border-top: 0; }
.pm-snap .when { grid-area: when; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.pm-snap .when .icon { width: 14px; height: 14px; color: var(--muted); }
.pm-snap strong { grid-area: val; font-size: 14px; }
.pm-snap .delta, .pm-snap > .muted:nth-child(3) { grid-area: delta; justify-self: end; }
.pm-snap > .muted:last-child { grid-area: span; justify-self: end; font-size: 11.5px; }
/* modal header: title on the right, close button in the top-left corner, pinned while the body scrolls */
.modal { padding-top: 0; }
.modal-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 -24px; padding: 18px 24px 12px; background: var(--surface); }
.modal-titles { min-width: 0; padding-top: 6px; }
.modal-titles h3 { margin: 0; }
.modal-titles .card-sub { margin: 4px 0 0; }
.modal-x { flex: none; margin-inline-start: auto; }
.modal .body { margin-top: 4px; }@media (max-width: 640px) { .modal-head { margin: 0 -16px; padding: 14px 16px 10px; border-radius: 22px 22px 0 0; } }

/* the page scrollbar keeps its place, so switching pages never shifts the layout sideways */
html { scrollbar-gutter: stable; }

/* modal: header and buttons stay put, only the middle scrolls; the scrollbar never reaches the rounded corners */
.modal { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.modal-head { position: static; flex: none; }
.modal .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -24px; padding: 4px 24px 18px;
  scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.modal .body::-webkit-scrollbar { width: 8px; }
.modal .body::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid var(--surface); }
.modal .body::-webkit-scrollbar-track { background: transparent; }
.modal .foot { flex: none; margin: 0 -24px; padding: 14px 24px 22px; border-top: 1px solid var(--border); }
.modal .foot:empty { display: none; }
@media (max-width: 640px) {
  .modal { padding-bottom: 0; }
  .modal .body { margin: 0 -16px; padding: 4px 16px 16px; }
  .modal .foot { margin: 0 -16px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
}/* rows keep their own height inside the scrolling middle (otherwise the cover and caption get squeezed) */
.modal .body { grid-auto-rows: max-content; align-content: start; }

/* branch engagement: post cards, comments in the table */
.eng-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.eng-post { display: grid; grid-template-rows: auto 1fr; text-align: right; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.eng-post:hover { border-color: var(--accent); transform: translateY(-1px); }
.eng-post.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.eng-post > img, .eng-post > .eng-noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.eng-post > .eng-noimg .icon { width: 28px; height: 28px; }
.eng-all > .eng-noimg { background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); color: var(--accent); }
.eng-post-body { padding: 10px 12px 12px; display: grid; gap: 6px; align-content: start; }
.eng-date { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.eng-date .icon { width: 13px; height: 13px; }
.eng-counts { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.eng-counts span { display: inline-flex; align-items: center; gap: 4px; }
.eng-counts .icon { width: 15px; height: 15px; }
.eng-counts span:first-child .icon { color: var(--t-pink); }
.eng-counts span:nth-child(2) .icon { color: var(--t-blue); }
.eng-counts .muted { font-weight: 500; font-size: 12px; }
.eng-bar, .eng-mini { display: block; height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.eng-bar span, .eng-mini span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--t-green), var(--accent)); margin-inline-start: auto; }
.eng-cov { font-size: 11.5px; color: var(--muted); }
.eng-ratio { display: inline-grid; gap: 4px; min-width: 64px; }
.eng-mini { width: 64px; height: 5px; }
.eng-yes { display: inline-flex; align-items: center; gap: 5px; color: var(--t-pink); font-weight: 600; }
.eng-yes .icon { width: 15px; height: 15px; fill: currentColor; }
.eng-no { color: var(--muted); }
.table td.eng-cm-cell { white-space: normal; min-width: 240px; max-width: 420px; }
.eng-cms { display: grid; gap: 6px; }
.eng-cm { display: grid; gap: 2px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); }
.eng-cm-text { line-height: 1.7; word-break: break-word; }
@media (max-width: 640px) { .eng-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .table td.eng-cm-cell { min-width: 0; max-width: none; } }.eng-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 168px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.eng-post { scroll-snap-align: start; }
@media (max-width: 640px) { .eng-strip { grid-template-columns: none; grid-auto-columns: 150px; } }
.eng-cm-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eng-cm-meta .chip { font-size: 11.5px; padding: 0 8px; }
.eng-cm-meta .chip .icon { width: 12px; height: 12px; }

/* export buttons in the page header */
.export-group { display: inline-flex; gap: 6px; }
.export-btn { gap: 6px; }
.export-btn .icon { width: 16px; height: 16px; }
.export-btn:first-child .icon { color: #16a34a; }
.export-btn:last-child .icon { color: #dc2626; }
.export-btn[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 640px) { .export-btn span { display: none; } .export-btn { padding-inline: 10px; } }
/* export menu: kinds of report, each with Excel and PDF */
.export-menu-btn { gap: 6px; }
.export-menu-btn .icon:first-child { color: var(--accent); }
.export-menu-btn[aria-expanded="true"] { border-color: var(--accent); }
.export-pop { position: fixed; z-index: 150; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; display: grid; gap: 4px; }
.export-pop-head { font-size: 12px; color: var(--muted); padding: 4px 8px 2px; }
.export-check { display: flex; align-items: center; gap: 8px; margin: 6px 4px 4px; padding: 8px 10px; border-radius: 10px;
  background: var(--surface-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.export-check input { width: 16px; height: 16px; accent-color: currentColor; cursor: pointer; flex: none; }
.export-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 10px; }
.export-item:hover { background: var(--surface-2); }
.export-item-text { display: grid; gap: 2px; min-width: 0; }
.export-item-text strong { font-size: 14px; }
.export-item-text span { font-size: 12px; color: var(--muted); line-height: 1.6; }
.export-item-btns { display: flex; gap: 6px; flex: none; }
@media (max-width: 640px) { .export-menu-btn span { display: none; } .export-item { flex-direction: column; align-items: stretch; } .export-item-btns .export-btn span { display: inline; } .export-item-btns .export-btn { flex: 1; justify-content: center; } }.unit-presets { margin-top: 6px; }
.chip-btn { border: 1px solid var(--border); cursor: pointer; font: inherit; font-size: 12.5px; }
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.eng-post { position: relative; }
.eng-check { position: absolute; top: 8px; left: 8px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .9); border: 2px solid var(--border); color: #fff; }
.eng-post.on .eng-check { background: var(--accent); border-color: var(--accent); }
.eng-check .icon { width: 14px; height: 14px; stroke-width: 3; }
.eng-all .eng-check { display: none; }
.eng-pick { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.eng-pick > .icon { width: 16px; height: 16px; color: var(--accent); flex: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
/* engagement v3: preset picker, chosen thumbnails, one column per post */
.eng-picker { display: grid; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.eng-picker-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eng-picker-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.eng-picker-label .icon { width: 17px; height: 17px; color: var(--t-amber); }
.eng-chosen { display: flex; gap: 8px; flex-wrap: wrap; }
.eng-chosen-item { display: grid; justify-items: center; gap: 4px; font-size: 11.5px; color: var(--text-2); text-decoration: none; }
.eng-chosen-item:hover .eng-thumb { outline: 2px solid var(--accent); }
.eng-thumb { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); }
.eng-thumb.sm { width: 34px; height: 34px; border-radius: 8px; }
.eng-thumb .icon { width: 18px; height: 18px; }
.eng-th { display: inline-grid; justify-items: center; gap: 3px; font-size: 11px; }
.table td.eng-cell, .table th:has(.eng-th) { text-align: center; }
.eng-marks { display: inline-flex; align-items: center; gap: 6px; }
.eng-heart .icon { width: 18px; height: 18px; color: #e11d48; fill: #e11d48; }
.eng-bubble { display: inline-flex; align-items: center; gap: 2px; color: var(--t-blue); font-weight: 700; font-size: 12px; }
.eng-bubble .icon { width: 17px; height: 17px; fill: var(--t-blue-bg); }
.eng-none { color: var(--border); font-weight: 700; }
.eng-ratio { display: inline-grid; gap: 4px; justify-items: center; }
.eng-ratio-num { white-space: nowrap; }
.eng-cm-btn { gap: 5px; }
.eng-cm-btn .icon { width: 15px; height: 15px; color: var(--t-blue); }
.eng-choose { display: grid; gap: 4px; }
.eng-choose-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; cursor: pointer; }
.eng-choose-row:hover { background: var(--surface-2); }
.eng-choose-text { display: grid; gap: 2px; }
.eng-choose-text strong { display: inline-flex; align-items: center; gap: 8px; }.table td.eng-cell { padding-inline: 6px; }
.table th:has(.eng-th) { padding-inline: 6px; }

/* شناسه و نام رسمی نمایندگی، زیر آی‌دی پیج */
.area-tag { font-size: 12.5px; color: var(--text-2); display: inline-flex; align-items: baseline; gap: 3px; }
.area-tag b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand); }
/* a unit: «code - name» on top, its accounts under it */
.unit-name b { color: var(--brand); font-variant-numeric: tabular-nums; }
.unit-accs { display: flex; flex-wrap: wrap; gap: 4px 8px; white-space: normal; }
.unit-acc { display: inline-flex; align-items: center; gap: 3px; }
.unit-acc.r-personal { color: var(--text-2); }
.unit-acc .icon, .unit-acc svg { width: 12px; height: 12px; }
.unit-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.unit-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 8px; border-radius: 999px;
  background: var(--surface-2); font-size: 12.5px; }
.unit-chip.r-main { font-weight: 700; }
.unit-chip.r-personal { border: 1px dashed var(--muted); background: transparent; }
.unit-chip a { color: inherit; text-decoration: none; }
.unit-chip svg { width: 13px; height: 13px; flex: none; }
.unit-chip .x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; display: inline-flex; }
.unit-chip .badge { font-size: 11px; padding: 1px 6px; }
.unit-shared { color: var(--brand); display: inline-flex; }
.eng-marks.via-personal { outline: 1.5px dashed currentColor; outline-offset: 3px; border-radius: 8px; }

/* «۸۴۴ پست + ۳۵۶ ریل» — دو نوع جدا، نه یکی زیرمجموعه‌ی دیگری */
.pr-split { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pr-split small { font-size: .62em; font-weight: 500; color: var(--muted); margin-inline-start: 2px; }
.pr-plus { color: var(--muted); font-weight: 400; }

/* a branch shown anywhere: «code - name» first, its handle under it */
.who-handle { font-size: 12px; text-align: right; unicode-bidi: plaintext; }
.unit-code { color: var(--brand); font-variant-numeric: tabular-nums; }
.bar-name { display: inline-flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bar-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-name small { color: var(--muted); font-size: 11px; text-align: right; unicode-bidi: plaintext; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* page type / brand beside a page's name */
.who-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.tag { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 99px; font-size: 11px; line-height: 18px;
  background: var(--surface-2); color: var(--text-2); white-space: nowrap; font-weight: 500; }
/* a unit's Heads under its name on the admin page */
.unit-cell { display: grid; gap: 3px; justify-items: start; }
.unit-head { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); }
.unit-head svg { width: 12px; height: 12px; }
.unit-head .x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; display: inline-flex; }
.unit-head-add { padding: 0 6px; min-height: 22px; font-size: 12px; }

/* ══ manager lists: a company's own pages and its other brands, one row each with a delete button ══ */
.mgr-grid > div { min-width: 0; display: flex; }
.mgr-grid > div > .card { flex: 1; }
.mgr-search { max-width: none; margin-bottom: 10px; }
.mgr-list { display: grid; align-content: start; max-height: 460px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
.mgr-grid > div:last-child .mgr-list { max-height: none; }  /* brands are few: no inner scroll */
.mgr-row { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--border); min-width: 0; }
.mgr-row:last-child { border-bottom: 0; }
.mgr-row > .who { flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.mgr-row > .who:hover .who-name { color: var(--accent); }
.mgr-val { flex: none; font-size: 13px; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.mgr-val small { color: var(--muted); font-weight: 500; }
.mgr-x { color: var(--muted); flex: none; }
.mgr-x:hover { color: var(--bad); background: var(--bad-soft); }
.mgr-brand { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.mgr-brand:hover { text-decoration: none; color: var(--accent); }
.mgr-brand .swatch { width: 12px; height: 12px; border-radius: 4px; }

/* a branch's Persian name reads right-to-left; a handle stays left-to-right */
.who-name.unit-name { direction: rtl; }
.who-name { white-space: nowrap; }
.profile h2 { direction: rtl; unicode-bidi: plaintext; text-align: right; }

/* phone-only controls */
.m-sort, .sheet-theme { display: none; }
@media (max-width: 899px) { .sheet-theme { display: inline-flex; width: 100%; justify-content: flex-start; } }

/* ══ phones (≤640px): a layout of its own, not the desktop squeezed ══════════ */
@media (max-width: 640px) {
  .main { overflow-x: clip; }
  .content { padding: 8px 12px 28px; }

  /* header: title (and export) on one line, the period under it; scrolls away with the page */
  .topbar { position: relative; backdrop-filter: none; background: transparent; border-bottom: 0; }
  .topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head extra" "period period"; gap: 10px; padding: 14px 12px 6px; }
  .page-head { grid-area: head; min-width: 0; }
  .page-title { font-size: 19px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
  .page-sub { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { display: contents; }
  .head-extra { grid-area: extra; display: flex; gap: 6px; align-self: start; }
  .head-extra .btn { height: 38px; padding: 0 10px; }
  .back-btn { width: 38px; padding: 0 !important; }
  .back-btn span { display: none; }
  .head-theme { display: none; }
  .topbar-actions > .segmented { grid-area: period; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: none; }
  .topbar-actions > .segmented button { justify-content: center; height: 34px; padding: 0 6px; }

  /* cards */
  .card { padding: 14px 12px; border-radius: 16px; }
  .card + .card, .card + .grid, .grid + .card, .grid + .grid { margin-top: 12px; }
  .grid { gap: 12px; }
  .card-head { gap: 10px; margin-bottom: 12px; }
  .card-title { font-size: 15.5px; gap: 8px; }
  .card-title .icon-bubble { width: 28px; height: 28px; border-radius: 9px; }
  .card-title .icon-bubble .icon { width: 15px; height: 15px; }
  .card-sub { font-size: 12px; line-height: 1.7; }
  .card-head > .actions { width: 100%; margin-left: 0 !important; }
  .card-head .segmented { width: 100%; display: flex; flex-wrap: wrap; overflow: visible; }
  .card-head .segmented button { flex: 1 1 auto; justify-content: center; text-align: center; white-space: normal; line-height: 1.35; height: auto; min-height: 34px; padding: 4px 8px; font-size: 12.5px; }
  /* «view all» leaves the title alone and becomes the card's last row */
  .card.has-viewall { display: flex; flex-direction: column; }
  .card.has-viewall > .view-all { position: static; order: 99; width: 100%; height: 40px; margin-top: 12px; justify-content: center; }
  .card.has-viewall .card-titles { padding-left: 0; }
  .section-title { margin: 22px 2px 2px; font-size: 16px; }
  .lead { font-size: 13.5px; }
  .note { font-size: 12.5px; padding: 10px 12px; }

  /* hero: four numbers in a 2×2 grid, nothing hidden off-screen */
  .hero { padding: 16px 14px; border-radius: 18px; }
  .hero-top { gap: 12px; }
  .hero-top .story .avatar, .hero-top > .avatar { width: 46px; height: 46px; }
  .hero-title { font-size: 16.5px; line-height: 1.5; }
  .hero-sub { font-size: 12.5px; }
  .hero-top .actions { width: 100%; gap: 6px; }
  .hero-pill { font-size: 12px; padding: 2px 10px; }
  .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .hero-stats > * { flex: none; }
  .hero-stat { padding: 11px 11px 12px; gap: 6px; border-radius: 13px; }
  .hs-head { gap: 6px; align-items: flex-start; }
  .hs-icon { width: 24px; height: 24px; border-radius: 7px; }
  .hs-icon .icon { width: 13px; height: 13px; }
  .hero-stat .k { font-size: 12px; line-height: 1.55; }
  .hero-stat .v { font-size: 20px; flex-wrap: wrap; white-space: normal; }
  .hero-stat .v .pr-split { font-size: 17px; white-space: normal; flex-wrap: wrap; row-gap: 0; }
  .hero-stat .s { font-size: 11.5px; line-height: 1.6; }
  .hs-body { flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; }
  .ring-wrap { display: none; }
  .hs-body .spark-wrap { height: 28px; }
  .hs-change { gap: 4px; }
  .hs-change .icon { width: 17px; height: 17px; }
  .hs-chip { font-size: 11.5px; padding: 1px 8px; }

  /* insight cards: stacked, compact */
  .insights { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .insights > * { flex: none; }
  .insight { padding: 14px 16px; min-height: 0; border-radius: 16px; gap: 2px; }
  .in-head { font-size: 13px; }
  .in-icon { width: 26px; height: 26px; border-radius: 8px; }
  .in-icon .icon { width: 14px; height: 14px; }
  .in-value { font-size: 24px; }
  .insight .wm .icon { width: 84px; height: 84px; }

  /* tiles: two per row, short labels, an odd last tile takes the whole row */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile { padding: 12px; border-radius: 14px; }
  .tile-label { font-size: 12px; line-height: 1.5; gap: 6px; align-items: flex-start; }
  .tile-label .icon-bubble { width: 26px; height: 26px; border-radius: 8px; }
  .tile-label .icon-bubble .icon { width: 14px; height: 14px; }
  .tile-value { font-size: 21px; margin-top: 6px; }
  .tile-value .delta { font-size: 15px; padding: 1px 9px 1px 7px; }
  .tile-value .delta .icon { width: 15px; height: 15px; }
  .tile-sub { font-size: 11.5px; line-height: 1.6; }

  /* lists: the name takes the room, the numbers stack on the left */
  .list-row { gap: 10px; padding: 10px 2px; }
  .list-row .who { flex: 1; min-width: 0; }
  .list-val { gap: 2px; flex-direction: column; align-items: flex-end; font-size: 12.5px; }
  .who { gap: 10px; }
  .who-sub, .who-handle { font-size: 11.5px; }

  /* tables become compact cards: name on top, the numbers in a three-column grid under it */
  .table-wrap { margin: 0; padding: 0; overflow: visible; }
  .m-sort { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); }
  .m-sort > .icon { width: 16px; height: 16px; flex: none; }
  .m-sort-pick { flex: 1; min-width: 0; height: 36px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 0 10px; font: inherit; font-size: 13.5px; }
  table.table, .table tbody { display: grid; gap: 8px; width: 100%; }
  .table thead { display: none; }
  .table tbody tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: auto; padding: 12px; margin: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
  .table tbody tr.clickable:active { background: var(--surface-2); }
  .table td, .table td.n { display: grid; align-content: start; justify-items: start; gap: 1px; width: auto; min-width: 0; padding: 0; border: 0; text-align: right; white-space: normal; font-size: 13.5px; font-weight: 600; }
  .table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.5; text-align: right; }
  .table td[data-label=""]::before { display: none; }
  .table td.first { grid-column: 1 / -1; display: flex; align-items: center; padding: 0 0 10px; margin: 0; border-bottom: 1px solid var(--border); position: static; background: transparent; }
  .table td.rank-cell, .table td.m-hide { display: none; }
  .table td.m-wide, .table td.wrap, .table td.eng-cm-cell { grid-column: 1 / -1; max-width: none; }
  /* a row's buttons (open, edit, delete) sit in its top-left corner */
  .table td[data-label=""]:last-child:not(.first) { position: absolute; top: 8px; left: 8px; display: flex; gap: 2px; }
  .table tbody tr:has(> td[data-label=""]:last-child:not(.first)) > td.first { padding-left: 76px; }
  .table .who, .table .who:has(.brand-name) { min-width: 0; }
  .table .delta { font-size: 12.5px; padding: 1px 8px 1px 6px; }
  .post-cell, .post-row, .post-page { min-width: 0; max-width: none; }
  /* a post: the post and its page on their own rows, its four numbers side by side */
  .table tbody tr:has(> td.post-col) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .table td.post-col { padding-left: 34px; }
  .table td.post-col + td.m-wide { padding: 8px 0; border-block: 1px solid var(--border); }
  .post-thumb { width: 56px; height: 56px; }

  /* profile of one page: centred */
  .profile { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .profile > div { width: 100%; }
  .profile h2 { text-align: center; font-size: 19px; }
  .profile .muted { text-align: center !important; }
  .profile .meta { justify-content: center; }
  .profile > .btn { width: 100%; }

  /* company page lists */
  .mgr-list { max-height: 380px; }
  .mgr-val small { display: none; }
}