/* =================================================================== АВТОМАТИК ГЕЙТ СИСТЕМС — дизайн-система платформы (liga-ui.css) Платформа управления компанией. AI-ассистент ВРАТАРЬ. Движок унаследован от ядра liga: классы/ID/data-атрибуты сохранены 1-в-1. Ребрендинг — только поверхность (палитра, типографика, акценты). 5 тем (атрибут data-bg на ): goszakaz — «Госзаказ» (по умолчанию) navy + сталь + золото kontrakt — «Контракт» графит + изумруд auktsion — «Электрик» тёмный + электрик-синий/циан, HUD торгов premium — «Премиум» светлый + navy + золото, serif-заголовки terminal — «Терминал» чёрный + лайм/циан, трейдерский терминал Легаси-id (vault/emerald/gold/platinum/space/light) больше не темы; `light` сохранён как алиас базовой светлой темы для совместимости с правилами в liga-fx.js / academy / админ-барах. =================================================================== */ /* ───── ТОКЕНЫ ПО УМОЛЧАНИЮ = тема «Госзаказ» ───── */ :root{ /* типографика */ --sf:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:"Playfair Display",Georgia,"Times New Roman",serif; --mono:"JetBrains Mono","SF Mono",ui-monospace,monospace; --head-font:var(--sf); /* заголовки: sans, в «Премиум» переопределяется на serif */ /* текст */ --text:#eaf0f8; --text2:#a9b6c9; --muted:#6d7a8d; /* акценты (имена сохранены для движка: gold=основной, green=деньги и т.д.) */ --gold:#e8c27a; --gold2:#f7dca0; --amber:#c79a4f; /* золото гербовой печати */ --green:#46d39a; --money:#46d39a; --red:#ff6f8a; --blue:#6fb6ff; --violet:#b6a8ff; --plat:#c3cedd; /* «plat» = сталь */ --steel:#7d93b3; /* фирменная сталь navy */ /* поверхности */ --glass:rgba(16,24,40,.52); --bd:rgba(166,196,236,.16); --panel-2:rgba(255,255,255,.04); --radius:22px; --radius-sm:14px; /* скролл-бар */ --sb-col1:#e8c27a; --sb-col2:#7d93b3; /* фирменные градиенты-акценты (используются кнопками/нав/бейджами) */ --grad-accent:linear-gradient(135deg,var(--gold),var(--amber)); --on-accent:#1a2336; /* текст на сплошном золоте */ --ring:rgba(232,194,122,.7); /* цвет курсор-кольца/риппла */ } /* =================================================================== ТЕМА 1 — «Госзаказ» (default). Navy + сталь + золото, официальный. =================================================================== */ [data-bg="goszakaz"]{ --text:#eaf0f8; --text2:#a9b6c9; --muted:#6d7a8d; --gold:#e8c27a; --gold2:#f7dca0; --amber:#c79a4f; --green:#46d39a; --money:#46d39a; --red:#ff6f8a; --blue:#6fb6ff; --violet:#b6a8ff; --plat:#c3cedd; --steel:#7d93b3; --glass:rgba(16,24,40,.52); --bd:rgba(166,196,236,.16); --head-font:var(--sf); --sb-col1:#e8c27a; --sb-col2:#7d93b3; --grad-accent:linear-gradient(135deg,#e8c27a,#c79a4f); --on-accent:#1a2336; --ring:rgba(232,194,122,.7); } [data-bg="goszakaz"] .scene{background:radial-gradient(ellipse 78% 62% at 50% -10%,#1a2a47,#0d1424 54%,#070b14 100%)} [data-bg="goszakaz"] .b1{background:radial-gradient(circle,#caa24a,transparent 60%)} [data-bg="goszakaz"] .b2{background:radial-gradient(circle,#2e6db5,transparent 60%)} [data-bg="goszakaz"] .b3{background:radial-gradient(circle,#7d93b3,transparent 62%)} /* =================================================================== ТЕМА 2 — «Контракт». Графит + изумруд (прибыль/деньги). =================================================================== */ [data-bg="kontrakt"]{ --text:#eef3ef; --text2:#abc0b6; --muted:#6f8077; --gold:#3ee0a0; --gold2:#7df3c4; --amber:#1fae7a; /* «gold»-акцент = изумруд */ --green:#3ee0a0; --money:#3ee0a0; --red:#ff7387; --blue:#5ec7d6; --violet:#9ad8b6; --plat:#b8cabf; --steel:#8a9c92; --glass:rgba(18,26,23,.55); --bd:rgba(120,210,170,.16); --head-font:var(--sf); --sb-col1:#3ee0a0; --sb-col2:#1fae7a; --grad-accent:linear-gradient(135deg,#3ee0a0,#1fae7a); --on-accent:#06241a; --ring:rgba(62,224,160,.7); } [data-bg="kontrakt"] .scene{background:linear-gradient(165deg,#1a211e,#101714 58%,#070b09 100%)} [data-bg="kontrakt"] .b1{background:radial-gradient(circle,#1fae7a,transparent 60%)} [data-bg="kontrakt"] .b2{background:radial-gradient(circle,#3ee0a0,transparent 60%)} [data-bg="kontrakt"] .b3{background:radial-gradient(circle,#5ec7d6,transparent 62%)} /* =================================================================== ТЕМА 3 — «Электрик». Тёмный + электрик-синий/циан, HUD торгов. =================================================================== */ [data-bg="auktsion"]{ --text:#e6f4ff; --text2:#9cc3e6; --muted:#5e7da0; --gold:#34d6ff; --gold2:#8be9ff; --amber:#2aa9e0; /* «gold»-акцент = циан */ --green:#3df0c8; --money:#3df0c8; --red:#ff5f8c; --blue:#4f9bff; --violet:#9b8cff; --plat:#a7c3e0; --steel:#6f8db0; --glass:rgba(8,18,32,.56); --bd:rgba(80,180,255,.20); --head-font:var(--sf); --sb-col1:#34d6ff; --sb-col2:#2aa9e0; --grad-accent:linear-gradient(135deg,#34d6ff,#2a7fe0); --on-accent:#041420; --ring:rgba(52,214,255,.8); } [data-bg="auktsion"] .scene{background:radial-gradient(ellipse at 50% -8%,#0a2a52,#06182f 55%,#030a16 100%),radial-gradient(circle at 82% 84%,#0a3a5c,transparent 52%)} [data-bg="auktsion"] .b1{background:radial-gradient(circle,#1f78d6,transparent 60%)} [data-bg="auktsion"] .b2{background:radial-gradient(circle,#13c8ff,transparent 60%)} [data-bg="auktsion"] .b3{background:radial-gradient(circle,#7a8cff,transparent 62%)} /* =================================================================== ТЕМА 4 — «Премиум». Светлый + navy + золото, serif-заголовки. =================================================================== */ [data-bg="premium"]{ --text:#16213a; --text2:#465776; --muted:#8593aa; --gold:#b8862b; --gold2:#d4a23e; --amber:#9c6f1e; /* тёплое золото на светлом */ --green:#0f8f5e; --money:#0f8f5e; --red:#d63a5b; --blue:#1f5fc0; --violet:#6b3fd6; --plat:#33415c; --steel:#3a4a68; --glass:rgba(255,254,250,.70); --bd:rgba(28,54,104,.16); --panel-2:rgba(20,40,86,.04); --head-font:var(--serif); --sb-col1:#b8862b; --sb-col2:#16213a; --grad-accent:linear-gradient(135deg,#16213a,#2a3c63); /* navy-кнопки с золотым текстом */ --on-accent:#f7dca0; --ring:rgba(184,134,43,.7); } [data-bg="premium"] .scene{background:linear-gradient(162deg,#f7f4ec,#eef1f6 50%,#e6ecf4 100%)} [data-bg="premium"] .vp::before{background:linear-gradient(180deg,rgba(255,255,255,.55),transparent)} [data-bg="premium"] .side{background:linear-gradient(180deg,rgba(252,251,246,.88),rgba(244,247,251,.86));border-right:1px solid rgba(28,54,104,.14)} /* золотой шильд бренда на светлом: контрастная иконка */ [data-bg="premium"] .brand .mk{background:linear-gradient(135deg,#16213a,#2a3c63)} [data-bg="premium"] .brand .mk svg{stroke:#f7dca0} /* сплошные navy-акценты — золотой текст */ [data-bg="premium"] .btn-g,[data-bg="premium"] .seg button.on,[data-bg="premium"] .chip.on,[data-bg="premium"] .nav a.nbadge{color:#f7dca0} [data-bg="premium"] .nav a.on{background:linear-gradient(135deg,rgba(22,33,58,.12),rgba(184,134,43,.10));color:#16213a} [data-bg="premium"] .av,[data-bg="premium"] .side .ava{color:#f7dca0} [data-bg="premium"] th{color:#5a6a86} [data-bg="premium"] #eqg stop:first-child{stop-color:rgba(184,134,43,.4)} /* липкие бары админки/курса на светлом фоне (аналог старого data-bg="light") */ [data-bg="premium"] .sa-bar,[data-bg="premium"] .ca-bar{background:rgba(248,250,253,.92)} [data-bg="premium"] #liga-ticker{background:rgba(252,251,246,.94);box-shadow:0 -2px 14px rgba(28,54,104,.06)} [data-bg="premium"] .tk-i{color:#5a6a86}[data-bg="premium"] .tk-i b{color:#16213a} /* =================================================================== ТЕМА 5 — «Терминал». Чёрный + лайм/циан, трейдерский терминал. =================================================================== */ [data-bg="terminal"]{ --text:#d8ffe6; --text2:#86b89c; --muted:#4f6e5c; --gold:#b6ff3a; --gold2:#d8ff85; --amber:#86c91e; /* «gold»-акцент = лайм */ --green:#37f0a6; --money:#37f0a6; --red:#ff476b; --blue:#1fe0ff; --violet:#7affd8; --plat:#9ac6ad; --steel:#5d7a68; --glass:rgba(4,10,7,.62); --bd:rgba(120,255,160,.16); --sf:"JetBrains Mono","Manrope","Inter",monospace; /* терминальная моноширина в UI */ --head-font:var(--sf); --sb-col1:#b6ff3a; --sb-col2:#1fe0ff; --grad-accent:linear-gradient(135deg,#b6ff3a,#37f0a6); --on-accent:#03150b; --ring:rgba(182,255,58,.8); } [data-bg="terminal"] .scene{background:radial-gradient(ellipse at 50% -6%,#0a1a10,#050a07 56%,#000201 100%)} [data-bg="terminal"] .b1{background:radial-gradient(circle,#5aa81e,transparent 60%)} [data-bg="terminal"] .b2{background:radial-gradient(circle,#13c8b0,transparent 60%)} [data-bg="terminal"] .b3{background:radial-gradient(circle,#1fe0ff,transparent 62%)} [data-bg="terminal"] body{letter-spacing:0} [data-bg="terminal"] .scanlayer{display:block!important;opacity:.22} /* фирменные скан-линии терминала */ [data-bg="terminal"] .vp,[data-bg="terminal"] .card{border-radius:14px} [data-bg="terminal"] .nav a.on{background:linear-gradient(135deg,rgba(182,255,58,.18),rgba(55,240,166,.08))} /* =================================================================== СОВМЕСТИМОСТЬ: light как базовая светлая (для liga-fx/academy/баров). Зеркалит «Премиум» по токенам; темой в пикере не значится. =================================================================== */ [data-bg="light"]{ --text:#16213a; --text2:#465776; --muted:#8593aa; --gold:#b8862b; --gold2:#d4a23e; --amber:#9c6f1e; --green:#0f8f5e; --money:#0f8f5e; --red:#d63a5b; --blue:#1f5fc0; --violet:#6b3fd6; --plat:#33415c; --steel:#3a4a68; --glass:rgba(255,254,250,.70); --bd:rgba(28,54,104,.16); --sb-col1:#b8862b; --sb-col2:#16213a; --grad-accent:linear-gradient(135deg,#16213a,#2a3c63); --on-accent:#f7dca0; --ring:rgba(184,134,43,.7); } [data-bg="light"] .scene{background:linear-gradient(162deg,#f7f4ec,#eef1f6 50%,#e6ecf4 100%)} [data-bg="light"] .side{background:linear-gradient(180deg,rgba(252,251,246,.88),rgba(244,247,251,.86));border-right:1px solid rgba(28,54,104,.14)} [data-bg="light"] .btn-g,[data-bg="light"] .seg button.on,[data-bg="light"] .chip.on{color:#f7dca0} [data-bg="light"] .brand .mk{background:linear-gradient(135deg,#16213a,#2a3c63)}[data-bg="light"] .brand .mk svg{stroke:#f7dca0} [data-bg="light"] #eqg stop:first-child{stop-color:rgba(184,134,43,.4)} /* ───── БАЗА ───── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sf);color:var(--text);min-height:100vh;overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased;letter-spacing:-.01em} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} a{color:inherit;text-decoration:none} /* ───── СЦЕНЫ (фон по умолчанию = Госзаказ) ───── */ .scene{position:fixed;inset:0;z-index:0;overflow:hidden;transition:background .8s;background:radial-gradient(ellipse 78% 62% at 50% -10%,#1a2a47,#0d1424 54%,#070b14 100%)} .blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.7;mix-blend-mode:screen;display:none} .b1{width:55vw;height:55vw;background:radial-gradient(circle,#caa24a,transparent 60%);top:-14vw;left:-8vw;animation:m1 26s ease-in-out infinite} .b2{width:48vw;height:48vw;background:radial-gradient(circle,#2e6db5,transparent 60%);bottom:-16vw;right:-6vw;animation:m2 30s ease-in-out infinite} .b3{width:42vw;height:42vw;background:radial-gradient(circle,#7d93b3,transparent 62%);top:30vh;left:42vw;animation:m1 34s ease-in-out infinite reverse} @keyframes m1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,5vh) scale(1.12)}} @keyframes m2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,-4vh) scale(1.1)}} /* блобы видимы во всех тёмных темах для глубины */ [data-bg="goszakaz"] .blob,[data-bg="kontrakt"] .blob,[data-bg="auktsion"] .blob,[data-bg="terminal"] .blob{display:block;opacity:.5} /* ───── ЭФФЕКТ-СЛОИ ───── */ .bubbles,.snowlayer,.starlayer,.vignette,.spot,.grainlayer,.scanlayer,.goldlayer{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;overflow:hidden} html.fx-snow .snowlayer{display:block}.flake{position:absolute;top:-24px;color:#fff;opacity:.85;animation:fall linear infinite}@keyframes fall{to{transform:translateY(110vh) rotate(360deg)}} .starlayer{background-image:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#fff,transparent),radial-gradient(1px 1px at 55% 35%,#fff,transparent),radial-gradient(2px 2px at 80% 60%,#fff,transparent),radial-gradient(1px 1px at 90% 25%,#fff,transparent),radial-gradient(1px 1px at 45% 85%,#fff,transparent);animation:tw 4s ease-in-out infinite}html.fx-stars .starlayer{display:block}@keyframes tw{0%,100%{opacity:.35}50%{opacity:.95}} .vignette{box-shadow:inset 0 0 220px 70px rgba(0,0,0,.6);z-index:6}html.fx-vignette .vignette{display:block} .spot{background:radial-gradient(560px circle at var(--sx,50%) var(--sy,40%),rgba(255,255,255,.06),transparent 60%)}html.fx-spotlight .spot{display:block} .grainlayer{z-index:6;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%273%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E")}html.fx-grain .grainlayer{display:block} .scanlayer{z-index:6;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0,rgba(0,0,0,.16) 1px,transparent 2px,transparent 4px);opacity:.5}html.fx-scan .scanlayer{display:block} /* «печать» как фирменный мерцающий слой (бывшая golddust — токенизирован под акцент темы) */ .goldlayer{z-index:0;background-image:radial-gradient(1.5px 1.5px at 12% 24%,rgba(232,194,122,.5),transparent),radial-gradient(1px 1px at 42% 62%,rgba(247,220,160,.4),transparent),radial-gradient(1.5px 1.5px at 73% 18%,rgba(232,194,122,.45),transparent),radial-gradient(1px 1px at 88% 70%,rgba(247,220,160,.35),transparent),radial-gradient(1.5px 1.5px at 30% 88%,rgba(232,194,122,.4),transparent);animation:tw 6s ease-in-out infinite}html.fx-golddust .goldlayer{display:block} #matrix{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;opacity:.4}html.fx-matrix #matrix{display:block} #parts{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}html.fx-particles #parts{display:block} html.fx-shimmer .big,html.fx-shimmer .kv,html.fx-shimmer .pt,html.fx-shimmer .ph .h,html.fx-shimmer .brand .t{background:linear-gradient(120deg,var(--text) 25%,var(--gold2) 50%,var(--text) 75%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:220% 100%;animation:shim 3s linear infinite}@keyframes shim{to{background-position:-220% 0}} html.fx-holo .vp::before{height:100%;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.22) 44%,rgba(120,200,255,.22) 50%,rgba(255,150,220,.22) 56%,transparent 66%);background-size:300% 100%;animation:holo 4.5s linear infinite}@keyframes holo{to{background-position:-300% 0}} .cring{position:fixed;z-index:8;pointer-events:none;width:34px;height:34px;border:2px solid var(--gold);border-radius:50%;transform:translate(-50%,-50%);transition:transform .12s ease;display:none}html.fx-ring .cring{display:block} .traildot{position:fixed;z-index:7;pointer-events:none;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,var(--gold),transparent 70%);transform:translate(-50%,-50%);animation:fadeT .65s forwards}@keyframes fadeT{from{opacity:.8;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.3)}} .ripple{position:fixed;border-radius:50%;border:2px solid var(--ring);pointer-events:none;z-index:7;transform:translate(-50%,-50%);animation:rip .6s ease-out forwards}@keyframes rip{from{width:0;height:0;opacity:.7}to{width:340px;height:340px;opacity:0}} .confp{position:fixed;z-index:9;width:8px;height:8px;border-radius:2px;pointer-events:none;transform:translate(-50%,-50%);animation:conf .9s ease-out forwards}@keyframes conf{to{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(320deg);opacity:0}} html.fx-glow .kv,html.fx-glow .big{text-shadow:0 0 22px rgba(232,194,122,.55)} html.fx-border .vp{animation:bhue 7s linear infinite} @keyframes bhue{0%{border-color:rgba(232,194,122,.7)}25%{border-color:rgba(70,211,154,.7)}50%{border-color:rgba(111,182,255,.7)}75%{border-color:rgba(125,147,179,.7)}100%{border-color:rgba(232,194,122,.7)}} /* ───── СТЕКЛО / ПАНЕЛИ ───── */ .vp{background:var(--glass);backdrop-filter:blur(34px) saturate(155%);-webkit-backdrop-filter:blur(34px) saturate(155%);border:1px solid var(--bd);border-radius:var(--radius);box-shadow:0 24px 50px rgba(0,0,0,.42),inset 0 1px 1px rgba(255,255,255,.18);position:relative;overflow:hidden} .vp::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent);pointer-events:none} .vp::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,-20%),rgba(255,255,255,.14),transparent 45%);opacity:0;transition:.4s} html.fx-glare .vp:hover::after{opacity:1} .vp>*{position:relative;z-index:2} /* ───── LAYOUT ───── */ .app{position:relative;z-index:1;display:flex;min-height:100vh} .side{position:fixed;top:0;left:0;bottom:0;width:248px;z-index:20;display:flex;flex-direction:column;padding:16px 14px;gap:6px;background:var(--glass);backdrop-filter:blur(34px) saturate(155%);border-right:1px solid var(--bd)} .brand{display:flex;align-items:center;gap:11px;padding:8px 8px 16px} .brand .mk{width:44px;height:44px;border-radius:13px;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35)} .brand .mk svg{width:24px;height:24px;stroke:var(--on-accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .brand .t{font-family:var(--head-font);font-weight:800;font-size:17px;letter-spacing:.2px;line-height:1.05}.brand .t span{color:var(--gold)}.brand .s{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.12em;margin-top:2px} .nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto} .nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:13px;color:var(--text2);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:.2s;position:relative} .nav a:hover{background:rgba(255,255,255,.07);color:var(--text)} .nav a.on{background:linear-gradient(135deg,rgba(232,194,122,.20),rgba(199,154,79,.08));color:var(--gold)} .nav a.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)} .nav a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .nav a .nbadge{margin-left:auto;font-size:10px;font-weight:800;background:var(--gold);color:var(--on-accent);border-radius:50px;padding:2px 7px} .nav .nav-sep{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 12px 4px;font-weight:700} .side .user{display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;background:rgba(255,255,255,.06)} .side .ava{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--steel),#3a4a68);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#eaf0f8} .main{flex:1;margin-left:248px;padding:18px 22px 120px;min-width:0} .top{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:50px;margin-bottom:18px;flex-wrap:wrap} .top .pt{font-family:var(--head-font);font-weight:800;font-size:19px;margin-right:auto} .sel{padding:9px 13px;border-radius:50px;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:var(--text);font:inherit;font-family:var(--sf);cursor:pointer} .sel option{color:#111} .seg{display:flex;background:rgba(255,255,255,.06);border:1px solid var(--bd);border-radius:50px;padding:4px} .seg button{border:none;background:transparent;color:var(--text2);font-weight:700;font-size:12.5px;padding:8px 13px;border-radius:50px;cursor:pointer;font-family:var(--sf);transition:.2s} .seg button.on{background:var(--grad-accent);color:var(--on-accent)} .iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;font-size:16px;display:inline-flex;align-items:center;justify-content:center;transition:.2s} .iconbtn:hover{border-color:var(--gold);color:var(--gold)} .iconbtn svg{width:18px;height:18px;vertical-align:middle} .section{display:none;animation:rev .6s cubic-bezier(.2,.9,.2,1)}.section.on{display:block} @keyframes rev{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ───── КОМПОНЕНТЫ ───── */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px} @media(max-width:1000px){.grid{grid-template-columns:1fr 1fr}} .kpi{padding:20px;transition:transform .35s cubic-bezier(.2,.9,.2,1.2);transform-style:preserve-3d;will-change:transform} .kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-accent);opacity:.5} .kpi .ic{width:40px;height:40px;border-radius:13px;background:rgba(232,194,122,.14);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:13px} .kpi .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .kpi .lab{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text2)} .kpi .kv{font-family:var(--head-font);font-weight:800;font-size:25px;margin-top:5px}.kpi .d{font-size:12px;margin-top:5px;color:var(--green)}.kpi .d.down{color:var(--red)} .cols{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-bottom:16px}@media(max-width:900px){.cols{grid-template-columns:1fr}} .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}@media(max-width:900px){.cols3{grid-template-columns:1fr}} .panel{padding:22px;margin-bottom:16px;transition:transform .3s cubic-bezier(.2,.9,.2,1.1)} .ph{display:flex;align-items:center;gap:10px;margin-bottom:15px;flex-wrap:wrap}.ph .h{font-family:var(--head-font);font-weight:800;font-size:16px;display:flex;align-items:center;gap:9px;min-width:0;flex-shrink:1}.ph .h svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.ph .s{font-size:12px;color:var(--text2);margin-left:auto;padding-left:14px;text-align:right;flex-shrink:0;max-width:100%} .big{font-family:var(--head-font);font-weight:800;font-size:clamp(32px,5vw,52px);letter-spacing:-1.5px} .brow{display:flex;align-items:center;gap:11px;margin-bottom:10px}.bnm{width:140px;flex-shrink:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px} .bbar{flex:1;height:9px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden}.bbar i{display:block;height:100%;width:0;border-radius:6px;background:var(--grad-accent);transition:width 1s cubic-bezier(.2,.9,.2,1)} .bbar i.g{background:linear-gradient(90deg,var(--green),#0a7d54)}.bbar i.v{background:linear-gradient(90deg,var(--violet),#6b3fd6)}.bbar i.b{background:linear-gradient(90deg,var(--blue),#1565c0)} .bval{width:78px;text-align:right;font-size:12px;color:var(--text2);font-family:var(--mono)} .dec{display:flex;align-items:flex-start;gap:12px;padding:13px;border-radius:18px;background:var(--panel-2);border:1px solid var(--bd);margin-bottom:10px} .dec .e{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.08);color:var(--gold)}.dec .e svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .dec .tt{font-weight:700;font-size:13.5px}.dec .bb{font-size:12px;color:var(--text2);line-height:1.5}.dec .imp{margin-left:auto;font-weight:800;font-size:13px;white-space:nowrap;color:var(--green)} .heat{display:flex;gap:3px}.hc{flex:1;height:42px;border-radius:6px;display:flex;align-items:flex-end;justify-content:center;font-size:8px;color:var(--muted)} .tbl-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px} .tbl-tools input,.tbl-tools select{padding:9px 13px;border-radius:11px;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:var(--text);font:inherit} .tbl-tools input:focus,.tbl-tools select:focus{outline:none;border-color:var(--gold)} .tbox{max-height:520px;overflow:auto;border:1px solid var(--bd);border-radius:12px} table{width:100%;border-collapse:collapse}th{position:sticky;top:0;background:var(--glass);backdrop-filter:blur(20px);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);padding:11px 14px;cursor:pointer;white-space:nowrap} th.r,td.r{text-align:right}td{padding:11px 14px;font-size:13px;border-top:1px solid var(--bd)}tbody tr:hover{background:rgba(255,255,255,.05)} .cellbar{display:flex;align-items:center;gap:8px;min-width:120px}.cellbar .mini{flex:1;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;min-width:44px}.cellbar .mini i{display:block;height:100%;background:var(--grad-accent)} .heatcell{padding:3px 9px;border-radius:6px;font-family:var(--mono);font-size:12px} .showmore{text-align:center;padding:13px;color:var(--gold);cursor:pointer;font-weight:700;font-size:13px} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{padding:9px 15px;border-radius:50px;border:1px solid var(--bd);background:rgba(255,255,255,.06);color:var(--text);font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.2s} .chip svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .chip:hover{border-color:var(--gold)} .chip.on{background:var(--grad-accent);color:var(--on-accent);border-color:transparent} .swrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:13px;background:var(--panel-2);border:1px solid var(--bd);margin-bottom:8px;cursor:pointer} .sw{width:42px;height:24px;border-radius:50px;background:rgba(255,255,255,.2);position:relative;flex-shrink:0;transition:.25s}.sw::after{content:'';position:absolute;top:2.5px;left:2.5px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.25s} .swrow.on .sw{background:var(--grad-accent)}.swrow.on .sw::after{left:20px} /* ── статус-компоненты (бейджи статусов, тэги) ── */ .tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;border-radius:50px;padding:4px 10px;white-space:nowrap;letter-spacing:.02em} .tag.gold{background:rgba(232,194,122,.16);color:var(--gold)} .tag.green{background:rgba(70,211,154,.16);color:var(--green)} .tag.red{background:rgba(255,111,138,.16);color:var(--red)} .tag.blue{background:rgba(111,182,255,.16);color:var(--blue)} .tag.violet{background:rgba(182,168,255,.16);color:var(--violet)} .tag.plat{background:rgba(195,206,221,.14);color:var(--plat)} .tag.mut{background:rgba(255,255,255,.07);color:var(--text2)} /* статусы заявок и сделок (семантические алиасы поверх tag) */ .tag.win,.tag.won{background:rgba(70,211,154,.18);color:var(--green)} .tag.live,.tag.bidding{background:rgba(111,182,255,.18);color:var(--blue)} .tag.draft,.tag.prep{background:rgba(232,194,122,.16);color:var(--gold)} .tag.lost,.tag.fail{background:rgba(255,111,138,.16);color:var(--red)} .pos{color:var(--green)}.neg{color:var(--red)} .btn-g{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:none;border-radius:14px;background:var(--grad-accent);color:var(--on-accent);font-family:var(--sf);font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.32);transition:transform .2s,box-shadow .2s} .btn-g:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.4)} .btn-o{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--bd);border-radius:14px;background:rgba(255,255,255,.05);color:var(--text);font-family:var(--sf);font-weight:700;font-size:13.5px;cursor:pointer;transition:.2s} .btn-o:hover{border-color:var(--gold);color:var(--gold)} .card{padding:18px;border-radius:20px;background:var(--panel-2);border:1px solid var(--bd);transition:transform .25s,border-color .25s} .card:hover{transform:translateY(-3px);border-color:rgba(232,194,122,.4)} .av{width:46px;height:46px;border-radius:50%;background:var(--grad-accent);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--on-accent);flex-shrink:0} .donut{--p:0;--c:var(--gold);width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.08) 0);display:flex;align-items:center;justify-content:center;position:relative} .donut::after{content:'';position:absolute;inset:13px;border-radius:50%;background:var(--glass);backdrop-filter:blur(8px)} .donut .dv{position:relative;z-index:2;font-weight:800;font-size:20px} .spark{display:flex;align-items:flex-end;gap:2px;height:34px}.spark i{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--gold),rgba(199,154,79,.2))} .progline{height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}.progline i{display:block;height:100%;border-radius:6px;background:var(--grad-accent)} /* ───── ТИКЕР ПОКАЗАТЕЛЕЙ (бегущая строка метрик) ───── */ #liga-ticker{position:fixed;left:248px;right:0;bottom:0;z-index:18;height:34px;display:flex;align-items:center;overflow:hidden;background:rgba(8,12,20,.74);backdrop-filter:blur(14px);border-top:1px solid var(--bd);font-family:var(--mono);font-size:12px} .tk-track{display:inline-flex;gap:34px;white-space:nowrap;animation:tkscroll 48s linear infinite;padding-left:100%} @keyframes tkscroll{to{transform:translateX(-100%)}} .tk-i{display:inline-flex;align-items:center;gap:7px;color:var(--text2)} .tk-i b{color:var(--text);font-weight:700} @media(max-width:860px){#liga-ticker{left:0;bottom:64px}} /* ───── HERO-блоки (Академия/Направления) — подложки под акцент темы ───── */ [data-bg="premium"] .acad-hero{background:linear-gradient(120deg,rgba(184,134,43,.10),rgba(255,255,255,.55) 60%)!important;border-color:rgba(28,54,104,.22)!important} [data-bg="premium"] .dir-hero{background:linear-gradient(135deg,rgba(184,134,43,.12),rgba(255,255,255,.6))!important;border-color:rgba(28,54,104,.22)!important} [data-bg="premium"] .acad-hero .acad-hero-s,[data-bg="premium"] .dir-hero .hero-lead{color:#4a5572} [data-bg="light"] .acad-hero{background:linear-gradient(120deg,rgba(184,134,43,.10),rgba(255,255,255,.55) 60%)!important;border-color:rgba(28,54,104,.22)!important} [data-bg="light"] .dir-hero{background:linear-gradient(135deg,rgba(184,134,43,.12),rgba(255,255,255,.6))!important;border-color:rgba(28,54,104,.22)!important} [data-bg="light"] .acad-hero .acad-hero-s,[data-bg="light"] .dir-hero .hero-lead{color:#4a5572} /* светлая бегущая строка */ [data-bg="light"] #liga-ticker{background:rgba(252,251,246,.94);box-shadow:0 -2px 14px rgba(28,54,104,.06)} [data-bg="light"] .tk-i{color:#5a6a86}[data-bg="light"] .tk-i b{color:#16213a} /* ───── MOBILE ───── */ .mob-nav{display:none} @media(max-width:860px){ .side{display:none}.main{margin-left:0;padding:14px 14px 96px} .mob-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;background:var(--glass);backdrop-filter:blur(30px);border-top:1px solid var(--bd);padding:8px 6px;justify-content:space-around;overflow-x:auto} .mob-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text2);font-size:10px;text-decoration:none;padding:4px 8px;border-radius:10px;flex-shrink:0} .mob-nav a.on{color:var(--gold)}.mob-nav a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .grid{grid-template-columns:1fr 1fr} } /* ───── MODAL ───── */ .modal-ov{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:18px}.modal-ov.on{display:flex} .modal{width:min(760px,96vw);max-height:88vh;overflow:auto;padding:24px} .modal .x{position:absolute;top:16px;right:18px;cursor:pointer;font-size:22px;opacity:.6;z-index:5} .loading{padding:30px;text-align:center;color:var(--muted);font-size:13px} /* ───── FX PANEL ───── */ .fxpanel{position:fixed;bottom:120px;right:16px;z-index:26;background:rgba(12,18,28,.74);backdrop-filter:blur(26px);border:1px solid var(--bd);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.45);max-height:70vh;overflow:auto} .fxhead{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;font-weight:800;font-size:13px;color:#fff;white-space:nowrap} .fxlist{display:none;flex-direction:column;gap:3px;padding:4px 8px 10px;width:230px}.fxpanel.open .fxlist{display:flex} /* scrollbar + print */ *{scrollbar-width:thin;scrollbar-color:var(--sb-col1) transparent} ::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:rgba(140,160,190,.14);border-radius:10px} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--sb-col1),var(--sb-col2));border-radius:10px;border:2px solid transparent;background-clip:padding-box;min-height:44px} ::-webkit-scrollbar-thumb:hover{filter:brightness(1.15)}::-webkit-scrollbar-corner{background:transparent} @media print{.side,.mob-nav,.fxpanel,#liga-ticker,.scene,.spot,.starlayer,#matrix,#parts,.vignette,.grainlayer,.scanlayer,.goldlayer{display:none!important}.main{margin:0!important;padding:0}.vp{box-shadow:none!important;border:1px solid #ddd!important;background:#fff!important;backdrop-filter:none!important}body{color:#000!important}} html.perf *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}html.perf .panel,html.perf .vp,html.perf .kpi,html.perf .side,html.perf .modal{background:rgba(14,20,32,.94)!important} [data-bg="premium"] html.perf .panel,[data-bg="premium"] html.perf .vp,[data-bg="premium"] html.perf .kpi,[data-bg="premium"] html.perf .side,[data-bg="premium"] html.perf .modal{background:rgba(248,250,253,.96)!important} /* модули интерфейса (управляются в админке → Настройки → Интерфейс) */ html.no-music #mz-btn,html.no-music #mz-panel{display:none!important} html.no-assistant #jv-orb,html.no-assistant #jv-panel,html.no-assistant #jv-chat-btn{display:none!important} html.no-chat #jv-chat-btn{display:none!important} /* =================================================================== ДОПОЛНИТЕЛЬНЫЕ ТЕМЫ (id ровно: rossiya / kapital / kreml / stal) Полный набор переменных как у goszakaz + .scene/.b1/.b2/.b3. =================================================================== */ /* ТЕМА — «Россия»: глубокий navy, акцент благородный синий, триколор-блобы */ [data-bg="rossiya"]{ --text:#eef2fb; --text2:#a7b6d6; --muted:#6a7aa0; --gold:#5b8cff; --gold2:#9fbcff; --amber:#3a6ad6; /* «gold»-акцент = синий */ --green:#46d39a; --money:#46d39a; --red:#e2455f; --blue:#6fb6ff; --violet:#9aa8ff; --plat:#c2ccdf; --steel:#7886a8; --glass:rgba(12,18,38,.56); --bd:rgba(150,180,255,.16); --head-font:var(--sf); --sb-col1:#5b8cff; --sb-col2:#e2455f; --grad-accent:linear-gradient(135deg,#3a6ad6,#e2455f); --on-accent:#f2f5ff; --ring:rgba(91,140,255,.75); } [data-bg="rossiya"] .scene{background:radial-gradient(ellipse 80% 62% at 50% -10%,#15224a,#0a1130 54%,#05081c 100%)} [data-bg="rossiya"] .b1{background:radial-gradient(circle,#dfe6f5,transparent 60%)} /* белый (приглушённо) */ [data-bg="rossiya"] .b2{background:radial-gradient(circle,#3a6ad6,transparent 60%)} /* синий */ [data-bg="rossiya"] .b3{background:radial-gradient(circle,#c23a52,transparent 62%)} /* красный (приглушённо) */ /* ТЕМА — «Капитал»: почти чёрно-зелёный фон, акцент золото, градиент золото→изумруд */ [data-bg="kapital"]{ --text:#f3f1e6; --text2:#bdc4ad; --muted:#7d8470; --gold:#ffd76a; --gold2:#ffe79c; --amber:#d8a93e; --green:#1fae7a; --money:#27c98c; --red:#ff6f7e; --blue:#6fcaa8; --violet:#c8d77a; --plat:#cdd0b8; --steel:#7f8a6f; --glass:rgba(8,16,12,.58); --bd:rgba(255,215,106,.16); --head-font:var(--sf); --sb-col1:#ffd76a; --sb-col2:#1fae7a; --grad-accent:linear-gradient(135deg,#ffd76a,#1fae7a); --on-accent:#1a2410; --ring:rgba(255,215,106,.75); } [data-bg="kapital"] .scene{background:radial-gradient(ellipse 78% 60% at 50% -10%,#0d1f18,#06120c 56%,#020805 100%)} [data-bg="kapital"] .b1{background:radial-gradient(circle,#d8a93e,transparent 60%)} [data-bg="kapital"] .b2{background:radial-gradient(circle,#1fae7a,transparent 60%)} [data-bg="kapital"] .b3{background:radial-gradient(circle,#ffd76a,transparent 62%)} /* ТЕМА — «Кремль»: тёмно-бордовый/винный фон, благородное золото, бордо+золото блобы */ [data-bg="kreml"]{ --text:#f5ece2; --text2:#c9b3a6; --muted:#8a7064; --gold:#e8c27a; --gold2:#f7dca0; --amber:#c79a4f; --green:#5fc99a; --money:#5fc99a; --red:#ff7a72; --blue:#c79ab0; --violet:#caa0b8; --plat:#cdbcb2; --steel:#8a6f78; --glass:rgba(28,12,18,.58); --bd:rgba(232,194,122,.18); --head-font:var(--sf); --sb-col1:#e8c27a; --sb-col2:#9c2e3e; --grad-accent:linear-gradient(135deg,#e8c27a,#c79a4f); --on-accent:#27101a; --ring:rgba(232,194,122,.75); } [data-bg="kreml"] .scene{background:radial-gradient(ellipse 78% 60% at 50% -10%,#3a1620,#1e0d12 54%,#0c0508 100%)} [data-bg="kreml"] .b1{background:radial-gradient(circle,#9c2e3e,transparent 60%)} /* бордо */ [data-bg="kreml"] .b2{background:radial-gradient(circle,#e8c27a,transparent 60%)} /* золото */ [data-bg="kreml"] .b3{background:radial-gradient(circle,#7a2230,transparent 62%)} /* тёмное бордо */ /* ТЕМА — «Сталь»: графитово-стальной фон, акцент стально-голубой/циан, сталь→циан */ [data-bg="stal"]{ --text:#eaf1f6; --text2:#a6b6c4; --muted:#6a7a88; --gold:#7fd0ff; --gold2:#b3e6ff; --amber:#4f9bc4; /* «gold»-акцент = циан */ --green:#3fe0c8; --money:#3fe0c8; --red:#ff6f8a; --blue:#5fb0ff; --violet:#9ab4cc; --plat:#bcc8d2; --steel:#8fb4d6; --glass:rgba(14,20,26,.58); --bd:rgba(143,180,214,.18); --head-font:var(--sf); --sb-col1:#7fd0ff; --sb-col2:#8fb4d6; --grad-accent:linear-gradient(135deg,#8fb4d6,#7fd0ff); --on-accent:#06141e; --ring:rgba(127,208,255,.75); } [data-bg="stal"] .scene{background:radial-gradient(ellipse 80% 60% at 50% -8%,#1c2832,#10171e 56%,#070b0f 100%)} [data-bg="stal"] .b1{background:radial-gradient(circle,#8fb4d6,transparent 60%)} [data-bg="stal"] .b2{background:radial-gradient(circle,#7fd0ff,transparent 60%)} [data-bg="stal"] .b3{background:radial-gradient(circle,#5d7a92,transparent 62%)} /* блобы видимы в новых тёмных темах (не трогаем исходное правило строки выше) */ [data-bg="rossiya"] .blob,[data-bg="kapital"] .blob,[data-bg="kreml"] .blob,[data-bg="stal"] .blob{display:block;opacity:.5} /* =================================================================== ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ (id ровно: aurora / grid / rubli) Самодостаточные слои поверх .scene (z-index:1), но ниже контента (.app z-index:1 / .vp>* z-index:2 — слои не перекрывают карточки, т.к. лежат фиксированным фоном за app). pointer-events:none. Заняты СВОИ слои-классы .auroralayer/.gridlayer/.rublilayer — существующие псевдоэлементы (.vp::before/.vp::after/.scene::*) НЕ трогаются. =================================================================== */ .auroralayer,.gridlayer,.rublilayer{position:fixed;inset:0;z-index:1;pointer-events:none;display:none;overflow:hidden} /* ЭФФЕКТ — «Северное сияние»: плавный градиентный свет вверху, медленный hue-сдвиг */ html.fx-aurora .auroralayer{display:block} .auroralayer{ height:62vh;inset:0 0 auto 0; background:linear-gradient(115deg, rgba(91,140,255,.18) 0%, rgba(62,224,160,.16) 30%, rgba(127,208,255,.16) 55%, rgba(182,168,255,.16) 80%, rgba(91,140,255,.18) 100%); background-size:260% 100%; filter:blur(36px) saturate(140%); -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); animation:auroraSlide 26s ease-in-out infinite,auroraHue 40s linear infinite; } @keyframes auroraSlide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} @keyframes auroraHue{to{filter:blur(36px) saturate(140%) hue-rotate(360deg)}} /* ЭФФЕКТ — «Техно-сетка»: тонкая техно-сетка по фону, очень медленное движение */ html.fx-grid .gridlayer{display:block} .gridlayer{ opacity:.5; background-image: linear-gradient(var(--bd) 1px,transparent 1px), linear-gradient(90deg,var(--bd) 1px,transparent 1px); background-size:46px 46px,46px 46px; -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000,transparent 75%); mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000,transparent 75%); animation:gridDrift 60s linear infinite; } @keyframes gridDrift{to{background-position:46px 46px,46px 46px}} /* ЭФФЕКТ — «Парящие рубли»: символы рубля дрейфуют вверх, чистый CSS (data-URI SVG) */ html.fx-rubli .rublilayer{display:block} .rublilayer{ opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Ctext x='30' y='60' font-family='Georgia,serif' font-size='34' fill='%23ffffff' fill-opacity='0.16'%3E%E2%82%BD%3C/text%3E%3Ctext x='150' y='130' font-family='Georgia,serif' font-size='26' fill='%23ffffff' fill-opacity='0.12'%3E%E2%82%BD%3C/text%3E%3Ctext x='70' y='190' font-family='Georgia,serif' font-size='30' fill='%23ffffff' fill-opacity='0.14'%3E%E2%82%BD%3C/text%3E%3C/svg%3E"); background-size:220px 220px; animation:rubliFloat 50s linear infinite; } @keyframes rubliFloat{from{background-position:0 0}to{background-position:0 -880px}} /* =================================================================== =================================================================== ТЕМЫ AVTOGATE — премиум-промышленный набор для платформы ворот/автоматики «Автоматик Гейт Системс» / AVTOGATE (Казань, дилер ГК «ДОРХАН»). Дизайн-язык: антрацит/графит/сталь + один сильный сигнальный акцент (янтарь/медь/электрик/сигнал-сталь) — без «дешёвого синего». Референсы: Hörmann (navy+amber), Alutech (графит+сталь), DoorHan (orange). Каждая тема переопределяет ПОЛНЫЙ набор токенов движка (--text/--text2/--muted, --gold/--gold2/--amber=основной акцент, --green/--money/--red, --blue/--violet/--plat/--steel, --glass/--bd/--panel-2, --head-font, --sb-col1/2, --grad-accent/--on-accent/--ring) + сцену и блобы. Имена токенов сохранены 1-в-1 для совместимости с ядром liga. =================================================================== */ /* ------------------------------------------------------------------- AVTOGATE (флагман, по умолчанию) — графит/антрацит + янтарь/медь. Контрольная панель цеха: тёмный сталь-графит, тёплый сигнал-янтарь. ------------------------------------------------------------------- */ [data-bg="avtogate"]{ --text:#e8edf3; --text2:#9aa6b4; --muted:#8d99a8; /* «gold»-акцент движка = янтарь/медь AVTOGATE */ --gold:#ffb020; --gold2:#ffc861; --amber:#c77b3c; --green:#48c98a; --money:#48c98a; --red:#ff6a6a; --blue:#7fa6d8; --violet:#b39ad6; --plat:#c2ccd6; --steel:#8794a2; --glass:rgba(18,22,28,.60); --bd:rgba(195,176,150,.34); --panel-2:rgba(255,255,255,.035); --head-font:var(--sf); --sb-col1:#ffb020; --sb-col2:#c77b3c; --grad-accent:linear-gradient(135deg,#ffb020,#c77b3c); --on-accent:#23160a; --ring:rgba(255,176,32,.7); } [data-bg="avtogate"] .scene{background:radial-gradient(ellipse 82% 64% at 50% -12%,#1b2026,#13171c 52%,#0c0f13 100%),radial-gradient(circle at 84% 88%,#241a0e,transparent 54%)} [data-bg="avtogate"] .b1{background:radial-gradient(circle,#c77b3c,transparent 60%)} [data-bg="avtogate"] .b2{background:radial-gradient(circle,#ffb020,transparent 60%)} [data-bg="avtogate"] .b3{background:radial-gradient(circle,#5d6b78,transparent 62%)} /* фирменный акцент: подсветка активного пункта тёплым янтарём */ [data-bg="avtogate"] .nav a.on{background:linear-gradient(135deg,rgba(255,176,32,.16),rgba(199,123,60,.07))} /* ------------------------------------------------------------------- STEEL — холодная щётка-сталь, монохром + один сдержанный тил. Прецизионная инженерия: нейтральные стальные тона, минимум цвета. ------------------------------------------------------------------- */ [data-bg="steel"]{ --text:#eef1f4; --text2:#9aa4ad; --muted:#69737c; /* «gold»-акцент = сдержанный тил (единственный цвет в монохроме) */ --gold:#2dd4bf; --gold2:#6ee7d6; --amber:#1aa392; --green:#3ddca0; --money:#3ddca0; --red:#ff6f7f; --blue:#8fa0ab; --violet:#a6b0ba; --plat:#c6ced6; --steel:#6f828a; --glass:rgba(26,29,33,.62); --bd:rgba(168,180,192,.16); --panel-2:rgba(255,255,255,.04); --head-font:var(--sf); --sb-col1:#9aa4ad; --sb-col2:#2dd4bf; --grad-accent:linear-gradient(135deg,#2dd4bf,#1aa392); --on-accent:#06201c; --ring:rgba(45,212,191,.7); } [data-bg="steel"] .scene{background:linear-gradient(168deg,#23272d,#1a1d21 56%,#101316 100%)} [data-bg="steel"] .b1{background:radial-gradient(circle,#6f828a,transparent 60%)} [data-bg="steel"] .b2{background:radial-gradient(circle,#aab6c0,transparent 60%)} [data-bg="steel"] .b3{background:radial-gradient(circle,#2dd4bf,transparent 62%)} /* «брашированный металл»: едва заметная вертикальная штриховка панелей */ [data-bg="steel"] .vp::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;background:repeating-linear-gradient(90deg,#fff 0,#fff 1px,transparent 1px,transparent 3px)} [data-bg="steel"] .nav a.on{background:linear-gradient(135deg,rgba(154,164,173,.16),rgba(45,212,191,.08))} /* ------------------------------------------------------------------- AMBER-NIGHT — тёплая «ночь цеха»: глубокий тёмный + медь/янтарь. Промышленный люкс: тёплый базовый тон, медный сигнал, печать-янтарь. ------------------------------------------------------------------- */ [data-bg="amber-night"]{ --text:#f3ead9; --text2:#bca98c; --muted:#857458; /* «gold»-акцент = насыщенный медь/янтарь */ --gold:#e8a13a; --gold2:#ffce7a; --amber:#b5702a; --green:#7ec98a; --money:#7ec98a; --red:#ff7a5e; --blue:#caa86e; --violet:#d8b48a; --plat:#cdbb9a; --steel:#9a8568; --glass:rgba(26,20,12,.62); --bd:rgba(220,180,120,.18); --panel-2:rgba(255,236,200,.04); --head-font:var(--sf); --sb-col1:#e8a13a; --sb-col2:#b5702a; --grad-accent:linear-gradient(135deg,#e8a13a,#b5702a); --on-accent:#231405; --ring:rgba(232,161,58,.72); } [data-bg="amber-night"] .scene{background:radial-gradient(ellipse 80% 62% at 50% -10%,#241a0e,#160f07 56%,#0c0805 100%),radial-gradient(circle at 18% 86%,#2e1f0c,transparent 52%)} [data-bg="amber-night"] .b1{background:radial-gradient(circle,#b5702a,transparent 60%)} [data-bg="amber-night"] .b2{background:radial-gradient(circle,#e8a13a,transparent 60%)} [data-bg="amber-night"] .b3{background:radial-gradient(circle,#7a5a30,transparent 62%)} /* фирменная «медная пыль» как фоновый слой акцента */ [data-bg="amber-night"] .blob{display:block;opacity:.42} [data-bg="amber-night"] .nav a.on{background:linear-gradient(135deg,rgba(232,161,58,.18),rgba(181,112,42,.08))} /* ------------------------------------------------------------------- BLUEPRINT — тёмный navy + сдержанный циан, техно-сетка чертежа. Технический язык: глубокий desaturated navy, циан только на акценте. ------------------------------------------------------------------- */ [data-bg="blueprint"]{ --text:#dce7f5; --text2:#90a0b8; --muted:#5f7088; /* «gold»-акцент = циан чертежа (на навигации/кнопках) */ --gold:#38bdf8; --gold2:#7dd3fc; --amber:#2a93c9; --green:#34d6b0; --money:#34d6b0; --red:#ff6d8a; --blue:#4f8fd6; --violet:#8aa0d8; --plat:#aebfd6; --steel:#6c83a4; --glass:rgba(11,18,32,.62); --bd:rgba(64,110,170,.22); --panel-2:rgba(120,170,230,.04); --head-font:var(--sf); --sb-col1:#38bdf8; --sb-col2:#2a6fb0; --grad-accent:linear-gradient(135deg,#38bdf8,#2a6fb0); --on-accent:#04121f; --ring:rgba(56,189,248,.78); } [data-bg="blueprint"] .scene{background:radial-gradient(ellipse 80% 62% at 50% -10%,#101a2e,#0b1220 55%,#070c16 100%)} [data-bg="blueprint"] .b1{background:radial-gradient(circle,#27568c,transparent 60%)} [data-bg="blueprint"] .b2{background:radial-gradient(circle,#38bdf8,transparent 60%)} [data-bg="blueprint"] .b3{background:radial-gradient(circle,#2dd4bf,transparent 62%)} /* «чертёжная сетка» — тонкие линии по фону всегда видны в этой теме */ [data-bg="blueprint"] .gridlayer{display:block;opacity:.32} [data-bg="blueprint"] .vp,[data-bg="blueprint"] .card{border-radius:14px} [data-bg="blueprint"] .nav a.on{background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(45,212,191,.07))} /* ------------------------------------------------------------------- LIGHT-PRO — премиум светлая: тёплая бумага + графит + латунь/navy. Дневной режим: тёплый off-white, графитовый текст, латунный акцент. ------------------------------------------------------------------- */ [data-bg="light-pro"]{ --text:#1c2430; --text2:#4b5563; --muted:#8a93a0; /* «gold»-акцент = латунь; navy используется для сплошных кнопок */ --gold:#b48a5a; --gold2:#caa779; --amber:#9a6f3f; --green:#1f8f63; --money:#1f8f63; --red:#cf3a52; --blue:#0b1b3a; --violet:#5a3fa0; --plat:#33415c; --steel:#3a4a68; --glass:rgba(251,250,247,.72); --bd:rgba(28,36,48,.14); --panel-2:rgba(11,27,58,.04); --head-font:var(--sf); --sb-col1:#b48a5a; --sb-col2:#0b1b3a; --grad-accent:linear-gradient(135deg,#0b1b3a,#26365c); /* navy-кнопки с латунным текстом */ --on-accent:#f0e3cf; --ring:rgba(180,138,90,.7); } [data-bg="light-pro"] .scene{background:linear-gradient(162deg,#f5f3ee,#efece4 52%,#e8e3d8 100%)} [data-bg="light-pro"] .vp::before{background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)} [data-bg="light-pro"] .side{background:linear-gradient(180deg,rgba(251,250,247,.9),rgba(244,241,234,.86));border-right:1px solid rgba(28,36,48,.12)} /* графитовый шильд бренда с латунной иконкой */ [data-bg="light-pro"] .brand .mk{background:linear-gradient(135deg,#0b1b3a,#26365c)} [data-bg="light-pro"] .brand .mk svg{stroke:#f0e3cf} /* сплошные navy-акценты — латунный текст */ [data-bg="light-pro"] .btn-g,[data-bg="light-pro"] .seg button.on,[data-bg="light-pro"] .chip.on,[data-bg="light-pro"] .nav a.nbadge{color:#f0e3cf} [data-bg="light-pro"] .nav a.on{background:linear-gradient(135deg,rgba(11,27,58,.10),rgba(180,138,90,.12));color:#0b1b3a} [data-bg="light-pro"] .av,[data-bg="light-pro"] .side .ava{color:#f0e3cf} [data-bg="light-pro"] th{color:#5a6573} [data-bg="light-pro"] #eqg stop:first-child{stop-color:rgba(180,138,90,.4)} /* липкие бары админки на светлом фоне */ [data-bg="light-pro"] .sa-bar,[data-bg="light-pro"] .ca-bar{background:rgba(250,248,243,.93)} [data-bg="light-pro"] #liga-ticker{background:rgba(251,250,247,.94);box-shadow:0 -2px 14px rgba(28,36,48,.06)} [data-bg="light-pro"] .tk-i{color:#5a6573}[data-bg="light-pro"] .tk-i b{color:#1c2430} /* блобы видимы в тёмных AVTOGATE-темах для глубины (light-pro — светлая, без блобов) */ [data-bg="avtogate"] .blob,[data-bg="steel"] .blob,[data-bg="blueprint"] .blob{display:block;opacity:.5} /* perf-режим: непрозрачные панели для тёмных и светлой темы AVTOGATE */ [data-bg="avtogate"] html.perf .panel,[data-bg="avtogate"] html.perf .vp,[data-bg="avtogate"] html.perf .kpi,[data-bg="avtogate"] html.perf .side,[data-bg="avtogate"] html.perf .modal, [data-bg="steel"] html.perf .panel,[data-bg="steel"] html.perf .vp,[data-bg="steel"] html.perf .kpi,[data-bg="steel"] html.perf .side,[data-bg="steel"] html.perf .modal, [data-bg="amber-night"] html.perf .panel,[data-bg="amber-night"] html.perf .vp,[data-bg="amber-night"] html.perf .kpi,[data-bg="amber-night"] html.perf .side,[data-bg="amber-night"] html.perf .modal, [data-bg="blueprint"] html.perf .panel,[data-bg="blueprint"] html.perf .vp,[data-bg="blueprint"] html.perf .kpi,[data-bg="blueprint"] html.perf .side,[data-bg="blueprint"] html.perf .modal{background:rgba(18,22,28,.95)!important} [data-bg="light-pro"] html.perf .panel,[data-bg="light-pro"] html.perf .vp,[data-bg="light-pro"] html.perf .kpi,[data-bg="light-pro"] html.perf .side,[data-bg="light-pro"] html.perf .modal{background:rgba(250,248,243,.96)!important} /* ================= РАЗДЕЛ «Mini App» (sec-miniapp.js) — телефон-мокап + хаб ================= */ /* Только новые классы с префиксом miniapp-, ядро liga-ui не трогаем. Тёмная тема кабинета. */ .miniapp-hub{max-width:1180px} .miniapp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px} .miniapp-title{font-family:var(--head-font);font-weight:800;font-size:28px;margin:0} .miniapp-lead{color:var(--text2);margin:6px 0 0;max-width:60ch;font-size:14.5px} .miniapp-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start} @media(max-width:900px){.miniapp-body{grid-template-columns:minmax(0,1fr)}} /* --- телефон --- */ .miniapp-phone{width:392px;max-width:100%;height:770px;display:flex;flex-direction:column; background:linear-gradient(180deg,rgba(20,28,46,.9),rgba(12,18,32,.94)); border:1px solid var(--bd);border-radius:42px;overflow:hidden;position:relative; box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)} .miniapp-statusbar{display:flex;justify-content:space-between;align-items:center;padding:12px 26px 4px; font-size:12px;color:var(--text2);font-family:var(--mono)} .miniapp-statusbar span:last-child{display:flex;gap:5px;opacity:.7} .miniapp-chrome{display:flex;justify-content:space-between;align-items:center;padding:8px 18px; border-bottom:1px solid var(--bd);color:var(--text2);font-size:12.5px} .miniapp-chrome b{color:var(--text);font-weight:700;font-size:12.5px;letter-spacing:.02em} .miniapp-profile{display:flex;align-items:center;gap:11px;padding:14px 18px} .miniapp-profile .ava{width:40px;height:40px;border-radius:12px;background:var(--grad-accent); color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px} .miniapp-profile b{display:block;font-size:14.5px} .miniapp-profile span{color:var(--text2);font-size:12px} .miniapp-tarif{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em; padding:4px 9px;border-radius:8px;background:rgba(232,194,122,.14);color:var(--gold);border:1px solid rgba(232,194,122,.25)} .miniapp-screen{flex:1;overflow-y:auto;padding:6px 15px 18px;scrollbar-width:none} .miniapp-screen::-webkit-scrollbar{display:none} .miniapp-screen .kpi{padding:13px;border-radius:16px;margin:0} .miniapp-screen .kpi .ic{width:32px;height:32px;border-radius:10px;margin-bottom:9px} .miniapp-screen .kpi .ic svg{width:17px;height:17px} .miniapp-screen .kpi .kv{font-size:19px} .miniapp-screen .kpi .lab{font-size:9.5px} .miniapp-screen .kpi .d{font-size:10.5px} .miniapp-screen .panel{padding:15px;margin-bottom:12px;border-radius:16px} .miniapp-screen .panel .ph .h{font-size:14px} .miniapp-screen .brow{margin-bottom:8px} .miniapp-screen .bnm{width:118px;font-size:11.5px} /* таб-бар + FAB */ .miniapp-tabbar{display:flex;align-items:flex-end;justify-content:space-around;gap:2px; padding:8px 10px 14px;border-top:1px solid var(--bd);background:rgba(10,16,28,.6);position:relative} .miniapp-tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted); font-size:10px;cursor:pointer;flex:1;padding:4px 0;transition:color .2s} .miniapp-tab svg{width:20px;height:20px} .miniapp-tab.on{color:var(--gold)} .miniapp-fab{width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;flex:0 0 auto; margin:0 6px -6px;background:var(--grad-accent);color:var(--on-accent); display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(232,194,122,.4)} .miniapp-fab svg{width:22px;height:22px} /* контентные блоки внутри экрана */ .miniapp-kgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px} .miniapp-two{display:grid;grid-template-columns:1fr;gap:0} .miniapp-bignum{font-family:var(--head-font);font-weight:800;font-size:26px;line-height:1.15;color:var(--gold2)} .miniapp-bignum span{display:block;font-family:var(--sf);font-weight:500;font-size:11.5px;color:var(--text2);margin-top:3px} .miniapp-bignum.sub{font-size:19px;color:var(--text);margin-top:12px} .miniapp-insight{font-size:13px;color:var(--text2);line-height:1.5} .miniapp-insight b{color:var(--text)} .miniapp-note{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:var(--text2); padding:10px 12px;border:1px dashed var(--bd);border-radius:12px;margin-top:4px} .miniapp-note b{color:var(--text)} .miniapp-pending{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px dashed var(--bd); border-radius:14px;color:var(--text2);background:var(--panel-2)} .miniapp-pending svg{color:var(--muted);flex:0 0 auto;margin-top:2px} .miniapp-pending b{display:block;color:var(--text);font-size:13.5px;margin-bottom:3px} .miniapp-pending span{font-size:12px;line-height:1.45;display:block} .miniapp-pending.big{margin-top:30px;padding:26px} .miniapp-fresh{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted); font-family:var(--mono);margin-top:6px;padding-top:8px;border-top:1px solid var(--bd)} .miniapp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;flex:0 0 auto} .miniapp-donut{display:flex;justify-content:center;padding:6px 0} /* бейджи качества/статуса */ .miniapp-badge{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.04em; padding:2px 7px;border-radius:7px;background:var(--panel-2);border:1px solid var(--bd);color:var(--text2);vertical-align:middle} .miniapp-badge.ok{color:var(--green);border-color:rgba(70,211,154,.35);background:rgba(70,211,154,.1)} .miniapp-badge.warn{color:var(--red);border-color:rgba(255,111,138,.35);background:rgba(255,111,138,.1)} /* правая колонка — паспорт */ .miniapp-passport{background:var(--glass);border:1px dashed var(--bd);border-radius:var(--radius-sm);padding:0 0 8px;margin-bottom:16px} .miniapp-passport .ph{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid var(--bd)} .miniapp-passport .ph .h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px} .miniapp-passport .ph .s{font-family:var(--mono);font-size:11px;color:var(--muted)} .miniapp-prow{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:9px 18px;font-size:12.5px;border-bottom:1px solid rgba(166,196,236,.06)} .miniapp-prow span{color:var(--muted)} .miniapp-prow div{color:var(--text2)} .miniapp-hint{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--text2); padding:13px 15px;border:1px solid var(--bd);border-radius:12px;background:var(--panel-2)} .miniapp-hint svg{flex:0 0 auto;margin-top:2px;color:var(--gold)} /* ===== Mini App v2: тренд-бары, строки-объекты, покрытие ===== */ .miniapp-trend{display:flex;align-items:flex-end;gap:5px;height:88px;padding:6px 0 2px} .miniapp-trend .mt-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px} .miniapp-trend .mt-col i{display:block;width:100%;max-width:20px;border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--gold),rgba(232,194,122,.15));min-height:6px} .miniapp-trend .mt-col span{font-size:8.5px;color:var(--muted);white-space:nowrap;font-family:var(--mono)} .miniapp-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid rgba(166,196,236,.07)} .miniapp-row:last-child{border-bottom:none} .miniapp-row .ic{width:34px;height:34px;border-radius:10px;flex:0 0 auto;background:rgba(232,194,122,.12); color:var(--gold);display:flex;align-items:center;justify-content:center} .miniapp-row .rmain{flex:1;min-width:0} .miniapp-row .rmain b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .miniapp-row .rmain span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .miniapp-row .rval{font-family:var(--head-font);font-weight:800;font-size:17px;color:var(--gold2);flex:0 0 auto} .miniapp-cov{font-size:10.5px;color:var(--muted);margin-top:8px} /* ===== Mini App v3: действия над контуром, живая шапка мокапа, фильтры, профиль ===== Горизонтальный скролл. Телефон-мокап фиксирован на 392px. Колонки хаба — грид-элементы, а их автоматический минимальный размер равен min-content, то есть тем же 392px; max-width:100% на телефоне при этом не срабатывал (проценты не разрешаются при вычислении intrinsic-размера трека). Из-за этого на 390px документ давал scrollWidth 406 при clientWidth 390. Лечится min-width:0 на колонках + minmax(0,1fr) на треках: тогда трек можно сжать, и max-width:100% у .miniapp-phone уже разрешается против определённой ширины колонки. Декоративные .blob лежат в .scene (position:fixed; overflow:hidden) — из потока выведены и обрезаны родителем, вклада в scrollWidth не дают. */ .miniapp-left,.miniapp-right{min-width:0;max-width:100%} .miniapp-prow div{min-width:0;overflow-wrap:anywhere} @media(max-width:560px){.miniapp-prow{grid-template-columns:1fr;gap:2px}} /* действия над контуром (Actions) */ .miniapp-actions{background:var(--glass);border:1px solid var(--bd);border-radius:var(--radius-sm);padding:14px 16px 12px;margin-bottom:16px} .miniapp-actions .ah{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;margin-bottom:11px} .miniapp-actions .ah svg{color:var(--gold);flex:0 0 auto} .miniapp-actions .ab{display:flex;flex-wrap:wrap;gap:8px} .miniapp-abtn{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:11px; border:1px solid var(--bd);background:var(--panel-2);color:var(--text);font:inherit;font-size:13px; cursor:pointer;transition:border-color .18s,background .18s} .miniapp-abtn svg{flex:0 0 auto} .miniapp-abtn:hover{border-color:var(--gold);background:var(--panel)} .miniapp-abtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .miniapp-abtn.primary{background:var(--grad-accent);color:var(--on-accent);border-color:transparent;font-weight:700} .miniapp-actions .au{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:10px;overflow-wrap:anywhere} .miniapp-actions .tk-msg{text-align:left;font-size:12px;min-height:15px;margin-top:7px;color:var(--text2)} /* шапка мокапа — настоящие управляющие элементы */ .miniapp-chrome{position:relative} .miniapp-cacts{display:flex;align-items:center;gap:4px} .miniapp-cbtn{cursor:pointer;border-radius:8px;padding:3px 6px;color:var(--text2);user-select:none; transition:color .18s,background .18s} .miniapp-cbtn.ic{display:inline-flex;align-items:center;justify-content:center} .miniapp-cbtn:hover{color:var(--gold);background:rgba(232,194,122,.12)} .miniapp-cbtn:focus-visible{outline:2px solid var(--gold);outline-offset:1px;color:var(--gold)} .miniapp-cmenu{position:absolute;top:calc(100% + 6px);right:10px;z-index:20;min-width:174px;padding:6px; background:var(--opt-bg,#1b2230);border:1px solid var(--bd);border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px} .miniapp-cmenu[hidden]{display:none} .miniapp-cmenu .mc-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0; border-radius:10px;background:transparent;color:var(--text2);font:inherit;font-size:13px;cursor:pointer;text-align:left} .miniapp-cmenu .mc-item svg{flex:0 0 auto} .miniapp-cmenu .mc-item:hover{background:var(--panel-2);color:var(--text)} .miniapp-cmenu .mc-item.on{color:var(--gold)} .miniapp-cmenu .mc-item:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .miniapp-phone.flash{box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 3px var(--gold),inset 0 1px 0 rgba(255,255,255,.05)} /* фильтры панели «Сегодня в работе» */ .miniapp-filters{display:flex;flex-direction:column;gap:7px;margin-bottom:10px} .miniapp-sel{width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:9px 10px;border-radius:11px; border:1px solid var(--bd);background:var(--panel-2);color:var(--text);font:inherit;font-size:12.5px;cursor:pointer} .miniapp-sel:focus{outline:none;border-color:var(--gold)} .miniapp-row.daycard{cursor:pointer} .miniapp-row.daycard:hover .rmain b{color:var(--gold)} .miniapp-row.daycard:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:10px} /* профиль сотрудника внутри мокапа */ .miniapp-profcard{display:flex;align-items:center;gap:11px;padding:4px 0 12px} .miniapp-profcard .ava{width:46px;height:46px;border-radius:14px;background:var(--grad-accent);color:var(--on-accent); display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:0 0 auto} .miniapp-profcard b{display:block;font-size:15px} .miniapp-profcard span{color:var(--text2);font-size:12px} .miniapp-inp{display:block;width:100%;box-sizing:border-box;margin-bottom:8px} .miniapp-pre{white-space:pre-wrap} /* ===== Mini App v4: таб-бар на пять вкладок (контур сотрудника + «Склад») ===== Раньше вкладок всегда было четыре. Пятая при 392px мокапа и при сужении вьюпорта до 320px упиралась в подпись «Мой день»: без min-width:0 flex-элемент не сжимается ниже min-content и таб-бар начинал распирать телефон. Новые правила — только под модификатором .compact, существующие не трогаем. */ .miniapp-tabbar.compact{gap:0;padding-left:6px;padding-right:6px} .miniapp-tabbar.compact .miniapp-tab{min-width:0;font-size:9px;padding:4px 1px} .miniapp-tabbar.compact .miniapp-tab svg{width:18px;height:18px} .miniapp-tabbar.compact .miniapp-tab span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center} .miniapp-tabbar.compact .miniapp-fab{margin:0 4px -6px} /* сворачиваемые группы меню (контур «Аналитика») */ .nav .nav-sep.clickable{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;transition:color .2s} .nav .nav-sep.clickable:hover{color:var(--text2)} .nav .nav-sep .nav-chev{margin-left:auto;opacity:.55;transition:transform .25s} .nav .nav-sep.closed .nav-chev{transform:rotate(-90deg)} /* =================================================================== НАТИВНЫЕ ВЫПАДАШКИ