:root{
  --gold:#F0C430;--gold-ink:#8a6a00;--char:#2C2C2C;--bg:#f4f3ef;--panel:#fff;--panel2:#f8f7f3;--line:#dedbd2;
  --text:#2C2C2C;--mute:#6b6862;--ok:#1d7a4f;--okbg:#dff3e8;--bad:#b42323;--badbg:#fbe1e1;--warn:#8a5a00;--warnbg:#fdf0d2;
  --font:Poppins,Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --gold-ink:#F0C430;--bg:#171717;--panel:#222;--panel2:#2a2a2a;--line:#3a3a3a;--text:#f2f2f2;--mute:#a8a8a8;
  --ok:#7fe0b0;--okbg:#1f4a37;--bad:#ffb3b3;--badbg:#5a2323;--warn:#ffd98a;--warnbg:#5a4217;color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--font)}
button,input,select,textarea{font:inherit;color:inherit}
.boot{padding:2rem;color:var(--mute)}
a{color:var(--gold-ink)}
.top{display:flex;align-items:center;gap:.8rem;padding:.6rem 1rem;background:var(--char);color:#f2f2f2;border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:.4rem;cursor:pointer;background:none;border:0;color:inherit;padding:0}
.brand b{font-size:1.1rem}.brand span{color:var(--gold);font-size:.8rem}
.top .sp{flex:1}
.top .who{font-size:.85rem;color:#ccc}
.top .btn{background:#3a3a3a;border-color:#555;color:#f2f2f2}
.net{font-size:.75rem;padding:.1rem .5rem;border-radius:99px;background:#1f4a37;color:#bdf2d8}.net.off{background:#5a2323;color:#ffc9c9}
nav.tabs{display:flex;gap:.1rem;padding:0 1rem;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--panel)}
nav.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:.6rem .8rem;color:var(--mute);cursor:pointer;white-space:nowrap}
nav.tabs button.on{color:var(--text);border-bottom-color:var(--gold);font-weight:600}
main{padding:1rem;max-width:1400px;margin:0 auto}
h1{font-size:1.4rem;margin:.2rem 0 .3rem}h2{margin:.2rem 0 .7rem;font-size:1.1rem}
h3{margin:1.1rem 0 .4rem;font-size:.95rem;color:var(--gold-ink)}
.muted{color:var(--mute)}.small{font-size:.8rem}.err{color:var(--bad)}
.btn{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.45rem .8rem;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--gold)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.gold{background:var(--gold);color:#1b1b1b;border-color:var(--gold);font-weight:600}
.btn.ok{background:var(--okbg);color:var(--ok);border-color:transparent}
.btn.danger{color:var(--bad)}.btn.sm{padding:.2rem .55rem;font-size:.8rem}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.35rem .5rem;min-width:0;width:100%}
input[type=checkbox]{width:auto}
textarea{min-height:4.5em;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:-1px}
input:disabled,select:disabled,textarea:disabled{background:transparent;border-color:transparent;color:var(--text);opacity:1}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.row.sb{justify-content:space-between}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;margin-bottom:.8rem}
.grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.pcard{text-align:left;cursor:pointer;display:block;width:100%;color:inherit}
.pcard:hover{border-color:var(--gold)}.pcard h2{margin:0 0 .2rem}
.pill{display:inline-block;padding:.1rem .55rem;border-radius:99px;background:var(--panel2);border:1px solid var(--line);font-size:.75rem;white-space:nowrap}
.pill.ok{background:var(--okbg);color:var(--ok);border-color:transparent}.pill.bad{background:var(--badbg);color:var(--bad);border-color:transparent}.pill.warn{background:var(--warnbg);color:var(--warn);border-color:transparent}
.pill.gold{background:var(--gold);color:#1b1b1b;border-color:transparent}
.steps{display:flex;gap:.3rem;flex-wrap:wrap;margin:.5rem 0}
.steps span{padding:.3rem .8rem;border-radius:99px;background:var(--panel2);border:1px solid var(--line);font-size:.85rem;color:var(--mute)}
.steps span.done{color:var(--ok)}.steps span.on{background:var(--gold);color:#1b1b1b;border-color:var(--gold);font-weight:600}
.tiles{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:.6rem 0}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.7rem}.tile b{display:block;font-size:1.35rem}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:.75rem;color:var(--mute);font-weight:600;padding:.3rem .35rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.25rem .35rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr.done td{opacity:.55}
.scroll{overflow-x:auto}
.gate{border-left:4px solid var(--line)}.gate.approved{border-left-color:var(--ok)}.gate.rejected{border-left-color:var(--bad)}.gate.pending{border-left-color:var(--gold)}
.sign{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;padding:.3rem 0;border-top:1px dashed var(--line)}
.sign:first-of-type{border-top:0}
.sign .r{min-width:150px;font-weight:600}
.warnbox{background:var(--warnbg);color:var(--warn);border-radius:8px;padding:.6rem .8rem;margin:.5rem 0}
.okbox{background:var(--okbg);color:var(--ok);border-radius:8px;padding:.6rem .8rem;margin:.5rem 0}
.form{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}
.form label,.fld{display:grid;gap:.2rem;font-size:.8rem;color:var(--mute)}
.chips{display:flex;gap:.3rem;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:.2rem .65rem;cursor:pointer;font-size:.8rem}
.chip.on{background:var(--gold);border-color:var(--gold);color:#1b1b1b;font-weight:600}
.spk{display:inline-flex;gap:.25rem;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:.05rem .2rem .05rem .55rem;font-size:.8rem;margin:.1rem}
.spk button{border:0;background:none;cursor:pointer;color:var(--mute);padding:0 .2rem}
.login{max-width:400px;margin:10vh auto;display:grid;gap:.7rem;padding:0 16px}
.login h1 span{color:var(--gold-ink);font-size:.9rem;display:block;font-weight:400}
.login input{padding:.6rem}
.toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--char);color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:20;max-width:90vw}
.toast.bad{background:#8a1f1f}
footer.foot{color:var(--mute);font-size:.75rem;text-align:center;padding:1.5rem 1rem}
@media(max-width:700px){main{padding:.7rem}.tbl.wide{min-width:760px}.sign .r{min-width:0;width:100%}}