:root{
  --bg:#f4f6fa;
  --panel:#ffffff;
  --line:#d9e1ec;
  --line-soft:#edf1f7;
  --text:#17212f;
  --muted:#66758a;
  --primary:#185abc;
  --primary-soft:#e8f1ff;
  --success:#0f7a4d;
  --success-soft:#e6f7ee;
  --danger:#b42318;
  --danger-soft:#ffe8e6;
  --warning:#8a5a00;
  --warning-soft:#fff4d6;
  --shadow:0 12px 32px rgba(20,36,64,.08);
}
*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  min-height:100%;
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:var(--primary)}
.shell{max-width:1360px;margin:0 auto;padding:18px}
.topbar,.nav,.panel,.notice,.table,.form,.stat{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  margin-bottom:12px;
  box-shadow:var(--shadow);
}
.brand{font-size:19px;font-weight:750;letter-spacing:0}
.sub,.muted,.small{color:var(--muted)}
.small{font-size:12px;margin-top:3px}
.user{display:flex;align-items:center;gap:12px;white-space:nowrap}
.user a{display:inline-block;text-decoration:none;background:#eef2f7;color:#314158;padding:7px 10px;border-radius:6px}
.nav{
  display:flex;
  gap:6px;
  padding:8px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.nav a{
  color:#2b3a4e;
  text-decoration:none;
  padding:9px 13px;
  border-radius:6px;
  transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:#f0f4fa}
.nav a.active{background:var(--primary-soft);color:var(--primary);font-weight:650}
.main{display:grid;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.stat{padding:16px 18px;box-shadow:0 6px 18px rgba(20,36,64,.05)}
.stat .num{font-size:30px;font-weight:760;margin-top:4px}
.panel,.form{padding:16px 18px}
h2{font-size:17px;margin:0 0 12px;font-weight:720}
label{display:block;margin:10px 0 6px;color:#34445a;font-weight:620}
.notice{
  padding:12px 16px;
  border-left:4px solid #ffb020;
  background:#fffaf0;
}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}
.table th,.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--line-soft);
  text-align:left;
  vertical-align:top;
}
.table th{
  background:#f8fafd;
  color:#526176;
  font-size:12px;
  text-transform:none;
  white-space:nowrap;
}
.table tr:hover td{background:#fbfdff}
code{
  background:#f2f5f9;
  border:1px solid #e4eaf2;
  border-radius:5px;
  padding:1px 5px;
  color:#253449;
}
.badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:650;
}
.ok{background:var(--success-soft);color:var(--success)}
.bad{background:var(--danger-soft);color:var(--danger)}
.warn{background:var(--warning-soft);color:var(--warning)}
input,textarea,select{
  width:100%;
  padding:10px 11px;
  border:1px solid #cbd6e4;
  border-radius:6px;
  background:#fff;
  color:var(--text);
  outline:none;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(24,90,188,.12);
}
textarea{
  min-height:180px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  line-height:1.45;
}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.button-group{display:inline-flex;gap:6px;align-items:center;flex-wrap:nowrap;white-space:nowrap}
.button-group form{display:inline-flex;margin:0}
.table-actions{min-width:218px}
button,.btn{
  display:inline-block;
  padding:9px 12px;
  border:0;
  border-radius:6px;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  font-weight:650;
  line-height:1.2;
}
button:hover,.btn:hover{filter:brightness(.96)}
.btn.secondary,button.btn.secondary,.actions form button{
  background:#eef2f7;
  color:#2f3d51;
}
.btn.danger-soft,button.danger-soft{
  background:var(--danger-soft);
  color:var(--danger);
}
button:disabled,.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:none;
}
.btn.danger,button.danger{background:var(--danger)}
.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    linear-gradient(140deg,#f6f8fc 0%,#edf3fb 52%,#f8fafc 100%);
}
.login-wrap{
  width:min(460px,100%);
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
}
.login-title{font-size:23px;font-weight:780;margin-bottom:4px}
.login-subtitle{color:var(--muted);margin-bottom:18px}
.error,.okmsg{
  padding:10px 12px;
  border-radius:6px;
  margin-bottom:12px;
}
.error{color:var(--danger);background:var(--danger-soft)}
.okmsg{color:var(--success);background:var(--success-soft)}
@media (max-width:760px){
  .shell{padding:10px}
  .topbar{align-items:flex-start;flex-direction:column}
  .user{width:100%;justify-content:space-between}
  .table{display:block;overflow-x:auto}
  .login-page{padding:12px}
  .login-wrap{padding:20px}
}