:root{
  --bg:#0b1020;
  --panel:#111936;
  --panel2:#0f1730;
  --text:#e7ecff;
  --muted:#93a3d6;
  --border:rgba(255,255,255,.08);
  --primary:#4c7dff;
  --danger:#ff4d4f;
  --shadow:0 12px 32px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;background:radial-gradient(1200px 800px at 20% 10%, #1a2b66 0%, var(--bg) 55%) fixed;color:var(--text)}
.hidden{display:none!important}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,Monaco,monospace}

/* login */
.login-view{height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.card{width:min(420px,100%);background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:22px}
.card-title{font-size:20px;font-weight:700;margin-bottom:6px}
.card-subtitle{color:var(--muted);margin-bottom:14px}

/* app */
.app-view{height:100%;display:grid;grid-template-columns:260px 1fr}
.sidebar{border-right:1px solid var(--border);background:linear-gradient(180deg,var(--panel2),rgba(17,25,54,.55));display:flex;flex-direction:column}
.brand{padding:18px 16px;border-bottom:1px solid var(--border)}
.brand-title{font-weight:800;font-size:16px}
.brand-subtitle{margin-top:6px;color:var(--muted);font-size:12px}
.nav{padding:10px}
.nav-item{width:100%;text-align:left;padding:10px 10px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer}
.nav-item:hover{background:rgba(255,255,255,.05)}
.nav-item.active{border-color:rgba(76,125,255,.35);background:rgba(76,125,255,.12)}
.nav-sep{height:1px;background:var(--border);margin:10px 4px}
.nav-action{width:100%;text-align:left}
.sidebar-footer{margin-top:auto;padding:12px;border-top:1px solid var(--border)}

.main{padding:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.topbar-title{font-size:18px;font-weight:800}

.panel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:14px;margin-bottom:14px}
.panel-title{font-weight:800;margin-bottom:10px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width: 1000px){.app-view{grid-template-columns:1fr}.sidebar{display:none}.grid2{grid-template-columns:1fr}}

.form{display:flex;flex-direction:column;gap:10px}
label{display:flex;flex-direction:column;gap:6px}
label > span{color:var(--muted);font-size:12px}
input,select,textarea{padding:10px 10px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{border-color:rgba(76,125,255,.5)}
textarea{min-height:90px;resize:vertical}
.row{display:flex;gap:10px;align-items:center}
.inline{flex-direction:row;align-items:center;gap:10px}

.btn{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer}
.btn:hover{background:rgba(255,255,255,.09)}
.btn.primary{border-color:rgba(76,125,255,.5);background:rgba(76,125,255,.18)}
.btn.danger{border-color:rgba(255,77,79,.5);background:rgba(255,77,79,.12)}

.hint{color:var(--muted);font-size:12px}
.hint.err{color:#ffb3b3}

.list{display:flex;flex-direction:column;gap:8px;max-height:460px;overflow:auto;padding-right:6px}
.item{padding:10px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.04);cursor:pointer}
.item:hover{background:rgba(255,255,255,.06)}
.item-title{font-weight:800;font-size:13px}
.item-sub{color:var(--muted);font-size:12px;margin-top:4px}

.table-wrap{overflow:auto}
.data-table{width:100%;border-collapse:separate;border-spacing:0}
.data-table th,.data-table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top;font-size:12px}
.data-table th{position:sticky;top:0;background:rgba(15,23,48,.95);backdrop-filter: blur(6px);text-align:left}
.data-table tr:hover td{background:rgba(255,255,255,.03)}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:18px}
.modal-content{width:min(720px,100%);max-height:90vh;overflow:auto;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.modal-title{font-weight:900;font-size:16px;margin-bottom:10px}