:root {
  --primary: #8B1A1A; --primary-light: #B22222; --gold: #C8963E; --gold-light: #D4A574;
  --dark: #1a1a1a; --gray-900: #2d2d2d; --gray-700: #555; --gray-500: #888; --gray-300: #ccc; --gray-100: #f5f5f5; --white: #fff;
  --shadow: 0 2px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 40px rgba(0,0,0,0.12); --radius: 12px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "PingFang SC","Microsoft YaHei",sans-serif; background: var(--gray-100); color: var(--dark); min-height: 100vh; display: flex; }

/* Sidebar */
.sidebar { width: 220px; background: var(--gray-900); color: var(--white); position: fixed; top:0; left:0; bottom:0; display:flex; flex-direction:column; z-index:100; }
.sidebar-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.08); display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; }
.sidebar-header .sh-logo { width:36px; height:36px; background:var(--primary); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.sidebar-nav { flex:1; padding: 12px 0; overflow-y:auto; }
.sidebar-nav a { display:flex; align-items:center; gap:10px; padding:12px 20px; color:rgba(255,255,255,0.6); font-size:14px; cursor:pointer; border-left:3px solid transparent; transition:all 0.2s; text-decoration:none; }
.sidebar-nav a:hover, .sidebar-nav a.active { color:var(--white); background:rgba(255,255,255,0.06); border-left-color:var(--gold); }
.sidebar-footer { padding:16px 20px; border-top:1px solid rgba(255,255,255,0.08); font-size:12px; color:rgba(255,255,255,0.3); }
.sidebar-footer button { background:none; border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.6); padding:6px 14px; border-radius:6px; cursor:pointer; font-size:12px; }
.sidebar-footer button:hover { color:var(--white); border-color:var(--white); }

/* Main */
.main { margin-left:220px; flex:1; padding:28px; }
.main-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.main-header h1 { font-size:22px; font-weight:800; }

/* Cards */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px; }
.card { background:var(--white); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); transition:all 0.3s; cursor:pointer; }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.card .card-badge { display:inline-block; padding:3px 10px; border-radius:10px; font-size:11px; font-weight:600; margin-bottom:8px; }
.card-badge.video { background:#e3f2fd; color:#1565c0; }
.card-badge.audio { background:#fce4ec; color:#c62828; }
.card-badge.mixed { background:#e8f5e9; color:#2e7d32; }
.card-badge.live { background:#fff3e0; color:#e65100; }
.card h3 { font-size:16px; margin-bottom:6px; }
.card .card-meta { font-size:13px; color:var(--gray-500); margin-bottom:10px; }
.card .card-price { font-size:20px; font-weight:800; color:var(--primary); }

/* Stats */
.stat-row { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--white); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.stat-card .sc-label { font-size:12px; color:var(--gray-500); margin-bottom:6px; }
.stat-card .sc-value { font-size:28px; font-weight:800; color:var(--primary); }
.stat-card .sc-sub { font-size:12px; color:var(--gray-500); margin-top:4px; }

/* Tables */
.table-wrap { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th, td { padding:12px 16px; text-align:left; font-size:14px; }
th { background:var(--gray-100); font-weight:700; color:var(--gray-700); font-size:13px; }
td { border-bottom:1px solid rgba(0,0,0,0.04); }
tr:hover td { background:rgba(0,0,0,0.01); }
.badge { display:inline-block; padding:4px 10px; border-radius:10px; font-size:11px; font-weight:600; }
.badge-success { background:#d4edda; color:#155724; }
.badge-pending { background:#fff3cd; color:#856404; }
.badge-info { background:#cce5ff; color:#004085; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all 0.2s; }
.btn-primary { background:var(--primary); color:var(--white); }
.btn-primary:hover { background:var(--primary-light); }
.btn-sm { padding:6px 14px; font-size:12px; }
.btn-outline { background:transparent; border:1.5px solid var(--gray-300); color:var(--gray-700); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-gold { background:var(--gold); color:var(--white); }
.btn-gold:hover { opacity:0.9; }
.btn-block { width:100%; justify-content:center; }

/* Forms */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--gray-700); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 14px; border:1.5px solid var(--gray-300); border-radius:8px; font-size:14px; font-family:inherit; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--primary); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Section toggle */
.section-hidden { display:none !important; }

/* Course Player */
.player-container { background:#000; border-radius:var(--radius); overflow:hidden; margin-bottom:20px; position:relative; }
.player-container video, .player-container audio { width:100%; display:block; }
.player-container .player-placeholder { aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1a1a2e,#16213e); color:var(--white); flex-direction:column; gap:12px; cursor:pointer; }
.player-placeholder .pp-icon { font-size:56px; }
.player-placeholder .pp-text { font-size:16px; opacity:0.8; }

.chapter-list { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.chapter-item { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid rgba(0,0,0,0.04); cursor:pointer; transition:background 0.2s; }
.chapter-item:hover { background:var(--gray-100); }
.chapter-item.active { background:rgba(139,26,26,0.05); border-left:3px solid var(--primary); }
.chapter-item .ch-num { width:28px; height:28px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.chapter-item.active .ch-num { background:var(--primary); color:var(--white); }
.chapter-item .ch-info { flex:1; }
.chapter-item .ch-title { font-size:14px; font-weight:600; }
.chapter-item .ch-duration { font-size:12px; color:var(--gray-500); }
.chapter-item .ch-type { font-size:11px; padding:2px 8px; border-radius:4px; }

/* Shop grid */
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px; }
.shop-card { background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform 0.3s; }
.shop-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.shop-card .sc-img { aspect-ratio:1; background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:48px; }
.shop-card .sc-body { padding:16px; }
.shop-card .sc-name { font-size:15px; font-weight:700; margin-bottom:4px; }
.shop-card .sc-cat { font-size:12px; color:var(--gray-500); margin-bottom:8px; }
.shop-card .sc-bottom { display:flex; align-items:center; justify-content:space-between; }
.shop-card .sc-price { font-size:20px; font-weight:800; color:var(--primary); }
.shop-card .sc-price .unit { font-size:13px; }

/* Live */
.live-card { background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.live-card .lc-header { padding:20px 24px; background:linear-gradient(135deg,var(--primary),#4a0a0a); color:var(--white); }
.live-card .lc-badge { font-size:11px; padding:3px 10px; border-radius:10px; background:rgba(255,255,255,0.2); display:inline-block; margin-bottom:8px; }
.live-card .lc-title { font-size:18px; font-weight:700; }
.live-card .lc-host { font-size:13px; opacity:0.8; margin-top:4px; }
.live-card .lc-player { aspect-ratio:16/9; background:#000; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:18px; }
.live-card .lc-products { padding:16px 24px; display:flex; gap:12px; flex-wrap:wrap; }

/* Membership cards */
.membership-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px; }
.membership-card { background:var(--white); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow); text-align:center; border:2px solid transparent; transition:all 0.3s; position:relative; }
.membership-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.membership-card.current { border-color:var(--gold); }
.membership-card.current::after { content:'当前'; position:absolute; top:12px; right:12px; background:var(--gold); color:var(--white); padding:2px 10px; border-radius:10px; font-size:11px; font-weight:600; }
.membership-card .mc-level { font-size:24px; font-weight:800; margin-bottom:8px; }
.membership-card .mc-price { font-size:32px; font-weight:800; color:var(--primary); margin-bottom:4px; }
.membership-card .mc-price .unit { font-size:14px; font-weight:400; }
.membership-card .mc-duration { font-size:13px; color:var(--gray-500); margin-bottom:16px; }
.membership-card .mc-features { text-align:left; margin-bottom:20px; }
.membership-card .mc-features li { font-size:13px; padding:4px 0; color:var(--gray-700); list-style:none; }
.membership-card .mc-features li::before { content:'✓ '; color:var(--gold); font-weight:700; }

/* Distribution */
.dist-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.invite-code-box { background:var(--white); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-bottom:20px; display:flex; align-items:center; gap:16px; }
.invite-code-box .ic-label { font-size:14px; color:var(--gray-500); }
.invite-code-box .ic-code { font-size:24px; font-weight:800; letter-spacing:3px; color:var(--primary); }
.invite-code-box .ic-link { flex:1; font-size:13px; color:var(--gray-700); padding:8px 12px; background:var(--gray-100); border-radius:6px; word-break:break-all; }

/* Toast */
.toast { position:fixed; top:24px; right:24px; z-index:9999; padding:14px 24px; border-radius:8px; font-size:14px; color:var(--white); opacity:0; transform:translateX(100%); transition:all 0.3s; }
.toast.show { opacity:1; transform:translateX(0); }
.toast.success { background:#27ae60; } .toast.error { background:#e74c3c; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:999; display:flex; align-items:center; justify-content:center; }
.modal { background:var(--white); border-radius:var(--radius); padding:32px; max-width:440px; width:90%; box-shadow:var(--shadow-lg); }
.modal h2 { font-size:20px; margin-bottom:16px; }

/* Responsive */
@media (max-width:768px) {
  .sidebar { width:60px; }
  .sidebar-header span:last-child, .sidebar-nav a span, .sidebar-footer button span { display:none; }
  .main { margin-left:60px; padding:16px; }
  .stat-row { grid-template-columns:1fr 1fr; }
  .card-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .dist-stats { grid-template-columns:1fr; }
}