/* ===== morrk.top 管理后台 · Vercel 浅色专业风 ===== */
:root {
  --text-primary:#171717; --text-secondary:#4d4d4d; --text-tertiary:#666; --text-muted:#808080;
  --bg:#fff; --bg-secondary:#fafafa; --bg-tertiary:#f5f5f5;
  --blue:#0070f3; --blue-light:#ebf5ff; --green:#059669; --green-light:#ecfdf5;
  --red:#dc2626; --red-light:#fef2f2; --amber:#d97706;
  --border:rgba(0,0,0,0.08);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --radius-sm:4px; --radius:6px; --radius-md:8px; --radius-lg:12px; --radius-full:9999px;
  --shadow-sm:0 0 0 1px rgba(0,0,0,0.08);
  --shadow-md:0 0 0 1px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:0 0 0 1px rgba(0,0,0,0.08),0 4px 12px rgba(0,0,0,0.08);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  color:var(--text-primary); background:var(--bg-secondary); font-size:14px; line-height:1.6; }
a { color:inherit; text-decoration:none; }

/* Layout: sidebar + main */
.layout { display:flex; min-height:100vh; }
.sidebar { width:230px; background:var(--bg); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; }
.sidebar-brand { padding:var(--sp-5) var(--sp-5) var(--sp-4);
  display:flex; align-items:center; gap:var(--sp-3); font-weight:600; font-size:17px; }
.sidebar-logo { width:28px; height:28px; border-radius:var(--radius-md); background:var(--text-primary);
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; }
.sidebar-nav { flex:1; padding:var(--sp-3); display:flex; flex-direction:column; gap:2px; }
.nav-label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:0.5px; padding:var(--sp-3) var(--sp-3) var(--sp-2); }
.nav-item { display:flex; align-items:center; gap:var(--sp-3); padding:8px var(--sp-3);
  border-radius:var(--radius-md); font-size:14px; font-weight:500; color:var(--text-tertiary);
  transition:all .15s; cursor:pointer; }
.nav-item:hover { background:var(--bg-tertiary); color:var(--text-primary); }
.nav-item.on { background:var(--blue-light); color:var(--blue); }
.nav-ico { width:18px; text-align:center; }
.sidebar-foot { padding:var(--sp-4); border-top:1px solid var(--border);
  display:flex; gap:var(--sp-3); font-size:13px; }
.sidebar-foot a { color:var(--text-tertiary); }
.sidebar-foot a:hover { color:var(--text-primary); }
.main { flex:1; margin-left:230px; }
.topbar { height:60px; background:var(--bg); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--sp-6); position:sticky; top:0; z-index:10; }
.topbar h1 { font-size:18px; font-weight:600; }
.content { padding:var(--sp-6); max-width:1100px; }

/* Cards & stats */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin-bottom:var(--sp-6); }
.stat { background:var(--bg); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--sp-5); }
.stat-label { font-size:13px; color:var(--text-tertiary); margin-bottom:var(--sp-2); }
.stat-num { font-size:28px; font-weight:600; letter-spacing:-0.5px; }
.panel { background:var(--bg); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); margin-bottom:var(--sp-5); }
.panel-head { padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; }
.panel-head h2 { font-size:15px; font-weight:600; }
.panel-body { padding:var(--sp-5); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:var(--sp-2); height:36px; padding:0 var(--sp-4);
  border-radius:var(--radius); font-size:14px; font-weight:500; cursor:pointer; border:none;
  transition:all .15s; background:var(--bg); box-shadow:var(--shadow-sm); color:var(--text-primary); }
.btn:hover { background:var(--bg-tertiary); }
.btn-primary { background:var(--text-primary); color:#fff; box-shadow:none; }
.btn-primary:hover { background:#000; }
.btn-danger { color:var(--red); }
.btn-danger:hover { background:var(--red-light); }
.btn-sm { height:30px; padding:0 var(--sp-3); font-size:13px; }

/* Table */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; padding:var(--sp-3) var(--sp-4); font-size:12px; font-weight:600;
  color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.4px; border-bottom:1px solid var(--border); }
.tbl td { padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); }
.tbl tr:hover td { background:var(--bg-secondary); }
.tbl-actions { display:flex; gap:var(--sp-2); }

/* Badge */
.badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:var(--radius-full);
  font-size:12px; font-weight:500; background:var(--bg-tertiary); color:var(--text-secondary); }
.badge-green { background:var(--green-light); color:var(--green); }
.badge-amber { background:#fffbeb; color:var(--amber); }

/* Forms */
.field { margin-bottom:var(--sp-4); }
.field label { display:block; font-size:13px; font-weight:500; color:var(--text-secondary); margin-bottom:var(--sp-2); }
.input, .textarea, .select { width:100%; padding:8px var(--sp-3); border:none; box-shadow:var(--shadow-sm);
  border-radius:var(--radius); font-size:14px; font-family:inherit; background:var(--bg); color:var(--text-primary); }
.input:focus, .textarea:focus, .select:focus { outline:none; box-shadow:0 0 0 2px var(--blue); }
.textarea { resize:vertical; min-height:400px; font-family:'SF Mono',Monaco,monospace; font-size:13px; line-height:1.6; }
.row { display:flex; gap:var(--sp-4); }
.row .field { flex:1; }

/* Toast */
.toast-box { position:fixed; bottom:var(--sp-6); right:var(--sp-6); z-index:100; display:flex; flex-direction:column; gap:var(--sp-3); }
.toast { padding:var(--sp-3) var(--sp-5); border-radius:var(--radius-md); background:var(--bg); box-shadow:var(--shadow-lg);
  font-size:14px; animation:toastIn .3s cubic-bezier(0.34,1.56,0.64,1); }
.toast.ok { border-left:3px solid var(--green); }
.toast.err { border-left:3px solid var(--red); }
@keyframes toastIn { from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:translateX(0);} }

/* Empty */
.empty { text-align:center; padding:var(--sp-8); color:var(--text-muted); }

@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .main { margin-left:0; }
  .stats { grid-template-columns:repeat(2,1fr); }
}