:root{
  --primary:#5b8cff;
  --bg:#f6f8fc;
  --border:#e6e9f0;
  --text:#1f2937;
  --muted:#6b7280;
  --shadow-md:0 6px 18px rgba(0,0,0,.06);
}
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{ margin:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif; color:var(--text); background:var(--bg); }

.layout{ display:flex; min-height:100vh; }
.sidebar{ width: 220px; background: #111827; color:#e8edf5; }
.main{ flex:1; display:flex; flex-direction:column; }
.topbar{ height:56px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:end; justify-content:space-between; }
.content{ flex:1; }

h1,h2,h3{ color:#111827; }
.container{ width:80vw; max-width:none; margin:0 auto; padding:20px; }
.btn{ background:var(--primary); color:#fff; border:none; border-radius:6px; padding:12px 16px; cursor:pointer; font-size:16px; }
.input{ height:48px; border:1px solid var(--border); border-radius:6px; padding:0 12px; font-size:16px; }
.table{ width:100%; border-collapse: collapse; font-size:16px; }
.table th,.table td{ border:1px solid var(--border); padding:12px 12px; }

.filter-row{ display:flex; gap:12px; margin-bottom:16px; align-items:center; flex-wrap: wrap; }
.label{ color:#374151; font-size:16px; }