:root{
  --bg:#0f172a; /* slate-900 */
  --card:#111827; /* gray-900 */
  --muted:#94a3b8; /* slate-400 */
  --fg:#e5e7eb; /* gray-200 */
  --pri:#38bdf8; /* sky-400 */
  --pri-600:#0284c7; /* sky-600 */
  --danger:#ef4444;
  --ok:#22c55e;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,"Noto Sans TC",Arial}
.container{max-width:960px;margin:0 auto;padding:16px}
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:800;letter-spacing:.5px}
.nav a{color:var(--fg);text-decoration:none;margin-left:12px;opacity:.85}
.nav a.active, .btn.primary{background:var(--pri);color:#001b2a}

form{display:grid;gap:10px}
.input{display:flex;flex-direction:column;gap:6px}
.input input,.input select,.input textarea{padding:12px;border:1px solid #233043;background:#0b1220;color:var(--fg);border-radius:12px}
.input small{color:var(--muted)}
.row{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (max-width:720px){.row{grid-template-columns:1fr}}

.btn{padding:12px 14px;border-radius:12px;border:0;cursor:pointer;background:#1f2937;color:var(--fg)}
.btn.primary:hover{filter:brightness(.95)}
.btn.danger{background:var(--danger)}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#1f2937;color:var(--fg);font-size:12px}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th,.table td{padding:10px 12px;text-align:left}
.table tr{background:#0b1220}
.table tr:hover{background:#0f1828}
.table .right{text-align:right}

.kv{display:grid;grid-template-columns:140px 1fr;gap:8px}
.timeline{border-left:2px solid #233043;margin-left:10px;padding-left:12px}
.timeline .item{margin-bottom:10px}
.timeline .item .ts{font-size:12px;color:var(--muted)}

/* Captcha & helper */
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.helper{font-size:12px;color:var(--muted)}

/* Cards grid */
.grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card.center{text-align:center}
.logo{font-size:20px}