/* Template 30: Sidebar Navigation — 侧栏导航 · 靛蓝专业 */
:root {
  --indigo: #6366f1;
  --indigo-hover: #4f46e5;
  --indigo-light: #e0e7ff;
  --indigo-glow: rgba(99, 102, 241, 0.3);
  --sidebar-bg: #1e293b;
  --sidebar-hover: #334155;
  --canvas-bg: #f8fafc;
  --canvas-card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
  --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--canvas-bg); color:var(--text); font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif; line-height:1.65; overflow-x:hidden; }
a { color:inherit; text-decoration:none; transition:all .25s; }

/* Master Layout */
.app-layout { display:flex; min-height:100vh; }
.sidebar-panel { width:260px; background:var(--sidebar-bg); color:#fff; position:fixed; top:0; bottom:0; left:0; padding:2rem 1.25rem; display:flex; flex-direction:column; justify-content:space-between; z-index:100; box-shadow:4px 0 20px rgba(0,0,0,0.05); }
.canvas-panel { margin-left:260px; flex:1; padding:2.5rem 3.5rem; max-width:1250px; }

/* Sidebar Nav */
.sidebar-logo { font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:2.5rem; display:flex; align-items:center; gap:.5rem; }
.sidebar-logo span { color:var(--indigo); }
.sidebar-menu { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.sidebar-menu a { display:flex; align-items:center; gap:.8rem; padding:.75rem 1rem; border-radius:var(--radius); color:#cbd5e1; font-weight:600; font-size:.92rem; transition:all .2s; }
.sidebar-menu a:hover, .sidebar-menu a.active { background:var(--indigo); color:#fff; box-shadow:0 4px 15px var(--indigo-glow); }
.sidebar-menu a i { width:20px; text-align:center; }
.sidebar-bottom { border-top:1px solid #334155; padding-top:1.5rem; }
.sidebar-status { display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:#94a3b8; margin-bottom:1rem; }
.status-indicator { width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 8px #10b981; }

/* Canvas Hero */
.canvas-hero { background:linear-gradient(135deg, #ffffff, #eef2ff); border:1px solid var(--border); border-radius:var(--radius); padding:3.5rem 3rem; margin-bottom:3rem; box-shadow:0 10px 30px rgba(0,0,0,0.03); }
.canvas-hero-tag { display:inline-flex; align-items:center; gap:.5rem; background:var(--indigo-light); color:var(--indigo); padding:.35rem 1rem; border-radius:999px; font-size:.82rem; font-weight:700; margin-bottom:1.2rem; }
.canvas-hero h1 { font-size:clamp(2.2rem, 4.5vw, 3.4rem); font-weight:800; line-height:1.2; margin-bottom:1.2rem; color:var(--text); }
.canvas-hero h1 .indigo { color:var(--indigo); }
.canvas-hero-desc { color:var(--text-muted); font-size:1.05rem; line-height:1.8; max-width:680px; margin-bottom:2rem; }
.canvas-hero-actions { display:flex; gap:1.2rem; flex-wrap:wrap; }
.btn-indigo-solid { background:var(--indigo); color:#fff; font-weight:700; padding:.7rem 1.8rem; border-radius:var(--radius); font-size:.92rem; display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 4px 15px var(--indigo-glow); }
.btn-indigo-solid:hover { background:var(--indigo-hover); transform:translateY(-2px); }
.btn-indigo-outline { border:1px solid var(--border); background:#fff; color:var(--text); font-weight:600; padding:.7rem 1.8rem; border-radius:var(--radius); font-size:.92rem; }
.btn-indigo-outline:hover { border-color:var(--indigo); color:var(--indigo); }

/* Canvas Sections */
.canvas-section { margin-bottom:3.5rem; }
.canvas-sec-head { margin-bottom:2rem; }
.canvas-sec-head h2 { font-size:1.8rem; font-weight:800; margin-bottom:.4rem; color:var(--text); }
.canvas-sec-head p { color:var(--text-muted); font-size:.95rem; }

/* Icon Cards */
.canvas-grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.icon-card { background:var(--canvas-card); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; transition:all .25s; box-shadow:0 4px 15px rgba(0,0,0,0.02); }
.icon-card:hover { border-color:var(--indigo); transform:translateY(-3px); box-shadow:0 10px 25px rgba(99,102,241,0.08); }
.icon-card-icon { width:46px; height:46px; border-radius:10px; background:var(--indigo-light); color:var(--indigo); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1.2rem; }
.icon-card h3 { font-size:1.15rem; font-weight:700; margin-bottom:.5rem; }
.icon-card p { color:var(--text-muted); font-size:.9rem; line-height:1.7; }

/* Download Cards */
.canvas-dl-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.canvas-dl-box { background:var(--canvas-card); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; text-align:center; }
.canvas-dl-box i { font-size:2.5rem; color:var(--indigo); margin-bottom:1rem; display:block; }
.canvas-dl-box h4 { font-size:1.15rem; font-weight:700; margin-bottom:.4rem; }
.canvas-dl-box p { color:var(--text-muted); font-size:.85rem; margin-bottom:1.5rem; }

/* Club Cards */
.canvas-club-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.canvas-club-item { background:var(--canvas-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; border-top:3px solid var(--indigo); }
.canvas-club-item h4 { font-size:1.1rem; font-weight:700; margin-bottom:.3rem; }
.canvas-club-item span { font-size:.8rem; color:var(--indigo); font-weight:600; display:block; margin-bottom:.5rem; }
.canvas-club-item p { color:var(--text-muted); font-size:.88rem; }

/* Canvas FAQ */
.canvas-faq-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.25rem; }
.canvas-faq-item { background:var(--canvas-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; }
.canvas-faq-item h4 { font-size:1rem; font-weight:700; color:var(--indigo); margin-bottom:.5rem; }
.canvas-faq-item p { color:var(--text-muted); font-size:.9rem; line-height:1.7; }

/* Canvas Banner CTA */
.canvas-cta-banner { background:linear-gradient(135deg, var(--indigo), #4f46e5); color:#fff; border-radius:var(--radius); padding:3.5rem 2.5rem; text-align:center; box-shadow:0 15px 40px var(--indigo-glow); }
.canvas-cta-banner h2 { font-size:2.2rem; font-weight:800; margin-bottom:.8rem; }
.canvas-cta-banner p { font-size:1rem; opacity:.9; margin-bottom:2rem; }
.btn-canvas-white { background:#fff; color:var(--indigo); font-weight:800; padding:.75rem 2.2rem; border-radius:var(--radius); font-size:.95rem; display:inline-flex; align-items:center; gap:.5rem; }

/* Canvas Footer */
.canvas-footer { border-top:1px solid var(--border); padding-top:2.5rem; margin-top:4rem; color:var(--text-muted); font-size:.85rem; text-align:center; }

/* Subpage */
.canvas-subpage-box { background:var(--canvas-card); border:1px solid var(--border); border-radius:var(--radius); padding:2.5rem; }
.canvas-subpage-box h1 { font-size:2rem; font-weight:800; margin-bottom:1.5rem; color:var(--text); }
.breadcrumb { font-size:.88rem; color:var(--text-muted); margin-bottom:1.5rem; }
.breadcrumb a { color:var(--indigo); font-weight:600; }

@media (max-width:900px) {
  .sidebar-panel { position:relative; width:100%; height:auto; }
  .app-layout { flex-direction:column; }
  .canvas-panel { margin-left:0; padding:1.5rem; }
  .canvas-grid-3, .canvas-dl-grid, .canvas-club-grid, .canvas-faq-grid { grid-template-columns:1fr; }
}