:root{
  --bg:#0f172a;
  --card:#111827;
  --border:#1f2937;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --primary:#3b82f6;
  --primary-600:#2563eb;
  --success:#10b981;
  --danger:#ef4444;
  --warning:#f59e0b;
}
/* 亮色主题变量 */
.theme-light{
  --bg:#f1f5f9;
  --card:#ffffff;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --primary:#3b82f6;
  --primary-600:#2563eb;
  --success:#10b981;
  --danger:#ef4444;
  --warning:#f59e0b;
}
*{box-sizing:border-box}
.theme-dark body{font-family:system-ui, Segoe UI, Arial; margin:0; background:var(--card); color:var(--text);} 
.theme-light body{font-family:system-ui, Segoe UI, Arial; margin:0; background:var(--surface-weak); color:var(--text);} 
.theme-dark html{background:var(--card);} 
.theme-light html{background:var(--surface-weak);} 
.navbar{height:56px; display:flex; align-items:center; padding:0 20px; border-bottom:1px solid var(--border); background:var(--card); position:sticky; top:0; z-index:10}
.navbar h1{font-size:18px; margin:0; letter-spacing:.5px}

.container{max-width:1100px; margin:24px auto; padding:0 16px;min-width:330px}
.grid{grid-template-columns:1fr; gap:16px; justify-items:center; align-items:center; margin:0 auto; max-width:800px}
@media(min-width:960px){.grid{grid-template-columns:1fr 1fr}}

.card{display:block; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.15); overflow:hidden; margin-left:auto; margin-right:auto;margin-top:16px}
.grid .card{max-width:560px;min-width:320px}
.card-header{padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between}
.card-header h2{font-size:16px; margin:0}
.card-body{padding:20px}

label{display:block; margin:10px 0 6px; color:var(--muted)}
.theme-dark input[type=text],.theme-dark input[type=password]{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:#0b1220; color:var(--text)}
.theme-light input[type=text],.theme-light input[type=password]{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:#ffffff; color:var(--text)}
input:focus{outline:none; border-color:#334155; box-shadow:0 0 0 4px rgba(51,65,85,.35)}

.row{display:flex; gap:10px; align-items:center; justify-content:center;padding:10px 0}
.row .grow{flex:1}
.row .captcha-box{margin:0 auto; flex:0 0 auto}
.captcha-line{display:flex; align-items:center; justify-content:center; gap:20px}
.captcha-box{padding:10px 12px; border:none; border-radius:10px; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:10px; text-align:center}
.captcha-box #captchaText{margin:0 auto}
.captcha-box #refresh{margin-left:auto; min-width:60px}
.row .btn.primary#submitBtn{margin-left:auto; min-width:80px}
.captcha-img{width:120px; height:40px; border-radius:8px; background:#fff}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); cursor:pointer;margin:0 20px}
.btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary-600)); border-color:#1d4ed8}
.btn.success{background:linear-gradient(180deg,#10b981,#059669); border-color:#047857}
.btn.primary:hover{filter:brightness(1.05)}
.btn.secondary:hover{border-color:#334155}
.btn.small{padding:8px 12px; font-size:14px}
.btn.danger{background:linear-gradient(180deg,#ef4444,#dc2626); border-color:#b91c1c}
.btn.warn{background:linear-gradient(180deg,#f59e0b,#d97706); border-color:#b45309}

.msg{margin-top:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; color:var(--muted)}
.msg.error{border-color:#7f1d1d; color:#fecaca; background:#450a0a}
.msg.ok{border-color:#064e3b; color:#d1fae5; background:#052e24}

table{width:100%; border-collapse:separate; border-spacing:0; margin-top:8px}
.theme-dark thead th{font-weight:600; text-align:left; color:var(--muted); background:#0b1220}
.theme-light thead th{font-weight:600; text-align:left; color:var(--muted); background:#f1f5f9}
th,td{padding:12px 10px; border-bottom:1px solid var(--border)}
.theme-dark tbody tr:hover{background:#0b1220}
.theme-light tbody tr:hover{background:#f8fafc}

.badge{display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; line-height:1; border:1px solid var(--border)}
.badge.ok{background:#052e24; color:#34d399; border-color:#064e3b}
.badge.pending{background:#1f2937; color:#fbbf24}
.badge.banned{background:#3f1f23; color:#fca5a5; border-color:#7f1d1d}

.toolbar{display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:8px}
.search{flex:1}
.toolbar select.search{appearance:none;-webkit-appearance:none;-moz-appearance:none; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 36px 10px 12px; line-height:1.2;}
.toolbar select.search{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="%23e5e7eb"><path d="M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708L8.354 9.354a.5.5 0 0 1-.708 0L4.646 6.354a.5.5 0 0 1 0-.708z"/></svg>'); background-repeat:no-repeat; background-position:right 12px center; background-size:16px}
.toolbar select.search:focus{outline:none; border-color:#334155; box-shadow:0 0 0 4px rgba(51,65,85,.35)}
.toolbar select.search:hover{border-color:#334155}
.footer{padding:12px 20px; color:var(--muted)}
.table-wrap{width:100%}
.landing{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px}
.landing .hero-img-wrap{position:relative; width:100%; max-width:640px; margin:12px auto; border:1px solid var(--border); border-radius:16px; overflow:hidden}
.landing .hero-img{display:block; width:100%; height:auto}
.landing .hero-cta{position:absolute; right:16px; bottom:16px}
.landing .hero-badge{position:absolute; left:16px; top:16px; background:var(--card); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:999px; font-size:12px}

/* 应用外壳，圆角阴影容器 */
.app-shell{max-width:1280px; margin:16px auto; padding:0; border:1px solid var(--border); border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.2); overflow:hidden; background:var(--card)}
.app-body{display:flex; min-height:calc(100vh - 56px)}
.app-sidebar{width:240px; border-right:1px solid var(--border); background:var(--card)}
.app-content{flex:1; background:var(--card)}


.cardList{
  width: 100%;
  height: calc(100vh - 20px);
  overflow-y: auto;
}

@media(max-width:640px){
  .container{padding:0 16px}
  .navbar{padding:0 12px}
  .navbar h1{font-size:16px}
  .card{max-width:100%; min-width:0; margin:0 12px}
  .card-header{padding:12px}
  .card-body{padding:12px}
  .toolbar{flex-direction:row; align-items:center; gap:10px}
  .toolbar .search{flex:1}
  .search{width:100%}
  .table-wrap{overflow-x:visible}
  table, thead, tbody, th, td, tr{display:block}
  thead{display:none}
  tbody tr{border:1px solid var(--border); border-radius:8px; margin-bottom:12px; padding:8px; background:var(--card)}
  td{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border)}
  td:last-child{border-bottom:none}
  td::before{content: attr(data-label); color:var(--muted); margin-right:12px}
  td .btn{width:auto}
  td:last-child .btn{width:100%}
  .row{padding:8px 0}
  .captcha-line{flex-direction:row; justify-content:space-between}
  .captcha-img{width:96px; height:36px}
  .captcha-line #captcha{flex:1; min-width:0}
  #submitBtn{flex:0 0 auto; min-width:96px}
}