@import url("./theme.css");

@font-face { font-family: "Peyda"; src: url("fonts/PeydaWeb-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("fonts/peydaWeb-extralight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("fonts/peydaWeb-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("fonts/PeydaWeb-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("fonts/PeydaWeb-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("fonts/PeydaWeb-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("fonts/PeydaWeb-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("fonts/PeydaWeb-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Peyda"; src: url("fonts/PeydaWeb-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
/* The app's own font (OFL, fonts/Vazirmatn-OFL.txt), so slide previews read as on the phone. */
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/*
 * Design system: FarsiUI (farsiui.ir, "nova" style) adapted to YamYam's brand.
 * Flat surfaces with a 1px hairline, 14px cards, 8px controls, pill badges,
 * 12-14px type. Colours come from theme.css (generated from the app theme).
 */
:root {
  color-scheme: dark;
  --background: var(--bg);
  --card: #111827;
  --card-raised: #161F33;
  --sidebar: #0D1323;
  --muted-surface: #1A2338;
  --hover: rgba(175, 198, 255, .06);
  --border: rgba(175, 198, 255, .1);
  --input: rgba(175, 198, 255, .16);
  --ring: rgba(95, 130, 222, .45);
  --primary: var(--blue-bright);
  --primary-hover: #3D67E0;
  --muted-foreground: #9AA4BC;
  --radius: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --shadow: none;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: "Peyda", "SF Arabic", Vazirmatn, "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--background); color: var(--text); font-size: 14px; line-height: 1.6; overflow-x: hidden; overflow-x: clip; }
body.auth-pending .app-shell { visibility: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
#i-grid path { fill: currentColor; stroke: none; }
.ambient { display: none; }
code { font-family: var(--mono); }
::selection { background: color-mix(in srgb, var(--blue-bright) 45%, transparent); }

/* ---------- Login ---------- */
.login-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: var(--background); }
.login-gate[hidden] { display: none; }
.login-card { width: min(100%, 380px); padding: 28px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.login-card h1 { margin: 12px 0 4px; font-size: 22px; line-height: 1.5; }
.login-card > p { margin: 0 0 22px; color: var(--muted-foreground); font-size: 13px; }
.login-card .form-field { margin-bottom: 14px; }
.login-card .login-error { margin: 4px 0 14px; color: var(--red); font-size: 13px; }
.login-mark { width: 56px; height: 56px; margin-bottom: 10px; }

/* ---------- Shell: sidebar ---------- */
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 0 0 auto; z-index: 30; width: 256px; padding: 12px; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--sidebar); overflow-y: auto; }
.brand { padding: 6px 8px 10px; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 36px; height: 36px; display: block; flex: 0 0 auto; object-fit: contain; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; line-height: 1.4; }
.brand small { color: var(--muted-foreground); font-size: 12px; }
.main-nav { margin-top: 6px; display: grid; gap: 2px; }
.nav-label { height: 32px; margin: 8px 0 0; padding: 0 8px; display: flex; align-items: center; color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.nav-item { width: 100%; height: 36px; padding: 0 8px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--tint); cursor: pointer; text-align: right; transition: background .15s, color .15s; }
.nav-item svg { width: 17px; height: 17px; color: var(--muted-foreground); }
.nav-item:hover { background: var(--hover); }
.nav-item.active { background: var(--muted-surface); color: var(--text); font-weight: 600; }
.nav-item.active svg { color: var(--blue-soft); }
.nav-item span { flex: 1; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.nav-item em { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--muted-surface); color: var(--blue-soft); font-size: 11px; font-style: normal; font-weight: 600; }
.nav-item.active em { background: var(--blue-bright); color: #fff; }
.sidebar-status { margin-top: auto; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.sidebar-status strong, .sidebar-status small { display: block; }
.sidebar-status strong { font-size: 12px; }
.sidebar-status small { color: var(--muted-foreground); font-size: 11px; }
.live-pulse, .updated-at i, .api-status i, .health i, .status-badge i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(102,217,178,.16); }
.admin-profile { margin-top: 8px; padding: 8px; display: flex; align-items: center; gap: 10px; border-radius: var(--radius-md); }
.admin-profile:hover { background: var(--hover); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--muted-surface); color: var(--tint); font-size: 12px; font-weight: 700; }
.admin-profile > div:nth-child(2) { min-width: 0; flex: 1; }
.admin-profile strong, .admin-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-profile strong { font-size: 13px; }
.admin-profile small { color: var(--muted-foreground); font-size: 11px; }

/* ---------- Shell: header and page ---------- */
.main-content { min-height: 100vh; margin-right: 256px; }
.topbar { position: sticky; top: 0; z-index: 10; height: 56px; padding: 0 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--background) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar-title { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.topbar-title strong { order: 1; font-size: 15px; white-space: nowrap; }
.topbar-title .eyebrow { order: 2; padding-right: 10px; border-right: 1px solid var(--border); white-space: nowrap; }
.eyebrow { color: var(--muted-foreground); font-size: 12px; }
.topbar-actions { margin-right: auto; display: flex; align-items: center; gap: 8px; }
.top-search { position: relative; width: min(320px, 30vw); height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground); transition: border-color .15s, box-shadow .15s; }
.top-search:focus-within { border-color: var(--blue-light); box-shadow: 0 0 0 3px var(--ring); }
.top-search svg { width: 16px; height: 16px; }
.top-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.top-search input::placeholder { color: var(--muted-foreground); }
.top-search kbd { padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--muted-surface); color: var(--muted-foreground); direction: ltr; font: 11px var(--mono); }
.icon-button { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--input); border-radius: var(--radius-sm); background: transparent; color: var(--tint); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.icon-button:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.icon-button:disabled { opacity: .4; cursor: default; }
.icon-button svg { width: 17px; height: 17px; }
.notification-button { position: relative; }
.notification-button span { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 2px solid var(--background); border-radius: 50%; background: var(--red); }
.menu-button { display: none; }
.demo-banner { margin: 20px 24px 0; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--muted-foreground); font-size: 13px; }
.demo-banner span { flex: 0 0 auto; padding: 1px 9px; border: 1px solid color-mix(in srgb, var(--mint) 35%, transparent); border-radius: 999px; color: var(--mint); font-size: 12px; font-weight: 600; }

.view { display: none; padding: 24px 24px 56px; animation: enter .25s ease both; }
.view.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } }
.page-heading { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-heading h1 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; font-weight: 700; }
.page-heading p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 14px; }
.heading-actions { display: flex; align-items: center; gap: 12px; }
.updated-at { display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }

/* ---------- Buttons, badges, inputs ---------- */
.button { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, color .15s, opacity .15s; }
.button svg { width: 16px; height: 16px; }
.button:disabled { opacity: .5; cursor: default; }
.button.primary { background: var(--primary); color: #fff; }
.button.primary:hover:not(:disabled) { background: var(--primary-hover); }
.button.secondary { border-color: var(--input); background: transparent; color: var(--text); }
.button.secondary:hover:not(:disabled) { background: var(--hover); }
.button.danger { border-color: color-mix(in srgb, var(--red) 30%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }
.button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 16%, transparent); }
.button.ghost { background: transparent; color: var(--muted-foreground); }
.button.ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.button.full { width: 100%; }
.button.small { height: 32px; padding: 0 11px; font-size: 12px; }
.button.spinning svg { animation: spin .6s linear; }
@keyframes spin { to { transform: rotate(360deg); } }
.text-button { padding: 4px 6px; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 6px; background: transparent; color: var(--blue-soft); cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; }
.text-button:hover { background: var(--hover); }
.text-button svg { width: 14px; height: 14px; transform: rotate(180deg); }
.catalog-tag, .unsaved-badge { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--tint); font-size: 12px; font-weight: 500; white-space: nowrap; }
.unsaved-badge { border-color: color-mix(in srgb, var(--amber) 40%, transparent); color: var(--amber); }
.blue { color: var(--blue-soft) !important; }
.mint { color: var(--mint) !important; }
.violet { color: var(--violet) !important; }
.amber { color: var(--amber) !important; }
.red { color: var(--red) !important; }

.form-field { display: block; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field > span { margin-bottom: 6px; display: block; color: var(--tint); font-size: 13px; font-weight: 500; }
.form-field input, .form-field textarea, .form-field select { width: 100%; border: 1px solid var(--input); border-radius: var(--radius-sm); outline: 0; background: rgba(255,255,255,.02); color: var(--text); font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.form-field input, .form-field select { height: 38px; padding: 0 11px; }
.form-field textarea { padding: 9px 11px; resize: vertical; line-height: 1.8; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px var(--ring); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted-foreground); }
.form-field > small { margin-top: 5px; display: block; color: var(--muted-foreground); font-size: 12px; text-align: left; }
.form-field > small b { font-weight: 400; }
select { color-scheme: dark; }
.form-error { color: var(--red) !important; text-align: right !important; }
.switch { position: relative; width: 40px; height: 22px; flex: 0 0 auto; cursor: pointer; direction: ltr; }
.switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--muted-surface); box-shadow: inset 0 0 0 1px var(--input); transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted-foreground); transition: transform .15s, background .15s; }
.switch input:checked + span { background: var(--blue-bright); box-shadow: none; }
.switch input:checked + span::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.switch-label { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; color: var(--text); }
.switch-label input { accent-color: var(--blue-bright); }

/* ---------- Cards ---------- */
.card, .kpi-card, .location-card, .analytic-card, .protocol-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-heading h2 { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
.card-heading p { margin: 2px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.8; }
.kpi-icon, .activity-icon, .setting-icon { display: grid; place-items: center; border: 1px solid var(--border); background: var(--muted-surface); }
.kpi-icon.blue, .activity-icon.blue, .setting-icon.blue { background: color-mix(in srgb, var(--blue-bright) 14%, transparent); }
.kpi-icon.mint, .activity-icon.mint, .setting-icon.mint { background: color-mix(in srgb, var(--mint) 12%, transparent); }
.kpi-icon.violet, .activity-icon.violet, .setting-icon.violet { background: color-mix(in srgb, var(--violet) 12%, transparent); }
.kpi-icon.amber, .setting-icon.amber { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.activity-icon.red { background: color-mix(in srgb, var(--red) 12%, transparent); }

/* KPI tiles */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi-card { position: relative; min-width: 0; padding: 18px; }
.kpi-icon { position: absolute; top: 16px; left: 16px; width: 34px; height: 34px; margin: 0; border-radius: var(--radius-sm); }
.kpi-icon svg { width: 17px; height: 17px; }
.kpi-card > span:not(.kpi-icon) { display: block; padding-left: 44px; color: var(--muted-foreground); font-size: 13px; }
.kpi-top { padding-left: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kpi-top span { color: var(--muted-foreground); font-size: 13px; }
.kpi-top em { padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--mint); font: 600 11px/1.5 var(--mono); font-style: normal; direction: ltr; }
.kpi-card > strong { display: block; margin-top: 10px; font-size: 26px; line-height: 1.2; font-weight: 700; }
.kpi-card > small { display: block; margin-top: 6px; color: var(--muted-foreground); font-size: 12px; }

/* Mode overview */
.telemetry-card { margin-top: 16px; padding: 18px; }
.telemetry-card h3 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; }
.telemetry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.telemetry-mode { min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); }
.telemetry-mode strong, .telemetry-mode span, .telemetry-mode b { display: block; }
.telemetry-mode strong { font-size: 13px; }
.telemetry-mode span { margin-top: 4px; color: var(--muted-foreground); font-size: 12px; }
.telemetry-mode b { margin-top: 6px; color: var(--mint); font-size: 16px; }
.telemetry-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.telemetry-list span { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--tint); font-size: 12px; }

/* Chart and activity */
.dashboard-grid { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 16px; }
.chart-card, .activity-card { min-width: 0; padding: 18px; }
.trend { padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; direction: ltr; }
.trend.positive { border-color: color-mix(in srgb, var(--mint) 30%, transparent); color: var(--mint); }
.chart-wrap { height: 260px; margin-top: 10px; display: flex; direction: ltr; }
.chart-y-axis { width: 36px; padding: 9px 0 34px; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted-foreground); font: 11px var(--mono); text-align: left; }
.line-chart { width: calc(100% - 36px); height: 100%; overflow: visible; }
.grid-lines path { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.chart-area { fill: url(#area-gradient); stroke: none; }
.chart-line { fill: none; vector-effect: non-scaling-stroke; }
.chart-line.main { stroke: var(--blue-light); stroke-width: 2.2; }
.chart-line.soft { stroke: var(--mint); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .8; }
.chart-dot { fill: var(--text); stroke: var(--blue-bright); stroke-width: 3; }
.chart-labels text { fill: var(--muted-foreground); font: 11px "Peyda", "SF Arabic", Tahoma, sans-serif; text-anchor: middle; }
.chart-legend { margin-top: 4px; display: flex; justify-content: center; gap: 18px; color: var(--muted-foreground); font-size: 12px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 16px; height: 3px; border-radius: 3px; }
.legend-main { background: var(--blue-light); }
.legend-soft { background: var(--mint); }
.activity-list { margin-top: 10px; }
.activity-item { padding: 10px 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border: 0; }
.activity-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.activity-icon svg { width: 16px; height: 16px; }
.activity-item strong, .activity-item small { display: block; }
.activity-item strong { font-size: 13px; font-weight: 600; }
.activity-item small { overflow: hidden; color: var(--muted-foreground); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.activity-item time { color: var(--muted-foreground); font-size: 11px; white-space: nowrap; }

/* ---------- Tables ---------- */
.table-card { margin-top: 16px; overflow: hidden; }
.table-card > .card-heading { padding: 18px 18px 14px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { height: 40px; padding: 0 16px; border-block: 1px solid var(--border); background: rgba(255,255,255,.015); color: var(--muted-foreground); font-size: 12px; font-weight: 500; text-align: right; }
td { height: 56px; padding: 8px 16px; border-bottom: 1px solid var(--border); color: var(--tint); font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--hover); }
td code { color: var(--blue-soft); font: 12px var(--mono); direction: ltr; }
.user-identity { padding: 0; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: right; }
.device-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted-surface); color: var(--blue-soft); }
.device-icon svg { width: 16px; height: 16px; }
.user-identity strong, .user-identity small, .cell-primary + small { display: block; }
.user-identity strong, .cell-primary { color: var(--text); font-size: 13px; font-weight: 600; }
.user-identity small, .cell-primary + small { margin-top: 1px; color: var(--muted-foreground); font-size: 12px; }
.session-note { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 12px; }
.users-card td > small, .compact-users td > small { display: block; margin-top: 1px; color: var(--muted-foreground); font-size: 12px; }
.status-badge, .health { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-badge i, .health i { width: 6px; height: 6px; box-shadow: none; }
.status-badge.online, .health.healthy { border-color: color-mix(in srgb, var(--mint) 30%, transparent); color: var(--mint); }
.status-badge.active { color: var(--blue-soft); }
.status-badge.active i { background: var(--blue-soft); }
.status-badge.blocked, .health.degraded { border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
.status-badge.blocked i, .health.degraded i { background: var(--red); }
.row-action { width: 32px; height: 32px; border: 0; background: transparent; }
.table-tools { padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.diagnostics-tools > select, .diagnostics-tools > input { height: 36px; padding: 0 10px; border: 1px solid var(--input); border-radius: var(--radius-sm); outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.diagnostics-tools > input { width: 120px; }
.diagnostics-tools .field-search { min-width: 200px; flex: 1; }
.field-search { width: min(360px, 100%); height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--input); border-radius: var(--radius-sm); color: var(--muted-foreground); transition: border-color .15s, box-shadow .15s; }
.field-search:focus-within { border-color: var(--blue-light); box-shadow: 0 0 0 3px var(--ring); }
.field-search svg { width: 16px; height: 16px; }
.field-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.filter-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--muted-surface); }
.filter-chip { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted-foreground); cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.filter-chip:hover { color: var(--text); }
.filter-chip.active { background: var(--card-raised); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.sort-bar { padding: 0 16px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-bottom: 1px solid var(--border); }
.sort-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 12px; font-weight: 600; }
.sort-label svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sort-options { display: flex; flex-wrap: wrap; gap: 6px; }
.sort-chip { height: 30px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted-foreground); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.sort-chip:hover { border-color: var(--input); color: var(--text); background: var(--muted-surface); }
.sort-chip:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ring); }
.sort-chip.active { border-color: color-mix(in srgb, var(--blue-light) 70%, transparent); background: color-mix(in srgb, var(--blue-bright) 22%, transparent); color: var(--blue-soft); font-weight: 600; }
.sort-hint { flex-basis: 100%; color: var(--muted-foreground); font-size: 12px; }
.sort-note { display: block; color: var(--blue-soft); font-size: 11.5px; }
.error-note { display: block; color: var(--red); }
#users-table[data-sort="recent"] th:nth-child(3), #users-table[data-sort="newest"] th:nth-child(1), #users-table[data-sort="oldest"] th:nth-child(1), #users-table[data-sort="app_version"] th:nth-child(1), #users-table[data-sort="connections"] th:nth-child(5), #users-table[data-sort="errors"] th:nth-child(5), #users-table[data-sort="usage_today"] th:nth-child(6), #users-table[data-sort="usage_total"] th:nth-child(6) { color: var(--blue-soft); }
#users-table[data-sort="recent"] td:nth-child(3), #users-table[data-sort="newest"] td:nth-child(1), #users-table[data-sort="oldest"] td:nth-child(1), #users-table[data-sort="app_version"] td:nth-child(1), #users-table[data-sort="connections"] td:nth-child(5), #users-table[data-sort="errors"] td:nth-child(5), #users-table[data-sort="usage_today"] td:nth-child(6), #users-table[data-sort="usage_total"] td:nth-child(6) { background: color-mix(in srgb, var(--blue-bright) 7%, transparent); }
.pagination { min-height: 54px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 13px; }
.pagination > div { display: flex; align-items: center; gap: 8px; }
.pagination .icon-button { width: 32px; height: 32px; }
.pagination .icon-button:first-child svg { transform: rotate(180deg); }
.empty-state { height: 140px; color: var(--muted-foreground); text-align: center; white-space: normal; }
div.empty-state, p.empty-state { grid-column: 1 / -1; height: auto; margin: 0; padding: 18px 16px; border: 1px dashed var(--input); border-radius: var(--radius-md); font-size: 13px; }
.mini-stats { margin-bottom: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mini-stats > div { padding: 12px 16px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.mini-stats i, .analytic-card > i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mini-stats span { color: var(--muted-foreground); font-size: 13px; }
.mini-stats strong { margin-right: auto; font-size: 18px; }

/* Diagnostics */
.diagnostic-row { cursor: pointer; }
.diagnostic-error { max-width: 280px; }
.diagnostic-error strong, .diagnostic-error small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diagnostic-error small { color: var(--muted-foreground); font-size: 12px; }
.diagnostic-frame { display: block; max-width: 280px; overflow: hidden; color: var(--blue-soft); font: 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.diagnostic-status, .diagnostic-retrace-chip { display: inline-flex; align-items: center; padding: 1px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--blue-soft); font-size: 12px; font-weight: 600; white-space: nowrap; }
.diagnostic-status.regressed, .diagnostic-retrace-chip.pending { border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }
.diagnostic-status.resolved, .diagnostic-retrace-chip.retraced { border-color: color-mix(in srgb, var(--mint) 35%, transparent); color: var(--mint); }
.diagnostic-retrace-chip { margin: 6px 0 0 6px; }
.diagnostic-report-list { display: grid; gap: 6px; }
.diagnostic-report-list button { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; text-align: right; }
.diagnostic-report-list button:hover { background: var(--hover); }
.diagnostic-report-list button.active { border-color: var(--blue-light); background: color-mix(in srgb, var(--blue-bright) 10%, transparent); }
.diagnostic-report-list strong, .diagnostic-report-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diagnostic-report-list small { color: var(--muted-foreground); font-size: 12px; }
.copy-heading { display: flex; align-items: center; gap: 8px; }
.copy-heading h3 { margin-left: auto; }
.copy-heading select { height: 32px; padding: 0 8px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: 12px; }
.diagnostic-stack, .diagnostic-logs { max-height: 300px; margin: 0; padding: 12px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #070B16; color: var(--tint); font: 12px/1.7 var(--mono); white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left; }
.diagnostic-logs { color: var(--muted-foreground); }

/* ---------- Locations ---------- */
.location-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.location-card { min-width: 0; padding: 18px; }
.location-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flag { font-size: 26px; line-height: 1; }
.location-card h3 { margin: 12px 0 0; font-size: 17px; }
.location-card p { margin: 0; color: var(--muted-foreground); font-size: 13px; }
.location-card p b { color: var(--blue-soft); font-weight: 500; }
.load-track, .bar-track { display: block; overflow: hidden; background: var(--muted-surface); }
.load-track { height: 6px; margin: 14px 0; border-radius: 6px; }
.load-track span { display: block; height: 100%; border-radius: inherit; background: var(--blue-bright); }
.location-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.location-meta span + span { padding-right: 12px; border-right: 1px solid var(--border); }
.location-meta small, .location-meta strong { display: block; }
.location-meta small { color: var(--muted-foreground); font-size: 12px; }
.location-meta strong { font-size: 15px; }
.location-name { display: flex; align-items: center; gap: 10px; }
.location-name b { font-size: 20px; line-height: 1; }
.location-name strong, .location-name small { display: block; }
.location-name small { color: var(--muted-foreground); font-size: 12px; }
.protocol { display: inline-flex; padding: 1px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--blue-soft); font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.inline-load { width: 56px; height: 5px; margin-left: 6px; display: inline-block; overflow: hidden; border-radius: 5px; background: var(--muted-surface); vertical-align: middle; }
.inline-load i { display: block; height: 100%; background: var(--blue-soft); }

/* ---------- Analytics ---------- */
.analytics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.analytic-card { position: relative; min-width: 0; padding: 18px; }
.analytic-card > i { position: absolute; top: 22px; left: 18px; }
.analytic-card span, .analytic-card strong, .analytic-card small { display: block; }
.analytic-card span { color: var(--muted-foreground); font-size: 13px; }
.analytic-card strong { margin-top: 8px; font-size: 24px; line-height: 1.3; }
.analytic-card small { margin-top: 4px; color: var(--muted-foreground); font-size: 12px; }
.events-card { margin-top: 16px; padding: 18px; }
.event-bars { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.event-bar > div { margin-bottom: 6px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; }
.event-bar span { font-size: 13px; }
.event-bar code { color: var(--muted-foreground); font-size: 11px; direction: ltr; }
.event-bar strong { font-size: 13px; }
.bar-track { height: 6px; border-radius: 6px; }
.bar-track i { display: block; height: 100%; border-radius: inherit; }
.event-bar .bar-track i { background: var(--blue-bright); }
.bar-track.version-share { display: inline-block; width: 90px; vertical-align: middle; }
.version-share i { background: var(--mint); }

/* ---------- Settings ---------- */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 16px; }
.settings-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.settings-main > * { min-width: 0; }
.setting-section { padding: 18px; }
.setting-heading { padding-bottom: 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); }
.setting-icon { width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--radius-sm); }
.setting-icon svg { width: 17px; height: 17px; }
.setting-heading h2, .setting-heading p { margin: 0; }
.setting-heading h2 { font-size: 16px; font-weight: 600; }
.setting-heading p { color: var(--muted-foreground); font-size: 13px; }
.setting-row { min-height: 64px; padding: 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); }
.setting-row strong, .setting-row small { display: block; }
.setting-row strong { font-size: 14px; font-weight: 600; }
.setting-row small { margin-top: 2px; color: var(--muted-foreground); font-size: 13px; line-height: 1.7; }
.warning-row strong { color: var(--red); }
.policy-summary { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-raised); color: var(--muted-foreground); font-size: 13px; line-height: 1.8; }
.policy-summary:empty { display: none; }
.policy-summary.is-required { border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }
.policy-summary.is-problem { border-color: color-mix(in srgb, var(--red) 35%, transparent); color: var(--red); }
.form-grid { padding-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-side { position: sticky; top: 72px; display: grid; gap: 16px; }
.save-card, .api-card { padding: 18px; text-align: center; }
.save-visual { width: 44px; height: 44px; margin: 0 auto 12px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--blue-bright) 12%, transparent); color: var(--blue-soft); }
.save-visual svg { width: 22px; height: 22px; }
.save-card h3, .api-card h3 { margin: 0; font-size: 15px; }
.save-card p, .api-card p { margin: 6px 0 16px; color: var(--muted-foreground); font-size: 13px; line-height: 1.8; }
.save-card .ghost { margin-top: 6px; }
.form-problems { margin: 0 0 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--text); font-size: 13px; line-height: 1.8; text-align: right; overflow-wrap: anywhere; }
.form-problems strong { display: block; color: var(--red); }
.form-problems ul { margin: 6px 0 0; padding: 0 18px 0 0; }
.form-problems li + li { margin-top: 4px; }
.form-problems small { color: var(--muted-foreground); }
#settings-form [aria-invalid="true"], #ads-form [aria-invalid="true"] { border-color: var(--red); }
.api-status { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--mint); font-size: 12px; }
.api-status i { width: 6px; height: 6px; box-shadow: none; }
.api-card code { padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px; color: var(--blue-soft); font-size: 12px; }

/* ---------- Ads ---------- */
.ads-placement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ad-placement { position: relative; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); transition: border-color .15s; }
.ad-placement[data-enabled="true"] { border-color: color-mix(in srgb, var(--mint) 40%, transparent); }
.ads-placement-grid .setting-row { min-height: 0; margin: 0; padding: 0; border: 0; gap: 12px; }
.ad-placement h3 { margin: 2px 0 0; font-size: 15px; line-height: 1.5; }
.ad-format-name { color: var(--blue-soft); font: 600 11px var(--mono); letter-spacing: .04em; }
.ad-location { margin: 10px 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.8; }
.ad-state { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 1px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); font-size: 12px; }
.ad-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ad-placement[data-enabled="true"] .ad-state { border-color: color-mix(in srgb, var(--mint) 35%, transparent); color: var(--mint); }
.ad-placement .form-field { margin-bottom: 12px; }
.ad-placement input { min-width: 0; }
.ad-policy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ad-policy label { color: var(--muted-foreground); font-size: 12px; }
.ad-policy input { width: 100%; height: 34px; margin-top: 4px; padding: 0 8px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: transparent; color: var(--text); }
.ads-help { margin: 16px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.9; }
.ads-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 14px 0 16px; font-size: 13px; }
.ads-status strong { color: var(--mint); }
.ads-status span { color: var(--muted-foreground); }
.ads-master { padding: 14px 16px !important; border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent) !important; border-radius: var(--radius-md); background: color-mix(in srgb, var(--mint) 6%, transparent); }
.ads-settings .switch input:checked + span { background: var(--mint); }
.ad-timezone-section, .ad-timing-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.subsection-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.subsection-heading h3 { margin: 0 0 2px; font-size: 16px; }
.subsection-heading p { margin: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.8; }
.ad-timezone-editor { display: grid; gap: 12px; }
.tz-summary { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); color: var(--tint); font-size: 14px; font-weight: 600; line-height: 1.9; }
.tz-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; color: var(--muted-foreground); font-size: 13px; }
.tz-preset { height: 30px; padding: 0 12px; border: 1px solid var(--input); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; transition: background .15s; }
.tz-preset:hover, .tz-preset:focus-visible { background: var(--hover); outline: 0; }
.tz-default, .tz-rule { position: relative; padding: 14px 16px 14px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); }
.tz-default::before, .tz-rule::before { content: ""; position: absolute; inset: 12px auto 12px -1px; width: 3px; border-radius: 3px; background: var(--muted-foreground); }
.tz-default[data-mode="all"]::before, .tz-rule[data-mode="all"]::before { background: var(--mint); }
.tz-default[data-mode="some"]::before, .tz-rule[data-mode="some"]::before { background: var(--amber); }
.tz-default[data-mode="none"]::before, .tz-rule[data-mode="none"]::before { background: var(--red); }
.tz-default { margin-bottom: 18px; }
.tz-default-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tz-default-head h4, .tz-rules-head h4 { margin: 0; font-size: 15px; }
.tz-default-head p { margin: 2px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.8; }
.tz-default-head small, .tz-rule-meta small { color: var(--blue-soft); font-size: 12px; white-space: nowrap; }
.tz-rules-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.tz-rules-head h4 small { margin-inline-start: 6px; color: var(--muted-foreground); font-size: 12px; font-weight: 400; }
.tz-rule-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.tz-zone { flex: 1 1 240px; min-width: 0; margin: 0; }
.tz-rule-meta { flex: 0 1 160px; min-width: 0; display: grid; gap: 2px; padding-bottom: 6px; }
.tz-rule-meta strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.tz-rule-actions { display: flex; gap: 4px; padding-bottom: 2px; }
.tz-remove:hover { color: var(--red); }
.tz-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--muted-surface); }
.tz-mode { position: relative; }
.tz-mode input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tz-mode span { min-height: 32px; display: grid; place-items: center; padding: 4px 8px; border-radius: 7px; color: var(--muted-foreground); font-size: 13px; font-weight: 600; text-align: center; transition: background .15s, color .15s; }
.tz-mode input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 1px; }
.tz-mode-all input:checked + span { background: var(--success-surface); color: var(--mint); }
.tz-mode-some input:checked + span { background: var(--warning-surface); color: var(--amber); }
.tz-mode-none input:checked + span { background: var(--error-surface); color: var(--red); }
.tz-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tz-slots[hidden] { display: none; }
.tz-slot { position: relative; }
.tz-slot input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tz-slot span { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--input); border-radius: 999px; color: var(--muted-foreground); font-size: 12px; transition: .15s; }
.tz-slot input:checked + span { border-color: color-mix(in srgb, var(--amber) 55%, transparent); background: var(--warning-surface); color: var(--amber); }
.tz-slot input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 1px; }
.tz-empty { margin: 4px 0; color: var(--muted-foreground); font-size: 13px; }
.tz-tester { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); align-items: end; gap: 14px; margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--input); border-radius: var(--radius-md); }
.tz-tester .form-field { margin: 0; }
.tz-tester-result { min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-foreground); }
.tz-tester-source code, .tz-table code { color: var(--blue-soft); }
.tz-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tz-chip { padding: 1px 9px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.tz-chip.on { background: var(--success-surface); color: var(--mint); }
.tz-chip.off { background: var(--error-surface); color: var(--red); }
.tz-coverage { margin-top: 20px; }
.tz-coverage-total { margin-bottom: 10px; color: var(--muted-foreground); font-size: 13px; }
.tz-coverage-total strong { color: var(--mint); font-size: 16px; }
.tz-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.tz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tz-table th { height: 38px; padding: 0 12px; text-align: start; white-space: nowrap; }
.tz-table td { height: auto; padding: 9px 12px; vertical-align: middle; }
.tz-table td small { display: block; color: var(--muted-foreground); font-size: 12px; }
.tz-table tr[data-reached="false"] td:first-child code { color: var(--muted-foreground); }

/* ---------- Drawers, toasts ---------- */
.user-drawer { position: fixed; inset: 0 0 0 auto; z-index: 50; width: min(440px, 100vw); padding: 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; border-left: 1px solid var(--border); background: var(--sidebar); box-shadow: -20px 0 60px rgba(0,0,0,.4); transform: translateX(105%); transition: transform .25s cubic-bezier(.22,.8,.25,1), visibility 0s linear .25s; }
.user-drawer.open { visibility: visible; transform: translateX(0); transition: transform .25s cubic-bezier(.22,.8,.25,1); }
.drawer-head { position: sticky; top: -20px; z-index: 1; margin: -20px -20px 0; padding: 16px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); background: var(--sidebar); }
.drawer-head h2 { margin: 2px 0 0; font-size: 18px; line-height: 1.4; }
.drawer-scrim, .sidebar-scrim { position: fixed; inset: 0; z-index: 40; display: none; border: 0; background: rgba(3,6,14,.6); }
.drawer-scrim.open { display: block; }
.drawer-user { margin: 20px 0 16px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.drawer-avatar { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-md); background: var(--muted-surface); color: var(--blue-soft); }
.drawer-avatar svg { width: 22px; height: 22px; }
.drawer-user strong, .drawer-user code { display: block; }
.drawer-user strong { font-size: 15px; }
.drawer-user code { margin: 2px 0 6px; color: var(--muted-foreground); font-size: 12px; direction: ltr; text-align: right; overflow-wrap: anywhere; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-grid > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.detail-grid small, .detail-grid strong { display: block; }
.detail-grid small { color: var(--muted-foreground); font-size: 12px; }
.detail-grid strong { margin-top: 2px; font-size: 14px; overflow-wrap: anywhere; }
.drawer-section { margin-top: 20px; }
.drawer-section h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.usage-highlight { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--card); }
.usage-highlight span { padding: 11px 8px; text-align: center; }
.usage-highlight span + span { border-right: 1px solid var(--border); }
.usage-highlight small, .usage-highlight strong { display: block; }
.usage-highlight small { color: var(--muted-foreground); font-size: 11px; }
.usage-highlight strong { margin-top: 2px; font-size: 14px; }
.route-box { padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.route-box > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--muted-surface); color: var(--blue-soft); }
.route-box strong, .route-box small { display: block; }
.route-box strong { font-size: 13px; }
.route-box small { color: var(--muted-foreground); font-size: 12px; }
.privacy-note { margin: 18px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--muted-foreground); font-size: 12px; line-height: 1.9; }
.drawer-section + .button, .user-drawer .button + .button { margin-top: 8px; }
.policy-editor { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.policy-editor h3 { margin-bottom: 12px; }
.policy-editor .form-field { margin-bottom: 12px; }
.display-preview { margin: 20px 0 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.display-preview small, .display-preview strong, .display-preview span { display: block; }
.display-preview small, .display-preview span { color: var(--muted-foreground); font-size: 12px; }
.display-preview strong { margin: 6px 0 2px; font-size: 18px; }
.display-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.display-tabs .active { border-color: var(--blue-light); color: var(--blue-soft); }
.drawer-table { display: block; width: 100%; max-width: 100%; margin-top: 8px; overflow-x: auto; border-collapse: collapse; font-size: 13px; -webkit-overflow-scrolling: touch; }
.drawer-table th, .drawer-table td { height: auto; padding: 8px 6px; border-bottom: 1px solid var(--border); background: none; text-align: start; white-space: nowrap; }
.drawer-table th { border-top: 0; color: var(--muted-foreground); font-weight: 500; font-size: 12px; }
.toast-region { position: fixed; z-index: 80; bottom: 20px; left: 20px; display: grid; gap: 8px; }
.toast { min-width: 280px; max-width: 420px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); box-shadow: 0 16px 40px rgba(0,0,0,.4); color: var(--text); font-size: 13px; animation: toast-in .25s ease both; }
.toast svg { width: 17px; height: 17px; color: var(--mint); }
.toast.danger svg { color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Protocols and networks ---------- */
.protocol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.protocol-card { min-width: 0; padding: 18px; }
.protocol-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.protocol-card.hidden-in-app > :not(.protocol-visibility) { opacity: .55; }
.protocol-visibility { display: flex; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); white-space: normal; }
.protocol-visibility small { display: block; color: var(--muted-foreground); font-size: 12px; }
.protocol-card h3 { margin: 0; font-size: 16px; }
.protocol-card header small, .protocol-card dl dt { color: var(--muted-foreground); font-size: 12px; }
.protocol-card .protocol-total { display: block; margin-top: 12px; font-size: 24px; font-weight: 700; line-height: 1.3; }
.protocol-card .bar-track { height: 6px; margin-top: 10px; border-radius: 6px; }
.protocol-card .bar-track i { display: block; height: 100%; border-radius: 6px; background: var(--protocol-color, var(--mint)); }
.protocol-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; margin: 14px 0 0; }
.protocol-card dl div { min-width: 0; }
.protocol-card dl dd { margin: 1px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.protocol-card footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--tint); font-size: 12px; line-height: 1.9; }
.protocol-card > small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 12px; }
.protocol-pill { padding: 1px 9px; border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent); border-radius: 999px; color: var(--mint); font-size: 12px; white-space: nowrap; }
.protocol-pill.off { border-color: color-mix(in srgb, var(--amber) 30%, transparent); color: var(--amber); }
.protocol-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.protocol-name small { color: var(--muted-foreground); font-size: 12px; }
.protocol-legend { display: flex; flex-wrap: wrap; gap: 10px; color: var(--tint); font-size: 12px; }
.protocol-legend i, .stack-bar i { display: inline-block; }
.protocol-legend i { width: 9px; height: 9px; margin-inline-end: 5px; border-radius: 3px; }
.stack-bar { display: flex; width: 100%; min-width: 120px; height: 8px; overflow: hidden; border-radius: 6px; background: var(--muted-surface); }
.stack-bar i { height: 100%; }
.protocol-vxr { --protocol-color: #4b87ff; } .protocol-vxt { --protocol-color: #afc6ff; } .protocol-vrr { --protocol-color: #f0c675; } .protocol-hy2 { --protocol-color: #66d9b2; }
.protocol-legend i, .stack-bar i { background: var(--protocol-color, #8a9bb5); }
.route-card.good { --protocol-color: var(--mint); } .route-card.warn { --protocol-color: var(--amber); } .route-card.bad { --protocol-color: var(--red); } .route-card.none { --protocol-color: #8a9bb5; }
.route-cell { display: inline-flex; flex-direction: column; gap: 1px; min-width: 88px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--muted-surface); }
.route-cell strong { font-size: 13px; }
.route-cell small, .route-asn { color: var(--muted-foreground); font-size: 12px; }
.route-asn { display: block; margin-top: 1px; }
.route-cell.good strong { color: var(--mint); } .route-cell.warn strong { color: var(--amber); } .route-cell.bad strong { color: var(--red); }
.route-cell.bad { background: color-mix(in srgb, var(--red) 8%, transparent); } .route-cell.none { background: transparent; color: var(--muted-foreground); }
.route-policy { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 4px 18px 18px; }
.route-switch { gap: 10px; white-space: normal; }
.route-switch small { display: block; color: var(--muted-foreground); font-size: 12px; }

/* ---------- Default-location priority (Locations view) ---------- */
.priority-card { margin-bottom: 16px; padding: 18px; }
.priority-card .card-heading p { max-width: 760px; }
.priority-card .card-heading p b { color: var(--mint); font-weight: 600; }
.priority-loading { margin: 14px 0 0; color: var(--muted-foreground); font-size: 13px; }
.priority-summary { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 12px; }
.priority-current { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--mint) 35%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--mint) 6%, var(--card)); }
.priority-current-place { margin-top: 6px; display: flex; align-items: center; gap: 12px; }
.priority-current-place b { font-size: 30px; line-height: 1; }
.priority-current-place strong, .priority-current-place small { display: block; }
.priority-current-place strong { font-size: 18px; line-height: 1.4; }
.priority-current-place small { color: var(--muted-foreground); font-size: 13px; }
.priority-reason { display: block; margin-top: 8px; color: var(--mint); font-size: 12px; line-height: 1.7; }
.priority-none { display: block; margin-top: 8px; color: var(--red); font-size: 14px; }
.priority-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.priority-counts span { min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); }
.priority-counts strong { font-size: 22px; line-height: 1.3; }
.priority-counts small { color: var(--muted-foreground); font-size: 12px; line-height: 1.6; }
.priority-reset { margin-top: 12px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--amber) 6%, var(--card)); }
.priority-reset p { flex: 1 1 320px; margin: 0; color: var(--tint); font-size: 13px; line-height: 1.9; }
.priority-reset strong { color: var(--amber); }
.location-choice { margin-top: 8px; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--muted-foreground); font-size: 12px; }
.location-choice.default { border-color: color-mix(in srgb, var(--mint) 30%, transparent); color: var(--mint); }
.location-choice.manual { border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }
.priority-columns { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.priority-columns > section { min-width: 0; }
.priority-columns h3 { margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; }
.priority-columns h3 small { color: var(--muted-foreground); font-size: 12px; font-weight: 400; }
.priority-list { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.priority-item { position: relative; min-height: 56px; padding: 8px 10px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); transition: border-color .15s, opacity .15s, transform .15s; }
.priority-item::before { content: ""; position: absolute; inset: 10px auto 10px -1px; width: 3px; border-radius: 3px; background: var(--border); }
.priority-item.active { border-color: color-mix(in srgb, var(--mint) 40%, transparent); }
.priority-item.active::before { background: var(--mint); }
.priority-item.standby::before { background: var(--blue-light); }
.priority-item.skipped { opacity: .6; }
.priority-item.skipped::before { background: var(--amber); }
.priority-item.dragging { opacity: .4; }
.priority-item.drop-target { border-color: var(--blue-light); transform: translateY(-1px); }
.priority-handle { color: var(--muted-foreground); font-size: 13px; letter-spacing: -2px; cursor: grab; user-select: none; }
.priority-rank { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--muted-surface); color: var(--tint); font-size: 13px; font-weight: 700; }
.priority-item.active .priority-rank { background: var(--mint); color: var(--bg); }
.priority-place { min-width: 0; display: flex; align-items: center; gap: 10px; }
.priority-place > span { min-width: 0; }
.priority-flag { font-size: 22px; line-height: 1; }
.priority-place strong, .priority-place small, .priority-place code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.priority-place strong { font-size: 14px; }
.priority-place small { color: var(--muted-foreground); font-size: 12px; }
.priority-place code { color: var(--muted-foreground); font-size: 11px; text-align: right; }
.priority-status { padding: 1px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.priority-status.active { border-color: color-mix(in srgb, var(--mint) 35%, transparent); color: var(--mint); }
.priority-status.standby { color: var(--blue-soft); }
.priority-status.skipped { border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }
.priority-actions { display: inline-flex; gap: 4px; }
.icon-button.small { width: 30px; height: 30px; border-radius: 7px; font-size: 11px; }
.icon-button.danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.priority-empty { padding: 20px 16px; display: grid; gap: 4px; border: 1px dashed var(--input); border-radius: var(--radius-md); color: var(--muted-foreground); font-size: 13px; line-height: 1.9; }
.priority-empty strong { color: var(--text); font-size: 14px; }
.priority-pool { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); }
.priority-search { height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
.priority-search svg { width: 16px; height: 16px; }
.priority-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.priority-available { max-height: 360px; margin: 0; padding: 4px; display: grid; gap: 2px; list-style: none; overflow-y: auto; }
.priority-available li { padding: 6px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; border-radius: var(--radius-sm); }
.priority-available li:hover { background: var(--hover); }
.priority-available li.disabled .priority-place { opacity: .6; }
.priority-pool-empty { display: block !important; padding: 18px !important; color: var(--muted-foreground); font-size: 13px; text-align: center; }
.priority-footer { margin-top: 16px; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); }
.priority-preview { margin: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.9; }
.priority-preview strong { color: var(--text); }
.priority-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .kpi-grid, .analytics-grid, .telemetry-grid, .protocol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .priority-summary, .priority-columns { grid-template-columns: minmax(0, 1fr); }
  .location-grid { grid-template-columns: minmax(0, 1fr); }
  .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet and phone: the sidebar becomes a sheet. */
@media (max-width: 860px) {
  /* Hidden as well as moved away while closed, so it can neither be focused nor widen the page. */
  .sidebar { width: min(300px, 86vw); z-index: 45; visibility: hidden; transform: translateX(105%); transition: transform .25s cubic-bezier(.22,.8,.25,1), visibility 0s linear .25s; box-shadow: -20px 0 60px rgba(0,0,0,.45); }
  .sidebar.open { visibility: visible; transform: translateX(0); transition: transform .25s cubic-bezier(.22,.8,.25,1); }
  .sidebar-scrim { z-index: 44; }
  .sidebar-scrim.open { display: block; }
  .nav-item { height: 44px; }
  .main-content { margin-right: 0; }
  .menu-button { display: inline-grid; }
  .topbar { padding: 0 16px; }
  .topbar-title .eyebrow { display: none; }
  .top-search { width: 36px; padding: 0; justify-content: center; }
  .top-search input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .top-search kbd { display: none; }
  .top-search:focus-within { position: absolute; inset: 9px 16px; z-index: 2; width: auto; padding: 0 10px; justify-content: flex-start; background: var(--sidebar); }
  .top-search:focus-within input { position: static; width: 100%; height: auto; opacity: 1; pointer-events: auto; }
  .demo-banner { margin: 16px 16px 0; }
  .view { padding: 20px 16px 48px; }
}

/* Phone */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .demo-banner { align-items: flex-start; font-size: 12px; line-height: 1.8; }
  .page-heading { margin-bottom: 16px; align-items: stretch; flex-direction: column; gap: 12px; }
  .page-heading > .button, .page-heading > .catalog-tag, .page-heading > .unsaved-badge { align-self: flex-start; }
  .heading-actions { justify-content: space-between; }
  .kpi-grid, .analytics-grid, .protocol-grid, .mini-stats { gap: 10px; }
  .mini-stats > div { padding: 10px 12px; }
  .mini-stats strong { font-size: 17px; }
  .kpi-card, .analytic-card { padding: 14px; }
  .kpi-icon { top: 12px; left: 12px; width: 30px; height: 30px; }
  .kpi-card > span:not(.kpi-icon) { padding-left: 36px; font-size: 12px; line-height: 1.5; }
  .kpi-card > strong, .analytic-card strong { font-size: 22px; }
  .analytic-card > i { top: 18px; left: 14px; }
  .telemetry-grid { gap: 8px; }
  .telemetry-mode { padding: 10px 12px; }
  .protocol-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-card { padding: 14px; }
  .chart-wrap { height: 210px; }
  .event-bars { grid-template-columns: minmax(0, 1fr); }
  .event-bar code { display: none; }
  .table-card > .card-heading { padding: 14px 14px 12px; }
  .card-heading { flex-wrap: wrap; }
  .table-tools { padding: 12px 14px; align-items: stretch; flex-direction: column; }
  .table-tools .field-search, .diagnostics-tools > input { width: 100%; min-width: 0; }
  .diagnostics-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .diagnostics-tools .field-search { grid-column: 1 / -1; }
  .filter-group { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filter-chip { flex: 1 0 auto; }
  .sort-bar { padding: 0 14px 12px; }
  .sort-options { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pagination { padding: 10px 14px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-field.full { grid-column: auto; }
  .form-field input, .form-field select, .field-search input, .top-search input, .priority-search input { font-size: 16px; }
  .settings-side { grid-template-columns: minmax(0, 1fr); }
  .setting-section { padding: 14px; }
  .setting-row { align-items: flex-start; }
  .setting-row .switch { margin-top: 4px; }
  .ad-policy { grid-template-columns: minmax(0, 1fr); }
  .tz-rule-head { flex-wrap: wrap; }
  .tz-rule-meta { flex: 1 1 auto; }
  .tz-modes { grid-template-columns: minmax(0, 1fr); }
  .tz-tester { grid-template-columns: minmax(0, 1fr); }
  .subsection-heading { flex-direction: column; }
  .route-policy { grid-template-columns: minmax(0, 1fr); padding: 4px 14px 14px; }
  .user-drawer { width: 100vw; padding: 16px; border-left: 0; }
  .drawer-head { top: -16px; margin: -16px -16px 0; padding: 12px 16px; }
  .detail-grid { gap: 6px; }
  .toast-region { inset: auto 12px 12px; }
  .toast { min-width: 0; max-width: none; width: 100%; }
  .priority-card { padding: 14px; }
  .priority-counts { gap: 6px; }
  .priority-counts span { padding: 10px 8px; }
  .priority-counts strong { font-size: 18px; }
  .priority-counts small { font-size: 11px; }
  .priority-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .priority-handle { display: none; }
  .priority-item .priority-status { grid-column: 2; justify-self: start; }
  .priority-actions { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; }
  .priority-buttons { width: 100%; }
  .priority-buttons .button { flex: 1 1 auto; }

  /* Data tables become stacked cards: every cell is labelled with its column
     (app.js copies each header into data-label). */
  .table-scroll { overflow: visible; }
  .table-scroll table, .table-scroll tbody, .table-scroll tr, .table-scroll td { display: block; width: 100%; }
  .table-scroll thead { display: none; }
  .table-scroll tbody tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .table-scroll tbody tr:last-child { border-bottom: 0; }
  .table-scroll tbody tr:hover { background: transparent; }
  /* Label in the first column, every part of the value stacked in the second. */
  .table-scroll td { height: auto; min-height: 34px; padding: 5px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-flow: row; justify-items: end; align-items: center; column-gap: 14px; border: 0; white-space: normal; text-align: left; }
  .table-scroll td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 4; align-self: center; justify-self: start; max-width: 42vw; color: var(--muted-foreground); font-size: 12px; text-align: right; }
  .table-scroll td > * { grid-column: 2; }
  .table-scroll td[data-label=""], .table-scroll td:not([data-label]) { display: flex; justify-content: flex-end; }
  .table-scroll td[data-label=""]::before, .table-scroll td:not([data-label])::before { display: none; }
  .table-scroll td:first-child { padding-bottom: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: right; }
  .table-scroll td:first-child > .user-identity { width: 100%; }
  .table-scroll td:first-child::before { display: none; }
  .table-scroll td[colspan] { display: block; text-align: center; }
  .table-scroll td > * { max-width: 100%; }
  .table-scroll .diagnostic-error, .table-scroll .diagnostic-frame { max-width: 100%; }
  .table-scroll .stack-bar { min-width: 0; flex: 1; }
  .table-scroll .row-action, .table-scroll td:last-child .icon-button { margin-right: auto; }
}

@media (max-width: 340px) {
  .kpi-grid, .analytics-grid, .mini-stats, .telemetry-grid { grid-template-columns: minmax(0, 1fr); }
  .priority-counts { grid-template-columns: minmax(0, 1fr); }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Server view (server.js) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.server-live.connecting i { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 16%, transparent); }
.server-live.offline i { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent); }
.server-live.live i { animation: server-pulse 2s ease-in-out infinite; }
@keyframes server-pulse { 50% { opacity: .35; } }
#server-host { display: flex; flex-wrap: wrap; gap: 0 16px; }
#server-host b { color: var(--tint); font-weight: 600; }

.server-badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); font-size: 12px; font-weight: 600; white-space: nowrap; }
.server-badge i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.server-badge.ok { border-color: color-mix(in srgb, var(--mint) 30%, transparent); color: var(--mint); }
.server-badge.busy { border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }
.server-badge.bad { border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
.server-badge + small { margin-top: 3px; display: block; color: var(--muted-foreground); font-size: 12px; }

.server-kpi > strong { font-variant-numeric: tabular-nums; text-align: right; }
.server-meter { height: 6px; margin-top: 10px; display: block; overflow: hidden; border-radius: 999px; background: var(--muted-surface); }
.server-meter i { height: 100%; display: block; border-radius: inherit; background: var(--mint); transition: width .4s ease; }
.server-meter.busy i { background: var(--amber); }
.server-meter.bad i { background: var(--red); }

.server-stats { margin-top: 12px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--border); }
.server-stats > div { min-width: 0; padding: 10px 14px; background: var(--card); }
.server-stats span { display: block; color: var(--muted-foreground); font-size: 12px; }
.server-stats strong { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.server-stats .busy strong { color: var(--amber); }

.server-chart-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.server-chart { min-width: 0; padding: 16px 16px 10px; }
.server-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.server-chart-head h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.server-chart-head p { margin: 1px 0 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.7; }
.server-chart-now { color: var(--text); font-size: 18px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.server-legend { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted-foreground); font-size: 12px; }
.server-legend span, .server-tooltip span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 3px; flex: 0 0 auto; border-radius: 2px; }
.swatch.s0 { background: #5F82DE; }
.swatch.s1 { background: #C2820F; }
.swatch.s2 { background: #1E9A70; }
.swatch.s3 { background: #A06BD6; }
.swatch.ref { height: 0; border-top: 2px dashed var(--muted-foreground); background: none; }
.server-chart-box { position: relative; margin-top: 6px; touch-action: pan-y; }
.server-chart-svg { width: 100%; height: auto; display: block; overflow: visible; stroke-width: 0; }
.server-chart-svg .grid { stroke: var(--border); stroke-width: 1; }
.server-chart-svg .axis { fill: var(--muted-foreground); font: 10.5px "Peyda", "SF Arabic", Tahoma, sans-serif; }
.server-chart-svg .reference { stroke: var(--muted-foreground); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .7; }
.server-chart-svg .area { fill-opacity: .14; stroke: none; }
.server-chart-svg .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.server-chart-svg .crosshair { stroke: var(--muted-foreground); stroke-width: 1; opacity: .6; }
.server-chart-svg .hover-dot { stroke: var(--card); stroke-width: 2; }
.server-tooltip { position: absolute; top: 4px; z-index: 2; min-width: 150px; padding: 8px 10px; display: grid; gap: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-raised); box-shadow: 0 10px 30px rgba(0,0,0,.35); color: var(--tint); font-size: 12px; pointer-events: none; direction: rtl; }
.server-tooltip strong { color: var(--muted-foreground); font-weight: 500; }
.server-tooltip b { margin-right: auto; padding-right: 12px; color: var(--text); font-weight: 600; direction: ltr; }

.server-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.server-error { margin: 0 18px 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--error-surface); color: var(--red); font-size: 13px; }
.server-command { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); text-align: left; }

.server-console { margin-top: 16px; padding: 18px; }
.server-console .card-heading p code { color: var(--blue-soft); font-size: 12px; }
.console-presets { margin-top: 14px; display: grid; gap: 8px; }
.console-preset-group { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: start; gap: 10px; }
.console-preset-group > span { padding-top: 5px; color: var(--muted-foreground); font-size: 12px; }
.console-preset-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.console-preset-group .filter-chip { height: 28px; padding: 0 10px; border: 1px solid var(--border); background: var(--muted-surface); font-size: 12px; }
.console-preset-group .filter-chip:hover { border-color: var(--input); background: var(--card-raised); }
.console-form { margin-top: 14px; display: grid; gap: 10px; }
.console-input { position: relative; display: block; }
.console-prompt { position: absolute; top: 10px; left: 12px; color: var(--mint); font: 600 14px var(--mono); pointer-events: none; }
.console-input textarea { width: 100%; min-height: 64px; padding: 9px 12px 9px 30px; border: 1px solid var(--input); border-radius: var(--radius-sm); outline: 0; background: #070B16; color: var(--text); font: 14px/1.7 var(--mono); resize: vertical; text-align: left; }
.console-input textarea:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px var(--ring); }
.console-options { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; align-items: end; gap: 10px; }
.console-options .form-field > span { font-size: 12px; }
.console-options .button { height: 38px; }
.console-options kbd { padding: 0 5px; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; font: 11px var(--mono); opacity: .8; }
.console-run { margin-top: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: #070B16; }
.console-run-head { padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.02); }
.console-run-head > div:first-child { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.console-run-head code { min-width: 0; max-width: 100%; overflow: hidden; color: var(--tint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.console-run-head small { color: var(--muted-foreground); font-size: 12px; }
.console-idle { color: var(--muted-foreground); font-size: 12px; }
.console-run-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.console-output { height: 380px; min-height: 160px; max-height: 75vh; margin: 0; padding: 12px 14px; overflow: auto; resize: vertical; color: #D8DEEC; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; tab-size: 8; }
.console-output:empty::before { content: "—"; color: var(--muted-foreground); }
.console-output .err { color: var(--red); }
.console-output:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.console-history-title { margin: 16px 0 8px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.console-history { display: grid; gap: 4px; }
.console-history-item { min-width: 0; padding: 7px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--tint); cursor: pointer; text-align: right; }
.console-history-item:hover, .console-history-item.active { border-color: var(--border); background: var(--hover); }
.console-history-item code { min-width: 0; overflow: hidden; font-size: 12px; text-align: left; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.console-history-item small { color: var(--muted-foreground); font-size: 12px; }

.server-two { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.server-panel { min-width: 0; padding: 18px; }
.server-failed, .server-disks { margin-top: 12px; display: grid; gap: 10px; }
.server-failed-item { padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--red) 5%, transparent); }
.server-failed-item strong, .server-disk strong { display: block; font-size: 13px; }
.server-failed-item small, .server-disk small { display: block; color: var(--muted-foreground); font-size: 12px; }
.server-disk { display: grid; gap: 4px; }
.server-disk > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.server-disk .server-meter { margin-top: 2px; }

@media (max-width: 1180px) {
  .server-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .server-chart-grid, .server-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  #view-server .heading-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  #server-window { width: 100%; }
  #server-window .filter-chip { flex: 1 0 auto; }
  .server-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .server-stats > div { padding: 8px 12px; }
  .server-chart-grid, .server-two { gap: 10px; margin-top: 10px; }
  .server-chart { padding: 12px 12px 6px; }
  .server-chart-now { font-size: 16px; }
  .server-console, .server-panel { padding: 14px; }
  .console-preset-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .console-preset-group > span { padding-top: 0; }
  .console-preset-group > div { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .console-preset-group .filter-chip { flex: 0 0 auto; }
  .console-options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .console-options .button { grid-column: 1 / -1; }
  .console-options kbd { display: none; }
  .console-input textarea { font-size: 16px; }
  .console-run-head { flex-direction: column; align-items: stretch; }
  .console-run-actions { justify-content: flex-end; }
  .console-output { height: 300px; font-size: 12px; }
  .console-history-item { grid-template-columns: auto minmax(0, 1fr); }
  .console-history-item small { display: none; }
  .server-command { max-width: 60vw; }
  .table-scroll .server-actions { justify-content: flex-end; }
  .server-tooltip { min-width: 130px; }
}

/* ---------- Marketing: blog and Instagram ---------- */
.marketing-two { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.ig-card { min-width: 0; margin-top: 16px; padding: 18px; }
.marketing-two .ig-card { margin-top: 0; }
.ig-note { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-raised); color: var(--muted-foreground); font-size: 13px; line-height: 1.9; }
.ig-note.danger { border-color: color-mix(in srgb, var(--red) 35%, transparent); color: var(--red); }
.ig-note small { color: var(--muted-foreground); }
#blog-notice { margin: 0 0 16px; }
.month-bars { height: 200px; margin-top: 16px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 6px; }
.month-bar { height: 100%; min-width: 0; display: grid; grid-template-rows: 18px 1fr auto; gap: 4px; text-align: center; }
.month-bar b { color: var(--text); font-size: 12px; font-weight: 600; }
.month-track { position: relative; display: flex; align-items: flex-end; border-bottom: 1px solid var(--border); }
.month-track i { display: block; width: 100%; min-height: 0; border-radius: 4px 4px 0 0; background: var(--blue-light); }
.month-bar:hover .month-track i { background: var(--blue-soft); }
.month-bar small { min-height: 16px; margin: 0 -100%; color: var(--muted-foreground); font-size: 11px; white-space: nowrap; }
.blog-categories { margin-top: 16px; display: grid; gap: 14px; }
.blog-categories .bar-track i { background: var(--blue-light); }
.blog-sources { margin-top: 16px; }
.blog-sources b { color: var(--text); font-weight: 600; }
.blog-link { color: var(--text); text-decoration: none; }
.blog-link:hover { color: var(--blue-soft); text-decoration: underline; }
#view-blog td > small, #view-instagram td > small { display: block; margin-top: 1px; color: var(--muted-foreground); font-size: 12px; }
.source-badge { display: inline-flex; align-items: center; padding: 1px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); font-size: 12px; font-weight: 600; white-space: nowrap; }
.source-badge.api { border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }
.source-badge.repo { border-color: color-mix(in srgb, var(--mint) 30%, transparent); color: var(--mint); }
.source-badge.draft { border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
.ig-tabs { margin-bottom: 4px; flex-wrap: wrap; }
/* Same look as .filter-chip, which app.js binds to the users filter. */
.ig-tab { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted-foreground); cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.ig-tab:hover { color: var(--text); }
.ig-tab.active { background: var(--card-raised); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.ig-empty { text-align: center; }
.ig-empty h2 { margin: 0; font-size: 16px; }
.ig-empty p { max-width: 640px; margin: 8px auto 16px; color: var(--muted-foreground); font-size: 13px; line-height: 1.9; }
.ig-profile { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.ig-avatar { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: color-mix(in srgb, var(--blue-bright) 18%, transparent); color: var(--blue-soft); font-size: 22px; font-weight: 700; }
.ig-profile-text { min-width: 0; }
.ig-profile-text strong, .ig-profile-text a { display: block; }
.ig-profile-text strong { font-size: 16px; }
.ig-profile-text a { width: fit-content; color: var(--blue-soft); font-size: 13px; text-decoration: none; }
.ig-profile-text p { margin: 8px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.8; white-space: pre-line; }
.ig-profile-side { display: grid; justify-items: end; gap: 8px; }
.ig-profile-side small { color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }
#ig-page .kpi-grid, #ig-competitor-detail .kpi-grid, .ig-result .kpi-grid { margin-top: 16px; }
.ig-mini { margin: 16px 0 0; }
.ig-chart { height: 200px; margin-top: 12px; display: flex; gap: 8px; direction: ltr; }
.ig-chart svg { flex: 1; height: 100%; overflow: visible; }
.ig-chart-axis { width: 52px; padding: 6px 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted-foreground); font-size: 11px; text-align: left; }
.ig-chart-dates { margin: 6px 0 0 60px; display: flex; justify-content: space-between; color: var(--muted-foreground); font-size: 11px; direction: ltr; }
.ig-line { fill: none; stroke: var(--blue-light); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ig-area { fill: color-mix(in srgb, var(--blue-light) 14%, transparent); stroke: none; }
.ig-dot circle { fill: var(--blue-light); stroke: var(--card); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ig-dot circle.ig-hit { fill: transparent; stroke: none; }
.ig-dot:hover circle:not(.ig-hit) { fill: var(--text); }
.ig-caption { display: block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-inline-form { min-width: 0; display: flex; flex: 1; flex-wrap: wrap; gap: 10px; }
.ig-inline-form .field-search { flex: 1; min-width: 220px; }
tr.ig-ours { background: color-mix(in srgb, var(--blue-bright) 8%, transparent); }
tr.selected { box-shadow: inset -3px 0 0 var(--blue-light); }
.ig-actions { display: flex; justify-content: flex-end; gap: 2px; }
.ig-tools { margin-top: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ig-tool { min-width: 0; padding: 14px; display: grid; align-content: start; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--text); cursor: pointer; font: inherit; text-align: right; transition: border-color .15s, background .15s; }
.ig-tool:hover { background: var(--hover); }
.ig-tool.active { border-color: var(--blue-light); background: color-mix(in srgb, var(--blue-bright) 10%, var(--card)); }
.ig-tool strong { font-size: 14px; }
.ig-tool span { color: var(--muted-foreground); font-size: 12px; line-height: 1.8; }
.ig-research-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ig-research-form .ig-query { flex: 1; min-width: 220px; }
.ig-research-form .ig-amount { width: 150px; }
.ig-research-layout { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 2fr); align-items: start; gap: 16px; }
.ig-research-layout .ig-card:only-child { grid-column: 1 / -1; }
.ig-jobs { margin-top: 12px; display: grid; gap: 6px; }
.ig-job { min-width: 0; padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; font: inherit; text-align: right; }
.ig-job:hover { background: var(--hover); }
.ig-job.active { border-color: var(--blue-light); }
.ig-job strong { font-size: 13px; }
.ig-job > span:not(.source-badge), .ig-job small { grid-column: 1 / -1; overflow: hidden; color: var(--muted-foreground); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ig-result .table-scroll { margin: 12px -18px -18px; }
.ig-result .ig-profile { margin-top: 14px; }
.ig-summary { margin: 10px 0 0; color: var(--tint); font-size: 13px; }
.ig-account-row { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ig-account-row > div { flex: 1; min-width: 200px; }
.ig-account-row strong, .ig-account-row small { display: block; }
.ig-account-row small { color: var(--muted-foreground); font-size: 12px; }
.ig-login { max-width: 640px; }
.ig-rules { margin: 16px 0 0; padding: 0 18px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 2; }
@media (max-width: 1180px) {
  .ig-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ig-research-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .marketing-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ig-tools { grid-template-columns: minmax(0, 1fr); }
  .ig-profile { grid-template-columns: 44px minmax(0, 1fr); }
  .ig-avatar { width: 44px; height: 44px; font-size: 18px; }
  .ig-profile-side { grid-column: 1 / -1; justify-items: start; }
  .month-bars { gap: 3px; }
  .month-bar small { font-size: 10px; }
  .ig-caption { max-width: 220px; }
  .ig-research-form .ig-amount { width: 100%; }
}
#view-instagram td a:not(.text-button) { color: var(--blue-soft); text-decoration: none; }
#view-instagram td a:not(.text-button):hover { text-decoration: underline; }
.ig-login-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ig-login .switch-label { display: flex; align-items: center; gap: 10px; white-space: normal; line-height: 1.8; }
.ig-login .switch-label input { width: 18px; height: 18px; flex: 0 0 auto; padding: 0; }
.ig-login .form-field > small { text-align: right; }

/* Instagram comments */
.ig-comment-source { margin-top: 14px; }
.ig-candidates-head { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted-foreground); font-size: 13px; }
.ig-candidates-head label { display: inline-flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
.ig-candidates { margin: 10px -18px -18px; }
.ig-candidates td:first-child, .ig-candidates th:first-child { width: 36px; }
.ig-candidates input[type=checkbox], .ig-candidates-head input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue-bright); }
.ig-candidates tr.done { opacity: .55; }
#ig-comment-form { margin-top: 14px; }
.ig-comment-actions { margin-top: 12px; align-items: center; }
.ig-comment-actions small { color: var(--muted-foreground); font-size: 12px; }
#ig-comment-settings { margin-top: 14px; }
.ig-table-title { margin-left: auto; font-size: 15px; }
#ig-comment-filter { height: 36px; padding: 0 10px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: 13px; }
.ig-comment-text { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.source-badge.queued { border-color: color-mix(in srgb, var(--blue-light) 40%, transparent); color: var(--blue-soft); }

/* Instagram comment campaigns */
.ig-presets { margin-top: 12px; }
.ig-sources { margin-top: 14px; display: grid; gap: 10px; }
.ig-source { padding: 12px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); }
.ig-source > strong { width: 100%; font-size: 13px; }
.ig-source > strong small { margin-right: 6px; color: var(--muted-foreground); font-weight: 400; }
.ig-source .ig-query { flex: 1; min-width: 220px; }
.ig-source textarea { min-height: 38px; }
.ig-add-source { margin-top: 12px; }
.ig-filters { margin-top: 14px; display: grid; gap: 14px; }
.ig-types { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; border: 0; }
.ig-types legend { margin-bottom: 6px; padding: 0; color: var(--tint); font-size: 13px; font-weight: 500; }
.ig-types label, .ig-checks label { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; cursor: pointer; }
.ig-types input, .ig-checks input { width: 16px; height: 16px; accent-color: var(--blue-bright); }
.ig-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ig-filter-words { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ig-checks { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ig-find-summary { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.ig-find-summary span { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--tint); font-size: 12px; }
.ig-find-summary span.bad { border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
.ig-find-summary span.drop { color: var(--muted-foreground); }
@media (max-width: 1180px) { .ig-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ig-filter-words { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .ig-filter-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Marketing: X (Twitter) reply programs ---------- */
.nav-item em[hidden] { display: none; }
#view-x td > small { display: block; margin-top: 1px; color: var(--muted-foreground); font-size: 12px; }
#view-x td a:not(.text-button) { color: var(--blue-soft); text-decoration: none; }
#view-x td a:not(.text-button):hover { text-decoration: underline; }
.x-toolbar { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.x-form { margin-top: 14px; display: grid; gap: 14px; }
.x-form .ig-checks { margin-top: 0; }
.x-form .form-field > small { text-align: right; }
.x-fieldset { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.x-fieldset legend { padding: 0 6px; color: var(--tint); font-size: 13px; }
.x-fieldset > small { margin-top: 8px; display: block; color: var(--muted-foreground); font-size: 12px; }
.x-chip-box { min-height: 42px; padding: 5px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); }
.x-chip-box:focus-within { border-color: var(--blue-light); box-shadow: 0 0 0 3px var(--ring); }
.form-field .x-chip-box input { width: auto; min-width: 160px; height: 30px; flex: 1; padding: 0 4px; border: 0; background: transparent; box-shadow: none; }
.form-field .x-chip-box input:focus { box-shadow: none; }
.x-chips { display: contents; }
.x-chips.readonly { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.x-chip { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid color-mix(in srgb, var(--blue-light) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--blue-bright) 12%, transparent); color: var(--text); font-size: 13px; white-space: nowrap; }
.x-chip button { width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.x-chip button:hover { background: var(--hover); color: var(--text); }
.x-chip svg { width: 12px; height: 12px; }
.x-texts { display: grid; gap: 8px; }
.x-texts:not(:empty) { margin-bottom: 10px; }
.x-text { padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-raised); }
.x-text p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.x-text-number { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--blue-bright) 16%, transparent); color: var(--blue-soft); font-size: 12px; font-weight: 600; }
.x-text-side { display: flex; align-items: center; gap: 2px; }
.x-text-side small { margin-left: 6px; color: var(--muted-foreground); font-size: 12px; white-space: nowrap; }
.x-text-composer { display: flex; align-items: flex-end; gap: 10px; }
.form-field .x-text-composer textarea { flex: 1; }
.x-text-composer .button { flex: 0 0 auto; }
#x-text-length { font-weight: 600; }
.x-programs { display: grid; gap: 0; }
.x-program-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.x-program-head > div:first-child { flex: 1; min-width: 200px; }
.x-program-head h2 { margin: 0; font-size: 16px; }
.x-program-head small { color: var(--muted-foreground); font-size: 12px; }
.x-program-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.x-last-check { margin: 12px 0 0; color: var(--tint); font-size: 13px; line-height: 1.9; }
.x-last-check small { display: block; color: var(--muted-foreground); font-size: 12px; }
.x-error { color: var(--red) !important; }
.x-query { margin-top: 10px; color: var(--muted-foreground); font-size: 12px; }
.x-query summary { cursor: pointer; }
.x-query code { margin-top: 6px; padding: 8px 10px; display: block; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-raised); color: var(--text); white-space: pre-wrap; word-break: break-word; }
.x-tweet-text { display: block; max-width: 340px; margin-top: 3px; overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.7; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; }
.x-select { height: 36px; padding: 0 10px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: 13px; }
.x-empty { margin-top: 16px; }
@media (max-width: 640px) {
  .x-program-actions { width: 100%; }
  .x-text-composer { flex-direction: column; align-items: stretch; }
  .x-text { grid-template-columns: minmax(0, 1fr) auto; }
  .x-text-number { display: none; }
  .x-tweet-text { max-width: 220px; }
}
.x-kpis { margin-top: 16px; }
.x-metrics-bar { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted-foreground); font-size: 13px; }
.x-delete { color: var(--red); }
#view-x td.ig-actions { white-space: nowrap; }

/* Server addresses view (addresses.js) */
#view-addresses .kpi-grid { margin-bottom: 16px; }
.muted-text { color: var(--muted-foreground); font-size: 12px; }
.danger-text { color: var(--red) !important; }
.address-alert { margin-bottom: 16px; padding: 12px 14px; display: flex; gap: 10px; border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--text); font-size: 13px; }
.address-alert svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--red); }
.address-alert p { margin: 0 0 4px; line-height: 1.9; }
.address-add-card, .address-policy-card { margin-bottom: 16px; padding: 18px; }
.address-add-form { display: grid; grid-template-columns: minmax(160px, 220px) minmax(160px, 1fr) auto auto; align-items: end; gap: 12px; }
.address-add-form .switch-label { height: 38px; }
.address-order { white-space: nowrap; }
td > .switch { display: inline-block; vertical-align: middle; }
.address-order .icon-button { width: 26px; height: 26px; font-size: 10px; }
.address-added { display: block; margin-top: 2px; }
.address-label-input { width: 100%; min-width: 120px; height: 32px; padding: 0 9px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); color: var(--text); font-size: 13px; }
.address-label-input:focus { outline: 0; border-color: var(--blue-light); box-shadow: 0 0 0 3px var(--ring); }
.address-health { font-weight: 600; font-size: 13px; }
.address-health.good { color: var(--mint); }
.address-health.warn { color: var(--amber); }
.address-health.bad { color: var(--red); }
.address-reports { font-weight: 600; font-size: 13px; white-space: nowrap; }
.address-reports.low { color: var(--muted-foreground); }
.address-reports.warn { color: var(--amber); }
.address-reports.bad { color: var(--red); }
.address-suspended { margin-inline-start: 8px; vertical-align: middle; }
.address-actions { white-space: nowrap; }
.address-actions .button + .button { margin-inline-start: 6px; }
.address-failover-grid { margin-top: 14px; max-width: 760px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.address-failover-note { max-width: 760px; line-height: 1.9; }
.address-others { margin: 0; padding: 10px 16px 14px; color: var(--muted-foreground); font-size: 12px; line-height: 2; }
.address-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.address-mode { padding: 12px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.address-mode:hover { background: var(--hover); }
.address-mode.active { border-color: var(--blue-light); background: color-mix(in srgb, var(--blue-bright) 10%, transparent); }
.address-mode input { margin-top: 4px; accent-color: var(--blue-bright); }
.address-mode strong { display: block; font-size: 14px; }
.address-mode small { display: block; margin-top: 4px; color: var(--muted-foreground); font-size: 12px; line-height: 1.8; }
.address-mode-options { margin-top: 14px; max-width: 760px; }
.address-mode-options:empty { display: none; }
.address-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.address-warning { margin: 12px 0 0; color: var(--amber); font-size: 13px; }
.address-current { margin: 12px 0 0; color: var(--muted-foreground); font-size: 13px; }
.address-policy-actions { margin-top: 14px; display: flex; gap: 10px; }
@media (max-width: 980px) {
  .address-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .address-add-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .address-modes, .address-profile-grid, .address-add-form, .address-failover-grid { grid-template-columns: 1fr; }
}

/* Location health (locations view) */
.location-health-card .card-heading { align-items: flex-start; gap: 16px; }
.location-health-status { margin: 4px 0 0; color: var(--muted-foreground); font-size: 13px; }
.location-health-badge { margin-top: 6px; display: flex; width: fit-content; font-weight: 500; }
.location-health-badge.warn { border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }
.location-health-badge.warn i { background: var(--amber); }

/* Tor view */
.tor-pool { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.form-hint { display: block; margin-top: 10px; color: var(--muted-foreground); font-size: 12px; line-height: 1.9; }
.hive-problems { margin: 0; padding: 0 18px 0 0; font-size: 13px; line-height: 2; }
.hive-nets { display: flex; flex-wrap: wrap; gap: 4px; }
.hive-net { padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; white-space: nowrap; color: var(--muted-foreground); }
.hive-net.good { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 35%, transparent); }
.hive-reason { display: block; margin-top: 3px; max-width: 260px; color: var(--muted-foreground); font-size: 11px; line-height: 1.6; }
.hive-collect-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.hive-collect-stats div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.hive-collect-stats span { display: block; color: var(--muted-foreground); font-size: 12px; }
.hive-collect-stats strong { font-size: 18px; }
.hive-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; }
.hive-sources { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.hive-sources li { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; font-size: 12px; line-height: 1.9; }
.hive-sources b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.hive-sources small { display: block; white-space: pre-line; color: var(--muted-foreground); }
.hive-telegram-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; margin-top: 8px; }
.hive-live, #hive-operators-card { margin: 16px 0; padding: 18px; }
.hive-live h3 { margin: 16px 0 8px; font-size: 13px; color: var(--muted-foreground); font-weight: 600; }
.hive-live-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.hive-live-stats div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.hive-live-stats span { display: block; color: var(--muted-foreground); font-size: 12px; }
.hive-live-stats strong { display: block; margin-top: 2px; font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hive-live-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
.hive-slot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; font-size: 12px; }
.hive-slot.idle { opacity: .55; }
.hive-slot b { min-width: 14px; }
.hive-slot small { min-width: 40px; color: var(--muted-foreground); }
.hive-stage { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-foreground); font-size: 11px; white-space: nowrap; }
.hive-stage.done { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 35%, transparent); }
.hive-stage.now { color: var(--foreground); border-color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, transparent); }
.hive-reasons { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.hive-reasons li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.hive-operators { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.hive-operators section { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; }
.hive-operators h3 { margin: 0; font-size: 14px; }
.hive-operators ol { margin: 8px 0 0; padding: 0 18px 0 0; font-size: 13px; line-height: 1.7; }
.hive-operators li span { overflow-wrap: anywhere; }
@media (max-width: 760px) { .hive-live-grid { grid-template-columns: minmax(0, 1fr); } }
.hive-telegram-chats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#hive-check-now { margin-top: 12px; }
#hive-servers .table-scroll { margin-top: 12px; }
.tor-preview p { margin: 0 0 8px; font-size: 13px; line-height: 1.9; }
.tor-preview small { color: var(--muted-foreground); font-size: 12px; }
#tor-order .priority-item { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
.switch.small { transform: scale(.85); }

/* Routes and priority views (routes.js, priority.js; docs/PROTOCOL_SYSTEM.md) */
.routes-group-title { margin: 18px 0 10px; color: var(--tint); font-size: 15px; font-weight: 600; }
.route-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.route-admin-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.route-admin-card.is-off { opacity: .72; }
.route-admin-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.route-admin-card dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 12px; }
.route-admin-card dt { color: var(--muted-foreground); }
.route-admin-card dd { margin: 2px 0 0; color: var(--text); overflow-wrap: anywhere; }
.route-preview { --route-color: var(--blue-light); display: flex; align-items: center; gap: 10px; min-width: 0; }
.route-preview > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.route-preview strong { color: var(--text); font-size: 14px; }
.route-preview small { color: var(--muted-foreground); font-size: 11px; }
.route-preview em { color: var(--tint); font-size: 12px; font-style: normal; }
.route-glyph { min-width: 46px; height: 32px; padding: 0 8px; display: inline-grid; place-items: center; border: 1px solid color-mix(in srgb, var(--route-color) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--route-color) 14%, transparent); color: var(--route-color); font-size: 11px; font-weight: 700; }
.route-editor { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.route-editor-grid, .protocol-form-grid, .switching-grid, .rule-match { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; align-items: end; }
.route-editor-preview { padding: 10px; border: 1px dashed var(--input); border-radius: var(--radius-md); }
.route-editor-preview > small { display: block; margin-bottom: 8px; color: var(--muted-foreground); font-size: 11px; }
.route-editor-actions, .row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.protocol-form { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.protocol-form h3, .priority-advanced h3 { margin: 6px 0 0; font-size: 14px; }
.state-badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); }
.state-badge.ok { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 40%, transparent); }
.state-badge.busy { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.state-badge.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.protocol-log summary { cursor: pointer; color: var(--blue-soft); font-size: 12px; }
.protocol-log pre { max-height: 220px; overflow: auto; padding: 8px; border-radius: var(--radius-sm); background: rgba(0,0,0,.25); font: 11px/1.6 var(--mono); white-space: pre-wrap; }
td small { display: block; color: var(--muted-foreground); font-size: 11px; }
.muted { color: var(--muted-foreground); font-size: 12px; }
.priority-rule { padding: 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.priority-rule header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.priority-rule header small { color: var(--muted-foreground); font-size: 12px; }
.rule-actions { display: flex; gap: 6px; }
.text-button.danger { color: var(--red); }
.priority-variant { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 10px; }
.variant-head { display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.form-field.compact { max-width: 200px; }
.priority-levels { display: flex; flex-direction: column; }
.priority-level { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(255,255,255,.02); }
.priority-level.drop-target { border-color: var(--blue-light); box-shadow: 0 0 0 3px var(--ring); }
.level-rank { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--muted-surface); color: var(--blue-soft); font-weight: 700; font-size: 12px; }
.level-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; }
.level-actions { display: flex; flex-direction: column; gap: 2px; }
.priority-gap { height: 10px; margin: 2px 0; border-radius: 6px; }
.priority-gap.drop-target { height: 26px; border: 2px dashed var(--blue-light); }
.route-chip { padding: 5px 8px 5px 6px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--input); border-radius: 999px; background: var(--card); cursor: grab; user-select: none; }
.route-chip.dragging { opacity: .5; }
.route-chip.is-off { border-style: dashed; opacity: .6; }
.route-chip b { font-size: 13px; font-weight: 600; }
.route-chip small { color: var(--muted-foreground); font-size: 10px; }
.route-chip .chip-note { color: var(--muted-foreground); font-size: 10px; font-style: normal; border: 1px dashed var(--input); border-radius: 999px; padding: 0 5px; }
.chip-actions { display: inline-flex; gap: 2px; }
.chip-actions button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted-foreground); cursor: pointer; font-size: 10px; }
.chip-actions button:hover { background: var(--hover); color: var(--text); }
.priority-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 12px; }
.priority-add small { flex-basis: 100%; }
.placement-editor { display: flex; flex-direction: column; gap: 8px; }
.placement-editor .form-field small { display: block; margin-top: 4px; color: var(--muted-foreground); font-size: 11px; }
.placement-locations { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.placement-location { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; }
.placement-location.is-off { opacity: .55; }
.placement-location input[type=number] { width: 70px; height: 28px; margin-inline-start: auto; border: 1px solid var(--input); border-radius: 6px; background: transparent; color: var(--text); padding: 0 6px; }
.placement-location em { margin-inline-start: auto; color: var(--blue-soft); font-style: normal; font-weight: 700; }
.priority-advanced { padding: 16px; margin: 14px 0; display: flex; flex-direction: column; gap: 12px; }
.priority-advanced summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.priority-advanced summary h2 { margin: 0; font-size: 16px; display: inline; }
.priority-advanced summary small { color: var(--muted-foreground); font-size: 12px; }
.priority-preview-result ol { margin: 8px 0 0; padding-inline-start: 18px; line-height: 2; }
.priority-preview-result small { color: var(--mint); }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 980px) { .two-column { grid-template-columns: 1fr; } }
.route-admin-card .switch-label, .priority-rule .switch-label, .priority-advanced .switch-label { display: flex; align-items: flex-start; gap: 10px; white-space: normal; }
.route-admin-card .switch-label > span:last-child, .priority-rule .switch-label > span:last-child, .priority-advanced .switch-label > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.route-admin-card .switch-label small, .priority-rule .switch-label small, .priority-advanced .switch-label small { display: block; color: var(--muted-foreground); font-size: 12px; line-height: 1.7; }
.route-admin-card .switch { flex: 0 0 auto; }
.route-admin-card > .button { align-self: flex-start; }
.route-admin-card.is-editing { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .priority-level { flex-wrap: wrap; }
  .level-actions { flex-basis: 100%; flex-direction: row; justify-content: flex-end; }
  .route-chip small { display: none; }
  .route-admin-grid { grid-template-columns: 1fr; }
}

/* Growth view (growth.js): installs, active devices, peaks, retention. */
.growth-actions { flex-wrap: wrap; justify-content: flex-end; }
.growth-actions select { height: 36px; padding: 0 10px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font-size: 13px; }
.growth-actions .button.busy svg { animation: growth-spin 1s linear infinite; }
@keyframes growth-spin { to { transform: rotate(360deg); } }
.growth-meta { margin: -6px 0 14px; color: var(--muted-foreground); font-size: 12px; line-height: 1.8; }
.growth-error { color: var(--red); font-weight: 500; }
.growth-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.growth-kpi > span:not(.kpi-icon) { padding-left: 0; }
.growth-kpi > strong small { color: var(--muted-foreground); font-size: 15px; font-weight: 500; }
.growth-kpi > small { line-height: 1.8; }
.growth-delta { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 600; direction: rtl; white-space: nowrap; }
.growth-delta.up { background: var(--success-surface); color: var(--mint); }
.growth-delta.down { background: var(--error-surface); color: var(--red); }
.growth-delta.flat { background: var(--muted-surface); color: var(--muted-foreground); }
td .growth-delta { margin: 0 6px 0 0; }
.growth-card { position: relative; margin-top: 16px; padding: 18px; min-width: 0; }
.growth-card h3 { margin: 18px 0 8px; color: var(--tint); font-size: 13px; font-weight: 600; }
.growth-card .card-heading { flex-wrap: wrap; margin-bottom: 12px; }
.growth-card .card-heading p { margin: 2px 0 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.7; }
.growth-card .table-scroll, .growth-scroll { margin: 0 -18px; }
.growth-scroll { overflow-x: auto; }
.growth-cohorts td, .growth-cohorts th { padding: 0 10px; }
.growth-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.growth-two > .growth-card { margin-top: 16px; }
.growth-chips .filter-chip { height: 28px; padding: 0 10px; font-size: 12px; }
.growth-chart { position: relative; margin-top: 6px; touch-action: pan-y; }
.growth-chart .bar { transition: opacity .15s; }
.growth-chart .bar.peak { stroke: var(--tint); stroke-width: 1.5; }
.growth-chart .series.dashed { stroke-dasharray: 5 4; }
.growth-band { fill: rgba(175, 198, 255, .07); }
.growth-insight-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.growth-insight-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--tint); font-size: 13px; line-height: 1.9; }
.growth-insight-list i { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 9px; border-radius: 50%; background: var(--blue-light); }
.growth-insight-list .good i { background: var(--mint); }
.growth-insight-list .warn i { background: var(--amber); }
.growth-table td { height: 48px; }
.growth-table td small { white-space: normal; max-width: 220px; }
.growth-summary { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted-foreground); font-size: 12px; }
.growth-summary b { color: var(--text); font-weight: 600; }
.growth-peaks, .growth-facts { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.growth-card > .growth-facts:first-of-type { margin-top: 0; }
.growth-peaks > div, .growth-facts > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255,255,255,.015); }
.growth-peaks span, .growth-facts span { display: block; color: var(--muted-foreground); font-size: 11.5px; }
.growth-peaks strong, .growth-facts strong { display: block; margin-top: 3px; color: var(--text); font-size: 16px; font-weight: 700; }
.growth-peaks small, .growth-facts small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 11px; line-height: 1.6; }
.growth-facts-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.growth-note { margin: 12px 0 0; color: var(--muted-foreground); font-size: 11.5px; line-height: 1.8; }
.growth-meter { height: 8px; min-width: 40px; border-radius: 999px; background: var(--muted-surface); overflow: hidden; }
.growth-meter i { display: block; height: 100%; width: 0; border-radius: 999px; }
.growth-meter i.s0, .growth-heat-scale i.s0 { background: #5F82DE; }
.growth-meter i.s1 { background: #C2820F; }
.growth-meter i.s2 { background: #1E9A70; }
.growth-meter i.s3 { background: #A06BD6; }
.growth-funnel { display: grid; gap: 14px; }
.growth-funnel-label { margin-bottom: 6px; display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--tint); }
.growth-funnel-label b { margin-right: auto; color: var(--text); font-weight: 700; }
.growth-funnel-label em, .growth-bar-row em { min-width: 48px; color: var(--muted-foreground); font-size: 12px; font-style: normal; text-align: left; }
.growth-funnel .growth-meter { height: 12px; }
.growth-bars { display: grid; gap: 10px; margin-top: 12px; }
.growth-bar-row { display: grid; grid-template-columns: minmax(90px, 1.2fr) minmax(60px, 2fr) auto auto; align-items: center; gap: 10px; font-size: 12.5px; color: var(--tint); }
.growth-bar-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.growth-bar-row b { color: var(--text); font-weight: 600; text-align: left; white-space: nowrap; }
.growth-breakdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.growth-share h3 { margin-top: 4px; }
.growth-share .growth-bar-row { margin-top: 8px; grid-template-columns: minmax(70px, 1.3fr) minmax(40px, 1.4fr) auto auto; }
.growth-heat { display: grid; grid-template-columns: 64px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.growth-heat-hour { color: var(--muted-foreground); font-size: 10.5px; text-align: center; }
.growth-heat-day { color: var(--muted-foreground); font-size: 11.5px; text-align: right; padding-right: 4px; direction: rtl; }
.growth-heat-cell { aspect-ratio: 1.6; min-height: 14px; border-radius: 3px; cursor: default; }
.growth-heat-cell:hover { outline: 2px solid var(--tint); outline-offset: 0; }
.lvl-0 { background: rgba(255,255,255,.035); }
.lvl-1 { background: #1B2D5C; }
.lvl-2 { background: #263F8F; }
.lvl-3 { background: #3560BA; }
.lvl-4 { background: #5F82DE; }
.lvl-5 { background: #AFC6FF; }
.growth-heat-foot { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted-foreground); font-size: 12px; }
.growth-heat-foot b { color: var(--text); font-weight: 600; }
.growth-heat-scale { display: inline-flex; align-items: center; gap: 3px; }
.growth-heat-scale i { width: 16px; height: 10px; border-radius: 2px; }
.growth-heat-tip { top: 0; }
.growth-cohorts td, .growth-cohorts th { text-align: center; }
.growth-cohorts td:first-child, .growth-cohorts th:first-child { text-align: right; }
.ret-cell { font-variant-numeric: tabular-nums; }
.ret-cell.lvl-4, .ret-cell.lvl-5 { color: var(--bg); font-weight: 600; }
.ret-cell.lvl-0 { background: transparent; }
.ret-cell.pending { color: var(--muted-foreground); }
@media (max-width: 1180px) {
  .growth-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .growth-two { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .growth-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .growth-actions { justify-content: flex-start; }
  .growth-insight-list, .growth-breakdown { grid-template-columns: minmax(0, 1fr); }
  .growth-facts-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .growth-card { padding: 14px; }
  .growth-card .table-scroll, .growth-scroll { margin: 0 -14px; }
  .growth-cohorts td { height: 40px; font-size: 12px; }
  .growth-heat { grid-template-columns: 44px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .growth-heat-day { font-size: 10px; }
  .growth-heat-cell { min-height: 10px; aspect-ratio: auto; height: 12px; border-radius: 2px; }
}
@media (max-width: 520px) {
  .growth-kpi > strong { font-size: 20px; }
  .growth-kpi > small { font-size: 11px; }
}
/* ---------- Home top slot: native or the owner's slider (promo-slider.js) ---------- */
.ad-placement-top { grid-column: 1 / -1; }
.top-source { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.top-source-option { position: relative; }
.top-source-option input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.top-source-option span { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 58px; padding: 10px 14px; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); transition: border-color .15s, background .15s, box-shadow .15s; }
.top-source-option svg { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--muted-foreground); }
.top-source-option b { font-size: 14px; }
.top-source-option small { color: var(--muted-foreground); font-size: 12px; }
.top-source-option input:hover + span { border-color: color-mix(in srgb, var(--blue-soft) 35%, transparent); }
.top-source-option input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.top-source-option input:checked + span { border-color: var(--blue-bright); background: color-mix(in srgb, var(--blue-bright) 12%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-bright) 18%, transparent); }
.top-source-option input:checked + span svg { color: var(--blue-soft); }
.top-source-option input[value="slider"]:checked + span { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 10%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 16%, transparent); }
.top-source-option input[value="slider"]:checked + span svg { color: var(--mint); }
.top-native-switch { justify-content: space-between; margin-bottom: 12px !important; font-size: 13px; }
.top-slider-note { display: none; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--success-surface); color: var(--tint); font-size: 13px; line-height: 1.9; }
.top-slider-note a, .top-slider-note .link-button { color: var(--mint); font-weight: 600; }
.ad-placement-top[data-source="slider"] .top-native { display: none; }
.ad-placement-top[data-source="slider"] .top-slider-note { display: block; }

.slider-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.slider-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
.slider-stage { position: sticky; top: 16px; }
.slider-phone { padding: 14px 14px 18px; border: 1px solid var(--input); border-radius: 28px; background: linear-gradient(180deg, var(--bg-soft), var(--bg)); box-shadow: 0 18px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04); }
.slider-phone-bar { display: flex; justify-content: space-between; margin: 0 6px 12px; }
.slider-phone-bar span { width: 54px; height: 6px; border-radius: 99px; background: var(--muted-surface); }
.slider-phone-bar span + span { width: 22px; }
.slider-preview { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 16px; background: var(--panel); isolation: isolate; }
.slider-preview-track { display: flex; height: 100%; }
.slider-preview-track.animate { transition: transform .62s cubic-bezier(.22, .61, .36, 1); }
.pv-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.pv-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pv-placeholder, .pv-empty { height: 100%; display: grid; place-items: center; color: var(--muted-foreground); font-size: 12px; }
.pv-empty { border: 1px dashed var(--input); border-radius: 16px; }
.pv-text { display: flex; align-items: center; padding: 0 18px; }
.pv-text div { position: relative; display: grid; gap: 4px; width: 100%; }
.pv-orb { position: absolute; border-radius: 50%; background: currentColor; opacity: .12; }
.pv-orb.a { width: 130px; height: 130px; left: -28px; top: -40px; }
.pv-orb.b { width: 70px; height: 70px; left: 60px; bottom: -30px; opacity: .08; }
.pv-link { position: absolute; left: 10px; bottom: 10px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(10, 15, 29, .55); color: #fff; font-size: 13px; backdrop-filter: blur(6px); }
/* On the slide itself, in a soft pill, as in the app. */
.slider-preview-dots { position: absolute; left: 50%; bottom: 8px; z-index: 1; display: flex; gap: 5px; padding: 5px 7px; border-radius: 99px; background: rgba(10, 15, 29, .35); transform: translateX(-50%); }
.slider-preview-dots:empty { display: none; }
.pv-dot { width: 6px; height: 6px; padding: 0; overflow: hidden; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .35); cursor: pointer; transition: width .3s ease, background .3s; }
.pv-dot i { display: block; width: 0; height: 100%; background: #fff; }
.pv-dot.active { width: 20px; }
.pv-dot.active i { animation: pv-progress linear forwards; }
@keyframes pv-progress { from { width: 0; } to { width: 100%; } }
.slider-phone-connect { width: 112px; height: 112px; margin: 18px auto 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--blue-light), var(--blue-deep)); box-shadow: 0 0 0 10px color-mix(in srgb, var(--blue-bright) 10%, transparent); color: #fff; font-size: 13px; font-weight: 700; opacity: .55; }
.slider-summary { margin: 12px 4px 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.8; text-align: center; }
.slider-controls { display: grid; gap: 14px; }
.slider-add { display: flex; flex-wrap: wrap; gap: 8px; }
.slider-drop { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border: 1.5px dashed var(--input); border-radius: var(--radius-md); color: var(--muted-foreground); text-align: center; transition: border-color .15s, background .15s; }
.slider-drop svg { width: 24px; height: 24px; color: var(--blue-soft); }
.slider-drop b { color: var(--text); font-size: 13px; }
.slider-drop small { font-size: 12px; line-height: 1.8; }
.slider-drop.dragging, .slide-media.dragging { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 8%, transparent); }

.slider-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.slide-row { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); transition: border-color .15s, opacity .15s; }
.slide-row[data-enabled="true"] { border-color: color-mix(in srgb, var(--mint) 30%, transparent); }
.slide-row[data-enabled="false"] .slide-row-body { opacity: .5; }
.slide-row-head { display: flex; align-items: center; gap: 10px; }
.slide-index { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--muted-surface); color: var(--blue-soft); font: 700 12px var(--mono); }
.slide-kind { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--muted-surface); }
.slide-kind label { position: relative; }
.slide-kind input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.slide-kind span { display: block; padding: 3px 12px; border-radius: 6px; color: var(--muted-foreground); font-size: 12px; font-weight: 600; }
.slide-kind input:checked + span { background: var(--card); color: var(--text); }
.slide-kind input:focus-visible + span { outline: 2px solid var(--ring); }
.slide-row-tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.slide-row-tools .icon-button { width: 30px; height: 30px; }
.slide-row-tools .icon-button.danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.slide-arrow { display: inline-grid; }
.slide-arrow.up svg { transform: rotate(180deg); }
.slide-media { position: relative; aspect-ratio: 2 / 1; overflow: hidden; display: grid; place-items: center; border: 1.5px dashed var(--input); border-radius: 12px; background: var(--card); transition: border-color .15s, background .15s; }
.slide-media:has(img) { border-style: solid; border-color: var(--border); }
.slide-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.slide-media-empty { display: grid; justify-items: center; gap: 4px; padding: 12px; color: var(--muted-foreground); text-align: center; }
.slide-media-empty svg { width: 22px; height: 22px; color: var(--blue-soft); }
.slide-media-empty b { color: var(--text); font-size: 13px; }
.slide-media-empty small { font-size: 11px; line-height: 1.7; }
.slide-media-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(10, 15, 29, .72); color: var(--tint); font-size: 13px; }
.slide-media-busy[hidden] { display: none; }
.slide-media-busy i { width: 16px; height: 16px; border: 2px solid var(--blue-soft); border-top-color: transparent; border-radius: 50%; animation: slide-spin .8s linear infinite; }
@keyframes slide-spin { to { transform: rotate(360deg); } }
.slide-media-actions { display: flex; justify-content: flex-start; margin-top: 8px; }
.slide-text-fields { display: grid; gap: 10px; }
.slide-text-fields textarea { resize: vertical; }
/* Text slides: the app's font (Vazirmatn, OFL) and the owner's colours, painted through the CSSOM. */
.slide-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.slide-preset { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); cursor: pointer; font: 700 13px "Vazirmatn", sans-serif; transition: transform .15s, box-shadow .15s; }
.slide-preset:hover { transform: scale(1.08); box-shadow: 0 0 0 2px var(--card-raised), 0 0 0 4px var(--input); }
.slide-preset:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.slide-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.slide-color { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 12px; cursor: pointer; }
.slide-color input { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--input); border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
.slide-color[data-off] { opacity: .35; pointer-events: none; }
.slide-contrast { margin: 0; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--warning-surface); color: var(--amber); font-size: 12px; }
.slide-contrast[hidden] { display: none; }
.slide-type-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.slide-segment { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--muted-surface); }
.slide-segment label { position: relative; flex: 1; }
.slide-segment input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.slide-segment span { display: block; padding: 4px 6px; border-radius: 6px; color: var(--muted-foreground); font-size: 12px; font-weight: 600; text-align: center; }
.slide-segment input:checked + span { background: var(--card); color: var(--text); }
.slide-segment input:focus-visible + span { outline: 2px solid var(--ring); }
.slide-sample, .pv-text { font-family: "Vazirmatn", sans-serif; }
.slide-sample { aspect-ratio: 2 / 1; display: grid; align-content: center; gap: 4px; padding: 0 18px; overflow: hidden; border-radius: 12px; }
.slide-sample strong, .pv-text strong { font-size: 19px; font-weight: 700; line-height: 1.45; }
.slide-sample span, .pv-text div span { font-size: 13px; font-weight: 400; line-height: 1.6; opacity: .88; }
[data-size="small"] strong { font-size: 16px; }
[data-size="small"] div span, .slide-sample[data-size="small"] span { font-size: 12px; }
[data-size="large"] strong { font-size: 23px; }
[data-size="large"] div span, .slide-sample[data-size="large"] span { font-size: 14px; }
[data-weight="regular"] strong { font-weight: 400; }
.slide-row-foot { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; }
.slide-problems { margin: 0; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--error-surface); color: var(--red); font-size: 12px; }
.slide-problems[hidden] { display: none; }

@media (max-width: 980px) {
  .slider-layout { grid-template-columns: minmax(0, 1fr); }
  .slider-stage { position: static; max-width: 360px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
  .top-source { grid-template-columns: minmax(0, 1fr); }
  .slider-list { grid-template-columns: minmax(0, 1fr); }
  .slide-row-foot { grid-template-columns: minmax(0, 1fr); }
}

/* Notifications view (notifications.js) */
.nt-composer { margin: 16px 0; padding: 20px; }
.nt-composer-head { margin-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nt-composer-head h2 { margin: 2px 0 0; font-size: 18px; }
.nt-composer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 20px; }
.nt-composer-side { position: sticky; top: 76px; display: grid; gap: 12px; }
.nt-block { padding: 14px 0; border-bottom: 1px solid var(--border); }
.nt-block:first-child { padding-top: 0; }
.nt-block h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.nt-block .form-field + .form-field { margin-top: 12px; }
.nt-lang-tabs { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.nt-lang-tabs.small { margin: 0; }
.nt-lang { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--input); border-radius: 999px; background: transparent; color: var(--muted-foreground); font-size: 13px; cursor: pointer; }
.nt-lang-tabs.small .nt-lang { height: 26px; padding: 0 9px; font-size: 12px; }
.nt-lang.active { border-color: var(--blue-bright); background: color-mix(in srgb, var(--blue-bright) 14%, transparent); color: var(--text); }
.nt-lang i { width: 6px; height: 6px; border-radius: 50%; background: var(--input); }
.nt-lang i.filled { background: var(--mint); }
.nt-lang-panel .form-field + .form-field { margin-top: 12px; }
.nt-image { margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }
.nt-image-preview { width: 160px; aspect-ratio: 2 / 1; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px dashed var(--input); border-radius: var(--radius-sm); color: var(--muted-foreground); font-size: 12px; }
.nt-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.nt-image-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nt-image-actions small { width: 100%; color: var(--muted-foreground); font-size: 12px; }
.nt-inline-row { grid-column: 1 / -1; min-height: 0; padding: 4px 0 0; border: 0; }
.nt-chip-row { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--tint); font-size: 13px; }
.nt-chip-row small { color: var(--muted-foreground); }
.nt-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nt-estimate { margin-top: 14px; padding: 12px 14px; display: flex; align-items: baseline; gap: 10px; border-radius: var(--radius-md); background: var(--muted-surface); color: var(--muted-foreground); font-size: 13px; line-height: 1.8; }
.nt-estimate:empty { display: none; }
.nt-estimate strong { color: var(--text); font-size: 22px; }
.nt-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nt-phone { padding: 10px; border: 1px solid var(--border); border-radius: 28px; background: #05080f; }
.nt-phone-screen { min-height: 300px; padding: 10px; border-radius: 20px; background: linear-gradient(160deg, #1b2a52, #0a0f1d 70%); }
.nt-phone-status { margin-bottom: 14px; display: flex; justify-content: space-between; color: rgba(255,255,255,.7); font-size: 11px; direction: ltr; }
.nt-card { padding: 12px 14px; display: grid; gap: 4px; border-radius: 16px; background: rgba(240,244,255,.95); color: #1b2233; }
.nt-card.high { box-shadow: 0 0 0 2px var(--amber); }
.nt-card-head { display: flex; align-items: center; gap: 6px; color: #5b6478; font-size: 11px; }
.nt-card-head img { width: 16px; height: 16px; border-radius: 4px; }
.nt-card strong { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.nt-card p { margin: 0; color: #3b4458; font-size: 13px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.nt-card-image { width: 100%; margin-top: 6px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; }
.nt-card-button { margin-top: 6px; justify-self: start; color: #315bd6; font-size: 13px; font-weight: 700; }
.nt-phone-dim { display: flex; flex-direction: column; background: linear-gradient(160deg, #101a33, #05080f 70%); }
.nt-popup { margin: auto 4px; padding: 16px; display: grid; gap: 6px; border: 1px solid rgba(175,198,255,.18); border-radius: 22px; background: #131b31; color: #fff; }
.nt-popup.high { box-shadow: 0 0 0 2px var(--amber); }
.nt-popup strong { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.nt-popup p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.nt-popup .nt-card-image { margin: 0 0 4px; }
.nt-popup-button { margin-top: 8px; padding: 9px; border-radius: 14px; background: #315bd6; text-align: center; font-size: 13px; font-weight: 700; }
.nt-popup-close { padding: 4px; color: #afc6ff; text-align: center; font-size: 13px; }
.nt-fallback, .nt-phone-note { margin: 10px 4px 0; color: rgba(255,255,255,.65); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.nt-side-actions { display: grid; gap: 8px; }
.nt-filters { margin: 14px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nt-filter { height: 30px; padding: 0 12px; border: 1px solid var(--input); border-radius: 999px; background: transparent; color: var(--muted-foreground); font-size: 13px; cursor: pointer; }
.nt-filter em { font-style: normal; opacity: .75; }
.nt-filter.active { border-color: var(--blue-bright); color: var(--text); }
.nt-item { padding: 16px 0; border-top: 1px solid var(--border); }
.nt-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nt-name { color: var(--muted-foreground); font-size: 12px; }
.nt-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
.nt-tags .catalog-tag { font-size: 11px; }
.nt-high { border-color: color-mix(in srgb, var(--amber) 40%, transparent) !important; color: var(--amber) !important; }
.nt-item h3 { margin: 10px 0 2px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.nt-body { margin: 0; color: var(--tint); font-size: 13px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
.nt-meta { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted-foreground); font-size: 12px; }
.nt-funnel { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nt-funnel-step { position: relative; padding: 8px 10px 12px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.nt-funnel-step span { display: block; color: var(--muted-foreground); font-size: 11px; }
.nt-funnel-step strong { font-size: 17px; }
.nt-funnel-step small { margin-top: 2px; display: block; color: var(--mint); font-size: 12px; }
.nt-funnel-step.muted small { color: var(--muted-foreground); }
.nt-funnel-step .nt-bar { position: absolute; inset: auto 0 0 auto; height: 3px; }
.nt-bar { display: block; width: 0; height: 6px; border-radius: 999px; background: var(--blue-bright); }
.nt-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.nt-settings-grid { margin: 12px 0 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#nt-settings .button { margin-top: 12px; }
.nt-reach-group + .nt-reach-group { margin-top: 14px; }
.nt-reach-group h4 { margin: 12px 0 8px; color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.nt-reach-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; }
.nt-reach-row + .nt-reach-row { margin-top: 6px; }
.nt-reach-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-report-drawer { width: min(560px, 100vw); }
.nt-report-head { margin: 18px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted-foreground); }
.nt-report-section { margin: 22px 0 10px; font-size: 14px; }
.nt-chart { height: 140px; padding: 8px; display: flex; align-items: flex-end; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); direction: ltr; }
.nt-chart-col { position: relative; height: 100%; display: flex; flex: 1 1 0; align-items: flex-end; gap: 1px; }
.nt-chart-col i { display: block; flex: 1 1 0; min-height: 0; border-radius: 2px 2px 0 0; }
.nt-chart i.shown, .nt-chart-legend i.shown { background: color-mix(in srgb, var(--blue-bright) 55%, transparent); }
.nt-chart i.opened, .nt-chart-legend i.opened { background: var(--mint); }
.nt-chart-legend { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted-foreground); font-size: 12px; }
.nt-chart-legend i { width: 10px; height: 10px; margin-inline-end: 5px; display: inline-block; border-radius: 2px; }
@media (max-width: 1180px) {
  .nt-composer-grid { grid-template-columns: minmax(0, 1fr); }
  .nt-composer-side { position: static; }
}
@media (max-width: 640px) {
  .nt-composer { padding: 14px; }
  .nt-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nt-image { flex-direction: column; align-items: stretch; }
  .nt-image-preview { width: 100%; }
}

/* Ad placements report (ads-report.js) */
.ads-report-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ads-report-table td { vertical-align: top; }
.ads-report-table td > small { display: block; margin-top: 1px; color: var(--muted-foreground); font-size: 12px; }
.ads-report-table tfoot td { border-top: 2px solid var(--border); font-weight: 600; background: var(--muted-surface); }
.ad-status { display: inline-flex; margin-top: 4px; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; line-height: 1.7; white-space: nowrap; }
.ad-status.mint { color: var(--mint); }
.ad-status.amber { color: var(--amber); }
.ad-status.red { color: var(--red); }
.ad-status.muted { color: var(--muted-foreground); }
.ad-error-list { margin: 4px 0 0; padding: 0; list-style: none; font-size: 11px; }
.ad-error-list li { display: flex; gap: 6px; align-items: baseline; color: var(--muted-foreground); white-space: nowrap; }
.ad-error-list b { color: var(--text); font-weight: 600; }
.ads-report-notes { display: grid; gap: 6px; padding: 14px 18px 18px; color: var(--muted-foreground); font-size: 12px; line-height: 1.8; }
.ads-report-notes p { margin: 0; }
@media (max-width: 640px) {
  .table-scroll tfoot { display: block; width: 100%; }
  .table-scroll tfoot tr { display: block; padding: 10px 14px; }
  .ads-report-tools { width: 100%; }
}

/* ---------- Ads hub (ads-hub.js): report, placements, slider and rules in one view ---------- */
.ads-heading { align-items: center; }
.ads-period { display: flex; align-items: center; gap: 8px; }
.ads-period .filter-group { padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.ads-period .icon-button.spinning svg { animation: spin .6s linear; }

.ads-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; transition: opacity .2s; }
.ads-kpis.loading { opacity: .6; }
.ads-kpis-empty { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted-foreground); font-size: 13px; text-align: center; }
.ads-kpi { position: relative; min-width: 0; padding: 14px 16px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.ads-kpi::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: currentColor; opacity: .7; }
.ads-kpi span, .ads-kpi strong, .ads-kpi small { display: block; }
.ads-kpi span { color: var(--muted-foreground); font-size: 12px; }
.ads-kpi strong { margin-top: 6px; overflow: hidden; color: var(--text); font-size: 20px; line-height: 1.35; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ads-kpi small { margin-top: 3px; overflow: hidden; color: var(--muted-foreground); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ads-kpi.mint { color: var(--mint); }
.ads-kpi.blue { color: var(--blue-light); }
.ads-kpi.violet { color: var(--violet); }
.ads-kpi.amber { color: var(--amber); }
.ads-kpi.red { color: var(--red); }
.ads-kpi.muted { color: var(--muted-foreground); }
.ads-kpi[data-kpi="revenue"] strong { color: var(--mint); }

.ads-tabs { position: sticky; top: 64px; z-index: 5; display: flex; gap: 4px; margin: 0 0 18px; padding: 4px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); scrollbar-width: none; }
.ads-tabs::-webkit-scrollbar { display: none; }
.ads-tab { flex: 1 0 auto; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s; }
.ads-tab svg { width: 16px; height: 16px; }
.ads-tab:hover { background: var(--hover); color: var(--text); }
.ads-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.ads-tab[aria-selected="true"] { background: var(--card-raised); color: var(--text); box-shadow: 0 0 0 1px var(--input); }
.ads-tab[aria-selected="true"] svg { color: var(--blue-soft); }
.ads-tab em { min-width: 22px; height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--muted-surface); color: var(--muted-foreground); font-size: 11px; font-style: normal; font-weight: 600; }
.ads-tab em:empty { display: none; }
.ads-tab-short { display: none; }
.ads-tab em[data-tone="on"] { background: var(--success-surface); color: var(--mint); }
.ads-tab em[data-tone="warn"] { background: var(--warning-surface); color: var(--amber); }
.ads-panel { display: grid; gap: 16px; animation: enter .2s ease both; }
.ads-panel[hidden] { display: none; }
.ads-form { display: grid; gap: 0; }

/* Report tab */
.ads-report-card .card-heading p { font-size: 12px; }
.ads-report-notes { padding: 0; }
.ads-report-notes summary { padding: 14px 18px; color: var(--tint); cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.ads-report-notes summary::-webkit-details-marker { display: none; }
.ads-report-notes summary::before { content: "＋"; display: inline-block; width: 18px; color: var(--blue-soft); }
.ads-report-notes[open] summary::before { content: "－"; }
.ads-report-notes p { padding: 0 18px; }
.ads-report-notes p:last-child { padding-bottom: 18px; }
.ads-report-table tbody tr:hover td { background: var(--hover); }

/* Placements tab */
.ads-globals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ads-globals .ads-master { margin: 0; align-items: flex-start; }
.ads-globals .ads-master strong { display: block; font-size: 14px; }
.ads-globals .ads-master small { display: block; margin-top: 4px; color: var(--muted-foreground); font-size: 12px; line-height: 1.8; }
.ads-consent { border-color: var(--border) !important; background: var(--card-raised) !important; }
.ads-more { margin-top: 6px; font-size: 12px; }
.ads-more summary { color: var(--blue-soft); cursor: pointer; }
.ads-more p { margin: 6px 0 0; color: var(--muted-foreground); line-height: 1.8; }
.ads-journey-card .ads-help { margin-top: 12px; font-size: 12px; }
.ads-journey-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.ads-journey-head .ads-status { margin: 4px 0 0; }
.ads-journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: none; }
.ads-journey li { position: relative; min-width: 0; }
.ads-journey li + li::before { content: ""; position: absolute; top: 50%; right: -8px; width: 8px; height: 1px; background: var(--input); }
.ads-journey-step { width: 100%; height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); color: var(--text); cursor: pointer; font: inherit; text-align: right; transition: border-color .15s, background .15s; }
.ads-journey-step:hover { border-color: var(--input); background: var(--hover); }
.ads-journey-step:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ads-journey-step i { width: 24px; height: 24px; display: grid; place-items: center; grid-row: 1 / 3; border-radius: 50%; background: var(--muted-surface); color: var(--muted-foreground); font-size: 12px; font-style: normal; font-weight: 700; }
.ads-journey-step span { min-width: 0; display: grid; }
.ads-journey-step small { color: var(--muted-foreground); font-size: 11px; }
.ads-journey-step b { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ads-journey-step em { grid-column: 2; justify-self: start; padding: 0 8px; border-radius: 999px; background: var(--muted-surface); color: var(--muted-foreground); font-size: 11px; font-style: normal; line-height: 1.8; white-space: nowrap; }
.ads-journey-step.mint i, .ads-journey-step.mint em { background: var(--success-surface); color: var(--mint); }
.ads-journey-step.amber i, .ads-journey-step.amber em { background: var(--warning-surface); color: var(--amber); }
.ads-journey-step.red i, .ads-journey-step.red em { background: var(--error-surface); color: var(--red); }

.ads-placement-grid { margin-top: 0; gap: 16px; }
.ad-placement { display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--card); scroll-margin-top: 130px; }
.ad-placement > * { margin-inline: 18px; }
.ad-placement[data-state="mint"] { border-color: color-mix(in srgb, var(--mint) 38%, transparent); }
.ad-placement[data-state="amber"] { border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.ad-placement[data-state="red"] { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.ad-placement.flash { animation: ad-flash 1.4s ease; }
@keyframes ad-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--ring); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ad-placement-head { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--card-raised); }
.ad-format-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--blue-bright) 14%, transparent); color: var(--blue-soft); }
.ad-format-icon svg { width: 17px; height: 17px; }
.ad-format-icon.interstitial { background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--violet); }
.ad-format-icon.app-open { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); }
.ad-placement-title { flex: 1 1 auto; min-width: 0; }
.ad-placement-title h3 { margin: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.ad-placement-head .ad-state { margin: 0; }
.ad-placement .ad-location { margin-block: 12px 0; font-size: 12px; }
.ad-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 12px 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-soft); }
.ad-metrics:empty { display: none; }
.ad-metrics > div { min-width: 0; padding: 8px 10px; }
.ad-metrics > div + div { border-right: 1px solid var(--border); }
.ad-metrics small { display: block; overflow: hidden; color: var(--muted-foreground); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ad-metrics b { display: block; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ad-metrics-empty { grid-column: 1 / -1; margin: 0; padding: 8px 10px; color: var(--muted-foreground); font-size: 12px; }
.ad-placement-fields { margin-block: 14px 0; }
.ad-placement[data-enabled="false"]:not(.ad-placement-top) .ad-placement-fields { opacity: .62; }
.ad-placement .form-field.ad-unit { margin-bottom: 10px; }
.ad-policy label { display: block; min-width: 0; }
.ad-input-unit { position: relative; display: block; margin-top: 4px; }
.ad-input-unit input { margin-top: 0 !important; padding-left: 44px !important; }
.ad-input-unit i { position: absolute; top: 50%; left: 8px; color: var(--muted-foreground); font-size: 11px; font-style: normal; transform: translateY(-50%); pointer-events: none; }
.ad-placement-foot { margin: 14px 0 0; padding: 10px 18px; border-top: 1px solid var(--border); }
.ad-placement-foot .ad-state { margin: 0; }
.ad-placement[data-state="amber"] .ad-state { border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }
.ad-placement[data-state="red"] .ad-state { border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.ad-placement[data-state="muted"] .ad-state { color: var(--muted-foreground); }
.ad-placement-top { padding-bottom: 18px; }
.ad-placement-top .top-source { margin-top: 14px; }
.ad-placement-top .top-native { margin-top: 12px; }
.ad-placement-top .top-native-switch { min-height: 0; padding: 10px 12px !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm); }
.ad-placement-top .top-slider-note { margin-top: 12px; }
.link-button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Slider tab */
.slider-section.card { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--border); }
.slider-section .slider-body { margin-top: 18px; }
.slider-inactive { display: none; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: var(--radius-md); background: var(--warning-surface); }
.slider-inactive div { display: grid; gap: 2px; font-size: 13px; line-height: 1.8; }
.slider-inactive strong { color: var(--amber); }
.slider-inactive span { color: var(--tint); }
.slider-section[data-active="false"] .slider-inactive { display: flex; }
.slider-section[data-active="false"] .slider-body { opacity: .5; filter: saturate(.6); }
.slider-rules { margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.9; }
.slider-list-head { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.slider-list-head h3 { margin: 0; font-size: 15px; }
.slider-list-head small { color: var(--muted-foreground); font-size: 12px; }

/* Rules tab */
.ad-timing-section.card, .ad-timezone-section.card { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--border); }
.ad-timezone-section .ads-help { margin: 14px 0; }

/* Save bar: shared by the three editing tabs, sticky at the bottom of the view. */
.ads-problems { margin: 16px 0 0; }
.ads-savebar { position: sticky; bottom: 14px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 12px 14px 12px 12px; border: 1px solid var(--input); border-radius: var(--radius); background: color-mix(in srgb, var(--card-raised) 94%, transparent); box-shadow: 0 14px 40px rgba(0, 0, 0, .4); backdrop-filter: blur(12px); }
.ads-savebar-state { min-width: 0; display: flex; align-items: center; gap: 10px; }
.ads-savebar-state > div { min-width: 0; }
.ads-savebar-state strong { display: block; font-size: 13px; }
.ads-savebar-state small { display: block; color: var(--muted-foreground); font-size: 11px; line-height: 1.7; }
.ads-savebar-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 18%, transparent); }
.ads-savebar[data-dirty="true"] { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.ads-savebar[data-dirty="true"] .ads-savebar-dot { background: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 18%, transparent); }
.ads-savebar .unsaved-badge { display: none; }
.ads-savebar-actions { display: flex; flex: 0 0 auto; gap: 8px; }
/* On the report tab the bar appears only while there is something to publish. */
#view-ads[data-ads-tab="report"] .ads-savebar:not([data-dirty="true"]) { display: none; }
#view-ads[data-ads-tab="report"] .ads-savebar { margin-top: 16px; }
/* Network revenue tab (network-report.js): the ad network's own report. The app report's
   period and tiles belong to the report tab, so they step aside here. */
#view-ads[data-ads-tab="network"] #ads-kpis, #view-ads[data-ads-tab="network"] .ads-period { display: none; }
#view-ads[data-ads-tab="network"] .ads-savebar:not([data-dirty="true"]) { display: none; }
#view-ads[data-ads-tab="network"] .ads-savebar { margin-top: 16px; }
/* The route tab has its own save button; the shared bar shows only when another tab has unsaved edits. */
#view-ads[data-ads-tab="route"] #ads-kpis, #view-ads[data-ads-tab="route"] .ads-period { display: none; }
#view-ads[data-ads-tab="route"] .ads-savebar:not([data-dirty="true"]) { display: none; }
#view-ads[data-ads-tab="route"] .ads-savebar { margin-top: 16px; }
.net-panel, .net-panel #net-body { grid-template-columns: minmax(0, 1fr); }
.net-panel #net-body { display: grid; gap: 16px; }
.net-panel #net-body[hidden] { display: none; }
.net-key { padding: 18px; }
.net-key.setup { border-color: color-mix(in srgb, var(--amber) 35%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 5%, var(--card)), var(--card)); }
.net-key-intro { display: flex; align-items: flex-start; gap: 14px; }
.net-key-intro h2 { margin: 0; font-size: 16px; font-weight: 600; }
.net-key-intro p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.9; }
.net-key-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--mint) 13%, transparent); color: var(--mint); }
.net-key-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.net-steps { margin: 8px 0 0; padding-inline-start: 18px; color: var(--tint); font-size: 13px; line-height: 2; }
.net-key-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.net-key-form > small { grid-column: 1 / -1; color: var(--muted-foreground); font-size: 12px; line-height: 1.8; }
.net-key-actions { display: flex; gap: 8px; }
.net-key-line { display: flex; align-items: center; gap: 12px; }
.net-key-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.net-key-text strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.net-key-text strong .ad-status { margin: 0; }
.net-key-text small { color: var(--muted-foreground); font-size: 12px; }
.net-key-buttons { display: flex; gap: 6px; }
.net-key-error, .net-break-error { margin: 0; color: var(--red); font-size: 13px; }
.net-break-error { padding: 0 18px 18px; }
.net-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.net-toolbar .filter-group { border: 1px solid var(--border); }
.net-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.net-dates label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 12px; }
.net-dates input { height: 32px; padding: 0 8px; border: 1px solid var(--input); border-radius: var(--radius-sm); outline: 0; background: rgba(255,255,255,.02); color: var(--text); font: inherit; font-size: 13px; color-scheme: dark; }
.net-dates input:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px var(--ring); }
.net-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.net-actions .icon-button.spinning svg { animation: spin .6s linear; }
.net-alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); border-radius: var(--radius-md); background: var(--error-surface); color: var(--red); font-size: 13px; line-height: 1.8; }
.net-alert[hidden] { display: none; }
.net-alert svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; }
.net-alert span { flex: 1 1 auto; }
.net-range { margin: -6px 2px 0; color: var(--muted-foreground); font-size: 12px; }
.net-range:empty { display: none; }
.net-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.net-change { font-style: normal; font-weight: 600; }
.net-change.up { color: var(--mint); }
.net-change.down { color: var(--red); }
.net-change.flat { color: var(--muted-foreground); }
.net-table td small.net-high { color: var(--red); font-weight: 600; }
.net-chart-card .card-heading { align-items: center; }
.net-chart-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.net-chart-facts:empty { display: none; }
.net-chart-facts div, .net-compare-summary div { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-soft); }
.net-chart-facts small, .net-compare-summary small { display: block; color: var(--muted-foreground); font-size: 11px; }
.net-chart-facts b, .net-compare-summary b { display: block; margin-top: 3px; overflow: hidden; color: var(--text); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.net-compare .card-heading { flex-wrap: wrap; }
.net-compare .card-heading p { max-width: 720px; }
.net-compare-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 18px 14px; }
.net-compare-summary:empty { display: none; }
.net-gap { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--muted-surface); color: var(--muted-foreground); font-size: 12px; font-weight: 600; line-height: 1.8; }
.net-gap.mint { background: var(--success-surface); color: var(--mint); }
.net-gap.amber { background: var(--warning-surface); color: var(--amber); }
.net-gap.red { background: var(--error-surface); color: var(--red); }
.net-table td .ad-status { margin-top: 4px; margin-inline-end: 4px; }
.net-table tbody tr:hover td { background: var(--hover); }
.net-table tr.net-missing td { color: var(--muted-foreground); }
.net-share { min-width: 110px; display: grid; grid-template-columns: minmax(50px, 1fr) auto; align-items: center; gap: 8px; }
.net-share em { min-width: 42px; color: var(--muted-foreground); font-size: 12px; font-style: normal; text-align: left; }
.net-hint { margin: 0; padding: 10px 18px 16px; color: var(--muted-foreground); font-size: 12px; line-height: 1.8; }
.net-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; transition: opacity .2s; }
.net-grid.loading { opacity: .6; }
.net-grid > .table-card { margin-top: 0; }
.net-grid > .table-card[hidden] { display: none; }
.net-grid > [data-net-break="adUnit"] { grid-column: 1 / -1; }
.net-grid .empty-state { height: auto; padding: 22px 18px; }
.net-footer { margin: 0 2px; color: var(--muted-foreground); font-size: 12px; line-height: 1.8; }
.net-footer:empty { display: none; }

/* Toasts rise above the save bar so they never cover its buttons. */
body:has(#view-ads.active) .toast-region { bottom: 96px; }

@media (max-width: 1280px) {
  .ads-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .net-compare-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ads-journey li + li::before { display: none; }
}
@media (max-width: 1100px) {
  .ads-placement-grid { grid-template-columns: minmax(0, 1fr); }
  .net-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ads-tabs { top: 56px; }
}
@media (max-width: 640px) {
  .ads-heading { align-items: stretch; }
  .ads-period { justify-content: space-between; }
  .ads-period .filter-group { flex: 1 1 auto; }
  .ads-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ads-kpi { padding: 12px; }
  .ads-kpi strong { font-size: 17px; }
  .ads-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 3px; }
  .net-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-compare-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 14px 12px; }
  .net-key-form { grid-template-columns: minmax(0, 1fr); }
  .net-key-line { flex-wrap: wrap; }
  .net-key-buttons { width: 100%; }
  .net-toolbar { padding: 8px; }
  .net-toolbar .filter-group { width: 100%; }
  .net-actions { margin-inline-start: 0; }
  .net-hint { padding: 10px 14px 14px; }
  .ads-tab { position: relative; height: 52px; padding: 4px 2px; flex-direction: column; gap: 3px; font-size: 11px; }
  .ads-tab-long { display: none; }
  .ads-tab-short { display: inline; }
  .ads-tab em { position: absolute; top: 3px; left: 3px; min-width: 18px; height: 16px; padding: 0 5px; font-size: 10px; }
  .ads-globals { grid-template-columns: minmax(0, 1fr); }
  .ads-journey { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ads-journey-step { grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 10px; }
  .ads-journey-step i { grid-row: auto; }
  .ads-journey-step small { display: none; }
  .ads-journey-step em { grid-column: 3; }
  .ad-placement > * { margin-inline: 14px; }
  .ad-placement-head { flex-wrap: wrap; padding: 12px 14px; }
  .ad-placement-head .ad-state { order: 3; margin-inline-start: 48px; }
  .ad-placement-title h3 { white-space: normal; }
  .ad-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-metrics > div:nth-child(3) { border-right: 0; }
  .ad-metrics > div:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .ad-placement-foot { padding: 10px 14px; }
  .ad-policy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slider-inactive { align-items: stretch; flex-direction: column; }
  .ads-tab em[data-tone="off"] { min-width: 0; width: 8px; height: 8px; padding: 0; font-size: 0; }
  .ads-savebar { bottom: 8px; gap: 8px; padding: 8px 8px 8px 10px; }
  .ads-savebar-state { gap: 8px; }
  .ads-savebar-state strong { font-size: 12px; }
  .ads-savebar-state small { display: none; }
  #reset-ads { width: 38px; padding: 0; }
  #reset-ads span { display: none; }
  body:has(#view-ads.active) .toast-region { bottom: 72px; }
}
@media (max-width: 340px) {
  .ad-policy { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ad-placement.flash, .ads-panel { animation: none; }
}

/* ---------- Instagram automatic DMs (igdm.js) ---------- */
.igdm-steps { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.igdm-steps li { display: flex; align-items: center; gap: 10px; color: var(--muted-foreground); font-size: 13px; }
.igdm-steps li svg { width: 18px; height: 18px; flex: 0 0 auto; padding: 3px; border-radius: 50%; background: var(--muted-surface); }
.igdm-steps li.done { color: var(--text); }
.igdm-steps li.done svg { background: color-mix(in srgb, var(--mint) 22%, transparent); color: var(--mint); }
.igdm-copy { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.igdm-copy > span { min-width: 110px; color: var(--tint); font-size: 13px; }
.igdm-copy code { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-raised); font-size: 13px; overflow-wrap: anywhere; }
.igdm-actions { margin-top: 14px; }
.igdm-media { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.igdm-media label { padding: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-raised); cursor: pointer; }
.igdm-media label:has(input:checked) { border-color: var(--blue-light); }
.igdm-media input { grid-row: span 2; width: 16px; height: 16px; accent-color: var(--blue-bright); }
.igdm-media span { color: var(--text); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.igdm-media small { color: var(--muted-foreground); font-size: 12px; }
.igdm-media small a { color: var(--blue-soft); }
.igdm-comment { min-width: 160px; max-width: 280px; white-space: pre-wrap; overflow-wrap: anywhere; }
.igdm-gate { margin-top: 12px; display: grid; gap: 12px; }

/* ---------- Currency bar (fx-bar.js) and rolling numbers (roll.js) ---------- */
.fx-bar { margin: -6px 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.fx-bar .filter-chip:disabled { cursor: progress; opacity: .45; }
.fx-rates { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted-foreground); font-size: 12px; }
.fx-rate { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.fx-rate b { color: var(--text); font-size: 14px; font-weight: 700; }
.fx-rate small { flex-basis: 100%; font-size: 11px; opacity: .85; }
.fx-rate small a { color: var(--blue-soft); text-decoration: none; }
.fx-rate small a:hover { text-decoration: underline; }
.fx-rate.stale b { color: var(--amber, #F0C675); }
.fx-rate.missing { opacity: .7; }
.fx-change { font-size: 11px; font-style: normal; font-weight: 600; }
.fx-change.up { color: var(--mint); }
.fx-change.down { color: var(--red); }
.ads-kpi small.fx-others { color: var(--text); opacity: .7; }

span.roll { position: relative; display: inline; color: inherit; font-size: inherit; font-variant-numeric: tabular-nums; border-radius: 6px; transition: color .4s; }
.roll .roll-num { display: inline-flex; direction: ltr; unicode-bidi: isolate; vertical-align: middle; height: 1.2em; line-height: 1.2em; color: inherit; font-size: inherit; }
.roll .roll-wheel { display: block; height: 1.2em; overflow: hidden; color: inherit; font-size: inherit; transition: opacity .12s; }
.roll .roll-strip { display: flex; flex-direction: column; will-change: transform; color: inherit; font-size: inherit; }
.roll .roll-strip > span { display: block; height: 1.2em; line-height: 1.2em; text-align: center; color: inherit; font-size: inherit; }
.roll .roll-char { display: inline; color: inherit; font-size: inherit; }
.roll .roll-num .roll-char { display: block; line-height: 1.2em; }
span.roll.roll-up { animation: roll-flash-up 1.8s ease-out; }
span.roll.roll-down { animation: roll-flash-down 1.8s ease-out; }
.roll .roll-delta { display: inline-block; margin-inline-start: 6px; padding: 0 5px; border-radius: 999px; font-size: .6em; font-weight: 700; line-height: 1.6; vertical-align: middle; pointer-events: none; animation: roll-delta 1.9s ease-out forwards; }
.roll .roll-delta.up { background: rgba(102, 217, 178, .16); color: var(--mint); }
.roll .roll-delta.down { background: rgba(255, 180, 176, .16); color: var(--red); }
@keyframes roll-flash-up { 0%, 35% { color: var(--mint); } 100% { color: inherit; } }
@keyframes roll-flash-down { 0%, 35% { color: var(--red); } 100% { color: inherit; } }
@keyframes roll-delta {
  0% { opacity: 0; transform: translateY(60%); }
  18% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; transform: translateY(-15%); }
  100% { opacity: 0; transform: translateY(-70%); }
}
@media (max-width: 720px) {
  .fx-bar { margin-top: -4px; }
  .fx-rates { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  span.roll.roll-up, span.roll.roll-down, .roll .roll-delta { animation: none; }
}

/* Ads headline tiles (ads-hub-utils.js kpiMarkup): revenue wide, then eCPM, errors and the path
   of an ad from request to click with a meter each; same tile style as the rest of the panel. */
.ads-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ads-kpi.wide { grid-column: span 2; }
.ads-kpi.wide strong { font-size: 26px; }
.ads-kpi-meter { height: 6px; margin-top: 10px; }
@media (max-width: 760px) {
  .ads-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-kpi.wide { grid-column: 1 / -1; }
}

/* ---------- Ads route (ads view, "مسیر" tab; admin/ads-route-utils.js) ---------- */
.ads-route-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ads-route-now, .ads-route-health { min-width: 0; padding: 12px 14px; display: grid; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); }
.ads-route-now strong, .ads-route-health strong { font-size: 18px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-route-now strong.on { color: var(--mint); }
.ads-route-now strong.off { color: var(--muted-foreground); }
.ads-route-now small, .ads-route-health small { color: var(--muted-foreground); font-size: 12px; line-height: 1.7; }
.ads-route-status { grid-column: 1 / -1; margin: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--muted-foreground); font-size: 13px; line-height: 1.9; }
.ads-route-status.ok { border-color: color-mix(in srgb, var(--mint) 30%, transparent); color: var(--mint); }
.ads-route-status.wait { border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }
.ads-route-status.bad { border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); overflow-wrap: anywhere; }
.ads-route-switch { margin-top: 14px; }
.ads-route-modes { margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; }
.ads-route-modes legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; }
.ads-route-mode { min-width: 0; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); cursor: pointer; transition: border-color .15s; }
.ads-route-mode.selected { border-color: color-mix(in srgb, var(--blue-light) 60%, transparent); }
.ads-route-mode input { margin-top: 4px; accent-color: var(--blue-light); }
.ads-route-mode strong, .ads-route-mode small { display: block; }
.ads-route-mode strong { font-size: 14px; }
.ads-route-mode strong em { margin-right: 6px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--mint) 35%, transparent); border-radius: 999px; color: var(--mint); font-size: 11px; font-style: normal; font-weight: 600; }
.ads-route-mode small { margin-top: 4px; color: var(--muted-foreground); font-size: 12px; line-height: 1.8; }
.ads-route-card .priority-item { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
.ads-route-badges { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ads-route-fallback { margin-top: 12px; display: grid; gap: 6px; color: var(--muted-foreground); font-size: 13px; }
.ads-route-filters { padding: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); }
.ads-route-filters .filter-chip small { color: var(--muted-foreground); font-size: 11px; }
.ads-route-healthy { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 12px; }
.ads-route-bulk { padding: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); }
.ads-route-random { display: inline-flex; align-items: center; gap: 6px; }
.ads-route-random input { width: 64px; }
.ads-route-card .priority-available li { grid-template-columns: minmax(0, 1fr) auto auto; }
.ads-route-domains { margin-top: 16px; }
.ads-route-domains h3 { margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; }
.ads-route-domains h3 small { color: var(--muted-foreground); font-size: 12px; font-weight: 400; }
.ads-route-domains textarea { width: 100%; margin: 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.7; resize: vertical; }
.ads-route-help { margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.9; }
.ads-route-error { margin: 0 0 8px; color: var(--red); font-size: 12px; line-height: 1.9; }
@media (max-width: 980px) {
  .ads-route-modes, .ads-route-summary { grid-template-columns: minmax(0, 1fr); }
}

/* «سرورها» (fleet.js) */
#view-fleet td small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 0.78rem; white-space: normal; }
#view-fleet .meter { width: 120px; height: 6px; border-radius: var(--radius-sm); background: var(--muted-surface); overflow: hidden; }
#view-fleet .meter span { display: block; height: 100%; background: var(--mint); }
#view-fleet .meter.warn span { background: var(--amber); }
#view-fleet .meter.danger span { background: var(--red); }
#view-fleet .plain-list { margin: 0; padding: 0 0 4px; list-style: none; display: grid; gap: 8px; color: var(--text); font-size: 0.88rem; }
#view-fleet .plain-list li span { color: var(--muted-foreground); font-size: 0.8rem; }
#view-fleet .plain-list .empty-state { height: auto; padding: 12px 0; }
#view-fleet .inline-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 0.85rem; }
#view-fleet .notice.warning { margin: 0 0 16px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius: var(--radius-md); color: var(--amber); }
#view-fleet .secondary-button.small { padding: 4px 10px; font-size: 0.8rem; }
#view-fleet .fleet-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
#view-fleet #fleet-settings .field { display: grid; gap: 4px; font-size: 0.85rem; }
#view-fleet #fleet-settings .field small { color: var(--muted-foreground); }

/* Overview: the central's link to every VPN node (node-links.js). */
.node-links-card { margin-top: 16px; }
.node-links-card .heading-actions { display: flex; align-items: center; gap: 12px; }
.node-links { display: grid; gap: 8px; padding: 0 16px 16px; }
.node-link-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(150px, 1.4fr) repeat(4, minmax(100px, 1fr)); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); }
.node-link-row > div { min-width: 0; display: grid; gap: 3px; }
.node-link-row strong { font-size: 14px; }
.node-link-row small, .node-link-label { color: var(--muted-foreground); font-size: 12px; }
.node-link-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-link-path { grid-template-columns: 1fr auto; align-items: center; }
.node-link-path b { font-size: 12px; font-weight: 600; }
.node-link-line { width: 100%; height: 24px; overflow: visible; }
.node-link-line circle { fill: currentColor; }
.node-link-line line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.node-link-line.ok { color: var(--mint); }
.node-link-line.warn { color: var(--amber); }
.node-link-line.bad { color: var(--red); }
.node-link-line.bad line { stroke-dasharray: 3 5; opacity: .6; }
.node-link-line.in-use line { stroke-width: 3; stroke-dasharray: 8 6; animation: node-link-flow 1.2s linear infinite; }
@keyframes node-link-flow { to { stroke-dashoffset: -14; } }
.node-link-row.bad { border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
.node-gauge { display: block; height: 6px; border-radius: var(--radius-sm); background: var(--muted-surface); overflow: hidden; }
.node-gauge span { display: block; height: 100%; background: var(--mint); transition: width .4s ease; }
.node-gauge.warn span { background: var(--amber); }
.node-gauge.danger span { background: var(--red); }
@media (max-width: 900px) {
  .node-link-row { grid-template-columns: 1fr 1fr; }
  .node-link-path { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .node-link-line.in-use line { animation: none; } }

/* «سرورها»: egress through the nodes (fleet.js). */
.egress-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.egress-grid > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-raised); display: grid; gap: 3px; }
.egress-grid small { color: var(--muted-foreground); font-size: 12px; }
.egress-events { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--muted-foreground); }
.egress-hosts { margin-top: 8px; font-size: 12px; color: var(--muted-foreground); line-height: 1.8; word-break: break-word; }
.node-links-card > .card-heading { padding: 18px 18px 14px; }

/* «مدیریت سرور»: the node block on top, the central's own resources as a compact strip (node-links.js, server.js). */
#server-node-links-card { margin-top: 0; }
.server-central { margin-top: 16px; }
.server-central-title { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--muted-foreground); }
.server-central-strip { gap: 10px; }
.server-central-strip .kpi-card { padding: 10px 14px; min-height: 0; }
.server-central-strip .kpi-card strong { margin-top: 4px; font-size: 18px; }
.server-central-strip .kpi-card small { font-size: 11px; }
.server-central-details { margin-top: 10px; }
.server-central-details > summary { cursor: pointer; color: var(--muted-foreground); font-size: 13px; padding: 6px 2px; }
.server-central-details[open] > summary { margin-bottom: 4px; }

/* «نمای کلی»: the light summary, one chip per node. */
.node-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.node-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-raised); font-size: 13px; }
.node-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.node-chip.warn i { background: var(--amber); }
.node-chip.bad i { background: var(--red); }
.node-chip.in-use { border-color: color-mix(in srgb, var(--mint) 45%, var(--border)); }
.node-chip small { color: var(--muted-foreground); font-size: 12px; }
#system-egress { display: block; margin-top: 2px; }