:root{
--violet-100:#F3EEFC; --violet-200:#E6DCF9; --violet-300:#D0BFF3; --violet-400:#A68AE6;
--violet-500:#6B45C9; --violet-600:#5633AD; --violet-700:#432688; --violet-800:#30205F; --violet-900:#221A3A;
--orange-100:#FFF2E8; --orange-200:#FFE0C8; --orange-300:#FFC59C; --orange-400:#FFA467;
--orange-500:#F2782F; --orange-600:#D35F17; --orange-700:#A4470D;
--paper:#FBF8F5; --ink:#271F3D; --muted:#6B6282; --line:#E9E2EC;
--bg:var(--paper); --bg-soft:#F4EFF8; --text:var(--ink); --body:var(--muted); --faint:#9A93AD;
--accent:var(--violet-500); --accent-2:var(--orange-500); --orange:var(--orange-400);
--band:var(--violet-900); --band-text:#FBF4EE; --band-muted:#CDC2DE;
--on-ink:#FDFAF7; --surface:#ffffff;
--grad-soft:linear-gradient(135deg, var(--orange-100) 0%, var(--violet-200) 100%);
--alert:#B4322A; --alert-soft:#FBE3E0;
--good:#1B6B51;  --good-soft:#DFF0E8;
--warm:var(--orange-700); --warm-soft:var(--orange-200);
--ochre-bar:var(--violet-500); --ochre-wash:var(--violet-200);
--green:var(--orange-500); --rose:var(--alert); --grey:var(--violet-300);
--green-bar:var(--good); --rose-bar:var(--alert); --teal-bar:var(--violet-400);
--font:Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif;
--r:14px; --r-panel:24px; --r-pill:999px;
--ease:cubic-bezier(.16,1,.3,1);
--rule:rgba(107,69,201,.10);
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--body); font-family:var(--font); font-size:15px;
line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; color:var(--text); font-weight:700; letter-spacing:-.03em; line-height:1.1}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
svg{display:block}
.num, .tc.r, .facts b, .tile .v, .meter .v{font-variant-numeric:tabular-nums}
.gbar{height:60px; display:flex; align-items:center; gap:18px; padding:0 26px;
background:rgba(251,248,245,.86); backdrop-filter:blur(14px) saturate(150%);
border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.brand{font-weight:800; font-size:1.18rem; letter-spacing:-.02em; color:var(--text)}
.brand span{color:var(--accent-2)}
.gicons{display:flex; align-items:center; gap:14px; margin-left:auto; font-size:.9rem; color:var(--body)}
.gicons button{font-size:.92rem; font-weight:500; color:var(--body); padding:6px 12px; border-radius:var(--r-pill)}
.gicons button:hover{background:var(--violet-100); color:var(--text)}
.stamp{font-size:.85rem; color:var(--faint)}
.app{display:grid; grid-template-columns:238px minmax(0,1fr); min-height:calc(100vh - 60px)}
.side{padding:18px 14px 44px; position:sticky; top:60px; align-self:start;
height:calc(100vh - 60px); overflow-y:auto}
.ssec{font-size:.76rem; font-weight:600; color:var(--faint); padding:18px 12px 6px}
.ssec:first-child{padding-top:4px}
.side nav{display:flex; flex-direction:column; gap:2px}
.side nav button{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
padding:9px 14px; border-radius:var(--r-pill); color:var(--body); font-size:.96rem; font-weight:500}
.side nav button svg{width:17px; height:17px; flex:none; stroke:currentColor; fill:none;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.75}
.side nav button:hover{background:var(--violet-100); color:var(--text)}
.side nav button[aria-selected="true"]{background:var(--accent); color:var(--on-ink); font-weight:600}
.side nav button[aria-selected="true"] svg{opacity:1}
.side nav .ct{margin-left:auto; font-size:.82rem; font-weight:600; color:var(--faint)}
.side nav button[aria-selected="true"] .ct{color:rgba(255,255,255,.75)}
.side nav .ct.hot{background:var(--orange-500); color:#fff; border-radius:var(--r-pill); padding:1px 8px}
.main{min-width:0}
.wrap{padding:30px 38px 80px; max-width:1360px}
.panel[hidden]{display:none}
.ph{display:flex; align-items:baseline; justify-content:space-between; gap:16px 30px; flex-wrap:wrap;
margin-bottom:26px; position:relative}
.ph h1{font-size:2.4rem; font-weight:800; letter-spacing:-.045em}
.ph.stack{flex-direction:column; align-items:flex-start; gap:12px; padding-right:min(46%,460px)}
.facts{display:flex; gap:22px; flex-wrap:wrap; align-items:baseline; font-size:.9rem; color:var(--body)}
.facts b{color:var(--text); font-weight:700; margin-right:6px}
.facts .hot b{color:var(--alert)} .facts .warm b{color:var(--warm)} .facts .good b{color:var(--good)}
.group{margin-bottom:28px}
.ghead{display:flex; align-items:baseline; gap:10px; padding:0 0 10px 4px; cursor:pointer}
.ghead .car{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4;
stroke-linecap:round; stroke-linejoin:round; color:var(--g, var(--accent)); transition:transform .18s var(--ease);
align-self:center}
.group.shut .car{transform:rotate(-90deg)}
.ghead .gn{font-size:1.24rem; font-weight:700; letter-spacing:-.025em; color:var(--text)}
.ghead .gc{font-size:.88rem; color:var(--body)}
.group.shut .gtable{display:none}
.gtable{background:var(--bg-soft); border-radius:var(--r-panel); overflow:hidden}
.trow{display:grid; grid-template-columns:var(--cols); align-items:center}
.trow.body + .trow.body{border-top:1px solid var(--rule)}
.trow.body:hover{background:var(--violet-100)}
.tc{padding:14px 20px; display:flex; align-items:center; min-width:0; font-size:.95rem; color:var(--body)}
.tc.c{justify-content:center; text-align:center}
.tc.r{justify-content:flex-end}
.thead{border-bottom:1px solid var(--rule)}
.thead .tc{padding:12px 20px; font-size:.78rem; font-weight:600; color:var(--faint); justify-content:center}
.thead .tc.task{justify-content:flex-start}
.tc .nm{color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tc .nm small{display:block; font-weight:400; color:var(--body); font-size:.88rem; margin-top:1px}
.tc.st{justify-content:flex-start}
.tc.st span{display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600;
padding:.34em .95em; border-radius:var(--r-pill); white-space:nowrap}
.s-rose span{background:var(--alert-soft); color:var(--alert)}
.s-ochre span{background:var(--warm-soft); color:var(--warm)}
.s-green span{background:var(--good-soft); color:var(--good)}
.s-teal span{background:var(--violet-200); color:var(--violet-700)}
.s-grey span{background:var(--surface); color:var(--violet-700)}
.pill{display:inline-flex; align-items:center; padding:.3em .9em; border-radius:var(--r-pill);
font-size:.8rem; font-weight:600; background:var(--surface); color:var(--violet-700); white-space:nowrap}
.pill.hot{background:var(--alert-soft); color:var(--alert)}
.pill.warm{background:var(--warm-soft); color:var(--warm)}
.pill.good{background:var(--good-soft); color:var(--good)}
.dash{color:var(--faint)}
.btn{display:inline-flex; align-items:center; gap:.5em; padding:.55em 1.25em; border-radius:var(--r-pill);
font-size:.9rem; font-weight:600; background:var(--ink); color:var(--on-ink); white-space:nowrap;
transition:background .25s var(--ease), transform .25s var(--ease), color .25s}
.btn:hover{background:var(--accent); transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn.g{background:var(--surface); color:var(--text)}
.btn.g:hover{background:var(--violet-200); color:var(--violet-700); transform:translateY(-1px)}
.btn.quiet{background:transparent; color:var(--body); font-weight:500}
.btn.quiet:hover{background:var(--surface); color:var(--text)}
.btn.sm{padding:.45em 1em; font-size:.85rem}
.btn[disabled]{opacity:.5; cursor:default; transform:none}
a.btn{text-decoration:none}
.tc.acts{gap:8px; justify-content:flex-end; padding:10px 16px}
.card{background:var(--bg-soft); border-radius:var(--r-panel); margin-bottom:28px; overflow:hidden}
.card .ch{padding:18px 22px 14px; display:flex; align-items:center; justify-content:space-between;
gap:14px; flex-wrap:wrap}
.card .ch h3{font-size:1.14rem; font-weight:700; letter-spacing:-.02em}
.card .ch .left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.card .ch .note{font-size:.86rem; color:var(--body)}
.card .ch .note a, .linkish{color:var(--accent); font-weight:600}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:16px; margin-bottom:30px}
.tile{background:var(--bg-soft); border-radius:var(--r-panel); padding:20px 22px}
.tile .k{font-size:.86rem; color:var(--body)}
.tile .v{font-family:var(--font); font-size:1.8rem; font-weight:700; letter-spacing:-.03em;
color:var(--text); margin:3px 0 2px}
.tile .s{font-size:.84rem; color:var(--body); min-height:18px}
.tile.zero .v{color:var(--faint)}
.dl{font-weight:600} .dl.up{color:var(--good)} .dl.down{color:var(--alert)} .dlv{color:var(--faint)}
.meters{padding:6px 22px 22px; display:flex; flex-direction:column; gap:15px}
.meter .t{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:6px}
.meter .n{font-weight:600; color:var(--text); font-size:.95rem}
.meter .v{font-size:.88rem; color:var(--body)}
.meter .v b{color:var(--text); font-weight:700}
.mtrack{height:8px; background:var(--violet-200); border-radius:var(--r-pill); overflow:hidden}
.mfill{display:block; height:100%; border-radius:var(--r-pill); background:var(--accent); width:var(--w);
transform-origin:left; animation:growX .7s var(--ease) both}
.mfill.g{background:var(--orange-400)}
@keyframes growX{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.chart{padding:6px 20px 4px; overflow-x:auto}
.chart svg rect{transform-box:fill-box; transform-origin:bottom; animation:growUp .6s var(--ease) both}
@keyframes growUp{from{transform:scaleY(0)} to{transform:scaleY(1)}}
.chart svg polyline{stroke-dasharray:1600; stroke-dashoffset:1600; animation:draw 1.1s ease-out .3s forwards}
.chart svg circle{opacity:0; animation:fade .3s ease-out 1.1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.legend{display:flex; justify-content:center; gap:22px; padding:2px 0 18px; font-size:.88rem; color:var(--body)}
.legend span{display:flex; align-items:center; gap:7px}
.legend i{width:10px; height:10px; border-radius:3px; display:block}
.dots{position:absolute; top:-26px; right:-36px; color:var(--accent-2); pointer-events:none; opacity:.9}
.dots line{stroke:currentColor; stroke-width:3; stroke-linecap:round}
.dots circle{fill:currentColor}
@media (prefers-reduced-motion:no-preference){
.dots line{stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300); animation:nk-line .7s var(--ease) forwards}
.dots circle{transform-box:fill-box; transform-origin:center; transform:scale(0); animation:nk-dot .45s var(--ease) forwards}
.dots line:nth-child(2){animation-delay:.12s} .dots line:nth-child(3){animation-delay:.24s}
.dots line:nth-child(4){animation-delay:.36s} .dots line:nth-child(5){animation-delay:.48s}
.dots circle:nth-of-type(1){animation-delay:.2s} .dots circle:nth-of-type(2){animation-delay:.32s}
.dots circle:nth-of-type(3){animation-delay:.44s} .dots circle:nth-of-type(4){animation-delay:.56s}
@keyframes nk-line{to{stroke-dashoffset:0}}
@keyframes nk-dot{to{transform:scale(1)}}
}
.qdots{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.qdots .set{display:flex; gap:5px}
.qdots i{width:10px; height:10px; border-radius:50%; background:var(--violet-300); display:block;
animation:pop .38s var(--ease) both; animation-delay:calc(var(--i) * 55ms)}
.qdots i.r{background:var(--alert)} .qdots i.o{background:var(--orange-500)}
.qdots .cap{font-size:.86rem; color:var(--body); margin-left:4px}
@keyframes pop{from{opacity:0; transform:scale(.2)} to{opacity:1; transform:scale(1)}}
.rbar{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin:-6px 0 22px}
.rbar select, .rbar input[type=date], .cfg input{color:var(--text); background:var(--surface);
border:1.5px solid var(--line); border-radius:12px; padding:8px 12px; font-size:.92rem;
transition:border-color .2s, box-shadow .2s}
.rbar select{padding-right:30px}
.rbar select:hover, .cfg input:hover{border-color:var(--violet-300)}
.rbar select:focus, .rbar input:focus, .cfg input:focus{outline:none; border-color:var(--accent);
box-shadow:0 0 0 4px var(--violet-100)}
.rbar label{display:flex; align-items:center; gap:7px; font-size:.88rem; color:var(--body)}
.rlabel{font-size:.88rem; color:var(--body)}
.rbar .btn{margin-left:auto}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.seg{display:inline-flex; background:var(--surface); border-radius:var(--r-pill); padding:3px}
.seg button{padding:5px 14px; font-size:.86rem; font-weight:500; color:var(--body); border-radius:var(--r-pill)}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--on-ink); font-weight:600}
.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px}
.state{padding:26px 24px; border-radius:var(--r-panel); background:var(--grad-soft); color:var(--body);
font-size:.95rem; margin-bottom:26px; max-width:720px}
.state b{display:block; color:var(--text); font-size:1.14rem; font-weight:700; letter-spacing:-.02em; margin-bottom:6px}
.state.err{background:var(--alert-soft); color:var(--alert)}
.state.err b{color:var(--alert)}
.none{padding:16px 20px; color:var(--body); font-size:.93rem}
.loading{padding:8px 2px; color:var(--body)}
.pnote{font-size:.88rem; color:var(--body); margin:-14px 0 26px; max-width:78ch}
.hint{margin:0; font-size:.88rem; color:var(--body); max-width:78ch}
.hint.pad{padding:10px 22px 18px}
dialog#dlg{border:none; border-radius:var(--r-panel); padding:0; width:min(580px, calc(100vw - 32px));
max-height:calc(100vh - 48px); background:var(--paper); color:var(--body);
box-shadow:0 30px 60px -24px rgba(58,34,120,.35)}
dialog#dlg::backdrop{background:rgba(34,26,58,.45)}
.dform{padding:26px 26px 22px; display:flex; flex-direction:column; gap:16px}
.dform h2{font-size:1.5rem; font-weight:700; letter-spacing:-.03em}
.dsub{margin:-8px 0 0; font-size:.92rem; color:var(--body)}
.dform fieldset{border:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.dform legend, .fl{font-size:.86rem; font-weight:600; color:var(--text); margin-bottom:6px}
.fl{display:block}
.fl > input, .fl > select, .fl > textarea{margin-top:7px}
.fl .opt{font-weight:400; color:var(--body)}
.fl[hidden]{display:none}
.dform select, .dform input[type=text], .dform input[type=email], .dform input[type=number], .dform input[type=date], .dform textarea{
color:var(--text); background:var(--surface); border:1.5px solid var(--line); border-radius:12px;
padding:.72em 1em; width:100%; font-size:.95rem; transition:border-color .2s, box-shadow .2s}
.dform textarea{resize:vertical; min-height:90px}
.dform :is(select,input,textarea):hover{border-color:var(--violet-300)}
.dform :is(select,input,textarea):focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--violet-100)}
.kind{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r);
background:var(--surface); cursor:pointer; border:1.5px solid transparent}
.kind:has(input:checked){border-color:var(--accent); background:var(--violet-100)}
.kind input{margin-top:3px; accent-color:var(--accent)}
.kind b{display:block; color:var(--text); font-size:.95rem}
.kind small{display:block; color:var(--body); font-size:.88rem; margin-top:1px}
.chips{flex-direction:row !important; flex-wrap:wrap; gap:8px}
.chips legend{width:100%}
.chips label{cursor:pointer}
.chips input{position:absolute; opacity:0}
.chips span{display:inline-block; padding:.45em 1.1em; border-radius:var(--r-pill); background:var(--surface);
font-size:.9rem; color:var(--body)}
.chips input:checked + span{background:var(--accent); color:var(--on-ink); font-weight:600}
.chips input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.derr{margin:0; padding:10px 14px; border-radius:var(--r); background:var(--alert-soft); color:var(--alert); font-size:.92rem}
.derr[hidden]{display:none}
.dact{display:flex; justify-content:flex-end; gap:10px; margin-top:4px}
.rev{display:flex; flex-direction:column; gap:9px; background:var(--surface); border-radius:var(--r); padding:16px 18px}
.rev div{display:flex; gap:14px; align-items:baseline; justify-content:space-between}
.rev span{font-size:.82rem; color:var(--faint); flex:none}
.rev b{color:var(--text); font-weight:600; font-size:.95rem; text-align:right; word-break:break-word}
dialog#dlg.wide{width:min(720px, calc(100vw - 32px))}
.mwarn{margin:0; padding:10px 14px; border-radius:var(--r); font-size:.9rem;
background:var(--warm-soft); color:var(--warm)}
.mwarn.bad{background:var(--alert-soft); color:var(--alert)}
.mwarn[hidden]{display:none}
.fref{background:var(--surface); border-radius:var(--r); padding:2px 16px}
.fref summary{cursor:pointer; padding:12px 0; font-size:.88rem; font-weight:600; color:var(--text)}
.fref summary::marker{color:var(--accent)}
.fref ul{margin:0 0 10px; padding-left:18px; font-size:.88rem; display:flex; flex-direction:column; gap:4px}
.fref code, .hint code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.86em;
background:var(--violet-100); color:var(--violet-700); border-radius:6px; padding:1px 5px}
.fref .hint{padding:0 0 14px}
.prev{background:var(--bg-soft); border-radius:var(--r); padding:14px 18px 16px}
.prev .pl{display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
color:var(--faint); font-weight:600; margin-bottom:8px}
.prev b{display:block; color:var(--text); font-size:.98rem; font-weight:600}
.prev p{margin:8px 0 0; font-size:.93rem; color:var(--body); white-space:normal}
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); opacity:0; pointer-events:none;
background:var(--band); color:var(--band-text); border-radius:var(--r-pill); padding:13px 22px; font-size:.93rem;
display:flex; gap:16px; align-items:center; z-index:50; max-width:calc(100vw - 32px);
box-shadow:0 20px 40px -20px rgba(34,26,58,.6); transition:opacity .18s, transform .18s}
.toast.show{opacity:1; transform:translate(-50%,0); pointer-events:auto}
.toast.err{background:var(--alert)}
.toast button{color:var(--orange); font-weight:700}
.cbody{padding:6px 22px 22px; display:flex; flex-direction:column; gap:14px}
.big-link{margin:0; font-size:.92rem; word-break:break-all}
.big-link a, .steps a{color:var(--accent); font-weight:600}
.row-btns{display:flex; gap:10px; flex-wrap:wrap}
.steps{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:.95rem; max-width:78ch}
.steps b{color:var(--text)}
.cfg{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; max-width:620px}
.cfg .fl{flex:1 1 260px; margin:0}
.calframe{height:640px; border-top:1px solid var(--rule)}
.calframe.m{height:520px}
.calframe iframe{width:100%; height:100%; border:0; display:block}
.frow{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.frow[hidden]{display:none}
.frow .fl{flex:1 1 150px; margin:0}
.frow .hint{flex:1 1 100%}
.frow input[type=number]{width:96px}
.tgl{display:flex; align-items:center; gap:10px; font-size:.95rem; color:var(--text); cursor:pointer}
.tgl input{accent-color:var(--accent); width:17px; height:17px}
#auth-screen{min-height:100vh; display:flex; align-items:center; justify-content:center;
background:var(--band); padding:24px}
.auth-card{background:var(--paper); border-radius:var(--r-panel); padding:44px 38px; width:100%; max-width:410px;
box-shadow:0 30px 60px -24px rgba(34,26,58,.55)}
.auth-logo{font-size:2rem; font-weight:800; letter-spacing:-.04em; color:var(--text); margin-bottom:4px}
.auth-logo span{color:var(--accent-2)}
.auth-tagline{font-size:.86rem; color:var(--body); margin-bottom:30px}
.auth-card h2{font-size:1.05rem; font-weight:600; color:var(--text); margin-bottom:20px}
.form-group{margin-bottom:16px}
.form-group label{display:block; font-size:.86rem; font-weight:600; color:var(--text); margin-bottom:6px}
.form-group input{width:100%; padding:.75em 1em; border:1.5px solid var(--line); border-radius:12px;
font-size:.98rem; color:var(--text); background:var(--surface)}
.form-group input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--violet-100)}
.pw-wrap{position:relative}
.pw-toggle{position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:.85rem; color:var(--body)}
.btn-primary{width:100%; justify-content:center; padding:.85em; font-size:1rem; margin-top:8px;
border-radius:var(--r-pill); background:var(--ink); color:var(--on-ink); font-weight:600}
.btn-primary:hover{background:var(--accent)}
.link-btn{display:block; margin:16px auto 0; font-size:.9rem; color:var(--body)}
.link-btn:hover{color:var(--accent)}
.error-msg{margin-top:14px; padding:11px 14px; border-radius:var(--r); background:var(--alert-soft); color:var(--alert); font-size:.9rem}
.success-msg{margin-top:14px; padding:11px 14px; border-radius:var(--r); background:var(--good-soft); color:var(--good); font-size:.9rem}
.spinner{display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4);
border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mx-new{display:inline-block; min-width:1.5em; padding:0 .45em; margin-left:4px; border-radius:var(--r-pill);
background:var(--orange-500); color:#fff; font-size:.78rem; font-weight:700; line-height:1.5}
.seg button[aria-pressed="true"] .mx-new{background:#fff; color:var(--accent)}
.mx-bar{display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; margin-bottom:26px}
.mx-ehead{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.mx-save{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.mx-save select{color:var(--text); background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:8px 12px; font-size:.92rem}
.mx-layout{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:26px; align-items:start}
.mx-results{position:sticky; top:84px; max-height:calc(100vh - 100px); overflow-y:auto; padding:2px 4px 20px 2px;
scrollbar-width:thin}
.mx-form .card{margin-bottom:20px}
.mx-form .cbody{gap:16px}
.mx-form .frow .fl{flex:1 1 200px}
.mx-form :is(input[type=text],input[type=email],input[type=date],select,textarea){
color:var(--text); background:var(--surface); border:1.5px solid var(--line); border-radius:12px;
padding:.68em .95em; width:100%; font-size:.95rem; margin-top:7px; transition:border-color .2s, box-shadow .2s}
.mx-form textarea{min-height:76px; resize:vertical}
.mx-form :is(input,select,textarea):hover{border-color:var(--violet-300)}
.mx-form :is(input,select,textarea):focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--violet-100)}
.mx-form fieldset{border:0; margin:0; padding:0; min-width:0}
.mx-form .chips, .mx-form .mx-radio{display:flex; flex-wrap:wrap; gap:8px}
.mx-form .chips legend{width:100%; font-size:.86rem; font-weight:600; color:var(--text); margin-bottom:8px}
.mx-block legend.fl{margin-bottom:8px}
p.fl{margin:4px 0 -4px}
.opt{font-weight:400; color:var(--body)}
.mx-grid{display:grid; grid-template-columns:52px repeat(4, minmax(0,1fr)); gap:6px; align-items:center}
.mx-bh{font-size:.82rem; font-weight:600; color:var(--text); text-align:center; line-height:1.2}
.mx-bh small{display:block; font-weight:400; color:var(--faint); font-size:.74rem}
.mx-bh .sm{display:none}
.mx-day{font-size:.86rem; font-weight:600; color:var(--body)}
.mx-cell{height:38px; border-radius:10px; background:var(--surface); border:1.5px solid var(--line);
font-size:.8rem; font-weight:600; transition:background .2s, border-color .2s, color .2s}
.mx-cell:hover{border-color:var(--violet-300)}
.mx-cell[data-v="flex"]{background:var(--violet-100); border-color:var(--violet-300); color:var(--violet-700)}
.mx-cell[data-v="must"]{background:var(--accent); border-color:var(--accent); color:var(--on-ink)}
.mx-tri{display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r); overflow:hidden}
.mx-trow{display:flex; align-items:center; justify-content:space-between; gap:10px 16px; padding:10px 14px; flex-wrap:wrap}
.mx-trow + .mx-trow{border-top:1px solid var(--rule)}
.mx-tl{min-width:0; flex:1 1 200px}
.mx-tl b{display:block; color:var(--text); font-size:.93rem; font-weight:600}
.mx-tl small{display:block; color:var(--body); font-size:.82rem; line-height:1.4}
.seg label{position:relative; cursor:pointer}
.seg label input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.seg label span{display:block; padding:5px 12px; font-size:.84rem; font-weight:500; color:var(--body); border-radius:var(--r-pill); white-space:nowrap}
.seg label input:checked + span{background:var(--accent); color:var(--on-ink); font-weight:600}
.seg label input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.mx-tri .seg{background:var(--bg-soft)}
.mx-pref{display:flex; align-items:flex-end; gap:12px 18px; flex-wrap:wrap}
.mx-pref > :first-child{flex:1 1 260px}
.mx-must{font-size:.88rem; padding-bottom:10px; white-space:nowrap}
.mx-style legend{font-size:.95rem; font-weight:700; color:var(--text)}
.mx-style .hint{margin:2px 0 8px; font-style:italic}
.mx-scale{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.84rem; color:var(--body)}
.mx-scale .seg{background:var(--surface)}
.mx-rhead{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 14px}
.mx-rhead h2{font-size:1.4rem; font-weight:700; letter-spacing:-.03em}
.note{font-size:.86rem; color:var(--body); font-weight:400}
.mx-sub{font-size:1.1rem; font-weight:700; margin:26px 0 12px; display:flex; gap:10px; align-items:baseline}
.mcard{background:var(--bg-soft); border-radius:var(--r-panel); padding:16px 18px; margin-bottom:12px;
animation:mx-in .45s var(--ease) both}
.mcard.near{background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--line)}
@keyframes mx-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.mtop{display:flex; align-items:center; gap:12px}
.mrank{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:.85rem; font-weight:700;
background:var(--surface); color:var(--violet-700)}
.mcard.near .mrank{display:none}
.mwho{flex:1; min-width:0}
.mwho b{display:block; color:var(--text); font-size:1.02rem; font-weight:700; letter-spacing:-.01em}
.mwho small{display:block; color:var(--body); font-size:.84rem}
.mscore{flex:none; font-size:1.6rem; font-weight:800; letter-spacing:-.04em; color:var(--accent); font-variant-numeric:tabular-nums}
.mcard.near .mscore{color:var(--faint)}
.mfail{margin:10px 0 0; padding:8px 12px; border-radius:var(--r); background:var(--alert-soft); color:var(--alert); font-size:.86rem; font-weight:500}
.mwhy{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.mwhy li{position:relative; padding-left:16px; font-size:.88rem; color:var(--text)}
.mwhy li::before{content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--accent-2)}
.mflags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.mflags .pill{white-space:normal; line-height:1.3}
.mbreak{margin-top:10px}
.mbreak summary{cursor:pointer; font-size:.84rem; font-weight:600; color:var(--accent)}
.mx-bd{display:grid; grid-template-columns:minmax(0,1fr) 90px 44px; align-items:center; gap:10px; font-size:.82rem; margin-top:6px}
.mx-bd b{text-align:right; color:var(--text); font-variant-numeric:tabular-nums}
.mx-bd .mtrack{height:6px}
.macts{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px}
.mx-stage{color:var(--text); background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:5px 12px; font-size:.85rem; font-weight:600}
.mx-ruled{margin-top:18px; background:var(--surface); border-radius:var(--r); padding:4px 16px}
.mx-ruled summary{cursor:pointer; padding:10px 0; font-size:.9rem; font-weight:600; color:var(--text)}
.mx-ruled ul{margin:0 0 12px; padding-left:18px; font-size:.86rem; display:flex; flex-direction:column; gap:4px}
.mx-ruled b{color:var(--text)}
.mx-foot{margin-top:16px; font-size:.8rem}
.mx-about{margin:12px 0 0; padding:14px 16px; background:var(--bg-soft); border-radius:var(--r); font-size:.93rem; color:var(--text); white-space:pre-wrap}
.rev b{white-space:normal}
@media (max-width:1180px){
.mx-layout{grid-template-columns:1fr}
.mx-results{position:static; max-height:none; overflow:visible}
}
@media (max-width:760px){
.mx-grid{grid-template-columns:40px repeat(4, minmax(0,1fr)); gap:4px}
.mx-bh small, .mx-bh .lg{display:none}
.mx-bh .sm{display:inline}
.mx-cell{height:34px}
.mx-trow .seg{width:100%; justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){ .mcard{animation:none} }
@media (max-width:980px){
.app{grid-template-columns:1fr}
.side{position:sticky; top:60px; z-index:15; height:auto; padding:10px 14px;
display:flex; align-items:center; gap:6px; overflow-x:auto; border-bottom:1px solid var(--line);
background:var(--paper)}
.side::-webkit-scrollbar{display:none}
.ssec{display:none}
.side nav{flex-direction:row; gap:6px}
.side nav button{white-space:nowrap; width:auto; padding:8px 14px; background:var(--bg-soft)}
.wrap{padding:22px 16px 64px}
.two{grid-template-columns:1fr}
}
@media (max-width:760px){
body{font-size:14.5px}
.gbar{padding:0 14px; gap:8px}
.gicons{gap:4px}
.gicons .stamp, .gicons #who{display:none}
.gicons button{white-space:nowrap; padding:6px 10px; font-size:.88rem}
.ph h1{font-size:2rem}
.dots{display:none}
.trow.thead{display:none}
.trow{display:flex; flex-wrap:wrap; align-items:center; padding:15px 18px}
.trow.body + .trow.body{border-top:1px solid var(--rule)}
.tc{padding:0; margin-right:14px; font-size:.9rem; order:2}
.tc:has(.nm){order:0; flex:1 1 100%; margin:0 0 9px; font-size:1rem}
.tc .nm{white-space:normal}
.tc.st{order:1; flex:0 0 auto; margin-right:14px}
.tc.r[data-h]{display:flex; flex-direction:column; align-items:flex-start; margin:0 18px 8px 0; color:var(--text)}
.tc.r[data-h]::before{content:attr(data-h); font-size:.75rem; font-weight:600; color:var(--faint); margin-bottom:1px}
.tc.acts{order:4; flex:1 1 100%; justify-content:flex-start; margin:10px 0 0; padding:0; gap:8px}
.tc.acts:empty{display:none}
.tc.acts .btn{flex:1; justify-content:center}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.tile{padding:16px 18px}
.tile .v{font-size:1.5rem}
.chart svg{min-width:660px}
.card .ch{padding:16px 18px 12px}
.meters, .cbody{padding-left:18px; padding-right:18px}
.dform{padding:22px 20px 18px}
.rbar .btn{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
.mfill,.chart svg rect,.chart svg polyline,.chart svg circle,.qdots i,.dots line,.dots circle{animation:none !important}
.mfill{transform:none} .chart svg polyline{stroke-dashoffset:0} .chart svg circle{opacity:1}
.dots line{stroke-dashoffset:0} .dots circle{transform:none}
.toast{transition:none}
}