/* Толк — оформление кабинета. Токены те же, что в концепции: сливовый акцент, Unbounded на числах, Golos Text в тексте, моноширинный на подписях данных. Цвета заданы переменными и переопределяются для тёмной темы целиком, чтобы ни один цвет не жил только внутри медиазапроса. */ :root{ --bg:#F5F3F4; --surface:#FFFFFF; --surface-2:#EEEAEC; --surface-3:#E4DEE1; --line:#DFD8DC; --line-2:#C9BEC4; --ink:#1A151A; --ink-2:#5E5259; --ink-3:#8E8189; --accent:#9B2D62; --accent-2:#7A1F4C; --accent-soft:#F7E7EF; --good:#1F7A4D; --warn:#A96A0F; --crit:#BE3A2C; --good-soft:#E4F2EA; --warn-soft:#F8EEDD; --crit-soft:#FAE7E4; --s1:#9B2D62; --s2:#C07715; --s3:#3F4FB5; --seq-1:#F3E3EB; --seq-2:#E2BFD2; --seq-3:#CD93B2; --seq-4:#B65C8B; --seq-5:#9B2D62; --seq-6:#6E1743; --radius:3px; --shadow:0 1px 2px rgba(26,21,26,.05), 0 8px 24px -12px rgba(26,21,26,.14); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#131013; --surface:#1A161A; --surface-2:#221C22; --surface-3:#2C242C; --line:#2E262E; --line-2:#453945; --ink:#F1EBEE; --ink-2:#ABA0A6; --ink-3:#7D737A; --accent:#E17BAB; --accent-2:#F0A3C6; --accent-soft:#331C29; --good:#4FC98C; --warn:#E0A345; --crit:#F0796A; --good-soft:#152C22; --warn-soft:#2E2415; --crit-soft:#33191A; --s1:#C9548A; --s2:#C08532; --s3:#6B85E0; --seq-1:#2E222A; --seq-2:#472B3A; --seq-3:#653950; --seq-4:#84405F; --seq-5:#B04E7C; --seq-6:#D8749F; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); } } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--ink); font-family:"Golos Text","Helvetica Neue",Arial,sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{margin:0; line-height:1.2; text-wrap:balance} p{margin:0} a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px} .mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums} .num{font-family:"Unbounded",system-ui,sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.03em} /* ── каркас ─────────────────────────────────────────────────────────── */ /* minmax(0,1fr), а не 1fr: колонка грида по умолчанию не уже своего содержимого, и одна широкая таблица растягивает весь кабинет — на телефоне текст уезжает за край экрана. */ .shell{display:grid; grid-template-columns:minmax(0,1fr); min-height:100vh} @media (min-width:900px){ .shell{grid-template-columns:216px minmax(0,1fr)} } /* Селектор по элементу здесь был бы миной: любой вложенный