/* 共享设计主题（落地页 + App 共用）。深色高级 + 粉紫渐变。 */

:root {
  --bg: #0a0a0c;
  --surface: #131319;
  --surface-2: #1b1b23;
  --border: #2a2a35;
  --text: #f5f5f7;
  --muted: #9a9aa6;
  --accent-1: #ff5e9a;
  --accent-2: #a06bff;
  --radius: 16px;
}

* { -webkit-font-smoothing: antialiased; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 柔和的背景光晕 */
.aura {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 75% -5%, rgba(160,107,255,.18), transparent 60%),
    radial-gradient(55vw 45vh at 10% 0%, rgba(255,94,154,.14), transparent 55%);
}

.grad-text {
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.btn-grad {
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: #fff; border: none; border-radius: 999px;
  font-weight: 600; transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 30px -8px rgba(160,107,255,.5);
}
.btn-grad:hover { transform: translateY(-1px); box-shadow: 0 12px 36px -8px rgba(160,107,255,.65); }
.btn-grad:active { transform: translateY(0); }

.btn-ghost {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px; font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover { background: #23232d; border-color: #3a3a47; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); border-color: #3d3d4d; box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.chip-on {
  background: linear-gradient(90deg, rgba(255,94,154,.18), rgba(160,107,255,.18));
  border-color: rgba(160,107,255,.5); color: var(--text);
}

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2c2c38; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* 风险点 */
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.dot-low { background: #34d399; }
.dot-medium { background: #fbbf24; }
.dot-high { background: #f87171; }

/* spinner */
.spin { width: 38px; height: 38px; border-radius: 999px;
  border: 3px solid rgba(255,255,255,.15); border-top-color: var(--accent-2);
  animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 淡入 */
.fade-in { animation: fade .4s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 隐藏滚动条但可滚 */
.no-sb::-webkit-scrollbar { display: none; }
.no-sb { scrollbar-width: none; }

/* 视频卡右上角静音开关（常驻） */
.vid-sound {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 28px; height: 28px; border-radius: 999px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: none; transition: background .15s ease;
}
.vid-sound:hover { background: rgba(0,0,0,.8); }