:root{--paper:#EEF0F2;--panel:#FFFFFF;--ink:#15181B;--muted:#5C626A;--brass:#9A7B45;--brass-soft:#B79A66;--hair:#DFE2E5;--accent:#15181B;--danger:#B4453C;--ok:#3d7a52;--green:#3d7a52}
@media (prefers-color-scheme:dark){:root{--paper:#0E1012;--panel:#171A1D;--ink:#ECEEF0;--muted:#9AA1A8;--brass:#C6A667;--brass-soft:#8C7647;--hair:#2A2E33;--accent:#ECEEF0;--danger:#D8756B;--ok:#68b085;--green:#68b085}}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
#app{min-height:100%}
.sp{flex:1}
.brand{font-family:ui-serif,Georgia,serif;font-weight:600;font-size:22px}
.brand b{color:var(--brass)}.brand.sm{font-size:16px}
.btn{border:1px solid var(--hair);background:var(--panel);color:var(--ink);border-radius:9px;padding:8px 13px;font-size:13.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--brass-soft)}
.btn.primary{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.btn.ghost{background:transparent}.btn.sm{padding:5px 9px;font-size:12.5px;border-radius:7px}
.btn.big{width:100%;justify-content:center;padding:12px;font-size:15px}
.btn[disabled]{opacity:.55;cursor:default}

.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.authcard{background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:30px 26px;max-width:360px;width:100%;text-align:center;box-shadow:0 18px 40px -24px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:12px}
.authsub{color:var(--muted);font-size:14px;margin-bottom:4px}
.authcard input{width:100%;border:1px solid var(--hair);border-radius:10px;padding:12px;font-size:16px;background:var(--paper);color:var(--ink);text-align:center}
.authcard input:focus{outline:2px solid var(--brass)}
.autherr{color:var(--danger);font-size:13px;min-height:16px}

.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:5}
.topbar .tt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hubbody{padding:24px;max-width:1000px;margin:0 auto}
.loading{color:var(--muted);padding:30px;text-align:center}
.hello{font-family:ui-serif,Georgia,serif;font-size:26px;font-weight:600;margin:6px 4px 20px}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.toolcard{display:block;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:20px;transition:transform .12s,border-color .12s}
.toolcard:hover{transform:translateY(-2px);border-color:var(--brass-soft)}
.tc-ic{font-size:30px;color:var(--brass);margin-bottom:12px}
.tc-name{font-family:ui-serif,Georgia,serif;font-size:19px;font-weight:600}
.tc-desc{font-size:13px;color:var(--muted);margin-top:6px}
.empty2{text-align:center;color:var(--muted);padding:56px 20px}
.empty2 .big{font-family:ui-serif,Georgia,serif;font-size:22px;color:var(--ink);margin-bottom:8px}

.adminhead{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.tt2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);font-weight:600}
.ulist{display:flex;flex-direction:column;gap:10px}
.urow{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--hair);border-radius:12px;padding:14px 16px;flex-wrap:wrap}
.urow.off{opacity:.6}
.um{flex:1;min-width:200px}
.un{font-weight:600;font-size:15px}
.ulogin{color:var(--muted);font-weight:400;font-size:13px}
.rbadge{display:inline-block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass-soft);border-radius:999px;padding:1px 7px;vertical-align:middle}
.rbadge.off{color:var(--danger);border-color:var(--danger)}
.ut{font-size:13px;color:var(--muted);margin-top:3px}
.uacts{display:flex;gap:6px;flex-wrap:wrap}
.act{border:1px solid var(--hair);background:transparent;color:var(--ink);border-radius:7px;padding:5px 9px;font-size:12px;cursor:pointer}
.act:hover{border-color:var(--brass-soft)}
.act.del{color:var(--danger)}

.modalback{position:fixed;inset:0;background:rgba(10,12,14,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:30}
.modal{background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:22px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);max-height:92vh;overflow:auto}
.mtitle{font-family:ui-serif,Georgia,serif;font-size:19px;font-weight:600}
.field label{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-weight:600}
.field input{width:100%;border:1px solid var(--hair);border-radius:8px;background:var(--paper);color:var(--ink);padding:10px;font-size:15px}
.field input:focus{outline:2px solid var(--brass-soft);outline-offset:-1px;border-color:transparent}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:6px;cursor:pointer;text-transform:none;letter-spacing:0}
.chk input{width:16px;height:16px}
.mbtns{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}