/* Trading Journal — палитра и типографика. Две темы: светлая (по умолчанию) и тёмная — data-theme="dark" на . Тёмная собрана по макету из папки design: графитовая база, белый свет за интерфейсом, полупрозрачные карточки, яркие цвета результата. Шрифты: Geist (интерфейс) + Archivo (цифры). */ :root{ /* общий шаг между блоками и общая кривая — ими живут и «Огляд», и «Журнал» */ --stack:18px; --ease:cubic-bezier(.16,1,.3,1); color-scheme:light; --bg:#f2f4f8; --panel:#ffffff; --panel-2:#f6f8fb; --line:#dde3ec; --line-soft:#eaeef5; --text:#171b24; --dim:#5a6373; --faint:#99a2b3; --accent:#2b62e3; --accent-ink:#ffffff; --accent-soft:rgba(43,98,227,.09); --up:#128a53; --down:#c94430; --be:#9c7514; --up-soft:rgba(18,138,83,.10); --down-soft:rgba(201,68,48,.10); --be-soft:rgba(156,117,20,.12); --up-glow:transparent; --down-glow:transparent; --be-glow:transparent; --shadow:0 1px 2px rgba(23,27,36,.05),0 6px 20px -12px rgba(23,27,36,.12); --shadow-pop:0 24px 60px -24px rgba(23,27,36,.28); --shadow-badge:0 6px 24px rgba(23,27,36,.14); --overlay:rgba(23,27,36,.42); --overlay-strong:rgba(23,27,36,.82); --card:var(--panel); --side-bg:var(--panel); --glow:none; --card-lip:0 0 transparent; --ov-eq-line:var(--accent); --ov-eq-fill:rgba(43,98,227,.12); --ov-grid:var(--line-soft); /* оттенки макета: оболочка блока, сегменты периода, пустой день, полоски разреза */ --glow:radial-gradient(64% 46% at 18% -6%,rgba(43,98,227,.11),transparent 70%), radial-gradient(52% 40% at 96% 4%,rgba(23,27,36,.07),transparent 72%); --grid-line:rgba(23,27,36,.07); --grid-step:64px; --shell-bg:var(--panel-2); --seg-bg:var(--card); --seg-on-bg:var(--panel-2); --seg-on-line:var(--line); --seg-on-lip:0 0 transparent; --day-off-bg:var(--panel-2); --day-off-ink:var(--faint); --day-off-ink-2:var(--faint); --ghost:var(--faint); --ghost-2:var(--faint); --bar-track:var(--line-soft); --bar-fill:var(--dim); --side-line:var(--line); --mark-bg:var(--panel-2); --mark-line:var(--line); --sans:"Geist","Segoe UI",system-ui,sans-serif; --mono:"Archivo","Geist","Segoe UI",system-ui,sans-serif; --r:10px; --r-sm:8px; } /* Тёмная — оформление макета */ :root[data-theme="dark"]{ /* палитра экрана входа (design/auth, «ночь»): графит, тонкие волоски, мятный акцент */ color-scheme:dark; --bg:#050505; --panel:#0d0d0e; --panel-2:#111112; --line:rgba(255,255,255,.08); --line-soft:rgba(255,255,255,.045); --text:#f2f2f3; --dim:#8c8c90; --faint:#5c5c61; --accent:#40e094; --accent-ink:#06130d; --accent-soft:rgba(64,224,148,.12); --up:#40e094; --down:#ff6e60; --be:#efc258; --up-soft:rgba(64,224,148,.13); --down-soft:rgba(255,110,96,.13); --be-soft:rgba(239,194,88,.12); --up-glow:transparent; --down-glow:transparent; --be-glow:transparent; /* поверхности сплошные, как в макете входа */ --card:#0d0d0e; --card-lip:0 0 transparent; --ov-eq-line:#d4d6da; --ov-eq-fill:rgba(255,255,255,.10); --ov-grid:rgba(255,255,255,.05); --side-bg:#0a0a0b; /* задний план: два мягких пятна — мятное сверху слева и холодное справа */ --glow:radial-gradient(58% 44% at 16% -4%,rgba(64,224,148,.12),transparent 68%), radial-gradient(48% 38% at 98% 6%,rgba(255,255,255,.07),transparent 72%); --grid-line:rgba(255,255,255,.05); --grid-step:64px; --shell-bg:#0a0a0b; --seg-bg:#111112; --seg-on-bg:#161617; --seg-on-line:rgba(255,255,255,.08); --seg-on-lip:0 0 transparent; --day-off-bg:#0a0a0b; --day-off-ink:#3c3c40; --day-off-ink-2:#313135; --ghost:#5c5c61; --ghost-2:#4a4a4f; --bar-track:rgba(255,255,255,.06); --bar-fill:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.20)); --side-line:rgba(255,255,255,.07); --mark-bg:#161617; --mark-line:rgba(255,255,255,.08); --shadow:0 40px 90px -22px rgba(0,0,0,.55); --shadow-pop:0 50px 100px -30px rgba(0,0,0,.6); --shadow-badge:0 6px 24px rgba(0,0,0,.4); --overlay:rgba(0,0,0,.62); --overlay-strong:rgba(0,0,0,.9); --r:14px; --r-sm:10px; } *{box-sizing:border-box} [hidden]{display:none !important} /* полоса прокрутки зарезервирована — при переходе между разделами меню не дёргается */ html{-webkit-text-size-adjust:100%;overflow-y:scroll;scrollbar-gutter:stable} /* световой слой: мягкие светлые пятна за интерфейсом (только в тёмной теме) */ body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--glow)} /* миллиметровка за интерфейсом: собственный слой ПОД сайдбаром и контентом, поэтому сквозь них не проступает (body::after занят плёночным зерном) */ .side,.main{position:relative;z-index:1} /* ================= фоновые ломаные ================= Слой под контентом: линия рисуется слева направо, замирает и тает. */ #bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} #bgfx svg{position:absolute;overflow:visible} #bgfx path{fill:none;stroke:var(--up);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1;opacity:.5; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--up) 40%,transparent)); animation:sparkDraw 1.9s cubic-bezier(.16,1,.3,1) forwards,sparkFade 1.5s 2.8s ease forwards} #bgfx .tip{fill:var(--up);opacity:0; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--up) 55%,transparent)); animation:sparkTip .5s 1.75s ease forwards,sparkFade 1.5s 2.8s ease forwards} @keyframes sparkDraw{to{stroke-dashoffset:0}} @keyframes sparkTip{to{opacity:.75}} @keyframes sparkFade{to{opacity:0}} @media (prefers-reduced-motion:reduce){#bgfx{display:none}} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; line-height:1.55;display:flex;min-height:100vh;transition:background .25s,color .25s} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} /* полоса прокрутки тонкая и без системных стрелок — иначе рядом с панелью получается частокол из полос */ *{scrollbar-width:thin;scrollbar-color:var(--line) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-button{display:none;width:0;height:0} ::-webkit-scrollbar-corner{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px; border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box} ::-webkit-scrollbar-track{background:transparent} /* пока открыта выезжающая панель, страница за ней не прокручивается — и своей полосой не мозолит глаза */ html:has(.pnl-wrap){overflow-y:hidden} /* ================= sidebar ================= */ .side{width:216px;flex:none;border-right:1px solid var(--side-line);padding:18px 14px; display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh;background:var(--side-bg); font-weight:400;line-height:1.5;overflow-y:auto;scrollbar-width:none} /* смуга прокрутки в лівому меню не потрібна: воно коротке, а на низькому екрані докручується колесом. Разом зі смугою прибрано й місце під неї (scrollbar-gutter) — інакше праворуч лишалась порожня колонка. */ .side::-webkit-scrollbar{width:0;height:0} .brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px; letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:0 6px} .brand .dot{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 0 3px var(--up-soft)} .newtrade{background:var(--accent);color:var(--accent-ink,#fff);border-radius:var(--r-sm);padding:10px 12px; font-weight:600;font-size:14px;text-align:center;transition:filter .15s} .newtrade:hover{filter:brightness(1.12)} .nav{display:flex;flex-direction:column;gap:2px} .nav a{padding:8px 11px;border-radius:var(--r-sm);color:var(--dim);font-size:14px;transition:background .12s,color .12s} .nav a:hover{color:var(--text);background:var(--panel-2)} .nav a.on{color:var(--text);background:var(--panel-2);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)} .side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px} .ghost{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;color:var(--dim);font-size:13px;text-align:center} .ghost:hover{color:var(--text);border-color:var(--faint)} #themeBtn{display:flex;align-items:center;justify-content:center;gap:7px} /* ================= main ================= */ .main{flex:1;min-width:0;padding:clamp(16px,3vw,36px)} /* первая заставка, пока грузятся сделки: наш же знак, тихо пульсує замість порожньої сторінки. render() перезапише #main і сам його прибере. */ /* fixed — щоб центрувати рівно по екрану, а не в зоні праворуч від сайдбара (там через ширину .side і padding .main центр «плив») */ .page-loader{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5} .pl-logo{width:56px;height:auto;aspect-ratio:902/1315;color:var(--text);display:block;animation:plPulse 1.4s ease-in-out infinite} @keyframes plPulse{0%,100%{opacity:.32;transform:scale(.92)} 50%{opacity:1;transform:scale(1)}} @media (prefers-reduced-motion:reduce){.pl-logo{animation:none;opacity:.8}} /* содержимое держим по центру свободного места, а не у левого края */ .page{max-width:1320px;margin:0 auto} .vhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px} .vhead h1{font-size:clamp(22px,3.2vw,28px);font-weight:650;letter-spacing:-.02em;margin:0} .vhead .sub{color:var(--faint);font-family:var(--mono);font-size:12px;letter-spacing:.06em} .vhead .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .pill{border:1px solid var(--line);background:var(--panel);color:var(--dim);border-radius:20px; font-family:var(--mono);font-size:12px;padding:6px 13px;transition:color .12s,border-color .12s} .pill:hover{color:var(--text);border-color:var(--faint)} .pill.on{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:500} .navbtn{border:1px solid var(--line);background:var(--panel);color:var(--dim);border-radius:var(--r-sm); padding:6px 13px;font-size:15px;line-height:1} .navbtn:hover{color:var(--text);border-color:var(--faint)} .perlabel{font-family:var(--mono);font-size:14px;letter-spacing:.04em;min-width:150px;text-align:center;font-weight:500} /* ============ шапка журнала: вид · який місяць · окрема дія ============ три зоны вместо одного ряда кнопок, чтобы было видно, что с чем связано */ .jhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:var(--stack)} .jhead h1{font-size:clamp(22px,3.2vw,28px);font-weight:650;letter-spacing:-.02em;margin:0} .jhead .seg-tabs{margin-left:0} .jhead .tools{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap} /* поки в журналі нема чим ділитись, гнізда для кнопок теж нема */ .jhead .tools:empty{display:none} /* навигация по месяцу — один узел в общей капсуле */ .mnav{display:flex;align-items:center;gap:2px;padding:4px;border-radius:13px; border:1px solid var(--line-soft);background:var(--seg-bg);box-shadow:var(--card-lip); /* в шапке карточки-списка вокруг стоят капс и разрядка — они сюда не наследуются */ text-transform:none;letter-spacing:normal;font-weight:400} /* каждая — именно кнопка: своя поверхность и рамка, а не просто надпись */ .mnav button{background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--text); font:inherit;cursor:pointer; transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)} .mnav button:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)} .mnav button:active{transform:scale(.96)} .mnav .nb{padding:5px 11px;font-size:16px;line-height:1.1} .mnav .lb{display:flex;align-items:center;gap:7px;justify-content:center;padding:6px 12px; font-family:var(--mono);font-size:13px;letter-spacing:.03em;min-width:158px;font-variant-numeric:tabular-nums} .mnav .sep{width:1px;align-self:stretch;margin:3px 5px;background:var(--line-soft);flex:none} .mnav .tb{padding:6px 13px;font-size:12.5px} /* разовое действие живёт отдельно от навигации */ .jact{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:11px; border:1px solid var(--line);background:var(--panel);color:var(--dim);font-size:13px; transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)} .jact:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)} @media(max-width:760px){ .jhead .tools{width:100%;margin-left:0} .mnav{flex:1;justify-content:center} .mnav .lb{min-width:0;flex:1} } /* ---------- статистика: одна лента вместо коробок ---------- */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr)); background:var(--panel);border:1px solid var(--line);border-radius:var(--r); margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)} .kpi{padding:13px 16px 12px;border-right:1px solid var(--line-soft);min-width:0} .kpi:last-child{border-right:none} .kpi .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap} .kpi .v{font-family:var(--mono);font-size:20px;font-weight:500;margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kpi .v.small{font-size:14.5px;letter-spacing:-.02em} /* цифры результата слегка отсвечивают своим цветом */ .pos{color:var(--up);text-shadow:0 0 12px var(--up-glow)} .neg{color:var(--down);text-shadow:0 0 12px var(--down-glow)} .beclr{color:var(--be);text-shadow:0 0 12px var(--be-glow)} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);container-type:inline-size} /* один шаг между блоками: карточка, оболочка графика и сетки живут одной сеткой */ .card+.card,.kpis+.card,.split+.card,.card+.split, .jgrid+.split,.jgrid+.card,.shell+.card,.card+.shell, .jgrid+.shell,.kpis+.shell{margin-top:var(--stack)} .card h3{margin:0;padding:12px 16px;border-bottom:1px solid var(--line-soft); font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim); display:flex;align-items:center;gap:10px;flex-wrap:wrap} .card h3 .hr{margin-left:auto;display:flex;gap:8px;align-items:center} .card .in{padding:16px} svg.chart{display:block;width:100%;height:auto} .hint{color:var(--faint);font-size:13px} /* ---------- сделки ---------- */ .tlist{display:flex;flex-direction:column} .trow{display:grid;grid-template-columns:118px minmax(96px,auto) minmax(0,1fr) auto auto auto;gap:10px;align-items:center; padding:11px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer;font-size:14px;transition:background .1s} .trow>*{min-width:0} .trow:last-child{border-bottom:none} .trow:hover{background:var(--panel-2)} .trow .d{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap} .trow .p{font-family:var(--mono);font-weight:500;white-space:nowrap} .trow .info{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:13px} .badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:2px 9px;border-radius:20px;white-space:nowrap} .badge.win{background:var(--up-soft);color:var(--up)} .badge.loss{background:var(--down-soft);color:var(--down)} .badge.be{background:var(--be-soft);color:var(--be)} .badge.long{background:var(--accent-soft);color:var(--accent)} .badge.short{background:var(--down-soft);color:var(--down)} .trow .r{font-family:var(--mono);font-weight:600;text-align:right;min-width:56px;font-variant-numeric:tabular-nums} .empty{padding:28px 16px;color:var(--faint);font-size:14px;text-align:center} /* узкая карточка (панель дня, половина дашборда) — строка в три ряда: дата и результат, инструмент и підсумок, під ними сетап із сесією */ @container (max-width:560px){ .trow{grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:11px 14px} .trow > .d{grid-column:1;grid-row:1} .trow > .badge{grid-column:2;grid-row:1;justify-self:end} .trow > .p{grid-column:1;grid-row:2;justify-self:start} .trow > .r{grid-column:2;grid-row:2;justify-self:end} .trow > .info{grid-column:1/-1;grid-row:3;font-size:12px;color:var(--faint)} .trow > .info:empty{display:none} .trow > .badge.rev,.trow > .badge.cont{display:none} } /* ================= КАЛЕНДАРЬ — главный элемент ================= */ /* переход между разделами: содержимое всплывает, а не подменяется рывком */ @keyframes pageIn{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}} .page.enter > *{animation:pageIn .3s cubic-bezier(.16,1,.3,1) both} @media (prefers-reduced-motion:reduce){.page.enter > *{animation:none}} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:16px} .cal .wd{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--faint); text-align:center;text-transform:uppercase;padding:2px 0 6px} .cal .day{min-height:98px;border:1px solid var(--line);border-radius:var(--r-sm); padding:8px 9px;cursor:pointer;background:var(--panel-2);position:relative; display:flex;flex-direction:column;transition:border-color .12s,transform .08s} /* День без угод виден только рамкой — на светлых темах её надо усилить, иначе сетка месяца почти растворяется в карточке */ :root:not([data-theme="dark"]) .cal .day:not(.up):not(.down):not(.flat):not(.off){ border-color:color-mix(in srgb, var(--line) 45%, var(--dim)); background:color-mix(in srgb, var(--panel-2) 82%, var(--line))} .cal .day:hover{border-color:var(--faint)} .cal .day:active{transform:scale(.98)} .cal .day.off{opacity:0;pointer-events:none;border:none} .cal .day.up{background:var(--up-soft);border-color:transparent} .cal .day.down{background:var(--down-soft);border-color:transparent} .cal .day.flat{background:var(--be-soft);border-color:transparent} .cal .day.up:hover,.cal .day.down:hover,.cal .day.flat:hover{border-color:var(--faint)} .cal .day.sel{border-color:var(--accent) !important;box-shadow:0 0 0 1px var(--accent)} .cal .day .n{font-family:var(--mono);font-size:11px;color:var(--faint)} .cal .day.today .n{color:var(--accent);font-weight:600} .cal .day .res{font-family:var(--mono);font-size:15px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums} .cal .day .marks{display:flex;flex-wrap:wrap;gap:3px;margin-top:auto;padding-top:5px} /* значки сделок: TP / SL / BE, рамка = вход против биаса (Reversal) */ .mk{font-family:var(--mono);font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.04em; line-height:1;padding:3px 4px;border-radius:3px;border:1px solid transparent} .mk.tp{background:var(--up-soft);color:var(--up)} .mk.sl{background:var(--down-soft);color:var(--down)} .mk.be{background:var(--be-soft);color:var(--be)} .mk.tp.rev{border-color:var(--up)} .mk.sl.rev{border-color:var(--down)} .mk.be.rev{border-color:var(--be)} .callegend{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px; padding:0 16px 14px;font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.04em} .callegend .lgend-rev{display:inline-flex;align-items:center;gap:5px;margin-left:auto} /* бейджи направления входа */ .badge.rev{background:var(--be-soft);color:var(--be)} .badge.cont{background:var(--panel-2);color:var(--dim)} /* журнал: календарь + панель дня */ .jgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:14px;align-items:stretch; /* обе половины одной высоты: переключение «Календар · Список» не должно дёргать страницу вверх-вниз */ --jpane:clamp(520px,68vh,760px)} .jpane{min-height:var(--jpane)} .jpane-list{height:var(--jpane);display:flex;flex-direction:column} /* список длиннее карточки — прокручиваем его внутри, а не тянем страницу */ .jpane-list .mtwrap{flex:1;min-height:0;overflow:auto} /* шапка карточки журнала: та же линия, что и у заголовков других карточек */ .panehead{display:flex;justify-content:flex-end;align-items:center; padding:9px 12px;border-bottom:1px solid var(--line-soft);min-height:47px} .jpane-cal .panehead+.cal{padding-top:12px} .jpane-list h3{padding-right:12px} .jpane-list h3 .hr{display:flex;align-items:center;gap:12px} .jpane-list h3 .hr em{font-style:normal;color:var(--faint)} /* гнездо панели дня: панель лежит в нём абсолютом и растёт только по содержимому, но не выше левой половины — длинная угода не тянет страницу вниз, короткая не оставляет под собой пустоту */ .dayslot{position:relative} .dayslot > .daypanel{position:absolute;top:0;left:0;right:0;max-height:100%; display:flex;flex-direction:column;overflow:hidden} .daypanel > h3,.daypanel .chips,.daypanel .mistline,.daypanel .addday{flex:none} .daypanel .tlist{min-height:0;overflow-y:auto} @media(max-width:1020px){ .jgrid{grid-template-columns:minmax(0,1fr)} .dayslot{position:static;min-height:0} .dayslot > .daypanel{position:static;display:block;overflow:visible} .daypanel .tlist{overflow:visible} } .split{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} @media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}} .daypanel .chips{display:flex;flex-wrap:wrap;gap:8px;padding:16px 16px 4px} .chip{font-family:var(--mono);font-size:12px;padding:5px 12px;border-radius:20px; background:var(--panel-2);color:var(--dim);border:1px solid var(--line-soft)} .chip b{color:var(--text);font-weight:600} .chip.pos{color:var(--up);border-color:transparent;background:var(--up-soft)} .chip.neg{color:var(--down);border-color:transparent;background:var(--down-soft)} .daypanel .addday{margin:12px 16px 16px;display:block;width:calc(100% - 32px); background:var(--accent);color:var(--accent-ink,#fff);border-radius:var(--r-sm); padding:11px;font-weight:600;font-size:14px;text-align:center;transition:filter .15s} .daypanel .addday:hover{filter:brightness(1.12)} .daypanel .mistline{padding:0 16px 12px;font-size:13px;color:var(--dim)} .daypanel .mistline .neg{font-weight:500} /* сделка в панели дня: строка, по клику карточка выезжает справа. Две строки, а не одна: панель дня узкая, в один ряд инструмент, время, метки и процент не помещаются. Места у детей заданы явно — «Поделиться» приходит сюда позже, из sharelink.js, и не должно ничего сдвинуть. */ .dtrade{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 8px; align-items:center;width:100%;padding:11px 16px;text-align:left;background:none; border:none;border-bottom:1px solid var(--line-soft);cursor:pointer; color:inherit;font:inherit;transition:background .15s} .dtrade:last-of-type{border-bottom:none} .dtrade:hover{background:var(--panel-2)} .dtrade:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .dtrade .p{font-family:var(--mono);font-weight:500;grid-column:1;grid-row:1;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .dtrade .d{font-family:var(--mono);font-size:11.5px;color:var(--faint); grid-column:1;grid-row:2;white-space:nowrap} .dtrade .badge{grid-row:1;justify-self:end} .dtrade .r{font-family:var(--mono);font-weight:600;grid-column:3;grid-row:2;justify-self:end; font-variant-numeric:tabular-nums;white-space:nowrap} .dtrade .sh-row{grid-column:2;grid-row:2;justify-self:end} /* месяц таблицей */ .mtwrap{overflow-x:auto} .mtable{width:100%;border-collapse:collapse;font-size:13px} .mtable th{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase; color:var(--faint);font-weight:400;text-align:left;padding:10px 12px;white-space:nowrap; border-bottom:1px solid var(--line-soft)} .mtable td{padding:9px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap} .mtable tbody tr{cursor:pointer;transition:background .15s} .mtable tbody tr:hover{background:var(--panel-2)} .mtable tbody tr.sel{background:var(--accent-soft)} .mtable tbody tr:last-child td{border-bottom:none} .mtable .dt{font-family:var(--mono);color:var(--dim)} .mtable .dt i{font-style:normal;color:var(--faint);margin-left:7px;font-size:11.5px} .mtable .num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums} .mtable td.wide{max-width:180px;overflow:hidden;text-overflow:ellipsis} @container (max-width:640px){ .mtable th.wide,.mtable td.wide{display:none} } /* лучший / худший */ .bw{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:10px;padding:16px} .bw .cell{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:11px 13px;background:var(--panel-2)} .bw .cell .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:7px} .bw .cell .row{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:2px 0} .bw .cell .row .v{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums} .bw .cell .row .k{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- фильтры ---------- */ .filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px} .filters select,.filters input{background:var(--panel);border:1px solid var(--line);color:var(--text); border-radius:var(--r-sm);font-family:var(--mono);font-size:12px;padding:6px 9px} .filters select:hover{border-color:var(--faint)} .filters .clear{color:var(--faint);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em} .filters .clear:hover{color:var(--text)} /* ---------- аналитика ---------- */ .dims{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px} .ahead{display:grid;grid-template-columns:minmax(120px,1.4fr) 60px 150px 90px 80px;gap:12px;padding:10px 16px; border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .ahead span:nth-child(n+2){text-align:right} .arow{display:grid;grid-template-columns:minmax(120px,1.4fr) 60px 150px 90px 80px;gap:12px;align-items:center; padding:11px 16px;border-bottom:1px solid var(--line-soft);font-size:14px} .arow:last-child{border-bottom:none} .arow .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .arow .n,.arow .rr{font-family:var(--mono);font-size:13px;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums} .arow .netr{font-family:var(--mono);font-weight:600;text-align:right;font-variant-numeric:tabular-nums} .wrbar{display:flex;align-items:center;gap:8px} .wrbar .track{flex:1;height:5px;border-radius:3px;background:var(--line-soft);overflow:hidden} .wrbar .track i{display:block;height:100%;background:var(--accent);border-radius:3px} .wrbar b{font-family:var(--mono);font-size:12px;font-weight:500;min-width:48px;text-align:right} @media(max-width:760px){ .arow,.ahead{grid-template-columns:minmax(0,1fr) 50px 80px} .arow .rr,.ahead span:nth-child(3),.ahead span:nth-child(4){display:none} .arow .wrbar .track{display:none} } /* ---------- таблицы ---------- */ /* таблицу на узком экране листаем внутри карточки, страница вбок не едет */ .card>table.simple{display:block;overflow-x:auto} table.simple{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:340px} table.simple.mini{min-width:0;table-layout:auto} table.simple th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint); text-align:right;padding:10px 16px;border-bottom:1px solid var(--line-soft);font-weight:500} table.simple td{padding:10px 16px;border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:13px;color:var(--dim);text-align:right} table.simple th:first-child,table.simple td:first-child{text-align:left} table.simple td:first-child{color:var(--text);font-family:var(--sans);font-weight:500} table.simple tr:last-child td{border-bottom:none} table.simple tr.click{cursor:pointer} table.simple tr.click:hover td{background:var(--panel-2)} /* кварталы */ .qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px} .qcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)} .qcard h4{margin:0;padding:11px 16px;border-bottom:1px solid var(--line-soft); font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between} .qcard h4 .netr{font-weight:600} .qcard .rows{padding:10px 16px 14px} .qcard .qr{display:flex;justify-content:space-between;padding:4px 0;font-size:13.5px;color:var(--dim)} .qcard .qr b{font-family:var(--mono);font-weight:500;color:var(--text)} .qcard .mbar{display:grid;grid-template-columns:44px 1fr 58px;gap:8px;align-items:center;padding:3px 0;font-family:var(--mono);font-size:11px;color:var(--faint)} .qcard .mbar .track{height:5px;background:var(--line-soft);border-radius:3px;position:relative;overflow:hidden} .qcard .mbar .track i{position:absolute;top:0;bottom:0;border-radius:3px} .qcard .mbar .val{text-align:right;font-variant-numeric:tabular-nums} /* ================= модалка ================= */ /* Базовий шар у діалога і в бічної панелі один: хто відкрився останнім, той і зверху (шар проставляє ui.js при відкритті). Обидва порядки живі — діалог відкривають з панелі, панель із діалога. */ .modal{position:fixed;inset:0;background:var(--overlay);z-index:75;display:flex; align-items:flex-start;justify-content:center;overflow:auto;padding:4vh 14px;backdrop-filter:blur(3px)} .modal-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:100%;max-width:860px;margin-bottom:6vh;box-shadow:var(--shadow-pop)} .m-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line-soft)} .m-head h2{margin:0;font-size:18px;font-weight:650} .m-head .x{margin-left:auto;color:var(--faint);font-size:20px;line-height:1;padding:2px 8px;border-radius:6px} .m-head .x:hover{color:var(--text);background:var(--panel-2)} .m-body{padding:20px} /* форма */ .fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px} @media(max-width:640px){.fgrid{grid-template-columns:minmax(0,1fr)}} .f{display:flex;flex-direction:column;gap:9px} .f.full{grid-column:1/-1} .f label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .f input,.f textarea,.f select{background:var(--bg);border:1px solid var(--line);color:var(--text); border-radius:var(--r-sm);padding:9px 11px;font:inherit;font-size:14px} .f textarea{min-height:72px;resize:vertical} .f input:focus,.f textarea:focus{border-color:var(--accent);outline:none} .seg{display:flex;gap:6px;flex-wrap:wrap} .seg button{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 15px;font-family:var(--mono);font-size:12px;color:var(--dim);transition:all .12s} .seg button.on{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600} .seg button.on.win{background:var(--up);border-color:var(--up);color:#fff} .seg button.on.loss{background:var(--down);border-color:var(--down);color:#fff} .seg button.on.bek{background:var(--be);border-color:var(--be);color:#1a1408} .shots-edit{display:flex;flex-direction:column;gap:8px} .shot-row{display:grid;grid-template-columns:88px 1fr 62px 30px;gap:8px;align-items:center} .shot-row select{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:var(--r-sm);padding:8px;font-family:var(--mono);font-size:12px} .shot-row .fname{font-family:var(--mono);font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shot-row img{width:62px;height:38px;object-fit:cover;border-radius:4px;border:1px solid var(--line);cursor:zoom-in} .shot-row .del{color:var(--faint);font-size:16px} .shot-row .del:hover{color:var(--down)} .addshot{border:1px dashed var(--line);border-radius:var(--r-sm);padding:11px;color:var(--dim);font-size:13px;text-align:center;transition:border-color .12s,color .12s} .addshot:hover{border-color:var(--accent);color:var(--text)} .addshot b{color:var(--text)} .m-foot{display:flex;gap:10px;padding:15px 20px;border-top:1px solid var(--line-soft)} .btn{border:1px solid var(--line);background:var(--panel-2);border-radius:var(--r-sm);padding:9px 18px;font-size:14px;font-weight:500} .btn:hover{border-color:var(--faint)} .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff)} .btn.primary:hover{filter:brightness(1.12)} .btn.danger{color:var(--down)} .btn.danger:hover{border-color:var(--down)} .m-foot .sp{flex:1} /* ============ карточка сделки в выезжающей панели ============ четыре блока с hairline-границами вместо ровной сетки одинаковых плиток */ /* Усе в шапці стоїть по одному центру. Раніше було flex-start: назва, процент і хрестик чіплялись за верх, а кнопка «поділитись» — за центр, і рядок виглядав розсипаним. */ .thead{align-items:center;gap:12px} .thead .ttl{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0} .thead .ttl h2{margin:0;font-size:19px;font-weight:650} .thead .ttl .dt{width:100%;font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.03em} .thead .res{margin-left:auto;font-family:var(--mono);font-size:26px;font-weight:500;letter-spacing:-.03em; line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap} .thead .x{margin-left:0;align-self:center} .m-body.trade{padding:0} /* итог сделки: та же hairline-лента, что и показатели на «Огляді» */ .tstats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line-soft)} .tstats .st{padding:12px 16px 11px;border-right:1px solid var(--line-soft);min-width:0} .tstats .st:last-child{border-right:none} /* Підписи в картці — акцентом. Сірим по темному їх доводилось вишукувати: видно було значення, а що це за значення — ні. Колір тут працює як заголовок, тому яскравий саме підпис, а не сам текст під ним. */ .tstats .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);white-space:nowrap} .tstats .val{font-family:var(--mono);font-size:18px;margin-top:8px;line-height:1; font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis} .tsec{padding:14px 20px 15px;border-bottom:1px solid var(--line-soft)} .tsec:last-child{border-bottom:none} /* Заголовок розділу — плашкою, підзаголовок усередині — рядком із крапкою. Доти й те, й те було однаковим дрібним зеленим написом, і «Що записав» ніяк не відрізнявся від «Як заходив», який лежить усередині нього. Плашка вужча за колонку і не тягнеться на всю ширину: заголовок — це мітка розділу, а не смуга. */ .tsec h3{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px; padding:5px 11px 5px 8px;border:none;border-radius:8px; background:var(--accent-soft);color:var(--accent); font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; font-weight:500} .tsec h3::before{content:"";width:3px;height:11px;border-radius:2px;background:var(--accent)} .tfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:0 24px} .tfields .fr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0; border-bottom:1px solid var(--line-soft)} .tfields .fr .l{color:var(--accent);font-size:12.5px;white-space:nowrap} .tfields .fr .v{font-size:13.5px;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere} .tnote+.tnote{margin-top:14px} .tnote .l{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:5px} .tnote .l::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor; opacity:.65;flex:none} .tfields .fr .v.none,.tnote .v.none{color:var(--faint);font-weight:400} /* чего в сделке не записано — одной строкой, а не пустым полем на каждое */ .tempty{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--faint)} .tsec > .tempty:first-of-type:not(:nth-child(2)){margin-top:0} .tnote .v{font-size:13.5px;line-height:1.55;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere} .pnl .m-foot{position:sticky;bottom:0;background:var(--card);z-index:1} @media(max-width:620px){ .tstats .st{padding:11px 13px 10px} } /* просмотр сделки: старая сетка полей — осталась для отчётов */ .dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px} .dgrid .f2{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:9px 12px;background:var(--panel-2)} .dgrid .f2 .l{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .dgrid .f2 .v{font-size:14px;margin-top:3px;font-weight:500} .dtext{margin-bottom:14px} .dtext .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:5px} .dtext .v{white-space:pre-wrap;color:var(--dim);font-size:14px;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:11px 13px} .charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px} .chart-item .l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent);margin-bottom:4px;text-transform:uppercase} .chart-item img{width:100%;border-radius:var(--r-sm);border:1px solid var(--line);cursor:zoom-in;display:block} /* lightbox Выше всего, что открывается поверх страницы: скрин раскрывают из карточки сделки, а её могли открыть из диалога. Ниже вопроса «точно удалить?» — тот перекрывает всё. */ .lightbox{position:fixed;inset:0;background:var(--overlay-strong);z-index:210;display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:20px} .lightbox img{max-width:96vw;max-height:92vh;border-radius:6px} /* импорт */ .map-grid{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;align-items:center;margin:14px 0} .map-grid .k{font-family:var(--mono);font-size:12px;color:var(--dim)} .map-grid select{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:var(--r-sm);padding:6px 8px;font-family:var(--mono);font-size:12px} /* ---------- мобильный ---------- */ @media(max-width:860px){ body{flex-direction:column} .side{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px; border-right:none;border-bottom:1px solid var(--line);padding:12px 14px} .nav{flex-direction:row;flex-wrap:wrap;order:3;width:100%} .nav a{padding:6px 10px;font-size:13px} .nav a.on{box-shadow:inset 0 -2px 0 var(--accent)} .side-foot{margin-top:0;flex-direction:row;margin-left:auto;align-items:center} #themeBtn span{display:none} .newtrade{padding:8px 12px} .trow{grid-template-columns:80px 1fr auto auto;gap:8px;padding:10px 12px} .trow .info{display:none} .cal{gap:4px;padding:12px} .cal .day{min-height:70px;padding:5px 6px} .cal .day .res{font-size:12px} } @media(prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} } /* ---------- секции формы ---------- */ .fsec{grid-column:1/-1;display:flex;align-items:center;gap:12px; font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent); padding-top:14px;margin-top:2px;border-top:1px solid var(--line-soft)} .fsec:first-child{padding-top:0;border-top:none;margin-top:0} .fsec::after{content:"";flex:1;height:1px;background:var(--line-soft)} /* ---------- скриншоты: слот на каждый таймфрейм ---------- */ .tfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px} .tfslot{border:1px dashed var(--line);border-radius:var(--r-sm);overflow:hidden; display:flex;flex-direction:column;background:var(--panel-2);transition:border-color .12s} .tfslot .tfl{display:flex;align-items:center;justify-content:space-between;padding:6px 10px; font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase} .tfslot .tfl .rm{color:var(--faint);font-size:14px;line-height:1;padding:0 2px;border-radius:4px} .tfslot .tfl .rm:hover{color:var(--down)} .tfslot .drop{flex:1;min-height:72px;display:flex;align-items:center;justify-content:center; color:var(--faint);font-size:22px;cursor:pointer} .tfslot .drop:hover{color:var(--accent)} .tfslot img{width:100%;height:86px;object-fit:cover;display:block;cursor:zoom-in} .tfslot.filled{border-style:solid;border-color:var(--line)} .tfslot.filled .tfl{color:var(--accent)} .tfslot.active{border-color:var(--accent);border-style:solid} .tfhint{grid-column:1/-1;font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.04em} /* ---------- метки секций дашборда ---------- */ .seclab{display:flex;align-items:flex-end;gap:16px;margin:0 0 16px; padding-bottom:12px;border-bottom:2px solid var(--line)} .seclab .t{min-width:0} .seclab .tag{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--accent);margin-bottom:4px} .seclab h2{margin:0;font-size:clamp(24px,3.6vw,34px);font-weight:700;letter-spacing:-.025em;line-height:1.05} .seclab .big{margin-left:auto;font-family:var(--mono);font-size:clamp(22px,3.4vw,32px); font-weight:600;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap} .seclab.year{margin-top:56px} /* ---------- слот таймфрейма: кнопка файла + режим вставки ---------- */ .tfslot .tfl .pick{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--faint); border:1px solid var(--line);border-radius:3px;padding:1px 5px;text-transform:lowercase} .tfslot .tfl .pick:hover{color:var(--accent);border-color:var(--accent)} .tfslot .drop .ready{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--accent); border:1px dashed var(--accent);border-radius:4px;padding:3px 8px} .tfslot.active{background:var(--accent-soft)} .tfhint b{color:var(--text)} /* ---------- разбор месяца ---------- */ .m-body.rep{max-height:none} .rep .kpis{margin-bottom:14px} .rep-sec{display:flex;align-items:center;gap:12px;margin:22px 0 10px; font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .rep-sec::after{content:"";flex:1;height:1px;background:var(--line)} .rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;align-items:start} .rep-card{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} .rep-card h4{margin:0;padding:9px 12px;border-bottom:1px solid var(--line-soft); font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} table.simple.mini th{padding:7px 12px;font-size:9px} table.simple.mini td{padding:7px 12px;font-size:12.5px} .tick{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;padding:1px 5px;border-radius:3px; text-transform:uppercase;vertical-align:middle} .tick.best{background:var(--up-soft);color:var(--up)} .tick.worst{background:var(--down-soft);color:var(--down)} .go{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.06em;opacity:0} tr.click:hover .go{opacity:1;color:var(--accent)} .modal-box:has(.rep){max-width:960px} #hiddenBtn.on{color:var(--accent);border-color:var(--accent)} /* ---------- тейк рукой и скип ---------- Тейк рукой — тот же зелёный, но пунктирная рамка: деньги те же, а выход другой. Скип — серый и приглушённый: сделки не было, и он не должен спорить за внимание с настоящими. */ .badge.hand,.mk.tp.hand{border:1px dashed var(--up)} .badge.skip,.mk.skip{background:var(--panel-3);color:var(--faint)} .mk.skip{padding:3px 6px} .dtrade.skip,tr.skip{opacity:.72} .seg button.on.skipk{background:var(--panel-3);border-color:var(--faint);color:var(--dim)} .fhint{font-size:11.5px;color:var(--faint);margin-top:4px;display:block} /* ---------- BE+ отдельным цветом ---------- */ .badge.beplus{background:var(--accent-soft);color:var(--accent)} .mk.beplus{background:var(--accent-soft);color:var(--accent)} .mk.beplus.rev{border-color:var(--accent)} .seg button.on.bepk{background:var(--accent);border-color:var(--accent);color:#fff} /* ---------- разбор безубытков ---------- */ .begrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px} .becell{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 14px;background:var(--panel-2)} .becell .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .becell .v{font-family:var(--mono);font-size:24px;font-weight:600;margin:5px 0 4px;font-variant-numeric:tabular-nums} .becell .s{font-size:12.5px;color:var(--dim);line-height:1.45} .bebar{height:8px;border-radius:4px;background:var(--line-soft);overflow:hidden;margin-bottom:6px} .bebar .t{display:block;height:100%;border-radius:4px} .behint{margin-top:10px;font-size:12.5px;color:var(--faint);line-height:1.5} /* ---------- разбор месяца: ничего не обрезаем ---------- */ .rep-card table.simple.mini{width:100%} table.simple.mini th{padding:7px 8px;font-size:8.5px;letter-spacing:.06em;white-space:nowrap} table.simple.mini td{padding:7px 8px;font-size:12px;white-space:nowrap} table.simple.mini td:first-child,table.simple.mini th:first-child{white-space:normal;word-break:break-word} table.simple.mini td:last-child,table.simple.mini th:last-child{padding-right:12px} .rep-card{min-width:0} .rep-grid{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))} .tick{display:inline-block;margin-top:2px} /* карточка с длинным списком дней листается внутри себя */ .rep-card.scrolly{max-height:340px;overflow-y:auto} /* длинные названия (ошибки, сетапы) переносим, а не режем многоточием */ .bw .cell .row{align-items:flex-start} .bw .cell .row .k{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;padding-right:6px} .bw .cell .row .v{white-space:nowrap;flex:none} /* таблица-скроллер сама не должна раздвигать карточку */ .card>table.simple{min-width:0} .card>table.simple>tbody{display:table;width:100%;min-width:340px} /* мини-таблицы: фиксированные колонки, «Итог» всегда влезает */ table.simple.mini{table-layout:fixed} table.simple.mini th:nth-child(1),table.simple.mini td:nth-child(1){width:auto} table.simple.mini th:nth-child(2),table.simple.mini td:nth-child(2){width:40px} table.simple.mini th:nth-child(3),table.simple.mini td:nth-child(3){width:52px} table.simple.mini th:nth-child(4),table.simple.mini td:nth-child(4){width:62px} /* в таблице «Крайние дни» три колонки */ table.simple.mini.c3 th:nth-child(2),table.simple.mini.c3 td:nth-child(2){width:40px} table.simple.mini.c3 th:nth-child(3),table.simple.mini.c3 td:nth-child(3){width:62px} table.simple.mini td:last-child{white-space:nowrap;font-weight:600} .tick{font-size:8px;padding:1px 4px} /* окно «картинка для канала» */ .sharewrap{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px} .sharewrap canvas{max-width:100%} .pill.share{border-color:var(--accent);color:var(--accent)} .pill.share:hover{background:var(--accent-soft)} /* ================= форма сделки ================= */ .m-body.form{padding:18px;display:flex;flex-direction:column;gap:20px;background:var(--bg)} .fcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .fcard>h4{margin:0;padding:11px 16px;border-bottom:1px solid var(--line-soft);background:var(--panel-2); font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} .fcard.accent>h4{color:var(--accent)} /* каждое поле — свой ряд: подпись, поле, воздух и волосок до следующего */ .fbody{padding:2px 20px 20px;display:flex;flex-direction:column;gap:0} .frow{display:contents} .fbody > .f,.fbody > .frow > .f{padding:18px 0;border-top:1px solid var(--line-soft)} .fbody > .f:first-child,.fbody > .frow:first-child > .f:first-child{border-top:none} .fbody > .outcome{margin-top:18px} .fbody > .tfgrid{padding-top:18px} .fbody > .tfgrid:first-child{padding-top:0} @media(max-width:660px){.frow{grid-template-columns:1fr}} .form .f{display:flex;flex-direction:column;gap:7px;min-width:0} .form .f label{font-size:12.5px;font-weight:500;color:var(--dim);letter-spacing:0;text-transform:none;font-family:var(--sans)} .form .f label i{color:var(--accent);font-style:normal} .form .f input,.form .f textarea{background:var(--bg);border:1px solid var(--line);color:var(--text); border-radius:var(--r-sm);padding:11px 13px;font:inherit;font-size:15px;transition:border-color .12s,background .12s} .form .f input::placeholder,.form .f textarea::placeholder{color:var(--faint)} .form .f input:focus,.form .f textarea:focus{border-color:var(--accent);outline:none;background:var(--panel)} .form .f textarea{min-height:92px;resize:vertical;line-height:1.5} .form .f textarea.short{min-height:58px} .form .f input[type="number"]{font-family:var(--mono);font-weight:500} /* быстрые подсказки */ .quick{display:flex;flex-wrap:wrap;gap:6px} .quick button{border:1px solid var(--line);background:var(--panel-2);color:var(--dim); border-radius:20px;padding:5px 12px;font-size:12.5px;font-family:var(--mono); transition:all .12s;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .quick button:hover{color:var(--text);border-color:var(--faint)} .quick button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff);font-weight:600} /* переключатели */ .seg.big{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px} .seg.big button{padding:12px 8px;font-size:14px;font-family:var(--sans);font-weight:600; border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel-2);color:var(--dim)} .seg.big button:hover{color:var(--text);border-color:var(--faint)} .seg.big button.on{color:#fff} .seg.big button.on.lng{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff)} .seg.big button.on.shr{background:var(--down);border-color:var(--down)} .seg.res button.on.win{background:var(--up);border-color:var(--up)} .seg.res button.on.loss{background:var(--down);border-color:var(--down)} .seg.res button.on.bek{background:var(--be);border-color:var(--be);color:#1c1608} .seg.res button.on.bepk{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff)} /* автоопределение типа входа */ .autobox{display:flex;align-items:center;gap:10px;border:1px dashed var(--line);border-radius:var(--r-sm); padding:12px 14px;background:var(--panel-2)} .autobox .dirval{font-weight:600;font-size:15px;color:var(--faint)} .autobox.cont{border-style:solid;border-color:var(--up);background:var(--up-soft)} .autobox.cont .dirval{color:var(--up)} .autobox.rev{border-style:solid;border-color:var(--be);background:var(--be-soft)} .autobox.rev .dirval{color:var(--be)} .autobox .autotag{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--faint)} /* итог сделки прямо в форме */ .outcome{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--r-sm); padding:14px 16px;background:var(--panel-2);min-height:58px} .outcome .big{font-family:var(--mono);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums} .outcome .txt{font-size:13.5px;color:var(--dim)} .outcome.pos{border-color:var(--up);background:var(--up-soft)} .outcome.pos .big{color:var(--up)} .outcome.neg{border-color:var(--down);background:var(--down-soft)} .outcome.neg .big{color:var(--down)} .outcome.be{border-color:var(--be);background:var(--be-soft)} .outcome.be .big{color:var(--be)} /* форма стоит окном по центру: шапка и подвал держатся, поля прокручиваются */ .modal-box:has(.form){max-width:940px;max-height:88vh;display:flex;flex-direction:column} .modal-box:has(.form) .m-head,.modal-box:has(.form) .m-foot{flex:none} .modal-box:has(.form) .m-body.form{flex:1;overflow-y:auto;min-height:0} .modal-box:has(.form) .m-body.form > *{flex:none} .form .tfgrid{gap:10px} /* поле «своё значение» рядом с подсказками */ .quick button.more{border-style:dashed;color:var(--faint);font-weight:600;padding:5px 11px} .quick button.more:hover{color:var(--accent);border-color:var(--accent)} .qinput{margin-top:7px} .qinput[hidden]{display:none !important} /* тип входа: цвета выбранного варианта */ .seg.big button.on.cont{background:var(--up);border-color:var(--up);color:#fff} .seg.big button.on.rev{background:var(--be);border-color:var(--be);color:#1c1608} /* пометка над переключателем */ .form .f label .autotag{margin-left:6px;font-family:var(--mono);font-size:9px;letter-spacing:.1em; text-transform:uppercase;color:var(--faint);font-weight:500} /* ---------- график накопленного результата ---------- */ .eqwrap{position:relative} .eqwrap svg.chart{display:block;width:100%;height:190px} .eqwrap .zero{stroke:var(--line);stroke-width:1;stroke-dasharray:4 5;vector-effect:non-scaling-stroke} .eqwrap .eqarea{fill:var(--accent-soft)} .eqwrap .eqline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke} .eqwrap .dot.end{fill:var(--accent);stroke:var(--panel);stroke-width:2;vector-effect:non-scaling-stroke} .eqwrap .eqval{position:absolute;top:0;right:0;font-family:var(--mono);font-size:20px;font-weight:600; font-variant-numeric:tabular-nums;background:var(--panel);border:1px solid var(--line); border-radius:var(--r-sm);padding:5px 11px;line-height:1.1} .eqwrap .eqrange{position:absolute;left:0;top:4px;font-family:var(--mono);font-size:10.5px; letter-spacing:.06em;color:var(--faint)} @media(max-width:560px){ .eqwrap svg.chart{height:150px} .eqwrap .eqval{font-size:16px;padding:4px 9px} .eqwrap .eqrange{display:none} } /* ---- плашка демо-режима (журнал открыт без app.py) ---- */ /* верхній правий кут, а не нижній — там уже живе кнопка помічника (.as-fab) */ .demo-badge{ position:fixed; right:16px; top:16px; z-index:60; display:flex; align-items:center; gap:10px; padding:8px 10px 8px 12px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow-badge); font-size:12px; color:var(--dim); max-width:calc(100vw - 32px); } .demo-badge b{ color:var(--text); font-size:11px; letter-spacing:.06em; text-transform:uppercase; } .demo-badge span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .demo-badge button{ border:1px solid var(--line); background:transparent; color:var(--dim); border-radius:7px; padding:4px 9px; font:inherit; cursor:pointer; } .demo-badge button:hover{ color:var(--text); } @media (max-width:720px){ .demo-badge span{ display:none; } } /* ================================================================== ОБЗОР — раскладка из макета (design/dash.html) Всё внутри .ovw, чтобы не пересекаться с календарём и карточками. ================================================================== */ /* обзор занимает всю ширину рабочей области, как в макете */ /* типографика макета: обзор набран мельче и легче остального приложения */ body:has(.ovw){font-size:14px;line-height:1.6;font-weight:300} /* обзор занимает всю высоту рабочей области — блоки распределяются, как в макете */ .main:has(.ovw){padding:34px 42px 22px;display:flex;flex-direction:column} .page:has(.ovw){max-width:none;width:100%;margin:0;flex:1;display:flex;flex-direction:column} .page:has(.ovw) .ovw{flex:1} .ovw{--ease:cubic-bezier(.16,1,.3,1);display:grid;grid-template-columns:minmax(0,1fr) 320px; column-gap:44px;align-items:start} /* wrap — чтобы кнопки «поділитися» справа от периода не выдавливали заголовок */ .ovw .ohead{grid-column:1 / -1;display:flex;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap} .ovw .ohead h1{margin:0;font-size:34px;font-weight:500;letter-spacing:-.035em;line-height:1.05} /* период: сегменты, по которым видно, что на них жмут */ .seg-tabs,.ovw .per{margin-left:auto;display:flex;gap:3px;padding:4px;border-radius:13px; border:1px solid var(--line-soft);box-shadow:var(--card-lip);background:var(--seg-bg)} .seg-tabs button,.ovw .per button{padding:7px 15px;border-radius:9px;border:1px solid transparent;background:none; color:var(--dim);font:inherit;font-size:12.5px;cursor:pointer; transition:color .25s var(--ease),background .25s var(--ease), border-color .25s var(--ease),transform .12s var(--ease)} .seg-tabs button:hover,.ovw .per button:hover{color:var(--text);background:var(--panel-2)} .seg-tabs button:active,.ovw .per button:active{transform:scale(.96)} .seg-tabs button.on,.ovw .per button.on{color:var(--text);border-color:var(--seg-on-line);background:var(--seg-on-bg); box-shadow:var(--seg-on-lip)} .ovw .flow{min-width:0} /* заголовок секции */ .ovw .sec-lab{display:flex;align-items:baseline;gap:12px;margin-bottom:16px} .ovw .sec-lab .t{font-family:var(--mono);font-size:9px;letter-spacing:.20em;text-transform:uppercase;color:var(--faint)} .ovw .sec-lab .wn{font-family:var(--mono);font-size:10px;color:var(--ghost);letter-spacing:0;text-transform:none} .ovw .sec-lab .wsum{font-family:var(--mono);font-size:11px} .ovw .sec-lab a{margin-left:auto;color:var(--faint);text-decoration:none;font-size:11.5px;transition:color .3s var(--ease)} .ovw .sec-lab a:hover{color:var(--text)} /* неделя — крупный ряд сверху */ .ovw .week{margin-bottom:22px} /* под неделей плотная подложка: в зазорах между картками сітка не проступає */ .ovw .days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px; background:var(--bg);border-radius:16px} /* період без угод: пояснення замість голих нулів */ .ovw .sum .pnote{margin-top:8px;font-size:12.5px;color:var(--faint);line-height:1.45} .ovw .day{position:relative;overflow:hidden;aspect-ratio:1.08;border:1px solid var(--line-soft); border-radius:14px;padding:13px 14px;background:var(--card);box-shadow:var(--card-lip); display:flex;flex-direction:column;transition:border-color .3s var(--ease);cursor:pointer} .ovw .day:hover{border-color:var(--line)} /* исход дня — надпись во всю клетку: ровная, без ореола */ .ovw .glow{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none; font-family:var(--mono);font-weight:500;font-size:62px;line-height:1;letter-spacing:-.05em; padding:0 3px;opacity:.20;filter:none;text-shadow:none} .ovw .glow.w{color:var(--up)} .ovw .glow.l{color:var(--down)} .ovw .glow.b{color:var(--be)} .ovw .day .wd,.ovw .day .dn,.ovw .day .bot{position:relative;z-index:1} .ovw .day .wd{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .ovw .day .dn{font-family:var(--mono);font-size:16px;color:var(--dim);margin-top:3px;letter-spacing:-.02em} .ovw .day .bot{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;line-height:1.1} .ovw .day .dr{margin-left:auto;font-family:var(--mono);font-size:18px;letter-spacing:-.03em;color:var(--faint)} .ovw .day.off{background:var(--day-off-bg);box-shadow:none;cursor:default} .ovw .day.off .wd,.ovw .day.off .dn{color:var(--day-off-ink)} .ovw .day.off .dr{color:var(--day-off-ink-2)} /* будній день без угод: замість числа коротка мітка — набираємо її як .wd, щоб не сперечалась із великим моноширинним відсотком сусідніх клітинок. Колір беремо --dim, а не --day-off-ink-2: та крапка для вихідних майже зливається з тлом (у темній темі 1.6:1), а пропуск треба помітити */ .ovw .day.skip .dr{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; white-space:nowrap;color:var(--dim)} /* день с результатом — цветная подложка и рамка своего цвета */ .ovw .day.pos{border-color:color-mix(in srgb,var(--up) 32%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--up) 11%,transparent),color-mix(in srgb,var(--up) 2%,transparent))} .ovw .day.neg{border-color:color-mix(in srgb,var(--down) 30%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--down) 10%,transparent),color-mix(in srgb,var(--down) 2%,transparent))} .ovw .day.be{border-color:color-mix(in srgb,var(--be) 26%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--be) 9%,transparent),color-mix(in srgb,var(--be) 2%,transparent))} /* светится только цифра результата — остальной текст клетки без ореола */ .ovw .day{text-shadow:none} .ovw .day.pos .dr{color:var(--up);text-shadow:0 0 12px var(--up-glow)} .ovw .day.neg .dr{color:var(--down);text-shadow:0 0 12px var(--down-glow)} .ovw .day.be .dr{color:var(--be);text-shadow:0 0 12px var(--be-glow)} /* двойной бордюр: внешняя оболочка + внутреннее ядро */ .shell{border:1px solid var(--line-soft);border-radius:22px;padding:6px;margin-bottom:var(--stack);background:var(--shell-bg)} /* в журнале оболочки идут в общем потоке: отступ держит правило .shell+... сверху */ .page > .shell:last-child{margin-bottom:0} .core{background:var(--card);border:1px solid var(--line-soft);border-radius:17px;padding:26px 30px; box-shadow:var(--shadow)} /* итог периода */ .ovw .sum{display:flex;align-items:flex-end;gap:34px;margin-bottom:24px} .ovw .sum .lab{font-family:var(--mono);font-size:9px;letter-spacing:.20em;text-transform:uppercase;color:var(--faint)} .ovw .sum .big{font-family:var(--mono);font-size:54px;font-weight:400;letter-spacing:-.045em;line-height:1;margin-top:14px} .ovw .sum .when{font-size:22px;color:var(--dim);margin-bottom:6px} .ovw .sum .right{margin-left:auto;text-align:right} .ovw .sum .right .v{font-family:var(--mono);font-size:15px;color:var(--dim)} /* показатели: только hairline-сетка, никаких карточек внутри карточек */ .ovw .stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-soft)} .ovw .stats .st{padding:14px 18px 13px;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft)} .ovw .stats .st:nth-child(4n){border-right:none} .ovw .stats .st:nth-last-child(-n+4){border-bottom:none} .ovw .stats .lab{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} .ovw .stats .val{font-family:var(--mono);font-size:22px;font-weight:400;letter-spacing:-.03em;margin-top:8px;line-height:1} /* эквити */ .chart{display:grid;grid-template-columns:34px 1fr;gap:10px} .yax{display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:9px; color:var(--faint);text-align:right;padding:4px 0} /* числа стоят ровно над своим днём, а не в равных долях ширины */ .xax{position:relative;height:11px;font-family:var(--mono);font-size:9px;color:var(--faint); margin-left:44px;margin-top:10px} .xax span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap} .xax span:first-child{transform:none} .xax span:last-child{transform:translateX(-100%)} .chart-lab{display:flex;align-items:baseline;gap:14px;margin-bottom:12px} .chart-lab .t{font-family:var(--mono);font-size:9px;letter-spacing:.20em;text-transform:uppercase;color:var(--faint)} .chart-lab .v{font-family:var(--mono);font-size:15px} .chart-lab .dd{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)} .ovw svg,.plwrap svg{display:block} .ovgrid{stroke:var(--ov-grid);stroke-width:1} /* колонка-компаньон */ .ovw .rail{align-self:stretch;display:flex;flex-direction:column;border:1px solid var(--line-soft); border-radius:22px;padding:6px;background:var(--shell-bg)} .ovw .rail .inner{flex:1;background:var(--card);border:1px solid var(--line-soft);border-radius:17px; padding:22px 22px 20px;display:flex;flex-direction:column;box-shadow:var(--shadow)} .ovw .cut{flex:1;display:flex;flex-direction:column} .ovw .cut section{flex:1;display:flex;flex-direction:column;min-height:0} .ovw .cut section + section{border-top:1px solid var(--line-soft);margin-top:18px;padding-top:18px} .ovw .cut section .rows{flex:1;display:flex;flex-direction:column;justify-content:space-between} .ovw .cut h3{margin:0 0 10px;padding:0;border:none;font-family:var(--mono);font-size:9px;letter-spacing:.20em; text-transform:uppercase;color:var(--faint);font-weight:400;display:flex;align-items:baseline;background:none} .ovw .cut h3 em{margin-left:auto;font-style:normal;letter-spacing:0;text-transform:none;font-size:10px; color:var(--ghost-2)} .ovw .bar{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:baseline;padding:7px 0} .ovw .bar + .bar{border-top:1px solid var(--line-soft)} .ovw .bar .nm{font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ovw .bar .qt{font-family:var(--mono);font-size:11.5px;color:var(--faint)} .ovw .bar .qt b{color:var(--text);font-weight:400} .ovw .bar .ln{grid-column:1 / -1;height:2px;border-radius:2px;background:var(--bar-track);overflow:hidden} .ovw .bar .ln i{display:block;height:100%;border-radius:2px;background:var(--bar-fill); transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)} .ovw .rail.in .bar .ln i{transform:scaleX(1)} .ovw .bar.pos .ln i{background:color-mix(in srgb,var(--up) 55%,transparent)} .ovw .bar.neg .ln i{background:color-mix(in srgb,var(--down) 50%,transparent)} /* тихий вход блоков */ .rise{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .rise.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .rise{opacity:1;transform:none;transition:none} .ovw .bar .ln i{transform:scaleX(1);transition:none} } /* экраны пониже: ужимаем, чтобы обзор оставался на одном экране */ @media (max-height:960px){ .main:has(.ovw){padding:26px 36px 18px} .ovw .ohead{margin-bottom:18px} .ovw .ohead h1{font-size:28px} .ovw .per button{padding:6px 13px} .core{padding:20px 24px} .ovw .sum{margin-bottom:18px} .ovw .sum .big{font-size:44px} .ovw .stats .st{padding:11px 16px 10px} .ovw .stats .val{font-size:20px;margin-top:6px} .shell{margin-bottom:14px} .ovw .week{margin-bottom:12px} .ovw .day{aspect-ratio:1.24;padding:10px 12px;border-radius:12px} .ovw .day .wd{line-height:1.3} .ovw .day .dn{font-size:14px;line-height:1.15} .ovw .day .dr{font-size:16px} .ovw .glow{font-size:54px;filter:blur(1.8px)} .ovw .rail .inner{padding:18px 18px 16px} .ovw .cut section + section{margin-top:14px;padding-top:14px} } @media (max-height:800px){ .main:has(.ovw){padding:20px 30px 14px} .ovw .ohead{margin-bottom:14px} .ovw .ohead h1{font-size:25px} .ovw .per{padding:3px} .ovw .per button{padding:5px 11px;font-size:12px} .core{padding:17px 21px} .ovw .sum{margin-bottom:14px} .ovw .sum .big{font-size:38px;margin-top:10px} .ovw .stats .st{padding:9px 14px 8px} .ovw .stats .val{font-size:18px;margin-top:5px} .ovw .week{margin-bottom:10px} .ovw .days{gap:8px} .ovw .day{aspect-ratio:1.5;padding:6px 8px} .ovw .day .wd{line-height:1.15} .ovw .day .dn{font-size:12px;line-height:1.05;margin-top:1px} .ovw .day .dr{font-size:13px} .ovw .glow{font-size:42px;filter:blur(1.4px)} .shell{margin-bottom:11px} .ovw .cut section + section{margin-top:12px;padding-top:12px} .ovw .bar{padding:5px 0} } /* узкий экран — колонка-компаньон уходит под основной поток */ @media (max-width:1180px){ .ovw{grid-template-columns:minmax(0,1fr)} .ovw .rail{margin-top:14px} } /* ---- левая панель в языке макета ---- */ .brand{gap:10px;font-family:var(--sans);font-size:14px;letter-spacing:-.01em;text-transform:none;font-weight:650;padding:0 4px} .brand .mark{width:32px;height:32px;border-radius:10px;background:var(--mark-bg);border:1px solid var(--mark-line); display:grid;place-items:center;flex:none;color:var(--text)} .brand .nm small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em; text-transform:uppercase;color:var(--faint);font-weight:400} .newtrade{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px} :root[data-theme="dark"] .newtrade{background:var(--accent);border:1px solid var(--accent); color:var(--accent-ink);font-weight:600} :root[data-theme="dark"] .newtrade:hover{filter:none;box-shadow:0 0 26px -4px rgba(64,224,148,.65)} .nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;font-size:13.5px; border:1px solid transparent} .nav a.on{box-shadow:none;border-color:var(--line);background:var(--panel-2)} .nav .ic{opacity:.45;flex:none} .nav a.on .ic{opacity:.9} .side .grp{display:flex;flex-direction:column;gap:6px} .side .lab{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:var(--faint);padding:0 5px} .mini{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:10px;border:1px solid var(--line-soft); background:var(--panel-2);color:var(--dim);font-size:12.5px;cursor:pointer;transition:.18s;text-align:left} .mini:hover{color:var(--text);background:var(--panel-2);border-color:var(--line)} .mini .ic{opacity:.5;flex:none} /* «Новини» в цій же групі — не кнопка, а посилання на розділ: знімаємо підкреслення і підсвічуємо, коли розділ відкритий */ a.mini{text-decoration:none} a.mini.on{color:var(--text);background:var(--seg-on-bg,var(--panel-2)); border-color:var(--line);box-shadow:inset 0 0 0 1px var(--line)} a.mini.on .ic{opacity:1;color:var(--accent)} /* перемикач мови — одразу три варіанти, а не циклічна кнопка наосліп */ .langs{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--panel-2); border:1px solid var(--line-soft)} .langs button{flex:1;border:0;background:transparent;color:var(--faint);cursor:pointer; font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:6px 0;border-radius:7px; transition:.18s} .langs button:hover{color:var(--dim)} .langs button.on{background:var(--panel);color:var(--text)} /* ---- фирменный знак в сайдбаре ---- */ :root{ --logo-green:#40e094 } .brand .mark .logo{ height:19px; width:auto; aspect-ratio:902/1315; /* знак вытянут из-за фитилей */ display:block; color:var(--text); } .brand .nm i{font-style:normal; color:var(--logo-green)} /* ---- Bklit UI · Profit/Loss Line ---- */ .plwrap{position:relative;min-width:0} /* нулевая ось выделена, как Grid highlightRowValues={[0]} */ .plzero{stroke:var(--text);stroke-width:1;opacity:.35} .plcursor{stroke:var(--faint);stroke-width:1;stroke-dasharray:2 3;opacity:.75} /* наведённая точка нарисована линией нулевой длины */ .plhover{filter:none} .pltip{position:absolute;transform:translateX(-50%);pointer-events:none;z-index:2; display:flex;align-items:baseline;gap:7px;white-space:nowrap; padding:5px 9px;border-radius:9px;border:1px solid var(--line); background:var(--panel-2);backdrop-filter:blur(8px);box-shadow:var(--shadow-badge); font-family:var(--mono);font-size:11px;line-height:1} .pltip .i{align-self:center;width:7px;height:7px;border-radius:50%;flex:none} .pltip .d{color:var(--faint)} .pltip .v{color:var(--text)} /* ---- shadcn/ui · Tooltip ---- */ /* ================= Alert Dialog ================= Свой вопрос вместо браузерного confirm(). z-index выше всего остального: спрашивать приходится и поверх опросника (60), и поверх панелей (70). */ .askwrap{position:fixed;inset:0;z-index:220;background:var(--overlay-strong); display:flex;align-items:center;justify-content:center;padding:24px; opacity:0;transition:opacity .18s} .askwrap.in{opacity:1} .askbox{background:var(--panel);border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow-pop);width:100%;max-width:420px;padding:24px 24px 20px; transform:translateY(8px) scale(.98);transition:transform .18s} .askwrap.in .askbox{transform:none} .asktext{margin:0 0 20px;font-size:15.5px;line-height:1.55;color:var(--text)} .askfoot{display:flex;justify-content:flex-end;gap:10px} .askfoot .btn{cursor:pointer} .askfoot .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (prefers-reduced-motion:reduce){ .askwrap,.askbox{transition:none} } .tipbox{position:fixed;z-index:200;pointer-events:none;max-width:260px; padding:6px 11px;border-radius:8px;border:1px solid var(--line); background:var(--panel-2);backdrop-filter:blur(10px);box-shadow:var(--shadow-badge); color:var(--text);font-size:12px;line-height:1.45; opacity:0;transform:translateY(3px) scale(.96); transition:opacity .14s ease,transform .14s cubic-bezier(.16,1,.3,1)} .tipbox.below{transform:translateY(-3px) scale(.96)} .tipbox.in{opacity:1;transform:none} [data-tip]{cursor:help} button[data-tip],a[data-tip],.mk[data-tip]{cursor:pointer} /* ---- shadcn/ui · Pagination ---- */ .pagi{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap; padding:14px 12px 4px} .pagi .pg{min-width:34px;height:34px;padding:0 10px;border-radius:var(--r-sm); border:1px solid transparent;background:none;color:var(--dim); font-family:var(--mono);font-size:12.5px;line-height:1; display:inline-flex;align-items:center;justify-content:center; transition:color .14s,background .14s,border-color .14s} .pagi .pg:hover:not(:disabled):not(.gap){color:var(--text);background:var(--panel-2)} .pagi .pg.on{color:var(--text);border-color:var(--line);background:var(--panel-2);font-weight:500} .pagi .pg.step{font-family:var(--sans);font-size:13px} .pagi .pg:disabled{opacity:.35;cursor:default} .pagi .pg.gap{cursor:default;color:var(--faint)} /* ---- shadcn/ui · Sheet и Drawer ---- */ .pnl-wrap{position:fixed;inset:0;z-index:75;display:flex} .pnl-ov{position:absolute;inset:0;background:var(--overlay);backdrop-filter:blur(2px); opacity:0;transition:opacity .26s ease} .pnl-wrap.in .pnl-ov{opacity:1} .pnl{position:relative;display:flex;flex-direction:column; background:var(--card); /* дно панели плотное, без просвета */ border:1px solid var(--line);box-shadow:var(--shadow-pop); transition:transform .3s cubic-bezier(.16,1,.3,1)} /* справа — детали сделки */ .pnl-wrap[data-side="right"]{justify-content:flex-end} .pnl-wrap[data-side="right"] .pnl{width:min(560px,100%);height:100%; border-radius:0;border-right:none;transform:translateX(100%)} /* форма угоди чуть шире карточки сделки */ .pnl-wrap[data-side="right"] .pnl.form-pnl{width:min(640px,100%)} /* снизу — форма сделки */ .pnl-wrap[data-side="bottom"]{align-items:flex-end;justify-content:center} .pnl-wrap[data-side="bottom"] .pnl{width:min(940px,100%);max-height:92vh; border-radius:18px 18px 0 0;border-bottom:none;transform:translateY(100%)} .pnl-wrap.in .pnl{transform:none} .pnl-grab{padding:9px 0 3px;display:grid;place-items:center;cursor:grab;touch-action:none;flex:none} .pnl-grab i{width:44px;height:4px;border-radius:4px;background:var(--line);display:block} .pnl-grab:active{cursor:grabbing} /* шапка и подвал держатся, тело скроллится */ .pnl .m-head{flex:none} .pnl .m-body{flex:1;overflow-y:auto;min-height:0;overscroll-behavior:contain} .pnl .m-body.form > *{flex:none} /* секции формы не сжимаются под высоту панели */ .pnl .m-foot{flex:none} @media(max-width:640px){ .pnl-wrap[data-side="right"] .pnl{width:100%;border-radius:0;border:none} } /* ---- shadcn/ui · Date Picker ---- */ .dpop{position:fixed;z-index:205;width:268px;padding:12px;border-radius:12px; border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-pop); opacity:0;transform:translateY(-4px) scale(.985); transition:opacity .15s ease,transform .15s cubic-bezier(.16,1,.3,1)} .dpop.in{opacity:1;transform:none} .dp-head{display:flex;align-items:center;gap:6px;margin-bottom:8px} .dp-title{flex:1;text-align:center;font-size:13px;font-weight:600} .dp-nav{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);color:var(--dim); display:grid;place-items:center;font-size:14px;line-height:1} .dp-nav:hover{color:var(--text);background:var(--panel-2)} .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .dp-wd{display:grid;place-items:center;height:26px;font-family:var(--mono);font-size:9px; letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .dp-day{height:32px;border-radius:8px;border:1px solid transparent;background:none;color:var(--dim); font-family:var(--mono);font-size:12px;display:grid;place-items:center; transition:background .12s,color .12s,border-color .12s} .dp-day:hover{background:var(--panel-2);color:var(--text)} .dp-day.off{color:var(--faint);opacity:.4;pointer-events:none} .dp-day.today{border-color:var(--line)} .dp-day.in{background:var(--panel-2);color:var(--text);border-radius:0} .dp-day.on{background:var(--accent);color:var(--accent-ink);font-weight:600} .dp-foot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:9px; border-top:1px solid var(--line-soft)} .dp-val{flex:1;font-family:var(--mono);font-size:11px;color:var(--faint)} .dp-clear{border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:12px;color:var(--dim)} .dp-clear:hover{color:var(--text);background:var(--panel-2)} /* кнопка, из которой открывается календарь */ .dbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel); color:var(--dim);border-radius:var(--r-sm);padding:6px 12px;font-size:13px;transition:color .12s,border-color .12s} .dbtn:hover{color:var(--text);border-color:var(--faint)} .dbtn.set{color:var(--text)} .dbtn svg{opacity:.6;flex:none} /* ---- shadcn/ui · Attachment ---- */ .tfslot.dragover,.attach.dragover{border-color:var(--up); background:color-mix(in srgb,var(--up) 10%,transparent)} .attach{display:flex;align-items:center;justify-content:center;gap:9px; margin-top:10px;padding:13px;border:1px dashed var(--line);border-radius:var(--r-sm); color:var(--faint);font-size:12.5px;text-align:center;transition:border-color .15s,background .15s,color .15s} .attach:hover{color:var(--dim);border-color:var(--faint)} .attach svg{opacity:.55;flex:none} .attach b{color:var(--dim);font-weight:500} /* активная пилюля — как вкладка на экране входа: графит с волоском, а не белая заливка */ :root[data-theme="dark"] .pill.on{background:var(--seg-on-bg);color:var(--text); border-color:var(--line);box-shadow:inset 0 0 0 1px var(--line);font-weight:500} /* ================== дорогая подача (high-end visual design) ================== Три точечных приёма, раскладка не меняется: плёночное зерно поверх фона, «тяжёлые» кривые движения, отклик на нажатие. */ /* 1. зерно — фиксированный слой, не перерисовывается при прокрутке */ body::after{ content:"";position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} :root:not([data-theme="dark"]) body::after{opacity:.022} /* 2. движение с массой: одна кривая на весь интерфейс */ :root{--ease-lux:cubic-bezier(.32,.72,0,1)} .btn,.pill,.mini,.newtrade,.navbtn,.ghost,.dbtn,.pagi .pg,.nav a,.trow,.card, .ovw .day,.ovw .per button,.tfslot,.dp-day,.dp-nav,.dp-clear{ transition:background .28s var(--ease-lux),color .28s var(--ease-lux), border-color .28s var(--ease-lux),box-shadow .28s var(--ease-lux), transform .18s var(--ease-lux)} /* 3. отклик на нажатие — лёгкое «продавливание» */ .btn:active,.pill:active,.mini:active,.newtrade:active,.navbtn:active, .ghost:active,.dbtn:active,.pagi .pg:not(:disabled):active,.dp-day:active{transform:scale(.985)} .trow:active,.ovw .day:not(.off):active{transform:scale(.997)} @media (prefers-reduced-motion:reduce){ .btn,.pill,.mini,.newtrade,.navbtn,.ghost,.dbtn,.pagi .pg,.nav a,.trow,.card, .ovw .day,.ovw .per button,.tfslot,.dp-day,.dp-nav,.dp-clear{transition:none} .btn:active,.pill:active,.mini:active,.newtrade:active,.navbtn:active, .ghost:active,.dbtn:active,.pagi .pg:not(:disabled):active,.dp-day:active, .trow:active,.ovw .day:not(.off):active{transform:none} } /* ---- двойной бортик: карточка сидит в собственной оболочке ---- Оболочка нарисована кольцами тени, поэтому разметка не меняется. Отступы сеток подняты, чтобы соседние оболочки не соприкасались. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .qcard{ border-radius:16px; box-shadow:0 0 0 6px var(--shell-bg),0 0 0 7px var(--line-soft),var(--shadow); } :root[data-theme="dark"] .jgrid, :root[data-theme="dark"] .split{gap:28px} :root[data-theme="dark"] .card+.card, :root[data-theme="dark"] .kpis+.card, :root[data-theme="dark"] .split+.card, :root[data-theme="dark"] .card+.split, :root[data-theme="dark"] .jgrid+.split, :root[data-theme="dark"] .jgrid+.card{margin-top:28px} :root[data-theme="dark"] .page > .card:first-child, :root[data-theme="dark"] .jgrid{margin-top:8px} :root[data-theme="dark"] .kpis{margin-bottom:22px} /* карточки внутри модалок и панелей остаются плоскими */ :root[data-theme="dark"] .pnl .card, :root[data-theme="dark"] .modal-box .card{box-shadow:var(--shadow)} /* ================== варианты расстановки ================== Переключаются кнопкой в левой панели, состояние живёт в data-layout. «Класика» — состояние по умолчанию, отдельных правил не требует. */ /* ---- Смуга: меню одной строкой сверху, рабочая область во всю ширину ---- */ :root[data-layout="top"] body{flex-direction:column} :root[data-layout="top"] .side{ width:100%;height:auto;flex-direction:row;align-items:center;gap:12px; padding:9px 20px;border-right:none;border-bottom:1px solid var(--side-line); position:sticky;top:0;z-index:20;overflow:visible;background:var(--panel)} :root[data-layout="top"] .brand{padding:0;gap:9px} :root[data-layout="top"] .brand .nm small{display:none} :root[data-layout="top"] .side .nav{flex-direction:row;gap:4px;margin-left:14px} :root[data-layout="top"] .side .nav a{padding:7px 13px} :root[data-layout="top"] .side .grp{flex-direction:row;align-items:center;gap:6px;margin-left:auto} :root[data-layout="top"] .side .grp .lab{display:none} :root[data-layout="top"] .side .mini{padding:7px 11px} :root[data-layout="top"] .side .mini span{display:none} :root[data-layout="top"] .side-foot{margin-top:0;flex-direction:row} :root[data-layout="top"] .newtrade{order:9;padding:8px 15px;white-space:nowrap} :root[data-layout="top"] .laybox{order:8} :root[data-layout="top"] .main:has(.ovw){padding:26px 32px 20px} :root[data-layout="top"] .ovw{column-gap:32px} @media(max-width:900px){ :root[data-layout="top"] .side{flex-wrap:wrap;padding:9px 14px} :root[data-layout="top"] .side .nav{margin-left:0;width:100%;order:9} } /* ---- Плитки: обзор асимметричной сеткой ---- */ :root[data-layout="bento"] .ovw{ grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:min-content;column-gap:18px;row-gap:18px;align-items:stretch} :root[data-layout="bento"] .ovw .ohead{grid-column:1 / -1} :root[data-layout="bento"] .ovw .flow{display:contents} :root[data-layout="bento"] .ovw .week{grid-column:1 / 9;grid-row:2;margin-bottom:0} :root[data-layout="bento"] .ovw .rail{grid-column:9 / 13;grid-row:2 / 4} :root[data-layout="bento"] .ovw .flow > .shell:nth-child(2){grid-column:1 / 5;grid-row:3;margin-bottom:0} :root[data-layout="bento"] .ovw .flow > .shell:nth-child(3){grid-column:5 / 9;grid-row:3;margin-bottom:0} :root[data-layout="bento"] .ovw .flow > .shell, :root[data-layout="bento"] .ovw .rail{display:flex;flex-direction:column} :root[data-layout="bento"] .ovw .flow > .shell > .core{flex:1} :root[data-layout="bento"] .ovw .sum{flex-wrap:wrap;gap:16px} :root[data-layout="bento"] .ovw .sum .big{font-size:44px} :root[data-layout="bento"] .ovw .sum .when{font-size:18px} :root[data-layout="bento"] .ovw .stats{grid-template-columns:repeat(2,1fr)} :root[data-layout="bento"] .ovw .stats .st:nth-child(4n){border-right:1px solid var(--line-soft)} :root[data-layout="bento"] .ovw .stats .st:nth-child(2n){border-right:none} :root[data-layout="bento"] .ovw .stats .st:nth-last-child(-n+2){border-bottom:none} @media(max-width:1180px){ :root[data-layout="bento"] .ovw{grid-template-columns:minmax(0,1fr)} :root[data-layout="bento"] .ovw .week, :root[data-layout="bento"] .ovw .rail, :root[data-layout="bento"] .ovw .flow > .shell{grid-column:1 / -1;grid-row:auto} } /* ---- сам переключатель ---- */ .laybox{display:flex;gap:3px;padding:3px;border:1px solid var(--line-soft);border-radius:11px; background:var(--seg-bg)} .laybox button{flex:1;padding:6px 8px;border-radius:8px;border:1px solid transparent;background:none; color:var(--faint);font-size:11.5px;line-height:1;white-space:nowrap; transition:color .2s cubic-bezier(.32,.72,0,1),background .2s cubic-bezier(.32,.72,0,1)} .laybox button:hover{color:var(--text)} .laybox button.on{color:var(--text);background:var(--seg-on-bg);border-color:var(--seg-on-line)} /* в плитках график занимает всю высоту своей ячейки */ :root[data-layout="bento"] .ovw .plline{display:flex;flex-direction:column} :root[data-layout="bento"] .ovw .plline .chart{flex:1;min-height:0} :root[data-layout="bento"] .ovw .plwrap svg{height:100%} :root[data-layout="bento"] .ovw .plline .xax{margin-top:8px} /* ================== варианты левого меню ================== data-nav: current (как было), flat (спокойное текстовое), icons (узкая полоса). */ /* ---- Flat: тихий рельс ---- Активний розділ більше не плитка в рамці. Де ти зараз, каже смуга біля самого краю панелі й білий текст — око не спотикається об прямокутник, а бачить місце. Іконка й підпис знову в один рядок: так підпис читається з першого погляду і не доводиться різати «Калькулятор ризику». */ :root[data-nav="flat"] .side{width:212px;padding:22px 12px;gap:16px;background:var(--bg); border-right:1px solid var(--line-soft)} :root[data-nav="flat"] .brand{padding:0 10px} :root[data-nav="flat"] .newtrade{background:none;border:1px solid var(--line);color:var(--text); font-weight:500;border-radius:8px;padding:10px 12px} :root[data-nav="flat"] .newtrade:hover{background:none;border-color:var(--accent);color:var(--accent); box-shadow:none;filter:none} :root[data-nav="flat"] .nav{gap:2px} :root[data-nav="flat"] .nav a{position:relative;flex-direction:row;align-items:center;text-align:left; gap:11px;padding:9px 10px;border:none;border-radius:6px;background:none;color:var(--dim);font-size:13.5px} :root[data-nav="flat"] .nav a span{font-size:13.5px} :root[data-nav="flat"] .nav a:hover{background:var(--panel-2);color:var(--text)} :root[data-nav="flat"] .nav a.on{background:none;border:none;color:var(--text);font-weight:600} :root[data-nav="flat"] .nav a.on .ic{opacity:1;color:var(--accent)} /* смуга виходить за поле панелі — стоїть рівно по її краю */ :root[data-nav="flat"] .nav a.on::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px; width:2px;border-radius:0 2px 2px 0;background:var(--accent)} :root[data-nav="flat"] .side .grp{gap:1px;padding-top:16px;border-top:1px solid var(--line-soft)} /* підпис розділу тихіший за пункти: він орієнтир, а не пункт меню */ :root[data-nav="flat"] .side .lab{padding:0 10px 7px;font-size:9px;letter-spacing:.16em;color:var(--faint);opacity:.75} :root[data-nav="flat"] .conn-head{padding:6px 10px;border-radius:6px} :root[data-nav="flat"] .conn-head:hover{background:var(--panel-2)} :root[data-nav="flat"] .mini{background:none;border:none;padding:8px 10px;border-radius:6px; color:var(--faint);font-size:13px;gap:11px} :root[data-nav="flat"] .mini:hover{background:var(--panel-2);color:var(--text)} :root[data-nav="flat"] a.mini.on{background:none;box-shadow:none;border:none;color:var(--text);font-weight:600; position:relative} :root[data-nav="flat"] a.mini.on::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px; width:2px;border-radius:0 2px 2px 0;background:var(--accent)} :root[data-nav="flat"] .side-foot{padding-top:16px;border-top:1px solid var(--line-soft)} :root[data-nav="flat"] #themeBtn{justify-content:flex-start} /* ---- Icons: полоса 68 пикселей, подписи всплывают подсказкой ---- */ :root[data-nav="icons"] .side{width:68px;padding:18px 10px;gap:18px;align-items:center; border-right:1px solid var(--line-soft)} :root[data-nav="icons"] .brand{padding:0;justify-content:center} :root[data-nav="icons"] .brand .nm{display:none} :root[data-nav="icons"] .brand .mark{width:36px;height:36px} :root[data-nav="icons"] .newtrade{font-size:0;width:44px;height:44px;padding:0;border-radius:14px; justify-content:center;align-self:center} :root[data-nav="icons"] .newtrade svg{width:17px;height:17px} :root[data-nav="icons"] .nav{width:100%;gap:4px} :root[data-nav="icons"] .nav a{font-size:0;justify-content:center;padding:11px 0;border-radius:12px} :root[data-nav="icons"] .nav a .ic{width:19px;height:19px} :root[data-nav="icons"] .side .grp{width:100%;gap:4px;padding-top:16px;border-top:1px solid var(--line-soft)} :root[data-nav="icons"] .side .lab{display:none} :root[data-nav="icons"] .mini{font-size:0;justify-content:center;padding:11px 0;border-radius:12px} :root[data-nav="icons"] .mini .ic{width:17px;height:17px} :root[data-nav="icons"] .side-foot{width:100%;padding-top:16px;border-top:1px solid var(--line-soft)} :root[data-nav="icons"] #themeBtn{font-size:0;justify-content:center;padding:11px 0} :root[data-nav="icons"] #themeBtn span{display:none} /* доводка вариантов меню */ :root[data-nav="flat"] .brand .nm small{font-size:8px;letter-spacing:.10em;white-space:nowrap} :root[data-nav="icons"] .nav a.on{background:var(--panel-2);border-color:var(--line)} :root[data-nav="icons"] .nav a.on .ic{opacity:1;color:var(--up)} :root[data-nav="icons"] .mini:hover,:root[data-nav="icons"] .nav a:hover{background:var(--panel-2)} /* меню лежить рядком (верхнє меню й телефон) — смугу знімаємо: там «де я» показує підкреслення знизу, інакше риска висіла б збоку від тексту */ :root[data-layout="top"] .side .nav a.on::before, :root[data-layout="top"] .side a.mini.on::before{display:none} :root[data-layout="top"] .side .nav a.on{box-shadow:inset 0 -2px 0 var(--accent)} /* те саме на телефоні: меню там лежить рядком під шапкою */ @media(max-width:860px){ :root[data-nav="flat"] .nav a.on::before, :root[data-nav="flat"] a.mini.on::before{display:none} :root[data-nav="flat"] .nav a.on{box-shadow:inset 0 -2px 0 var(--accent)} :root[data-nav="flat"] .side{padding:12px 14px} } /* ---- карточки без обводки: границу держит собственный фон ---- */ .card,.qcard{border-color:transparent} .shell,.core,.ovw .rail,.ovw .rail .inner{border-color:transparent} .ovw .day{border-color:transparent} /* внешняя оболочка карточек рисуется одним фоном, без волоска по краю */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .qcard{box-shadow:0 0 0 6px var(--shell-bg),var(--shadow)} /* ================== цифры ================== Archivo вместо моноширинного: рисунок живее, а колонки не «плывут» благодаря табличным цифрам. */ .ovw .sum .big, .ovw .stats .val, .kpi .v, .trow .r, .simple td, .arow .netr{font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.02em} /* короткие поля не тянем на всю ширину ряда */ #fld_date,#fld_rr{max-width:290px}