:root{--red:#f00000;--red-d:#b80000;--ink:#0d0e12;--ink2:#171923;--bg:#eef2f7;--card:rgba(255,255,255,.72);--bd:rgba(255,255,255,.55);--tx:#161a22;--mut:#6b7280;--r:18px;--sh:0 10px 30px rgba(15,23,42,.12)}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tx);background:linear-gradient(135deg,#e9eef6,#f6f8fb 55%,#fdeaea);min-height:100vh}
.glass{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--bd);box-shadow:var(--sh);border-radius:var(--r)}
.btn{background:linear-gradient(180deg,#ff2a1f,var(--red-d));color:#fff;border:0;border-radius:12px;padding:.7rem 1.2rem;font-weight:600;cursor:pointer;box-shadow:0 6px 14px rgba(240,0,0,.28);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}.btn:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid rgba(240,0,0,.35);outline-offset:2px}
.btn-sm{padding:.4rem .9rem;font-size:.9rem}.btn-ghost{background:#fff;color:var(--tx);box-shadow:none;border:1px solid #d6dbe4}
label{display:block;font-size:.85rem;font-weight:600;margin:.9rem 0 .3rem}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=url],input[type=file],select,textarea{width:100%;padding:.65rem .8rem;border:1px solid #d3d9e3;border-radius:12px;background:#fff;font:inherit}
.alert{background:#fee;border:1px solid #f5b5b5;color:#8a0000;padding:.6rem .8rem;border-radius:12px}
.ok{color:#0a7a35;font-weight:700}.fail{color:#b00020;font-weight:700}.warn{color:#a15c00;font-weight:700}
.auth-body{display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 20% 10%,#5a0a0a,#14090b 55%,#07080b)}
.auth-card{width:min(420px,100%);padding:2rem}.auth-card h1{margin:.5rem 0}.auth-card .btn{width:100%;margin-top:1.2rem}
.auth-logo{display:block;max-width:180px;height:auto;margin:0 auto}
.shell{display:flex;min-height:100vh}
.sidebar{width:240px;flex:none;background:linear-gradient(180deg,var(--ink2),var(--ink));color:#fff;padding:1.2rem;border-radius:0 var(--r) var(--r) 0}
.brand{background:#fff;border-radius:14px;padding:.6rem;margin-bottom:1.4rem;text-align:center}.brand img{max-width:100%;height:auto;max-height:120px}
.nav-item{display:block;color:#cfd3dc;text-decoration:none;padding:.7rem .9rem;border-radius:12px;margin-bottom:.3rem}
.nav-item:hover{background:rgba(255,255,255,.08)}.nav-item.active{background:linear-gradient(90deg,var(--red),var(--red-d));color:#fff}
.main{flex:1;min-width:0;padding:1rem 1.4rem}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.1rem;margin-bottom:1.2rem}
.user{display:flex;gap:.8rem;align-items:center}.user form{margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.card{padding:1.2rem}.card h2{margin-top:0;font-size:1.05rem}
dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0}dt{color:var(--mut)}dd{margin:0;font-weight:600}
.wiz{width:min(760px,100%);padding:1.6rem;margin:1.5rem auto}.steps{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0;padding:0;list-style:none}
.steps li{padding:.25rem .7rem;border-radius:999px;background:#e6e9ef;font-size:.8rem}.steps li.cur{background:var(--red);color:#fff}.steps li.done{background:#d7f3e0}
table{width:100%;border-collapse:collapse}td,th{padding:.5rem;border-bottom:1px solid #e5e8ee;text-align:left}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:800px){.shell{flex-direction:column}.sidebar{width:auto;border-radius:0 0 var(--r) var(--r)}.row{grid-template-columns:1fr}.main{padding:.8rem}}

/* ---- Phase 3: dark canvas + white glass cards (reference style) ---- */
body{background:radial-gradient(circle at 15% 0%,#3a0b0d 0,#14090b 38%,#07080b 100%) fixed;color:#e9ecf2}
.glass{background:rgba(255,255,255,.93);color:var(--tx)}
.content h1,.page-head h1{color:#fff;margin:.2rem 0 1rem}.page-head h1 small{color:#aab0bd;font-weight:400;font-size:.6em}
.topbar{color:var(--tx)}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.btn{display:inline-block;text-decoration:none;font-size:.95rem}
.btn-danger{background:#fff;color:#b00020;border:1px solid #f1b5b5;box-shadow:none}
.notice{padding:.6rem .9rem;border-radius:12px;background:#e6f7ec;border:1px solid #a9dfba;color:#0a5a28}
.filters{display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:flex-end;padding:.6rem 1rem 1rem;margin-bottom:1rem}
.filters>div{flex:1 1 170px}.filters .filters-actions{flex:0 0 auto;display:flex;gap:.4rem}
.tablewrap{padding:.4rem;overflow-x:auto}.empty{padding:1.2rem;color:var(--mut);text-align:center}
.rtable th a{color:inherit;text-decoration:none}.rtable th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.rtable td small{color:var(--mut)}.child{padding-left:1.2rem}
.actions{display:flex;gap:.3rem;flex-wrap:wrap}.actions form{margin:0}.actions-col{width:1%}
.badge{padding:.15rem .6rem;border-radius:999px;font-size:.75rem;font-weight:700}.badge.on{background:#d7f3e0;color:#0a5a28}.badge.off{background:#eceef3;color:#666}
.pager{display:flex;gap:.3rem;justify-content:center;margin:1rem 0}.pager a,.pager span{padding:.4rem .75rem;border-radius:10px;background:rgba(255,255,255,.9);color:var(--tx);text-decoration:none}
.pager .cur{background:var(--red);color:#fff;font-weight:700}
.stack{display:grid;gap:1rem}.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 1rem}
.fld{margin-bottom:.2rem}.field-error{display:block;color:#b00020;margin-top:.2rem}.fld small{color:var(--mut)}.fld .field-error{color:#b00020}
textarea{resize:vertical}.form-actions{display:flex;gap:.6rem}.card h2{margin-top:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1rem}
.stat{display:flex;flex-direction:column;padding:1.1rem 1.3rem;text-decoration:none;color:var(--tx);border-left:6px solid var(--red)}
.stat .num{font-size:2rem;font-weight:800;color:var(--red)}
@media(max-width:800px){
  .rtable thead{display:none}.rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable tr{border:1px solid #e5e8ee;border-radius:14px;margin:.6rem 0;padding:.4rem .6rem;background:#fff}
  .rtable td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.3rem 0;text-align:right}
  .rtable td::before{content:attr(data-label);font-weight:700;color:var(--mut);text-align:left}
  .rtable td.actions{justify-content:flex-start}.rtable td.actions::before{content:none}
  .filters>div{flex:1 1 100%}
}