:root { --bg:#f4f6f8; --panel:#fff; --soft:#f8fafc; --line:#d6dde6; --text:#1f2937; --muted:#64748b; --brand:#0f62fe; --shadow:0 12px 30px rgba(15,23,42,.08); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:Arial, Helvetica, sans-serif; padding:20px; }
a { color:var(--brand); text-decoration:none; }
button, input, select, textarea { font:inherit; }
.shell { max-width:1480px; margin:0 auto; display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; }
.sidebar, .header, .panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
.sidebar { padding:18px; min-height:calc(100vh - 40px); display:flex; flex-direction:column; gap:16px; }
.brand h1 { margin:0; font-size:20px; }
.brand p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.main { display:grid; gap:16px; }
.header { padding:18px; }
.header h2 { margin:0; font-size:22px; }
.header p { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.panel { padding:16px; }
.section-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.section-card { border:1px solid var(--line); border-radius:8px; background:var(--soft); padding:14px; display:grid; gap:8px; min-height:110px; }
a.section-card { color:var(--text); transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.section-card:hover { border-color:#9db8f9; box-shadow:0 8px 20px rgba(15,98,254,.10); transform:translateY(-1px); }
.section-card strong { font-size:15px; }
.section-card span { color:var(--muted); font-size:12px; line-height:1.5; }
@media (max-width:1120px) { .shell { grid-template-columns:1fr; } .sidebar { min-height:auto; } .section-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { body { padding:12px; } .section-grid { grid-template-columns:1fr; } }