/* ============================================================ RIGGO Design System — single self-contained stylesheet Локальный управленческий учёт. Без сети: системный шрифт, иконки — встроенный SVG-спрайт. Светлая/тёмная тема. Подключение: Тема: | "dark" ============================================================ */ /* ---------- 1. ТОКЕНЫ ---------- */ :root{ /* Бренд */ --rg-graphite:#141E2E; --rg-blue:#1E9DF0; --rg-blue-ink:#147bc4; --rg-green:#34B956; --rg-amber:#F5B301; --rg-red:#E5484D; /* Семантические поверхности (светлая тема — значения по умолчанию) */ --bg:#FBFCFE; --grid:rgba(30,157,240,.05); --surface:#ffffff; /* карточки */ --surface-2:#FAFBFD; /* подшапки/итоги */ --zebra:#FCFDFE; /* чётные строки */ --sidebar:#ffffff; --topbar:rgba(255,255,255,.78); --field:#F2F5F9; /* инпуты, фильтры */ /* Текст */ --ink:#141E2E; /* основной */ --ink-2:#5A6B82; /* вторичный */ --muted:#8a96a6; /* приглушённый */ --muted-2:#9aa6b5; /* плейсхолдеры */ --on-accent:#ffffff; /* текст на синем */ /* Линии */ --line:#E6EBF2; --line-2:#EEF2F7; --line-3:#F1F4F8; /* Состояния навигации */ --active-bg:#EAF5FE; --active-ink:#147bc4; /* Тинты иконок-плиток */ --tint-blue:#EAF5FE; --tint-green:#E8F7ED; --tint-amber:#FDF4E0; --tint-red:#FDEAEA; /* Статус-чипы */ --ok-bg:#e8f7ed; --ok-ink:#1a8f43; --warn-bg:#fdf4e0; --warn-ink:#946100; --info-bg:#e6f2fc; --info-ink:#147bc4; --bad-bg:#fdeaea; --bad-ink:#c9363b; /* Отступы (4/8/12/16/24…) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; /* Радиусы */ --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-pill:999px; /* Тени-уровни */ --sh-1:0 1px 2px rgba(20,30,46,.04); --sh-2:0 1px 2px rgba(20,30,46,.04),0 6px 20px rgba(20,30,46,.05); --sh-3:0 8px 30px rgba(20,30,46,.12); --sh-pop:0 10px 28px rgba(20,30,46,.16); /* Типошкала */ --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --t-display:26px; --t-h1:22px; --t-h2:18px; --t-h3:15px; --t-body:14px; --t-sm:13px; --t-xs:12px; --t-2xs:11px; /* Кольцо фокуса / переходы */ --ring:0 0 0 3px rgba(30,157,240,.35); --dur:.16s; } [data-theme="dark"]{ --bg:#0E1622; --grid:rgba(255,255,255,.035); --surface:#141E2E; --surface-2:#101a29; --zebra:#172234; --sidebar:#0B121C; --topbar:rgba(11,18,28,.82); --field:#172234; --ink:#E7EDF5; --ink-2:#aebccf; --muted:#8496b0; --muted-2:#6c7d94; --line:#243349; --line-2:#1d2940; --line-3:#1a2433; --active-bg:rgba(30,157,240,.16); --active-ink:#5cc0ff; --tint-blue:rgba(30,157,240,.18); --tint-green:rgba(52,185,86,.18); --tint-amber:rgba(245,179,1,.18); --tint-red:rgba(229,72,77,.18); --ok-bg:rgba(52,185,86,.16); --ok-ink:#7ee49b; --warn-bg:rgba(245,179,1,.16); --warn-ink:#f5c451; --info-bg:rgba(30,157,240,.16);--info-ink:#5cc0ff; --bad-bg:rgba(229,72,77,.16); --bad-ink:#ff8a8d; --sh-1:0 1px 2px rgba(0,0,0,.25); --sh-2:0 1px 2px rgba(0,0,0,.25),0 10px 26px rgba(0,0,0,.4); --sh-3:0 12px 34px rgba(0,0,0,.5); --sh-pop:0 12px 34px rgba(0,0,0,.55); } /* ---------- 2. БАЗА ---------- */ *,*::before,*::after{box-sizing:border-box} html{color-scheme:light} html[data-theme="dark"]{color-scheme:dark} body{ margin:0;font-family:var(--font);color:var(--ink); font-size:var(--t-body);line-height:1.5; background: linear-gradient(var(--grid) 1px,transparent 1px) 0 0/28px 28px, linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/28px 28px, var(--bg); -webkit-font-smoothing:antialiased; transition:background-color var(--dur),color var(--dur); } h1,h2,h3,p{margin:0} a{color:var(--rg-blue);text-decoration:none} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right} .pos{color:var(--ok-ink)} .neg{color:var(--bad-ink)} .muted{color:var(--muted)} .ink-2{color:var(--ink-2)} .u-right{text-align:right}.u-center{text-align:center} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)} /* Иконки спрайта */ .ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle} .ic-sm{width:15px;height:15px}.ic-lg{width:22px;height:22px} /* ---------- 3. ЛЭЙАУТ ---------- */ .rg-app{display:flex;min-height:100vh} .rg-sidebar{ width:252px;flex:none;background:var(--sidebar);border-right:1px solid var(--line); display:flex;flex-direction:column;padding:20px 0;position:sticky;top:0;height:100vh; transition:width var(--dur); } .rg-brand{display:flex;align-items:center;gap:12px;padding:0 22px 6px} .rg-brand img{width:40px;height:40px;border-radius:11px;display:block} .rg-brand b{font-size:18px;font-weight:800;letter-spacing:.16em;line-height:1} .rg-brand small{display:block;font-size:10.5px;color:var(--muted-2);letter-spacing:.04em;margin-top:3px} .rg-nav{display:flex;flex-direction:column;gap:3px;padding:22px 14px 0;flex:1;overflow:auto} .rg-nav-group{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--muted-2);padding:14px 12px 6px} .rg-nav-group:first-child{padding-top:4px} .rg-nav a{ display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md); color:var(--ink-2);font-size:var(--t-body);font-weight:500;position:relative;transition:background-color var(--dur),color var(--dur); } .rg-nav a .ic{color:var(--muted)} .rg-nav a:hover{background:var(--field)} .rg-nav a.is-active{background:var(--active-bg);color:var(--active-ink);font-weight:600} .rg-nav a.is-active .ic{color:var(--rg-blue)} .rg-nav a.is-active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--rg-blue)} .rg-side-foot{padding:14px 14px 0;margin:0 8px;border-top:1px solid var(--line)} .rg-user{display:flex;align-items:center;gap:11px;padding:8px 6px} .rg-user .name{font-size:var(--t-sm);font-weight:600} .rg-user .role{font-size:var(--t-2xs);color:var(--muted)} .rg-main{flex:1;min-width:0;display:flex;flex-direction:column} .rg-topbar{ height:64px;flex:none;display:flex;align-items:center;gap:14px;padding:0 32px; border-bottom:1px solid var(--line);background:var(--topbar); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20; } .rg-crumbs{font-size:var(--t-sm);color:var(--muted-2)} .rg-crumbs i{font-style:normal;opacity:.5;margin:0 7px} .rg-crumbs b{color:var(--ink);font-weight:600} .rg-content{padding:28px 32px 40px;display:flex;flex-direction:column;gap:24px} .rg-page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px} .rg-page-head h1{font-size:var(--t-display);font-weight:700;letter-spacing:-.01em} .rg-page-head .sub{font-size:var(--t-sm);color:var(--muted);margin-top:6px} .rg-grid{display:grid;gap:18px} .rg-grid.cols-4{grid-template-columns:repeat(4,1fr)} .rg-grid.cols-2{grid-template-columns:repeat(2,1fr)} .rg-grid.split{grid-template-columns:1.7fr 1fr} @media(max-width:1100px){.rg-grid.cols-4{grid-template-columns:repeat(2,1fr)}.rg-grid.split{grid-template-columns:1fr}} @media(max-width:780px){.rg-sidebar{display:none}.rg-content{padding:20px}.rg-grid.cols-4{grid-template-columns:1fr}} /* ---------- 4. КАРТОЧКИ ---------- */ .card{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-2)} .card-pad{padding:22px 24px} .card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px} .card-title{font-size:var(--t-h3);font-weight:700} .card-sub{font-size:var(--t-sm);color:var(--muted);margin-top:3px} /* KPI-карта */ .kpi{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:18px 20px;border-top:3px solid var(--line)} .kpi.accent-blue{border-top-color:var(--rg-blue)} .kpi.accent-green{border-top-color:var(--rg-green)} .kpi.accent-amber{border-top-color:var(--rg-amber)} .kpi.accent-graphite{border-top-color:var(--rg-graphite)} .kpi-head{display:flex;align-items:center;gap:10px;margin-bottom:14px} .kpi-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center} .kpi-ico.t-blue{background:var(--tint-blue);color:var(--rg-blue)} .kpi-ico.t-green{background:var(--tint-green);color:var(--rg-green)} .kpi-ico.t-amber{background:var(--tint-amber);color:#C98A00} .kpi-label{font-size:12.5px;color:var(--muted)} .kpi-value{font-family:var(--mono);font-size:27px;font-weight:700;letter-spacing:-.02em} .kpi-value small{font-size:14px;color:var(--muted);font-weight:500} .kpi-foot{display:flex;align-items:center;gap:8px;margin-top:12px} .kpi-foot .spark{margin-left:auto} /* ---------- 5. КНОПКИ ---------- */ .btn{ --b:var(--surface);--bd:var(--line);--fg:var(--ink); display:inline-flex;align-items:center;justify-content:center;gap:8px; font:inherit;font-size:var(--t-sm);font-weight:600;line-height:1; padding:0 16px;height:40px;border-radius:var(--r-lg); background:var(--b);color:var(--fg);border:1px solid var(--bd); cursor:pointer;white-space:nowrap;user-select:none; transition:background-color var(--dur),border-color var(--dur),box-shadow var(--dur),transform var(--dur); } .btn .ic{width:16px;height:16px} .btn:hover{background:var(--field)} .btn:active{transform:translateY(1px)} .btn:focus-visible{box-shadow:var(--ring)} .btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none} .btn-primary{--b:var(--rg-blue);--bd:var(--rg-blue);--fg:var(--on-accent);box-shadow:0 2px 8px rgba(30,157,240,.3)} .btn-primary:hover{--b:#178ad6;--bd:#178ad6} .btn-ghost{--b:transparent;--bd:transparent;--fg:var(--ink-2)} .btn-ghost:hover{background:var(--field)} .btn-danger{--b:var(--rg-red);--bd:var(--rg-red);--fg:#fff} .btn-danger:hover{--b:#cf3b40;--bd:#cf3b40} .btn-sm{height:32px;padding:0 12px;font-size:var(--t-xs);border-radius:var(--r-md)} .btn-lg{height:46px;padding:0 22px;font-size:var(--t-body)} .btn-icon{width:40px;height:40px;padding:0} .btn-icon.btn-sm{width:32px;height:32px} /* ---------- 6. ПОЛЯ ВВОДА ---------- */ .field-label{display:block;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);margin-bottom:6px} .field{ display:flex;align-items:center;gap:9px;width:100%;height:40px;padding:0 13px; background:var(--field);border:1px solid var(--line);border-radius:var(--r-lg); color:var(--ink);font:inherit;font-size:var(--t-sm);transition:border-color var(--dur),box-shadow var(--dur),background-color var(--dur); } .field::placeholder{color:var(--muted-2)} .field:hover{border-color:#cfd8e3} .field:focus,.field:focus-within{outline:none;border-color:var(--rg-blue);box-shadow:var(--ring);background:var(--surface)} .field .ic{color:var(--muted-2)} .field.is-error{border-color:var(--rg-red)} .field.is-error:focus{box-shadow:0 0 0 3px rgba(229,72,77,.3)} .field-hint{font-size:var(--t-2xs);color:var(--muted);margin-top:5px} .field-hint.err{color:var(--bad-ink)} input.field,select.field,textarea.field{appearance:none} select.field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa6b5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px} .kbd{margin-left:auto;font-size:var(--t-2xs);color:var(--muted-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px} /* Чекбокс / переключатель */ .check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:var(--t-sm)} .check input{position:absolute;opacity:0;width:0;height:0} .check .box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;transition:all var(--dur)} .check .box svg{width:12px;height:12px;stroke:#fff;stroke-width:3;opacity:0} .check input:checked + .box{background:var(--rg-blue);border-color:var(--rg-blue)} .check input:checked + .box svg{opacity:1} .check input:focus-visible + .box{box-shadow:var(--ring)} .switch{position:relative;width:38px;height:22px;flex:none;cursor:pointer} .switch input{position:absolute;opacity:0} .switch .track{position:absolute;inset:0;background:var(--line);border-radius:var(--r-pill);transition:background var(--dur)} .switch .track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform var(--dur)} .switch input:checked + .track{background:var(--rg-green)} .switch input:checked + .track::after{transform:translateX(16px)} /* ---------- 7. БЕЙДЖИ / ЧИПЫ ---------- */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:600;border-radius:var(--r-sm);padding:3px 10px;line-height:1.5} .badge .dot{width:6px;height:6px;border-radius:50%} .badge-ok{background:var(--ok-bg);color:var(--ok-ink)} .badge-ok .dot{background:var(--rg-green)} .badge-warn{background:var(--warn-bg);color:var(--warn-ink)} .badge-warn .dot{background:var(--rg-amber)} .badge-info{background:var(--info-bg);color:var(--info-ink)} .badge-info .dot{background:var(--rg-blue)} .badge-bad{background:var(--bad-bg);color:var(--bad-ink)} .badge-bad .dot{background:var(--rg-red)} .badge-neutral{background:var(--field);color:var(--ink-2)} .badge-neutral .dot{background:var(--muted)} .chip{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-sm);background:var(--field);border:1px solid var(--line);border-radius:9px;padding:7px 12px;color:var(--ink-2);cursor:pointer} .chip .ic{width:12px;height:12px;color:var(--muted-2)} .delta{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-xs);font-weight:700;border-radius:7px;padding:3px 8px} .delta.up{color:var(--ok-ink);background:var(--ok-bg)} .delta.down{color:var(--bad-ink);background:var(--bad-bg)} /* Аватары */ .avatar{width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex:none} .avatar.round{border-radius:50%} .avatar.sm{width:26px;height:26px;font-size:11px} .avatar-group{display:flex} .avatar-group .avatar{border:2px solid var(--surface);margin-left:-8px} .avatar-group .avatar:first-child{margin-left:0} /* Прогресс */ .progress{height:8px;background:var(--line-2);border-radius:var(--r-pill);overflow:hidden} .progress>span{display:block;height:100%;background:var(--rg-blue);border-radius:inherit;transition:width .3s} /* ---------- 8. ВКЛАДКИ ---------- */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)} .tabs a{padding:10px 14px;font-size:var(--t-sm);font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--dur)} .tabs a:hover{color:var(--ink-2)} .tabs a.is-active{color:var(--rg-blue);border-bottom-color:var(--rg-blue)} .segment{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);font-size:var(--t-sm);box-shadow:var(--sh-1)} .segment a{padding:9px 15px;color:var(--ink-2);cursor:pointer} .segment a.is-active{background:var(--ink);color:var(--bg);font-weight:600} /* ---------- 9. ТАБЛИЦЫ ---------- */ .table-wrap{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden} .table-toolbar{display:flex;align-items:center;gap:14px;padding:20px 24px 16px;flex-wrap:wrap} .table-toolbar .grow{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap} table.rg-table{width:100%;border-collapse:collapse;font-size:var(--t-sm)} .rg-table thead th{ position:sticky;top:0;z-index:1;text-align:left;font-weight:600;font-size:var(--t-xs); color:var(--muted);background:var(--surface-2);padding:11px 16px;letter-spacing:.02em; border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);white-space:nowrap; } .rg-table thead th:first-child{padding-left:24px}.rg-table thead th:last-child{padding-right:24px} .rg-table th.sortable{cursor:pointer} .rg-table th.sortable::after{content:"";display:inline-block;margin-left:6px;border:4px solid transparent;border-top-color:var(--muted-2);transform:translateY(2px);opacity:.4} .rg-table th.sort-asc::after{border-top-color:transparent;border-bottom-color:var(--rg-blue);transform:translateY(-2px);opacity:1} .rg-table th.sort-desc::after{border-top-color:var(--rg-blue);opacity:1} .rg-table tbody td{padding:13px 16px;border-bottom:1px solid var(--line-3);vertical-align:middle} .rg-table tbody td:first-child{padding-left:24px}.rg-table tbody td:last-child{padding-right:24px} .rg-table tbody tr:nth-child(even){background:var(--zebra)} .rg-table tbody tr:hover{background:var(--active-bg)} .rg-table tbody tr.is-selected{background:var(--active-bg)} .rg-table .col-num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap} .rg-table .col-date{font-family:var(--mono);color:var(--muted);white-space:nowrap} .rg-table tfoot td{padding:13px 16px;font-weight:700;background:var(--surface-2);border-top:1px solid var(--line-2)} .rg-table tfoot td:first-child{padding-left:24px}.rg-table tfoot td:last-child{padding-right:24px} .rg-table .row-expand td{background:var(--surface-2);padding:0} .rg-table .row-expand .inner{padding:14px 24px;color:var(--ink-2);font-size:var(--t-sm)} .row-toggle{cursor:pointer;color:var(--muted-2);transition:transform var(--dur);display:inline-flex} tr.is-open .row-toggle{transform:rotate(90deg);color:var(--rg-blue)} .row-actions{display:flex;gap:4px;opacity:0;transition:opacity var(--dur)} .rg-table tbody tr:hover .row-actions{opacity:1} .table-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-top:1px solid var(--line-2);font-size:var(--t-sm);color:var(--muted)} .pager{display:flex;gap:6px} .pager a{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer;transition:background-color var(--dur)} .pager a:hover{background:var(--field)} .pager a.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600} .pager a.is-disabled{color:var(--muted-2);pointer-events:none} /* ---------- 10. СОСТОЯНИЯ ---------- */ .state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:56px 24px;color:var(--muted)} .state .ic{width:40px;height:40px;color:var(--muted-2);stroke-width:1.5} .state .ico-wrap{width:64px;height:64px;border-radius:18px;background:var(--field);display:flex;align-items:center;justify-content:center;margin-bottom:4px} .state h3{font-size:var(--t-h3);color:var(--ink)} .state p{max-width:340px;font-size:var(--t-sm);text-wrap:pretty} .skeleton{background:linear-gradient(90deg,var(--line-2) 25%,var(--line-3) 37%,var(--line-2) 63%);background-size:400% 100%;animation:rg-shimmer 1.3s ease infinite;border-radius:6px} @keyframes rg-shimmer{0%{background-position:100% 0}100%{background-position:0 0}} .skeleton-row{height:14px;margin:14px 24px} @media(prefers-reduced-motion:reduce){.skeleton{animation:none}} /* ---------- 11. ТОСТЫ ---------- */ .toast-stack{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:80} .toast{display:flex;align-items:flex-start;gap:11px;min-width:280px;max-width:380px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--rg-blue);border-radius:var(--r-lg);box-shadow:var(--sh-pop);padding:13px 15px;animation:rg-slide-in var(--dur) ease} .toast.ok{border-left-color:var(--rg-green)} .toast.warn{border-left-color:var(--rg-amber)} .toast.bad{border-left-color:var(--rg-red)} .toast .ic{margin-top:1px;width:18px;height:18px} .toast.ok .ic{color:var(--rg-green)} .toast.bad .ic{color:var(--rg-red)} .toast.warn .ic{color:var(--rg-amber)} .toast .t-title{font-weight:600;font-size:var(--t-sm)} .toast .t-text{font-size:var(--t-xs);color:var(--muted);margin-top:2px} .toast .t-close{margin-left:auto;color:var(--muted-2);cursor:pointer;background:none;border:none;padding:0} @keyframes rg-slide-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------- 12. МОДАЛКИ ---------- */ .overlay{position:fixed;inset:0;background:rgba(20,30,46,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:90;padding:24px;animation:rg-fade var(--dur) ease} .modal{width:100%;max-width:480px;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden} .modal-head{display:flex;align-items:center;gap:12px;padding:20px 22px 0} .modal-head h2{font-size:var(--t-h2);font-weight:700;flex:1} .modal-body{padding:14px 22px 4px;color:var(--ink-2);font-size:var(--t-sm)} .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px 22px} @keyframes rg-fade{from{opacity:0}to{opacity:1}} /* ---------- 13. ДРОПДАУН / ТУЛТИП ---------- */ .dropdown{position:relative;display:inline-flex} .menu{position:absolute;top:calc(100% + 6px);left:0;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-pop);padding:6px;z-index:60} .menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);color:var(--ink-2);font-size:var(--t-sm);cursor:pointer} .menu a:hover{background:var(--field);color:var(--ink)} .menu a .ic{width:16px;height:16px;color:var(--muted)} .menu .sep{height:1px;background:var(--line-2);margin:6px 4px} .menu a.danger{color:var(--bad-ink)}.menu a.danger .ic{color:var(--bad-ink)} .tip{position:relative;display:inline-flex} .tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(.96);white-space:nowrap;background:var(--rg-graphite);color:#fff;font-size:var(--t-2xs);font-weight:500;padding:5px 9px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity var(--dur),transform var(--dur)} .tip::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--rg-graphite);opacity:0;transition:opacity var(--dur)} .tip:hover::after{opacity:1;transform:translateX(-50%) scale(1)} .tip:hover::before{opacity:1} /* ---------- 14. ГРАФИКИ (хелперы) ---------- */ .legend{display:flex;gap:16px;font-size:var(--t-xs);color:var(--ink-2)} .legend span{display:flex;align-items:center;gap:6px} .legend i{width:9px;height:9px;border-radius:3px;display:inline-block} .spark{display:block} .donut-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center} .donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .donut-center b{font-family:var(--mono);font-size:22px;font-weight:700} .donut-center small{font-size:var(--t-2xs);color:var(--muted)} /* ---------- ИИ-ассистент «Лёва» ---------- */ .leva-fab{position:fixed;right:24px;bottom:24px;width:60px;height:60px;border-radius:var(--r-pill); border:none;padding:0;cursor:pointer;background:var(--rg-graphite);box-shadow:var(--sh-pop); z-index:60;transition:transform var(--dur),box-shadow var(--dur);overflow:hidden} .leva-fab img{width:100%;height:100%;display:block;object-fit:cover} .leva-fab:hover{transform:translateY(-2px) scale(1.05)} .leva-fab.is-open{transform:scale(.92)} .leva-panel{position:fixed;right:24px;bottom:96px;width:380px;max-width:calc(100vw - 32px); height:560px;max-height:calc(100vh - 130px);background:var(--surface);border:1px solid var(--line); border-radius:var(--r-xl);box-shadow:var(--sh-3);z-index:60;display:flex;flex-direction:column;overflow:hidden} .leva-panel[hidden]{display:none} /* фикс: класс с display:flex перебивал [hidden] → окно не закрывалось */ .leva-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-2); background:var(--surface-2)} .leva-ava{width:34px;height:34px;border-radius:var(--r-pill);background:var(--rg-graphite)} .leva-title b{display:block;font-size:var(--t-h3);color:var(--ink)} .leva-title small{font-size:var(--t-2xs);color:var(--muted)} .leva-x{margin-left:auto;border:none;background:transparent;color:var(--muted);cursor:pointer; font-size:16px;width:28px;height:28px;border-radius:var(--r-sm);line-height:1} .leva-x+.leva-x{margin-left:0} .leva-x:hover{background:var(--field);color:var(--ink)} .leva-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px} .leva-msg{display:flex;gap:8px;max-width:100%} .leva-user{justify-content:flex-end} .leva-ava-sm{width:26px;height:26px;border-radius:var(--r-pill);background:var(--rg-graphite);flex:none;align-self:flex-end} .leva-bubble{padding:9px 12px;border-radius:var(--r-lg);font-size:var(--t-sm);line-height:1.45; max-width:80%;word-wrap:break-word;white-space:normal} .leva-assistant .leva-bubble{background:var(--field);color:var(--ink);border-bottom-left-radius:4px} .leva-user .leva-bubble{background:var(--rg-blue);color:var(--on-accent);border-bottom-right-radius:4px} .leva-wait{color:var(--muted);font-size:18px;letter-spacing:2px;animation:leva-blink 1.2s infinite} @keyframes leva-blink{0%,100%{opacity:.4}50%{opacity:1}} .leva-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line-2);align-items:flex-end} .leva-form textarea{flex:1;resize:none;border:1px solid var(--line);background:var(--field); border-radius:var(--r-md);padding:9px 11px;font:inherit;font-size:var(--t-sm);color:var(--ink); max-height:120px;outline:none} .leva-form textarea:focus{border-color:var(--rg-blue);box-shadow:var(--ring)} .leva-send{flex:none;width:38px;height:38px;border:none;border-radius:var(--r-md);cursor:pointer; background:var(--rg-blue);color:var(--on-accent);font-size:15px} .leva-send:hover{background:var(--rg-blue-ink)} /* ---------- ПОЛИРОВКА (дашборд офиса) ---------- */ .kpi{padding:20px 22px;transition:transform var(--dur),box-shadow var(--dur);border-top-width:3px} .kpi:hover{transform:translateY(-3px);box-shadow:var(--sh-3)} a.kpi{cursor:pointer} a.kpi:hover{border-top-color:var(--rg-blue)} .kpi-head{margin-bottom:16px} .kpi-ico{width:38px;height:38px;border-radius:11px} .kpi-label{font-size:13px;color:var(--ink-2);font-weight:500} .kpi-value{font-size:25px;font-weight:700;letter-spacing:-.02em;white-space:nowrap} /* P&L / позиция — нарядные таблицы */ .card .rg-table tbody tr{transition:background-color var(--dur)} .card .rg-table tbody tr:hover{background:var(--field)} .card .rg-table tbody td{padding:12px 4px;border-bottom:1px solid var(--line-3)} .card .rg-table tbody tr[style*="700"]{background:var(--surface-2)} .card .rg-table tbody tr[style*="700"] td{border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px} .card .rg-table tbody tr:last-child[style*="700"] td{color:var(--rg-blue)} details > summary{outline:none} details[open] > summary svg.row-toggle,details[open] > summary{color:var(--rg-blue)} /* ---------- 15. ЛЁВА — маскот-ассистент ---------- */ /* Полотно: на весь экран, клики проходят сквозь. Ниже модалок (90), выше меню. */ #leva-stage{position:fixed;inset:0;z-index:75;pointer-events:none;overflow:hidden} /* Бродячий львёнок: позицию/флип задаёт JS трансформом. */ #leva{position:fixed;top:0;left:0;width:84px;height:84px;pointer-events:auto;cursor:pointer; will-change:transform;transition:filter var(--dur);transform-origin:center bottom;outline:none} #leva:focus-visible{filter:drop-shadow(0 0 0 var(--rg-blue))} #leva svg{display:block;overflow:visible;filter:drop-shadow(0 4px 6px rgba(20,30,46,.18))} /* Заливки частей (две брендовые + кремовое тело). */ #lv-body,#lv-face,.lv-ear{fill:#F4D9A6} #lv-belly,#lv-muzzle{fill:#FCEFD2} /* подсветлённое тело */ .lv-ear-in{fill:var(--rg-graphite)} .lv-leg,#lv-paw-front rect,#lv-paw-front circle{fill:#F4D9A6} .lv-eye{fill:var(--rg-graphite)} .lv-eye-hl{fill:#fff} .lv-lid{fill:#F4D9A6} #lv-shadow{fill:rgba(20,30,46,.16)} #lv-yawn{fill:var(--rg-graphite)} /* Точки трансформа для частей. */ #lv-puppet{transform-origin:48px 88px} #lv-tail{transform-origin:30px 70px} #lv-paw-front{transform-origin:62px 60px} #lv-leg-fl,#lv-leg-fr{transform-origin:46px 76px} #lv-leg-bl,#lv-leg-br{transform-origin:38px 76px} .lv-lid{transform-origin:center top;transform:scaleY(0)} /* веки открыты */ #lv-head{transform-origin:58px 48px} #lv-zzz{opacity:0} .lv-z{fill:var(--rg-blue);font:700 11px/1 var(--font)} /* — IDLE: дыхание, моргание, лёгкий мах хвоста — */ #leva[data-state="idle"] #lv-puppet{animation:lv-breathe 3.2s ease-in-out infinite} #leva[data-state="idle"] .lv-lid{animation:lv-blink 4.6s infinite} #leva[data-state="idle"] #lv-tail{animation:lv-tail 3.6s ease-in-out infinite} @keyframes lv-breathe{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1.5px) scaleY(1.03)}} @keyframes lv-blink{0%,92%,100%{transform:scaleY(0)}95%,97%{transform:scaleY(1)}} @keyframes lv-tail{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}} /* — WALK: цикл лап + покачивание корпуса — */ #leva[data-state="walk"] #lv-puppet{animation:lv-bob .42s ease-in-out infinite} #leva[data-state="walk"] #lv-leg-fl, #leva[data-state="walk"] #lv-leg-br{animation:lv-stepA .42s ease-in-out infinite} #leva[data-state="walk"] #lv-leg-fr, #leva[data-state="walk"] #lv-leg-bl{animation:lv-stepB .42s ease-in-out infinite} #leva[data-state="walk"] #lv-tail{animation:lv-tail 1s ease-in-out infinite} @keyframes lv-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(1.5deg)}} @keyframes lv-stepA{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}} @keyframes lv-stepB{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}} /* — JUMP: поджать лапы, прижать уши/хвост — */ #leva[data-state="jump"] .lv-leg{transform:rotate(0) translateY(-3px)} #leva[data-state="jump"] #lv-puppet{transform:scaleY(1.04)} #leva[data-state="jump"] #lv-tail{transform:rotate(-22deg)} /* — SIT: присел, веки полуприкрыты, хвост обвит — */ #leva[data-state="sit"] #lv-puppet{transform:translateY(4px) scaleY(.94)} #leva[data-state="sit"] #lv-tail{animation:lv-tail 2.4s ease-in-out infinite} /* — WAVE: машет передней лапой — */ #leva[data-state="wave"] #lv-paw-front{animation:lv-wave .32s ease-in-out 3} @keyframes lv-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-58deg)}} /* — HAPPY: пружинные подскоки, уши вверх — */ #leva[data-state="happy"] #lv-puppet{animation:lv-hop .34s cubic-bezier(.3,1.4,.5,1) 3} @keyframes lv-hop{0%,100%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-14px) scaleY(1.06)}60%{transform:translateY(0) scaleY(.92)}} /* — SLEEP: зевок → лёг, веки закрыты, Zzz всплывает — */ #leva[data-state="sleep"] #lv-puppet{animation:lv-yawn 1.1s ease forwards, lv-lie .9s ease 1.1s forwards} #leva[data-state="sleep"] .lv-lid{transform:scaleY(1)} /* глаза закрыты */ #leva[data-state="sleep"] #lv-yawn{animation:lv-yawn-mouth 1.1s ease forwards} #leva[data-state="sleep"] #lv-zzz{animation:lv-zzz 2.4s ease-in-out .9s infinite} @keyframes lv-yawn{0%{transform:translateY(0)}40%{transform:translateY(-3px) scaleY(1.05)}100%{transform:translateY(0)}} @keyframes lv-yawn-mouth{0%,100%{ry:0}25%,45%{ry:5px}} @keyframes lv-lie{to{transform:translateY(8px) rotate(-90deg) translateX(-6px)}} @keyframes lv-zzz{0%{opacity:0;transform:translateY(4px)}30%{opacity:1}100%{opacity:0;transform:translateY(-10px)}} /* — PARK: спокойный аватар в углу — */ #leva[data-state="park"]{filter:none} #leva[data-state="park"] svg{filter:drop-shadow(0 6px 14px rgba(20,30,46,.22))} #leva[data-state="park"]::after{content:"";position:absolute;inset:-4px;border-radius:50%; box-shadow:var(--sh-2);background:var(--surface);z-index:-1;border:1px solid var(--line)} /* Тумблер «успокоить Лёву». */ #leva-calm{position:fixed;right:22px;bottom:118px;z-index:76;pointer-events:auto; width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-pill); background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2); color:var(--muted);cursor:pointer;transition:color var(--dur),transform var(--dur)} #leva-calm:hover{color:var(--rg-blue);transform:scale(1.06)} #leva-calm[aria-pressed="true"]{color:var(--rg-blue);border-color:var(--rg-blue)} #leva-stage[data-calm="1"] #leva-calm{bottom:22px} /* парковка — кнопка под аватаром */ /* РАСТРОВЫЙ режим: показываем кадр спрайт-листа вместо SVG. */ #leva[data-renderer="raster"] #leva-svg{display:none} #leva[data-renderer="raster"] #leva-raster{display:block;width:100%;height:100%; background-image:url('leva_sprite.png');background-repeat:no-repeat;image-rendering:auto} /* Движок ожил → прячем старую статичную кнопку-аватар (#levaFab). Если leva.js не загрузился — класс не появится, фаб останется как фолбэк. */ body.leva-live .leva-fab{display:none!important} /* Уважаем prefers-reduced-motion: без бродяжничества и анимаций частей. */ @media (prefers-reduced-motion: reduce){ #leva *{animation:none!important} #leva-stage{pointer-events:none} #leva{pointer-events:auto} } /* ---------- Кнопка анимации Лёвы в топбаре (вкл/выкл) ---------- */ #animBtn .anim-off{display:none} #animBtn[aria-pressed="false"] .anim-on{display:none} #animBtn[aria-pressed="false"] .anim-off{display:block} #leva-calm{display:none} /* управление перенесено в топбар, плавающий тумблер скрыт */