*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#0b1220;color:#e6e8ef}
header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;background:#0f172a;border-bottom:1px solid #1f2937;flex-wrap:wrap}
nav a{color:#9ec5ff;margin-right:12px;text-decoration:none}
nav a:hover{text-decoration:underline}
main{padding:16px}
.card{background:#111827;border:1px solid #24303f;border-radius:14px;padding:14px}
.row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed #1f2937}
.row:last-child{border-bottom:none}
.title{font-weight:600;max-width:500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:12px;color:#9ca3af}
.col.mid{display:flex;gap:8px;align-items:center}
.badge{background:#0b2840;border:1px solid #1b3850;padding:3px 8px;border-radius:999px}
.form{background:#111827;border:1px solid #24303f;border-radius:12px;padding:14px;max-width:620px;display:grid;gap:12px}
input,select{background:#0b1220;border:1px solid #1f2937;border-radius:8px;padding:8px;color:#fff}
button{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:8px 14px;cursor:pointer}
button#testAlarm{background:#22c55e}
.alert{padding:8px 12px;border-radius:8px;margin-bottom:12px}
.alert.ok{background:#0f3b24;color:#d5ffe9}
.alert.error{background:#3b0f16;color:#ffe1e6}
.table{display:grid;gap:6px}
.thead,.trow{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.trow.two{grid-template-columns:repeat(2,1fr)}
.trow.nine{grid-template-columns:repeat(9,1fr)}
.trow.ten{grid-template-columns:repeat(10,1fr)}
.thead.four,.trow.four{grid-template-columns:repeat(4,1fr)}
.rank-wrap{display:flex;gap:16px;flex-wrap:wrap}
.rank-card{flex:1 1 0;background:#111827;border:1px solid #24303f;border-radius:14px;padding:14px;min-width:280px}
.auth{max-width:420px;margin:40px auto}
.btn-del{background:#ef4444;color:#fff;padding:4px 8px;border-radius:6px;text-decoration:none;font-size:12px;display:inline-block}
.btn-small{background:#38bdf8;color:#0f172a;border:none;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}
.btn-small:hover{background:#0ea5e9}
.user{font-size:13px;color:#d1e0ff}

.table-hold .thead.hold,
.table-hold .trow.hold{
  display:grid;
  grid-template-columns:40px 130px 160px 110px 130px 60px 150px 90px 80px 90px;
  gap:6px;
  align-items:center;
}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:1100px){
  .table-hold .thead.hold,
  .table-hold .trow.hold{grid-template-columns:40px 130px 140px 100px 120px 60px 140px 80px 70px 80px;}
}