:root{--bg:#f5f6f8;--card:#fff;--ink:#1b1e25;--mut:#6b7280;--line:#e4e6eb;--acc:#4f46e5;--acc2:#eef0ff;--ok:#059669;--okbg:#e6f6ef;--warn:#b45309;--warnbg:#fff4e0;--bad:#dc2626;--badbg:#fdeaea;--side:#14161c;--sideink:#c9ced8}
@media (prefers-color-scheme:dark){:root{--bg:#0e1014;--card:#171a21;--ink:#e8eaed;--mut:#98a1b0;--line:#2a2f3a;--acc:#8b93ff;--acc2:#1f2347;--ok:#34d399;--okbg:#10291f;--warn:#fbbf24;--warnbg:#2c2410;--bad:#f87171;--badbg:#321a1a;--side:#0a0b0e}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
[hidden]{display:none!important}
#app{display:flex;height:100vh}
#side{width:218px;background:var(--side);color:var(--sideink);display:flex;flex-direction:column;flex-shrink:0}
.brand{display:flex;gap:9px;align-items:center;font-weight:700;color:#fff;padding:18px 18px 14px;font-size:15px}
.logo{color:#8b93ff}
#nav{flex:1;overflow:auto;padding:4px 10px}
#nav a{display:flex;justify-content:space-between;align-items:center;color:var(--sideink);padding:8px 10px;border-radius:7px;margin-bottom:2px}
#nav a:hover{background:#ffffff14;text-decoration:none}
#nav a.on{background:#4f46e5;color:#fff}
.badge{background:#ef4444;color:#fff;border-radius:99px;font-size:11px;padding:0 6px;min-width:18px;text-align:center}
.me{padding:14px 18px;border-top:1px solid #ffffff1a;font-size:12px}.me #meName{color:#fff;font-weight:600;margin-bottom:2px}.me .mut{color:#9aa3b2}
main{flex:1;overflow:auto;padding:22px 26px 60px;min-width:0}
h2{margin:0 0 4px;font-size:20px}h3{margin:0 0 8px;font-size:15px}
.mut{color:var(--mut)}.small{font-size:12px}
label{display:block;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin:0 0 3px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:7px 9px;width:100%}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
input[type=checkbox]{width:auto}
button,.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:7px;padding:7px 12px;display:inline-block}
button:hover,.btn:hover{border-color:var(--acc);text-decoration:none}
button.pri,.btn.pri{background:var(--acc);color:#fff;border-color:var(--acc)}
button.wa,.btn.wa{background:#25d366;border-color:#25d366;color:#052e16}
button.gm,.btn.gm{background:#ea4335;border-color:#ea4335;color:#fff}
button.sm,.btn.sm{padding:3px 9px;font-size:12px}
button.link{border:0;background:none;color:var(--acc);padding:0}
button.danger{color:var(--bad)}
button:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.row>.grow{flex:1;min-width:140px}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.card.warn{border-color:var(--warn);background:var(--warnbg)}.card.ok{border-color:var(--ok)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.grid.w2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 15px}
.stat b{display:block;font-size:21px}.stat span{color:var(--mut);font-size:12px}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);max-height:64vh}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:7px 11px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{position:sticky;top:0;background:var(--card);z-index:1;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut)}
tr.click{cursor:pointer}tr.click:hover{background:var(--acc2)}
td input,td select{padding:3px 6px;min-width:70px}
td.wrap{white-space:normal;min-width:220px}
.chip{display:inline-block;font-size:11px;padding:1px 8px;border-radius:99px;background:var(--bg);border:1px solid var(--line);color:var(--mut);margin-right:4px;white-space:nowrap}
.chip.ok{color:var(--ok);border-color:var(--ok);background:var(--okbg)}.chip.warn{color:var(--warn);border-color:var(--warn);background:var(--warnbg)}.chip.bad{color:var(--bad);border-color:var(--bad);background:var(--badbg)}.chip.acc{color:var(--acc);border-color:var(--acc);background:var(--acc2)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:14px 0 16px;overflow:auto}
.tabs a{padding:9px 14px;color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--acc);border-color:var(--acc);font-weight:600}
.task{display:flex;gap:10px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.task:hover{background:var(--acc2)}.task.urgent b{color:var(--bad)}
.task .ic{width:24px;text-align:center}
.log{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}.log time{color:var(--mut);width:118px;flex-shrink:0;font-size:12px}
.msgs{height:56vh;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:10px 14px}
.msg{margin-bottom:10px}.msg .who{font-weight:600}.msg .t{color:var(--mut);font-size:11px;margin-left:6px}.msg .b{white-space:pre-wrap;word-break:break-word}
.msg.me .who{color:var(--acc)}
.idea{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--bg)}
.idea h4{margin:0 0 4px;font-size:14px}
.idea dl{margin:6px 0 0;display:grid;grid-template-columns:110px 1fr;gap:3px 10px;font-size:13px}.idea dt{color:var(--mut)}.idea dd{margin:0}
#modal{position:fixed;inset:0;background:#0009;z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:4vh 16px}
.mbox{background:var(--card);border-radius:14px;padding:20px 22px;width:min(1100px,100%);box-shadow:0 20px 60px #0006}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:#1b1e25;color:#fff;padding:9px 16px;border-radius:9px;box-shadow:0 6px 24px #0005}.toast.err{background:#b91c1c}
#auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
#auth .card{width:min(400px,100%);padding:26px}
.empty{text-align:center;color:var(--mut);padding:40px 10px}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--acc)}.bar>i.over{background:var(--bad)}
@media (max-width:820px){#app{flex-direction:column;height:auto}#side{width:100%;flex-direction:row;align-items:center;overflow:auto}.brand{padding:10px 14px}#nav{display:flex;padding:4px}#nav a{white-space:nowrap}.me{display:none}main{padding:14px 12px 60px}}
@media print{#side,.noprint,#toast{display:none!important}main{padding:0}body{background:#fff}.card{break-inside:avoid;border-color:#ccc}}

.help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--acc2);color:var(--acc);font:700 10px/1 system-ui;text-transform:none;letter-spacing:0;cursor:help;position:relative;margin-left:3px;vertical-align:middle}
.help::after{content:attr(data-tip);display:none;position:absolute;z-index:40;left:-6px;top:20px;width:260px;padding:9px 11px;border-radius:9px;background:#1b1e25;color:#fff;font:400 12px/1.45 system-ui;text-align:left;box-shadow:0 8px 28px #0006;white-space:normal}
.help:hover::after,.help:focus::after,.help.open::after{display:block}
.next{background:var(--acc2);border:1px solid var(--acc);border-radius:12px;padding:14px 16px;margin:14px 0 4px}
.stepper{display:flex;gap:4px;margin-bottom:12px;overflow:auto}
.stepper .st{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:12px;white-space:nowrap;padding-right:10px}
.stepper .st i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.stepper .st.done i{background:var(--ok);border-color:var(--ok);color:#fff}.stepper .st.now i{background:var(--acc);border-color:var(--acc);color:#fff}.stepper .st.now em{color:var(--ink);font-weight:600}.stepper em{font-style:normal}
.check{display:flex;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);color:var(--ink)}.check:hover{background:var(--acc2);text-decoration:none}.check span{width:20px;color:var(--mut)}.check.ok span{color:var(--ok)}.check.ok b{text-decoration:line-through;color:var(--mut)}
.gstep{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--bg)}.gstep summary{cursor:pointer;padding:10px 14px;font-weight:600;list-style:none}.gstep summary::-webkit-details-marker{display:none}
.gstep summary i{font-style:normal;display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;align-items:center;justify-content:center;font-size:12px;margin-right:8px}
.gbody{padding:2px 14px 14px 44px;line-height:1.6}details>summary{cursor:pointer}details>.gbody{padding:4px 0 8px 18px}
.gloss{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;margin:0}.gloss dt{font-weight:600}.gloss dd{margin:0;color:var(--mut)}
@media (max-width:820px){.gloss{grid-template-columns:1fr}.help::after{width:220px}}
