:root{--bg:#0b0b0c;--panel:#151517;--panel2:#1c1c1f;--line:#2a2a2e;--text:#ececee;--muted:#9a9aa3;--accent:#00b5a0;--accent-h:#14cdb7;--danger:#e5484d;--warn:#f5a623;--ok:#00b5a0;--radius:10px}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.45}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-h)}
h1{font-size:1.6rem;margin:0 0 .3rem}h2{font-size:1.2rem;margin:0 0 .6rem}h3{font-size:1rem;margin:0 0 .5rem}
.muted{color:var(--muted)}.small{font-size:.85rem}.right{text-align:right}.nowrap{white-space:nowrap}.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.topbar{display:grid;grid-template-columns:1fr auto;grid-template-rows:56px 44px;grid-template-areas:"brand user" "nav nav";height:100px;padding:0 1.6rem;background:#000;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.brand{grid-area:brand;display:flex;align-items:center;gap:.8rem;color:var(--text);font-weight:700;font-size:1.15rem}.brand img{height:34px}
.nav{grid-area:nav;display:flex;gap:.25rem;align-items:stretch;overflow-x:auto}
.nav a{display:flex;align-items:center;color:#c9c9d1;padding:0 1.15rem;font-size:1.05rem;font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
.nav a:hover{color:#fff;background:var(--panel2)}
.nav a.active{color:#fff;border-bottom-color:var(--accent);background:var(--panel)}
.nav-sep{width:1px;margin:10px .6rem;background:var(--line)}
.usermenu{grid-area:user;display:flex;gap:.4rem;align-items:center}
.usermenu a{color:#c9c9d1;padding:.45rem .9rem;border-radius:7px;font-size:1rem;font-weight:600}
.usermenu a:hover{color:#fff;background:var(--panel2)}
.usermenu a.active{color:#fff;background:var(--panel2)}
.usermenu a.muted{border:1px solid var(--line)}
.nav-toggle{display:none;grid-area:user;justify-self:end;align-self:center;background:none;border:1px solid var(--line);color:var(--text);border-radius:6px;font-size:1.4rem;padding:.2rem .7rem}
@media(max-width:860px){.topbar{height:auto;grid-template-rows:60px auto;padding:0 1rem}.nav-toggle{display:block}.nav,.usermenu{display:none}body.nav-open .nav{display:flex;flex-direction:column;padding-bottom:.6rem}body.nav-open .nav a{padding:.8rem .6rem;border-bottom:1px solid var(--line)}body.nav-open .usermenu{display:flex;grid-area:nav;padding-bottom:.8rem}.nav-sep{display:none}}
.container{max-width:1280px;margin:0 auto;padding:1.4rem}
.footer{text-align:center;color:var(--muted);font-size:.8rem;padding:1.5rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;margin-bottom:1.1rem}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.grid{display:grid;gap:1rem}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.g3,.g4,.g5{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}
.stat{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;color:var(--text)}
.stat:hover{border-color:var(--accent);color:var(--text)}.stat .n{font-size:2rem;font-weight:700;line-height:1.1}.stat .l{color:var(--muted);font-size:.85rem}
.stat .bar{height:3px;border-radius:2px;margin-bottom:.6rem}
.btn,button.btn{display:inline-block;background:var(--accent);color:#04100e;border:1px solid var(--accent);border-radius:7px;padding:.5rem .95rem;font-size:.95rem;font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--accent-h);color:#04100e}.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}.btn-ghost:hover{background:var(--panel2);color:var(--text);border-color:#3a3a40}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-danger:hover{background:#f05a5f;color:#fff}
.btn-sm{padding:.3rem .65rem;font-size:.85rem}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.25rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],input[type=url],input[type=file],select,textarea{width:100%;background:#0f0f11;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:.5rem .65rem;font-size:.95rem;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{min-height:80px;resize:vertical}
.field{margin-bottom:.9rem}.field .hint{color:var(--muted);font-size:.8rem;margin-top:.2rem}
.check{display:flex;align-items:center;gap:.5rem;color:var(--text);font-size:.95rem}.check input{width:auto}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem}
.alert{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;border:1px solid}
.alert-success{background:#0b2b27;border-color:#0f5a52;color:#7ee8da}.alert-error,.alert-danger{background:#33151a;border-color:#6a2430;color:#ff9aa0}
.alert-warning{background:#33270f;border-color:#6a4e17;color:#ffcd7a}.alert-info{background:#14222f;border-color:#2a4660;color:#9cc7ee}
table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:.55rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
table.t th a{color:var(--muted)}table.t th a:hover{color:var(--text)}
table.t td{padding:.55rem .6rem;border-bottom:1px solid #202024;vertical-align:middle}
table.t tr:hover td{background:#19191c}
.table-wrap{overflow-x:auto}
.badge{display:inline-block;padding:.12rem .55rem;border-radius:20px;font-size:.75rem;font-weight:700;white-space:nowrap}
.tag{display:inline-block;padding:.1rem .5rem;border-radius:5px;font-size:.75rem;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.tag-warn{background:#33270f;border-color:#6a4e17;color:#ffcd7a}.tag-danger{background:#33151a;border-color:#6a2430;color:#ff9aa0}.tag-ok{background:#0b2b27;border-color:#0f5a52;color:#7ee8da}
.pagination{display:flex;gap:.25rem;margin-top:1rem;flex-wrap:wrap}.pg{padding:.3rem .65rem;border:1px solid var(--line);border-radius:6px;color:var(--text)}.pg.active{background:var(--accent);color:#04100e;border-color:var(--accent)}.pg.disabled,.pg.gap{color:var(--muted);border-color:transparent}
.filters{display:grid;grid-template-columns:2fr repeat(4,1fr) auto;gap:.7rem;align-items:end}
@media(max-width:1000px){.filters{grid-template-columns:repeat(2,1fr)}}
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem;flex-wrap:wrap}
.tabs a,.tabs button{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);padding:.6rem 1rem;cursor:pointer;font-size:.95rem;font-family:inherit}
.tabs a.active,.tabs button.active{color:var(--text);border-bottom-color:var(--accent)}
.tabpane{display:none}.tabpane.active{display:block}
.kv{display:grid;grid-template-columns:170px 1fr;gap:.4rem .8rem}.kv dt{color:var(--muted)}.kv dd{margin:0}
@media(max-width:600px){.kv{grid-template-columns:1fr}}
.bulkbar{display:none;align-items:center;gap:.7rem;background:var(--panel2);border:1px solid var(--accent);border-radius:8px;padding:.6rem .9rem;margin-bottom:.8rem;flex-wrap:wrap}.bulkbar.show{display:flex}
/* modal */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:flex-start;justify-content:center;z-index:200;padding:4vh 1rem;overflow:auto}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:100%;max-width:560px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal.wide{max-width:860px}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}.modal-h h2{margin:0}
.modal-x{background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;line-height:1}
.modal-b{padding:1.2rem;max-height:70vh;overflow:auto}.modal-f{padding:.9rem 1.2rem;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}
#toasts{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:300}
.toast{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);padding:.6rem .9rem;border-radius:8px;max-width:360px}.toast.error{border-left-color:var(--danger)}
/* progress */
.progress{height:8px;background:var(--panel2);border-radius:4px;overflow:hidden}.progress>div{height:100%;background:var(--accent);width:0;transition:width .2s}
.drop{border:2px dashed var(--line);border-radius:12px;padding:2rem;text-align:center;color:var(--muted)}.drop.over{border-color:var(--accent);color:var(--text)}
.issue{border:1px solid var(--line);border-radius:8px;padding:.8rem 1rem;margin-bottom:.6rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;background:var(--panel2)}
.issue.resolved{opacity:.6;border-color:#0f5a52}
/* guest/login */
body.guest{min-height:100vh;background:#000 url(../img/hero-bg.svg) center/cover no-repeat fixed}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.login-card{width:100%;max-width:400px;background:rgba(15,15,17,.92);border:1px solid var(--line);border-radius:14px;padding:2rem;backdrop-filter:blur(6px)}
.login-card img.logo{height:44px;display:block;margin:0 auto 1.4rem}.login-card h1{text-align:center;font-size:1.25rem;margin-bottom:1.2rem}
.swatch{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:.35rem}
.preview-img{max-height:80px;max-width:240px;background:#fff;padding:6px;border-radius:6px}
@media print{.topbar,.footer{display:none}}