/* TZ License Admin — Commercial */
:root{
  --bg0:#07090f; --bg1:#0c101a; --bg2:#121826;
  --panel:#0e1420ee; --panel2:#141c2c;
  --line:rgba(212,175,55,.22); --line2:rgba(255,255,255,.06);
  --gold:#d4af37; --gold2:#f0d78c; --gold3:#a68523;
  --tx:#eef2f8; --mut:#8b97ad; --mute2:#5c6a82;
  --acc:#3db4ff; --ok:#2ed39a; --bad:#ff5d6c; --warn:#f0b429;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --r:14px; --r2:10px;
  --font:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:var(--font); color:var(--tx);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(212,175,55,.12), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(61,180,255,.08), transparent 50%),
    linear-gradient(165deg, var(--bg0), var(--bg1) 45%, #0a0e16);
  background-attachment:fixed;
}
a{color:var(--gold2); text-decoration:none}
a:hover{color:#fff}
.mono{font-variant-numeric:tabular-nums; font-family:ui-monospace,Consolas,monospace}

/* ===== Shell / sidebar ===== */
.app{display:flex; min-height:100vh}
.side{
  width:248px; flex:none;
  background:linear-gradient(180deg, #0b101a 0%, #0a0e17 100%);
  border-right:1px solid var(--line);
  padding:22px 16px; display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh;
}
.side .logo{
  display:flex; align-items:center; gap:12px;
  padding:8px 10px 20px; border-bottom:1px solid var(--line2); margin-bottom:12px;
}
.side .mark{
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(145deg, var(--gold2), var(--gold3));
  color:#1a1406; font-weight:800; display:grid; place-items:center;
  box-shadow:0 0 0 1px rgba(212,175,55,.45), 0 8px 22px rgba(212,175,55,.25);
  font-size:14px; letter-spacing:-.5px;
}
.side .logo-txt b{display:block; font-size:14px; letter-spacing:.4px}
.side .logo-txt span{font-size:11px; color:var(--mut)}
.side nav{display:flex; flex-direction:column; gap:4px; flex:1}
.side a.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; color:var(--mut);
  border:1px solid transparent; font-size:13.5px; font-weight:600;
}
.side a.nav-item:hover{background:rgba(212,175,55,.07); color:var(--tx); border-color:rgba(212,175,55,.18)}
.side a.nav-item.active{
  background:linear-gradient(90deg, rgba(212,175,55,.16), rgba(212,175,55,.04));
  color:var(--gold2); border-color:rgba(212,175,55,.35);
}
.side .ico{width:18px; text-align:center; opacity:.9}
.side .foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line2);
  font-size:12px; color:var(--mute2); display:flex; flex-direction:column; gap:8px;
}
.side .user-pill{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:rgba(255,255,255,.03); border:1px solid var(--line2); border-radius:10px; color:var(--mut);
}
.side .user-pill b{color:var(--tx); font-weight:600}
.main{flex:1; min-width:0; padding:28px 32px 48px}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.page-head h1{margin:0; font-size:22px; font-weight:700; letter-spacing:.3px}
.page-head .sub{margin:6px 0 0; color:var(--mut); font-size:13px}
.page-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ===== Cards / panels ===== */
.card{
  background:linear-gradient(180deg, rgba(20,28,44,.92), rgba(12,16,26,.94));
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:20px 22px;
  position:relative;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(240,215,140,.55), transparent);
  border-radius:var(--r) var(--r) 0 0; pointer-events:none;
}
.card + .card{margin-top:16px}
.panel-title{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.panel-title h2{margin:0; font-size:15px; color:var(--gold2); font-weight:700; letter-spacing:.3px}

/* ===== Stats ===== */
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px}
.stat{
  background:linear-gradient(145deg, #141c2c, #0d1320);
  border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.stat .k{font-size:12px; color:var(--mut); letter-spacing:.4px}
.stat .v{font-size:28px; font-weight:750; margin-top:8px; letter-spacing:.5px}
.stat .v.ok{color:var(--ok)} .stat .v.bad{color:var(--bad)} .stat .v.gold{color:var(--gold2)}

/* ===== Forms ===== */
label{display:block; font-size:12px; color:var(--mut); margin:12px 0 6px; letter-spacing:.3px}
input,select,textarea{
  width:100%; padding:11px 13px; border-radius:var(--r2);
  border:1px solid rgba(212,175,55,.22);
  background:#0a101b; color:var(--tx); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(212,175,55,.55);
  box-shadow:0 0 0 3px rgba(212,175,55,.12);
}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:end}
.row>*{flex:1; min-width:160px}
.row .shrink{flex:0 0 auto}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:0; border-radius:10px; padding:10px 16px; cursor:pointer;
  font-weight:700; font-size:13px; letter-spacing:.2px;
  background:linear-gradient(180deg, var(--gold2), var(--gold));
  color:#1a1406; box-shadow:0 6px 16px rgba(212,175,55,.22);
}
.btn:hover{filter:brightness(1.06)}
.btn.gray{background:#1a2233; color:var(--tx); border:1px solid var(--line2); box-shadow:none}
.btn.ghost{background:transparent; color:var(--mut); border:1px solid var(--line2); box-shadow:none}
.btn.red{background:linear-gradient(180deg,#c44957,#8b2e3b); color:#fff; box-shadow:0 6px 16px rgba(255,93,108,.18)}
.btn.sm{padding:6px 10px; font-size:12px; border-radius:8px}
.btn.linkish{background:none; border:0; color:var(--gold2); box-shadow:none; padding:0; font-weight:600; cursor:pointer}
.actions{display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap}
.actions form{display:inline}

/* ===== Table ===== */
.table-wrap{overflow:auto; border-radius:12px; border:1px solid var(--line2)}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:12px 14px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line2)}
th{
  background:rgba(212,175,55,.06); color:var(--mut); font-size:11px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase; white-space:nowrap;
}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(212,175,55,.04)}
tbody tr:last-child td{border-bottom:0}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700;
}
.tag::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.tag.on{background:rgba(46,211,154,.12); color:var(--ok); border:1px solid rgba(46,211,154,.28)}
.tag.off{background:rgba(255,93,108,.12); color:var(--bad); border:1px solid rgba(255,93,108,.28)}

.err,.okmsg{
  padding:11px 14px; border-radius:10px; margin:0 0 14px; font-size:13px;
}
.err{background:rgba(255,93,108,.1); border:1px solid rgba(255,93,108,.35); color:#ffc9d0}
.okmsg{background:rgba(46,211,154,.1); border:1px solid rgba(46,211,154,.35); color:#b9f5d6}
.muted{color:var(--mut); font-size:12px}
.empty{padding:28px; text-align:center; color:var(--mut)}

/* ===== Login ===== */
.login-page{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  position:relative; overflow:hidden;
}
.login-page::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(600px 400px at 20% 30%, rgba(212,175,55,.16), transparent 60%),
    radial-gradient(500px 360px at 80% 70%, rgba(61,180,255,.1), transparent 55%);
  pointer-events:none;
}
.login-card{
  width:min(420px,100%); position:relative; z-index:1;
  background:linear-gradient(180deg, rgba(18,24,38,.95), rgba(10,14,22,.96));
  border:1px solid var(--line); border-radius:18px; padding:32px 28px 28px;
  box-shadow:var(--shadow);
}
.login-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold2), transparent);
}
.login-brand{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.login-brand .mark{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(145deg, var(--gold2), var(--gold3));
  color:#1a1406; font-weight:800; display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(212,175,55,.28);
}
.login-card h1{margin:14px 0 4px; font-size:22px}
.login-card .lead{margin:0 0 18px; color:var(--mut); font-size:13px}
.login-card .btn{width:100%; margin-top:18px; padding:12px}
.login-foot{margin-top:18px; text-align:center; color:var(--mute2); font-size:11px}

.form-card{max-width:560px}
@media (max-width:900px){
  .app{flex-direction:column}
  .side{width:100%; height:auto; position:relative; border-right:0; border-bottom:1px solid var(--line)}
  .side nav{flex-direction:row; flex-wrap:wrap}
  .stats{grid-template-columns:1fr}
  .main{padding:18px 14px 36px}
}

.dur-pills{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px}
.dur-pill{
  appearance:none; cursor:pointer;
  padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600;
  color:var(--mut); background:#121826; border:1px solid var(--line2);
}
.dur-pill:hover{color:var(--tx); border-color:var(--gold2)}
.dur-pill.active{
  color:#1a1408; background:linear-gradient(180deg,#f0d38a,#c9a227);
  border-color:#e0c36a; box-shadow:0 4px 14px rgba(201,162,39,.25);
}
.hint{margin:6px 0 14px; color:var(--mut); font-size:12px; line-height:1.5}