/* The cabinet in the landing's own look (agents.ostroai.com, frontend/src/index.css) - a layer over styles.css,
   draft of 14.10.2026 in the branch cabinet-redesign: the landing's fonts (Unbounded for headings and numbers,
   Golos Text for text, JetBrains Mono for small labels), its navy palette, sharp corners with the notched corner on
   the main things, an accent of the module (Лидоген - blue «signal», AI-сейлз - violet «iris»), hints as a line with a
   bar on the left instead of cards with an icon and a button. */

@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url("/static/cabinet/fonts/unbounded-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url("/static/cabinet/fonts/unbounded-latin-wght-normal.woff2") format("woff2-variations");
  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; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("/static/cabinet/fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url("/static/cabinet/fonts/golos-text-latin-wght-normal.woff2") format("woff2-variations");
  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; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("/static/cabinet/fonts/jetbrains-mono-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("/static/cabinet/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  --font-display: "Unbounded", "Golos Text", sans-serif;
  --font-sans: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 2px;
  --radius-sm: 2px;
  --notch: 14px;
}

/* the landing's navy */
:root[data-theme="dark"] {
  --bg: #00051e;
  --surface: #060b25;
  --surface-2: #0b1131;
  --surface-3: #111842;
  --line: rgba(120, 150, 255, 0.12);
  --line-strong: rgba(120, 150, 255, 0.22);
  --text: #f4f6fb;
  --text-2: #c6cddf;
  --muted: #7f889f;
  --accent: #3374ff;
  --accent-hover: #5c8fff;
  --accent-soft: rgba(51, 116, 255, 0.14);
  --accent-text: #7ea4ff;
  --grid: rgba(120, 150, 255, 0.1);
  --shadow-sm: none;
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* AI-сейлз in violet, like on the landing */
:root[data-module="sales"] { --accent: #9333ea; --accent-hover: #a855f7; --accent-soft: rgba(147, 51, 234, 0.1); --accent-text: #7e22ce; }
:root[data-theme="dark"][data-module="sales"] { --accent: #9333ea; --accent-hover: #a855f7; --accent-soft: rgba(168, 85, 247, 0.15); --accent-text: #c99bff; }

body { font-family: var(--font-sans); letter-spacing: -0.005em; }

/* NEURO7x space, as on neuro7x.com (src/components/space): the ink, blue and violet nebulae, a field of stars.
   Plain CSS on two fixed layers under the page - no WebGL in the Mini App. */
:root[data-theme="dark"] { --bg: #04070e; background: #04070e; }
:root[data-theme="dark"] body { background: transparent; }
:root[data-theme="dark"] body::before,
:root[data-theme="dark"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(60% 42% at 88% 6%, rgb(30 167 255 / 0.28), transparent 70%),
    radial-gradient(55% 38% at 0% 38%, rgb(91 59 255 / 0.22), transparent 70%),
    radial-gradient(70% 45% at 75% 100%, rgb(30 107 255 / 0.24), transparent 70%),
    radial-gradient(40% 30% at 30% 72%, rgb(42 140 255 / 0.1), transparent 70%);
}
:root[data-theme="dark"] body::after {
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgb(255 255 255 / 0.75), transparent),
    radial-gradient(1px 1px at 131px 87px, rgb(159 216 255 / 0.6), transparent),
    radial-gradient(1.6px 1.6px at 97px 171px, rgb(30 167 255 / 0.85), transparent),
    radial-gradient(1px 1px at 211px 223px, rgb(201 212 255 / 0.55), transparent),
    radial-gradient(1px 1px at 179px 17px, rgb(255 255 255 / 0.5), transparent),
    radial-gradient(1.3px 1.3px at 61px 263px, rgb(159 216 255 / 0.7), transparent),
    radial-gradient(1px 1px at 301px 139px, rgb(255 255 255 / 0.45), transparent),
    radial-gradient(1.8px 1.8px at 347px 301px, rgb(30 167 255 / 0.7), transparent),
    radial-gradient(1px 1px at 263px 359px, rgb(201 212 255 / 0.5), transparent);
  background-size: 240px 280px, 240px 280px, 240px 280px, 240px 280px, 240px 280px, 240px 280px, 380px 400px, 380px 400px, 380px 400px;
  -webkit-mask-image: linear-gradient(to bottom, black, rgb(0 0 0 / 0.55) 70%, rgb(0 0 0 / 0.35));
  mask-image: linear-gradient(to bottom, black, rgb(0 0 0 / 0.55) 70%, rgb(0 0 0 / 0.35));
}
:root[data-theme="dark"] .appbar { background: color-mix(in srgb, var(--bg) 88%, transparent); }

/* headings and numbers: Unbounded */
#viewTitle, .screen h2, .sheet-body h3, .kpi-value, .sales-addon-total strong {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em;
}
#viewTitle { font-size: 26px; }
.card-title { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }

/* no module label above the title (21.10.2026): the header already names the product */
.view-head { display: grid; gap: 6px; }

/* small labels: mono, capitals */
.kpi-label, .field-label, .section-head b, .appbar-status .status-text, .badge {
  font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400;
}
.kpi-label { font-size: 10.5px; letter-spacing: 0.16em; }
.field-label { font-size: 11px; color: var(--muted); }
.badge { font-size: 10px; }
.appbar-status .status-text { font-size: 10.5px; }

/* sharp corners everywhere, the notched corner on the main things */
.card, .btn, .input, .select, .textarea, .seg, .seg button, .choice, .mode-option, .kb-link, .filter-menu, .filter-option,
.list-item, .kpi, .sales-addon, .sales-addon-total, .badge, .appbar-status, .appbar-support, .tab, .modal, .guide-sheet,
.setup-steps, .kb-example, .script-block, .bubble, .avatar, .card-title-icon, .pill, .meter, .meter i, .range {
  border-radius: 0 !important;
}
.btn-primary, .kpi.is-accent, .mode-option.is-active, .choice.is-active {
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.btn-primary { --notch: 10px; }
.choice.is-active, .mode-option.is-active { --notch: 10px; }
.card { border: 1px solid var(--line); box-shadow: none; }
.btn { font-weight: 600; letter-spacing: -0.005em; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.avatar { background: var(--accent-soft); color: var(--accent-text); font-family: var(--font-display); }

/* the accent tile of the summary: the module's colour, as the landing's buttons */
.kpi.is-accent { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #00051e)); border: 0; }
:root[data-module="sales"] .kpi.is-accent { background: linear-gradient(135deg, #9333ea, #3b1c86); }

/* hints: no card and no button - a bar on the left, the text and a link with an arrow */
.callout {
  background: transparent !important; border: 0 !important; border-left: 2px solid var(--accent) !important;
  padding: 2px 0 2px 14px !important; gap: 0 !important; color: var(--text-2);
}
.callout > .ic { display: none; }
.callout b { color: var(--text); font-weight: 650; }
.callout-warning { border-left-color: var(--warning) !important; }
.callout-success { border-left-color: var(--success) !important; }
.callout .btn {
  height: auto; margin-top: 8px; padding: 0; border: 0; background: none !important; clip-path: none;
  color: var(--accent-text); font-weight: 650;
}
.callout-warning .btn { color: var(--warning); }
.callout .btn::after { content: " →"; }
.callout .btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the tab bar: a hairline and the module's colour */
.tabbar { border-top: 1px solid var(--line); }
.tab.is-active .tab-icon { border-radius: 0 !important; }
.tab-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }

/* the sheet from below: sharp, the module's bar on top */
.guide-sheet { border-top: 2px solid var(--accent); }
.sheet-handle { border-radius: 0; }
.callout { border-radius: 0 !important; }
:root[data-module="sales"] { --series-1: #a855f7; }
:root[data-module="leadgen"] { --series-1: #3374ff; }
.callout { border-radius: 0 !important; }
:root[data-module="sales"] { --series-1: #a855f7; }
:root[data-module="leadgen"] { --series-1: #3374ff; }

/* every button gets the notched corner (owner 14.10.2026: the plain square secondary buttons looked off) - the others
   as the landing's «ghost»: a light fill and a hairline ring, the headings' font */
.btn:not(.btn-icon) { --notch: 10px; clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: -0.02em; }
.btn-sm:not(.btn-icon) { --notch: 8px; }
/* «В заявки» under a message: a small quiet action, not a main button */
.btn.msg-to-lead:not(.btn-icon) { --notch: 6px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.btn:not(.btn-primary):not(.btn-ghost):not(.btn-icon) {
  background: rgba(255, 255, 255, 0.06); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); color: var(--text);
}
.btn:not(.btn-primary):not(.btn-ghost):not(.btn-icon):hover { background: rgba(255, 255, 255, 0.1); }
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-ghost):not(.btn-icon) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.callout .btn.btn { clip-path: none; box-shadow: none !important; font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; color: var(--accent-text) !important; }
.callout-warning .btn.btn { color: var(--warning) !important; }

/* personal mode (NEURO7x, app/personal.py): one owner - no support, bonuses or admin banner */
.is-personal #supportButton,
.is-personal #referralButton,
.is-personal #adminBanner { display: none !important; }
.is-personal .brand-mark img { border-radius: 8px; object-fit: cover; }