/* ===== 117AI Web - 高考志愿填报版 ===== */
:root {
  --bg: #0c0c14;
  --card: #14141f;
  --border: #1e1e2e;
  --text: #e8e8f0;
  --text2: #8888a0;
  --text3: #555570;
  --accent: #6366f1;
  --accent-dim: #6366f120;
  --green: #22c55e;
  --yellow: #eab308;
  --orange: #f97316;
  --red: #ef4444;
  --radius: 12px;
  --radius-sm: 8px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse at 20% 0%,rgba(99,102,241,.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(139,92,246,.04) 0%,transparent 50%);
  min-height:100vh;
}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ===== HEADER ===== */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
  background:var(--card);
}
.header .brand{display:flex;align-items:center;gap:10px}
.header .brand h1{font-size:1.2rem;font-weight:800;color:#fff}
.header .brand span{font-size:.7rem;color:var(--text3);border-left:1px solid var(--border);padding-left:10px;margin-left:4px}

/* ===== HERO ===== */
.hero{
  text-align:center;padding:60px 20px 40px;
  background:linear-gradient(180deg,rgba(99,102,241,.08) 0%,transparent 100%);
}
.hero .emoji{font-size:3rem;margin-bottom:12px}
.hero h2{font-size:2rem;font-weight:800;margin-bottom:8px}
.hero h2 span{background:linear-gradient(135deg,#818cf8,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{color:var(--text2);font-size:.9rem;margin-bottom:8px}
.hero .sub{color:var(--text3);font-size:.78rem;margin-bottom:28px}
.hero-form{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:700px;margin:0 auto;
}
.hero-form select,.hero-form input{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:12px 16px;color:var(--text);font-size:.9rem;outline:none;
  transition:border .2s;
}
.hero-form select:focus,.hero-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.hero-form select{min-width:120px}
.hero-form input[type=number]{width:140px;-moz-appearance:textfield}
.hero-form input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
.hero-form button{
  background:linear-gradient(135deg,#818cf8,#a78bfa);color:#fff;border:none;
  border-radius:var(--radius-sm);padding:12px 32px;font-size:.95rem;font-weight:700;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.hero-form button:hover{transform:scale(1.03);box-shadow:0 4px 20px rgba(129,140,248,.3)}
.hero-form button:disabled{opacity:.5;cursor:not-allowed;transform:none}

.hero-tier{margin-top:16px}
.hero-tier .badge{
  display:inline-block;padding:6px 18px;border-radius:20px;
  background:var(--accent-dim);color:var(--accent);font-size:.85rem;font-weight:600;
}
.hero-tier .desc{color:var(--text3);font-size:.75rem;margin-top:6px}

/* ===== RESULTS ===== */
.results{padding:20px 0}
.results-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:20px;flex-wrap:wrap;gap:10px;
}
.results-header h3{font-size:1.1rem;font-weight:700}
.results-header .count{color:var(--text2);font-size:.82rem}
.results-header .back-btn{
  padding:8px 20px;border-radius:20px;border:1px solid var(--border);
  background:var(--card);color:var(--text2);font-size:.82rem;cursor:pointer;
}
.results-header .back-btn:hover{border-color:var(--accent);color:var(--accent)}

.major-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.major-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;cursor:pointer;transition:all .2s;
}
.major-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.major-card .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.major-card .name{font-size:1.05rem;font-weight:700}
.major-card .cat{font-size:.65rem;color:var(--text3);background:var(--bg);padding:2px 8px;border-radius:6px;margin-left:6px}
.major-card .right{text-align:right}
.major-card .risk{font-size:.9rem;font-weight:700}
.major-card .sal{font-size:.72rem;color:var(--text2);margin-top:2px}
.major-card .meta{display:flex;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:4px}
.major-card .schools{font-size:.72rem;color:var(--text2)}
.major-card .rate{font-size:.72rem;color:var(--green);font-weight:600}
.major-card .desc{font-size:.76rem;color:var(--text2);line-height:1.5;margin-bottom:10px}
.major-card .tags{display:flex;flex-wrap:wrap;gap:4px}
.major-card .tag{
  font-size:.68rem;background:var(--bg);border:1px solid var(--border);
  padding:3px 10px;border-radius:8px;color:var(--text2);
}

/* ===== TIER INFO ===== */
.tier-bar{
  display:flex;gap:6px;margin:30px 20px 20px;overflow-x:auto;padding:4px 0;
}
.tier-item{
  flex:1;min-width:130px;padding:12px 16px;border-radius:var(--radius-sm);
  background:var(--card);border:1px solid var(--border);text-align:center;
  cursor:pointer;transition:all .2s;
}
.tier-item:hover{border-color:var(--accent)}
.tier-item.active{border-color:var(--accent);background:var(--accent-dim)}
.tier-item .tl{font-size:.78rem;font-weight:600;color:var(--text)}
.tier-item .tr{font-size:.62rem;color:var(--text3);margin-top:2px}

/* ===== CAREER EXPLORER ===== */
.explorer-section{margin-top:30px;border-top:1px solid var(--border);padding-top:30px}
.explorer-section h3{font-size:1rem;font-weight:700;margin-bottom:16px}
.explorer-section h3 span{color:var(--text3);font-weight:400;font-size:.82rem}
.explorer-toolbar{
  display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;
}
.explorer-toolbar .btn{
  padding:6px 14px;border-radius:16px;border:1px solid var(--border);
  background:var(--card);color:var(--text2);font-size:.75rem;cursor:pointer;
}
.explorer-toolbar .btn.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}
.explorer-toolbar .btn:hover{border-color:var(--accent)}
.explorer-toolbar .search-box{
  position:relative;margin-left:auto;
}
.explorer-toolbar .search-box input{
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:7px 14px 7px 32px;color:var(--text);font-size:.8rem;outline:none;width:220px;
}
.explorer-toolbar .search-box input:focus{border-color:var(--accent)}
.explorer-toolbar .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:.8rem}

.treemap-wrap{
  position:relative;width:100%;height:500px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);overflow:hidden;
}

/* ===== LIST ===== */
.list-view{display:none;width:100%}
.list-view.show{display:table}
.list-table{width:100%;border-collapse:collapse;font-size:.82rem}
.list-table th{
  padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);
  color:var(--text3);font-weight:600;font-size:.72rem;cursor:pointer;
  position:sticky;top:0;background:var(--bg);
}
.list-table th:hover{color:var(--accent)}
.list-table td{padding:10px 12px;border-bottom:1px solid #ffffff08}
.list-table tr{transition:background .15s}
.list-table tr:hover{background:var(--accent-dim);cursor:pointer}

/* ===== FOOTER ===== */
.footer{
  text-align:center;padding:24px 20px;border-top:1px solid var(--border);
  color:var(--text3);font-size:.72rem;margin-top:40px;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .hero{padding:40px 16px 28px}
  .hero h2{font-size:1.4rem}
  .hero .emoji{font-size:2rem}
  .hero-form select,.hero-form input{width:100%;max-width:300px}
  .hero-form{flex-direction:column;align-items:center}
  .major-grid{grid-template-columns:1fr}
  .tier-bar{flex-wrap:nowrap;overflow-x:auto}
  .tier-item{min-width:100px;padding:8px 12px}
  .treemap-wrap{height:350px}
  .explorer-toolbar .search-box input{width:160px}
  .explorer-toolbar{flex-wrap:wrap}
}
@media(max-width:400px){
  .header .brand span{display:none}
  .major-card .top{flex-direction:column;gap:6px}
  .major-card .right{text-align:left}
}