/* s3aguard — нейтральная плоская система в стиле shadcn/ui (тема zinc). Тема задаётся атрибутом data-theme на : dark (по умолчанию) | light. Дизайн-токены: значения палитры взяты из zinc-набора shadcn/ui (эталон сверен с Franken UI, MIT — https://franken-ui.dev). */ :root { /* --- базовая палитра (zinc, тёмная) --- */ --bg: hsl(240 10% 3.9%); --text: hsl(0 0% 98%); --muted: hsl(240 5% 64.9%); --accent: hsl(234 89% 68%); --accent2: hsl(263 80% 68%); --ok: hsl(158 64% 52%); --err: hsl(0 72% 60%); --warn: hsl(38 92% 58%); /* --- поверхности --- */ --card: hsl(240 6% 7%); --card-2: hsl(240 5% 10%); --border: hsl(240 3.7% 15.9%); --border-strong: hsl(240 4% 24%); --hover: hsl(240 4% 12%); --input-bg: hsl(240 4% 11%); --ring: hsl(234 89% 68%); /* --- имена прежней «стеклянной» системы (сохранены, но плоские) --- */ --glass-bg: hsl(240 6% 7%); --glass-strong: hsl(240 5% 10%); --glass-border: hsl(240 3.7% 15.9%); --topbar-bg: hsl(240 10% 3.9% / .82); --card-solid: hsl(240 5% 9%); --th-bg: hsl(240 6% 8%); --row-hover: hsl(240 4% 11%); --panel: hsl(240 6% 7%); /* фоновые градиенты и «блобы» отключены — плоский фон */ --bg-a: hsl(240 10% 3.9%); --bg-b: hsl(240 10% 3.9%); --bg-c: hsl(240 10% 3.9%); --blob-a: transparent; --blob-b: transparent; --blob-c: transparent; --shadow: 0 1px 2px hsl(0 0% 0% / .5), 0 10px 30px hsl(0 0% 0% / .30); --shadow-sm: 0 1px 2px hsl(0 0% 0% / .4); --focus-ring: hsl(234 89% 68% / .35); --accent-glow: hsl(234 89% 68% / .22); --blur: 0px; --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; } :root[data-theme="light"] { --bg: hsl(0 0% 100%); --text: hsl(240 10% 3.9%); --muted: hsl(240 3.8% 46.1%); --accent: hsl(234 89% 56%); --accent2: hsl(263 70% 58%); --ok: hsl(158 64% 38%); --err: hsl(0 72% 48%); --warn: hsl(32 95% 38%); --card: hsl(0 0% 100%); --card-2: hsl(240 4.8% 96.5%); --border: hsl(240 5.9% 90%); --border-strong: hsl(240 5% 78%); --hover: hsl(240 4.8% 96%); --input-bg: hsl(0 0% 100%); --ring: hsl(234 89% 56%); --glass-bg: hsl(0 0% 100%); --glass-strong: hsl(240 4.8% 97%); --glass-border: hsl(240 5.9% 90%); --topbar-bg: hsl(0 0% 100% / .86); --card-solid: hsl(0 0% 100%); --th-bg: hsl(240 5% 97%); --row-hover: hsl(240 4.8% 97%); --panel: hsl(0 0% 100%); --bg-a: hsl(0 0% 100%); --bg-b: hsl(0 0% 100%); --bg-c: hsl(0 0% 100%); --blob-a: transparent; --blob-b: transparent; --blob-c: transparent; --shadow: 0 1px 2px hsl(240 10% 4% / .06), 0 10px 30px hsl(240 10% 4% / .08); --shadow-sm: 0 1px 2px hsl(240 10% 4% / .07); --focus-ring: hsl(234 89% 56% / .28); --accent-glow: hsl(234 89% 56% / .18); } * { box-sizing: border-box; } body { margin: 0; color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100vh; background: radial-gradient(1200px 820px at 12% 8%, var(--blob-a), transparent 60%), radial-gradient(1000px 700px at 88% 16%, var(--blob-b), transparent 55%), radial-gradient(1000px 760px at 55% 100%, var(--blob-c), transparent 58%), linear-gradient(160deg, var(--bg-a) 0%, var(--bg-b) 50%, var(--bg-c) 100%); background-attachment: fixed; } .hidden { display: none !important; } .muted { color: var(--muted); } .small { font-size: 12.5px; } .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px; } .pos, .ok { color: var(--ok); } .neg, .err { color: var(--err); } /* ===== Переключатель темы ===== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 50%; cursor: pointer; color: var(--text); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } /* Кнопка «Конструктор» — платная (премиум) возможность, градиент-пилюля */ a.ctr-link { display: inline-flex; align-items: center; gap: 7px; padding: 6px 15px; border-radius: 20px; text-decoration: none; color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; background: linear-gradient(135deg, var(--accent), var(--accent2)); border: 1px solid transparent; box-shadow: 0 4px 14px var(--accent-glow); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } a.ctr-link .ctr-ico { font-size: 14px; line-height: 1; } a.ctr-link:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 22px var(--accent-glow); } a.ctr-link:hover .ctr-ico { animation: ctr-shine .5s ease; } @keyframes ctr-shine { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} } .prem-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .prem-stack .small { white-space: nowrap; } [data-theme="dark"] .ico-sun { display: none; } [data-theme="light"] .ico-moon { display: none; } /* ===== Вход ===== */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; } .auth-card { width: 100%; max-width: 400px; text-align: center; } .auth-top { display: flex; justify-content: flex-end; margin-bottom: 6px; } .auth-card h1 { margin: 0 0 4px; font-size: 30px; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .auth-card form { display: grid; gap: 13px; margin-top: 18px; text-align: left; } /* ===== Шапка кабинета: топбар + вкладки (sticky) ===== */ .dash-header { position: sticky; top: 0; z-index: 10; background: var(--topbar-bg); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); backdrop-filter: blur(var(--blur)) saturate(140%); border-bottom: 1px solid var(--glass-border); } .topbar { display: flex; align-items: center; gap: 14px; padding: 11px 22px; } .topbar .brand { flex: none; margin-right: 6px; } .topbar .tabs { flex: 1 1 auto; display: flex; gap: 6px; justify-content: center; overflow-x: auto; scrollbar-width: none; padding: 0; } .topbar .tabs::-webkit-scrollbar { display: none; } .topbar .who { margin-left: auto; flex: none; } .menu-btn { display: none; background: var(--input-bg); border: 1px solid var(--glass-border); color: var(--text); border-radius: 10px; width: 38px; height: 38px; font-size: 20px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; flex: none; } .tabs { display: flex; gap: 8px; padding: 4px 26px 13px; flex-wrap: wrap; } .tab { background: var(--input-bg); border: 1px solid var(--glass-border); border-radius: 999px; padding: 7px 15px; font-size: 13.5px; cursor: pointer; color: var(--muted); font-family: inherit; } .tab:hover:not(.active) { color: var(--text); border-color: var(--accent); box-shadow: none; } .tab.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent; box-shadow: 0 4px 14px var(--accent-glow); } .brand { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: 1px; white-space: nowrap; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-title { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 32px; letter-spacing: 2px; text-align: center; margin: 0 0 18px; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .who { display: flex; align-items: center; gap: 10px; } /* ===== Мобильное сайд-меню (гамбургер) ===== */ .side-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 55; } .side-menu { position: fixed; top: 0; right: 0; width: min(300px, 82vw); height: 100vh; z-index: 60; background: var(--card-solid); border-left: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); display: flex; flex-direction: column; transform: translateX(105%); transition: transform 0.25s ease; box-shadow: var(--shadow); } .side-menu.open { transform: translateX(0); } /* ЖЁСТКАЯ ЗАЩИТА от «выехавшей» мобильной панели на десктопе. На ширине >640px мобильная панель и затемнение не существуют вообще: display:none выигрывает у .open (translateX(0)), поэтому панель физически не может появиться, даже если JS/классы добавят .open (защита от кэша старой версии, расширений и любых внешних факторов). */ @media (min-width: 641px) { #side-menu, #side-backdrop { display: none !important; } } .side-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--glass-border); } .side-brand { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 20px; letter-spacing: 1px; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .side-close { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; } .side-tabs { display: flex; flex-direction: column; gap: 6px; padding: 14px; overflow-y: auto; flex: 1; } .side-tabs .tab { width: 100%; text-align: left; border-radius: 12px; padding: 12px 14px; font-size: 15px; } .side-foot { padding: 14px 16px; border-top: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 10px; } .side-user { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; flex-wrap: wrap; } /* ===== Панели (стеклянные карточки) ===== */ .panel { max-width: 1080px; margin: 22px auto; padding: 26px 30px; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); backdrop-filter: blur(var(--blur)) saturate(140%); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow); } .panel > h2 { margin: 0 0 16px; font-size: 20px; } .sub { margin: 22px 0 10px; font-size: 16px; color: var(--muted); } .card { background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--blur)) saturate(150%); backdrop-filter: blur(var(--blur)) saturate(150%); border: 1px solid var(--glass-border); border-radius: 26px; padding: 26px 30px; box-shadow: var(--shadow); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; } .acct-name { font-weight: 600; } .acct-id { color: var(--muted); font-size: 12px; word-break: break-all; } .t .t-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; } .t .t-val { font-size: 20px; font-weight: 700; margin-top: 4px; } /* ===== Формы ===== */ .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .label { font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; } .hint-ico { display: inline-flex; width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-size: 11px; align-items: center; justify-content: center; cursor: help; } .hint { color: var(--muted); font-size: 13px; margin: 6px 0; } .desc { color: var(--muted); font-size: 13.5px; margin: -4px 0 12px; } input:not([type="checkbox"]):not([type="radio"]), select { background-color: var(--input-bg); color: var(--text); border: 1px solid var(--glass-border); border-radius: 11px; padding: 10px 12px; font-size: 14px; font-family: inherit; width: 100%; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .15s, box-shadow .15s, background .15s; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } select option { background-color: var(--card-solid); color: var(--text); } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grow { flex: 1; } .robot-form { background: var(--card-solid); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); backdrop-filter: blur(var(--blur)) saturate(140%); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; } .robot-form h3 { margin: 0 0 14px; } /* ===== Кнопки ===== */ button { background: var(--input-bg); color: var(--text); border: 1px solid var(--glass-border); border-radius: 11px; padding: 9px 15px; font-size: 14px; font-family: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s, transform .1s, filter .15s; } button:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } button:disabled { opacity: .45; cursor: not-allowed; } button.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #fff; box-shadow: 0 6px 18px var(--accent-glow); } button.primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 22px var(--accent-glow); } button.primary:active { transform: translateY(0); } button.ghost { background: transparent; } button.small { padding: 5px 11px; font-size: 12.5px; } button.danger { color: var(--err); border-color: var(--err); background: color-mix(in srgb, var(--err) 10%, transparent); } button.danger:hover:not(:disabled) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 28%, transparent); } .link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 14px; font-family: inherit; } .link:hover { text-decoration: underline; box-shadow: none; } /* ===== Роботы ===== */ .robot { background: var(--glass-strong); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--glass-border); border-radius: 14px; padding: 13px 16px; margin-bottom: 10px; } .r-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .r-name { font-weight: 600; font-size: 15px; } .r-meta { color: var(--muted); font-size: 13px; margin: 4px 0 8px; } .r-cfg { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 0 6px; word-break: break-word; } .r-perf { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12px; color: var(--muted); margin: 0 0 6px; font-variant-numeric: tabular-nums; } .r-perf .perf-pnl { font-weight: 600; } .r-perf .badge { font-size: 11px; } .r-actions { display: flex; gap: 8px; } .r-lots { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 13px; color: var(--muted); } .r-lots .robot-lots { width: 72px; background: var(--glass-strong); color: var(--text); border: 1px solid var(--glass-border); border-radius: 8px; padding: 4px 7px; font-size: 13px; font-variant-numeric: tabular-nums; } .r-lots .hint { font-size: 12px; opacity: .8; } .signals-box { margin-top: 10px; border-top: 1px solid var(--glass-border); padding-top: 8px; } .sig { font-size: 13px; padding: 2px 0; } /* ===== Служебные / капча ===== */ .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } .cap-q { font-weight: 600; color: var(--accent); font-size: 15px; } .auth-links { display: flex; gap: 14px; margin-top: 8px; } .msg { padding: 11px; border-radius: 11px; background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--ok); margin-top: 12px; font-size: 14px; } .error { color: var(--err); font-size: 14px; margin-top: 10px; } .row.gap { gap: 10px; align-items: center; } .card-mini { background: var(--glass-strong); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; } .card-mini b { font-size: 16px; } .dim { color: var(--muted); font-size: 12px; } .pos-table { width: 100%; border-collapse: collapse; margin-top: 12px; } .pos-table th, .pos-table td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--glass-border); font-size: 14px; } .pos-table th { color: var(--muted); font-weight: 500; } .iname { font-weight: 600; } .iuid, .uid { color: var(--muted); font-size: 12px; font-family: ui-monospace, Consolas, monospace; } /* пометка типа инструмента в поиске тикера (Акция / Фьючерс / Фонд…) */ .tk-badge { font-size: 10px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } /* контейнер графика TradingView Lightweight Charts */ .lwc { width: 100%; } /* атрибуция библиотеки графиков (Apache-2.0 требует сохранять уведомление) */ /* атрибуция библиотеки графиков: всегда по центру низа, не «съезжает» влево */ .attrib { display: block; width: 100%; text-align: center; margin: 0 auto; padding: 10px 18px 18px; font-size: 12px; } .attrib code { font-size: 11px; } .ticker-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 11px; margin-top: 8px; font-size: 14px; } .ticker-row .uid { flex: 1; } .notif-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; } .check { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; } .check input { flex: 0 0 auto; } /* размер рисует base.css; width:auto тут ломал вид */ .field[data-for].hidden { display: none; } /* ===== Бейджи ===== */ .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--input-bg); border: 1px solid var(--glass-border); } .badge.warn { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); } .badge.on { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); } .badge.admin { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color: #fff; } .badge.run { color: var(--ok); border-color: var(--ok); } .badge.stop { color: var(--muted); } .badge.superadmin { color: var(--warn); border-color: var(--warn); } .badge.user { color: var(--accent); border-color: var(--accent); } /* ===== Таблицы ===== */ table { width: 100%; border-collapse: collapse; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); overflow: hidden; } th, td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--glass-border); font-size: 13.5px; } th { background: var(--th-bg); color: var(--muted); font-weight: 600; } tbody tr:hover { background: var(--row-hover); } tr:last-child td { border-bottom: none; } table.mini { margin-top: 8px; } /* Индикатор «Прирост за день» в разделе «Счёт и портфель» */ #day-pnl { margin-bottom: 12px; } .day-pnl-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 12px; } .day-pnl-card .pnl-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .day-pnl-card .label { font-size: .8rem; color: var(--muted); } .day-pnl-card b { font-size: 1.05rem; } .day-pnl-card .dim { color: var(--muted); font-size: .78rem; } /* ===== Адаптив ===== */ /* На телефонах/узких экранах вкладки уходят в гамбургер-сайдменю. Брейкпоинт 640px: на десктопе/ноутбуке (в т.ч. при масштабировании Windows) всегда показываем вкладки в шапке, без выезжающей справа панели. */ @media (max-width: 640px) { .topbar .tabs { display: none; } .menu-btn { display: inline-flex; } .topbar .who #me-email, .topbar .who .badge { display: none; } /* email/роль — в сайд-меню */ .topbar { padding: 10px 14px; gap: 10px; } } @media (max-width: 640px) { .row2 { grid-template-columns: 1fr; } .topbar { padding: 8px 12px; } .panel { padding: 20px 18px; } } /* Переключатель «Активные / Архив» у роботов */ .segmented { display: inline-flex; gap: 4px; margin: 4px 0 12px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); } .segmented .seg { padding: 5px 14px; border: none; border-radius: 7px; background: transparent; color: var(--muted-foreground); cursor: pointer; font: inherit; } .segmented .seg.active { background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); color: #fff; } /* Аналитика */ .ana-section { margin-top: 14px; } .ana-pick { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; } .ana-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font-size: 16px; } .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; } .kpi { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--card); } .kpi-k { font-size: 11px; color: var(--muted-foreground); } .kpi-v { font-size: 15px; font-weight: 700; margin-top: 2px; } .ana-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ana-table th, .ana-table td { border-bottom: 1px solid var(--border); padding: 5px 8px; text-align: left; } .pos { color: var(--ok); } .neg { color: var(--warn); } .ana-curve-wrap { border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--card); } .ana-curve { width: 100%; height: 160px; } .ana-logs { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; } .log-row { display: flex; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--border); font-family: ui-monospace, monospace; } .log-row.err { background: color-mix(in srgb, var(--warn) 12%, transparent); } .log-row.warn { background: color-mix(in srgb, var(--warn) 6%, transparent); } .log-ts { color: var(--muted-foreground); white-space: nowrap; } .log-ev { font-weight: 600; } .log-lv { text-transform: uppercase; font-size: 10px; } .log-lv.error { color: var(--warn); } .log-lv.warning { color: var(--warn); } .log-row.error { background: color-mix(in srgb, var(--warn) 12%, transparent); } .log-row.warning { background: color-mix(in srgb, var(--warn) 6%, transparent); } .log-tools { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; } .log-tools select { padding: 4px 8px; } .log-det { color: var(--muted-foreground); word-break: break-all; } /* ============================================================================ РЕСКИН 2026-09 — плоская нейтральная система в стиле shadcn/ui. Базу дают токены выше (убраны градиенты, «стекло» и крупные радиусы); этот блок доводит компоненты: высоты, состояния, фокус, типографику. Все прежние имена классов сохранены — JS/HTML не менялись. ========================================================================== */ body { background: var(--bg); font: 14.5px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } /* ---------- шапка и вкладки ---------- */ .topbar { background: var(--topbar-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .tabs { gap: 2px; } .tab { border: 1px solid transparent; border-radius: var(--radius-sm); padding: 7px 12px; font-size: 13.5px; font-weight: 500; color: var(--muted); } .tab:hover:not(.active) { background: var(--hover); color: var(--text); } .tab.active { background: var(--card-2); color: var(--text); border-color: var(--border); } .side-menu { background: var(--card); border-right: 1px solid var(--border); } .side-tabs .tab { width: 100%; text-align: left; } /* кнопка «Конструктор»: убраны градиент, свечение и «прыжок» */ a.ctr-link { background: var(--card-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: none; padding: 7px 13px; font-weight: 600; font-size: 13px; } a.ctr-link:hover { background: var(--hover); border-color: var(--border-strong); filter: none; transform: none; box-shadow: none; } a.ctr-link:hover .ctr-ico { animation: none; } /* ---------- поверхности ---------- */ .panel, .card, .robot-form, .auth-card { background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); -webkit-backdrop-filter: none; backdrop-filter: none; } .panel { border-radius: var(--radius-lg); padding: 22px 24px; } .card { border-radius: var(--radius); padding: 20px 22px; } .robot-form { border-radius: var(--radius); } .auth-card { border-radius: var(--radius-lg); } .panel > h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; } .sub { font-size: 14px; font-weight: 600; color: var(--text); } /* ---------- поля ввода ---------- */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { background-color: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 11px; font-size: 14px; min-height: 38px; -webkit-backdrop-filter: none; backdrop-filter: none; } input:hover, select:hover, textarea:hover { border-color: var(--border-strong); } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } select option { background-color: var(--card-2); color: var(--text); } /* ---------- кнопки ---------- */ button { background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 13px; font-size: 13.5px; font-weight: 550; min-height: 38px; } button:hover:not(:disabled) { background: var(--hover); border-color: var(--border-strong); box-shadow: none; } button.primary { background: hsl(0 0% 98%); color: hsl(240 6% 10%); border: 1px solid transparent; box-shadow: var(--shadow-sm); } button.primary:hover:not(:disabled) { background: hsl(0 0% 90%); filter: none; transform: none; border-color: transparent; box-shadow: var(--shadow-sm); } button.primary:active { transform: none; } button.ghost { background: transparent; border-color: transparent; } button.ghost:hover:not(:disabled) { background: var(--hover); border-color: var(--border); } button.small { min-height: 30px; padding: 4px 10px; font-size: 12.5px; } button.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); background: color-mix(in srgb, var(--err) 10%, transparent); } button.danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--err) 55%, transparent); box-shadow: none; } [data-theme="light"] button.primary { background: hsl(240 5.9% 10%); color: hsl(0 0% 98%); } [data-theme="light"] button.primary:hover:not(:disabled) { background: hsl(240 5.9% 18%); } .theme-toggle { background: var(--card-2); border-color: var(--border); border-radius: var(--radius-sm); } .theme-toggle:hover { border-color: var(--border-strong); box-shadow: none; } .hint-ico { background: var(--card-2); border: 1px solid var(--border); color: var(--muted); font-weight: 600; } /* ---------- таблицы ---------- */ table { background: transparent; border: 1px solid var(--border); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } th, td { border-bottom: 1px solid var(--border); padding: 9px 11px; } th { background: var(--th-bg); color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } tbody tr:hover { background: var(--row-hover); } tr:last-child td { border-bottom: none; } .pos-table th, .pos-table td { border-bottom: 1px solid var(--border); } .pos-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } /* ---------- бейджи ---------- */ .badge { border: 1px solid var(--border); font-size: 11px; padding: 2px 9px; font-weight: 600; } .badge.admin { background: var(--card-2); border-color: var(--border-strong); color: var(--text); }.robot { border-radius: var(--radius); } .card-mini { border-radius: var(--radius); } .ticker-row { border-radius: var(--radius-sm); } .ticker-row:hover { border-color: var(--border-strong); } .signals-box { border-top: 1px solid var(--border); } /* ---------- сообщения ---------- */ .msg { border-radius: var(--radius-sm); background: var(--card-2); border: 1px solid var(--border); } .msg.error, .error { border-color: color-mix(in srgb, var(--err) 40%, transparent); background: color-mix(in srgb, var(--err) 9%, transparent); } .error { padding: 9px 11px; border-radius: var(--radius-sm); } /* ---------- логи робота ---------- */ .log-row { border-bottom: 1px solid var(--border); } .log-row:hover { background: var(--row-hover); } /* рабочее поле на всю ширину экрана (было max-width:1080px — тесно для терминала) */ .panel { max-width: none; width: 100%; margin: 16px 0; } @media (min-width: 1600px) { .panel { padding: 26px 40px; } }