/* ============================================================
   COPYR — единая дизайн-система для всех инструментов
   Подключается последним в <head>, поэтому перекрывает
   локальные темы каждого инструмента.

   Типографика : IBM Plex Sans (текст) + IBM Plex Mono (цифры)
   Палитра     : холодные нейтрали, один акцент — изумруд
   Темы        : dark по умолчанию, light по атрибуту
                 data-theme="light" | data-fin-theme="light"
   ============================================================ */

/* ---------------- ТЁМНАЯ ТЕМА (по умолчанию) ---------------- */
:root,
:root[data-theme="dark"],
:root[data-fin-theme="dark"]{
  color-scheme: dark;

  /* поверхности */
  --bg:#0e0f11; --bg-elev:#15171a; --bg-sidebar:#111316; --bg-sunken:#1a1d21; --bg-hover:#21252a;
  --plane:#0e0f11; --surface:#15171a; --surface-2:#1a1d21; --surface-3:#21252a;

  /* текст */
  --ink:#e9eaed; --ink-soft:#a8adb5; --ink-faint:#757b84; --ink-mute:#3a3f46;
  --ink-2:#a8adb5; --muted:#757b84;

  /* линии */
  --line:#23272c; --line-soft:#1b1e22; --line-strong:#32373e;
  --border:#23272c; --border-2:#32373e;
  --grid:rgba(255,255,255,.06); --axis:rgba(255,255,255,.17);

  /* акцент */
  --accent:#22c78a; --accent-dark:#18a471;
  --accent-soft:rgba(34,199,138,.12); --accent-tint:rgba(34,199,138,.20);
  --accent-ink:#7fecc0; --accent-glow:rgba(34,199,138,.26);
  --on-accent:#08130e;

  /* смысловые */
  --good:#35cf95; --bad:#f0705a; --warn:#e0a14a;
  --warn-soft:rgba(240,112,90,.12);
  --info:#6ba5f0; --info-soft:rgba(107,165,240,.12);
  --amber:#e0a14a; --amber-soft:rgba(224,161,74,.12);
  --stuff-bg:rgba(240,112,90,.10); --stuff-ink:#ff9078;

  /* серии графиков */
  --s1:#22c78a; --s2:#6ba5f0; --s3:#e0a14a; --s4:#c88ef0;
  --s5:#f0705a; --s6:#4ecdc4; --s7:#9bc75f; --s8:#e08ab8;

  /* фирменный знак */
  --brand-grad:linear-gradient(160deg,#24272c 0%,#14161a 100%);
  --brand-shadow:0 2px 6px -2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);

  /* тени */
  --shadow-sm:0 0 0 1px rgba(255,255,255,.03);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03);
  --shadow-md:0 10px 24px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
  --shadow-lg:0 30px 70px -22px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);

  --topbar-bg:rgba(14,15,17,.72);
  --scrim:rgba(0,0,0,.6);
  --select-bg:#e9eaed; --select-fg:#0e0f11; --select-bg-hover:#ffffff;
}

/* ---------------- СВЕТЛАЯ ТЕМА ---------------- */
:root[data-theme="light"],
:root[data-fin-theme="light"]{
  color-scheme: light;

  --bg:#f7f8f9; --bg-elev:#ffffff; --bg-sidebar:#f1f2f4; --bg-sunken:#eef0f2; --bg-hover:#e6e9ec;
  --plane:#f7f8f9; --surface:#ffffff; --surface-2:#eef0f2; --surface-3:#e6e9ec;

  --ink:#14161a; --ink-soft:#4d525a; --ink-faint:#7b818a; --ink-mute:#c4c9cf;
  --ink-2:#4d525a; --muted:#7b818a;

  --line:#e5e7ea; --line-soft:#f0f1f3; --line-strong:#d1d5da;
  --border:#e5e7ea; --border-2:#d1d5da;
  --grid:rgba(20,22,26,.07); --axis:rgba(20,22,26,.2);

  --accent:#0f9c68; --accent-dark:#0b7d53;
  --accent-soft:#e6f6ee; --accent-tint:#c7e9d8;
  --accent-ink:#06603f; --accent-glow:rgba(15,156,104,.16);
  --on-accent:#ffffff;

  --good:#0f9c68; --bad:#cf4326; --warn:#a8710e;
  --warn-soft:#fdeae5;
  --info:#1c5fe4; --info-soft:#e6edfd;
  --amber:#a8710e; --amber-soft:#fbf0d8;
  --stuff-bg:#fdeae5; --stuff-ink:#8a1b13;

  --s1:#0f9c68; --s2:#1c5fe4; --s3:#a8710e; --s4:#7a4fd0;
  --s5:#cf4326; --s6:#0e8f88; --s7:#4f8a1f; --s8:#c2437f;

  --brand-grad:linear-gradient(160deg,#1f2126 0%,#0d0e11 100%);
  --brand-shadow:0 2px 6px -2px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);

  --shadow-sm:0 0 0 1px rgba(20,22,26,.05);
  --shadow:0 1px 2px rgba(20,22,26,.05), 0 0 0 1px rgba(20,22,26,.05);
  --shadow-md:0 4px 16px -6px rgba(20,22,26,.10), 0 0 0 1px rgba(20,22,26,.05);
  --shadow-lg:0 24px 60px -20px rgba(20,22,26,.22), 0 2px 6px rgba(20,22,26,.06);

  --topbar-bg:rgba(247,248,249,.78);
  --scrim:rgba(20,22,26,.42);
  --select-bg:#14161a; --select-fg:#ffffff; --select-bg-hover:#2a2d33;
}

/* геометрия и шрифты — одинаковы в обеих темах */
:root{
  --radius-xs:6px; --radius:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px;
  --sidebar-w:268px; --topbar-h:62px; --shell-h:56px;
  --font-sans:"IBM Plex Sans","Noto Sans Armenian",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* устаревшие имена из инструментов — чтобы var() не оставался нерешённым */
  --font:var(--font-sans);
  --danger:var(--bad);
  --shadow-ring:0 0 0 3px var(--accent-glow);
}

/* «Финансы» использует --accent-ink как цвет текста ПОВЕРХ акцента */
:root[data-fin-theme]{ --accent-ink:#08130e; --shadow:var(--shadow-md); }
:root[data-fin-theme="light"]{ --accent-ink:#ffffff; }

/* общая оболочка Copyr — одни и те же значения во всех инструментах */
:root,
:root[data-theme="dark"],
:root[data-theme="light"],
:root[data-fin-theme="dark"],
:root[data-fin-theme="light"]{
  --sh-bg:color-mix(in srgb, var(--bg-elev) 86%, transparent);
  --sh-line:var(--line); --sh-line2:var(--line-strong);
  --sh-surface:var(--bg-sunken); --sh-surface2:var(--bg-hover); --sh-pop:var(--bg-elev);
  --sh-ink:var(--ink); --sh-ink2:var(--ink-soft); --sh-muted:var(--ink-faint);
  --sh-accent:var(--accent); --sh-accent-ink:var(--on-accent);
  --sh-accent-soft:var(--accent-soft); --sh-glow:var(--accent-glow);
}

/* ---------------- база ---------------- */
html,body{ font-family:var(--font-sans); }
body{ background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-wrap:pretty; }
html{ background:var(--bg); }

/* цифры выравниваются в колонки везде */
table td, table th,
.num, td.num, th.num, .val, .pv, .pc, .ms, .mono,
input[type="number"], input[data-rate]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* иконки: одинаковая толщина, ровная посадка по базовой линии */
svg{ shape-rendering:geometricPrecision; }
button > svg, a > svg, label > svg, span > svg{ flex:none; vertical-align:middle; }
i[class^="ti-"], i[class*=" ti-"], .ti{ line-height:1; vertical-align:-.115em; display:inline-block; }

/* знак инструмента в шапке рисуется JS-ом без атрибутов — задаём их здесь */
.sh-mark svg{ fill:none; }
.sh-mark svg *:not([fill]){ fill:none; }
.sh-mark svg *:not([stroke]){ stroke:currentColor; }
.sh-mark svg *:not([stroke-width]){ stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.sh-btn svg, .tsw-ico svg{ fill:none; stroke:currentColor; }

/* фокус — один и тот же по всему продукту */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-xs); }
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none; border-color:var(--accent); box-shadow:var(--shadow-ring);
}

::selection{ background:var(--accent-tint); color:var(--ink); }

*{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px;
  border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-mute); background-clip:content-box; }

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

/* ---------------- узкие экраны: общая шапка ---------------- */
@media (max-width:560px){
  .sh-head{ gap:8px; padding:0 12px; }
  .sh-ver, .sh-div, .sh-sub{ display:none; }
  .sh-btn:has(svg) span{ display:none; }
  .sh-btn:has(svg){ width:36px; padding:0; }
}
/* телефон: в шапке переключатель инструментов, язык и 4 кнопки (ассистент, облако, тема,
   настройки) - плотнее, иначе настройки уезжают за край. html - перебить стили страниц */
@media (max-width:440px){
  html .sh-head{ gap:6px; padding:0 10px; }
  html .sh-head .sh-actions{ gap:4px; }
  html .sh-head .sh-btn:has(svg){ width:32px; }
  html .sh-head .sh-seg button{ min-width:26px; padding:0 5px; }
  html .sh-head .tsw-btn{ padding:0 9px; gap:6px; }
}

/* ── Базовое оформление полей ввода ─────────────────────────────────────────
   Нулевая специфичность (:where) и только поля без своего класса — всё, что
   оформлено отдельно, этим правилом не задевается. Страховка от «голых»
   браузерных полей в модалках и карточках. */
:where(textarea:not([class]), select:not([class]),
       input:not([class]):not([type]), input[type="text"]:not([class]), input[type="search"]:not([class]),
       input[type="email"]:not([class]), input[type="url"]:not([class]), input[type="number"]:not([class]),
       input[type="password"]:not([class]), input[type="tel"]:not([class])) {
  box-sizing: border-box; max-width: 100%;
  font: 13px/1.45 var(--font-sans, system-ui, sans-serif); color: var(--ink);
  background: var(--bg-sunken); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius, 8px);
  padding: 8px 11px; outline: none; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
:where(textarea:not([class])) { display: block; width: 100%; resize: vertical; }
:where(textarea:not([class]), select:not([class]), input:not([class])):focus {
  border-color: var(--accent); background: var(--bg-elev); box-shadow: 0 0 0 3px var(--accent-glow, transparent);
}
:where(textarea:not([class]), input:not([class]))::placeholder { color: var(--ink-faint); }