/* ========================================================================== MVAS Tracker — дизайн-система. Один источник правды для цветов, отступов, типографики и компонентов. Никаких утилит «на все случаи»: только то, что реально используется. ========================================================================== */ :root{ /* Поверхности и текст */ --bg:#f6f7f9; --surface:#ffffff; --surface-subtle:#f9fafb; --surface-hover:#f3f4f6; --sidebar-bg:#0f172a; --sidebar-text:#94a3b8; --sidebar-text-strong:#f1f5f9; --sidebar-hover:#1e293b; --sidebar-active:#1d4ed8; --sidebar-border:#1e293b; --text:#111827; --text-secondary:#4b5563; --text-muted:#6b7280; --text-inverse:#ffffff; --border:#e5e7eb; --border-strong:#d1d5db; /* Семантика */ --primary:#2563eb; --primary-hover:#1d4ed8; --primary-soft:#eff6ff; --primary-border:#bfdbfe; --success:#16a34a; --success-soft:#f0fdf4; --success-border:#bbf7d0; --warning:#d97706; --warning-soft:#fffbeb; --warning-border:#fde68a; --danger:#dc2626; --danger-soft:#fef2f2; --danger-border:#fecaca; --info:#0284c7; --info-soft:#f0f9ff; --info-border:#bae6fd; --neutral-soft:#f3f4f6; /* Отступы 4/8 */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; /* Радиусы */ --r-control:8px; --r-card:12px; --r-panel:16px; --r-pill:999px; /* Тени — намеренно слабые, основной разделитель это граница */ --shadow-sm:0 1px 2px rgba(16,24,40,.05); --shadow-md:0 4px 12px rgba(16,24,40,.08); --shadow-lg:0 16px 40px rgba(16,24,40,.16); --sidebar-w:248px; --topbar-h:60px; --font:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, "Helvetica Neue",Arial,"Noto Sans",sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --t-fast:120ms cubic-bezier(.4,0,.2,1); --t-base:170ms cubic-bezier(.4,0,.2,1); } /* Тёмная тема включается вручную из настроек: data-theme="dark" на . Автоматически по системной схеме не переключаемся — оператор смотрит в панель часами, и внезапная смена темы сбивает. */ html[data-theme="dark"]{ --bg:#0b0f17; --surface:#131822; --surface-subtle:#171d29; --surface-hover:#1c2331; --sidebar-bg:#080b11; --sidebar-text:#8a94a6; --sidebar-text-strong:#eef2f8; --sidebar-hover:#161c27; --sidebar-active:#1d4ed8; --sidebar-border:#1a212e; --text:#e8ecf3; --text-secondary:#aab3c2; --text-muted:#7b8698; --text-inverse:#0b0f17; --border:#232b39; --border-strong:#323c4d; --primary:#3b82f6; --primary-hover:#60a5fa; --primary-soft:#132039; --primary-border:#1e3a6b; --success:#4ade80; --success-soft:#0f2418; --success-border:#1c4231; --warning:#fbbf24; --warning-soft:#2a1f0b; --warning-border:#4a3411; --danger:#f87171; --danger-soft:#2a1315; --danger-border:#4d2226; --info:#38bdf8; --info-soft:#0d2432; --info-border:#14405c; --neutral-soft:#1b2230; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.45); --shadow-lg:0 16px 40px rgba(0,0,0,.6); } /* ---------------------------------------------------------------- Базовое */ *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:var(--font); font-size:14px; line-height:1.55; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:var(--primary);text-decoration:none} a:hover{color:var(--primary-hover)} h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em} h1{font-size:24px;line-height:1.25} h2{font-size:17px;line-height:1.35} h3{font-size:15px;line-height:1.4} p{margin:0} hr{border:none;border-top:1px solid var(--border);margin:var(--s5) 0} .hide{display:none!important} .mono{font-family:var(--mono);font-size:12.5px;font-feature-settings:"liga" 0} .num,.tabular{font-variant-numeric:tabular-nums} .muted{color:var(--text-muted)} .note{font-size:12.5px;line-height:1.5;color:var(--text-muted)} .pos{color:var(--success)} .neg{color:var(--danger)} .break{word-break:break-all} .nowrap{white-space:nowrap} .right{text-align:end} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* Фокус виден всегда — панелью пользуются с клавиатуры */ :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:var(--r-control); } ::selection{background:var(--primary);color:#fff} /* -------------------------------------------------------------- Оболочка */ .shell{display:flex;min-height:100vh} .sidebar{ position:fixed;inset-block:0;inset-inline-start:0; width:var(--sidebar-w); background:var(--sidebar-bg); border-inline-end:1px solid var(--sidebar-border); display:flex;flex-direction:column; z-index:40; transition:transform var(--t-base); } .sidebar__brand{ display:flex;align-items:center;gap:10px; height:var(--topbar-h);padding-inline:var(--s5); border-bottom:1px solid var(--sidebar-border); color:var(--sidebar-text-strong); flex-shrink:0; } .sidebar__logo{ width:28px;height:28px;border-radius:7px;flex-shrink:0; background:linear-gradient(135deg,#2563eb,#0ea5e9); display:grid;place-items:center; font-size:13px;font-weight:700;color:#fff;letter-spacing:-.03em; } .sidebar__title{font-size:14.5px;font-weight:600;letter-spacing:-.01em} .sidebar__nav{flex:1;overflow-y:auto;padding:var(--s4) var(--s3);min-height:0} .sidebar__group{margin-bottom:var(--s5)} .sidebar__group-label{ font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:#64748b;padding:0 var(--s3) var(--s2); } .sidebar__link{ display:flex;align-items:center;gap:10px; padding:8px var(--s3);margin-bottom:2px; border-radius:var(--r-control); color:var(--sidebar-text); font-size:13.5px;font-weight:500; line-height:1.35; transition:background var(--t-fast),color var(--t-fast); } .sidebar__link:hover{background:var(--sidebar-hover);color:var(--sidebar-text-strong)} .sidebar__link.is-active{background:var(--sidebar-active);color:#fff} .sidebar__link svg{width:17px;height:17px;flex-shrink:0;opacity:.9} .sidebar__link.is-active svg{opacity:1} .sidebar__footer{ border-top:1px solid var(--sidebar-border); padding:var(--s3);flex-shrink:0; } .sidebar__status{ display:flex;align-items:center;gap:var(--s2); padding:6px var(--s3);font-size:12px;color:var(--sidebar-text); } .sidebar__logout{ display:flex;align-items:center;gap:10px;width:100%; padding:8px var(--s3);border-radius:var(--r-control); background:transparent;border:none;cursor:pointer; color:var(--sidebar-text);font:inherit;font-size:13.5px;text-align:start; transition:background var(--t-fast),color var(--t-fast); } .sidebar__logout:hover{background:var(--sidebar-hover);color:var(--sidebar-text-strong)} .sidebar__logout svg{width:17px;height:17px;flex-shrink:0} .dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex-shrink:0} .dot--ok{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16)} .dot--live{background:#22c55e;animation:pulse 2s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .main{ flex:1;min-width:0; margin-inline-start:var(--sidebar-w); display:flex;flex-direction:column; } .topbar{ position:sticky;top:0;z-index:30; height:var(--topbar-h);flex-shrink:0; display:flex;align-items:center;gap:var(--s3); padding-inline:var(--s6); background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border); } .topbar__crumbs{ display:flex;align-items:center;gap:var(--s2); font-size:13.5px;color:var(--text-muted);min-width:0;flex:1; } .topbar__crumbs b{color:var(--text);font-weight:600} .topbar__sep{color:var(--border-strong)} .topbar__actions{display:flex;align-items:center;gap:var(--s2);flex-shrink:0} .burger{ display:none;width:36px;height:36px;flex-shrink:0; align-items:center;justify-content:center; border:1px solid var(--border);border-radius:var(--r-control); background:var(--surface);cursor:pointer;color:var(--text-secondary); } .burger svg{width:18px;height:18px} .view{padding:var(--s6);flex:1;max-width:1440px;width:100%} .scrim{ position:fixed;inset:0;z-index:35; background:rgba(15,23,42,.5); opacity:0;pointer-events:none;transition:opacity var(--t-base); } .scrim.is-open{opacity:1;pointer-events:auto} /* ------------------------------------------------------- Шапка страницы */ .page-head{ display:flex;align-items:flex-start;gap:var(--s4); flex-wrap:wrap;margin-bottom:var(--s6); } .page-head__text{flex:1 1 320px;min-width:0} .page-head__sub{margin-top:var(--s1);font-size:13.5px;color:var(--text-muted)} .page-head__actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center} .back-link{ display:inline-flex;align-items:center;gap:6px; font-size:13px;color:var(--text-muted);margin-bottom:var(--s3); } .back-link:hover{color:var(--text)} .back-link svg{width:14px;height:14px} /* ---------------------------------------------------------------- Карточки */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); margin-bottom:var(--s4); } .card--flush{padding:0} .card__head{ display:flex;align-items:flex-start;gap:var(--s3);flex-wrap:wrap; padding:var(--s4) var(--s5); border-bottom:1px solid var(--border); } .card__head-text{flex:1 1 240px;min-width:0} .card__head-actions{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap} .card__body{padding:var(--s5)} .card__body--tight{padding:var(--s4) var(--s5)} .card__foot{ padding:var(--s3) var(--s5);border-top:1px solid var(--border); background:var(--surface-subtle); border-radius:0 0 var(--r-card) var(--r-card); font-size:12.5px;color:var(--text-muted); } .section-title{font-size:15px;font-weight:600} .section-desc{font-size:12.5px;color:var(--text-muted);margin-top:2px} /* ------------------------------------------------------------------ Сетки */ .grid{display:grid;gap:var(--s3)} .grid--kpi4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid--kpi{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))} .grid--form{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)} .grid--auto{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .grid--full{grid-column:1/-1} .stack{display:flex;flex-direction:column;gap:var(--s4)} .stack--sm{gap:var(--s2)} .inline{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap} .inline--end{justify-content:flex-end} .spacer{flex:1} /* -------------------------------------------------------------- KPI-плитки */ .kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--s4); min-width:0; } .kpi--flat{background:var(--surface-subtle);border-color:transparent} .kpi__label{ font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--text-muted); display:flex;align-items:center;gap:6px; } .kpi__value{ margin-top:6px;font-size:26px;font-weight:600;letter-spacing:-.02em; font-variant-numeric:tabular-nums;line-height:1.15; overflow-wrap:anywhere; } .kpi__value--lg{font-size:34px} .kpi__value--sm{font-size:21px} .kpi__meta{margin-top:var(--s1);font-size:12px;color:var(--text-muted);line-height:1.4} .kpi--primary .kpi__value{color:var(--text)} /* ------------------------------------------------------------------ Кнопки */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:38px;padding:0 14px; font-family:inherit;font-size:13.5px;font-weight:500;line-height:1.2; border-radius:var(--r-control); border:1px solid var(--border-strong); background:var(--surface);color:var(--text); cursor:pointer;white-space:normal;text-align:center; transition:background var(--t-fast),border-color var(--t-fast), color var(--t-fast),opacity var(--t-fast); } .btn:hover{background:var(--surface-hover)} .btn svg{width:15px;height:15px;flex-shrink:0} .btn--primary{background:var(--primary);border-color:var(--primary);color:#fff} .btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)} .btn--ghost{background:transparent;border-color:transparent;color:var(--text-secondary)} .btn--ghost:hover{background:var(--surface-hover);color:var(--text)} .btn--danger{background:transparent;border-color:var(--danger-border);color:var(--danger)} .btn--danger:hover{background:var(--danger-soft)} .btn--sm{min-height:32px;padding:0 10px;font-size:12.5px} .btn--sm svg{width:14px;height:14px} .btn--block{width:100%} .btn[disabled],.btn.is-loading{opacity:.55;cursor:not-allowed;pointer-events:none} .btn.is-loading::before{ content:"";width:13px;height:13px;flex-shrink:0; border:2px solid currentColor;border-top-color:transparent;border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .icon-btn{ display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;flex-shrink:0;padding:0; border:1px solid transparent;border-radius:var(--r-control); background:transparent;color:var(--text-muted);cursor:pointer; transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast); } .icon-btn:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border)} .icon-btn--danger:hover{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)} .icon-btn[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none} .icon-btn svg{width:15px;height:15px} .btn-group{display:inline-flex;gap:2px;align-items:center} /* --------------------------------------------------------------- Меню строк */ .menu{position:relative;display:inline-flex} .menu__list{ position:absolute;inset-inline-end:0;top:calc(100% + 4px);z-index:25; min-width:190px;padding:var(--s1); background:var(--surface);border:1px solid var(--border); border-radius:var(--r-control);box-shadow:var(--shadow-md); } .menu__item{ display:flex;align-items:center;gap:var(--s2);width:100%; padding:7px var(--s2);border:none;background:transparent; border-radius:6px;cursor:pointer; font:inherit;font-size:13px;color:var(--text);text-align:start; } .menu__item:hover{background:var(--surface-hover)} .menu__item--danger{color:var(--danger)} .menu__item--danger:hover{background:var(--danger-soft)} .menu__item svg{width:14px;height:14px;flex-shrink:0;opacity:.7} /* ------------------------------------------------------------------- Формы */ .field{display:block;min-width:0} .field__label{ display:block;margin-bottom:6px; font-size:12.5px;font-weight:500;color:var(--text-secondary); } .field__hint{margin-top:6px;font-size:12px;line-height:1.45;color:var(--text-muted)} .field__error{margin-top:6px;font-size:12px;color:var(--danger)} .input,.select,.textarea{ display:block;width:100%;min-width:0; min-height:38px;padding:8px 11px; font-family:inherit;font-size:13.5px;line-height:1.4;color:var(--text); background:var(--surface); border:1px solid var(--border-strong);border-radius:var(--r-control); transition:border-color var(--t-fast),box-shadow var(--t-fast); } .input::placeholder,.textarea::placeholder{color:var(--text-muted);opacity:.85} .input:hover,.select:hover,.textarea:hover{border-color:var(--text-muted)} .input:focus,.select:focus,.textarea:focus{ outline:none;border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent); } .input[readonly]{background:var(--surface-subtle);color:var(--text-secondary)} .input[disabled],.select[disabled],.textarea[disabled]{ background:var(--surface-subtle);color:var(--text-muted);cursor:not-allowed; } .input.is-error,.select.is-error{border-color:var(--danger)} .input.is-error:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent)} .select{ appearance:none;padding-inline-end:32px;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 9px center; background-size:16px; } html[dir="rtl"] .select{background-position:left 9px center} .select[multiple]{ appearance:none;background-image:none;padding:var(--s1);cursor:default; min-height:auto; } .select[multiple] option{padding:5px 8px;border-radius:5px} .textarea{font-family:var(--mono);font-size:12.5px;min-height:140px;resize:vertical} .input--mono{font-family:var(--mono);font-size:12.5px} .input--sm{min-height:32px;padding:5px 9px;font-size:12.5px} .input--num{width:78px;text-align:end;font-variant-numeric:tabular-nums} .check{ display:flex;align-items:center;gap:var(--s2); font-size:13.5px;cursor:pointer; } .check input[type=checkbox]{ width:16px;height:16px;flex-shrink:0;margin:0; accent-color:var(--primary);cursor:pointer; } .form-section{padding:var(--s5);border-bottom:1px solid var(--border)} .form-section:last-child{border-bottom:none} .form-section__head{margin-bottom:var(--s4)} .copy-row{display:flex;gap:var(--s2);align-items:stretch} .copy-row .input{flex:1} .copy-row .btn{flex-shrink:0} /* ------------------------------------------------------------------ Бейджи */ .badge{ display:inline-flex;align-items:center;gap:5px; padding:2px 9px;border-radius:var(--r-pill); font-size:11.5px;font-weight:500;line-height:1.6; background:var(--neutral-soft);color:var(--text-secondary); border:1px solid transparent; max-width:100%; } .badge--success{background:var(--success-soft);color:var(--success);border-color:var(--success-border)} .badge--warning{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-border)} .badge--danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)} .badge--info{background:var(--info-soft);color:var(--info);border-color:var(--info-border)} .badge--primary{background:var(--primary-soft);color:var(--primary);border-color:var(--primary-border)} .badge--outline{background:transparent;border-color:var(--border-strong);color:var(--text-muted)} .badge--mono{font-family:var(--mono);font-size:11px} .badge .dot{width:6px;height:6px} .badge-list{display:flex;flex-wrap:wrap;gap:var(--s1)} /* ------------------------------------------------------------------ Таблицы */ .table-wrap{width:100%;overflow-x:auto} .table{width:100%;border-collapse:collapse;font-size:13.5px} .table th{ position:sticky;top:0;z-index:1; text-align:start;font-size:11.5px;font-weight:600; letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted); padding:10px var(--s4); background:var(--surface-subtle); border-bottom:1px solid var(--border); white-space:nowrap; } .table td{ padding:11px var(--s4); border-bottom:1px solid var(--border); vertical-align:middle; } .table tbody tr:last-child td{border-bottom:none} .table tbody tr{transition:background var(--t-fast)} .table tbody tr:hover{background:var(--surface-subtle)} .table tr.is-selected{background:var(--primary-soft)} .table .num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap} .table th.num{text-align:end} .table .actions{text-align:end;white-space:nowrap;width:1%} .table__primary{font-weight:500} .table__sub{font-size:12px;color:var(--text-muted);margin-top:2px} .table--compact td{padding:8px var(--s4)} .table--log td{font-size:12.5px} /* Внутри карточки таблица прижимается к её краям */ .card > .table-wrap > .table th:first-child, .card > .table-wrap > .table td:first-child{padding-inline-start:var(--s5)} .card > .table-wrap > .table th:last-child, .card > .table-wrap > .table td:last-child{padding-inline-end:var(--s5)} /* ------------------------------------------------- Пустые и грузящиеся состояния */ .empty{ display:flex;flex-direction:column;align-items:center; text-align:center;padding:var(--s10) var(--s5); } .empty__icon{ width:40px;height:40px;margin-bottom:var(--s3); display:grid;place-items:center;border-radius:10px; background:var(--surface-subtle);color:var(--text-muted); } .empty__icon svg{width:20px;height:20px} .empty__title{font-size:15px;font-weight:600} .empty__text{margin-top:6px;font-size:13px;color:var(--text-muted);max-width:420px} .empty__action{margin-top:var(--s4)} .skeleton{ background:linear-gradient(90deg, var(--surface-subtle) 25%,var(--surface-hover) 37%,var(--surface-subtle) 63%); background-size:400% 100%; animation:shimmer 1.3s ease-in-out infinite; border-radius:6px; } @keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}} .skeleton--line{height:11px;margin-bottom:8px} .skeleton--title{height:16px;width:38%;margin-bottom:12px} .skeleton--kpi{height:88px;border-radius:var(--r-card)} .skeleton--chart{height:240px;border-radius:var(--r-card)} .skeleton--row{height:44px;margin-bottom:2px;border-radius:0} /* ------------------------------------------------------------------- Алерты */ .alert{ display:flex;gap:var(--s3);align-items:flex-start; padding:var(--s3) var(--s4); border:1px solid var(--border);border-radius:var(--r-control); background:var(--surface-subtle); margin-bottom:var(--s4); } .alert__icon{flex-shrink:0;margin-top:1px;color:var(--text-muted)} .alert__icon svg{width:17px;height:17px;display:block} .alert__body{flex:1;min-width:0} .alert__title{font-size:13.5px;font-weight:600} .alert__text{font-size:13px;color:var(--text-secondary);margin-top:2px} .alert__detail{ margin-top:var(--s2);padding:var(--s2) var(--s3); background:var(--surface);border:1px solid var(--border);border-radius:6px; font-family:var(--mono);font-size:11.5px;color:var(--text-muted); overflow-x:auto;white-space:pre-wrap;word-break:break-word; } .alert__actions{margin-top:var(--s3);display:flex;gap:var(--s2);flex-wrap:wrap} .alert--success{background:var(--success-soft);border-color:var(--success-border)} .alert--success .alert__icon{color:var(--success)} .alert--warning{background:var(--warning-soft);border-color:var(--warning-border)} .alert--warning .alert__icon{color:var(--warning)} .alert--danger{background:var(--danger-soft);border-color:var(--danger-border)} .alert--danger .alert__icon{color:var(--danger)} .alert--info{background:var(--info-soft);border-color:var(--info-border)} .alert--info .alert__icon{color:var(--info)} /* ---------------------------------------------------------------- Инсайты */ .insight{ display:flex;gap:var(--s3);align-items:flex-start; padding:var(--s4) var(--s5);border-bottom:1px solid var(--border); } .insight:last-child{border-bottom:none} .insight__mark{ width:28px;height:28px;flex-shrink:0;margin-top:1px; display:grid;place-items:center;border-radius:8px; background:var(--neutral-soft);color:var(--text-muted); } .insight__mark svg{width:15px;height:15px} .insight--money .insight__mark{background:var(--success-soft);color:var(--success)} .insight--warn .insight__mark{background:var(--warning-soft);color:var(--warning)} .insight--danger .insight__mark{background:var(--danger-soft);color:var(--danger)} .insight__body{flex:1;min-width:0} .insight__title{font-size:13.5px;font-weight:600} .insight__text{font-size:13px;color:var(--text-secondary);margin-top:2px} .insight__action{margin-top:var(--s2)} /* ----------------------------------------------------------- Диагностика */ .check-row{ display:flex;gap:var(--s3);align-items:flex-start; padding:10px 0;border-top:1px solid var(--border); } .check-row:first-child{border-top:none} .check-row__icon{ width:20px;height:20px;flex-shrink:0;margin-top:1px; display:grid;place-items:center;border-radius:50%; font-size:11px;font-weight:700; background:var(--neutral-soft);color:var(--text-muted); } .check-row--ok .check-row__icon{background:var(--success-soft);color:var(--success)} .check-row--warn .check-row__icon{background:var(--warning-soft);color:var(--warning)} .check-row--error .check-row__icon{background:var(--danger-soft);color:var(--danger)} .check-row--skip{color:var(--text-muted)} .check-row__body{flex:1;min-width:0;font-size:13.5px} .check-row__detail{ margin-top:6px;padding:var(--s2) var(--s3); background:var(--surface-subtle);border:1px solid var(--border);border-radius:6px; font-family:var(--mono);font-size:11.5px;color:var(--text-muted); overflow-x:auto;white-space:pre-wrap;word-break:break-word; } details.tech{margin-top:6px} details.tech > summary{ cursor:pointer;font-size:12px;color:var(--text-muted); list-style:none;display:inline-flex;align-items:center;gap:5px; } details.tech > summary::-webkit-details-marker{display:none} details.tech > summary::before{content:"▸";font-size:10px;transition:transform var(--t-fast)} details.tech[open] > summary::before{transform:rotate(90deg)} details.tech > summary:hover{color:var(--text-secondary)} /* ------------------------------------------------------------------ Воронка */ .funnel__step{padding:10px 0;border-top:1px solid var(--border)} .funnel__step:first-child{border-top:none} .funnel__row{ display:flex;justify-content:space-between;gap:var(--s3); font-size:13.5px;margin-bottom:6px;flex-wrap:wrap; } .funnel__label{display:flex;align-items:center;gap:var(--s2);min-width:0} .funnel__stat{ display:flex;align-items:baseline;gap:var(--s2); font-variant-numeric:tabular-nums;flex-shrink:0; } .funnel__bar{height:8px;border-radius:4px;background:var(--surface-hover);overflow:hidden} .funnel__fill{height:100%;background:var(--primary);border-radius:4px;transition:width var(--t-base)} .funnel__fill--partial{background:var(--warning)} .funnel__step.is-worst .funnel__fill{background:var(--danger)} /* ------------------------------------------------------------------- График */ .chart{position:relative} .chart svg{width:100%;height:auto;display:block} .chart__head{ display:flex;align-items:baseline;gap:var(--s3); margin-bottom:var(--s3);flex-wrap:wrap; } .chart__value{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums} .chart-tip{ position:fixed;z-index:200;pointer-events:none; padding:8px 11px;border-radius:8px; background:#0f172a;color:#f8fafc; font-size:12.5px;line-height:1.45;white-space:nowrap; box-shadow:var(--shadow-md);opacity:0;transition:opacity .1s; } /* ------------------------------------------------- Пикер офферов */ .picker{ border:1px solid var(--border);border-radius:var(--r-control); overflow:hidden;background:var(--surface); } .picker__head{ position:sticky;top:0;z-index:2; display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap; padding:var(--s3);background:var(--surface-subtle); border-bottom:1px solid var(--border); } .picker__search{flex:1 1 220px} .picker__list{max-height:340px;overflow-y:auto} .picker__row{ display:flex;align-items:center;gap:var(--s3); padding:10px var(--s4);border-bottom:1px solid var(--border); cursor:pointer;transition:background var(--t-fast); } .picker__row:last-child{border-bottom:none} .picker__row:hover{background:var(--surface-subtle)} .picker__row.is-added{opacity:.6;cursor:default} .picker__row.is-added:hover{background:transparent} .picker__main{flex:1;min-width:0} .picker__name{font-size:13.5px;font-weight:500} .picker__meta{font-size:12px;color:var(--text-muted);margin-top:1px} .picker__tags{display:flex;gap:var(--s1);flex-wrap:wrap;justify-content:flex-end;max-width:45%} .picker__payout{ width:70px;text-align:end;flex-shrink:0; font-variant-numeric:tabular-nums;font-size:13.5px; } /* ------------------------------------------------------------ Модалка и drawer */ .modal-root{position:fixed;inset:0;z-index:60;display:none} .modal-root.is-open{display:block} .modal-root__scrim{ position:absolute;inset:0;background:rgba(15,23,42,.5); animation:fade var(--t-base); } @keyframes fade{from{opacity:0}to{opacity:1}} .modal{ position:absolute;inset-inline:0;top:6vh;margin-inline:auto; width:min(640px,calc(100% - 32px));max-height:88vh; display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--border); border-radius:var(--r-panel);box-shadow:var(--shadow-lg); animation:modal-in var(--t-base); } .modal--wide{width:min(880px,calc(100% - 32px))} @keyframes modal-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .drawer{ position:absolute;inset-block:0;inset-inline-end:0; width:min(560px,100%); display:flex;flex-direction:column; background:var(--surface);border-inline-start:1px solid var(--border); box-shadow:var(--shadow-lg); animation:drawer-in var(--t-base); } .drawer--wide{width:min(760px,100%)} @keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}} html[dir="rtl"] .drawer{animation-name:drawer-in-rtl} @keyframes drawer-in-rtl{from{transform:translateX(-100%)}to{transform:none}} .panel__head{ display:flex;align-items:flex-start;gap:var(--s3); padding:var(--s4) var(--s5);border-bottom:1px solid var(--border); flex-shrink:0; } .panel__title{font-size:16px;font-weight:600} .panel__desc{font-size:12.5px;color:var(--text-muted);margin-top:2px} .panel__body{padding:var(--s5);overflow-y:auto;flex:1;min-height:0} .panel__foot{ display:flex;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap; padding:var(--s3) var(--s5);border-top:1px solid var(--border); background:var(--surface-subtle);flex-shrink:0; } .panel__foot--split{justify-content:space-between} /* ------------------------------------------------------------------- Тосты */ .toasts{ position:fixed;z-index:80; inset-block-end:var(--s5);inset-inline-end:var(--s5); display:flex;flex-direction:column;gap:var(--s2); pointer-events:none;max-width:min(380px,calc(100vw - 32px)); } .toast{ display:flex;gap:10px;align-items:flex-start; padding:11px var(--s4); background:var(--surface);border:1px solid var(--border); border-inline-start:3px solid var(--text-muted); border-radius:var(--r-control);box-shadow:var(--shadow-md); font-size:13.5px;pointer-events:auto; animation:toast-in var(--t-base); } .toast.is-out{opacity:0;transform:translateY(6px);transition:all var(--t-base)} @keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .toast__icon{flex-shrink:0;margin-top:1px} .toast__icon svg{width:16px;height:16px;display:block} .toast--success{border-inline-start-color:var(--success)} .toast--success .toast__icon{color:var(--success)} .toast--error{border-inline-start-color:var(--danger)} .toast--error .toast__icon{color:var(--danger)} .toast--warning{border-inline-start-color:var(--warning)} .toast--warning .toast__icon{color:var(--warning)} .toast--info{border-inline-start-color:var(--info)} .toast--info .toast__icon{color:var(--info)} /* --------------------------------------------------------------------- Вход */ .auth{ min-height:100vh;display:grid;place-items:center; padding:var(--s5);background:var(--bg); } .auth__card{ width:100%;max-width:400px; background:var(--surface);border:1px solid var(--border); border-radius:var(--r-panel);box-shadow:var(--shadow-sm); padding:var(--s8); } .auth__brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--s6)} .auth__logo{ width:34px;height:34px;border-radius:9px; background:linear-gradient(135deg,#2563eb,#0ea5e9); display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px; } .auth__name{font-size:16px;font-weight:600} .auth__title{font-size:20px;font-weight:600} .auth__sub{font-size:13px;color:var(--text-muted);margin-top:var(--s1);margin-bottom:var(--s6)} .auth__foot{margin-top:var(--s5);font-size:12px;color:var(--text-muted);text-align:center} /* ---------------------------------------------------------------- Адаптив */ @media (max-width:1180px){ .grid--kpi4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ .sidebar{transform:translateX(-100%)} html[dir="rtl"] .sidebar{transform:translateX(100%)} .sidebar.is-open{transform:none} .main{margin-inline-start:0} .burger{display:inline-flex} .view{padding:var(--s4)} .topbar{padding-inline:var(--s4)} .grid--form{grid-template-columns:1fr} .page-head__actions{width:100%} .page-head__actions .btn{flex:1} } @media (max-width:640px){ h1{font-size:20px} .kpi__value{font-size:22px} .kpi__value--lg{font-size:27px} .grid--kpi{grid-template-columns:repeat(2,minmax(0,1fr))} .card__body{padding:var(--s4)} .form-section{padding:var(--s4)} .panel__body,.panel__head,.panel__foot{padding-inline:var(--s4)} .toasts{ inset-inline:var(--s3);inset-block-end:var(--s3); max-width:none;align-items:stretch; } .modal{top:auto;bottom:0;max-height:92vh;border-radius:var(--r-panel) var(--r-panel) 0 0} .drawer{width:100%} .picker__tags{max-width:none;justify-content:flex-start} .picker__row{flex-wrap:wrap} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } } /* ---- Оффер на паузе по расписанию ---- */ .row--paused{background:var(--danger-soft)} .row--paused td{opacity:.85} /* Расписание работы оффера */ .sched-row{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)} .sched-row .input,.sched-row input[type=time]{ padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--surface);color:var(--text);font:inherit} .sched-dash{color:var(--text-muted)} .btn--icon{width:34px;height:34px;padding:0;display:inline-flex;align-items:center; justify-content:center;border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--surface);color:var(--text-muted);cursor:pointer} .btn--icon:hover{border-color:var(--danger-border);color:var(--danger);background:var(--danger-soft)} /* Автопоиск таймзоны */ .tz-picker{position:relative} .tz-results{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0; max-height:280px;overflow:auto;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-sm);box-shadow:0 8px 28px rgba(0,0,0,.18)} .tz-item{display:flex;align-items:center;gap:var(--s2);padding:9px 12px;cursor:pointer; border-bottom:1px solid var(--border)} .tz-item:last-child{border-bottom:none} .tz-item:hover{background:var(--primary-soft)} .tz-city{flex:1;font-weight:500} .tz-zone{color:var(--text-muted);font-family:var(--mono);font-size:12px} .tz-off{color:var(--primary);font-family:var(--mono);font-size:12px;font-weight:600} .tz-empty{padding:12px;color:var(--text-muted);text-align:center;font-size:13px} /* ---- Поведение на возрастном гейте ---- */ .gate-bar{display:flex;align-items:center;gap:var(--s2);margin-bottom:8px} .gate-bar__label{flex:0 0 130px;font-size:13px;color:var(--text-muted)} .gate-bar__track{flex:1;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden} .gate-bar__fill{display:block;height:100%;border-radius:4px;transition:width .3s} .gate-bar__val{flex:0 0 48px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px} .gate-verdict{margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);font-size:14px;line-height:1.5} .gate-verdict--warning{background:var(--warning-soft);border:1px solid var(--warning-border);color:var(--warning)} .gate-verdict--danger{background:var(--danger-soft);border:1px solid var(--danger-border);color:var(--danger)} .gate-verdict--info{background:var(--info-soft);border:1px solid var(--info-border);color:var(--info)}