/* Shared screen styles taken from the confirmed mockups (docs/ui/s01, s02, s08). */
a{color:var(--c-primary)}
.muted{color:var(--c-text-2);font-size:var(--fs-small)}
.hidden{display:none !important}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}

/* header (kick-off deck design) */
.slms-head{background:var(--c-card);border-bottom:1px solid var(--c-line);display:flex;align-items:center;flex-wrap:wrap;gap:6px 28px;padding:10px 24px}
.slms-head .brand{font-weight:800;font-size:19px;letter-spacing:.2px;flex:1 1 300px}
.sys{display:flex;align-items:baseline;gap:8px}
.sys .k{font-size:14px;color:var(--c-text-2)}
.sys .v{font-size:20px;font-weight:800;color:var(--c-ok)}
.sys.bad .v{color:var(--c-error)}
.upd{font-size:14px;color:var(--c-text-2)}
.hello{display:flex;align-items:center;gap:10px}
.hello svg{width:34px;height:34px}
.hello .who{line-height:1.15}
.hello small{display:block;font-size:12px;color:var(--c-text-2)}
.hello a,.hello .linkbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:13px}
.hello .who a{min-height:0;padding:0;font-size:inherit;color:inherit;text-decoration:none}
.hello .who a:hover{text-decoration:underline}
.linkbtn{background:none;border:0;color:var(--c-primary);text-decoration:underline;font:inherit;cursor:pointer}
.inline-form{display:inline;margin:0}
.lang{display:inline-flex;border:1px solid var(--c-line);border-radius:8px;overflow:hidden;font-size:12px}
.lang span{padding:3px 8px}
.lang .on{background:var(--c-navy);color:#fff;font-weight:700}
.lang .dis{color:var(--c-text-2);cursor:not-allowed}
.subnav{background:var(--c-navy);display:flex;flex-wrap:wrap;padding:0 16px}
.subnav a,.subnav span{color:#cfe0ec;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14px}
.subnav span.dis{color:#8aa0b2;cursor:not-allowed}
.subnav a.active{color:#fff;box-shadow:inset 0 -3px 0 var(--c-accent);font-weight:700}
.alarm-banner{background:var(--c-error);color:#fff;padding:12px 24px;font-weight:600}
.dash-strip{border:1px dashed var(--c-line);border-radius:8px;padding:6px 12px;color:var(--c-text-2);font-size:13px;background:color-mix(in srgb,var(--c-text-2) 6%,transparent);margin-bottom:12px}
@media(max-width:640px){.slms-head{padding:8px 12px;gap:2px 16px}.slms-head .brand{font-size:16px}.page{padding:12px}.alarm-banner{padding:10px 12px}}

/* messages */
.msg{border-radius:8px;padding:10px 12px;margin-bottom:16px;font-size:14px}
.msg-error{background:color-mix(in srgb,var(--c-error) 12%,var(--c-card));color:var(--c-error);border:1px solid var(--c-error)}
.msg-info{background:color-mix(in srgb,var(--c-info) 12%,var(--c-card));color:var(--c-info);border:1px solid var(--c-info)}
.toast{background:color-mix(in srgb,var(--c-ok) 12%,var(--c-card));color:var(--c-ok);border:1px solid var(--c-ok);border-radius:8px;padding:10px 12px;margin-bottom:12px}

/* S01 log-in */
.login-lang{display:inline-flex;border:1px solid var(--c-line);border-radius:8px;overflow:hidden}
.login-lang span{padding:8px 14px;min-height:44px;display:inline-flex;align-items:center;font-size:var(--fs-small)}
.login-lang .on{background:var(--c-primary);color:#fff;font-weight:700}
.login-lang .dis{color:var(--c-text-2);cursor:not-allowed}
.login-wrap{max-width:400px;margin:40px auto;padding:0 12px}
.login-brand{text-align:center;margin-bottom:20px}
.login-brand .logo{width:56px;height:56px;border-radius:50%;background:var(--c-navy);display:inline-flex;align-items:center;justify-content:center;color:var(--c-accent);font-size:28px;font-weight:700}
.login-brand h1{margin:10px 0 0;font-weight:800;letter-spacing:.2px}
.login-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:8px;flex-wrap:wrap}
.field{margin-bottom:16px}
.btn-block{width:100%}
.after{margin:12px 0 0}

/* S08 users */
.head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.head h1{margin:0}
.list-card{padding:0;overflow:hidden}
.list-card td,.list-card th{font-size:14px;vertical-align:middle}
.rowbtns{display:flex;gap:6px;flex-wrap:wrap}
.rowbtns .btn{padding:6px 12px;font-size:14px}
tr.disabled td{color:var(--c-text-2)}
.badge-grey{background:color-mix(in srgb,var(--c-text-2) 15%,transparent);color:var(--c-text-2)}
dialog{border:0;border-radius:14px;padding:0;width:calc(100% - 24px);max-width:460px;background:var(--c-card);color:var(--c-text)}
dialog::backdrop{background:rgba(16,42,67,.55)}
dialog[open].static{position:fixed;inset:0;margin:auto;height:fit-content;box-shadow:0 0 0 100vmax rgba(16,42,67,.55);z-index:50}
.dh{padding:16px 20px;border-bottom:1px solid var(--c-line);font-weight:700;font-size:17px}
.db{padding:16px 20px}
.db .f{margin-bottom:14px}
.db .first{margin-top:0}
.db .last{margin:0}
.df{padding:12px 20px;border-top:1px solid var(--c-line);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.pw{font-family:Consolas,"Courier New",monospace;font-size:20px;background:var(--c-bg);padding:10px;border-radius:8px;text-align:center;letter-spacing:1px;user-select:all}
.narrow{max-width:460px}

/* S10 alarm retrieval (docs/ui/s10-alarm-retrieval.html) */
h2{font-size:17px;margin:0 0 12px}
.s10-kpis{margin-bottom:16px}
.s10-kpis .card{margin:0}
.kpi .value{font-size:22px}
.kpi .small-value{font-size:18px}
.ok-l{border-left:5px solid var(--c-ok)}
.bad-l{border-left:5px solid var(--c-error)}
.err{background:color-mix(in srgb,var(--c-error) 10%,var(--c-card));color:var(--c-error);border:1px solid var(--c-error);border-radius:8px;padding:10px 12px;margin-top:10px}
.done{background:color-mix(in srgb,var(--c-ok) 12%,var(--c-card));color:var(--c-ok);border:1px solid var(--c-ok);border-radius:8px;padding:10px 12px;margin-bottom:12px}
td.n,th.n{text-align:right}
.two{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-bottom:16px}
.two .card{margin:0}
.rt{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.rt input{width:140px;min-height:44px}
.btn[disabled]{opacity:.6;cursor:wait}
.also{margin:10px 0 0}