/* Saitovoy 0.15: one shared surface system; existing component behavior stays intact. */
:root{--canvas:#edf3ef;--surface:#fff;--surface-alt:#f5f8f6;--raised:#fff;--ink:#172b23;--muted:#5b6d63;--line:#dce5df;--green:#185c43;--accent:#185c43;--positive:#257341;--positive-bg:#edf7ef;--negative:#b43236;--negative-bg:#fff0f0;--warning:#90600b;--warning-bg:#fff6df;--control:#c5d1c9;--focus:#247653;--on-accent:#fff;color-scheme:light}
:root[data-theme=dark]{--canvas:#161a18;--surface:#1c211e;--surface-alt:#242b26;--raised:#2a322d;--ink:#edf3ee;--muted:#abbab0;--line:#36423a;--green:#81d5a3;--accent:#27764e;--positive:#81d5a3;--positive-bg:#203b2b;--negative:#ff9a9c;--negative-bg:#40282b;--warning:#ecc372;--warning-bg:#3d3422;--control:#56665b;--focus:#81d5a3;--on-accent:#fff;color-scheme:dark}
html{background:var(--canvas);color:var(--ink);scrollbar-color:var(--control) var(--canvas)}
body,body.workspace,body.modern-auth,body.modern-recovery,body.modern-guide{background:var(--canvas);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif}
::selection{background:var(--accent);color:var(--on-accent)}
button,input,select,textarea{font:inherit;caret-color:var(--green)}
button,.demo-link,.primary{border-radius:8px;transition:background-color 160ms ease-out,border-color 160ms ease-out,transform 120ms ease-out;box-shadow:none}
button{background:var(--surface);border-color:var(--control);color:var(--ink);min-height:36px}
button:hover{background:var(--surface-alt);border-color:var(--muted);box-shadow:none}
button:active{transform:scale(.98)}
.primary,.primary.demo-link{background:var(--accent);border-color:var(--accent);color:var(--on-accent);border-radius:8px;padding:11px 16px}
.primary:hover{background:var(--accent);filter:brightness(1.08);border-color:var(--accent);color:var(--on-accent)}
input,select,textarea,.search{background:var(--surface);border-color:var(--control);color:var(--ink);border-radius:8px;min-height:42px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
h1,h2,h3,h4,.modern-recovery h1,.modern-auth h1{color:var(--ink);letter-spacing:-.025em}
.workspace aside{width:224px;padding:24px 16px;background:var(--canvas);border:0;overflow-y:auto}
.workspace main{margin:12px 12px 12px 224px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-height:calc(100vh - 24px)}
.workspace header{height:60px;padding:0 26px;background:var(--surface);border-color:var(--line)}
.workspace .brand{font-size:25px;color:var(--ink)}
.brand-icon{background:var(--accent);box-shadow:none;color:var(--on-accent)}
.beta,.alpha{background:var(--surface-alt);color:var(--muted)}
.workspace-label,.small-label,.eyebrow{display:none}
.workspace nav{margin-top:30px;gap:5px}
.workspace nav a{color:var(--muted);padding:11px 12px;border-radius:8px;gap:10px;font-size:14px;box-shadow:none;min-height:44px}
.workspace nav a.active,.workspace nav a:hover{background:var(--line);color:var(--ink);box-shadow:none}
.workspace nav b{background:var(--surface);color:var(--ink);font-size:11px}
.workspace nav .nav-icon{display:inline-flex;width:20px;flex-shrink:0;align-items:center}
.workspace nav .nav-icon svg{display:block}
.workspace .plan{background:var(--surface);border:1px solid var(--line);padding:16px;border-radius:10px;box-shadow:none;margin-top:24px}
.workspace .plan:after,.stat:first-child:after{display:none}
.workspace .plan strong,.workspace .plan a{color:var(--ink)}
.workspace .plan p,.workspace .plan small,.workspace .plan .small-label{color:var(--muted)}
.workspace .usage{background:var(--line)}.workspace .usage i{background:var(--positive)}
.workspace .avatar{background:var(--line);color:var(--ink)}
.workspace #content{padding:26px;max-width:1600px}
.workspace footer{padding:20px 26px;color:var(--muted)}
.workspace .breadcrumb,.workspace .breadcrumb b,.workspace .header-right,.workspace .header-right a{color:var(--muted)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:8px;border:1px solid var(--control);border-radius:8px;background:var(--surface);color:var(--ink)}
.page-heading{margin-bottom:22px;gap:16px}.page-heading h1,.workspace .demo-intro h1{font-size:28px;line-height:1.25;margin:0 0 8px;font-weight:650;letter-spacing:-.025em}
.subtext,.page-heading .subtext,.workspace .demo-intro .subtext{font-size:14px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:22px;background:var(--surface)}
.stat,.stat:first-child{border:0;border-right:1px solid var(--line);background:transparent;border-radius:0;box-shadow:none;padding:16px 20px;color:var(--ink)}
.stat:last-child{border-right:0}.stat p,.stat:first-child p{font-size:12px;color:var(--muted);margin:0 0 8px}
.stat strong,.stat:first-child strong{font-size:27px;font-weight:550;color:var(--ink);letter-spacing:-.02em;margin:0;line-height:1.3}
.stat small,.stat:first-child small{color:var(--muted);font-size:11px;margin:5px 0 0}
.stat.good strong{color:var(--positive)}.stat.bad strong{color:var(--negative)}
.panel,.overview-card,.load-group,.load-recommendation,.card{background:var(--surface);border-color:var(--line);border-radius:10px;box-shadow:none}
.toolbar{padding:17px 20px;border-color:var(--line)}.toolbar h3{font-size:15px}
.search{border-radius:8px;max-width:290px;background:var(--surface-alt);font-size:13px}
table{font-variant-numeric:tabular-nums}th{font-size:12px;font-weight:500;letter-spacing:0;background:var(--surface);color:var(--muted);text-transform:none;padding:14px 20px}
td{border-color:var(--line);padding:20px;font-size:13px;color:var(--ink)}tbody tr:hover{background:var(--surface-alt)}
.monitor-name,.workspace .monitor-name{font-size:15px;font-weight:600;color:var(--ink)}.url,.workspace .url{font-size:12px;color:var(--muted);max-width:260px}
.row-actions button,.detail-actions button,.incident-card button{border-radius:7px;background:var(--surface);color:var(--ink);font-size:12px;padding:8px 10px}
.badge{background:var(--surface-alt);color:var(--muted);font-size:12px;border-radius:6px;padding:5px 8px;white-space:normal}
.badge.up,.badge.success{background:var(--positive-bg);color:var(--positive)}
.badge.down,.badge.failed{background:var(--negative-bg);color:var(--negative)}
.badge.pending,.badge.suspect,.badge.unknown{background:var(--warning-bg);color:var(--warning)}
.muted,.card p,.card ul,.card li,.key-value span,.incident-card p,.empty p,.empty small,.note p,.note,.panel-foot,.panel-foot a,details,label small,.delivery p,.widget-caption,.widget-foot,.widget-empty p,.widget-heading>a,.widget-tag,.chart-legend span,.event-item p,.event-item time,.status-legend>span,.status-ring>div>span,.demo-help,.demo-aside-note{color:var(--muted)}
.card h2{font-size:20px}.card p{line-height:1.7}.key-value,.incident-card,.delivery,.event-item,.panel-foot{border-color:var(--line)}
.key-value b,.event-item strong,.status-ring strong,.note strong{color:var(--ink)}
.panel-foot,.note,.heartbeat-info,#link-result,.widget-bottom-link,.empty-mark,.chart-legend b{background:var(--surface-alt);border-color:var(--line);color:var(--muted);border-radius:8px}
.note-icon{background:transparent}.panel-foot{border-radius:0}.event-dot{box-shadow:none}.widget-bottom-link{color:var(--green)}
.overview-grid{gap:16px;margin:22px 0 0}.overview-card{padding:20px}.widget-tag{border-color:var(--line)}
.latency-chart text{fill:var(--muted)}.latency-track{fill:var(--line)}.latency-chart .latency-bar{fill:var(--positive)!important}.latency-chart .latency-error{fill:var(--negative)!important}
.ring-track{stroke:var(--line)}.ring-up{stroke:var(--positive)}.ring-down{stroke:var(--negative)}.dot-up{background:var(--positive)}.dot-down{background:var(--negative)}.dot-other{background:var(--line)}
dialog{background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:14px;box-shadow:0 24px 80px #0005}dialog::backdrop{background:#07120db3;backdrop-filter:none}
code,pre{background:var(--surface-alt);color:var(--ink);border-color:var(--line)}
.danger,#form-error,#login-error{color:var(--negative)}
.workspace .demo-banner,.local-banner{background:var(--warning-bg);color:var(--warning);border-color:var(--line);font-size:12px;line-height:1.6}
.workspace .demo-banner{margin:16px 26px 0}.error-banner{background:var(--negative-bg);color:var(--negative)}
#telegram-warning{background:var(--warning-bg);color:var(--warning)}
.workspace .demo-intro{max-width:none}.workspace .demo-controls{margin:16px 0 20px}.workspace .demo-controls button,.workspace .demo-controls .demo-link{border-radius:8px}
.workspace .header-right a.primary{color:var(--on-accent);background:var(--accent);border-radius:8px}
.demo-label,.demo-history-label,.demo-notification small{color:var(--muted)}.demo-notification{background:var(--surface-alt);color:var(--ink);border-color:var(--line)}
.demo-notification p{color:var(--ink)}.demo-history i,.check-bars span{background:var(--positive)}.demo-history i.failure,.check-bars span.failed{background:var(--negative)}
.load-group p,.load-recommendation p,.load-timestamp,.load-scope{color:var(--muted)}
.operations-grid .key-value span{color:var(--muted)}
.ops-group,.certificate-detail{background:var(--surface-alt);border-color:var(--line)}
.certificate-detail p,.certificate-detail small{color:var(--muted)}
.ops-group-head small,.ops-hint,.ops-footnote{color:var(--muted)}
.ops-ok,.certificate-status{background:var(--positive-bg);color:var(--positive)}
.ops-warn,.certificate-status.suspect,.certificate-status.down{background:var(--warning-bg);color:var(--warning)}
.ops-bad{background:var(--negative-bg);color:var(--negative)}
.ops-neutral,.certificate-status.unknown,.certificate-status.pending,.certificate-status.paused{background:var(--surface-alt);color:var(--muted)}
.ops-notice,.certificate-detail.suspect,.certificate-detail.down{background:var(--warning-bg);color:var(--warning);border-color:var(--line)}
.ops-notice p{color:var(--warning)}.ops-recommendations article{border-color:var(--line)}
.modern-recovery a{color:var(--green)}
.modern-recovery header .theme-toggle{background:var(--surface);color:var(--ink);margin:0;width:44px;padding:8px;border-color:var(--control)}
#message{background:var(--positive-bg);color:var(--positive)}#error{background:var(--negative-bg);color:var(--negative)}
.setup-panel,.setup-steps li,.probe-summary,.probe-detail{background:var(--surface-alt);border-color:var(--line);border-radius:10px}
.setup-steps p,.setup-foot,.setup-complete p,.probe-summary span,.probe-summary p,.probe-detail p,.secondary-status{color:var(--muted)}
.setup-heading>span,.setup-number,.setup-complete{background:var(--positive-bg);color:var(--positive);border-color:var(--line)}
.setup-complete strong,.setup-complete>span,.setup-complete a,.setup-steps a,.probe-summary strong{color:var(--green)}
.setup-done .setup-number{background:var(--accent);color:var(--on-accent)}
.probe-stale{background:var(--warning-bg);color:var(--warning)}.probe-difference,.secondary-status.unknown{color:var(--warning)}.secondary-status.down{color:var(--negative)}
.modern-auth .form-card h2,.modern-auth .field>span,.modern-auth .field label{color:var(--ink)}
.modern-auth .card-description,.modern-auth .card-kicker,.modern-auth .password-hint,.modern-auth .free-note,.modern-auth .card-switch,.modern-auth #success-view>p:not(.card-kicker){color:var(--muted)}
.modern-auth .card-switch{border-color:var(--line)}.modern-auth .card-switch a,.modern-auth .password-wrap button{color:var(--green)}
.modern-auth .submit-button{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.modern-auth .field-error{color:var(--negative)}.modern-auth #request-error{background:var(--negative-bg);color:var(--negative);border-color:var(--negative)}
.modern-auth .theme-toggle{border-color:var(--control)}
.modern-auth .auth-header strong,.modern-auth .scene-caption strong{color:var(--green)}
.modern-auth .scene-caption p,.modern-auth footer,.modern-auth footer a{color:var(--muted)}
.modern-auth .auth-header,.modern-recovery header,.modern-guide header{background:var(--canvas);color:var(--ink);border-color:var(--line)}
.modern-auth .form-panel,.modern-auth .form-card,.modern-auth .auth-form,.modern-recovery .card,.modern-guide .guide{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
.modern-auth input,.modern-recovery input{background:var(--surface);color:var(--ink);border-color:var(--control)}
.modern-auth .intro-copy>p,.modern-auth .form-panel p,.modern-auth .form-footer,.modern-auth label,.modern-recovery p,.modern-recovery label,.modern-recovery .hint,.modern-guide .guide>p,.modern-guide li{color:var(--muted)}
.modern-recovery button,.modern-recovery .button{background:var(--accent);color:var(--on-accent);border-radius:8px}
.modern-guide .guide a,.modern-guide .guide h2,.modern-guide .guide h3{color:var(--green)}
.modern-guide .guide-header{display:flex;align-items:center;justify-content:space-between;background:var(--surface);padding:0;border:0;height:auto;margin-bottom:28px}
.modern-guide .guide p,.modern-guide .guide li{color:var(--muted)}
.modern-guide .guide .notice{background:var(--positive-bg);border-color:var(--line);color:var(--ink)}
.modern-guide .guide nav{background:var(--surface-alt);border-color:var(--line)}
.modern-guide .guide nav a{color:var(--green)}
.modern-guide .guide pre,.modern-guide .guide code{background:var(--surface-alt);color:var(--ink)}
:root[data-theme=dark] .illustration{filter:brightness(.8)}
#toast{background:var(--raised);color:var(--ink);border-color:var(--control)}
@media(min-width:1101px){.monitor-section{margin-bottom:0}.workspace #monitor-list td:nth-child(3){white-space:nowrap}.workspace .stats{max-width:none}}
@media(max-width:1100px){.workspace aside{width:190px;padding:24px 12px}.workspace main{margin-left:190px}.workspace .brand{font-size:22px}.workspace #content{padding:22px}.overview-grid{grid-template-columns:1fr 1fr}.overview-card:last-child{grid-column:1/-1}.workspace nav a{font-size:12px;padding:10px 8px}.url{max-width:190px}.workspace .header-right{gap:8px}}
@media(max-width:760px){.workspace aside{width:auto;position:static;padding:18px 16px 10px;border:0;overflow:visible}.workspace aside .brand{font-size:25px}.workspace main{margin:0;border:0;border-radius:0;min-height:100vh}.workspace nav{display:flex;overflow-x:auto;gap:4px;margin-top:16px;padding-bottom:6px}.workspace nav a{padding:8px 10px;flex-shrink:0;font-size:12px;min-height:44px}.workspace nav .nav-icon{display:none}.workspace nav b{font-size:10px}.workspace header{height:auto;min-height:60px;padding:12px 16px;gap:10px;flex-wrap:wrap}.workspace .header-right{gap:10px;flex-wrap:wrap}.workspace #content{padding:22px 16px}.workspace .demo-banner{margin:14px 16px 0}.page-heading h1,.workspace .demo-intro h1{font-size:26px}.page-heading{flex-wrap:wrap}.page-heading .primary{font-size:13px;padding:10px 14px}.stats{grid-template-columns:1fr 1fr}.stat,.stat:first-child{padding:14px;border-bottom:1px solid var(--line)}.stat:nth-child(2n){border-right:0}.stat:nth-last-child(-n+2){border-bottom:0}.stat strong{font-size:25px}.stat small{font-size:12px}.overview-grid{grid-template-columns:1fr}.overview-card:last-child{grid-column:auto}.workspace #monitor-list tr{padding:18px 16px}.workspace #monitor-list td{font-size:13px;gap:12px;padding:7px 0;flex-wrap:wrap}.workspace #monitor-list td:before{color:var(--muted);font-size:12px}.workspace #monitor-list td:first-child{display:block}.workspace #monitor-list .url{font-size:12px;max-width:none;white-space:normal;overflow-wrap:anywhere}.workspace #monitor-list .row-actions{width:100%}.workspace #monitor-list .row-actions button{min-height:44px;flex:1}.theme-toggle{width:44px;height:44px;min-height:44px}.toolbar{flex-wrap:wrap;padding:16px}.search{max-width:none;width:100%}.card{padding:20px}.form-grid{grid-template-columns:1fr}.modern-auth .auth-header,.modern-recovery header{gap:12px;flex-wrap:wrap}.modern-auth .auth-header>a:last-of-type{margin-left:auto}.modern-recovery main{margin:24px auto}.workspace footer{padding:20px 16px}}
@media(prefers-reduced-motion:reduce){button,.primary,.demo-link{transition:none}button:active{transform:none}}