:root {
  --bg: #f5f7f9;
  --panel: #ffffff;
  --ink: #171d26;
  --muted: #5b6673;
  --line: #e3e8ef;
  --brand: #1f6feb;
  --brand-dark: #1a5fd0;
  --ok: #1a7f37;
  --warn: #b7791f;
  --err: #c0392b;
  --err-bg: #fdecea;
  --subtle: #fafbfc;
  --code-bg: #eef1f4;
  --input-bg: #ffffff;
  /* semantic tint backgrounds (badges/alerts/pills/focus) — dark overrides below */
  --ok-bg: #e7f6ec;
  --ok-border: #b6e0c2;
  --brand-bg: #eaf1fd;
  --warn-bg: #fff6e6;
  --neutral-bg: #f0f0f0;
  --err-border: #f5c6c0;
  --danger-border: #f0b7b1;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(20,30,45,.06), 0 1px 3px rgba(20,30,45,.05);
}
:root[data-theme="dark"] {
  --bg: #10151b;
  --panel: #181f27;
  --ink: #e6e9ee;
  --muted: #94a1ad;
  --line: #2b333d;
  --brand: #4b90f7;
  --brand-dark: #3f81e6;
  --ok: #4bae6a;
  --warn: #d29a3e;
  --err: #e5695c;
  --err-bg: #3a2320;
  --subtle: #1e262f;
  --code-bg: #263039;
  --input-bg: #1b222b;
  /* tinted backgrounds sit on the dark panel; the (already-variable) text colors
     keep contrast. Low-alpha accent washes read as color without light patches. */
  --ok-bg: rgba(75,174,106,.16);
  --ok-border: rgba(75,174,106,.38);
  --brand-bg: rgba(75,144,247,.18);
  --warn-bg: rgba(210,154,62,.18);
  --neutral-bg: rgba(148,161,173,.14);
  --err-border: rgba(229,105,92,.42);
  --danger-border: rgba(229,105,92,.5);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --shadow: 0 1px 2px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Top bar ---- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 0 18px; height: 52px;
  position: sticky; top: 0; z-index: 10;
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-logo { display: block; border-radius: 5px; }
.mainnav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.mainnav a {
  color: var(--muted); padding: 6px 10px; border-radius: 6px; font-weight: 500;
}
.mainnav a:hover { background: var(--bg); text-decoration: none; }
.mainnav a.on { color: var(--brand); background: var(--brand-bg); }
.userbox { display: flex; align-items: center; gap: 12px; }
.who { color: var(--muted); font-size: 13px; }
.role { margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.role-admin { background: var(--ok-bg); color: var(--ok); }
.role-user  { background: var(--brand-bg); color: var(--brand); }
.role-guest { background: var(--neutral-bg); color: var(--muted); }
.logout button {
  background: none; border: 1px solid var(--line); color: var(--muted);
  padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.logout button:hover { border-color: var(--muted); color: var(--ink); }
.theme-toggle { background: none; border: 1px solid var(--line); color: var(--muted); padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; }
.theme-toggle:hover { border-color: var(--muted); }

/* ---- Content ---- */
.content { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 18px; }
.content.wide { max-width: 1720px; }
h1 { font-size: 20px; margin: 0 0 4px; }
.muted { color: var(--muted); }
.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 14px; }

/* ---- Cards ---- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin: 14px 0;
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 16px 0; }
.card.stat { text-align: left; }
/* stat cards that link to a filtered view: whole card is the click target */
a.card.stat { display: block; color: inherit;
  transition: border-color .13s ease, box-shadow .13s ease, transform .09s ease; }
a.card.stat:hover { text-decoration: none; border-color: var(--brand);
  box-shadow: 0 3px 8px rgba(20,30,45,.10); transform: translateY(-1px); }
a.card.stat:active { transform: translateY(0); }
.stat-num { font-size: 30px; font-weight: 700; }
.stat-label { color: var(--muted); }
.card-link { display: inline-block; margin-top: 10px; font-size: 13px; }
.card.note p { margin: 0; color: var(--muted); }

/* ---- Alerts ---- */
.alert { padding: 10px 12px; border-radius: 6px; margin: 10px 0; }
.alert.error { background: var(--err-bg); color: var(--err); border: 1px solid var(--err-border); }

/* ---- Forms ---- */
label { display: block; margin: 12px 0 0; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=url], select, textarea {
  width: 100%; margin-top: 5px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--input-bg);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); }
.btn, button.primary {
  display: inline-block; border: none; border-radius: 6px; cursor: pointer;
  font: inherit; font-weight: 600; padding: 10px 16px;
}
.btn.primary, button.primary { background: var(--brand); color: #fff; }
.btn.primary:hover, button.primary:hover { background: var(--brand-dark); }

/* ---- Login ---- */
.loginwrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.loginform { width: 340px; max-width: 92vw; }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand img { border-radius: 7px; }
.loginform h1 { margin: 0; }
.loginform .btn { width: 100%; margin-top: 18px; }

/* ---- Page head ---- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
.head-actions, .form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-actions { margin-top: 20px; padding-top: 4px; }
h2 { font-size: 16px; margin: 0 0 10px; }

/* ---- Buttons variants ---- */
.btn { background: var(--panel); border: 1px solid var(--line); color: var(--ink); padding: 8px 14px; font-weight: 500; }
.btn:hover { text-decoration: none; border-color: var(--muted); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: var(--danger-border); color: var(--err); }
.btn.danger:hover { background: var(--err-bg); }
button.link { background: none; border: none; color: var(--brand); cursor: pointer; padding: 0; font: inherit; }
button.link:hover { text-decoration: underline; }
button.link.danger { color: var(--err); }

/* ---- Tables ---- */
.grid { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 12px 0; }
.grid th, .grid td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid th { background: var(--subtle); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.grid tbody tr:last-child td { border-bottom: none; }
.grid tbody tr:hover { background: var(--subtle); }
.grid.urls .urlcell { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowactions { display: flex; gap: 7px; white-space: nowrap; }
.rowactions form { display: inline; }
/* round, colored icon actions (play / pause / delete) */
.iconbtn { width: 30px; height: 30px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); cursor: pointer;
  color: var(--muted); box-shadow: 0 1px 2px rgba(20,30,45,.07);
  transition: transform .09s ease, box-shadow .13s ease, background .13s ease; }
.iconbtn svg { width: 14px; height: 14px; display: block; }
.iconbtn:hover { transform: translateY(-1px); box-shadow: 0 3px 7px rgba(20,30,45,.14); }
.iconbtn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(20,30,45,.1); }
.iconbtn-play  { color: #2fa36a; }
.iconbtn-pause { color: #e0a13a; }
.iconbtn-del   { color: #e0584d; }
.iconbtn-play:hover  { background: rgba(47,163,106,.14); }
.iconbtn-pause:hover { background: rgba(224,161,58,.16); }
.iconbtn-del:hover   { background: rgba(224,88,77,.15); }
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.kv td:first-child { color: var(--muted); width: 260px; }
.kv tr:last-child td { border-bottom: none; }

/* ---- Badges / tags / chips ---- */
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; background: var(--code-bg); color: var(--muted); }
.badge.st-active   { background: var(--ok-bg); color: var(--ok); }
.badge.st-disabled { background: var(--neutral-bg); color: var(--muted); }
.badge.st-pending  { background: var(--brand-bg); color: var(--brand); }
.badge.st-scanning { background: var(--warn-bg); color: var(--warn); }
.badge.st-scan_error { background: var(--err-bg); color: var(--err); }
.badge.st-paused   { background: var(--warn-bg); color: var(--warn); }
.badge.st-archived { background: var(--neutral-bg); color: var(--muted); }
.tag { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--code-bg); color: var(--muted); font-size: 11px; }
.hint { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; font-weight: 400; }

/* ---- Filters ---- */
.filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 5px 11px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.chip:hover { text-decoration: none; border-color: var(--muted); }
.chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.search { display: flex; gap: 6px; align-items: center; }
.search input { width: 220px; margin: 0; }
.statusfilter { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); white-space: nowrap; }
.statusfilter select { width: auto; min-width: 150px; margin: 0; height: 38px; padding: 0 8px; font-size: 13px; }

/* URL list header: title external link + grouped two-zone filter card */
.urlh1 { display: inline-flex; align-items: center; gap: 9px; }
.titlelink { color: var(--muted); display: inline-flex; align-items: center; }
.titlelink svg { width: 18px; height: 18px; }
.titlelink:hover { color: var(--brand); }
.filtercard { padding: 16px 18px; margin: 14px 0; }
.filtercard .quick { margin-bottom: 12px; }
.fbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.searchbox { position: relative; flex: 1 1 260px; min-width: 200px; }
.searchbox .searchico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
/* the three controls share ONE box model so they line up exactly (same height,
   zero vertical padding, content vertically centered) */
.searchbox input, .fbar .statusfilter select, .fbar .btn {
  height: 40px; margin: 0; padding-top: 0; padding-bottom: 0; box-sizing: border-box;
  vertical-align: middle; line-height: normal;
}
.searchbox input { width: 100%; padding-left: 34px; padding-right: 12px; }
.fbar .statusfilter { flex: 0 0 auto; }
.fbar .statusfilter select { min-width: 160px; padding-left: 10px; padding-right: 10px; }
.fbar .btn { display: inline-flex; align-items: center; }
.filtercard .legend { margin: 12px 0 0; }
.chipcount { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 10px;
  background: var(--code-bg); color: var(--muted); font-size: 11px; font-weight: 600; vertical-align: baseline; }
.chip.on .chipcount { background: rgba(255,255,255,.28); color: #fff; }
.httpc-redir { color: var(--warn); }
.httpc-err { color: var(--err); font-weight: 600; }
/* schema.org type pills (Микроразметка report + URL card block) */
.stype { display: inline-block; font-family: var(--mono); font-size: 11px; line-height: 1.5;
  padding: 1px 7px; margin: 2px 4px 2px 0; border-radius: 5px;
  background: var(--code-bg); color: var(--ink); white-space: nowrap; }
.stypes { margin-top: 6px; }
.pagerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pagerow-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pagesum { white-space: nowrap; }
.perbox { margin: 0; }
.perlbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.perbox select { width: auto; min-width: 0; margin: 0; padding: 4px 8px; font-size: 12px; height: auto; }

/* ---- Breadcrumbs ---- */
.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.legend { margin: 2px 0 10px; }

/* ---- Subnav ---- */
.subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 16px; }
.subnav a { padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.subnav a:hover { text-decoration: none; }
.subnav a.on { color: var(--brand); border-bottom-color: var(--brand); }

/* ---- Forms / misc ---- */
.formcard { max-width: 560px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.check input { width: auto; margin: 0; }
label.check { flex-direction: row; }

/* ---- Settings page: balanced two-column masonry, capped fields ---- */
.settings { column-count: 2; column-gap: 18px; max-width: 1080px; }
.settings > .card { break-inside: avoid; margin: 0 0 18px; max-width: none; display: block; }
.settings .card h2 { margin-bottom: 10px; }
.settings .card > p.small { margin: -2px 0 12px; }
.settings .input-sm { max-width: 260px; }
.settings .input-md { max-width: 340px; }
.settings .form-actions { margin-top: 16px; }
.identity { display: flex; align-items: center; gap: 14px; }
.identity-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 19px; }
.identity-email { font-weight: 600; font-size: 15px; margin-bottom: 5px; word-break: break-all; }
.setlinks { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .settings { column-count: 1; } }
textarea { min-height: 120px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; }
.addbox summary { cursor: pointer; font-weight: 600; }
.addbox form { margin-top: 12px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form select { width: auto; margin: 0; }
.inline-mini { display: inline; }
.inline-mini select { width: auto; margin: 0; padding: 3px 6px; }
.pager { display: flex; align-items: center; gap: 6px; margin: 16px 0; flex-wrap: wrap; }
.pg { display: inline-flex; min-width: 32px; height: 32px; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--panel); font-size: 13px; }
.pg:hover { text-decoration: none; border-color: var(--muted); color: var(--ink); }
.pg.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.pg.gap { border: none; background: none; min-width: 16px; }
.pg-info { margin-left: 8px; }
.danger-zone { margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-inline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.card-inline-actions form { display: inline; }
.urltitle { font-size: 17px; word-break: break-all; }
.url-hero { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 2px; padding: 12px 16px; background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; }
.httpbadge { font-weight: 700; padding: 3px 10px; border-radius: 6px; font-size: 14px; white-space: nowrap; }
.httpbadge.h-ok { background: var(--ok-bg); color: var(--ok); }
.httpbadge.h-warn { background: var(--warn-bg); color: var(--warn); }
.httpbadge.h-err { background: var(--err-bg); color: var(--err); }
.hero-title { font-size: 16px; font-weight: 600; word-break: break-word; }
.hero-meta { margin-left: auto; white-space: nowrap; }
.alert.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border); }
code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ---- URL state card ---- */
.kv.seo td:first-child { width: 210px; vertical-align: top; }
.mvitem { padding: 1px 0; word-break: break-word; }
.mvitem + .mvitem { border-top: 1px dotted var(--line); margin-top: 3px; padding-top: 4px; }
.absent { color: var(--muted); font-style: italic; }
.cnt { color: var(--muted); font-weight: 400; font-size: 12px; }
.small { font-size: 12px; }
.head-actions form, .card-inline-actions form, .rowactions form { display: inline; margin: 0; }

/* ---- INITIAL/PREVIOUS/CURRENT table ---- */
.table-scroll { overflow-x: auto; }
.grid.ipc { table-layout: fixed; min-width: 720px; }
.grid.ipc td { vertical-align: top; word-break: break-word; overflow-wrap: anywhere; }
.grid.ipc th:first-child, .grid.ipc td.pname { width: 150px; }
.grid.ipc th:not(:first-child), .grid.ipc td:not(:first-child) { width: auto; }
.grid.ipc .mvitem, .grid.ipc code { overflow-wrap: anywhere; word-break: break-word; }
.grid.ipc .pname { font-weight: 600; }
.row-changed { background: rgba(183,121,31,.07); }
.row-changed:hover { background: rgba(183,121,31,.13) !important; }
.chg { color: var(--warn); font-size: 12px; margin-left: 6px; font-weight: 600; }
/* history spans the full table width in its own row */
.histrow > td { background: var(--subtle); padding: 0 12px 4px; border-top: none; }
.histrow:hover > td { background: var(--subtle) !important; }
.phist { margin: 4px 0; font-weight: 400; }
.phist summary { cursor: pointer; color: var(--brand); font-size: 12px; padding: 4px 0; }
.histitems { padding-bottom: 6px; }
.hitem { border-left: 2px solid var(--line); padding: 4px 0 4px 10px; margin: 8px 0; }
.hmeta { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.hpair { font-size: 13px; display: flex; gap: 6px; }
.hlab { color: var(--muted); flex: 0 0 46px; }
.hval { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* ---- URL list param cells ---- */
.pcell { text-align: center; white-space: nowrap; }
.dot { color: var(--warn); font-size: 9px; vertical-align: super; margin-left: 2px; }
.http-err { color: var(--err); font-weight: 600; }
.nowrap { white-space: nowrap; }
/* headers align with their column data: left by default, centered only for
   the numeric param columns (T/D/H1/R/C) whose cells are .pcell centered */
.grid.urls th { text-align: left; }
.grid.urls th.pcol { text-align: center; }
/* numeric param cells: needs .grid.urls td.pcell (0,3,1) to beat .grid td left (0,1,1) */
.grid.urls td.pcell { text-align: center; }
.grid.urls th:first-child, .grid.urls td:first-child { text-align: left; }
/* keep .urlcell a real table cell (flex on a <td> breaks row-line alignment);
   the flex layout lives on an inner wrapper instead */
.grid.urls .urlcell { max-width: 560px; font-size: 12px; }
.grid.urls .urlcell .u-wrap { display: flex; align-items: baseline; gap: 6px; }
.grid.urls .urlcell .u-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extlink { flex: 0 0 auto; color: var(--muted); text-decoration: none; font-size: 13px; line-height: 1; }
.extlink:hover { color: var(--brand); text-decoration: none; }
.sortlink { color: var(--muted); font-size: inherit; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.sortlink:hover { color: var(--brand); text-decoration: none; }
.sortlink.on { color: var(--brand); }
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; padding: 8px 10px; background: var(--subtle); border: 1px solid var(--line); border-radius: 6px; }
.bulkbar .btn { padding: 5px 10px; font-size: 13px; }
.chkcell { width: 30px; text-align: center; }
.chkcell input { width: auto; margin: 0; cursor: pointer; }
.selcount { margin-left: auto; }

/* ---- Changes feed ---- */
.evt { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; background: var(--code-bg); color: var(--muted); white-space: nowrap; }
.evt-appeared { background: var(--ok-bg); color: var(--ok); }
.evt-disappeared { background: var(--err-bg); color: var(--err); }
.evt-value_changed, .evt-count_changed, .evt-order_changed { background: var(--warn-bg); color: var(--warn); }
.beforeafter { font-size: 13px; }
.ba-old { color: var(--muted); }
.ba-arr { color: var(--muted); margin: 0 4px; }
.ba-new { color: var(--ink); font-weight: 500; }
.grid.changes .urlcell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Resources ---- */
.reslist { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .dash-cols { grid-template-columns: 1fr; } }
.dash-cols .page-head { margin-bottom: 8px; }
.dash-cols h2 { margin: 0; }

/* ---- Live stats tiles ---- */
.livebar { padding: 16px 18px; }
.live-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.live-head h2 { margin: 0; }
.live-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.tile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--subtle); border: 1px solid var(--line);
  border-radius: 10px; flex: 1 1 170px; min-width: 150px;
}
.tile-emoji { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-num { font-size: 22px; font-weight: 700; line-height: 1.05; }
.tile-num.warn { color: var(--err); }
.tile-lbl { color: var(--muted); font-size: 12px; line-height: 1.15; }
/* project settings: destructive "clear history" zone */
.dangercard { border-color: var(--danger-border); }
.dangercard h2 { color: var(--err); margin-bottom: 6px; }
pre.raw { background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; overflow-x: auto; font-size: 12px; line-height: 1.45; max-height: 360px; }

/* ==== Typographic refresh: "technical instrument" ==== */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Data reads in mono — URLs, metrics, codes, counts, timestamps */
.urlcell, .urlcell a, .urltitle, .stat-num, .tile-num, .pg, .rt,
.httpbadge, .cnt, .pcell, code, .beforeafter, .hero-meta,
.kv.seo td:first-child .cnt { font-family: var(--mono); }
.stat-num, .tile-num, .pcell, .pg, .httpbadge { font-feature-settings: "tnum" 1; letter-spacing: -.01em; }
.urlcell, .urlcell a, .urltitle { letter-spacing: -.01em; }
.rt { font-size: 12px; }

/* Headings: tighter, more intentional */
h1 { font-weight: 650; letter-spacing: -.015em; }
h2 { font-weight: 600; letter-spacing: -.005em; font-size: 15px; }
.page-head > div > .muted { letter-spacing: 0; }

/* Table header: crisper instrument label */
.grid th { font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.grid.urls th .sortlink { letter-spacing: .06em; }

/* Cards a touch crisper */
.card { border-radius: 10px; }

/* Signature: the live "Сейчас" readout gets a thin brand accent + bigger mono numbers */
.livebar { position: relative; overflow: hidden; }
.livebar::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 40%, transparent)); }
.tile-num { font-size: 24px; }
.live-head h2 { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--muted); }

/* Badges: a hair more legible */
.badge { letter-spacing: .01em; font-weight: 500; }

/* Breadcrumbs: monospaced separators feel like a path */
.crumbs { letter-spacing: .01em; }