:root{--bg:#f5f8f6;--card:#fff;--tx:#14261b;--mu:#62766a;--ac:#127a33;--on-ac:#fff;--bd:#dae5de;--ok:#2e8b57;--bad:#c0392b;--wr:#d98a00;--bar:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1712;--card:#17231b;--tx:#e8f2eb;--mu:#93aa9b;--ac:#4cc36a;--on-ac:#0f1712;--bd:#293b2f;--ok:#4cc38a;--bad:#ff7a6b;--wr:#f0b445;--bar:#131e17}}
:root[data-theme="dark"]{--bg:#0f1712;--card:#17231b;--tx:#e8f2eb;--mu:#93aa9b;--ac:#4cc36a;--on-ac:#0f1712;--bd:#293b2f;--ok:#4cc38a;--bad:#ff7a6b;--wr:#f0b445;--bar:#131e17}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 Arial,Helvetica,sans-serif}
[hidden]{display:none!important}
h1{font-size:18px;margin:0 0 2px}h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--mu);margin:20px 0 8px}
main{max-width:760px;margin:auto;padding:14px 14px calc(24px + env(safe-area-inset-bottom,0px))}
.sub{color:var(--mu);font-size:12px;margin-bottom:12px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:12px;margin-bottom:10px}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1 1 140px;min-width:0}
input,select,textarea,button{font:inherit;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:9px}
button{background:var(--ac);color:var(--on-ac);border:0;font-weight:700;cursor:pointer}button.g{background:transparent;color:var(--ac);border:1px solid var(--bd)}
button:disabled{opacity:.6;cursor:default}
.wide{width:100%}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}.chip{flex:0 0 auto;background:var(--card);color:var(--tx);font-weight:400;cursor:pointer;border:1px solid var(--bd);border-radius:8px;padding:6px 10px;text-align:center;min-width:78px}.chip.on{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}#stageBar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:13px}#stageBar button{padding:6px 10px}
.chip b{display:block;font-size:18px}.chip span{font-size:10px;color:var(--mu)}
.seg{display:flex;gap:2px;margin:8px 0}.seg i{flex:1;height:6px;border-radius:3px;background:var(--bd)}.seg i.on{background:var(--ac)}.seg i.cur{background:var(--wr)}
.top{display:flex;justify-content:space-between;gap:8px;align-items:start}.kode{font-weight:700}
.meta{color:var(--mu);font-size:12px}.tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;border:1px solid var(--bd);white-space:nowrap}
.late{color:var(--bad);border-color:var(--bad)}.done{color:var(--ok);border-color:var(--ok)}
.log{font-size:12px;color:var(--mu);border-top:1px dashed var(--bd);margin-top:8px;padding-top:6px}.hide{display:none}
details{margin-top:8px}summary{color:var(--ac);cursor:pointer;font-size:12px}.chk{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0;font-size:13px}.chk label{display:flex;gap:4px;align-items:center}.chk input{padding:0}.r2{display:flex;gap:8px;margin-top:8px}.r2 button{flex:1}button.w{background:var(--bad)}
.err{border-color:var(--bad)!important}
#toast{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:736px;margin:auto;background:var(--tx);color:var(--bg);padding:10px 12px;border-radius:10px;font-size:13px;z-index:20;display:none}
.req{color:var(--bad)}.dz{margin-top:10px;border-top:1px dashed var(--bd);padding-top:8px}button.d{background:transparent;color:var(--bad);border:1px solid var(--bad);width:100%}
.tabs{display:flex;gap:6px;margin-bottom:8px}.tabs button{flex:1;background:var(--card);color:var(--tx);border:1px solid var(--bd)}.tabs button.on{background:var(--ac);color:var(--on-ac)}

/* App shell */
.bar{position:sticky;top:0;z-index:10;background:var(--bar);border-bottom:1px solid var(--bd);padding:calc(8px + env(safe-area-inset-top,0px)) 14px 0}
.bar-in{max-width:760px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:40px;height:40px;border-radius:10px}
.brand.sm img{width:30px;height:30px;border-radius:8px}
.brand.sm b{font-size:16px}
.me{display:flex;align-items:center;gap:6px;position:relative}
.me button{padding:6px 10px}
#btnMe{width:34px;height:34px;padding:0;border-radius:50%;font-size:14px}
#meMenu{position:absolute;right:0;top:42px;min-width:230px;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
#meMenu .who{font-weight:700;word-break:break-all}
#nav{max-width:760px;margin:auto;display:flex;gap:4px}
#nav button{background:transparent;color:var(--mu);border:0;border-bottom:2px solid transparent;border-radius:0;padding:8px 12px}
#nav button.on{color:var(--ac);border-bottom-color:var(--ac)}
.pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;border:1px solid var(--wr);color:var(--wr)}
.hint{max-width:760px;margin:10px auto 0;padding:10px 12px;background:var(--card);border:1px solid var(--bd);border-radius:10px;font-size:13px;display:flex;gap:8px;align-items:center;justify-content:space-between}
.hint button{padding:4px 10px}

/* Auth screens */
.logo-wrap{background:#fff;border-radius:10px;padding:4px;text-align:center}
.logo-wrap img{width:100%;max-width:300px;height:auto;display:block;margin:auto}
.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;gap:12px}
.auth{width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px;padding:20px}
.auth input{width:100%}
.auth form{display:flex;flex-direction:column;gap:8px}
.or{display:flex;align-items:center;gap:8px;color:var(--mu);font-size:12px}.or:before,.or:after{content:"";flex:1;border-top:1px solid var(--bd)}
.links{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
button.link{background:none;border:0;color:var(--ac);padding:2px 0;font-weight:400;font-size:13px}
.msg{font-size:13px;min-height:1em}.msg.bad{color:var(--bad)}.msg.ok{color:var(--ok)}

/* Team */
.mem{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--bd)}
.mem:last-child{border-bottom:0}
.mem .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mem .acts button{padding:5px 9px;font-size:12px}
.mem .who{min-width:0;word-break:break-all}