/* Все варианты оформления используют одни и те же компоненты панели. */
:root{--font-scale:1;--surface-soft:#fafbfc;--surface-hover:#f1f4f8;--ink-secondary:#596577;--faint:#7c8899;--field-border:#dfe4ed;--accent-hover:#ff943b;--accent-soft:#fff2e4;--accent-ink:#a54f12;--primary-ink:#2d1b0c;--good-bg:#eaf7f0;--good-ink:#1d6e53;--bad-bg:#fff0f1;--bad-ink:#b54455;--wait-bg:#fff5e6;--wait-ink:#996627;--info-bg:#eef5ff;--info-ink:#45638c}
:root[data-theme="dark"]{color-scheme:dark;--bg:#10151d;--surface:#1a2230;--surface-soft:#202a3a;--surface-hover:#273346;--ink:#edf1f8;--ink-secondary:#c1cddd;--muted:#a6b4c8;--faint:#94a5bd;--border:#334055;--field-border:#43516a;--nav:#0c1119;--good-bg:#163e34;--good-ink:#77debb;--bad-bg:#452637;--bad-ink:#ffb0bc;--wait-bg:#443725;--wait-ink:#f4cd8a;--info-bg:#21354e;--info-ink:#a9caff;--accent-soft:#3b2b21;--accent-ink:#ffc38e;--green:#4ec99e}
:root[data-accent="violet"]{--accent-soft:#eee7ff;--accent-ink:#7044ca;--primary-ink:#fff}
:root[data-accent="blue"]{--accent-soft:#e8f0ff;--accent-ink:#235cae;--primary-ink:#fff}
:root[data-accent="green"]{--accent-soft:#e6f5ef;--accent-ink:#14775b;--primary-ink:#fff}
:root[data-accent="rose"]{--accent-soft:#ffeaf3;--accent-ink:#a23262;--primary-ink:#fff}
:root[data-accent="cyan"]{--accent-soft:#e5f5fa;--accent-ink:#086b83;--primary-ink:#fff}
:root[data-theme="dark"][data-accent="violet"]{--accent-soft:#33274f;--accent-ink:#cbb4ff}
:root[data-theme="dark"][data-accent="blue"]{--accent-soft:#223656;--accent-ink:#adccff}
:root[data-theme="dark"][data-accent="green"]{--accent-soft:#173f35;--accent-ink:#92dfc4}
:root[data-theme="dark"][data-accent="rose"]{--accent-soft:#452b40;--accent-ink:#ffb5d4}
:root[data-theme="dark"][data-accent="cyan"]{--accent-soft:#193c4b;--accent-ink:#92dbed}
:root[data-text-size="small"]{--font-scale:.92}
:root[data-text-size="large"]{--font-scale:1.14}
body{color:var(--ink);background:var(--bg)}
.panel,.modal,.secondary,input,textarea,select{background:var(--surface);color:var(--ink);border-color:var(--border)}
.modal-footer,thead,.proxy-box,.balance-mini,.login-side{background:var(--surface-soft)}
.modal-heading,.modal-footer,.proxy-box,.form-divider,td{border-color:var(--border)}
.secondary:hover,.icon-button:hover,.text-button:hover,tbody tr:hover{background:var(--surface-hover)}
.primary{background:var(--accent);color:var(--primary-ink);box-shadow:none}
.primary:hover{background:var(--accent-hover)}
.text-button,label,.detail-info{color:var(--ink-secondary)}
.account-name{color:var(--ink)}.account-name:hover{color:var(--accent-ink)}
.stat-heading,.stat-caption,.cell-meta,.account-sub,.field-hint,.optional-chip,.event-time,th,.toolbar-note,.mono,.order-meta,.event-row p,.detail-bot p,.session-details,.session-details summary,.pagination,.footnote,.page-footer,.empty-state p,.balance-mini label,.stale{color:var(--muted)}
.count-chip,.orders-count,.proxy-chip,.status-pill.neutral{background:var(--surface-soft);color:var(--muted)}
.icon-button{color:var(--muted)}.icon-button:hover{color:var(--ink)}
.icon-button.run,.empty-icon,.login-icon,.event-icon{background:var(--accent-soft);color:var(--accent-ink)}
.icon-button.stop,.form-error,.status-pill.bad,.event-icon.error{background:var(--bad-bg);color:var(--bad-ink)}
.status-pill.good{background:var(--good-bg);color:var(--good-ink)}
.status-pill.wait,.notice.warning,.status-pending{background:var(--wait-bg);color:var(--wait-ink);border-color:var(--border)}
.notice.info,.status-paid{background:var(--info-bg);color:var(--info-ink);border-color:var(--border)}
.status-sent,.violet{background:var(--accent-soft);color:var(--accent-ink)}
.peach{background:var(--wait-bg);color:var(--wait-ink)}.blue{background:var(--info-bg);color:var(--info-ink)}.mint{background:var(--good-bg);color:var(--good-ink)}
.plan-card.current{background:var(--accent-soft);border-color:var(--accent)}
.problem,.danger-text{color:var(--bad-ink)}
input,textarea,select{border-color:var(--field-border)}input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:var(--accent)}
.nav-item.selected>svg,.connection-card>svg{color:var(--accent)}
.nav-item.selected [data-icon],.connection-card [data-icon]{color:var(--accent)}[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.settings-heading{display:flex;gap:10px;align-items:center;color:var(--accent-ink)}.settings-heading h3{color:var(--ink);margin:0}.settings-heading .icon{width:19px;height:19px}
/* Линия над блоком настроек снята. Она отделяла его от списка разделов, но
   между ними и так стоит пустое пространство во всю высоту сайдбара —
   разделитель там ничего не группировал. Цвет был зашит числом (#343a45) и
   темы не слушал: на светлой выходила почти чёрная черта поперёк окна. */
.panel-controls{margin:16px 0;padding-top:14px;display:flex;flex-direction:column}
.panel-control{display:flex;align-items:center;gap:10px;padding:11px 9px;border:0;border-radius:8px;background:transparent;color:#c3cddd;text-align:left;font-size:calc(var(--text-12) * var(--font-scale));cursor:pointer}
.panel-control:hover{background:#252e3d}.panel-control .icon{width:18px;height:18px}.control-hint{margin-left:auto;color:#8997ab;font-size:calc(var(--text-11) * var(--font-scale))}
.panel-control-row{display:flex;align-items:center}.panel-control-row>.panel-control{flex:1;min-width:0}.panel-control-row>.icon-button{color:#bdc9db}
.settings-drawer{position:fixed;inset:12px 12px 12px auto;margin:0;width:min(470px,calc(100vw - 24px));max-height:calc(100dvh - 24px);height:calc(100dvh - 24px)}
.settings-drawer>form{min-height:100%;display:flex;flex-direction:column}.settings-drawer .modal-body{flex:1}.settings-drawer .modal-footer{position:sticky;bottom:0}
.accent-picker{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.accent-picker legend{font-size:calc(var(--text-12) * var(--font-scale));font-weight:600;color:var(--ink-secondary);margin-bottom:9px}
.accent-option{--swatch:#f6821f;display:flex;flex-direction:row;align-items:center;gap:7px;background:var(--surface-soft);color:var(--ink-secondary);padding:10px 7px;border-radius:8px;font-size:calc(var(--text-11) * var(--font-scale));border:1px solid var(--border);cursor:pointer}.accent-option:has(input:checked){border-color:var(--swatch);box-shadow:0 0 0 1px var(--swatch)}.accent-option input{accent-color:var(--swatch);width:15px;height:15px;margin:0}.accent-option.violet{--swatch:#8b5cf6}.accent-option.blue{--swatch:#2875e8}.accent-option.green{--swatch:#168968}.accent-option.rose{--swatch:#cd427d}.accent-option.cyan{--swatch:#087f9c}
.switch-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:15px;padding:13px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)}
.switch-row>span{display:flex;flex-direction:column;gap:3px}.switch-row strong{font-size:calc(var(--text-12) * var(--font-scale));color:var(--ink)}.switch-row small{font-size:calc(var(--text-11) * var(--font-scale));font-weight:400;color:var(--muted)}
input[role=switch]{appearance:none;position:relative;width:40px;height:23px;border:0;border-radius:20px;background:var(--faint);padding:0;cursor:pointer;transition:background .2s;box-shadow:none}
input[role=switch]::before{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .2s}
input[role=switch]:checked{background:var(--accent)}input[role=switch]:checked::before{transform:translateX(17px)}input[role=switch]:disabled{opacity:.4;cursor:not-allowed}
input[type=range]{padding:0;border:0;width:100%;box-shadow:none}#volume-value{font-size:calc(var(--text-11) * var(--font-scale));color:var(--muted)}
.sound-preview{display:flex;gap:12px;align-items:flex-end}.sound-preview label{flex:1}.sound-preview button{min-height:40px}
.notification-rules{border:1px solid var(--border);border-radius:10px;overflow:hidden}.notification-rule{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border)}.notification-rule:last-child{border-bottom:0}.notification-rule>.check-label{flex:1;font-size:calc(var(--text-11) * var(--font-scale));min-width:0}.notification-rule>.check-label .icon{width:17px;height:17px;color:var(--accent-ink)}.rule-sound{display:flex;align-items:center;gap:4px;flex-shrink:0}.rule-sound select{width:146px;padding:7px 9px;font-size:calc(var(--text-11) * var(--font-scale))}.monitor-off .check-label{opacity:.5}
.notification-caption{padding:18px 24px;border-bottom:1px solid var(--border)}.notification-popups{position:fixed;top:20px;right:20px;width:min(410px,calc(100vw - 32px));display:flex;flex-direction:column;gap:10px;z-index:999;pointer-events:none}
.notification-popup{display:flex;align-items:flex-start;gap:10px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-left:3px solid var(--accent);padding:15px;pointer-events:auto}.notification-popup>div{flex:1;min-width:0}.notification-popup strong{font-size:calc(var(--text-12) * var(--font-scale))}.notification-popup p{font-size:calc(var(--text-11) * var(--font-scale));color:var(--muted);margin-top:4px;overflow-wrap:anywhere}.notification-popup>.icon-button{flex-shrink:0;width:24px;height:24px}.notification-popup .event-icon{flex-shrink:0}
@keyframes notification-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
:root[data-density="compact"] td{padding-top:12px;padding-bottom:12px}:root[data-density="compact"] .stat-card{padding:14px 16px}:root[data-density="compact"] .stats-grid{margin-bottom:22px}:root[data-density="compact"] .event-row{padding-top:12px;padding-bottom:12px}:root[data-density="compact"] .notification-rule{padding-top:9px;padding-bottom:9px}
:root[data-corners="square"]{--radius:4px}:root[data-corners="square"] :is(.button,.icon-button,.modal,.switch-row,.proxy-box,.balance-mini,.notification-popup,.notification-rules,.count-chip,.stat-icon,.nav-item,.accent-option,.notice,input:not([type=checkbox]):not([type=range]),select,textarea){border-radius:4px}
:root[data-motion="off"] *, :root[data-motion="off"] *::before{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}
@media(max-width:850px){.sidebar-bottom{display:flex;align-items:center;gap:12px}.panel-controls{margin:0;border:0;padding:0;flex-direction:row;gap:3px}/* Скрываем только подписи. Иконка размечена как <span data-icon>, поэтому
   её нужно исключить явно — иначе кнопка схлопывается в пустой прямоугольник
   шириной 12px без видимого содержимого. */
.panel-control>span:not(.nav-count):not([data-icon]),.panel-control>.control-hint{display:none}.panel-control{padding:7px;min-width:var(--action-height,44px);justify-content:center}.panel-control .icon{width:19px;height:19px}.panel-control-row{gap:1px}.panel-control-row .nav-count{position:absolute;transform:translate(10px,-10px);font-size:11px;min-width:17px}.panel-control-row>.icon-button{width:28px}.user-bar{margin:0}}
@media(max-width:520px){.settings-drawer{inset:8px 8px 8px auto;width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}.notification-rule{align-items:flex-start;flex-direction:column;gap:9px;padding:12px}.rule-sound{width:100%;padding-left:24px}.rule-sound select{width:100%;flex:1}.notification-popup{padding:12px}.notification-popups{top:12px;right:12px}.detail-modal .footer-right{flex-wrap:wrap}.sidebar-bottom{gap:5px}.panel-control{padding:5px}.accent-picker{gap:6px}.accent-option{padding:10px 5px;font-size:calc(var(--text-11) * var(--font-scale))}}