:root{
  --bg:#0f1222; --bg2:#151a30; --card:#1a2038; --card2:#212a47;
  --ink:#eef1fb; --ink2:#aab2cf; --ink3:#7f88a8;
  --line:#2a3454; --accent:#7c8cff; --accent2:#52e0c4;
  --hot:#ff7a59; --warn:#ffd166; --good:#52e0c4;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --maxw:920px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 80% -10%,#1c244a,transparent),
             radial-gradient(900px 500px at -10% 0%,#1a2342,transparent),
             var(--bg);
  background-color:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",
    "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* topbar */
.topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
  background:rgba(15,18,34,.78);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px}
.logo{font-size:26px}
.brand-name{font-weight:800;letter-spacing:.2px}
.brand-sub{font-size:11px;color:var(--ink3);letter-spacing:.4px}
.ghost-link{color:var(--ink2);text-decoration:none;font-size:14px;padding:6px 12px;
  border:1px solid var(--line);border-radius:999px}
.ghost-link:hover{color:var(--ink);border-color:var(--accent)}

/* hero */
.hero{padding:38px 0 18px}
.hero h1{font-size:clamp(26px,5vw,40px);line-height:1.18;margin:0 0 14px;font-weight:850;letter-spacing:-.5px}
.hl{background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--ink2);font-size:clamp(15px,2.4vw,17px);max-width:760px;margin:0}
.lede strong{color:var(--ink)}

/* cards */
.card{background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.composer{padding:22px;margin-top:8px}
.field-label{display:block;font-weight:700;font-size:14px;margin:0 0 8px}
.field-label.inline{display:inline-block;margin:0}
.req{color:var(--hot)}
textarea{width:100%;background:#0d1228;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:15px;
  resize:vertical;font-family:inherit;line-height:1.5}
textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,140,255,.18)}
textarea::placeholder{color:#5b637f}

.facts-wrap{margin:12px 0 4px}
.facts-wrap summary{cursor:pointer;color:var(--ink2);font-size:13.5px;
  list-style:none;user-select:none;padding:4px 0}
.facts-wrap summary::-webkit-details-marker{display:none}
.facts-wrap summary:hover{color:var(--ink)}
.facts-wrap textarea{margin-top:10px}

.platform-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 4px}
.seg{display:inline-flex;background:#0d1228;border:1px solid var(--line);
  border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.seg-btn{appearance:none;background:transparent;border:none;color:var(--ink2);
  font-size:14px;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer;
  font-family:inherit;transition:.15s}
.seg-btn:hover{color:var(--ink)}
.seg-btn.is-active{background:linear-gradient(90deg,var(--accent),#9a86ff);
  color:#fff;box-shadow:0 4px 14px rgba(124,140,255,.4)}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
button{cursor:pointer;font-family:inherit}
.primary{background:linear-gradient(90deg,var(--accent),#9a86ff);color:#fff;border:none;
  padding:13px 22px;border-radius:12px;font-size:15.5px;font-weight:750;
  box-shadow:0 6px 18px rgba(124,140,255,.4)}
.primary:hover{filter:brightness(1.07)}
.primary:active{transform:translateY(1px)}
.ghost{background:#0d1228;color:var(--ink2);border:1px solid var(--line);
  padding:13px 18px;border-radius:12px;font-size:14.5px;font-weight:650}
.ghost:hover{color:var(--ink);border-color:var(--accent)}
.ghost.small{padding:8px 14px;font-size:13px}
.privacy{color:var(--ink3);font-size:12.5px;margin:14px 0 0}

/* result meta */
.result-meta{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin:26px 0 14px}
.meta-left{display:flex;align-items:center;gap:10px}
.count{font-weight:800;font-size:17px}
.pill{background:var(--bg2);border:1px solid var(--line);color:var(--ink2);
  font-size:12.5px;padding:4px 11px;border-radius:999px}
.meta-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sortlbl{color:var(--ink2);font-size:13px;display:inline-flex;align-items:center;gap:6px}
select{background:#0d1228;color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:7px 9px;font-size:13px;font-family:inherit}

/* results */
.results{display:grid;gap:16px;margin-bottom:30px}
.angle{background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;
  box-shadow:var(--shadow);animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.angle-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.angle-title{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16.5px}
.angle-emoji{font-size:20px}
.angle-cat{font-size:11.5px;color:var(--ink3);margin-top:2px}
.score{flex:0 0 auto;text-align:right;min-width:86px}
.score-num{font-weight:850;font-size:20px;line-height:1}
.score-num.hot{color:var(--hot)}
.score-num.mid{color:var(--warn)}
.score-num.low{color:var(--ink2)}
.score-lbl{font-size:10.5px;color:var(--ink3);letter-spacing:.3px}
.score-bar{height:5px;border-radius:999px;background:#0d1228;margin-top:6px;overflow:hidden}
.score-bar > i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent2),var(--hot))}

.tagline{color:var(--ink2);font-size:13.5px;margin:10px 0 14px}
.block{margin-top:13px}
.block-h{font-size:12px;font-weight:800;color:var(--accent2);letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:7px}
.titles{display:grid;gap:7px}
.title-line{display:flex;align-items:flex-start;gap:8px;background:#0d1228;
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14.5px}
.title-line:hover{border-color:var(--accent)}
.title-line .tnum{color:var(--ink3);font-size:12px;flex:0 0 auto;margin-top:2px}
.title-line .ttxt{flex:1}
.copy-mini{flex:0 0 auto;background:transparent;border:none;color:var(--ink3);
  font-size:12px;padding:2px 4px;border-radius:6px}
.copy-mini:hover{color:var(--accent2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:14px}
.kv .k{color:var(--ink3);white-space:nowrap}
.kv .v{color:var(--ink)}
.risk{background:rgba(255,122,89,.08);border:1px solid rgba(255,122,89,.3);
  border-radius:10px;padding:10px 12px;font-size:13.5px;color:#ffc7b8;margin-top:13px}
.risk b{color:var(--hot)}
.angle-foot{display:flex;justify-content:flex-end;margin-top:14px}
.copy-card{background:#0d1228;border:1px solid var(--line);color:var(--ink2);
  padding:8px 14px;border-radius:10px;font-size:13px;font-weight:650}
.copy-card:hover{color:var(--ink);border-color:var(--accent2)}

/* empty + how */
.empty{padding:30px 22px;text-align:center;margin-top:18px}
.empty-emoji{font-size:34px;margin:0 0 6px}
.empty p{color:var(--ink2);margin:0 0 4px}
.chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.chip{background:#0d1228;border:1px solid var(--line);color:var(--ink2);
  border-radius:999px;padding:7px 14px;font-size:13px}
.chip:hover{color:var(--ink);border-color:var(--accent)}

.how{padding:24px 22px;margin:8px 0 36px}
.how h2{font-size:19px;margin:0 0 14px}
.how-list{margin:0;padding-left:20px;color:var(--ink2)}
.how-list li{margin-bottom:10px}
.how-list strong{color:var(--ink)}
.how-note{color:var(--ink3);font-size:12.5px;margin:14px 0 0;border-top:1px solid var(--line);padding-top:14px}

/* footer */
.foot{border-top:1px solid var(--line);background:rgba(15,18,34,.6);padding:20px 0}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;color:var(--ink3);font-size:12.5px}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:#0c1024;border:1px solid var(--accent);color:var(--ink);
  padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:560px){
  .hero{padding:26px 0 12px}
  .composer{padding:18px}
  .actions{flex-direction:column}
  .actions button{width:100%}
  .meta-right{width:100%;justify-content:space-between}
  .kv{grid-template-columns:1fr}
  .kv .k{margin-top:6px}
}