/* The palette is ours, not Telegram's. Inheriting --tg-theme-* made the app look like whichever skin the client happened to wear. What we still take from Telegram is the one thing it genuinely knows: light or dark. Colour is meaning-only: direction, arm, factor, cost, state. Nothing is tinted for decoration. */ :root{ --bg:#f6f7fb; --card:#fff; --card2:#f0f2f8; --ink:#0f1320; --hint:#626b82; --line:rgba(15,19,32,.10); --sheen:rgba(15,19,32,.03); --shadow:0 1px 2px rgba(15,19,32,.06), 0 8px 24px -12px rgba(15,19,32,.18); --long:#0a7c58; --short:#cb2f3e; --bounce:#395eef; --break:#626d85; --gold:#8e6511; /* Цвет ТЕКСТА на цветной подложке. Отдельный токен, потому что подложка делается из того же цвета и тянет фон к тексту: на 16% подложки чистый цвет давал 3.7 вместо 4.5. Подложку не ослабляли — её пришлось бы свести к 2%, и фишки перестали бы быть фишками. */ --long-ink:#096b4c; --short-ink:#af2835; --gold-ink:#7c580f; --break-ink:#566075; --bounce-ink:#1f49ed; --hint-ink:#575f73; /* The whole app is in Russian and was set in whatever the device happened to have - Roboto.s Cyrillic on Android, Segoe UI.s on Windows. Onest and JetBrains Mono are both drawn with Cyrillic as a first-class script, not an afterthought, and the mono has real tabular figures, which is what a column of prices needs. Both fall back cleanly if the fonts never load. */ --sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace,"SF Mono",Menlo,Consolas,monospace; --r:16px; --nav:62px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0a0b11; --card:#14161f; --card2:#1a1d29; --ink:#eef1f7; --hint:#8b93a7; --line:rgba(255,255,255,.075); --sheen:rgba(255,255,255,.035); --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.75); --long:#2fd39b; --short:#f0616b; --bounce:#7d94ff; --break:#8b93a7; --gold:#e0a83c; --long-ink:#2fd39b; --short-ink:#f16e77; --gold-ink:#e0a83c; --break-ink:#939bad; --bounce-ink:#8399ff; --hint-ink:#939bad; } } :root[data-theme="dark"]{ --bg:#0a0b11; --card:#14161f; --card2:#1a1d29; --ink:#eef1f7; --hint:#8b93a7; --line:rgba(255,255,255,.075); --sheen:rgba(255,255,255,.035); --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.75); --long:#2fd39b; --short:#f0616b; --bounce:#7d94ff; --break:#8b93a7; --gold:#e0a83c; --long-ink:#2fd39b; --short-ink:#f16e77; --gold-ink:#e0a83c; --break-ink:#939bad; --bounce-ink:#8399ff; --hint-ink:#939bad; } *{box-sizing:border-box} body{ margin:0; color:var(--ink); background-color:var(--bg); font:15px/1.45 var(--sans); -webkit-font-smoothing:antialiased; font-feature-settings:"ss01" 1; padding:0 0 calc(var(--nav) + 14px + env(safe-area-inset-bottom)); background-image:radial-gradient(125% 62% at 50% -14%, color-mix(in srgb, var(--bounce) 13%, transparent) 0%, transparent 58%); background-attachment:fixed; background-repeat:no-repeat; } button{font-family:inherit; color:inherit; background:none; border:0; cursor:pointer} .mono{font-family:var(--mono); font-variant-numeric:tabular-nums} header{position:relative; z-index:9; padding:12px 14px 11px; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:saturate(108%) blur(14px); -webkit-backdrop-filter:saturate(108%) blur(14px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px} h1{margin:0; font-size:21px; font-weight:750; letter-spacing:-.03em} .stamp{margin-left:auto; display:flex; align-items:center; gap:6px; font:11px/1 var(--mono); color:var(--hint); font-variant-numeric:tabular-nums} .dot{width:6px; height:6px; border-radius:50%; background:var(--long)} .dot.stale{background:var(--gold)} /* Кнопки в шапке: цель нажатия 44x44, как требует любое руководство по касанию, при этом кружок остаётся прежним. Промах по 27-пиксельной кнопке на телефоне — это не придирка, это каждое третье нажатие. Область растянута прозрачной рамкой, чтобы вид не поехал. */ /* СЕЛЕКТОР СУЖЕН ДО ШАПКИ, И ЭТО НЕ КОСМЕТИКА. Слово `info` занято дважды: здесь — круглая кнопка, а в app.js — уровень важности строки («bad» / «warn» / «info») у `.attnrow` и `.carerow`. Голое `.info` цепляло эти строки и выдавало им width:27px. Строка «дальше: прошло 0.11R…» на обычной ведомой позиции рассыпалась в вертикальный столбик по одной букве и шла насквозь через карточку — поверх стопа, поверх плеча, поверх кнопки «закрыть по рынку». Контейнеру `.attn info` доставалось то же самое: когда все замечания информационные, весь блок «Требует внимания» схлопывался в 32×28 и исчезал с экрана. Чинили это дважды со стороны flex (`min-width:0`, потом `flex:1 1 auto`) и оба раза мимо: ширину задавало не сжатие, а вот эта строка. */ header .info{width:27px; height:27px; border-radius:50%; border:1px solid var(--line); color:var(--hint); font-size:14px; line-height:1; flex:0 0 auto; position:relative} header .info::after{content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%)} main{padding:12px 14px 0; display:flex; flex-direction:column; gap:10px} .lede{margin:0; font-size:12px; line-height:1.5; color:var(--hint)} /* Portfolio-level, not per-signal. The per-signal warning could not say that nineteen of twenty signals are the same bet. */ .conc{padding:11px 13px; border-radius:12px; font-size:12px; line-height:1.55; color:var(--hint); background:color-mix(in srgb,var(--hint) 10%,transparent); border:1px solid var(--line)} .conc b{color:var(--ink)} .conc.warn{color:var(--gold); background:color-mix(in srgb,var(--gold) 11%,transparent); border-color:color-mix(in srgb,var(--gold) 35%,transparent)} .conc.warn b{color:var(--gold)} /* Louder than .conc.warn, and it should be: this one is a live event, not a standing property of the list. */ .conc.alarm{color:var(--short); background:color-mix(in srgb,var(--short) 13%,transparent); border-color:color-mix(in srgb,var(--short) 40%,transparent)} .conc.alarm b{color:var(--short)} /* Прозрачности на тексте здесь нет и не будет: она снижает контраст втрое незаметно для того, кто её ставит (0.75 от hint давало 2.98 вместо 4.76), и о ней нельзя рассуждать — в отличие от цвета, который можно посчитать. */ .conc .agree{display:block; margin-top:7px; font:11.5px/1.4 var(--mono); font-variant-numeric:tabular-nums; color:var(--hint)} /* ---- market backdrop: three numbers and one sentence ---- */ .back{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:12px 13px; margin-bottom:12px} .bgrid{display:grid; grid-template-columns:1fr 1fr; gap:11px 12px} .bc.wide{grid-column:1 / -1} .brow{display:flex; align-items:center; gap:12px} .brow b{flex:0 0 auto} .brow .bspark{flex:1; margin-top:0; height:22px; min-width:0} .bc{min-width:0} .bc i{display:block; font-style:normal; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--hint)} .bc b{display:flex; align-items:baseline; gap:5px; margin-top:5px; font:600 16px/1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em} /* Long against short, as one bar. The split is the whole point. */ .liqbar{flex:1; min-width:0; height:7px; border-radius:4px; overflow:hidden; background:color-mix(in srgb,var(--long) 45%,transparent)} .liqbar i{display:block; height:100%; background:color-mix(in srgb,var(--short) 70%,transparent)} .bd{font:600 11px/1 var(--mono); letter-spacing:0} .bd.up{color:var(--long)} .bd.dn{color:var(--short)} .bspark{display:block; width:100%; height:16px; margin-top:6px; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round} .bspark.up{stroke:var(--long)} .bspark.dn{stroke:var(--short)} /* The one number here with a fixed scale, so it gets one. */ .bgauge{display:block; position:relative; height:4px; margin-top:7px; border-radius:3px; background:linear-gradient(90deg, color-mix(in srgb,var(--short) 55%,transparent), color-mix(in srgb,var(--hint) 35%,transparent), color-mix(in srgb,var(--long) 55%,transparent))} .bgauge i{position:absolute; top:-3px; width:3px; height:10px; border-radius:2px; background:var(--ink); transform:translateX(-1.5px)} .bends{display:flex; justify-content:space-between; margin-top:3px} .bends b{font:11px/1 var(--mono); color:var(--hint); font-weight:400} .bc em{display:block; margin-top:4px; font-style:normal; font-size:12px; line-height:1.35; color:var(--hint)} .bsays{margin-top:11px; padding-top:9px; border-top:1px solid var(--line); font-size:12px; line-height:1.45; color:var(--ink)} .bnote{margin-top:6px; font-size:12px; line-height:1.4; color:var(--hint)} /* ── Экран «Направление»: плотный список формаций ────────────────────────── Строка низкая и в три колонки: имя с признаками, цена, изменение. Плотность здесь и есть смысл — сто пятьдесят монет должны читаться пролистыванием, а не раскрытием карточек. */ .dgrp{border-bottom:1px solid var(--line)} .dgrp[open]{padding-bottom:6px} .dgrp summary{display:flex; align-items:center; gap:9px; cursor:pointer; padding:11px 2px 9px; list-style:none; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hint)} .dgrp summary::-webkit-details-marker{display:none} .dgrp summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px} .dgrp .chev{width:9px; height:9px; border-right:1.6px solid var(--hint); border-bottom:1.6px solid var(--hint); transform:rotate(-45deg); flex:none} .dgrp[open] .chev{transform:rotate(45deg)} .dgrp .gcount{margin-left:auto; font:500 11px/1 var(--mono); letter-spacing:0; font-variant-numeric:tabular-nums} .dgrp .gnote{font-weight:400; letter-spacing:0; text-transform:none; opacity:.75} /* Две строки в сетке: сверху тикер-цена-процент, снизу полоса подписей во всю ширину. Подписи стояли в колонке тикера, и пятая из них (сила) ломала их на телефоне в три этажа: средней колонке достаётся около 150px, а один только «упёрлись 0.4 ATR x3» занимает больше сотни. Теперь высота строки не зависит от того, сколько состояний совпало. */ .drow{display:grid; grid-template-columns:22px minmax(0,1fr) auto auto; align-items:center; gap:4px 9px; padding:7px 2px 7px 8px; border-left:2px solid transparent} .drow .dsub{grid-column:1 / -1; padding-left:31px} /* .chip нарисована для карточек сигнала: 12px, жирность 750, капитель. В плотном списке она забивала соседей вдвое меньшего кегля. */ .dsub .chip{font:500 10px/1 var(--mono); letter-spacing:0; text-transform:none; padding:2px 5px; border-radius:4px} .drow + .drow{border-top:1px solid var(--sheen)} .drow.up{border-left-color:var(--long)} .drow.down{border-left-color:var(--short)} .drow.rev{border-left-color:var(--gold)} .did{min-width:0} .dtick{display:block; font:500 13px/1.25 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .dtick .dim{color:var(--hint)} .dsub{display:flex; align-items:center; gap:5px; flex-wrap:wrap} .dpx{text-align:right; font:500 13px/1.25 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap} .dchg{text-align:right; font:500 12.5px/1.25 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; min-width:64px} .dchg.p{color:var(--long-ink)} .dchg.n{color:var(--short-ink)} .dsm{display:block; font:400 10px/1.35 var(--mono); color:var(--hint); font-variant-numeric:tabular-nums} /* Простор до преграды. Цвет кодирует СОСТОЯНИЕ, а не сторону сделки: красный значит «решается сейчас», а не «плохо» — для разворота это ровно то место, где он и случается. */ .room{font:500 10px/1 var(--mono); padding:2px 5px; border-radius:4px; white-space:nowrap} .room .hits{margin-left:3px; opacity:.6} .room.tight{color:var(--short-ink); background:color-mix(in srgb,var(--short) 14%,transparent)} .room.mid{color:var(--gold-ink); background:color-mix(in srgb,var(--gold) 14%,transparent)} .room.wide{color:var(--long-ink); background:color-mix(in srgb,var(--long) 14%,transparent)} .room.none{color:var(--hint); background:var(--card2)} /* ── Сила хода ────────────────────────────────────────────────────────── ЦВЕТ ЗДЕСЬ НЕ «ХОРОШО/ПЛОХО», А ГРОМКОСТЬ. Сила измерена и НЕ отличает выгодные формации от невыгодных (разность исхода между сильной и слабой половиной накрывает ноль на всех трёх горизонтах, знаки расходятся), поэтому красить сильное зелёным значило бы обещать несуществующее. Шкала — одна ступень серого на ступень громкости, и только «ход против» выделен цветом стороны: это не громкость, а противоречие в разметке. Доли взяты из замера, а не на глаз: вялых 19%, средних 42%, сильных 23%, очень сильных 7%. Значит p4 действительно редкость и может позволить себе быть заметным. */ .pow{font:500 10px/1 var(--mono); padding:2px 5px; border-radius:4px; white-space:nowrap; background:var(--card2)} .pow.p1{color:var(--hint)} .pow.p2{color:var(--hint-ink)} .pow.p3{color:var(--ink)} .pow.p4{color:var(--ink); background:color-mix(in srgb,var(--ink) 12%,transparent); font-weight:700} .pow.back{color:var(--short-ink); background:color-mix(in srgb,var(--short) 14%,transparent)} .pow.none{color:var(--hint); background:transparent; padding-left:0} /* ── Перекос рынка: три полосы с общим знаменателем ───────────────────── Знаменатель — ВСЯ вселенная, а не число размеченных: иначе у скальпа один знаменатель, у свинга другой, и полосы перестают сравниваться между собой, а сравнение строк и есть вся информация. Серый сегмент посередине — доля рынка без формы; он же отличает эту полосу от .liqbar на главном экране, чтобы две похожие полосы не читались как одно измерение. */ .skew{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 13px; margin-bottom:12px} .srow + .srow{margin-top:11px} .shead{display:flex; align-items:baseline; gap:6px; font:11px/1 var(--mono); color:var(--hint)} .shead i{font-style:normal; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)} .snum{margin-left:auto; font-variant-numeric:tabular-nums} .snum b.dn{color:var(--short-ink)} .snum b.up{color:var(--long-ink)} .sbar{display:flex; height:9px; margin-top:6px; border-radius:5px; overflow:hidden; background:var(--card2)} .sbar b{display:block; height:100%} .s-dn{background:color-mix(in srgb,var(--short) 70%,transparent)} .s-up{background:color-mix(in srgb,var(--long) 70%,transparent)} .s-flat{background:color-mix(in srgb,var(--hint) 22%,transparent)} .sfoot{display:block; margin-top:4px; font:400 10px/1.35 var(--mono); color:var(--hint); font-variant-numeric:tabular-nums} .sgap{margin-top:11px; padding-top:9px; border-top:1px solid var(--line); font-size:12px; line-height:1.45; color:var(--ink)} .sfine{margin-top:9px; font-size:11px; line-height:1.4; color:var(--hint)} .d1{font:500 10px/1 var(--mono); color:var(--hint); white-space:nowrap} .d1.on{color:var(--ink)} /* «Против» — более сильное утверждение о конфликте, чем «вбок», а раньше они отрисовывались одинаково серым и не различались вовсе. */ .d1.against{color:var(--short-ink)} @media (max-width:380px){ /* ЧЕТЫРЕ ребёнка в ТРИ колонки — четвёртый уезжал вторым рядом под аватар и ломал строку вдвое по высоте. Детей теперь три: колонка часового процента убрана, сетка совпадает с разметкой. */ .drow{grid-template-columns:20px minmax(0,1fr) auto; gap:7px} .dchg{min-width:56px} } /* ── Раздел «сейчас дешевле»: уже открытые входы, куда цена вернулась ────── Отдельной строкой, а не чипом внутри .row: скидка считается от цены на экране и меняется с каждым обновлением котировок, тогда как .row несёт состояние сигнала и перерисовывается реже. Смешав их, пришлось бы перерисовывать раскрытые карточки ради числа, которое к ним не относится. */ .cheapin{display:flex; align-items:baseline; gap:9px; padding:8px 13px; border-radius:11px; margin-bottom:6px; font-size:12.5px; background:var(--card); border:1px solid var(--line)} .cheapin .sym{font-weight:700; color:var(--ink)} .cheapin .px{font:11.5px/1.3 var(--mono); color:var(--hint)} .cheapin .d{margin-left:auto; font:13px/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--long-ink)} /* ---- summary tiles: the "is anything happening" answer, made primary ---- Restored after a careless block delete wiped them: without .ic the inline SVG had no box and rendered at its natural size, which on a phone is a black shape the height of the screen. Any icon holder here needs an explicit width, height and svg size - an SVG with no box is not small. */ .tiles{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:14px} .tile{display:flex; align-items:center; gap:11px; padding:13px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)} .tile .ic{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center} .tile .ic svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round} .tile b{display:block; font-size:25px; font-weight:700; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums} .tile i{display:block; font-style:normal; font-size:12px; margin-top:3px; text-transform:uppercase; letter-spacing:.06em; color:var(--hint)} .tile.go .ic{color:var(--long); background:color-mix(in srgb,var(--long) 15%,transparent)} .tile.near .ic{color:var(--gold); background:color-mix(in srgb,var(--gold) 15%,transparent)} /* The calendar: the only warning here that can arrive before a move rather than explain it afterwards. Quiet by default and gold only when the event is close, because a date on its own is neither good news nor bad - it is just a time. */ .cal{padding:10px 13px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-size:12px; line-height:1.5} .cal .ev{display:flex; justify-content:space-between; gap:10px; align-items:baseline; padding:3px 0} .cal .ev + .ev{border-top:1px solid var(--line); margin-top:3px; padding-top:6px} .cal .w{color:var(--ink)} .cal .t{font:11.5px/1.4 var(--mono); color:var(--hint); white-space:nowrap; font-variant-numeric:tabular-nums} .cal.soon{border-color:color-mix(in srgb,var(--gold) 45%,transparent); background:color-mix(in srgb,var(--gold) 9%,transparent)} .cal.soon .w{color:var(--gold)} /* The calendar collapses to its next line and opens to the week. */ .cal summary{display:flex; justify-content:space-between; gap:10px; align-items:baseline; cursor:pointer; list-style:none; padding:1px 0} .cal summary::-webkit-details-marker{display:none} .cal summary::after{content:'⌄'; color:var(--hint); font-size:12px; transition:transform .15s} .cal[open] summary::after{transform:rotate(180deg)} .cal[open] summary{border-bottom:1px solid var(--line); padding-bottom:7px; margin-bottom:2px} .cal .ev.big .w{color:var(--ink)} .cal .ev:not(.big) .w{color:var(--hint)} .heads{margin-top:9px; padding-top:8px; border-top:1px solid var(--line)} .heads li{list-style:none; font-size:12px; line-height:1.45; color:var(--hint); padding:3px 0} .heads li b{color:var(--ink); font-weight:600} /* ---- news screen: the calendar as a week, and what has already come out --- */ .imp{display:inline-block; font:12px/1.5 var(--mono); letter-spacing:.04em; text-transform:uppercase; padding:1px 6px; border-radius:5px; font-style:normal} .imp.high{color:var(--gold); background:color-mix(in srgb,var(--gold) 16%,transparent)} /* КОНТРАСТ ВАЖНОСТИ. «Среднее» тонуло: серый текст на 14% сером фоне — это не метка, а пятно, и различить её от «высокого» с одного взгляда было нельзя. Цвет чернил вместо подсказочного и рамка вместо заливки: теперь важность читается формой, а не оттенком. */ .imp.mid{color:var(--ink); border:1px solid var(--line); background:transparent} /* Where the story came from, not how hard it hits - a different question from the impact tag beside it, so a different colour. */ .imp.geo{color:var(--bounce); background:color-mix(in srgb,var(--bounce) 15%,transparent); margin-left:4px} .tr.ev2{grid-template-columns:1fr 52px 78px} .nrow{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:12px 13px; margin-bottom:9px; border-left:3px solid transparent} .nrow.high{border-left-color:var(--gold)} .ntop{display:flex; justify-content:space-between; align-items:baseline; gap:10px} .nago{font:11px/1 var(--mono); color:var(--hint); white-space:nowrap} .ntitle{margin-top:8px; font-size:13.5px; line-height:1.4; color:var(--ink)} /* The English original stays under the translation: the model wrote the Russian and the model has not been graded yet, so the source text must remain visible rather than replaced. */ .norig{margin-top:5px; font-size:12px; line-height:1.4; color:var(--hint)} .norig span{display:inline-block; margin-right:5px; padding:1px 5px; border-radius:5px; background:var(--card2); font-size:12px; font-family:var(--sans); letter-spacing:.02em} .nwhy{margin-top:7px; padding-top:7px; border-top:1px solid var(--line); font-size:12px; color:var(--hint)} .nday{font:11px/1 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--hint); margin:16px 0 8px} .nrow:first-child, .nday + .nrow{margin-top:0} a.nrow.link{display:block; color:inherit; text-decoration:none} a.nrow.link:active{border-color:color-mix(in srgb,var(--hint) 45%,transparent)} .ngo{display:block; margin-top:9px; font:11.5px/1 var(--mono); color:var(--hint)} /* ЧЕТЫРЕ вкладки. Их было шесть, и подпись ужималась до 9.5 px, чтобы влезть в 62 px на телефоне шириной 375: календарь с новостями свелись в «События», журнал уехал внутрь «Кабинета». Освободившееся место ушло в размер шрифта — читаемость важнее числа корневых разделов. Здесь же была оборванная декларация: text-transform, letter-spacing и margin-top висели ПОСЛЕ закрывающей скобки правила и браузером выбрасывались целиком. */ nav button span{font-size:12px; white-space:nowrap; letter-spacing:.01em; margin-top:4px} /* Есть пояснение — видно, что его можно открыть. Пунктир под текстом: единственный способ показать это, не добавляя ещё один значок к и без того плотной карточке. */ .hastip{cursor:help; text-decoration:underline dotted currentColor; text-underline-offset:3px} /* Сообщение о ходе обновления. Об ошибке человек должен успеть прочитать, поэтому она не гаснет сама. */ .toast{margin:8px 14px; padding:8px 11px; border-radius:9px; font-size:12px; line-height:1.4; border:1px solid var(--line); background:var(--card)} .toast.wait{color:var(--hint)} .toast.ok{color:var(--long); border-color:color-mix(in srgb,var(--long) 45%,var(--line))} .toast.bad{color:var(--short); border-color:color-mix(in srgb,var(--short) 55%,var(--line)); background:color-mix(in srgb,var(--short) 8%,var(--card))} /* Вращение кнопки, пока идёт запрос. */ @keyframes spin{to{transform:rotate(360deg)}} header .info.spin{animation:spin 1s linear infinite} @media (prefers-reduced-motion:reduce){ header .info.spin{animation:none} } /* Переключатель вида карточки. Раскрытие подробностей растягивало карточку на несколько экранов: тикер и цены уезжали наверх. «Сделка» и «Обоснование» — разные вопросы, и смотрят на них в разные моменты. */ .cardswitch{display:flex; gap:4px; padding:3px; margin:10px 0; border-radius:9px; background:var(--card2); border:1px solid var(--line)} .cardswitch button{flex:1; min-height:38px; border-radius:7px; background:transparent; color:var(--hint); font:600 12px/1 var(--sans)} .cardswitch button[aria-selected="true"]{background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06)} /* Действие живёт снаружи переключателя и всегда последним: кнопка входа не исчезает оттого, что человек пошёл читать обоснование. */ .cardact{margin-top:10px; border-top:1px solid var(--line); padding-top:10px} /* Максимальная потеря — единственное число на карточке, которое про деньги, а не про цену. */ .maxloss{margin-top:9px; padding:8px 10px; border-radius:9px; border:1px solid var(--line); font-size:12px; color:var(--hint)} .maxloss b{color:var(--ink)} /* Подвкладки внутри «Событий» и «Кабинета». Сегментированный переключатель, а не вторая полоса навигации: он принадлежит содержимому экрана и прокручивается вместе с ним. */ .subtabs{display:flex; gap:4px; padding:3px; margin-bottom:12px; border-radius:10px; background:var(--card2); border:1px solid var(--line)} .subtabs button{flex:1; min-height:44px; padding:7px 10px; border:0; border-radius:8px; background:transparent; color:var(--hint); font:600 12.5px/1 var(--sans); cursor:pointer} .subtabs button[aria-selected="true"]{background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06)} /* ---- card ---- */ .card{background:linear-gradient(180deg,var(--sheen),transparent 42%), linear-gradient(var(--card),var(--card)); border:1px solid var(--line); border-left:4px solid var(--edge, var(--line)); border-radius:var(--r); padding:13px 14px 14px; box-shadow:var(--shadow); position:relative; overflow:hidden} .card.live{--edge:var(--long)} .card.live.short{--edge:var(--short)} .card.near{--edge:var(--gold)} .card.idle{--edge:color-mix(in srgb,var(--hint) 45%,transparent)} .head{display:flex; align-items:center; gap:8px} .sym{font-size:19px; font-weight:750; letter-spacing:-.025em} .state{margin-left:auto; font-size:12px; font-weight:650; color:var(--hint); white-space:nowrap; display:flex; align-items:center; gap:5px} .state.now{color:var(--long)} .state.near{color:var(--gold)} .chips{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px} .chip{font-size:12px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; padding:3px 7px; border-radius:6px; line-height:1; white-space:nowrap} .chip.long{color:var(--long-ink); background:color-mix(in srgb,var(--long) 16%,transparent)} .chip.short{color:var(--short-ink); background:color-mix(in srgb,var(--short) 16%,transparent)} .chip.bounce{color:var(--bounce-ink); background:color-mix(in srgb,var(--bounce) 18%,transparent)} .chip.bounce_slow{color:var(--gold); background:color-mix(in srgb,var(--gold) 18%,transparent)} .chip.breakout{color:var(--break-ink); background:color-mix(in srgb,var(--break) 16%,transparent)} .chip.btc{color:var(--gold-ink); background:color-mix(in srgb,var(--gold) 16%,transparent)} .chip.raw{color:var(--hint-ink); background:color-mix(in srgb,var(--hint) 14%,transparent)} .chip.warn{color:var(--short-ink); background:color-mix(in srgb,var(--short) 15%,transparent); text-transform:none; letter-spacing:.02em} /* ---- the glance: how the numbers line up, above everything else ---- This used to sit below the chart, which meant the one line written to be read in a second was the one you had to scroll to. The bar is the same count expressed as width, so the balance reads without counting. */ .stance{margin-top:10px; padding:9px 11px; border-radius:10px; background:color-mix(in srgb,var(--hint) 9%,transparent)} /* СОВПАДЕНИЕ ПРИЗНАКОВ — НЕ ПОБЕДА, И ЦВЕТ ЭТОГО НЕ ОБЕЩАЕТ. Зелёный на этой карточке значит «выгодно», а здесь всего лишь «поток идёт в ту же сторону». Ни одна строка блока не сопоставлена с исходами сделок. Нейтральная подложка вместо зелёной — по замечанию аудита. */ .stance.good{background:var(--card2)} .stance.bad{background:color-mix(in srgb,var(--gold) 12%,transparent)} .sline{font-size:13px} .sline b{font:700 15px/1 var(--mono); font-variant-numeric:tabular-nums} .stance.good .sline{color:var(--ink)} .stance.bad .sline{color:var(--gold)} .stance.flat .sline{color:var(--hint)} .sbar{display:flex; height:6px; margin-top:8px; border-radius:4px; overflow:hidden; background:color-mix(in srgb,var(--hint) 14%,transparent)} .sbar i{display:block; height:100%} .sbar .p{background:var(--long)} .sbar .n{background:color-mix(in srgb,var(--hint) 40%,transparent)} .sbar .c{background:var(--gold)} /* ---- cabinet ---- A staged feature says which stage it is on, in the interface and not only in a document: somebody opening this in three weeks should not have to remember what was promised. */ .cstage{margin-top:14px; padding:15px 16px; border-radius:12px; background:var(--card); border:1px solid var(--line)} .cbadge{display:inline-block; font:600 11px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; padding:5px 8px; border-radius:6px; margin-bottom:10px; color:var(--bounce); background:color-mix(in srgb,var(--bounce) 15%,transparent)} .cstage h3{margin:0 0 6px; font-size:15px} .cstage p{margin:0; font-size:12.5px; line-height:1.55; color:var(--hint)} .cstage b{color:var(--ink)} .clist{margin-top:12px; display:flex; flex-direction:column; gap:6px} .crow{padding:11px 13px; border-radius:10px; background:var(--card); border:1px solid var(--line)} .crow b{display:block; font-size:14px} .crow i{display:block; font-style:normal; font-size:12px; color:var(--hint); margin-top:3px} .cnext{margin-top:14px; padding:14px 16px; border-radius:12px; background:color-mix(in srgb,var(--hint) 8%,transparent)} .cnext b{font-size:12px; letter-spacing:.03em} .cnext ol{margin:9px 0 0; padding-left:20px; font-size:12.5px; line-height:1.6; color:var(--hint)} .cnext li{margin-bottom:4px} .cform{margin-top:13px; padding:16px; border-radius:12px; background:var(--card); border:1px solid var(--line)} .cform h3{margin:0 0 10px; font-size:15px} .csub{margin:0 0 13px; font-size:12px; line-height:1.55; color:var(--hint)} /* The three requirements sit above the fields, not in a help sheet: they are the difference between a key that is safe here and one that is not. */ .creq{margin:0 0 14px; padding-left:19px; font-size:12px; line-height:1.55; color:var(--hint)} .creq li{margin-bottom:6px} .creq b{color:var(--ink)} .creq code{font:600 11.5px/1 var(--mono); background:color-mix(in srgb,var(--bounce) 14%,transparent); padding:2px 5px; border-radius:5px; color:var(--ink)} .cfield{display:block; margin-bottom:10px} .cfield span{display:block; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--hint); margin-bottom:5px} .cfield input{width:100%; box-sizing:border-box; padding:10px 12px; border-radius:9px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:400 14px/1.3 var(--mono)} .cfield input:focus{outline:2px solid var(--bounce); outline-offset:1px} .cbtn{width:100%; padding:12px; border-radius:10px; border:0; cursor:pointer; font:600 14px/1 inherit; color:#fff; background:var(--bounce); margin-top:4px} /* Призрачная кнопка — для второстепенного, и только. «Закрыть по рынку» была оформлена ею и выглядела ровно как неактивный элемент, хотя закрывает настоящую позицию. Теперь опасное выглядит опасным. */ .cbtn.ghost{background:transparent; color:var(--hint); border:1px solid var(--line)} /* Знак результата в подтверждении закрытия. */ .pos{color:var(--long)} .neg{color:var(--short)} .cbtn.risky{background:transparent; color:var(--short); border:1px solid color-mix(in srgb,var(--short) 55%,var(--line)); font-weight:600} .cbtn.small{padding:9px; font-size:12.5px; margin-top:10px} .cmsg{margin-top:10px; font-size:12.5px; line-height:1.5; min-height:1em} .cmsg.bad{color:var(--short)} .cmsg.good{color:var(--long)} .cacc{margin-top:12px; padding:14px 15px; border-radius:12px; background:var(--card); border:1px solid var(--line)} .cacc.bad{border-color:color-mix(in srgb,var(--short) 45%,var(--line))} .cacchead{display:flex; justify-content:space-between; align-items:baseline} .cacchead b{font-size:15px} .cacchead i{font-style:normal; font:400 11px/1 var(--mono); color:var(--hint)} .cbal{display:flex; gap:5px; margin-top:11px} /* min-width:0 — чтобы длинное число сжимало ячейку, а не выталкивало соседние за край карточки. */ .cbal div{flex:1; min-width:0; text-align:center; padding:9px 4px; border-radius:9px; background:color-mix(in srgb,var(--hint) 9%,transparent)} .cbal b{display:block; font:700 14px/1.2 var(--mono); font-variant-numeric:tabular-nums} .cbal i{display:block; font-style:normal; font-size:12px; color:var(--hint); margin-top:4px} .cwarn{margin-top:9px; padding:9px 11px; border-radius:9px; font-size:12px; line-height:1.5; color:var(--gold); background:color-mix(in srgb,var(--gold) 13%,transparent)} .cerr{margin-top:7px; font-size:12px; color:var(--short); line-height:1.5} .cposwrap{margin-top:11px; display:flex; flex-direction:column; gap:5px} .cpos{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; background:color-mix(in srgb,var(--hint) 7%,transparent)} .cpnum{flex:1; font:400 11.5px/1 var(--mono); color:var(--hint); font-variant-numeric:tabular-nums} .cppnl{font:700 12.5px/1 var(--mono); font-variant-numeric:tabular-nums} .cppnl.g{color:var(--long)} .cppnl.r{color:var(--short)} .cempty{font-size:12px; color:var(--hint); padding:6px 2px} .attn{margin-bottom:14px; padding:13px 15px; border-radius:12px; border:1px solid var(--line)} .attn.bad{border-color:color-mix(in srgb,var(--short) 55%,var(--line)); background:color-mix(in srgb,var(--short) 8%,transparent)} .attn.warn{border-color:color-mix(in srgb,var(--gold) 50%,var(--line)); background:color-mix(in srgb,var(--gold) 8%,transparent)} .attnhead{font:600 11px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--hint); margin-bottom:9px} /* ВЁРСТКА НА УЗКОМ ЭКРАНЕ. При 383 px (ширина Mini App в Telegram) строка вылезала за границу блока и наезжала на следующую карточку. Причины три, и все три лечатся здесь: baseline вместо flex-start ломает выравнивание многострочного текста, flex-элемент без min-width:0 не даёт себя сжать ниже содержимого, а длинное слово без переноса растягивает его силой. */ .attnrow{display:flex; gap:9px; align-items:flex-start; padding:4px 0; font-size:13px; line-height:1.45; min-width:0} /* flex:1 — ГЛАВНОЕ ЗДЕСЬ, и его не хватало. С min-width:0 и без flex-grow элемент в строке flex сжимается до минимума содержимого, а при word-break:break-word минимум — ОДНА БУКВА. Отсюда предупреждение, вытянутое в вертикальный столбик по букве, налезающее на баланс. Прошлая правка добавила перенос, но не сказала элементу занять ширину. */ .attnrow span{flex:1 1 auto; min-width:0; overflow-wrap:anywhere; word-break:break-word} .attnrow i{flex:0 0 12px; font-style:normal; font:700 13px/1.45 var(--mono); text-align:center} .attnrow.bad i{color:var(--short)} .attnrow.warn i{color:var(--gold)} .attnrow.info i{color:var(--hint)} .scen{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:2px} .scell{padding:9px 4px; text-align:center; border-radius:9px; background:color-mix(in srgb,var(--hint) 8%,transparent)} .scell i{display:block; font-style:normal; font:600 11px/1 var(--mono); color:var(--hint); margin-bottom:5px} .scell b{display:block; font:700 12.5px/1.2 var(--mono); font-variant-numeric:tabular-nums} .scell b.g{color:var(--long)} .scell b.r{color:var(--short)} .cposbox{padding:10px 11px; border-radius:10px; background:color-mix(in srgb,var(--hint) 7%,transparent)} .cposbox .cpos{background:none; padding:0} .cpmeta{font-size:12px; color:var(--hint); margin:6px 0 2px} .cpmeta b.r{color:var(--short)} .cpsym{font:600 12px/1 var(--mono)} .subh{margin:14px 0 8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--hint)} .days{display:flex; align-items:flex-end; gap:3px; overflow-x:auto; padding-bottom:2px} .dcell{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; min-width:15px} .dcell i{display:block; width:11px; border-radius:2px} .dcell i.g{background:var(--long)} .dcell i.r{background:var(--short)} .dcell em{font-style:normal; font-size:12px; color:var(--hint)} .cpanel.inner{margin-top:14px; background:color-mix(in srgb,var(--hint) 7%,transparent); border-color:transparent} .cpanel{margin-top:13px; padding:15px 16px; border-radius:12px; background:var(--card); border:1px solid var(--line)} .cpanel h3{margin:0 0 10px; font-size:15px} .cbal div.good b{color:var(--long)} .cbal div.warn b{color:var(--gold)} .cbal div.bad b{color:var(--short)} .curve{display:flex; align-items:center; gap:12px; margin-bottom:12px} .curve .bspark{flex:1 1 auto; width:auto; height:34px} .cnum{font:700 15px/1 var(--mono); font-variant-numeric:tabular-nums} .cnum.g{color:var(--long)} .cnum.r{color:var(--short)} .sgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:5px} .sitem{padding:9px 4px; text-align:center; border-radius:9px; background:color-mix(in srgb,var(--hint) 8%,transparent)} .sitem b{display:block; font:700 13px/1.2 var(--mono); font-variant-numeric:tabular-nums} .sitem i{display:block; font-style:normal; font-size:12px; color:var(--hint); margin-top:4px} @media (max-width:400px){ .sgrid{grid-template-columns:repeat(2,1fr)} } .cnote{margin-top:9px; font-size:12px; line-height:1.5; color:var(--hint)} .cok{margin-top:11px; padding:11px 13px; border-radius:10px; font-size:12.5px; line-height:1.5; color:var(--long); background:color-mix(in srgb,var(--long) 13%,transparent)} /* The arm switch. Coloured by state so the answer to "can this spend money right now" is visible without reading a word. */ .carm{margin-top:14px; padding:13px 14px; border-radius:11px; border:1px solid var(--line)} .carm.on{border-color:color-mix(in srgb,var(--short) 55%,var(--line)); background:color-mix(in srgb,var(--short) 9%,transparent)} .carmtop b{display:block; font-size:14px} .carmtop i{display:block; font-style:normal; font-size:12px; color:var(--hint); margin:4px 0 11px; line-height:1.45} /* Глобальная полоса состояния торговли — над шапкой, во всех разделах. Прилипшая: при включённой торговле её видно и после прокрутки. */ /* Полоса состояния и шапка — ОДИН прилипший блок. Было: обе прилипали по отдельности, шапка со смещением top:31px под высоту полосы. Высота была вписана числом, а текст полосы на экране 375 пикселей переносился на вторую строку — полоса становилась выше тридцати одного пикселя, и шапка наезжала на неё. Контейнер снимает арифметику совсем: сколько бы строк ни занял текст, шапка идёт следом. */ /* Фон сплошной. С прозрачным контейнером то, что прокручивается под шапкой, просвечивало сквозь неё на 16% — со стороны это читается как наложение блоков друг на друга. */ .topbar{position:sticky; top:0; z-index:14; background:var(--bg)} .livebar{padding:7px 14px; font:700 11.5px/1.3 var(--sans); letter-spacing:.03em; text-align:center; border-bottom:1px solid transparent} .livebar.off{background:var(--card2); color:var(--hint); font-weight:600; border-bottom-color:var(--line)} .livebar.min{background:color-mix(in srgb,var(--gold) 16%,transparent); color:var(--gold); border-bottom-color:color-mix(in srgb,var(--gold) 45%,transparent)} .livebar.live{background:var(--short); color:#fff; border-bottom-color:var(--short)} /* Плашка внутри кабинета: рубильник живёт внизу экрана, и это единственное место, где его состояние видно сразу при открытии раздела. */ /* Настройки уведомлений внизу списка сигналов: их меняют редко, а список смотрят постоянно. */ .notif{margin-top:16px; padding:12px; border-radius:11px; border:1px solid var(--line); background:var(--card)} .notiftop{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px} .notiftop b{font-size:13px} /* Поиск и фильтры над списком сигналов. */ .findrow{position:relative; margin-bottom:8px} /* Нативный крестик у type="search" убран: рядом стоит свой, и WebKit рисовал второй. Сам type оставлен — от него зависит кнопка «Поиск» на клавиатуре телефона, а -webkit-appearance:none нативную кнопку не снимает. */ .findrow input::-webkit-search-cancel-button, .findrow input::-webkit-search-decoration{-webkit-appearance:none; appearance:none} .findrow input{width:100%; min-height:44px; padding:11px 38px 11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:14px var(--sans); -webkit-appearance:none} .findrow input::placeholder{color:var(--hint)} .findrow button{position:absolute; right:4px; top:50%; width:36px; height:36px; transform:translateY(-50%); border-radius:50%; color:var(--hint); font-size:18px; line-height:1} /* Кнопка вторичных фильтров. Когда что-то включено — видно, что включено. */ .filtoggle{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:44px; margin-bottom:8px; border-radius:10px; border:1px solid var(--line); background:var(--card2); color:var(--hint); font:600 12.5px/1 var(--sans)} .filtoggle.on{color:var(--bounce); border-color:color-mix(in srgb,var(--bounce) 45%,var(--line))} .filtoggle[aria-expanded="true"] .caret{transform:rotate(180deg)} .filters{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px} .filters .seg.small{flex:1 1 auto; min-width:0} .seg.small button{font-size:12px; padding:8px 6px; min-height:40px} /* Закрепление. Звезда стоит поверх строки справа, чтобы не сдвигать её содержимое: сдвиг при закреплении читался бы как «строка изменилась». */ .pin{position:absolute; right:6px; top:6px; width:32px; height:32px; border-radius:50%; color:var(--line); font-size:15px; line-height:1; z-index:2} .pin.on{color:var(--gold)} .row{position:relative} /* Ссылки наружу с карточки. */ .outlinks{display:flex; gap:8px; margin-top:9px} .olink{flex:1; display:flex; align-items:center; justify-content:center; min-height:44px; border-radius:9px; border:1px solid var(--line); color:var(--hint); text-decoration:none; font-size:12.5px} /* Последовательность шагов после отправки. «Ордер отправлен» и «позиция открыта» — разные события, и вид у них разный. */ .steps{margin:2px 0 10px} .step{display:flex; gap:9px; align-items:flex-start; padding:9px 10px; border-radius:9px; border:1px solid var(--line); margin-bottom:6px} .step .sm{flex:0 0 18px; text-align:center; font-weight:700} .step b{display:block; font-size:12.5px} .step i{display:block; font-style:normal; margin-top:3px; font-size:12px; line-height:1.45; color:var(--hint)} .step.ok{border-color:color-mix(in srgb,var(--long) 45%,var(--line))} .step.ok .sm{color:var(--long)} .step.bad{border-color:color-mix(in srgb,var(--short) 55%,var(--line)); background:color-mix(in srgb,var(--short) 8%,transparent)} .step.bad .sm{color:var(--short)} /* Ожидание — третье состояние шага, и цвет у него НЕ зелёный и НЕ красный. Лежащий лимит не удача и не беда: он ещё ничем не кончился, и красить его как исход значило бы подсказать вывод, которого нет. */ .step.wait{border-color:color-mix(in srgb,var(--gold) 45%,var(--line))} .step.wait .sm{color:var(--gold-ink)} .ptiny{font-size:12px; color:var(--hint)} /* Сценарий по битку: два края крупно, середина под раскрытием. */ .scen2{display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line); font-size:12.5px} .scen2 b{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14px} /* Откуда позиция: из сигнала или открыта не отсюда. */ .cporigin{margin-top:6px; font-size:12px} .cporigin.sig{color:var(--long-ink)} .cporigin.off{color:var(--hint)} /* Кривая результата: цвет по знаку итога, нулевая ось видна. */ .pnlcurve{position:relative; margin:6px 0 12px} .pnlcurve svg{display:block; width:100%; height:64px; overflow:visible} .pnlcurve path{fill:none; stroke-width:2; vector-effect:non-scaling-stroke} .pnlcurve.pos path{stroke:var(--long)} .pnlcurve.neg path{stroke:var(--short)} .pnlcurve line.zero{stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke} .pnlcurve .cnum{position:absolute; right:0; top:-2px; font:600 12.5px/1 var(--mono)} .pnlcurve.pos .cnum{color:var(--long-ink)} .pnlcurve.neg .cnum{color:var(--short-ink)} .subtabs.small button{min-height:36px; font-size:12px} /* Комиссии столбиком вычитания, а не сноской. */ .feecalc{margin:10px 0; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--card2)} .feecalc div{display:flex; justify-content:space-between; padding:3px 0; font-size:12.5px} .feecalc span{color:var(--hint)} .feecalc b{font-family:var(--mono); font-variant-numeric:tabular-nums} .feecalc .tot{border-top:1px solid var(--line); margin-top:4px; padding-top:6px} /* Заголовок раздела внутри кабинета. */ .csec{margin:16px 0 8px; font-size:13px; letter-spacing:.01em} /* Карточка позиции: числа сеткой, а не строкой. */ .cpgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px 10px; margin:9px 0 7px} .cpgrid div{min-width:0} .cpgrid i{display:block; font-style:normal; font-size:12px; color:var(--hint)} .cpgrid b{font:12.5px/1.2 var(--mono); font-variant-numeric:tabular-nums} .cposbox.hot{border-color:color-mix(in srgb,var(--short) 55%,var(--line)); background:color-mix(in srgb,var(--short) 7%,transparent)} .cppnl.g{color:var(--long-ink)} .cppnl.r{color:var(--short-ink)} /* Полоса счёта над подтверждением: куда именно уйдёт ордер. */ /* Точка в шапке говорит правду о состоянии, а не только о свежести скана: зелёная точка при нерабочем приложении — ложное утверждение в самом заметном месте. */ .dot.wait{background:var(--hint)} .dot.bad{background:var(--short)} /* Одно объяснение и одно действие, когда приложение не в рабочем состоянии. */ .statebox{margin:18px 0; padding:16px; border-radius:12px; border:1px solid var(--line); background:var(--card)} .statebox b{display:block; font-size:15px; margin-bottom:7px} .statebox p{margin:0 0 7px; font-size:12.5px; line-height:1.5; color:var(--hint)} .statebox p.do{color:var(--ink); font-weight:600} /* Вкладки, по которым сейчас нечего показать. */ nav.off{opacity:.4} nav.off button{pointer-events:none} /* Предупреждение над статистикой правила: это НЕ деньги. */ .modelnote{margin-bottom:12px; padding:11px 13px; border-radius:10px; border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line)); background:color-mix(in srgb,var(--gold) 10%,transparent); font-size:12px; line-height:1.5; color:var(--hint)} .modelnote b{color:var(--ink)} .acctbar{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:8px 10px; margin-bottom:9px; border-radius:9px; border:1px solid var(--line); background:var(--card2)} .acctbar b{font-size:12.5px} .acctbar i{font-style:normal; font-size:12px; color:var(--hint); font-family:var(--mono)} .acctbar u{flex:1 0 100%; text-decoration:none; font-size:12px; color:var(--gold)} .clive{margin:10px 0 0; padding:11px 13px; border-radius:11px; border:1px solid var(--short); background:color-mix(in srgb,var(--short) 13%,transparent)} .clive b{display:block; font-size:13px; color:var(--short); letter-spacing:.04em} .clive i{display:block; font-style:normal; font-size:12px; color:var(--hint); margin-top:3px; line-height:1.45} .cbtn.danger{background:var(--short)} /* The confirmation. Not a dialog: it replaces the button in place, so the numbers and the thing that sends them cannot drift apart on screen. */ .entry{margin-top:11px} .planbox{padding:13px 14px; border-radius:11px; border:1px solid var(--line); background:var(--card)} .planbox.danger{border-color:color-mix(in srgb,var(--short) 60%,var(--line))} .pl{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:12px} .pl:last-of-type{border-bottom:0} .pl span{color:var(--hint)} .pl b{font:600 12.5px/1.3 var(--mono); font-variant-numeric:tabular-nums; text-align:right} .szrow{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px} .szrow label{display:block} .szrow span{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--hint); margin-bottom:4px} .szin{width:100%; box-sizing:border-box; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:400 13.5px/1.3 var(--mono)} .szin:focus{outline:2px solid var(--bounce); outline-offset:1px} .szgo{grid-column:1 / -1; margin-top:0} /* ---- what the coin is really a bet on ---- Tinted by whether BTC is currently moving with the trade or against it, and the word says which - colour alone decides nothing here. */ .btie{margin-top:11px; padding:10px 11px; border-radius:10px; background:color-mix(in srgb,var(--hint) 9%,transparent)} .btie.good{background:color-mix(in srgb,var(--long) 11%,transparent)} .btie.bad{background:color-mix(in srgb,var(--gold) 12%,transparent)} .bthead{font-size:12px; line-height:1.45; color:var(--hint)} .bthead b{color:var(--ink); font:700 14px/1 var(--mono); font-variant-numeric:tabular-nums} .btrow{display:flex; align-items:center; gap:10px; margin-top:8px} .btrow .bspark{flex:0 0 66px} .btnums{min-width:0} .btnums b{display:block; font:12.5px/1.2 var(--mono); font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink)} .btnums i{display:block; font-style:normal; font-size:12px; color:var(--hint); margin-top:2px; font-variant-numeric:tabular-nums} .btwhy{margin-top:8px; font-size:12px; line-height:1.45; color:var(--hint)} /* One R as a share of price, which is the number a position size is actually built from, plus the horizon the trade expires on. */ .geom{margin-top:8px; font-size:12px; line-height:1.5; color:var(--hint)} .geom b{color:var(--ink); font:600 11.5px/1 var(--mono); font-variant-numeric:tabular-nums} /* ---- how big the pond is ---- Wrapping cells rather than a grid: the count varies from three to five depending on what the coin reports, and a grid left a hole where the fifth cell would have been, which read as a rendering fault. */ .scale{display:flex; flex-wrap:wrap; gap:5px; margin-top:11px} .sc{flex:1 1 68px; padding:8px 5px; text-align:center; border-radius:9px; background:color-mix(in srgb,var(--hint) 9%,transparent)} .sc b{display:block; font:12px/1.2 var(--mono); font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink)} .sc i{display:block; font-style:normal; font-size:12px; color:var(--hint); margin-top:4px; letter-spacing:.03em} /* ---- the three numbers that get typed into an exchange ---- */ .trio{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:13px; background:var(--line); border-radius:11px; overflow:hidden} .trio div{background:var(--card); padding:10px 6px; text-align:center} .trio b{display:block; font:15px/1.2 var(--mono); font-weight:700; font-variant-numeric:tabular-nums} .trio i{display:block; font-style:normal; font-size:12px; color:var(--hint); text-transform:uppercase; letter-spacing:.08em; margin-top:5px} .trio .st b{color:var(--short)} .trio .tg b{color:var(--long)} /* ---- price path, with the level it has to cross ---- */ .chart{margin-top:12px; margin-bottom:13px; position:relative; height:56px} .chart svg{display:block; width:100%; height:56px; overflow:visible} .chart path.line{fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke} .chart path.fill{stroke:none} .chart line.lvl{stroke:var(--hint); stroke-width:1; stroke-dasharray:3 3; opacity:.75} .chart circle{fill:var(--ink)} .chartlab{position:absolute; right:0; top:-3px; font:11px/1 var(--mono); color:var(--hint)} /* The stop and target zones bound the drawing, so the picture answers a question the price path alone cannot: did the coin reach the target at any point in the last twelve hours? */ .chart rect.zone{opacity:.12} .chart rect.zone.tg{fill:var(--long)} .chart rect.zone.st{fill:var(--short)} .nowpx{color:var(--bounce)} /* What this coin has actually done when the radar spoke before. */ .track{margin-top:11px; padding:9px 11px; border-radius:10px; font-size:12px; line-height:1.45; color:var(--hint); background:color-mix(in srgb,var(--hint) 10%,transparent)} .track b{color:var(--ink)} .track.g{background:color-mix(in srgb,var(--long) 11%,transparent)} .track.r{background:color-mix(in srgb,var(--short) 11%,transparent)} /* Per-coin derivatives, under the factor chips. Muted on purpose: it is description sitting next to numbers that were actually measured, and it must not out-shout them. */ .flow{margin-top:10px; padding-top:9px; border-top:1px solid var(--line)} /* За и против: счёт крупно, строки под ним. Colour carries the verdict and the sign repeats it, because colour alone fails for anyone who cannot separate red from green - and this is the one place in the app where a reader is meant to decide at a glance. */ .vrow{display:flex; gap:8px; align-items:baseline; padding:5px 0; border-top:1px solid var(--line)} .vrow i{flex:0 0 14px; font-style:normal; font:700 13px/1.2 var(--mono); text-align:center} .vrow.good i{color:var(--long)} .vrow.bad i{color:var(--gold)} .vrow.flat i{color:var(--hint)} .vl{min-width:0; font-size:12px; color:var(--hint)} .vl b{color:var(--ink); font:600 11.5px/1 var(--mono); font-variant-numeric:tabular-nums} .vl em{display:block; font-style:normal; font-size:12px; margin-top:2px; line-height:1.4} .fnums{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--hint)} .fnums b{color:var(--ink); font:600 11.5px/1 var(--mono); font-variant-numeric:tabular-nums} .fnote{margin-top:6px; font-size:12px; line-height:1.4; color:var(--hint)} .facts{display:flex; gap:5px; flex-wrap:wrap; margin-top:12px} .f{font-size:12px; font-weight:600; padding:4px 8px; border-radius:7px; line-height:1; color:var(--hint); background:color-mix(in srgb,var(--hint) 11%,transparent)} .f.on{color:var(--bounce-ink); background:color-mix(in srgb,var(--bounce) 17%,transparent)} .f.on.money{color:var(--long); background:color-mix(in srgb,var(--long) 17%,transparent)} .econ{margin-top:12px; padding-top:11px; border-top:1px solid var(--line)} .ebar{height:7px; border-radius:4px; overflow:hidden; display:flex; background:color-mix(in srgb,var(--hint) 14%,transparent)} .ebar i{display:block; height:100%} .enums{display:flex; justify-content:space-between; margin-top:8px; font:11.5px/1 var(--mono); font-variant-numeric:tabular-nums} .cost{color:var(--short)} .gain{color:var(--long); font-weight:700} .gain.thin{color:var(--hint); font-weight:400} .took{margin-top:12px; width:100%; padding:11px 0; border-radius:12px; font-size:13.5px; font-weight:650; color:var(--bounce); border:1px solid color-mix(in srgb,var(--bounce) 45%,transparent); background:color-mix(in srgb,var(--bounce) 10%,transparent); transition:background .15s,color .15s} .took[aria-pressed="true"]{color:var(--long); border-color:transparent; background:color-mix(in srgb,var(--long) 18%,transparent)} .took[disabled]{opacity:.5} /* ---- collapsible row: the list stays scannable, detail is one tap ---- */ .row{background:var(--card); border:1px solid var(--line); border-radius:var(--r); border-left:4px solid var(--edge, var(--line)); box-shadow:var(--shadow); overflow:hidden} .row.live{--edge:var(--long)} .row.live.short{--edge:var(--short)} .row.near{--edge:var(--gold)} .row.idle{--edge:color-mix(in srgb,var(--hint) 45%,transparent)} .rowhead{width:100%; display:flex; align-items:center; gap:10px; padding:12px 13px; text-align:left} .av{width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:12px; font-weight:750; color:var(--card); letter-spacing:-.02em} .rowmid{min-width:0; flex:1} .rowsym{font-size:14.5px; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:6px} .rowsub{font:11px/1.3 var(--mono); color:var(--hint); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .rowright{text-align:right; flex:0 0 auto; min-width:92px} .rowpx{display:block; font:13px/1 var(--mono); font-variant-numeric:tabular-nums; font-weight:650; white-space:nowrap} .rowdelta{display:block; font:11px/1 var(--mono); color:var(--hint); margin-top:5px; white-space:nowrap} .caret{color:var(--hint); font-size:12px; transition:transform .18s; flex:0 0 auto} .row[data-open="1"] .caret{transform:rotate(180deg)} .rowbody{display:none; padding:0 13px 13px} .row[data-open="1"] .rowbody{display:block} .empty{color:var(--hint); text-align:center; padding:44px 18px; font-size:14px; line-height:1.65} /* A shape where the content will be, rather than a word where it will not. The first paint after opening is otherwise a blank screen with "Загрузка", which reads as broken on a slow connection. */ .skel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; box-shadow:var(--shadow)} .skel i{display:block; border-radius:6px; background:var(--line); animation:pulse 1.4s ease-in-out infinite} .skel i+i{margin-top:10px} @keyframes pulse{0%,100%{opacity:.5} 50%{opacity:.85}} @media (prefers-reduced-motion:reduce){ .skel i{animation:none} } .seg{display:flex; gap:2px; padding:3px; border-radius:13px; background:var(--card2); border:1px solid var(--line)} .seg button{flex:1; padding:8px 2px; font-size:12.5px; font-weight:600; color:var(--hint); border-radius:10px; display:flex; align-items:center; justify-content:center; gap:5px} .seg button[aria-selected="true"]{color:var(--ink); background:var(--card); box-shadow:var(--shadow)} .seg b{font:700 11.5px/1 var(--mono); padding:3px 5px; border-radius:5px; color:var(--hint); background:color-mix(in srgb,var(--hint) 17%,transparent)} .seg b.live{color:var(--long); background:color-mix(in srgb,var(--long) 22%,transparent)} .seg b.near{color:var(--gold); background:color-mix(in srgb,var(--gold) 22%,transparent)} /* ЛЕНТА СОРТИРОВОК ПЕРЕНОСИТСЯ, А НЕ ПРОКРУЧИВАЕТСЯ. Горизонтальная прокрутка обрезала последний пункт и показывала крошечную полосу прокрутки: на телефоне последний вариант просто не существовал для того, кто не догадался потянуть вбок. Три-четыре коротких кнопки помещаются в две строки без потерь, и ни одна не прячется. */ .sorts{display:flex; flex-wrap:wrap; gap:6px; padding-bottom:2px} .sorts button{flex:0 0 auto; padding:6px 11px; border-radius:9px; font-size:12px; font-weight:600; color:var(--hint); border:1px solid var(--line); white-space:nowrap} .sorts button[aria-selected="true"]{color:var(--bounce); border-color:var(--bounce); background:color-mix(in srgb,var(--bounce) 10%,transparent)} /* ---- journal ---- */ .hero{background:linear-gradient(180deg,var(--sheen),transparent 42%), linear-gradient(var(--card),var(--card)); border:1px solid var(--line); border-radius:var(--r); padding:15px 15px 13px; box-shadow:var(--shadow)} .herotop{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; align-items:end} .herotop div b{display:block; font:26px/1 var(--mono); font-weight:750; letter-spacing:-.035em; font-variant-numeric:tabular-nums} .herotop div:first-child b{font-size:30px} .herotop .g{color:var(--long)} .herotop .r{color:var(--short)} .herotop i{display:block; font-style:normal; font-size:12px; color:var(--hint); margin-top:5px; line-height:1.35} .curve{margin-top:14px; height:96px; position:relative; padding-right:46px} /* The endpoint is what the reader came for, so it is marked and labelled rather than left as the place the line happens to stop. */ .endpt{position:absolute; width:8px; height:8px; border-radius:50%; background:var(--long); transform:translate(-4px,-4px); box-shadow:0 0 0 3px var(--card)} .endpt.dn{background:var(--short)} .endlab{position:absolute; right:0; transform:translateY(-50%); font:600 11px/1 var(--mono); color:var(--long); font-variant-numeric:tabular-nums} .endlab.dn{color:var(--short)} .zerolab{position:absolute; left:0; transform:translateY(-50%); font:400 11px/1 var(--mono); color:var(--hint); background:var(--card); padding-right:3px} .curve svg{display:block; width:100%; height:96px; overflow:visible} .curve path.line{fill:none; stroke:var(--long); stroke-width:2; stroke-linejoin:round; vector-effect:non-scaling-stroke} .curve path.line.dn{stroke:var(--short)} .curve path.area{stroke:none; opacity:.14} .curve line.zero{stroke:var(--line); stroke-width:1} /* SVG-текст внутри графика НЕ поднимаем: он живёт в координатах viewBox, и увеличение накладывает подписи друг на друга. */ .curve text{fill:var(--hint); font:9px var(--mono)} .thin{color:var(--hint); font-size:12px; line-height:1.55; margin:12px 0 0} .tbl{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden} .tr{display:grid; grid-template-columns:1fr 46px 54px 58px; gap:7px; align-items:baseline; padding:11px 13px; border-bottom:1px solid var(--line)} .tr:last-child{border-bottom:0} .tr.h{font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--hint)} .tr.h span{white-space:nowrap} .tr .n{font:12.5px/1 var(--mono); font-variant-numeric:tabular-nums; text-align:right} /* Name on its own line, the note under it: inline they wrapped together and pushed every row to three lines. */ .tr .nm{font-size:13px; display:block; min-width:0} .tr .nm em{display:block; font-style:normal; font-size:12px; color:var(--hint); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .lead{color:var(--bounce); font-weight:650} .when{display:flex; justify-content:space-between; margin-top:9px; font:11.5px/1 var(--mono); color:var(--hint); font-variant-numeric:tabular-nums} /* ---- bottom navigation: where a thumb actually reaches ---- */ nav{position:fixed; left:0; right:0; bottom:0; z-index:12; display:flex; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 88%, transparent); /* Насыщенность 160% под панелью подсвечивала синий активной вкладки сквозь стекло — в остальном строгом интерфейсе это читалось как спецэффект. Размытие оставлено: оно отделяет панель от содержимого, а усиление цвета ничего не отделяло. */ backdrop-filter:saturate(108%) blur(16px); -webkit-backdrop-filter:saturate(108%) blur(16px); border-top:1px solid var(--line)} nav button{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 0 5px; color:var(--hint); font-size:12px; font-weight:600; border-radius:12px; transition:color .15s} nav button[aria-selected="true"]{color:var(--bounce)} nav svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round} /* Счётчик рос бы из своей окружности, поэтому окружность растёт вместе с цифрой, а не цифра остаётся мелкой ради окружности. */ nav .badge{position:absolute; transform:translate(13px,-5px); min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--long); color:#04160f; font:700 11px/18px var(--mono); text-align:center} .sheet{position:fixed; inset:0; z-index:20; display:none; background:color-mix(in srgb,#000 58%,transparent)} .sheet.open{display:block} .sheetbody{position:absolute; left:0; right:0; bottom:0; max-height:88%; overflow-y:auto; background:var(--bg); border-radius:18px 18px 0 0; padding:8px 18px calc(30px + env(safe-area-inset-bottom)); animation:rise .22s ease-out} @keyframes rise{from{transform:translateY(16px); opacity:.5} to{transform:none; opacity:1}} @media (prefers-reduced-motion:reduce){ .sheetbody{animation:none} } .grab{width:40px; height:5px; border-radius:3px; background:var(--line); margin:6px auto 16px; cursor:pointer} /* Glossary: term and meaning, not a table - a table would need two columns to line up on a 320px screen and neither would fit. */ .gl{margin:8px 0 0} .gl dt{font-size:12.5px; font-weight:650; color:var(--ink); margin-top:11px} .gl dd{margin:3px 0 0; font-size:12px; line-height:1.5; color:var(--hint)} .sheetbody h2{font-size:14px; font-weight:700; margin:22px 0 7px} .sheetbody h2:first-of-type{margin-top:4px} .sheetbody p{font-size:13px; line-height:1.62; color:var(--hint); margin:0 0 9px} .sheetbody code{font:12px/1 var(--mono); color:var(--ink)} .sheetbody b{color:var(--ink)} .ver{margin-top:18px; font:11px/1 var(--mono); color:var(--hint); text-align:center} :focus-visible{outline:2px solid var(--bounce); outline-offset:2px} /* ---- широкий экран: Telegram Desktop ------------------------------------ Ограничения ширины не было вовсе: на десктопе карточки и таблицы растягивались во весь монитор, и строка цифр уезжала на полметра вправо — глазу приходилось возвращаться через пустоту. Приложение рисовалось для телефона шириной 375 и на 1600 просто масштабировалось в пустоту. Одна колонка по центру, а не две. Двухколоночная раскладка обсуждалась и отложена намеренно: правая колонка держала бы рыночный фон, который мы только что сознательно опустили ВНИЗ первого экрана как неизмеренный. Поднять его обратно направо значило бы вернуть ему вес, которого у него нет. */ @media (min-width: 900px){ header, main, nav > *{ max-width:1120px; margin-left:auto; margin-right:auto } header{ padding-left:max(14px, calc((100vw - 1120px) / 2)); padding-right:max(14px, calc((100vw - 1120px) / 2)) } nav{ justify-content:center } nav button{ flex:0 0 140px } main{ padding-left:0; padding-right:0 } /* Сигналы читаются в колонке шириной с текст, а не с монитор. */ .card, .row, .statebox, .planbox{ max-width:760px } .tiles{ max-width:760px } } /* Тревога, когда потеря до стопов перевалила за капитал. Отдельный блок, а не цвет на ячейке: ячейка стоит в ряду с числом позиций, и любая её раскраска читается как «метрика чуть покраснела». */ .ralarm{margin-bottom:12px; padding:13px 15px; border-radius:12px; border:1px solid var(--line)} .ralarm.bad{border-color:var(--short); background:color-mix(in srgb,var(--short) 12%,var(--card))} .ralarm.warn{border-color:color-mix(in srgb,var(--gold) 55%,var(--line)); background:color-mix(in srgb,var(--gold) 10%,var(--card))} .rahead{font:700 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase} .ralarm.bad .rahead{color:var(--short-ink,var(--short))} .ralarm.warn .rahead{color:var(--gold-ink,var(--gold))} .rabig{margin-top:7px; font:700 16px/1.25 var(--sans)} .rasub{margin-top:3px; font:400 12px/1.45 var(--mono); color:var(--hint); font-variant-numeric:tabular-nums} .ralist{margin:9px 0 0; padding-left:16px; font-size:12px; line-height:1.55} .ralist li{margin-top:4px} /* Позиция с плечом выше лимита кабинета. */ .cposbox.overlev{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))} .cpover{margin-top:7px; padding:6px 9px; border-radius:8px; font-size:12px; line-height:1.4; color:var(--gold-ink,var(--gold)); background:color-mix(in srgb,var(--gold) 15%,transparent)} .cpgrid .r b{color:var(--short)} /* Зеркало лимитов в «Настройках»: строки только для чтения. */ .lmrow{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:7px 0; font-size:12.5px; border-top:1px solid var(--line)} .lmrow:first-of-type{border-top:0} .lmrow span{color:var(--hint)} .lmrow b{font:600 12.5px/1.3 var(--mono); text-align:right; font-variant-numeric:tabular-nums} .lmrow b i{font-style:normal; font-weight:400; color:var(--hint)} /* Направление в свёрнутой строке — словом. */ .chip.dir{font-size:10.5px; letter-spacing:.02em} /* ШЕСТЬ ВКЛАДОК НА УЗКОМ ЭКРАНЕ ПЕРЕНОСЯТСЯ, А НЕ ПРЯЧУТСЯ. Группировка трёх последних под «Ещё» убрала бы тесноту ценой лишнего нажатия и невидимости того, что спрятано. Перенос на вторую строку стоит четырнадцати пикселей высоты и не прячет ничего. */ @media (max-width:520px){ .subtabs{flex-wrap:wrap} .subtabs button{flex:1 1 auto; min-width:0; padding:7px 9px; font-size:12px} } /* «Рассчитать» — не второстепенное действие: это единственный способ увидеть объём и ликвидацию до входа. Призрачной она читалась как выключенная. */ .cbtn.ghost.small[data-plan]{border-color:var(--line); color:var(--ink); background:var(--card2); font-weight:600} /* Вход с отрицательной экономикой: не зелёный. */ .card.thin, .card.thin.short{--edge:var(--gold)} .state.thin{color:var(--gold-ink); background:color-mix(in srgb,var(--gold) 16%,transparent)} .thinnote{margin:8px 0 0; padding:8px 10px; border-radius:9px; font-size:12px; line-height:1.45; color:var(--gold-ink); background:color-mix(in srgb,var(--gold) 13%,transparent)} /* Группа новостей об одной теме. Свёрнутое не выброшено — оно под кнопкой, и раскрытая группа показывает ровно те же карточки. */ .ngroup{display:flex; flex-direction:column; gap:6px} .nmore{align-self:flex-start; display:flex; align-items:center; gap:6px; min-height:36px; padding:6px 11px; border:1px solid var(--line); border-radius:9px; background:var(--card2); color:var(--hint); font:600 11.5px/1.3 var(--sans); cursor:pointer; text-align:left} .nmore .caret{font-size:12px; transition:transform .15s} .ngroup[data-open="1"] .nmore .caret{transform:rotate(180deg)} .nrest{display:none; flex-direction:column; gap:6px; padding-left:11px; border-left:2px solid var(--line)} .ngroup[data-open="1"] .nrest{display:flex} /* Возраст входа рядом с состоянием — тише, чем само состояние. */ .state i{display:block; font-style:normal; font-weight:400; font-size:12px; color:var(--hint); margin-top:2px; text-align:right} /* Журнал действий: что поменялось и когда точно. */ .lgdiff{display:block; margin-top:3px; font:400 11px/1.4 var(--mono); color:var(--hint); font-variant-numeric:tabular-nums} .lgdiff b{color:var(--ink); font-weight:600} .tbl .tr .n i{display:block; font-style:normal; font-size:12px; color:var(--hint); margin-top:2px} /* Календарь: местное время сверху, UTC под ним мелким. */ .tbl .tr.ev2 .n i{display:block; font-style:normal; font-size:12px; color:var(--hint); margin-top:2px} /* ---- экран проверки сделки ---- */ .pfsub{font-size:12px; color:var(--hint); margin:-4px 0 12px} .pfblock{margin:0 0 12px; padding:12px 14px; border-radius:10px; border:1px solid var(--short); background:color-mix(in srgb,var(--short) 10%,var(--card))} .pfbad{font-size:13px; line-height:1.5; color:var(--short-ink)} .pfbad + .pfbad{margin-top:6px; padding-top:6px; border-top:1px solid color-mix(in srgb,var(--short) 30%,transparent)} .pfouts{display:flex; gap:8px; margin-top:12px} .pfouts .cbtn{flex:1} /* Каждое согласие — своя галочка. Кнопка отправки не включается, пока хоть одна пуста: общая галочка означала бы согласие с непрочитанным. */ .pfasks{margin:12px 0 4px; display:flex; flex-direction:column; gap:8px} .pfask{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:10px; cursor:pointer; font-size:12.5px; line-height:1.5; border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line)); background:color-mix(in srgb,var(--gold) 9%,transparent)} .pfask input{flex:0 0 auto; width:18px; height:18px; margin-top:1px; accent-color:var(--gold)} .cbtn[disabled]{opacity:.45; cursor:not-allowed} /* Внешняя позиция без стопа. Самое опасное, что бывает на счёте, — и до этого этапа отличалось одной серой строчкой. */ .cpnaked{margin-top:8px; padding:8px 10px; border-radius:8px; font:700 11.5px/1.4 var(--mono); letter-spacing:.04em; color:#fff; background:var(--short)} .cpnaked i{display:block; font:400 11px/1.4 var(--sans); font-style:normal; margin-top:3px; opacity:.92} .cpcand{margin-top:7px; padding:7px 9px; border-radius:8px; font-size:12px; line-height:1.45; color:var(--hint); background:color-mix(in srgb,var(--hint) 9%,transparent)} .cposbox .cbtn.small{margin-top:8px} /* Итоговый preflight: права, а не лимиты. */ .pfrules{margin:14px 0 6px; padding:12px 14px; border-radius:11px; border:1px solid var(--line); background:var(--card2)} .pfrhead{font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--hint); margin-bottom:10px} .pfr{padding:8px 0; border-top:1px solid var(--line)} .pfr:first-of-type{border-top:0; padding-top:0} .pfr b{display:block; font:600 12.5px/1.3 var(--sans); margin-bottom:3px} .pfr span{display:block; font-size:12px; line-height:1.5; color:var(--hint)} .pfr.bad b{color:var(--short-ink)} .pfr.bad span{color:var(--short-ink)} .csub2{margin:18px 0 8px; font:600 13px/1.3 var(--sans)} /* Метка монеты по её собственной истории. Не украшение: она говорит, что монета отличается от СРЕДНЕГО ПРАВИЛА, и только если отличие пережило поправку на число сравнённых монет. */ .cmark{display:inline-block; margin-left:6px; padding:2px 7px; border-radius:5px; font:600 10.5px/1.4 var(--mono); letter-spacing:.02em; white-space:nowrap; vertical-align:middle} .cmark.up{color:var(--long-ink); background:color-mix(in srgb,var(--long) 16%,transparent)} .cmark.down{color:var(--short-ink); background:color-mix(in srgb,var(--short) 16%,transparent)} .cmark.new{color:var(--hint); background:color-mix(in srgb,var(--hint) 13%,transparent)} .rowsym .cmark{font-size:9.5px; padding:1px 5px} /* Ползунки размера. Рядом с полями, а не вместо них: палец задаёт грубо, клавиатура — точно, и оба пишут в одно и то же число. */ .szsl { display: flex; gap: 12px; margin: 6px 0 10px; } .szsl label { flex: 1; display: flex; flex-direction: column; gap: 4px; } .szsl label span { font-size: 12px; letter-spacing: .02em; color: var(--hint); } .szsl input[type="range"] { width: 100%; accent-color: var(--bounce); } /* Зона исполнения. Ликвидность, а не качество сигнала — поэтому нейтральная серая шкала, а не зелёный/красный: последние на этой карточке значат «выгодно/невыгодно», и путать эти два смысла нельзя. */ .czone { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; margin-right: 6px; border: 1px solid color-mix(in srgb, var(--hint) 35%, transparent); color: var(--hint); } .czone.cheap { border-color: color-mix(in srgb, var(--long) 45%, transparent); } .czone.dear { border-color: color-mix(in srgb, var(--short) 45%, transparent); } /* РАЗМЕР ШРИФТА В ФИНАНСОВОМ ИНТЕРФЕЙСЕ. Тридцать четыре объявления стояли на 11px — на этом размере читаются пояснения, причины блокировки и суммы комиссий, то есть ровно то, из-за чего теряют деньги, не дочитав. Подняты до 12px: это не украшение, а минимум, ниже которого мелкий серый текст перестают читать. Ниже 12px остались только ЧЕТЫРЕ метки-ярлыка: сторона сделки, метка монеты, зона исполнения. Это не текст, а подписи в одно-два слова, и читаются они как значок. Прозы мельче 12px в файле нет. */ .czone { font-size: 11px; } /* Меню «Ещё» в кабинете: три подписанных пункта вместо трёх угадываемых слов во второй строке вкладок. Подпись объясняет, чьи это числа, — та же ошибка («статистика правила» прочитана как результат счёта) уже случалась. */ .submenu { display: grid; gap: 6px; margin: 8px 0 12px; } .subitem { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); } .subitem b { display: block; font-size: 14px; color: var(--ink); } .subitem i { display: block; font-style: normal; font-size: 12px; margin-top: 2px; color: var(--hint); } .subitem.on { border-color: var(--bounce); background: color-mix(in srgb, var(--bounce) 8%, transparent); } /* Пометка «забег»: вход, за которым цена ушла дальше двух единиц риска. Это описание прошедшего, а не оценка сигнала, поэтому знак сдержанный — рамка и цвет текста, без заливки. Заливка читалась бы как «бери такие», а на живом сигнале этого числа не существует вовсе. */ .rbig{ font-style: normal; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-left: 4px; color: var(--ink); font-size: 11px; white-space: nowrap; } /* Состояние сопровождения — первый блок карточки позиции. Внешний аудит 2026-09-05 назвал это первым пунктом: «стоп есть», «связь с сигналом подтверждена» и «бот ведёт позицию» легко спутать, а последствия у них разные. Поэтому блок стоит ДО цифр и читается сверху вниз четырьмя строками, а не собирается человеком из подписей по всей карточке. flex:1 на тексте обязателен: без него строка в flex-контейнере сжимается до минимума содержимого, а с переносом по буквам минимум — одна буква. Ровно так сломалась .attnrow, и повторять эту ошибку в новом блоке незачем. */ .cpcare{margin:9px 0 10px; padding:9px 10px; border-radius:10px; background:color-mix(in srgb,var(--hint) 7%,transparent)} .carerow{display:flex; gap:8px; align-items:flex-start; padding:3px 0; font-size:12.5px; line-height:1.4; min-width:0} .carerow span{flex:1 1 auto; min-width:0; overflow-wrap:anywhere} .carerow i{flex:0 0 12px; font-style:normal; font:700 12px/1.4 var(--mono); text-align:center} .carerow.ok i{color:var(--long)} .carerow.bad i{color:var(--short)} .carerow.bad span{color:var(--short-ink)} .carerow.info i{color:var(--hint)} .carerow.info span{color:var(--hint)} /* Focus v79: scoped to the two research screens; account/order UI unchanged. */ body:is([data-screen="radar"],[data-screen="signals"]){ --focus-accent:#625cd6; --focus-button-ink:#fff; background-image:none; } :root[data-theme="dark"] body:is([data-screen="radar"],[data-screen="signals"]){ --bg:#0d1117; --card:#151b24; --card2:#1b2330; --ink:#eef2f7; --hint:#a4aebf; --line:rgba(179,194,215,.17); --bounce:#9592ff; --bounce-ink:#aaa7ff; --long:#42d5a2; --long-ink:#42d5a2; --short:#ff7b85; --short-ink:#ff7b85; --gold:#efbb62; --gold-ink:#efbb62; --focus-accent:#9592ff; --focus-button-ink:#0d1117; } @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) body:is([data-screen="radar"],[data-screen="signals"]){ --bg:#0d1117; --card:#151b24; --card2:#1b2330; --ink:#eef2f7; --hint:#a4aebf; --line:rgba(179,194,215,.17); --bounce:#9592ff; --bounce-ink:#aaa7ff; --long:#42d5a2; --long-ink:#42d5a2; --short:#ff7b85; --short-ink:#ff7b85; --gold:#efbb62; --gold-ink:#efbb62; --focus-accent:#9592ff; --focus-button-ink:#0d1117; } } body:is([data-screen="radar"],[data-screen="signals"]) main{gap:14px; padding:18px 14px 0; max-width:760px; margin:auto} .focus-heading h2{font-size:25px;line-height:1.18;letter-spacing:-.035em;margin:0 0 7px;font-weight:750} .focus-heading p{font-size:12px;line-height:1.5;margin:0;color:var(--hint)} body:is([data-screen="radar"],[data-screen="signals"]) .tiles{gap:10px} body:is([data-screen="radar"],[data-screen="signals"]) .tile{padding:14px;background:var(--card);border:1px solid var(--line);box-shadow:none;border-radius:13px;min-width:0} body:is([data-screen="radar"],[data-screen="signals"]) .tile b{font-size:25px;color:var(--ink)} body:is([data-screen="radar"],[data-screen="signals"]) .tile i{font-size:11px;line-height:1.4;color:var(--hint);white-space:normal;text-transform:none} body:is([data-screen="radar"],[data-screen="signals"]) .tile .ic{color:var(--focus-accent);flex-shrink:0} body:is([data-screen="radar"],[data-screen="signals"]) .card{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:none;overflow:hidden} body:is([data-screen="radar"],[data-screen="signals"]) .card::before{display:none} body:is([data-screen="radar"],[data-screen="signals"]) .head{gap:9px;flex-wrap:wrap;align-items:center} body:is([data-screen="radar"],[data-screen="signals"]) .sym{font-size:20px;letter-spacing:-.025em} body:is([data-screen="radar"],[data-screen="signals"]) .av{width:34px;height:34px;flex:0 0 34px;font-size:12px;border-radius:50%} body:is([data-screen="radar"],[data-screen="signals"]) .state{font-size:11px;line-height:1.45;margin-left:auto;text-align:right;max-width:50%} .focus-context{font-size:11px;line-height:1.55;color:var(--hint);margin:9px 0 12px} body:is([data-screen="radar"],[data-screen="signals"]) .chips{gap:6px;margin:10px 0 14px;flex-wrap:wrap} body:is([data-screen="radar"],[data-screen="signals"]) .chip{padding:4px 7px;font-size:10px;line-height:1.35;letter-spacing:.015em;border-radius:5px} body:is([data-screen="radar"],[data-screen="signals"]) .cardswitch{background:var(--card2);padding:4px;border:1px solid var(--line);border-radius:10px;margin:10px 0 16px} body:is([data-screen="radar"],[data-screen="signals"]) .cardswitch button{min-height:40px;font-size:12px;border-radius:7px} body:is([data-screen="radar"],[data-screen="signals"]) .cardswitch button[aria-selected="true"]{color:var(--bounce-ink);background:color-mix(in srgb,var(--focus-accent) 14%,var(--card));box-shadow:none} .focus-quote{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;min-width:0} .focus-quote>div{min-width:0} .focus-quote>div>span{display:block;font-size:11px;color:var(--hint);margin-bottom:4px} .focus-quote>div>b{font-family:var(--mono);font-size:clamp(22px,6.7vw,32px);line-height:1.3;letter-spacing:-.055em;font-weight:650;overflow-wrap:anywhere} .focus-level{font-size:11px;line-height:1.65;color:var(--hint);text-align:right;flex-shrink:0} .focus-level strong{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink)} .focus-chart{margin:0 0 14px;padding:10px 8px;background:color-mix(in srgb,var(--bg) 45%,var(--card));border:1px solid var(--line);border-radius:11px} .fc-caption,.fc-legend{display:flex;justify-content:space-between;gap:7px;flex-wrap:wrap;font-size:10px;line-height:1.4;color:var(--hint)} .focus-chart svg{display:block;width:100%;height:auto;margin:6px 0;overflow:visible} .fc-grid{stroke:var(--line);stroke-width:.7;stroke-dasharray:2 4} .fc-guide{stroke:var(--hint);stroke-width:1;stroke-dasharray:4 4;opacity:.8} .fc-guide.fc-stop{stroke:var(--short)} .fc-guide.fc-target{stroke:var(--long)} .fc-line{fill:none;stroke:var(--bounce);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .fc-legend .fc-stop{color:var(--short-ink)} .fc-legend .fc-target{color:var(--long-ink)} body:is([data-screen="radar"],[data-screen="signals"]) .trio{border:1px solid var(--line);border-radius:11px;background:var(--card2);margin:12px 0 10px;overflow:hidden} body:is([data-screen="radar"],[data-screen="signals"]) .trio>div{padding:12px 4px;min-width:0} body:is([data-screen="radar"],[data-screen="signals"]) .trio b{font-size:clamp(11px,3.1vw,17px);letter-spacing:-.05em;overflow-wrap:anywhere} body:is([data-screen="radar"],[data-screen="signals"]) .trio i{font-size:9px;line-height:1.5;white-space:normal;letter-spacing:0;text-transform:none} .focus-risk{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap;font-size:11px;color:var(--hint);padding:5px 1px 14px} .focus-risk b{color:var(--ink);font-family:var(--mono);font-size:12px;white-space:nowrap} .focus-evidence{border:1px solid var(--line);border-radius:11px;padding:2px 12px;margin:0 0 12px} .focus-evidence>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:11px;line-height:1.45;color:var(--hint)} .focus-evidence b{font-family:var(--mono);font-size:12px;color:var(--ink);text-align:right;flex-shrink:0;max-width:48%} .focus-evidence b.caution{color:var(--gold-ink)} /* СВЁРНУТАЯ КАРТОЧКА: четыре числа и кнопка. Раскрытая карточка — около 1 494 px, почти два экрана телефона на один сигнал, а девять сигналов давали 13 700 px. Сводка оставляет на виду ровно то, по чему принимают решение, и убирает под кнопку график (он один занимал 43% карточки), шкалу, разбор факторов и три абзаца оговорок. */ .cardsum{display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; margin:0 0 12px} .cardsum > div{display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; padding:6px 9px; border-radius:8px; background:color-mix(in srgb,var(--hint) 6%,transparent)} .cardsum i{font-style:normal; font-size:10.5px; line-height:1.3; color:var(--hint); min-width:0; overflow-wrap:anywhere} .cardsum b{font:700 13px/1 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 auto} .cardsum b.caution{color:var(--gold-ink)} .cardmore{width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 12px; border-radius:10px; font-size:12.5px; font-weight:600; color:var(--hint); background:color-mix(in srgb,var(--hint) 7%,transparent); border:1px solid var(--line)} .card[data-open="1"] .cardmore{margin-bottom:14px} .card[data-open="1"] .caret{transform:rotate(180deg)} .cardbody{display:none} .card[data-open="1"] .cardbody{display:block} .focus-evidence p{font-size:10px;line-height:1.55;color:var(--hint);margin:10px 0} body:is([data-screen="radar"],[data-screen="signals"]) .geom{font-size:11px;line-height:1.65;margin:10px 0;color:var(--hint)} body:is([data-screen="radar"],[data-screen="signals"]) .geom.warn{padding:12px;border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);border-radius:10px;background:color-mix(in srgb,var(--gold) 6%,transparent);color:var(--gold-ink)} body:is([data-screen="radar"],[data-screen="signals"]) .thinnote{margin:10px 0;padding:9px 11px;font-size:11px;line-height:1.55;border-radius:9px} body:is([data-screen="radar"],[data-screen="signals"]) .outlinks{margin:15px 0;gap:10px} body:is([data-screen="radar"],[data-screen="signals"]) .olink{min-height:40px;display:inline-flex;align-items:center;font-size:12px} body:is([data-screen="radar"],[data-screen="signals"]) .took{min-height:44px;border-radius:10px;font-size:12px} body:is([data-screen="radar"],[data-screen="signals"]) .entry>.cbtn:first-child{min-height:46px;border-radius:10px;font-size:14px;background:var(--focus-accent);color:var(--focus-button-ink);border:0} body:is([data-screen="radar"],[data-screen="signals"]) .row{border-radius:13px;border:1px solid var(--line);background:var(--card);box-shadow:none} body:is([data-screen="radar"],[data-screen="signals"]) .rowhead{min-height:76px;padding-top:14px;padding-bottom:14px} body:is([data-screen="radar"],[data-screen="signals"]) .rowbody{padding:0 14px 14px} body:is([data-screen="radar"],[data-screen="signals"]) .rowsym{flex-wrap:wrap} body:is([data-screen="radar"],[data-screen="signals"]) .sorts{gap:6px;flex-wrap:wrap} body:is([data-screen="radar"],[data-screen="signals"]) .sorts button{min-height:36px;font-size:11px;padding:8px 10px;border-radius:7px} @media(max-width:359px){ body:is([data-screen="radar"],[data-screen="signals"]) .tile{flex-direction:column;align-items:flex-start;padding:12px;gap:8px} body:is([data-screen="radar"],[data-screen="signals"]) .tile>div{min-width:0;max-width:100%} body:is([data-screen="radar"],[data-screen="signals"]) .state{white-space:normal} body:is([data-screen="radar"],[data-screen="signals"]) .state i{white-space:normal;font-size:10px} body:is([data-screen="radar"],[data-screen="signals"]) .rowsym{white-space:normal;overflow-wrap:anywhere} body:is([data-screen="radar"],[data-screen="signals"]) main{padding:12px 10px 0} body:is([data-screen="radar"],[data-screen="signals"]) .card{padding:12px} .focus-heading h2{font-size:23px} .focus-evidence>div{font-size:10px;gap:6px} .focus-evidence b{font-size:11px} .focus-level strong{font-size:10px} } @media(prefers-reduced-motion:reduce){.focus-chart *{animation:none;transition:none}} /* Real candles: the Focus palette, isolated from account/trading controls. */ .candles{margin:0 0 14px;padding:10px 8px;background:color-mix(in srgb,var(--bg) 45%,var(--card));border:1px solid var(--line);border-radius:11px;min-width:0} .candle-top{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;color:var(--hint)} .candle-periods{display:flex;gap:3px;background:var(--card2);border-radius:7px;padding:3px} .candle-periods button{min-height:44px;min-width:44px;border-radius:5px;color:var(--hint);font-size:12px} .candle-periods button[aria-pressed="true"]{background:color-mix(in srgb,var(--bounce) 18%,var(--card));color:var(--bounce-ink)} .candle-readout{font:11px/1.65 var(--mono);color:var(--hint);white-space:pre-wrap;overflow-wrap:anywhere;min-height:92px;margin-top:10px} .candle-plot{width:100%;min-height:300px;touch-action:pan-y;cursor:crosshair;outline-offset:2px} .candle-plot:focus-visible,.candles button:focus-visible{outline:2px solid var(--bounce)} .candle-plot svg{display:block;overflow:hidden} .candle-axis{font:10px var(--mono);fill:var(--hint)} .candle-grid{stroke:var(--line);stroke-width:.6;stroke-dasharray:2 4} .candle-up{stroke:var(--long);fill:var(--card);stroke-width:1} .candle-down{stroke:var(--short);fill:var(--short);stroke-width:1} .candle-volume.candle-up{fill:var(--long)} .candle-volume{stroke:none;opacity:.55} .candle-guide{stroke:var(--hint);stroke-width:1;stroke-dasharray:2 4} .cg-stop{stroke:var(--short);stroke-dasharray:6 4} .cg-target{stroke:var(--long);stroke-dasharray:6 4} .candle-cross{stroke:var(--hint);stroke-width:.8;stroke-dasharray:3 3} .candle-status{font-size:10px;line-height:1.5;color:var(--hint);min-height:30px;margin:4px 0} .candle-status.is-stale{color:var(--gold-ink)} /* 44 px — та же цель нажатия, что у кнопок шапки, и по той же причине. Панель графика давала 34–39 px, а таких кнопок на экране было восемь на карточку. `flex-wrap` здесь уже стоял, поэтому расширение переносит строку, а не выдавливает её за край. */ .candle-controls{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0} .candle-controls button{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:6px;padding:5px 8px;color:var(--hint);font-size:11px} .candle-controls button:disabled{opacity:.4;cursor:default} .candle-legend{display:flex;gap:8px;flex-wrap:wrap;font-size:9px;color:var(--hint);line-height:1.6} .cl-stop{color:var(--short-ink)}.cl-target{color:var(--long-ink)} .candle-foot{font-size:9px;color:var(--hint);line-height:1.6;margin-top:5px;overflow-wrap:anywhere} /* Оговорка о неразличимости стоит на месте прежней общей фразы и должна читаться как предупреждение, а не как мелкий шрифт под таблицей. */ .focus-evidence p.noise{color:var(--gold-ink)} /* Переключатель кабинетов. Стоит над всем содержимым «Кабинета» и виден в любом состоянии, включая неотвечающую службу: «кабинет не отвечает» на демо и на бою — разные новости, и уйти на вторую надо чем-то. */ .seg.cabpick{margin-bottom:12px} .seg.cabpick button[aria-selected="true"][data-cabpick="demo"]{ color:var(--gold-ink); background:color-mix(in srgb,var(--gold) 16%,var(--card))} /* Состояние автомата: три строки над вкладками кабинета. Плотнее, чем блок сопровождения позиции, — это сводка, а не разбор. */ .autoblock{margin:0 0 12px} /* Метка «демо» в заголовке блока автомата и предупреждение под ним. Золото здесь означает то же, что везде в проекте: «прочти, прежде чем поверить», — а не ошибку. Демо-результат не ошибка, он просто ничего не доказывает. */ .cpanel h3 .tag.demo{margin-left:7px; padding:2px 7px; border-radius:6px; font:600 10.5px/1.5 var(--mono); letter-spacing:.08em; vertical-align:2px; color:var(--gold-ink); background:color-mix(in srgb,var(--gold) 16%,transparent)} .cnote.warn{margin-top:11px; padding:10px 12px; border-radius:10px; color:var(--gold-ink); background:color-mix(in srgb,var(--gold) 8%,transparent); border:1px solid color-mix(in srgb,var(--gold) 22%,transparent)}