/* DMND CRM — светло-синее матовое стекло */

@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/static/fonts/inter-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #0e1b3d;
  --ink-2: #33456e;
  --muted: #6b7b9e;
  --accent: #2f63f0;
  --accent-soft: rgba(47, 99, 240, .11);
  --navy: #13215a;

  --good: #0e9a63; --good-bg: rgba(20, 170, 110, .13);
  --bad: #dc3f55;  --bad-bg: rgba(225, 70, 90, .12);
  --warn: #b97a0a; --warn-bg: rgba(235, 170, 40, .16);

  --glass: rgba(255, 255, 255, .52);
  --glass-strong: rgba(255, 255, 255, .72);
  --glass-edge: rgba(255, 255, 255, .8);
  --hair: rgba(40, 80, 170, .10);
  --hair-2: rgba(40, 80, 170, .18);
  --blur: blur(22px) saturate(150%);
  --shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px -12px rgba(30, 60, 140, .22), 0 2px 6px -2px rgba(30, 60, 140, .08);

  --r-lg: 22px; --r: 16px; --r-sm: 10px;
  --top: #0b7a52; --top-bg: rgba(14,154,99,.20); --top-edge: rgba(14,154,99,.35);
  --bar-cost: rgba(220,63,85,.55); --bar-cost-h: rgba(200,45,70,.9);
  --bar-rev: rgba(14,154,99,.62); --bar-rev-h: rgba(10,130,82,.92); --line: #2f63f0; --line-fill: rgba(47,99,240,.10);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #e6eefc; }
body {
  min-height: 100vh;
  color: var(--ink);
  font: 450 14px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss03", "tnum";
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 700px at 8% -10%, #c7dbff 0%, transparent 60%),
    radial-gradient(900px 650px at 100% 0%, #d6dcff 0%, transparent 55%),
    radial-gradient(1000px 800px at 60% 110%, #c6e6ff 0%, transparent 60%),
    linear-gradient(180deg, #edf3ff 0%, #e2ebfc 100%);
  background-attachment: fixed;
}
/* матовая зернистость */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.5  0 0 0 0 0.8  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a { color: inherit; }
::selection { background: rgba(47, 99, 240, .2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }

.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.68), rgba(255,255,255,.44));
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 0 0 .5px rgba(30,60,140,.06), 0 26px 50px -30px rgba(30,60,140,.38), 0 2px 8px -4px rgba(30,60,140,.10);
  border-radius: var(--r-lg);
}

/* ───────── каркас ───────── */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 14px; margin: 14px 0 14px 14px; height: calc(100vh - 28px);
  padding: 22px 14px 16px; border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 2px;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; padding: 4px 0 22px; }
.brand-mark {
  width: 64px; height: 64px; border-radius: 18px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, rgba(14, 25, 74, .86) 0%, rgba(32, 56, 140, .74) 100%);
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 26px -10px rgba(16, 32, 100, .55);
  transition: transform .25s ease;
}
.brand-mark::after { /* блик стекла */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 45%);
}
.brand-mark i {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 47px; transform: translate(-54%, -50%);
  background: #d2dcff;
  -webkit-mask: url(/static/logo-star.png) center / contain no-repeat; mask: url(/static/logo-star.png) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(190, 210, 255, .55));
}
.brand:hover .brand-mark { transform: translateY(-1px) rotate(-2deg); }
.brand-word {
  width: 70px; height: 19px; background: var(--navy);
  -webkit-mask: url(/static/logo-dmnd.png) center / contain no-repeat; mask: url(/static/logo-dmnd.png) center / contain no-repeat;
}

.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px;
  text-decoration: none; color: var(--ink-2); font-weight: 500;
}
.nav a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.nav a:hover { background: rgba(255, 255, 255, .55); color: var(--ink); }
.nav a.on { background: var(--glass-strong); color: var(--ink); font-weight: 600; box-shadow: 0 1px 0 #fff inset, 0 4px 14px -6px rgba(30,60,140,.25); }
.nav a.on svg { opacity: 1; color: var(--accent); }
.side .grow { flex: 1; }
.sync-status { font-size: 12px; color: var(--muted); padding: 10px 12px; line-height: 1.45; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.dot.ok { background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.dot.err { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.dot.off { background: var(--muted); }
.side form { margin: 0; }
.linkbtn { background: none; border: 0; font: inherit; color: var(--muted); cursor: pointer; padding: 9px 12px; border-radius: 12px; width: 100%; text-align: left; display: flex; gap: 11px; align-items: center; }
.linkbtn:hover { color: var(--bad); background: rgba(255,255,255,.5); }
.linkbtn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

main { padding: 26px 34px 64px 30px; min-width: 0; }
.top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.top h1 { font-size: 26px; line-height: 1.15; margin: 0; font-weight: 650; letter-spacing: -.025em; }
.top .sub { color: var(--muted); font-size: 13px; }

.month-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; padding: 4px; border-radius: 14px; }
.month-nav a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-size: 18px; }
.month-nav a:hover { background: rgba(255,255,255,.7); }
.month-nav .cur { padding: 0 12px; font-weight: 600; min-width: 136px; text-align: center; }
.month-nav a.today-link { width: auto; padding: 0 12px; font-size: 13px; font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--glass-edge); background: rgba(255,255,255,.62); color: var(--ink);
  border-radius: 12px; padding: 8px 14px; text-decoration: none; font: inherit; font-weight: 550; cursor: pointer;
  box-shadow: 0 1px 0 #fff inset, 0 2px 8px -4px rgba(30,60,140,.25);
}
.btn:hover { background: rgba(255,255,255,.9); }
.btn.primary { background: linear-gradient(180deg, #3d70f5, #2a59e0); border-color: rgba(30,70,200,.6); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 8px 18px -8px rgba(40, 90, 230, .7); }
.btn.primary:hover { background: linear-gradient(180deg, #4a7bff, #2f60ea); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 4px 10px; font-size: 12px; border-radius: 9px; }

.panel { padding: 20px 22px; }
.panel h2 { font-size: 15px; margin: 0 0 14px; font-weight: 650; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.stack > * + * { margin-top: 18px; }
.small-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; }

.delta { font-size: 12px; margin-left: 6px; font-weight: 600; padding: 1px 6px; border-radius: 6px; }
.delta.good { background: var(--good-bg); } .delta.bad { background: var(--bad-bg); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.fact { padding: 14px 16px; border-radius: var(--r); }
.fact b { display: block; font-size: 19px; font-weight: 620; letter-spacing: -.02em; }
.fact span { color: var(--muted); font-size: 12.5px; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 1150px) { .grid-2 { grid-template-columns: 1fr; } }

.today { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.today b { display: block; font-size: 21px; font-weight: 620; letter-spacing: -.02em; }
.today span { color: var(--muted); font-size: 12.5px; }

/* ───────── таблицы ───────── */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 9px 12px; text-align: right; white-space: nowrap; }
th { color: var(--muted); font-weight: 550; font-size: 12px; border-bottom: 1px solid var(--hair-2); }
td { border-bottom: 1px solid var(--hair); }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover td { background: rgba(255,255,255,.35); }
tr:last-child td { border-bottom: 0; }
td.t-good, .t-good { background: var(--good-bg); color: var(--good); font-weight: 600; }
td.t-bad, .t-bad { background: var(--bad-bg); color: var(--bad); font-weight: 600; }
td.t-warn, .t-warn { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
td.t-top, .t-top { background: var(--top-bg); color: var(--top); font-weight: 700; box-shadow: inset 0 0 0 1px var(--top-edge); }
.t-txt-good { color: var(--good); font-weight: 600; } .t-txt-bad { color: var(--bad); font-weight: 600; }
.t-txt-warn { color: var(--warn); font-weight: 600; } .t-txt-top { color: var(--top); font-weight: 700; }
tfoot td { font-weight: 700; border-top: 1px solid var(--hair-2); border-bottom: 0; }
.geo-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 2px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 650; font-size: 12.5px; text-decoration: none; }

/* ───────── сводка (лист) ───────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sheet-wrap { overflow: auto; max-height: calc(100vh - 250px); border-radius: var(--r); }
.sheet { border-collapse: separate; border-spacing: 0; width: max-content; }
.sheet th, .sheet td { border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); padding: 6px 10px; font-size: 13px; }
.sheet thead th { position: sticky; top: 0; background: rgba(240, 245, 255, .97); z-index: 2; color: var(--ink-2); }
.sheet thead tr.col-row th { top: 37px; }
.sheet .date { position: sticky; left: 0; z-index: 1; text-align: left; color: var(--muted); background: #f0f5ff; }
.sheet thead .date { z-index: 3; }
.sheet .date b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.sheet tr.is-today td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.sheet tr.weekend .date { color: #9aa8c6; }
.sheet .block-start { border-left: 2px solid var(--hair-2); }
.sheet th.geo { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sheet th.geo span { display: inline-block; padding: 2px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.sheet td.edit { cursor: text; position: relative; }
.sheet td.edit:hover { outline: 1.5px solid var(--accent); outline-offset: -1.5px; background: rgba(255,255,255,.6); }
.sheet td.edit input { width: 78px; background: #fff; color: var(--ink); border: 1px solid var(--accent); border-radius: 6px; font: inherit; text-align: right; padding: 2px 5px; }
.sheet td.manual::after, .sheet td.imported::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; }
.sheet td.manual::after { background: var(--warn); }
.sheet td.imported::after { background: var(--accent); }
.sheet .delta-cell { font-size: 12px; font-weight: 550; }
.sheet .revert { padding: 0 7px; font-size: 11px; line-height: 18px; margin-left: 6px; border-radius: 6px; }
.sheet tfoot td { position: sticky; bottom: 0; background: #e9f0fd; font-weight: 700; z-index: 1; }
.sheet tfoot td.date { z-index: 2; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; margin: -6px 0 14px; }
.legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }

/* ───────── аналитика: полоса месяцев ───────── */
.year-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; margin-left: auto; }
.year-tabs a { padding: 6px 14px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-weight: 550; }
.year-tabs a.on { background: var(--glass-strong); color: var(--ink); box-shadow: 0 1px 0 #fff inset, 0 3px 10px -5px rgba(30,60,140,.3); }
.strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; padding: 18px; border-radius: var(--r-lg); }
.mcell {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 10px; border-radius: 14px;
  text-decoration: none; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.65); min-width: 0;
}
.mcell:hover { background: rgba(255,255,255,.75); }
.mcell.empty { opacity: .45; }
.mcell.now { border-color: var(--accent); }
.mcell .mn { font-size: 12.5px; color: var(--muted); font-weight: 550; display: flex; justify-content: space-between; }
.mcell .bar { height: 74px; display: flex; flex-direction: column; justify-content: center; }
.mcell .bar .half { height: 50%; display: flex; }
.mcell .bar .half.up { align-items: flex-end; border-bottom: 1px dashed var(--hair-2); }
.mcell .bar .half.down { align-items: flex-start; }
.mcell .bar b { display: block; width: 100%; border-radius: 6px; min-height: 2px; }
.mcell .bar .up b { background: linear-gradient(180deg, #3fd59a, #11a56d); border-radius: 6px 6px 2px 2px; }
.mcell .bar .down b { background: linear-gradient(180deg, #e2475c, #f27c8c); border-radius: 2px 2px 6px 6px; }
.mcell .pv { font-weight: 650; font-size: 14px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcell .mom { font-size: 11.5px; font-weight: 600; }
.mcell .sal { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) { .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; } }
.heat td.h { font-weight: 600; font-size: 12.5px; }

/* ───────── формы ───────── */
form.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
input, select, textarea {
  background: rgba(255,255,255,.75); color: var(--ink); border: 1px solid var(--hair-2); border-radius: 11px;
  padding: 9px 12px; font: inherit; min-width: 0;
}
input:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.5); border: 1px solid var(--hair); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { flex-direction: row; padding: 7px 13px; cursor: pointer; color: var(--ink-2); font-size: 14px; border-radius: 9px; }
.seg input:checked + label { background: #fff; color: var(--ink); box-shadow: 0 2px 8px -4px rgba(30,60,140,.35); font-weight: 600; }
.seg input:focus-visible + label { outline: 2px solid var(--accent); }
.notice { padding: 11px 15px; border-radius: 12px; background: rgba(255,255,255,.65); border: 1px solid var(--glass-edge); border-left: 3px solid var(--accent); }
.notice.err { border-left-color: var(--bad); }
.notice.ok { border-left-color: var(--good); }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
code { background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; color: var(--navy); }
pre { background: rgba(255,255,255,.7); padding: 12px; border-radius: 10px; overflow: auto; max-height: 300px; }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

/* ───────── логин ───────── */
.login { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; border-radius: 26px; }
.login form.login-only { padding: 0; gap: 10px; }
.login .brand { padding-bottom: 6px; }
.login .brand-mark { width: 76px; height: 76px; border-radius: 22px; }
.login .brand-mark i { width: 42px; height: 55px; }
.login .brand-word { width: 84px; height: 23px; }
.login p { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }

/* ───────── мобильный ───────── */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  main { padding: 6px 14px 48px; }
  .term .v { font-size: 22px; } .term.result .v { font-size: 34px; }
  .op { font-size: 20px; padding-bottom: 20px; }
  .month-nav { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ───────── быстрое добавление ───────── */
.qdialog { border: 1px solid var(--glass-edge); border-radius: 22px; padding: 0; width: min(440px, calc(100vw - 32px));
  background: rgba(246, 249, 255, .9); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(20, 40, 110, .45); }
.qdialog::backdrop { background: rgba(20, 35, 80, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.qdialog form { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }
.qdialog .qhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qdialog h2 { margin: 0; font-size: 18px; font-weight: 650; }
.qdialog .qrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.qdialog .qrow label, .qdialog .qrow input { min-width: 0; width: 100%; }
.qdialog input[name=amount] { font-size: 20px; font-weight: 600; padding: 11px 14px; }
.qdialog .qactions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.top .month-nav + .btn.primary { margin-left: 4px; }

/* ───────── живой фон ─────────
   Крупные световые пятна плывут за стеклом. Цикл 22–34 с: движение видно, но не отвлекает.
   Анимируются только transform/opacity — дёшево для браузера. */
html { background: #e6eefc; }
.orbs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.orbs::before { display: none; content: ""; position: absolute; inset: -35%; opacity: .40;
  background: conic-gradient(from 0deg at 50% 50%, #a7c6ff, #cbc2ff, #b9ecff, #d9e4ff, #a7c6ff);
  filter: blur(80px); animation: swirl 60s linear infinite; }
/* мягкие пятна рисуются градиентом, а не фильтром blur — браузеру не нужно размывать их каждый кадр */
.orbs i { position: absolute; border-radius: 50%; will-change: transform, opacity; background: none !important;
  background-image: radial-gradient(closest-side, var(--c) 0%, var(--c) 30%, color-mix(in srgb, var(--c) 60%, transparent) 60%, transparent 100%) !important; }
.orbs i:nth-child(1) { --c: #8fb6ff; width: 58vw; height: 58vw; left: -16vw; top: -24vw; background: #8fb6ff; animation: drift1 26s ease-in-out infinite alternate, glow 13s ease-in-out infinite alternate; }
.orbs i:nth-child(2) { --c: #bfb2ff; width: 50vw; height: 50vw; right: -14vw; top: 6vh; background: #bfb2ff; animation: drift2 32s ease-in-out infinite alternate, glow 15s ease-in-out -6s infinite alternate; }
.orbs i:nth-child(3) { --c: #93d8ff; width: 62vw; height: 46vw; left: 22vw; bottom: -26vw; background: #93d8ff; animation: drift3 29s ease-in-out infinite alternate, glow 17s ease-in-out -11s infinite alternate; }
.orbs i:nth-child(4) { --c: #d7ccff; width: 30vw; height: 30vw; left: 40vw; top: 22vh; background: #d7ccff; animation: drift4 22s ease-in-out infinite alternate, glow 11s ease-in-out -3s infinite alternate; }
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(16vw, 12vh) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-15vw, 16vh) scale(.88); } }
@keyframes drift3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-12vw, -14vh) scale(1.12); } }
@keyframes drift4 { from { transform: translate(0, 0) scale(1); } to { transform: translate(18vw, -10vh) scale(1.25); } }
@keyframes glow { from { opacity: .30; } to { opacity: .92; } }
@keyframes swirl { to { transform: rotate(360deg); } }


/* ───────── профиль и всплывашки ───────── */
.pop-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.profile { margin-left: auto; }
.month-nav ~ .profile, .year-tabs ~ .profile, .btn ~ .profile { margin-left: 0; }
.avatar { width: 40px; height: 40px; border-radius: 13px; border: 1px solid rgba(255,255,255,.55); cursor: pointer; padding: 0;
  background: linear-gradient(150deg, #1c2f7a, #3d6cf0); color: #fff; font: 700 13.5px/1 inherit; letter-spacing: .04em;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 18px -8px rgba(30,60,170,.6); }
.avatar:hover { filter: brightness(1.08); }
.avatar.sm { width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center; font-size: 12px; cursor: default; }
.pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; visibility: hidden; opacity: 0; transform: translateY(-4px) scale(.98);
  transform-origin: top left; transition: opacity .16s ease, transform .16s ease, visibility 0s .16s; }
.pop.open { visibility: visible; opacity: 1; transform: none; transition: opacity .16s ease, transform .16s ease; }
.pop.glass { background: rgba(248,251,255,.92); }
.menu { left: auto; right: 0; width: 260px; padding: 8px; transform-origin: top right; }
.menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; }
.menu-head b { display: block; font-size: 14px; } .menu-head span { font-size: 12px; color: var(--muted); }
.menu-sep { height: 1px; background: var(--hair); margin: 6px 4px; }
.menu form { margin: 0; }
.menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; border: 0; background: none;
  font: inherit; color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; }
.menu-item:hover:not(:disabled) { background: rgba(47,99,240,.08); }
.menu-item:disabled { cursor: default; }
.menu-item .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(40,80,170,.08); flex: none; }
.menu-item .ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-item .ico.tg { background: linear-gradient(150deg, #37aee2, #1e96c8); color: #fff; }
.menu-item .ico.tg svg { fill: currentColor; stroke: none; width: 15px; height: 15px; margin-left: -1px; }
.menu-item .txt { flex: 1; font-size: 14px; font-weight: 550; }
.menu-item .txt em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 450; }
.menu-item .soon { font-size: 11px; font-weight: 650; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.menu-item.danger { color: var(--bad); } .menu-item.danger .ico { background: var(--bad-bg); }
.qbtn, .ibtn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--hair-2); background: rgba(255,255,255,.7); color: var(--ink-2);
  font: 700 12px/1 inherit; cursor: pointer; display: inline-grid; place-items: center; padding: 0; flex: none; }
.ibtn { font-family: Georgia, serif; font-style: italic; font-size: 12.5px; width: 20px; height: 20px; }
.qbtn:hover, .ibtn:hover, .qbtn[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tip { width: 270px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.disclose { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.disclose > div { overflow: hidden; }
.disclose.open { grid-template-rows: 1fr; }
.rules { margin: 0 0 18px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.7); }
.rules .tiers { margin: 0; padding: 0; border: 0; }
.rules-list { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; line-height: 1.7; }

/* ───────── главная ───────── */
.cap { font-size: 12.5px; color: var(--muted); font-weight: 550; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.chip.g { background: var(--good-bg); color: var(--good); } .chip.r { background: var(--bad-bg); color: var(--bad); }
.chip.w { background: var(--warn-bg); color: var(--warn); } .chip.n { background: rgba(40,80,170,.08); color: var(--ink-2); }
.chip svg { width: 12px; height: 12px; }
.quiet { color: var(--muted); font-size: 13px; }
.quiet b { color: var(--ink-2); font-weight: 600; }
.dash { display: grid; gap: 16px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile { padding: 18px 20px 14px; display: flex; flex-direction: column; min-width: 0; }
.tile .v { font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin: 8px 0 6px; }
.tile .sub { min-height: 24px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tile .spark { position: relative; height: 38px; margin-top: auto; padding-top: 8px; }
.tile.zp { background: linear-gradient(150deg, rgba(20,36,100,.86), rgba(47,99,240,.72)); border-color: rgba(255,255,255,.4); color: #fff; }
.tile.zp .cap, .tile.zp .quiet { color: rgba(230,238,255,.82); }
.costs-warn { color: var(--bad); font-weight: 650; }
.plus { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--hair-2); background: rgba(255,255,255,.7); color: var(--accent);
  font: 600 15px/1 inherit; cursor: pointer; display: inline-grid; place-items: center; padding: 0; margin-left: auto; }
.plus:hover { background: #fff; border-color: var(--accent); }
.kpi-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px; }
.kpi-strip > div { padding: 12px 18px; border-right: 1px solid var(--hair); min-width: 0; }
.kpi-strip > div:last-child { border-right: 0; }
.kpi-strip b { display: block; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.kpi-strip span { font-size: 12.5px; color: var(--muted); }
.chartcard { display: grid; grid-template-columns: 168px minmax(0, 1fr); overflow: hidden; }
.periods { padding: 18px 12px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.22); }
.periods .cap { padding: 0 10px 8px; }
.periods a { padding: 9px 12px; border-radius: 11px; color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: 13.5px; }
.periods a:hover { background: rgba(255,255,255,.55); }
.periods a.on { background: rgba(255,255,255,.88); color: var(--ink); box-shadow: 0 4px 12px -6px rgba(30,60,140,.35); }
.periods form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 0 4px; }
.periods form input { padding: 6px 8px; font-size: 12.5px; width: 100%; }
.periods form .btn { padding: 6px 10px; font-size: 12.5px; }
.chartbody { padding: 18px 22px 12px; min-width: 0; }
.chartbody .head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.chartbody h3 { margin: 0; font-size: 15px; font-weight: 650; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; }
.pair > * { min-width: 0; }

/* сегодня — воронка */
.today3 { padding: 20px 22px; }
.today3 .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.today3 .live { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.today3 .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.today3 .res { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 14px; }
.today3 .res b { font-size: 34px; font-weight: 700; letter-spacing: -.035em; }
.funnel { display: grid; grid-template-columns: 1fr auto; }
.funnel > div { display: contents; }
.funnel span, .funnel b { padding: 9px 0; border-top: 1px solid var(--hair); }
.funnel span { color: var(--muted); font-size: 13.5px; }
.funnel span em { font-style: normal; color: #9aa6bf; font-size: 12px; margin-left: 6px; }
.funnel b { text-align: right; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }

/* ЗП */
.zp-card { padding: 22px 24px 20px; }
.zp-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.zp-top h3 { margin: 0; font-size: 16px; font-weight: 650; }
.zp-cols { display: grid; grid-template-columns: 1fr 1.15fr 1.35fr; }
.zp-cols > div { padding: 0 22px; border-left: 1px solid var(--hair); min-width: 0; }
.zp-cols > div:first-child { padding-left: 0; border-left: 0; }
.zp-card .val { font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; margin: 6px 0 8px; }
.calc { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; margin-top: 8px; font-size: 14px; }
.calc span { color: var(--muted); } .calc b { text-align: right; font-weight: 600; }
.calc .tot { border-top: 1.5px solid var(--hair-2); padding-top: 8px; }
.calc span.tot { color: var(--ink); font-weight: 600; } .calc b.tot { font-size: 18px; }
.need { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; color: var(--ink-2); }
.need b { color: var(--accent); }
.win { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 8px; }
.win div { border-radius: 10px; padding: 9px 10px; background: rgba(40,80,170,.06); font-size: 12px; color: var(--muted); }
.win div b { display: block; font-size: 15px; color: var(--ink); margin-top: 2px; }
.win div.neg b { color: var(--bad); } .win div.pos b { color: var(--good); }
.win div.cur { outline: 1.5px solid rgba(47,99,240,.45); }
.track { height: 10px; border-radius: 999px; background: rgba(40,80,170,.10); overflow: hidden; }
.track i { display: block; height: 100%; min-width: 6px; border-radius: 999px; background: linear-gradient(90deg, #3d70f5, #7a95ff); }
.tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair); }
.tiers div { border-radius: 12px; padding: 10px 12px; background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.7); }
.tiers div b { display: block; font-size: 17px; font-weight: 700; }
.tiers div span { font-size: 12px; color: var(--muted); }
.tiers div s { font-size: 11.5px; color: #a3aec6; margin-left: 4px; font-weight: 500; }
.tiers div.cur { background: rgba(47,99,240,.12); border-color: rgba(47,99,240,.4); }
.tiers div.cur b { color: var(--accent); }

/* ───────── режим перестановки (шестерёнка) ───────── */
.btn.icon { width: 40px; height: 40px; padding: 0; border-radius: 13px; }
.btn.icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s ease; }
body.editing .btn.icon svg { transform: rotate(90deg); }
.edit-bar { display: none; align-items: center; gap: 12px; margin: -6px 0 16px; padding: 10px 14px; border-radius: 14px; }
body.editing .edit-bar { display: flex; }
.edit-bar span { flex: 1; font-size: 13.5px; color: var(--ink-2); }
body.editing [data-id] { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
body.editing [data-id] a, body.editing [data-id] button, body.editing [data-id] input { pointer-events: none; }
body.editing .jig { animation: jiggle .32s ease-in-out infinite alternate; transform-origin: 50% 50%; }
body.editing .jig:nth-child(2n) { animation-delay: -.16s; animation-duration: .36s; }
body.editing .jig.wide { animation-name: jiggle-wide; }
body.editing [data-sort] > [data-sort] { outline: 1.5px dashed rgba(47,99,240,.35); outline-offset: 7px; border-radius: 20px; position: relative; }
body.editing [data-sort] > [data-sort]::before { content: attr(data-label); position: absolute; left: 14px; top: -19px; z-index: 2;
  font-size: 11.5px; font-weight: 650; color: var(--accent); background: rgba(240,245,255,.95); padding: 1px 8px; border-radius: 999px; }
body.editing .lifting { animation: none !important; transform: scale(1.015); box-shadow: 0 30px 60px -20px rgba(20,40,110,.45); z-index: 5; position: relative; cursor: grabbing; }
@keyframes jiggle { from { transform: rotate(-.35deg); } to { transform: rotate(.35deg); } }
@keyframes jiggle-wide { from { transform: rotate(-.1deg); } to { transform: rotate(.1deg); } }

/* аналитика: столбец под курсором темнеет */
.mcell:hover { background: rgba(255,255,255,.85); box-shadow: 0 8px 20px -12px rgba(30,60,140,.45); }
.mcell:hover .bar b { filter: brightness(.82) saturate(1.25); }
.heat td.h:hover { filter: brightness(.9) saturate(1.3); }

@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-strip > div:nth-child(3) { border-right: 0; }
  .pair, .zp-cols { grid-template-columns: 1fr; }
  .zp-cols > div { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--hair); margin-top: 16px; }
  .zp-cols > div:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
}
@media (max-width: 700px) {
  .top h1 { flex-basis: 100%; }
  .month-nav .cur { min-width: 0; }
  .chartcard { grid-template-columns: 1fr; }
  .periods { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--hair); }
  .periods .cap { display: none; }
  .tiers { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .orbs i, .orbs::before, body.editing .jig { animation: none !important; }
}

/* ═════════════════════ ТЁМНАЯ ТЕМА ═════════════════════
   Графит с холодным синим отливом. Нейтральный текст, один сдержанный акцент,
   приглушённые зелёный/коралловый. Цветной свет — только глубоко в фоне. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf0f7; --ink-2: #b3bbcd; --muted: #7c859b;
  --accent: #93a6ff; --accent-soft: rgba(147, 166, 255, .12); --navy: #e6eaf5;
  --good: #5ccfa2; --good-bg: rgba(92, 207, 162, .11);
  --bad: #ee8090; --bad-bg: rgba(238, 128, 144, .11);
  --warn: #dcbb72; --warn-bg: rgba(220, 187, 114, .11);
  --glass: rgba(255, 255, 255, .05); --glass-strong: rgba(255, 255, 255, .10); --glass-edge: rgba(255, 255, 255, .08);
  --hair: rgba(255, 255, 255, .06); --hair-2: rgba(255, 255, 255, .11);
  --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px -18px rgba(0, 0, 0, .7);
  --surf: rgba(255, 255, 255, .04); --surf-2: rgba(255, 255, 255, .08);
  --top: #7ee6b8; --top-bg: rgba(92,207,162,.20); --top-edge: rgba(92,207,162,.4);
  --bar-cost: rgba(238,128,144,.5); --bar-cost-h: rgba(238,128,144,.85);
  --bar-rev: rgba(92,207,162,.5); --bar-rev-h: rgba(92,207,162,.85); --line: #93a6ff; --line-fill: rgba(147,166,255,.08);
}
[data-theme="dark"], [data-theme="dark"] body { background: #080b14; }
[data-theme="dark"] body {
  background:
    radial-gradient(1000px 640px at 10% -10%, rgba(46, 62, 120, .26) 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(58, 52, 110, .16) 0%, transparent 55%),
    radial-gradient(1000px 760px at 55% 115%, rgba(20, 70, 90, .18) 0%, transparent 60%),
    linear-gradient(180deg, #0a0e1a 0%, #070a12 100%);
}
[data-theme="dark"] body::before { opacity: .08; }
[data-theme="dark"] .orbs::before { opacity: .14; background: conic-gradient(from 0deg, #22326e, #2e2a5e, #123f50, #22326e); }
[data-theme="dark"] .orbs i:nth-child(1) { --c: #24387f; }
[data-theme="dark"] .orbs i:nth-child(2) { --c: #2f2a66; }
[data-theme="dark"] .orbs i:nth-child(3) { --c: #0e4a5c; }
[data-theme="dark"] .orbs i:nth-child(4) { --c: #2a3878; }
[data-theme="dark"] .orbs i { animation-name: drift1, glow-dark; }
[data-theme="dark"] .orbs i:nth-child(2) { animation-name: drift2, glow-dark; }
[data-theme="dark"] .orbs i:nth-child(3) { animation-name: drift3, glow-dark; }
[data-theme="dark"] .orbs i:nth-child(4) { animation-name: drift4, glow-dark; }
@keyframes glow-dark { from { opacity: .14; } to { opacity: .36; } }

[data-theme="dark"] .glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .04));
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 30px 60px -30px rgba(0,0,0,.85), 0 2px 10px -4px rgba(0,0,0,.5);
}
[data-theme="dark"] .pop.glass, [data-theme="dark"] .qdialog { background: rgba(18, 23, 38, .96); color: var(--ink); }
[data-theme="dark"] .nav a:hover, [data-theme="dark"] .linkbtn:hover, [data-theme="dark"] .month-nav a:hover,
[data-theme="dark"] .periods a:hover, [data-theme="dark"] tbody tr:hover td { background: var(--surf); }
[data-theme="dark"] .nav a.on, [data-theme="dark"] .year-tabs a.on, [data-theme="dark"] .periods a.on,
[data-theme="dark"] .seg input:checked + label { background: rgba(255,255,255,.09); box-shadow: 0 1px 0 rgba(255,255,255,.07) inset; color: #fff; }
[data-theme="dark"] .nav a.on svg { color: var(--accent); }
[data-theme="dark"] .btn { background: var(--surf); border-color: rgba(255,255,255,.09); box-shadow: none; color: var(--ink); }
[data-theme="dark"] .btn:hover { background: var(--surf-2); }
[data-theme="dark"] .btn.primary { background: linear-gradient(180deg, #7d92f5, #5b70dc); border-color: rgba(150,170,255,.35); color: #fff; box-shadow: 0 8px 22px -10px rgba(90,110,230,.7); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: rgba(0, 0, 0, .25); border-color: var(--hair-2); color: var(--ink); }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus { background: rgba(0, 0, 0, .35); }
[data-theme="dark"] .seg, [data-theme="dark"] .notice, [data-theme="dark"] pre, [data-theme="dark"] .rules,
[data-theme="dark"] .tiers div, [data-theme="dark"] .mcell, [data-theme="dark"] .qbtn, [data-theme="dark"] .ibtn,
[data-theme="dark"] .plus, [data-theme="dark"] .periods, [data-theme="dark"] .win div { background: var(--surf); border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .mcell:hover { background: var(--surf-2); box-shadow: 0 8px 22px -12px rgba(0,0,0,.7); }
[data-theme="dark"] .tiers div.cur { background: var(--accent-soft); border-color: rgba(147,166,255,.35); }
[data-theme="dark"] .win div.cur { outline-color: rgba(147,166,255,.4); }
[data-theme="dark"] .sheet thead th { background: rgba(16, 20, 34, .96); }
[data-theme="dark"] .sheet .date { background: #121726; }
[data-theme="dark"] .sheet tfoot td { background: #161c2e; }
[data-theme="dark"] .sheet td.edit:hover { background: var(--surf); }
[data-theme="dark"] .sheet td.edit input { background: #0e1220; }
[data-theme="dark"] code { color: #c6cfeb; background: var(--surf-2); }
[data-theme="dark"] .funnel span em, [data-theme="dark"] .tiers div s { color: #687188; }
[data-theme="dark"] .brand-mark { background: linear-gradient(150deg, #1f2b5c, #33438f); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .avatar { background: linear-gradient(150deg, #2b3a7a, #5266c9); border-color: rgba(255,255,255,.14); }
[data-theme="dark"] .tile.zp { background: linear-gradient(150deg, rgba(110, 130, 230, .30), rgba(70, 60, 160, .20)); border-color: rgba(160,175,255,.22); }
[data-theme="dark"] .tile.zp .cap, [data-theme="dark"] .tile.zp .quiet { color: #aab4d8; }
[data-theme="dark"] .geo-tag { background: rgba(147,166,255,.12); }
[data-theme="dark"] .t-warn, [data-theme="dark"] td.t-warn { background: var(--warn-bg); }
[data-theme="dark"] body.editing [data-sort] > [data-sort]::before { background: #161c2e; }

/* ── переключатель темы в меню профиля ── */
.menu-item .ico.theme { background: linear-gradient(150deg, #ffcf5a, #ff9f43); color: #fff; position: relative; overflow: hidden; }
[data-theme="dark"] .menu-item .ico.theme { background: linear-gradient(150deg, #4c5fd7, #7b4fe0); }
.ico.theme svg { position: absolute; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .3s; }
.ico.theme .moon { transform: translateY(140%) rotate(-40deg); opacity: 0; }
[data-theme="dark"] .ico.theme .sun { transform: translateY(-140%) rotate(40deg); opacity: 0; }
[data-theme="dark"] .ico.theme .moon { transform: none; opacity: 1; }
.switch { width: 38px; height: 22px; border-radius: 999px; background: rgba(40,80,170,.18); position: relative; flex: none; transition: background .3s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .35s cubic-bezier(.4,0,.2,1); }
[data-theme="dark"] .switch { background: var(--accent); }
[data-theme="dark"] .switch i { transform: translateX(16px); }
.theme-label::after { content: "Тёмная тема"; }

/* плавная смена темы: волна новой темы от точки клика */
.theme-veil { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0;
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
.theme-veil.dark { background: rgba(10, 14, 26, .38); }
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
.theme-switching .orbs i, .theme-switching .orbs::before { animation-play-state: paused !important; }
.theme-veil.light { background: rgba(214, 226, 250, .34); }

/* ───────── кнопка «Как считается» ───────── */
.how { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hair-2); background: var(--surf, rgba(255,255,255,.55)); color: var(--ink-2); font: 550 12.5px/1 inherit;
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.how i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 11.5px/1 inherit; font-style: normal;
  background: linear-gradient(150deg, var(--accent), #6b5cf0); color: #fff; box-shadow: 0 3px 10px -3px rgba(47,99,240,.55); }
.how:hover { border-color: var(--accent); color: var(--accent); }
.how[aria-expanded="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.rules-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; grid-column: 1 / -1; margin-bottom: 4px; }

/* ───────── сводка по гео ───────── */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.geo-board { padding: 20px 22px 8px; margin-bottom: 26px; }
.gb-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.gb-head h2 { margin: 0; font-size: 16px; font-weight: 650; }
.scale { margin-left: auto; display: flex; gap: 14px; font-size: 12px; }
.scale span { font-weight: 550; }
table.gb { width: 100%; }
table.gb th, table.gb td { text-align: right; white-space: nowrap; vertical-align: middle; padding: 11px 8px; }
table.gb .l { text-align: left; }
table.gb tbody tr { cursor: pointer; transition: background .15s ease; }
table.gb tbody tr.on td { background: var(--accent-soft); }
table.gb tfoot td { font-weight: 650; border-top: 1px solid var(--hair-2); color: var(--ink-2); }
.gb .geo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.gb .geo b { font-weight: 700; min-width: 24px; }
.gb .geo em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.fl { font-size: 20px; line-height: 1; width: 26px; text-align: center; filter: saturate(.9); }
.fl.all { font-size: 17px; color: var(--accent); }
.sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.hint { border-bottom: 1px dotted var(--muted); cursor: help; }
.share, .roibar { height: 3px; border-radius: 3px; background: var(--hair); margin: 6px 0 0 auto; width: 84px; overflow: hidden; }
.share i, .roibar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); opacity: .7; margin-left: auto; }
.roibar i { background: var(--good); } .roibar.neg i { background: var(--bad); }
.roi-col { width: 110px; }

.picker { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 18px; scroll-margin-top: 20px; }
.pick-btn { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 14px; border-radius: 999px; cursor: pointer; font: inherit; color: var(--ink);
  min-width: 300px; transition: transform .2s ease, box-shadow .2s ease; }
.pick-btn:hover { transform: translateY(-1px); }
.pick-btn b { font-size: 16px; font-weight: 700; }
.pick-btn em { font-style: normal; color: var(--muted); font-size: 13.5px; flex: 1; text-align: left; }
.pick-btn .chev { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.picker .pop-wrap { display: block; }
.pick-list { left: 50%; width: 360px; max-height: 60vh; overflow: auto; padding: 6px; margin-left: -180px; transform-origin: top center; }
.pick-list > a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.pick-list > a:hover { background: var(--surf, rgba(40,80,170,.06)); }
.pick-list > a.on { background: var(--accent-soft); }
.pick-list .nm { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pick-list .nm b { font-size: 14px; } .pick-list .nm em { font-style: normal; font-size: 12px; color: var(--muted); }
.pick-list .pill { font-size: 12px; font-weight: 650; }
.pl-sep { font-size: 11.5px; color: var(--muted); padding: 10px 10px 6px; border-top: 1px solid var(--hair); margin-top: 6px; }
.pl-empty { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px; }
.pl-empty a { font-size: 12.5px; padding: 4px 9px; border-radius: 8px; background: var(--surf, rgba(40,80,170,.05)); color: var(--ink-2); text-decoration: none; }
.pl-empty a:hover, .pl-empty a.on { background: var(--accent-soft); color: var(--accent); }
.pick-note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.pick-note b { color: var(--ink); }

.sheet.days { width: 100%; }
.sheet.days tbody .date, [data-theme="dark"] .sheet.days tbody .date { position: static; background: transparent; }
.sheet-wrap + .legend { margin: 12px 0 0; }
.geo-board .small-note { margin: 4px 0 10px; }
.sheet.days th, .sheet.days td { text-align: right; padding: 8px 12px; border-right: 0; }
.sheet.days .date, .sheet.days .l { text-align: left; }
.sheet.days td .pill { font-size: 12.5px; font-weight: 600; }
.sheet .delta { font-style: normal; font-size: 11px; margin-left: 6px; font-weight: 600; }
.sheet .delta.bad { color: var(--bad); } .sheet .delta.good { color: var(--good); }
.day-geos { white-space: nowrap; margin-left: 8px; }
.day-geos .dg { width: 26px; height: 20px; font-size: 17px; line-height: 1; margin: -4px 2px -4px 0; vertical-align: middle; border-radius: 6px; }
.x:focus:not(:focus-visible) { outline: none; }
.dg { display: inline-grid; place-items: center; width: 26px; height: 22px; margin-right: 3px; border-radius: 7px; font-size: 14px; text-decoration: none; }
@media (max-width: 760px) {
  .pick-btn { min-width: 0; width: 100%; } .picker .pop-wrap { width: 100%; }
  .pick-list { width: calc(100vw - 32px); margin-left: 0; left: 0; }
  .scale { margin-left: 0; }
}

/* ───────── настройки ───────── */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1100px; align-items: start; }
.set-grid .wide { grid-column: 1 / -1; }
.set-card { padding: 24px; }
.set-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.set-head h2 { margin: 0 0 4px; font-size: 17px; }
.set-head p { margin: 0; font-size: 13px; line-height: 1.5; }
.set-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent), #6b5cf0); box-shadow: 0 8px 18px -8px rgba(47,99,240,.6); }
.set-ico svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vform { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.vform label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 550; }
.vform input { width: 100%; }
.binom-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.status-card { border-radius: var(--r); padding: 18px 20px; background: var(--surf, rgba(255,255,255,.5)); border: 1px solid var(--hair-2); }
.status-card.ok { box-shadow: inset 3px 0 0 var(--good); } .status-card.err { box-shadow: inset 3px 0 0 var(--bad); }
.st-top { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.status-card .dot { width: 9px; height: 9px; }
.status-card.ok .dot { box-shadow: 0 0 0 4px var(--good-bg); }
.status-card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 14px 0 0; font-size: 13px; }
.status-card dt { color: var(--muted); } .status-card dd { margin: 0; color: var(--ink); }
.st-err { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-size: 12.5px; word-break: break-word; }
.st-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.more { margin-top: 14px; border-top: 1px solid var(--hair); padding-top: 10px; }
.more summary { cursor: pointer; color: var(--muted); font-size: 13px; list-style: none; }
.more summary::before { content: "›"; display: inline-block; margin-right: 6px; transition: transform .2s ease; }
.more[open] summary::before { transform: rotate(90deg); }
.more-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; }
.more-body .row { margin: 0; }
.sub-h { font-size: 14px; margin: 24px 0 10px; }
.row-btns { display: flex; gap: 10px; }
.quiet-form { margin-top: 14px; }
.linkbtn.small { font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.file-drop { position: relative; display: flex !important; align-items: center; justify-content: center; min-height: 64px; border-radius: 14px;
  border: 1.5px dashed var(--hair-2); color: var(--ink-2) !important; font-size: 13.5px !important; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.file-drop:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent) !important; }
.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
h1 .back { text-decoration: none; color: var(--muted); margin-right: 4px; }
.sync-status a { color: inherit; text-decoration: none; } .sync-status a:hover { color: var(--accent); }
[data-arm].armed { background: var(--bad) !important; border-color: var(--bad) !important; color: #fff !important; }

/* ───────── косты ───────── */
.cost-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.cost-form { display: flex; flex-direction: column; gap: 16px; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cats input { position: absolute; opacity: 0; pointer-events: none; }
.cats label { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 550; cursor: pointer; color: var(--ink-2);
  border: 1px solid var(--hair-2); background: var(--surf, rgba(255,255,255,.5)); transition: all .15s ease; }
.cats label:hover { border-color: var(--accent); color: var(--accent); }
.cats input:checked + label { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px rgba(47,99,240,.7); }
.cats input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.cost-fields { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.cost-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 550; }
.cost-fields input[name=amount] { width: 120px; } .cost-fields .grow-f { flex: 1; min-width: 180px; }
.sum-card h2 { margin-bottom: 10px; }
.sum-list { list-style: none; margin: 0; padding: 0; }
.sum-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.sum-list li span { flex: 1; display: flex; flex-direction: column; } .sum-list em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.sum-list li.zero { color: var(--muted); } .sum-list li.zero b { color: var(--muted); font-weight: 500; }
.sum-list i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.g-cons { background: #e0707f; } .g-fee { background: #e8a75c; } .g-agent { background: #4fb8d8; } .g-dolet { background: #3fbf8c; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; font-weight: 650; }
.sum-total b { font-size: 18px; }
.rec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .rec-head h2 { margin: 0; }
.records { list-style: none; margin: 0; padding: 0; }
.records li { display: flex; align-items: center; gap: 16px; padding: 12px 8px; border-bottom: 1px solid var(--hair); border-radius: 12px; transition: background .15s ease; }
.records li:last-child { border-bottom: 0; }
.records li:hover { background: var(--surf, rgba(255,255,255,.45)); }
.r-date { width: 44px; flex: none; text-align: center; line-height: 1.1; }
.r-date b { display: block; font-size: 18px; font-weight: 700; } .r-date span { font-size: 11.5px; color: var(--muted); }
.r-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.r-main b { font-size: 14px; font-weight: 600; } .r-main span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.src { font-style: normal; margin-left: 8px; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.r-amt { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-del { width: 92px; display: flex; justify-content: flex-end; }
.del-btn { height: 30px; min-width: 30px; padding: 0 8px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted);
  cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; font: 600 12px/1 inherit; }
.del-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.records li:hover .del-btn, .del-btn:focus-visible, .del-btn.armed { opacity: 1; }
.del-btn:hover { background: var(--bad-bg); color: var(--bad); }
@media (hover: none) { .del-btn { opacity: .6; } }
.qdialog .cats { margin-bottom: 4px; }
@media (max-width: 900px) {
  .set-grid, .binom-grid, .cost-top { grid-template-columns: 1fr; }
}

/* ───────── сводка: дни на всю высоту, итог, простои, окно гео ───────── */
.sheet-wrap.full { max-height: none; overflow-x: auto; }
.sheet.days th, .sheet.days td { padding: 8px 10px; }
.sheet.days tbody tr.idle td { background: rgba(220, 63, 85, .055); }
.sheet.days tbody tr.idle td.date { box-shadow: inset 3px 0 0 rgba(220, 63, 85, .45); }
.idle-tag { font-style: normal; font-size: 10.5px; color: var(--bad); opacity: .75; margin-left: 8px; font-weight: 600; }
.sheet.days tbody tr.future { display: none; }
.sheet.days td.cum { color: var(--ink-2); font-weight: 600; } .sheet.days td.cum.neg { color: var(--bad); }
.sheet.days tfoot td { position: static; vertical-align: top; padding: 14px 12px; border: 0;
  background: linear-gradient(180deg, rgba(47,99,240,.10), rgba(107,92,240,.08)); border-top: 1.5px solid rgba(47,99,240,.35); }
.sheet.days tfoot td b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.sheet.days tfoot td span { display: block; font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 3px; line-height: 1.25; }
.sheet.days tfoot td[class*="t-txt-"] b { color: inherit; }
.sheet.days tfoot td.date b { font-size: 15px; } .sheet.days tfoot td.date { text-align: left; }
.sheet.days tfoot td:first-child { border-bottom-left-radius: var(--r); } .sheet.days tfoot td:last-child { border-bottom-right-radius: var(--r); }
[data-theme="dark"] .sheet.days tfoot td { background: linear-gradient(180deg, rgba(147,166,255,.12), rgba(147,166,255,.06)); border-top-color: rgba(147,166,255,.35); }
[data-theme="dark"] .sheet.days tbody tr.idle td { background: rgba(238,128,144,.06); }
.day-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.day-stats > div { padding: 14px 16px; border-radius: var(--r); }
.day-stats b { display: block; font-size: 18px; font-weight: 650; } .day-stats b small { font-size: 13px; color: var(--muted); font-weight: 500; }
.day-stats span { font-size: 12px; color: var(--muted); }
table.gb tbody tr { cursor: pointer; }
.share-cell { min-width: 110px; } .share-cell b { font-weight: 650; } .share-cell .share { margin: 6px 0 0; width: 90px; }
.cr-chip { display: inline-flex; align-items: baseline; gap: 3px; color: var(--ink-2); } .cr-chip b { color: var(--good); font-size: 14px; }
.cr-chip em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 4px; }
.more-ic { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; vertical-align: -2px; margin-left: 6px; opacity: .5; transition: transform .15s ease, opacity .15s ease; }
table.gb tbody tr:hover .more-ic { opacity: 1; transform: translateX(2px); }
.geo-dlg { width: min(860px, calc(100vw - 32px)); padding: 24px 26px; }
.gd-head { display: flex; align-items: center; gap: 14px; }
.gd-head h2 { margin: 0; font-size: 20px; } .gd-head .muted { font-size: 13px; }
.fl.big { font-size: 34px; width: 44px; }
.gd-roi { margin-left: auto; font-weight: 700; padding: 5px 12px; }
.x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair-2); background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.x:hover { color: var(--ink); background: var(--surf, rgba(40,80,170,.06)); }
.gd-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.gd-facts div { padding: 12px 14px; border-radius: 14px; background: var(--surf, rgba(255,255,255,.55)); border: 1px solid var(--hair); }
.gd-facts b { display: block; font-size: 17px; } .gd-facts span { font-size: 11.5px; color: var(--muted); }
.gd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gd-cols section { padding: 16px 18px; border-radius: 16px; background: var(--surf, rgba(255,255,255,.45)); border: 1px solid var(--hair); min-width: 0; }
.gd-cols h3 { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.gd-big { display: flex; align-items: baseline; gap: 8px; } .gd-big b { font-size: 30px; font-weight: 750; color: var(--good); }
.gd-big span { color: var(--ink-2); font-size: 14px; } .gd-big em { margin-left: auto; font-style: normal; font-weight: 700; }
.gd-bar { height: 6px; border-radius: 6px; background: var(--hair); margin: 10px 0 4px; overflow: hidden; }
.gd-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--good), #4fd1a1); border-radius: 6px; }
.gd-list { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: n; }
.gd-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.gd-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-list em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.gd-sub { margin: 12px 0 0; font-size: 11.5px; color: var(--bad); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.gd-empty { font-size: 13px; line-height: 1.5; }
.geo-dlg .qactions { margin-top: 18px; }
@media (max-width: 900px) {
  .sheet-wrap.full { overflow-x: auto; } .day-stats { grid-template-columns: 1fr 1fr; }
  .gd-cols, .gd-facts { grid-template-columns: 1fr 1fr; } .gd-cols { grid-template-columns: 1fr; }
}

@media (max-width: 1500px) { .gb .geo em { display: none; } }

.sheet.days th small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }

/* ───────── аналитика: карточки месяцев ───────── */
.mcard { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 10px; border-radius: 16px; text-decoration: none; color: var(--ink);
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; min-width: 0; }
.mcard:hover { transform: translateY(-2px); background: rgba(255,255,255,.85); box-shadow: 0 14px 28px -16px rgba(30,60,140,.5); z-index: 5; }
.mcard.now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.mcard.future { opacity: .4; } .mcard.empty:not(.future) { opacity: .6; }
.mc-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.mc-top em { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mc-bar { height: 64px; display: flex; flex-direction: column; margin: 6px 0 4px; }
.mc-bar span { flex: 1; display: flex; justify-content: center; }
.mc-bar .up { align-items: flex-end; border-bottom: 1px solid var(--hair-2); } .mc-bar .down { align-items: flex-start; }
.mc-bar i { width: 62%; display: block; }
.mc-bar .up i { background: linear-gradient(180deg, #4fd6a0, #13a56e); border-radius: 7px 7px 2px 2px; }
.mc-bar .down i { background: linear-gradient(180deg, #e2475c, #f08a98); border-radius: 2px 2px 7px 7px; }
.mc-p { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.mcard.pos .mc-p { color: var(--good); } .mcard.neg .mc-p { color: var(--bad); }
.mc-d { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-d span { font-weight: 650; }
.mc-pay { margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; color: var(--muted); }
.mc-pay b { font-size: 13px; color: var(--ink); } .mc-pay.zero b { color: var(--muted); font-weight: 500; }
.mc-tip { top: calc(100% + 8px); left: 50%; width: 240px; margin-left: -120px; padding: 12px 14px; font-size: 12.5px; pointer-events: none; }
.mcard:hover .mc-tip { visibility: visible; opacity: 1; transform: none; transition: opacity .16s ease .15s, transform .16s ease .15s; }
.mc-tip dd { white-space: nowrap; }
.mc-tip dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; } .mc-tip dt { color: var(--muted); } .mc-tip dd { margin: 0; text-align: right; font-weight: 600; }
.strip .mcard:first-child .mc-tip { left: 0; margin-left: 0; } .strip .mcard:nth-child(12) .mc-tip, .strip .mcard:nth-child(11) .mc-tip { left: auto; right: 0; margin-left: 0; }
[data-theme="dark"] .mcard { background: var(--surf); border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .mcard:hover { background: var(--surf-2); box-shadow: 0 14px 28px -16px rgba(0,0,0,.8); }
.strip { position: relative; z-index: 20; }

/* ───────── форма коста (вертикальная) ───────── */
.cost-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.cost-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cost-add { position: sticky; top: 20px; }
.cost-add h2 { margin-bottom: 16px; }
.vform .opt { font-weight: 450; color: var(--muted); opacity: .7; font-size: 11.5px; margin-left: 4px; }
.vform input, .vform select { height: 42px; font-size: 14px; padding: 0 12px; }
.vselect { appearance: none; -webkit-appearance: none; padding-right: 36px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a86a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.wide-btn { width: 100%; height: 44px; justify-content: center; margin-top: 4px; }
.qdialog .vform { max-width: none; }
.qdialog input[name=amount] { font-size: 15px; font-weight: 600; padding: 0 12px; }
.qdialog { width: min(400px, calc(100vw - 32px)); }
.today3 .t-when { display: flex; flex-direction: column; gap: 2px; }
.today3 .t-when .cap { margin: 0; font-size: 15px; font-weight: 650; color: var(--ink); }
.today3 .t-when em { font-style: normal; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .cost-grid { grid-template-columns: 1fr; } .cost-add { position: static; } }

/* выравнивание «Гео месяца»: всё числовое по правому краю, полоски тоже справа */
table.gb th small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
table.gb th { vertical-align: bottom; }
table.gb td { font-variant-numeric: tabular-nums; }
table.gb .share-cell .share, table.gb .roibar { margin: 6px 0 0 auto; }
table.gb .share i { margin-left: 0; }
table.gb .creo-cell { white-space: nowrap; }
table.gb td .sub { text-align: right; }

/* вложенное стекло не размывает фон второй раз — экономит видеокарту */
.glass .glass, .glass .fact, .glass .mcard { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ───────── график на дашборде: просто и читаемо ───────── */
.chartcard { display: block; padding: 20px 22px 16px; }
.cc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cc-head h3 { margin: 0; font-size: 16px; font-weight: 650; margin-right: auto; }
.seg-tabs { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(40,80,170,.07); gap: 2px; }
.seg-tabs a { padding: 6px 14px; border-radius: 9px; font-size: 13px; font-weight: 550; color: var(--ink-2); text-decoration: none; transition: background .15s ease; }
.seg-tabs a:hover { color: var(--ink); }
.seg-tabs a.on { background: rgba(255,255,255,.95); color: var(--ink); box-shadow: 0 2px 8px -3px rgba(30,60,140,.35); }
[data-theme="dark"] .seg-tabs { background: rgba(255,255,255,.05); }
[data-theme="dark"] .seg-tabs a.on { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.cc-range { display: flex; align-items: center; gap: 6px; width: 100%; justify-content: flex-end; }
.cc-range input { padding: 6px 8px; font-size: 12.5px; }
.cc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 6px; border-top: 1px solid var(--hair); }
.cc-stats div { padding: 12px 4px 0; display: flex; flex-direction: column; gap: 3px; }
.cc-stats div + div { padding-left: 18px; border-left: 1px solid var(--hair); }
.cc-stats span { font-size: 12px; color: var(--muted); } .cc-stats b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.cc-stats small { font-size: 12px; color: var(--muted); font-weight: 500; }
.cc-chart { position: relative; height: 240px; margin-top: 8px; }
@media (max-width: 760px) { .cc-stats { grid-template-columns: 1fr 1fr; } .cc-stats div:nth-child(3) { border-left: 0; padding-left: 4px; } }

/* строки таблиц по дням: мягкая подсветка строки под курсором вместо белых ячеек */
.sheet.days tbody tr { transition: background-color .12s ease; }
.sheet.days tbody tr:hover td { background: transparent; }
.sheet.days tbody tr:hover { background: rgba(47, 99, 240, .05); box-shadow: inset 3px 0 0 var(--accent); }
.sheet.days tbody tr.idle:hover { background: rgba(220, 63, 85, .09); box-shadow: none; }
[data-theme="dark"] .sheet.days tbody tr:hover { background: rgba(147, 166, 255, .07); }
[data-theme="dark"] .sheet.days tbody tr:hover td { background: transparent; }
.sheet.days td.zero { color: var(--muted); }

/* ───────── «Профит по дням»: компактный календарь как PnL-календарь на биржах ───────── */
.pulse { padding: 20px 22px; position: relative; z-index: 3; }
.pl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pl-head h3 { margin: 0 0 2px; font-size: 16px; font-weight: 650; } .pl-head .quiet { font-size: 12.5px; }
.pl-body { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 28px; align-items: start; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-wd { font-size: 10.5px; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 4px; }
.cd { position: relative; height: 50px; border-radius: 10px; padding: 5px 7px; display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none; color: var(--ink-2); background: var(--hair); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.cd.blank { background: transparent; }
.cd-n { font-size: 11px; font-weight: 600; color: var(--muted); }
.cd b { font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; padding-bottom: 2px; }
.cd.pos { background: color-mix(in srgb, var(--good) 11%, transparent); } .cd.pos b { color: var(--good); }
.cd.neg { background: color-mix(in srgb, var(--bad) 10%, transparent); } .cd.neg b { color: var(--bad); }
.cd.flat b { color: var(--muted); }
.cd.future { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); } .cd.future .cd-n { opacity: .45; }
.cd.idle .cd-n { opacity: .6; }
.cd.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
a.cd.pos:hover, a.cd.neg:hover, a.cd.flat:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(15, 24, 48, .4); z-index: 6; }
a.cd.pos:hover { background: color-mix(in srgb, var(--good) 18%, transparent); } a.cd.neg:hover { background: color-mix(in srgb, var(--bad) 16%, transparent); }
.cd-tip { top: calc(100% + 6px); left: 50%; width: 230px; margin-left: -115px; padding: 12px 14px; font-size: 12px; color: var(--ink); pointer-events: none; text-align: left; }
.cd:hover .cd-tip { visibility: visible; opacity: 1; transform: none; transition: opacity .12s ease .08s; }
.cd-tip strong { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.tip-pnl { display: block; font-style: normal; font-size: 18px; font-weight: 750; margin: 2px 0 8px; } .tip-pnl small { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.cd-tip dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; padding-top: 8px; border-top: 1px solid var(--hair); }
.cd-tip dt { color: var(--muted); } .cd-tip dd { margin: 0; text-align: right; font-weight: 600; white-space: nowrap; }
.cal a.cd:nth-child(7n + 1) .cd-tip { left: 0; margin-left: 0; } .cal a.cd:nth-child(7n) .cd-tip { left: auto; right: 0; margin-left: 0; }
.pl-side { display: flex; flex-direction: column; gap: 16px; }
.pl-main span, .pl-grid span { display: block; font-size: 12px; color: var(--muted); }
.pl-main b { font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
.pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding-top: 14px; border-top: 1px solid var(--hair); }
.pl-grid b { font-size: 17px; font-weight: 700; } .pl-grid small { font-size: 12px; color: var(--muted); font-weight: 500; }
.pl-bar { height: 4px; border-radius: 4px; background: var(--hair); margin-top: 6px; overflow: hidden; } .pl-bar i { display: block; height: 100%; background: var(--good); border-radius: 4px; }
[data-theme="dark"] .cd { background: rgba(255,255,255,.035); }
[data-theme="dark"] .cd.pos { background: color-mix(in srgb, var(--good) 13%, transparent); } [data-theme="dark"] .cd.neg { background: color-mix(in srgb, var(--bad) 12%, transparent); }
[data-theme="dark"] .cd.future { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
[data-theme="dark"] .cd.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
@media (max-width: 1000px) { .pl-body { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cd { height: 42px; padding: 4px; } .cd b { font-size: 10px; } }
table.gb.mini { margin-top: 8px; } table.gb.mini th, table.gb.mini td { padding: 10px 6px; }
table.gb.mini .share-cell .share { width: 54px; }
[data-theme="dark"] .cd { background: rgba(255,255,255,.04); }
[data-theme="dark"] .cd.future { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
[data-theme="dark"] .cd.pos.l3, [data-theme="dark"] .cd.pos.l4, [data-theme="dark"] .cd.neg.l3, [data-theme="dark"] .cd.neg.l4 { color: #0b0f1a; }
[data-theme="dark"] .cd.pos.l3 b, [data-theme="dark"] .cd.pos.l4 b, [data-theme="dark"] .cd.neg.l3 b, [data-theme="dark"] .cd.neg.l4 b { color: #0b0f1a; }
@media (max-width: 1000px) { .pl-body { grid-template-columns: 1fr; } .pl-side { padding-left: 0; border-left: 0; display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cd { height: 44px; padding: 4px 5px; } .cd b { font-size: 10.5px; } }

/* ═════════ СВЕТЛАЯ ТЕМА «жемчуг»: спокойный светлый фон, белые карточки без рамок ═════════
   Всё ниже действует только в светлой теме — тёмная не меняется. */
:root:not([data-theme="dark"]) {
  --ink: #0f1830; --ink-2: #3a4560; --muted: #737d94;
  --accent: #3456e0; --accent-soft: rgba(52, 86, 224, .09); --navy: #16204a;
  --good: #109a68; --good-bg: rgba(16, 154, 104, .11);
  --bad: #df4a5f; --bad-bg: rgba(223, 74, 95, .10);
  --warn: #c0870f; --warn-bg: rgba(212, 150, 20, .13);
  --hair: rgba(15, 24, 48, .065); --hair-2: rgba(15, 24, 48, .12);
  --top: #0c8a5c; --top-bg: rgba(16, 154, 104, .16); --top-edge: rgba(16, 154, 104, .3);
}
html:not([data-theme="dark"]) { background: #f2f3f7; }
:root:not([data-theme="dark"]) body {
  background:
    radial-gradient(1000px 640px at 0% -10%, rgba(196, 212, 255, .55) 0%, transparent 60%),
    radial-gradient(900px 600px at 100% -5%, rgba(228, 218, 255, .5) 0%, transparent 55%),
    radial-gradient(1100px 700px at 50% 115%, rgba(204, 236, 246, .5) 0%, transparent 60%),
    linear-gradient(180deg, #f5f6fa 0%, #eef0f6 100%);
  background-attachment: fixed;
}
:root:not([data-theme="dark"]) body::before { opacity: .1; }
:root:not([data-theme="dark"]) .orbs i:nth-child(1) { --c: #c9d7ff; }
:root:not([data-theme="dark"]) .orbs i:nth-child(2) { --c: #e0d6ff; }
:root:not([data-theme="dark"]) .orbs i:nth-child(3) { --c: #c7ecf7; }
:root:not([data-theme="dark"]) .orbs i:nth-child(4) { --c: #e6defe; }
:root:not([data-theme="dark"]) .glass {
  background: linear-gradient(170deg, rgba(255,255,255,.82), rgba(255,255,255,.66));
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(15, 24, 48, .04), 0 14px 36px -18px rgba(15, 24, 48, .2);
}
:root:not([data-theme="dark"]) .glass .glass, :root:not([data-theme="dark"]) .fact.glass { box-shadow: 0 1px 2px rgba(15, 24, 48, .04), 0 8px 20px -14px rgba(15, 24, 48, .18); }
:root:not([data-theme="dark"]) .pop.glass, :root:not([data-theme="dark"]) .qdialog { background: rgba(255,255,255,.97); box-shadow: 0 20px 50px -20px rgba(15, 24, 48, .35), 0 0 0 1px rgba(15,24,48,.05); }
:root:not([data-theme="dark"]) .nav a.on, :root:not([data-theme="dark"]) .seg-tabs a.on { background: #fff; box-shadow: 0 1px 2px rgba(15,24,48,.06), 0 4px 12px -6px rgba(15,24,48,.18); }
:root:not([data-theme="dark"]) .nav a:hover { background: rgba(15, 24, 48, .04); }
:root:not([data-theme="dark"]) .seg-tabs { background: rgba(15, 24, 48, .05); }
:root:not([data-theme="dark"]) .btn { background: #fff; border-color: rgba(15,24,48,.08); box-shadow: 0 1px 2px rgba(15,24,48,.05); }
:root:not([data-theme="dark"]) .btn.primary { background: linear-gradient(180deg, #4466ea, #2f4fd6); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -10px rgba(52,86,224,.8); }
:root:not([data-theme="dark"]) input, :root:not([data-theme="dark"]) select, :root:not([data-theme="dark"]) textarea { background: #fff; border-color: rgba(15,24,48,.1); }
:root:not([data-theme="dark"]) .mcard, :root:not([data-theme="dark"]) .records li:hover, :root:not([data-theme="dark"]) .gd-cols section,
:root:not([data-theme="dark"]) .gd-facts div, :root:not([data-theme="dark"]) .status-card, :root:not([data-theme="dark"]) .rules,
:root:not([data-theme="dark"]) .tiers div, :root:not([data-theme="dark"]) .win div { background: rgba(255,255,255,.7); border-color: rgba(15,24,48,.06); }
:root:not([data-theme="dark"]) .sheet thead th { background: rgba(250, 251, 253, .98); }
:root:not([data-theme="dark"]) .sheet .date { background: #fafbfd; }
:root:not([data-theme="dark"]) .sheet.days tbody tr.idle td { background: rgba(223, 74, 95, .045); }
:root:not([data-theme="dark"]) .tile.zp { background: linear-gradient(150deg, #1d2a5e, #3452c9); border-color: transparent; box-shadow: 0 18px 40px -18px rgba(40, 60, 170, .55); }
:root:not([data-theme="dark"]) .sync-status, :root:not([data-theme="dark"]) .quiet { color: var(--muted); }
.pulse { position: relative; z-index: 3; }
:root:not([data-theme="dark"]) .tile.zp .cap, :root:not([data-theme="dark"]) .tile.zp .quiet, :root:not([data-theme="dark"]) .tile.zp .sub { color: rgba(255,255,255,.72); }
[data-theme="dark"] .cd.blank { background: transparent; }
.cd-tip.pop.glass { background: #fff; } [data-theme="dark"] .cd-tip.pop.glass { background: #141a2b; }
/* скрытые подсказки и пятна фона не должны давать горизонтальную прокрутку */
html, body { overflow-x: clip; }
.r-main span { overflow: visible; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
/* сетки не распираются длинными числами */
main { min-width: 0; }
.dash, .dash > *, .tiles > *, .pair > *, .kpi-strip > *, .cost-grid > *, .set-grid > * { min-width: 0; }
.tile .v { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .tile .v { font-size: 24px; }
  .records li { gap: 10px; padding: 10px 4px; flex-wrap: wrap; }
  .r-main { flex: 1 1 calc(100% - 140px); }
  .r-amt { font-size: 14px; margin-left: auto; }
  .r-del { width: auto; } .del-btn { opacity: .7; }
}
@media (max-width: 560px) { .kpi-strip { grid-template-columns: 1fr 1fr !important; } }

/* ───────── Telegram ───────── */
.set-ico.tg { background: linear-gradient(150deg, #37aee2, #1e88c8); box-shadow: 0 8px 18px -8px rgba(30,136,200,.6); }
.set-ico.tg svg { fill: #fff; stroke: none; }
.toggles { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 4px; }
.tgl { flex-direction: row !important; align-items: center; gap: 10px !important; cursor: pointer; color: var(--ink) !important; font-size: 13.5px !important; font-weight: 500 !important; }
.tgl input { position: absolute; opacity: 0; pointer-events: none; width: auto !important; height: auto !important; }
.tgl span { width: 36px; height: 21px; border-radius: 999px; background: var(--hair-2); position: relative; flex: none; transition: background .2s ease; }
.tgl span::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
.tgl input:checked + span { background: var(--good); } .tgl input:checked + span::after { transform: translateX(15px); }
.tgl input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-cap { margin: 16px 0 6px; font-size: 12px; color: var(--muted); }
.pb-box { display: flex; gap: 8px; align-items: center; }
.pb-box code { flex: 1; min-width: 0; font-size: 11.5px; padding: 8px 10px; border-radius: 10px; background: var(--hair); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.pb-steps { margin: 12px 0 8px; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.menu-item .soon.on { color: var(--good); background: var(--good-bg); }

/* ───────── уведомления: раскладка блока ───────── */
.grow-1 { flex: 1; }
.st-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--hair); color: var(--ink-2); }
.st-pill.ok { background: var(--good-bg); color: var(--good); } .st-pill.err { background: var(--bad-bg); color: var(--bad); }
.st-pill .dot { margin: 0; }
.col-h { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 12px; }
.col-h .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.tg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 28px; align-items: start; }
.tg-col .vform { max-width: none; }
.tgl b { font-weight: 600; } .tgl em { font-style: normal; color: var(--muted); font-size: 12.5px; margin-left: -4px; }
.sched { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--hair); transition: opacity .2s ease; }
.sched label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 550; }
.sched select { height: 38px; font-size: 13.5px; padding: 0 10px; width: 100%; }
.sched.off { opacity: .45; pointer-events: none; }
.tg-actions { display: flex; flex-direction: column; gap: 8px; align-self: end; min-width: 200px; }
.tg-actions .btn { justify-content: center; }
.tg-bottom { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hair); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.feed li:last-child { border-bottom: 0; }
.f-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--hair); font-size: 14px; flex: none; }
.feed li.deposit .f-ico { background: var(--good-bg); }
.f-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .f-main b { font-size: 13.5px; }
.feed li.deposit .f-main b { color: var(--good); }
.f-main em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.feed-empty { font-size: 13px; line-height: 1.5; margin: 0; }
@media (max-width: 1000px) { .tg-grid, .tg-bottom { grid-template-columns: 1fr; } .tg-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; } }

/* ═════════ правки 22.10 ═════════ */
/* календарь: правая колонка — компактный список */
.pl-body { grid-template-columns: minmax(0, 620px) minmax(240px, 320px); justify-content: space-between; gap: 32px; }
.pl-side { display: flex; flex-direction: column; gap: 0; padding: 4px 0 0 26px; border-left: 1px solid var(--hair); }
.pl-cap { font-size: 12px; color: var(--muted); }
.pl-total { font-size: 32px; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0 14px; }
.pl-days span { font-size: 12.5px; color: var(--muted); } .pl-days span b { color: var(--ink); font-size: 14px; }
.pl-days .pl-bar { margin: 7px 0 14px; }
.pl-list { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.pl-list dt, .pl-list dd { padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.pl-list dt { color: var(--muted); } .pl-list dd { margin: 0; text-align: right; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-list dd.good { color: var(--good); } .pl-list dd.bad { color: var(--bad); }
@media (max-width: 1000px) { .pl-side { border-left: 0; padding-left: 0; } }

/* таблицы по дням: депы жирные, простои заметнее, плюсовые дни слегка зелёные */
.sheet.days td.deps { font-weight: 700; color: var(--ink); } .sheet.days td.deps.zero { font-weight: 500; color: var(--muted); }
.sheet.days tbody tr.idle td, :root:not([data-theme="dark"]) .sheet.days tbody tr.idle td { background: rgba(223, 74, 95, .085); }
.sheet.days tbody tr.idle td.date { box-shadow: inset 3px 0 0 rgba(223, 74, 95, .55); }
.sheet.days tbody tr.gain td { background: rgba(16, 154, 104, .045); }
[data-theme="dark"] .sheet.days tbody tr.idle td { background: rgba(238, 128, 144, .09); }
[data-theme="dark"] .sheet.days tbody tr.gain td { background: rgba(92, 207, 162, .045); }
/* сегодня: без линий сверху/снизу, просто метка */
.sheet.days tr.is-today td { box-shadow: none; }
.sheet.days tr.is-today td.date b { color: var(--accent); }
.today-tag { font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--accent); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; margin-left: 8px; }
/* итого: вся строка одним цветом, включая первую ячейку */
.sheet.days tfoot td, .sheet.days tfoot td.date { background: linear-gradient(180deg, rgba(52,86,224,.09), rgba(107,92,240,.07)) !important; }
[data-theme="dark"] .sheet.days tfoot td, [data-theme="dark"] .sheet.days tfoot td.date { background: linear-gradient(180deg, rgba(147,166,255,.12), rgba(147,166,255,.06)) !important; }

/* ROI в аналитике: плашка с обводкой по центру текста, а не по ячейке */
td.t-top { box-shadow: none; }
td .pill.t-top { box-shadow: inset 0 0 0 1px var(--top-edge); }

/* окно страны: не ломается на узком экране */
.geo-dlg { padding: 22px; }
.gd-roi { white-space: nowrap; flex: none; }
.gd-head > div { min-width: 0; }
.gd-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gd-facts span { line-height: 1.4; display: block; margin-top: 2px; }
.gd-cols { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gd-big span { line-height: 1.2; }
.gd-list li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.gd-list .n { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.gd-list .n em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 450; }
.gd-list b { white-space: nowrap; }
.geo-dlg .qactions .btn { white-space: nowrap; }

/* косты: три колонки в ряд */
.cost-grid { grid-template-columns: 320px 320px minmax(0, 1fr); }
.cost-grid > .panel { margin: 0; }
.rec-card { min-width: 0; }
.rec-card .records li { gap: 12px; }
.rec-card .r-del { width: auto; }
@media (max-width: 1250px) { .cost-grid { grid-template-columns: 1fr 1fr; } .rec-card { grid-column: 1 / -1; } .cost-add { position: static; } }
@media (max-width: 760px) { .cost-grid { grid-template-columns: 1fr; } }
.geo-dlg .x:focus, .geo-dlg .x:focus-visible { outline: none; box-shadow: none; }
.sheet.days thead th { white-space: nowrap; vertical-align: bottom; }
:root:not([data-theme="dark"]) .sheet.days tbody tr.gain td { background: rgba(16, 154, 104, .045); }
:root:not([data-theme="dark"]) .sheet.days tbody td.date { background: transparent; }
:root:not([data-theme="dark"]) .sheet.days tbody tr.idle td.date { background: rgba(223, 74, 95, .085); }
:root:not([data-theme="dark"]) .sheet.days tbody tr.gain td.date { background: rgba(16, 154, 104, .045); }
/* календарь: аккуратные почти квадратные клетки, не растягивается на всю ширину */
.pl-body { grid-template-columns: minmax(0, 500px) minmax(260px, 340px); justify-content: start; column-gap: 56px; }
.cal { max-width: 500px; }
.cd { height: auto; aspect-ratio: 1.25 / 1; min-height: 46px; }
@media (max-width: 1000px) { .pl-body { grid-template-columns: minmax(0, 1fr); } .cal { max-width: 560px; } .pl-side { max-width: 560px; } }
.pl-body { justify-content: center; column-gap: 64px; }
.cd b { font-size: 11.5px; }
@media (max-width: 1280px) { .pl-body { grid-template-columns: minmax(0, 520px) minmax(240px, 300px); column-gap: 36px; } }
@media (max-width: 1180px) { .pl-body { grid-template-columns: minmax(0, 1fr); justify-items: center; } .cal, .pl-side { width: 100%; max-width: 560px; } .pl-side { border-left: 0; padding-left: 0; } }
/* цена лида: цены ровным столбиком справа, рост/падение — слева от них */
.sheet.days td.cpl-cell { white-space: nowrap; }
.cpl-cell .d-slot { display: inline-block; min-width: 58px; text-align: right; margin-right: 8px; }
.cpl-cell .d-slot .delta { margin: 0; }
.cpl-cell .pill { display: inline-block; min-width: 80px; text-align: center; }
/* календарь и итоги прижаты влево, под заголовок */
.pl-body { justify-content: start; }
@media (max-width: 1180px) { .pl-body { justify-items: start; } }

/* ───────── Профит по дням: правая колонка ───────── */
.pl-target { display: block; text-decoration: none; color: inherit; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--hair); }
.pl-target .pl-cap { display: flex; justify-content: space-between; font-size: 12.5px; }
.pl-target .pl-cap em { font-style: normal; font-weight: 700; color: var(--ink); }
.pl-tbar { position: relative; height: 8px; border-radius: 8px; background: var(--hair); margin: 8px 0 9px; }
.pl-tbar i { display: block; height: 100%; min-width: 4px; border-radius: 8px; background: var(--accent); }
.pl-tbar i.done { background: var(--good); }
.pl-tbar b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink-2); opacity: .55; }
.pl-need { font-size: 13px; color: var(--muted); } .pl-need b { color: var(--ink); font-weight: 700; }
.pl-target:hover .pl-need b { color: var(--accent); }
.pl-arrow { font-size: 11.5px; font-weight: 650; margin-left: 6px; color: var(--muted); }
.pl-arrow.up { color: var(--good); } .pl-arrow.down { color: var(--bad); }
.cd.costd { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 22%, transparent); }
.cd.costd b { font-weight: 600; opacity: .9; }

/* ───────── Таргеты ───────── */
.tgt-form { max-width: 980px; }
.tgt-form h2 { font-size: 17px; }
.tgt-inputs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.tgt-inputs input { height: 44px; font-size: 15px; width: 100%; }
.tgt-main-in input { font-size: 20px; font-weight: 650; }
.tgt-pick-head { margin: 24px 0 10px; }
.tgt-pick-head h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 650; }
.tgt-sum { margin-left: 6px; color: var(--ink); } .tgt-sum.bad { color: var(--bad); }
.tgt-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 8px; }
.tgt-geo-row { flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--hair); background: var(--surf, rgba(255,255,255,.45)); color: var(--ink); transition: border-color .15s, background .15s; }
.tgt-geo-row:hover { border-color: var(--hair-2); }
.tgt-geo-row.on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.tgt-geo-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; flex: none; }
.tgt-g { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .tgt-g b { font-size: 14px; }
.tgt-g em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgt-h { margin-left: auto; font-size: 11.5px; color: var(--muted); text-align: right; line-height: 1.3; }
.tgt-share { position: relative; flex: none; display: flex; align-items: center; }
.tgt-share input { width: 74px; height: 34px; padding: 0 22px 0 10px; text-align: right; font-weight: 600; }
.tgt-share input:disabled { opacity: .4; }
.tgt-share i { position: absolute; right: 9px; font-style: normal; font-size: 12px; color: var(--muted); pointer-events: none; }
.tgt-new { cursor: default; } .tgt-new input { margin-left: auto; width: 170px; height: 34px; }
.tgt-actions { display: flex; gap: 10px; margin-top: 22px; }
.tgt-del { margin-top: 14px; }

.tgt-hero { padding: 22px 26px; }
.tgt-hero-top { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.tgt-hero-top .btn { margin-left: auto; align-self: flex-start; }
.tgt-big { font-size: 38px; font-weight: 750; letter-spacing: -.025em; line-height: 1.1; margin-top: 2px; }
.tgt-fact { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tgt-fact .cap { width: 100%; }
.tgt-fact b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.tgt-bar { position: relative; height: 14px; border-radius: 14px; background: var(--hair); margin: 22px 0 30px; }
.tgt-bar > i { display: block; height: 100%; min-width: 8px; border-radius: 14px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); }
.tgt-bar > i.done { background: var(--good); }
.tgt-pace { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink-2); border-radius: 2px; }
.tgt-pace span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px; white-space: nowrap;
  font-size: 11.5px; font-weight: 550; color: var(--muted); }
.tgt-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 1px solid var(--hair); }
.tgt-hero-stats > div { padding: 14px 18px 2px 0; display: flex; flex-direction: column; }
.tgt-hero-stats span, .tgt-plan span, .tgt-geo-plan span, .tgt-aim span { font-size: 12px; color: var(--muted); }
.tgt-hero-stats b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.tgt-hero-stats em, .tgt-plan em, .tgt-geo-plan em { font-style: normal; font-size: 11.5px; color: var(--muted); }

.tgt-sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 30px 0 12px; }
.tgt-sec-head h2 { margin: 0; font-size: 17px; font-weight: 650; }
.tgt-plan { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px 0; }
.tgt-plan > div { padding: 12px 18px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; min-width: 0; }
.tgt-plan > div:last-child { border-right: 0; }
.tgt-plan b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.tgt-mini { display: block; height: 4px; border-radius: 4px; background: var(--hair); margin-top: 7px; overflow: hidden; }
.tgt-mini i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.tgt-mini i.done { background: var(--good); }

.tgt-geos { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-top: 16px; }
.tgt-geo { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tgt-geo header { display: flex; align-items: center; gap: 10px; }
.tgt-geo header .chip { margin-left: auto; }
.tgt-geo-t { display: flex; flex-direction: column; line-height: 1.2; } .tgt-geo-t b { font-size: 17px; } .tgt-geo-t span { font-size: 12px; color: var(--muted); }
.tgt-warn, .tgt-note { margin: -4px 0 0; font-size: 12px; padding: 7px 10px; border-radius: 10px; }
.tgt-warn { color: var(--warn); background: var(--warn-bg); } .tgt-note { color: var(--ink-2); background: var(--surf, rgba(40,80,170,.05)); }
.tgt-geo-plan { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.tgt-geo-plan > div { display: flex; flex-direction: column; min-width: 0; }
.tgt-geo-plan b { font-size: 17px; font-weight: 700; }
.tgt-aim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 13px; background: var(--accent-soft); padding: 11px 4px; }
.tgt-aim > div { display: flex; flex-direction: column; padding: 0 12px; border-right: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); }
.tgt-aim > div:last-child { border-right: 0; }
.tgt-aim b { font-size: 16px; font-weight: 750; color: var(--accent); }
.tgt-geo-fact { border-top: 1px solid var(--hair); padding-top: 12px; }
.tgt-geo-prog { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); } .tgt-geo-prog b { color: var(--ink); }
.tgt-geo-fact dl { display: grid; grid-template-columns: 1fr auto; margin: 10px 0 0; font-size: 13px; }
.tgt-geo-fact dt, .tgt-geo-fact dd { padding: 5px 0; } .tgt-geo-fact dt { color: var(--muted); }
.tgt-geo-fact dd { margin: 0; text-align: right; font-weight: 650; }
.tgt-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); } .tgt-hint b { color: var(--accent); }

.tgt-tz { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 16px; }
.tgt-tz-card { padding: 18px 20px; }
.tgt-tz-top { display: flex; align-items: center; justify-content: space-between; }
.tgt-tz-btns { display: flex; gap: 6px; }
.tgt-step { width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--hair-2); background: var(--surf, rgba(255,255,255,.7));
  color: var(--accent); font: 600 18px/1 inherit; cursor: pointer; display: grid; place-items: center; padding: 0; }
.tgt-step:hover:not(:disabled) { background: var(--accent-soft); }
.tgt-step:disabled { opacity: .35; cursor: default; }
.tgt-tz-v { margin: 6px 0 2px; } .tgt-tz-v b { font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
.tgt-tz-v span { margin-left: 6px; color: var(--muted); font-size: 15px; }

:root:not([data-theme="dark"]) .tgt-geo-row, :root:not([data-theme="dark"]) .tgt-step { background: rgba(255,255,255,.75); }
:root:not([data-theme="dark"]) .tgt-geo-row.on { background: var(--accent-soft); }
[data-theme="dark"] .tgt-geo-row { border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .tgt-step { border-color: rgba(255,255,255,.09); }

@media (max-width: 1100px) { .tgt-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tgt-plan > div:nth-child(3) { border-right: 0; } .tgt-plan > div:nth-child(n+4) { border-top: 1px solid var(--hair); } }
@media (max-width: 700px) {
  .tgt-inputs { grid-template-columns: 1fr 1fr; } .tgt-main-in { grid-column: 1 / -1; }
  .tgt-pick { grid-template-columns: 1fr; }
  .tgt-h { display: none; }
  .tgt-hero { padding: 18px; } .tgt-big { font-size: 30px; }
  .tgt-plan { grid-template-columns: 1fr 1fr; }
  .tgt-plan > div { border-right: 0; border-top: 1px solid var(--hair); }
  .tgt-plan > div:nth-child(odd) { border-right: 1px solid var(--hair); } .tgt-plan > div:nth-child(-n+2) { border-top: 0; }
  .tgt-geos { grid-template-columns: 1fr; }
  .tgt-tz { grid-template-columns: 1fr; }
}

.tgt-plan em.bad { color: var(--bad); } .tgt-plan em.good { color: var(--good); }


/* ═════════ v31: меню, вход, таргет на дашборде, мобильная версия ═════════ */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* вход: только поле пароля */
.login-only input[type=password] { height: 56px; padding: 0 20px; font-size: 17px; border-radius: 18px; text-align: center; letter-spacing: .02em;
  box-shadow: 0 1px 2px rgba(15,24,48,.05), 0 18px 40px -22px rgba(15,24,48,.35); }
.login-only input[aria-invalid=true] { border-color: var(--bad); }
.login-err { margin: 0; text-align: center; font-size: 13px; color: var(--bad); }
[data-theme="dark"] .login-only input[type=password] { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }

/* меню на десктопе: обёртка не влияет на раскладку */
.side-menu { display: contents; }
.burger, .nav-scrim { display: none; }

/* таргет справа в «Профит по дням» */
.pl-target .pl-cap { margin-bottom: 4px; }
.pl-target .pl-cap em { font-size: 14px; }
.pl-trow { margin-top: 10px; }
.pl-tl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); }
.pl-tl b { font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-tl b i { font-style: normal; color: var(--ink); font-weight: 700; } .pl-tl b i.bad { color: var(--bad); }
.pl-tl small { margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); min-width: 32px; display: inline-block; text-align: right; }
.pl-trow.main .pl-tl span { color: var(--ink); font-weight: 600; } .pl-trow.main .pl-tl b i { font-size: 15px; }
.pl-tbar { margin: 6px 0 0; }
.pl-tbar.thin { height: 5px; }
.pl-target .pl-need { display: block; margin-top: 12px; }
.pl-side.has-tg .pl-target { padding-bottom: 16px; }
/* статистика дней: списком справа (без таргета) или строкой под календарём (с таргетом) */
.pl-stats.list { display: flex; flex-direction: column; }
.pl-stats.list .pl-stat { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.pl-stats.list .pl-stat span { color: var(--muted); }
.pl-stats.list .pl-stat.days { display: block; border-top: 0; padding: 0 0 14px; }
.pl-stat b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-stat b.good { color: var(--good); } .pl-stat b.bad { color: var(--bad); }
.pl-stat.days span { font-size: 12.5px; color: var(--muted); } .pl-stat.days span b { font-size: 14px; }
.pl-stat.days .pl-bar { margin: 7px 0 0; }
.pl-stats.foot { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair); }
.pl-stats.foot .pl-stat { display: flex; flex-direction: column; gap: 3px; padding: 2px 16px; border-left: 1px solid var(--hair); min-width: 0; }
.pl-stats.foot .pl-stat:first-child { padding-left: 0; border-left: 0; }
.pl-stats.foot .pl-stat > span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-stats.foot .pl-stat > b { font-size: 15px; }
.pl-side.has-tg .pl-target { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
@media (max-width: 1180px) { .pl-stats.foot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 0; }
  .pl-stats.foot .pl-stat:nth-child(3n + 1) { padding-left: 0; border-left: 0; } }
@media (max-width: 700px) { .pl-stats.foot { grid-template-columns: 1fr 1fr; }
  .pl-stats.foot .pl-stat { border-left: 0 !important; padding: 2px 0 !important; }
  .pl-stats.foot .pl-stat.days { grid-column: 1 / -1; } }

/* календарь: клетки не распираются цифрами */
.cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cd { min-width: 0; overflow: visible; }
.cd b { overflow: hidden; text-overflow: clip; }
.cd-short { display: none; }

/* подсказка «план к сегодня» у правого края не вылезает */
.tgt-pace.end span { left: auto; right: -2px; transform: none; }
.tgt-speed { margin: 16px 0 0; font-size: 13px; }
.tgt-hero-stats b small { font-size: 13px; font-weight: 500; color: var(--muted); }
.tgt-share { margin-left: auto; }
.tgt-h + .tgt-share { margin-left: 0; }

/* ───────── ≤ 860px: мобильная шапка с меню ───────── */
@media (max-width: 860px) {
  :root { --bar-h: 58px; }
  .side {
    position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 50; height: var(--bar-h); margin: 8px 10px 0;
    padding: 0 8px 0 10px; flex-direction: row; align-items: center; gap: 10px; border-radius: 20px;
  }
  .brand { flex-direction: row; align-items: center; gap: 10px; padding: 0; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .brand-mark i { width: 21px; height: 28px; }
  .brand-word { width: 60px; height: 16px; }
  .burger { display: grid; place-content: center; gap: 4px; margin-left: auto; width: 42px; height: 42px; border-radius: 13px; padding: 0;
    border: 1px solid var(--hair-2); background: rgba(255,255,255,.75); cursor: pointer; color: var(--ink); }
  .burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s ease, opacity .18s ease; }
  .side.open .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .side.open .burger i:nth-child(2) { opacity: 0; }
  .side.open .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* аватар профиля живёт в шапке, слева от кнопки меню */
  .top .profile { position: fixed; z-index: 55; top: calc(max(8px, env(safe-area-inset-top)) + (var(--bar-h) - 42px) / 2); right: 70px; margin: 0; }
  .top .profile .avatar { width: 42px; height: 42px; border-radius: 13px; }

  .side-menu {
    display: flex; flex-direction: column; gap: 2px; position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    padding: 8px; border-radius: 20px; max-height: calc(100dvh - var(--bar-h) - 40px); overflow-y: auto;
    background: rgba(250, 251, 255, .97); box-shadow: 0 24px 60px -24px rgba(15, 24, 48, .45), 0 0 0 1px rgba(15,24,48,.05);
    visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }
  .side.open .side-menu { visibility: visible; opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; }
  .side-menu .nav { display: flex; flex-direction: column; gap: 2px; }
  .side-menu .nav a { padding: 13px 14px; font-size: 15px; border-radius: 14px; }
  .side-menu .nav a span { display: inline; }
  .side-menu .nav a svg { width: 20px; height: 20px; }
  .side-menu .grow { display: none; }
  .side-menu .sync-status { display: block; margin: 6px 0 0; padding: 12px 14px 4px; border-top: 1px solid var(--hair); }
  .side-menu .linkbtn { padding: 12px 14px; font-size: 15px; border-radius: 14px; }
  .side-menu .linkbtn span { display: inline; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(15, 24, 48, .18);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity .18s ease; }
  body.nav-open { overflow: hidden; }

  /* заголовок страницы и ряд управления под ним */
  .top { gap: 10px; margin: 16px 0 18px; }
  .top h1 { flex-basis: 100%; font-size: 26px; }
  .top .month-nav { flex: 1 1 auto; justify-content: space-between; margin-left: 0; }
  .top .month-nav .cur { min-width: 0; flex: 1; padding: 0 4px; }
  .top .year-tabs { margin-left: 0; }
  .top .sub { flex: 1 1 100%; order: 3; }
}
[data-theme="dark"] .side-menu { background: rgba(18, 23, 38, .97); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
[data-theme="dark"] .burger { background: var(--surf); border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .nav-scrim { background: rgba(0, 0, 0, .4); }

/* ───────── ≤ 700px: содержимое страниц ───────── */
@media (max-width: 700px) {
  /* KPI-полоса: 2 колонки с ровными разделителями */
  .kpi-strip { grid-template-columns: 1fr 1fr !important; padding: 4px 0; }
  .kpi-strip > div { border-right: 0 !important; border-top: 1px solid var(--hair); padding: 12px 16px; }
  .kpi-strip > div:nth-child(odd) { border-right: 1px solid var(--hair) !important; }
  .kpi-strip > div:nth-child(-n+2) { border-top: 0; }
  .kpi-strip b { font-size: 19px; }

  /* плитки компактнее */
  .tiles { gap: 12px; }
  .tile { padding: 16px; min-height: 0; }
  .tile .v { font-size: 22px; }

  /* календарь: короткие суммы */
  .pulse { padding: 18px 14px; }
  .cal { gap: 4px; }
  .cd { height: 46px; aspect-ratio: auto; min-height: 0; padding: 4px 3px; border-radius: 9px; }
  .cd-n { font-size: 10px; padding-left: 2px; }
  .cd b { font-size: 10.5px; letter-spacing: -.02em; padding-bottom: 1px; }
  .cd-full { display: none; } .cd-short { display: inline; }
  .cd-tip { display: none; }
  .pl-side { padding: 18px 0 0 !important; border-left: 0 !important; border-top: 1px solid var(--hair); margin-top: 6px; display: flex !important; }
  .pl-body { gap: 0; }

  /* таблица «По гео» на дашборде: только главное */
  table.gb.mini th:nth-child(2), table.gb.mini td:nth-child(2), table.gb.mini th:nth-child(4), table.gb.mini td:nth-child(4) { display: none; }

  /* длинные таблицы: первая колонка закреплена, справа тень-подсказка */
  .table-wrap, .sheet-wrap.full { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  table.gb th:first-child, table.gb td:first-child, .sheet.days th:first-child, .sheet.days td:first-child { position: sticky; left: 0; z-index: 2; }
  table.gb td:first-child, .sheet.days td:first-child { background: var(--sticky-bg, #fbfbfd); }
  table.gb th:first-child, .sheet.days th:first-child { background: var(--sticky-bg, #fbfbfd); z-index: 3; }
  table.gb td:first-child::after, .sheet.days td:first-child::after { content: ""; position: absolute; top: 0; bottom: 0; right: -10px; width: 10px;
    background: linear-gradient(90deg, rgba(15,24,48,.07), transparent); pointer-events: none; }

  /* настройки */
  .set-card { padding: 20px 18px; }
  .set-head { flex-wrap: wrap; }
  .set-head > :not(.set-ico):not(.st-pill) { flex: 1 1 calc(100% - 60px); min-width: 0; }
  .set-head .st-pill { order: 3; margin-left: 52px; }
  .tg-grid, .tg-bottom { grid-template-columns: minmax(0, 1fr) !important; gap: 22px; }
  .tg-actions .btn { flex: 1 1 auto; }
  .sched { grid-template-columns: 1fr 1fr; }
  .sched label:first-child { grid-column: 1 / -1; }
  .pb-box { flex-wrap: wrap; } .pb-box code { flex-basis: 100%; }

  /* таргеты */
  .tgt-hero-top { gap: 14px 22px; }
  .tgt-hero-top .btn { order: -1; margin-left: auto; position: absolute; right: 18px; top: 18px; }
  .tgt-hero { position: relative; }
  .tgt-fact b { font-size: 21px; }
  .tgt-bar { margin: 18px 0 30px; }
  .tgt-hero-stats { grid-template-columns: 1fr 1fr; }
  .tgt-hero-stats > div { padding: 12px 10px 4px 0; }
  .tgt-hero-stats b { font-size: 18px; }
  .tgt-geo { padding: 16px; }
  .tgt-aim { padding: 10px 2px; } .tgt-aim > div { padding: 0 9px; } .tgt-aim b { font-size: 15px; }
  .tgt-geo-row { padding: 10px; gap: 9px; }
  .tgt-new input { width: 150px; }
  .tgt-share { margin-left: auto !important; }
  .tgt-actions { flex-wrap: wrap; } .tgt-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* косты, аналитика */
  .cost-grid { gap: 14px; }
  .records li { padding: 10px 4px; }
}
:root:not([data-theme="dark"]) { --sticky-bg: #fbfbfd; }
[data-theme="dark"] { --sticky-bg: #121726; }
@media (max-width: 380px) {
  .cd b { font-size: 9.5px; }
  .top h1 { font-size: 23px; }
  .tgt-aim span { font-size: 11px; }
}
.pl-side.has-tg { display: block !important; }
@media (min-width: 1181px) { .pl-body.with-tg { grid-template-columns: minmax(0, 500px) minmax(300px, 520px); } }
@media (hover: none) { .hover-hint { display: none; } }

/* спам-алерт */
.set-ico.spam { background: linear-gradient(150deg, #f0616f, #c8323f); box-shadow: 0 8px 18px -8px rgba(200,50,63,.6); }
.spam-rule { grid-template-columns: 1fr 1fr !important; }
.spam-rule input { height: 38px; font-size: 14px; width: 100%; }
.tg-bottom.one { grid-template-columns: minmax(0, 1fr); }

/* ═════════ Оптимизация ═════════
   Порядок страницы = порядок решений: что сделать первым → что льётся в минус сейчас → стоп / объём →
   не повторять / пробовать → разбор аналитика → сетапы → разрезы → журнал и настройки. */

.op-bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.op-geos { display: flex; gap: 6px; flex-wrap: wrap; }
.op-geos a { padding: 6px 12px; border-radius: 10px; font-size: 13px; font-weight: 550; text-decoration: none; color: var(--ink-2);
  background: var(--surf, rgba(255,255,255,.6)); border: 1px solid var(--hair); }
.op-geos a:hover { border-color: var(--hair-2); }
.op-geos a.on { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.op-state { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.op-state form { margin: 0; }
.op-state .btn:disabled { opacity: .55; cursor: default; }
.op-sync { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 12.5px; }
.op-sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: opPulse 1.4s ease-in-out infinite; }
.op-sync.err { color: var(--bad); }
@keyframes opPulse { 50% { opacity: .3; } }

.op-hint { margin: 2px 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.op-empty { margin: 4px 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.op-hide { display: none; } [data-list].open .op-hide { display: block; }
.op-moreb { margin-top: 8px; border: 0; background: none; padding: 6px 0; font: 600 12.5px/1 inherit; color: var(--accent); cursor: pointer; }
.op-moreb:hover { text-decoration: underline; }

/* первый запуск */
.op-onb { padding: 26px 28px; margin-bottom: 18px; max-width: 760px; }
.op-onb h2 { margin: 0 0 8px; font-size: 18px; }
.op-onb p { margin: 0 0 14px; color: var(--ink-2); line-height: 1.55; }

/* ── что сделать в первую очередь ── */
.op-top { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0; padding: 0; margin-bottom: 18px; overflow: hidden; }
.op-top-main { padding: 22px 26px 18px; min-width: 0; }
.op-top h2 { margin: 0 0 14px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.op-prio { list-style: none; margin: 0; padding: 0; }
.op-prio li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0;
  border-top: 1px solid var(--hair); }
.op-prio li:first-child { border-top: 0; padding-top: 2px; }
.op-pn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: var(--hair); color: var(--ink-2); }
.op-prio .k-stop .op-pn, .op-prio .k-live .op-pn { background: var(--bad-bg); color: var(--bad); }
.op-prio .k-scale .op-pn, .op-prio .k-better .op-pn { background: var(--good-bg); color: var(--good); }
.op-pt { min-width: 0; }
.op-pt p { margin: 0; font-size: 14.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-pt p b { font-weight: 700; }
.op-pobj { color: var(--ink-2); font-weight: 550; }
.op-pt em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-pm { text-align: right; font-size: 20px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1; }
.op-pm small { display: block; font-size: 11px; font-weight: 550; color: var(--muted); letter-spacing: 0; }
.op-pm.good { color: var(--good); } .op-pm.bad { color: var(--bad); }
.op-note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }
.op-calm { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; max-width: 60ch; }

.op-geostate { display: flex; flex-direction: column; border-left: 1px solid var(--hair); background: color-mix(in srgb, var(--hair) 35%, transparent); }
.op-gs { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 13px 18px; text-decoration: none; color: inherit;
  border-top: 1px solid var(--hair); align-items: center; }
.op-gs:first-child { border-top: 0; }
.op-gs:hover, .op-gs.on { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.op-gs-g { font-weight: 650; font-size: 13.5px; }
.op-gs .pill { font-size: 11.5px; font-weight: 650; justify-self: end; }
.op-gs b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.op-gs b small { font-size: 11px; font-weight: 500; color: var(--muted); }
.op-gs em { grid-column: 1 / -1; font-style: normal; font-size: 11.5px; color: var(--muted); }
.op-gs.neg { box-shadow: inset 3px 0 0 var(--bad); }

/* ── льётся в минус сейчас ── */
.op-live { padding: 18px 22px 14px; margin-bottom: 18px; box-shadow: inset 3px 0 0 var(--bad), 0 1px 2px rgba(15,24,48,.04), 0 14px 36px -18px rgba(15,24,48,.2); }
.op-live header h2, .op-col header h2, .op-report h2, .op-attrs h2, .op-views h2, .op-journal h2, .op-settings h2 {
  margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.op-live h2 { color: var(--bad); }
.op-lrow { display: none; grid-template-columns: 26px minmax(0, 1.2fr) auto minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--hair); }
.op-lrow:not(.op-hide), .op-live.open .op-lrow { display: grid; }
.op-lnums { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.op-lnums small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.op-lwhy { font-size: 12.5px; color: var(--bad); }

/* ── доска решений ── */
.op-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.op-board.second { margin-bottom: 18px; }
.op-col { min-width: 0; padding: 18px 18px 12px; border-radius: var(--r-lg); background: var(--glass-strong, #fff);
  box-shadow: 0 1px 2px rgba(15,24,48,.04), 0 14px 36px -18px rgba(15,24,48,.2); position: relative; }
.op-col::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; }
.op-col.c-stop::before { background: var(--bad); } .op-col.c-scale::before { background: var(--good); }
.op-col.c-never::before { background: color-mix(in srgb, var(--bad) 40%, var(--muted)); } .op-col.c-trial::before { background: var(--warn); }
.op-board.second .op-col { background: transparent; box-shadow: none; border: 1px solid var(--hair); }
.op-col header { display: flex; align-items: center; gap: 8px; }
.op-count { font-size: 12px; font-weight: 650; color: var(--muted); background: var(--hair); padding: 1px 8px; border-radius: 999px; }

.op-item + .op-item { border-top: 1px solid var(--hair); }
.op-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px;
  align-items: center; padding: 11px 4px; border-radius: 10px; }
.op-row summary::-webkit-details-marker { display: none; }
.op-row summary:hover { background: color-mix(in srgb, var(--hair) 55%, transparent); }
.op-row summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.op-row .fl { grid-row: 1 / 3; align-self: start; padding-top: 1px; }
.op-rt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.op-rt b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-rt em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-streak { color: var(--ink-2); font-weight: 600; }
.op-rm { text-align: right; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.15; }
.op-rm small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.op-rm.good { color: var(--good); } .op-rm.bad { color: var(--bad); }
.op-rk { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--muted); }
.op-rk b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.op-rk b.good { color: var(--good); } .op-rk b.bad { color: var(--bad); } .op-rk b.warn { color: var(--warn); }
.op-rk i { font-style: normal; font-size: 11px; }
.op-row[open] summary { background: color-mix(in srgb, var(--hair) 55%, transparent); border-radius: 10px 10px 0 0; }
.op-why { padding: 4px 12px 12px 40px; font-size: 13px; color: var(--ink-2); line-height: 1.55;
  background: color-mix(in srgb, var(--hair) 55%, transparent); border-radius: 0 0 10px 10px; }
.op-why p { margin: 6px 0 0; } .op-why ul { margin: 6px 0 0; padding-left: 16px; }
.op-act b { color: var(--ink); }
.v-stop .op-act b { color: var(--bad); } .v-scale .op-act b, .v-better .op-act b { color: var(--good); }
.op-facts { font-size: 12px; color: var(--muted); }

/* ── разбор аналитика ── */
.op-report { padding: 20px 26px 18px; margin-bottom: 18px; }
.op-rh { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.op-rs { border-top: 1px solid var(--hair); max-width: 820px; }
.op-rs summary { list-style: none; cursor: pointer; padding: 11px 0; font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.op-rs summary::-webkit-details-marker { display: none; }
.op-rs summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg); margin-left: auto; margin-right: 4px; transition: transform .15s ease; }
.op-rs[open] summary::after { transform: rotate(-135deg); }
.op-rs .md { padding: 0 0 12px; }
.md h3 { font-size: 14.5px; margin: 14px 0 6px; } .md h4 { font-size: 13.5px; margin: 10px 0 4px; }
.md p { margin: 4px 0; font-size: 14px; line-height: 1.6; max-width: 76ch; }
.md ul { margin: 4px 0 8px; padding-left: 20px; max-width: 78ch; }
.md li { font-size: 14px; line-height: 1.6; margin: 3px 0; }
.md code { font-size: 12.5px; padding: 1px 5px; border-radius: 5px; background: var(--hair); }
.op-hist { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.op-hist a { color: var(--accent); text-decoration: none; } .op-hist a.bad { color: var(--bad); }

/* ── сетапы ── */
.op-attrs, .op-views, .op-journal { padding: 20px 22px; margin-bottom: 18px; }
.op-ah .op-hint { margin-bottom: 8px; }
.op-ageo { padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--hair); }
.op-ageo h3 { font-size: 14px; margin: 0 0 10px; } .op-ageo h3 .quiet { font-weight: 450; font-size: 12px; margin-left: 6px; }
.op-agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 28px; }
.op-acat h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.op-brow { display: grid; grid-template-columns: minmax(0, 132px) minmax(60px, 1fr) 50px 32px; gap: 8px; align-items: center; padding: 3px 0; font-size: 12.5px; }
.op-bl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; }
.op-bt { position: relative; height: 8px; border-radius: 4px; background: var(--hair); }
.op-bt i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.op-bt i.pos { background: color-mix(in srgb, var(--good) 75%, transparent); } .op-bt i.neg { background: color-mix(in srgb, var(--bad) 70%, transparent); }
.op-bt b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink-2); border-radius: 2px; }
.op-bv { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.op-bv.good { color: var(--good); } .op-bv.bad { color: var(--bad); } .op-bv.warn { color: var(--warn); }
.op-bs { text-align: right; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* ── разрезы ── */
.op-vh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.op-all { font-size: 12.5px; color: var(--accent); text-decoration: none; }
.op-vtabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0 12px; }
.op-vtabs a { padding: 5px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 550; text-decoration: none; color: var(--ink-2); background: var(--hair); }
.op-vtabs a:hover { color: var(--ink); }
.op-vtabs a.on { background: var(--accent); color: #fff; }
table.op-t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.op-t th, table.op-t td { padding: 8px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hair); }
table.op-t th.l, table.op-t td.l { text-align: left; }
table.op-t th { font-size: 11.5px; position: sticky; top: 0; background: var(--sticky-bg, #fbfbfd); z-index: 1; }
table.op-t th[data-k] { cursor: pointer; user-select: none; }
table.op-t th[data-k]:hover { color: var(--ink); }
table.op-t th.asc::after { content: " ↑"; } table.op-t th.desc::after { content: " ↓"; }
table.op-t td.good { color: var(--good); font-weight: 600; } table.op-t td.bad { color: var(--bad); font-weight: 600; }
table.op-t tr.v-stop td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.op-t tr.v-scale td:first-child, table.op-t tr.v-better td:first-child { box-shadow: inset 3px 0 0 var(--good); }
table.op-t tr.v-promising td:first-child, table.op-t tr.v-watch td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.op-key { display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.op-sub { display: block; font-style: normal; font-size: 11px; color: var(--muted); max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.op-vb { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; }
.op-vb.vb-stop { background: var(--bad-bg); color: var(--bad); }
.op-vb.vb-scale, .op-vb.vb-better { background: var(--good-bg); color: var(--good); }
.op-vb.vb-promising, .op-vb.vb-watch { background: var(--warn-bg); color: var(--warn); }

/* ── журнал и настройки ── */
.op-note-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; }
.op-note-form textarea { flex: 1; resize: vertical; font: inherit; }
.op-notes { list-style: none; margin: 12px 0 0; padding: 0; }
.op-notes li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
.op-notes time { color: var(--muted); font-size: 12px; white-space: nowrap; padding-top: 1px; font-variant-numeric: tabular-nums; }
.op-notes span { flex: 1; white-space: pre-wrap; line-height: 1.5; } .op-notes form { margin: 0; }
.op-settings { padding: 0; margin-bottom: 18px; }
.op-settings > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 18px 22px; }
.op-settings > summary::-webkit-details-marker { display: none; }
.op-settings > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg); margin-left: auto; transition: transform .15s ease; }
.op-settings[open] > summary::after { transform: rotate(-135deg); }
.op-sform { padding: 0 22px 22px; }
.op-sh { font-size: 13.5px; margin: 18px 0 10px; font-weight: 650; }
.op-sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.op-sgrid input, .op-sgrid select { width: 100%; height: 40px; }
.op-codes { width: 100%; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.op-unk { font-size: 12.5px; color: var(--warn); } .op-unk code { margin: 0 3px; }

[data-theme="dark"] .op-col { background: var(--surf-2); box-shadow: none; }
[data-theme="dark"] .op-board.second .op-col { background: transparent; border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .op-geostate { background: rgba(255,255,255,.02); }
[data-theme="dark"] .op-live { box-shadow: inset 3px 0 0 var(--bad); }

@media (max-width: 1100px) { .op-sgrid { grid-template-columns: 1fr 1fr; } .op-top { grid-template-columns: minmax(0, 1fr); }
  .op-geostate { border-left: 0; border-top: 1px solid var(--hair); flex-direction: row; flex-wrap: wrap; }
  .op-gs { flex: 1 1 200px; border-top: 0; border-left: 1px solid var(--hair); } .op-gs:first-child { border-left: 0; } }
@media (max-width: 860px) {
  .op-board { grid-template-columns: minmax(0, 1fr); }
  .op-state { margin-left: 0; }
  .op-note-form { flex-direction: column; align-items: stretch; }
}
@media (max-width: 700px) {
  .op-top-main { padding: 18px 16px 14px; }
  .op-prio li { grid-template-columns: 26px minmax(0, 1fr); }
  .op-pm { grid-column: 2; text-align: left; font-size: 17px; }
  .op-pm small { display: inline; margin-left: 4px; }
  .op-pt p, .op-pt em { white-space: normal; }
  .op-gs { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--hair); }
  .op-live { padding: 16px; }
  .op-lrow:not(.op-hide), .op-live.open .op-lrow { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .op-lwhy { grid-column: 2 / -1; }
  .op-col { padding: 16px 12px 10px; }
  .op-why { padding-left: 12px; }
  .op-report { padding: 18px 16px; }
  .op-attrs, .op-views, .op-journal { padding: 18px 16px; }
  .op-brow { grid-template-columns: minmax(0, 90px) minmax(50px, 1fr) 46px 30px; }
  .op-sgrid { grid-template-columns: 1fr; }
  .op-key, .op-sub { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) { .op-sync i { animation: none; } }