:root {
  --bg: #0b1020;
  --bg2: #121933;
  --card: #161e3a;
  --line: rgba(255,255,255,.08);
  --text: #eef2ff;
  --muted: #9aa6c4;
  --brand: #6ea8ff;
  --brand2: #8b5cf6;
  --ok: #34d399;
  --warn: #fbbf24;
  --alipay: #1677ff;
  --wechat: #07c160;
  --radius: 18px;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  font-family: "PingFang SC", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: radial-gradient(1200px 600px at 10% -10%, #1a2758, transparent), var(--bg); color: var(--text); min-height: 100%; }
a { color: var(--brand); text-decoration: none; }
.wrap { width: min(1100px, calc(100% - 32px)); margin: 0 auto; }
.nav { display:flex; justify-content:space-between; align-items:center; padding: 20px 0; }
.logo { display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.04em; }
.logo-mark { width:34px; height:34px; border-radius:10px; background: linear-gradient(135deg, var(--brand), var(--brand2)); display:grid; place-items:center; font-size:16px; }
.nav-actions { display:flex; gap:10px; align-items:center; }
.btn { border:0; border-radius:999px; padding:10px 18px; font-weight:600; cursor:pointer; color:#fff; background: linear-gradient(135deg, var(--brand), var(--brand2)); }
.btn.secondary { background: transparent; border:1px solid var(--line); color: var(--text); }
.btn.block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.hero { padding: 48px 0 24px; display:grid; gap:28px; grid-template-columns: 1.2fr .8fr; align-items:center; }
@media (max-width: 860px){ .hero { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.15; margin:0 0 14px; }
.hero p { color: var(--muted); font-size: 1.05rem; line-height:1.7; margin:0 0 18px; }
.badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.badge { border:1px solid var(--line); background: rgba(255,255,255,.03); padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted); }
.panel { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--card); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding:22px; }
.panel h3 { margin:0 0 8px; }
.price-row { display:flex; gap:10px; margin: 14px 0; }
.price-card { flex:1; border:1px solid var(--line); border-radius:14px; padding:14px; cursor:pointer; background:rgba(0,0,0,.15); }
.price-card.active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.price-card strong { display:block; font-size:1.4rem; margin-top:4px; }
.section { padding: 36px 0; }
.section h2 { margin:0 0 16px; font-size:1.5rem; }
.grid3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 860px){ .grid3 { grid-template-columns: 1fr; } }
.card { background: var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; }
.card h3 { margin:0 0 8px; font-size:1.05rem; }
.card p { margin:0; color:var(--muted); line-height:1.6; font-size:.95rem; }
.muted { color: var(--muted); }
.footer { padding: 40px 0 60px; color: var(--muted); font-size: 13px; border-top:1px solid var(--line); margin-top:30px; }
.modal-bg { position:fixed; inset:0; background:rgba(4,8,20,.72); display:none; align-items:center; justify-content:center; padding:16px; z-index:40; }
.modal-bg.open { display:flex; }
.modal { width:min(520px,100%); background:var(--bg2); border:1px solid var(--line); border-radius:20px; padding:22px; max-height:90vh; overflow:auto; }
.modal h3 { margin:0 0 6px; }
label { display:block; font-size:13px; color:var(--muted); margin:12px 0 6px; }
input, select, textarea { width:100%; border-radius:12px; border:1px solid var(--line); background:#0d142b; color:var(--text); padding:11px 12px; font:inherit; }
textarea { min-height:90px; resize:vertical; }
.pay-tabs { display:flex; gap:8px; margin:10px 0; }
.pay-tabs button { flex:1; }
.qr { width:100%; max-width:280px; margin:12px auto; display:block; border-radius:12px; background:#fff; }
.order-box { background:rgba(255,255,255,.04); border:1px dashed var(--line); border-radius:12px; padding:12px; margin-top:12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.app-shell { display:grid; grid-template-columns: 220px 1fr; min-height:100vh; }
@media (max-width: 860px){ .app-shell { grid-template-columns: 1fr; } }
.side { background:#0a0f1f; border-right:1px solid var(--line); padding:18px; }
.side a, .side button.linkish { display:block; width:100%; text-align:left; background:transparent; border:0; color:var(--muted); padding:10px 12px; border-radius:10px; cursor:pointer; margin-bottom:4px; font:inherit; }
.side a.active, .side button.linkish.active, .side a:hover, .side button.linkish:hover { background:rgba(110,168,255,.12); color:var(--text); }
.main { padding:20px; }
.toolbar { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--line); }
.pill.xhs { color:#ff2e55; }
.pill.douyin { color:#25f4ee; }
.pill.channels { color:#07c160; }
.cal { display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; }
.cal .day { min-height:110px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px; }
.cal .day .d { font-size:12px; color:var(--muted); margin-bottom:6px; }
.cal .item { font-size:12px; background:rgba(110,168,255,.12); border-radius:8px; padding:6px; margin-bottom:4px; }
.toast { position:fixed; bottom:20px; right:20px; background:#111827; border:1px solid var(--line); padding:12px 14px; border-radius:12px; display:none; z-index:50; }
.toast.show { display:block; }

/* Landing demos */
.demo-panel { overflow:hidden; }
.demo-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:4px; }
.demo-head h3 { margin:0; }
.demo-week { display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
@media (max-width: 860px){ .demo-week { grid-template-columns: repeat(2, 1fr); } }
.demo-day { background:rgba(0,0,0,.18); border:1px solid var(--line); border-radius:10px; padding:8px; min-height:78px; }
.demo-day .d { font-size:11px; color:var(--muted); margin-bottom:6px; }
.demo-day .item { font-size:11px; line-height:1.35; border-radius:8px; padding:6px; background:rgba(110,168,255,.12); }
.demo-day .item.xhs { background:rgba(255,46,85,.14); color:#ffb3c1; }
.demo-day .item.douyin { background:rgba(37,244,238,.12); color:#9af7f3; }
.demo-day .item.channels { background:rgba(7,193,96,.14); color:#8ef0b8; }
.demo-day .item.muted-item { background:rgba(255,255,255,.04); color:var(--muted); }
.subh { margin:0 0 12px; font-size:1.1rem; }
.draft-card .draft-meta { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.draft-footer { margin-top:12px; font-size:12px; color:var(--muted); }
.kit-demos { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 860px){ .kit-demos { grid-template-columns: 1fr; } }
.kit-card .kit-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.kit-label { font-size:12px; color:var(--muted); margin-bottom:6px; }
.kit-pre { margin:0 0 12px; padding:12px; border-radius:12px; background:#0d142b; border:1px solid var(--line); white-space:pre-wrap; font-size:12px; line-height:1.55; color:var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; max-height:180px; overflow:auto; }
.kit-list { margin:0 0 14px; padding-left:18px; color:var(--muted); font-size:13px; line-height:1.6; }
.price-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; max-width:720px; }
@media (max-width: 860px){ .price-grid { grid-template-columns: 1fr; } }

/* Console enhancements */
.side { display:flex; flex-direction:column; min-height:100vh; position:sticky; top:0; }
.side-foot { margin-top:auto; padding-top:18px; }
.notice { background:rgba(110,168,255,.1); border:1px solid rgba(110,168,255,.25); color:#cfe0ff; padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.55; margin-bottom:14px; }
.stat-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }
@media (max-width: 960px){ .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; }
.stat-k { font-size:12px; color:var(--muted); }
.stat-v { font-size:1.8rem; font-weight:700; margin:6px 0; }
.stat-sub { font-size:12px; color:var(--muted); line-height:1.4; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 860px){ .grid2 { grid-template-columns: 1fr; } }
.row-item { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.row-item:last-child { border-bottom:0; }
.platform-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.chip { border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted); border-radius:999px; padding:7px 12px; cursor:pointer; font:inherit; }
.chip.active, .chip:hover { background:rgba(110,168,255,.14); color:var(--text); border-color:rgba(110,168,255,.35); }
.card-list, .tpl-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.entity-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.entity-card h3 { margin:0; font-size:1.05rem; }
.entity-top { display:flex; gap:6px; flex-wrap:wrap; }
.entity-meta { font-size:12px; color:var(--muted); }
.entity-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.tpl-preview { margin:0; white-space:pre-wrap; background:#0d142b; border:1px solid var(--line); border-radius:12px; padding:10px; font-size:12px; line-height:1.5; max-height:140px; overflow:auto; color:var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.empty-card { grid-column: 1 / -1; border:1px dashed var(--line); border-radius:16px; padding:28px; text-align:center; color:var(--muted); }
.modal-wide { width:min(640px,100%); }
.kv { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.kv:last-of-type { border-bottom:0; }
.kv code { font-size:13px; }
.row-actions { display:flex; flex-wrap:wrap; gap:6px; }

/* Video matrix workbench */
.modal-xl { width:min(820px,100%); }
.form-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 640px){ .form-row2 { grid-template-columns:1fr; } }
.vc-pick { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.vc-pick-item { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:8px 10px; background:rgba(0,0,0,.15); color:var(--text); margin:0; cursor:pointer; }
.vc-slots { display:grid; gap:10px; margin-top:8px; }
.vc-slot-card { background:rgba(0,0,0,.18); border:1px solid var(--line); border-radius:14px; padding:12px; }
.slot-preview { display:grid; gap:6px; margin-top:4px; }
.slot-chip { font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }