:root{
  --bg:#f7f8fc;
  --card:#ffffff;
  --ink:#15213d;
  --muted:#6b7280;
  --primary:#6d5ef7;
  --primary-2:#a54cff;
  --line:#e8eaf2;
  --success:#14a66f;
  --warning:#ff9f1c;
  --shadow:0 12px 30px rgba(25,30,70,.08);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{min-height:100vh}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh;max-width:520px;margin:0 auto;background:linear-gradient(180deg,#faf9ff 0%,#f7f8fc 42%,#f7f8fc 100%);position:relative}
.topbar{position:sticky;top:0;z-index:20;padding:calc(12px + env(safe-area-inset-top)) 20px 12px;display:flex;justify-content:space-between;align-items:center;background:rgba(250,249,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(232,234,242,.75)}
.brand-mini{font-weight:850;letter-spacing:-.5px;font-size:20px}.brand-mini span{background:linear-gradient(90deg,var(--primary),var(--primary-2));-webkit-background-clip:text;color:transparent}.topbar-sub{font-size:12px;color:var(--muted);margin-top:2px}
.install-btn{border:0;background:#fff;color:var(--primary);font-weight:700;border-radius:999px;padding:9px 13px;box-shadow:var(--shadow)}
.hidden{display:none!important}
.view{padding:20px 18px calc(104px + env(safe-area-inset-bottom));min-height:calc(100vh - 70px)}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(520px,100%);padding:9px 12px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border-top:1px solid var(--line);z-index:30}
.nav-item{border:0;background:transparent;color:#8c93a6;padding:5px 2px;display:flex;flex-direction:column;gap:2px;align-items:center;font-size:22px}.nav-item small{font-size:11px}.nav-item.active{color:var(--primary);font-weight:800}
.hero{padding:8px 4px 16px}.eyebrow{font-size:13px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.08em}.hero h1{font-size:34px;line-height:1.04;margin:8px 0 10px;letter-spacing:-1.2px}.hero p{color:var(--muted);line-height:1.55;margin:0}
.big-logo{font-size:42px;font-weight:900;letter-spacing:-2px}.big-logo span{background:linear-gradient(90deg,#4c6fff,#b43cff);-webkit-background-clip:text;color:transparent}
.welcome-visual{margin:22px 0;background:linear-gradient(145deg,#e9efff,#ffe9f7);min-height:230px;border-radius:34px;padding:26px;box-shadow:var(--shadow);position:relative;overflow:hidden}.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.85}.orb.one{width:130px;height:130px;background:#8e7dff;right:-25px;top:15px}.orb.two{width:110px;height:110px;background:#ffb9d8;left:-26px;bottom:-24px}.future-figure{position:relative;z-index:2;display:grid;place-items:center;height:175px}.future-figure .bubble{background:rgba(255,255,255,.88);padding:16px 20px;border-radius:24px;font-weight:800;text-align:center;box-shadow:0 10px 22px rgba(80,70,150,.12);transform:rotate(-2deg)}
.primary-btn,.secondary-btn{width:100%;border:0;border-radius:18px;padding:15px 18px;font-weight:800;font-size:16px}.primary-btn{color:#fff;background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 10px 22px rgba(109,94,247,.25)}.secondary-btn{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn-row{display:flex;gap:10px}
.section-title{display:flex;justify-content:space-between;align-items:end;margin:18px 2px 10px}.section-title h2{margin:0;font-size:20px}.section-title a,.link-btn{color:var(--primary);font-size:13px;font-weight:800;text-decoration:none;background:none;border:0;padding:0}
.grid{display:grid;gap:12px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid rgba(232,234,242,.85);border-radius:var(--radius);padding:17px;box-shadow:var(--shadow)}
.interest-card{min-height:122px;display:flex;flex-direction:column;justify-content:space-between;transition:.18s;border:2px solid transparent}.interest-card .emoji{font-size:30px}.interest-card strong{font-size:15px}.interest-card.selected{border-color:var(--primary);background:linear-gradient(160deg,#fff,#f3f0ff);transform:translateY(-2px)}
.pill-row{display:flex;gap:7px;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700}.pill.primary{background:#f0edff;color:#5b4fe0;border-color:#dfd9ff}.pill.success{background:#e9fbf4;color:#0b8c60;border-color:#ccf4e4}
.profile-head{display:flex;gap:14px;align-items:center}.avatar{width:72px;height:72px;border-radius:24px;display:grid;place-items:center;font-size:34px;background:linear-gradient(145deg,#dfe8ff,#f1dfff)}.level-badge{margin-left:auto;background:#fff8e6;border:1px solid #ffe0a3;border-radius:18px;padding:10px;text-align:center}.level-badge b{display:block;font-size:17px}.level-badge small{font-size:10px;color:#806d45}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;text-align:center}.stat b{display:block;font-size:19px}.stat small{color:var(--muted);font-size:11px}
.progress-track{height:9px;background:#eceef5;border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:inherit}.progress-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:7px}
.quest-card{background:linear-gradient(145deg,#f5ecff,#ffeef6);border:0}.quest-visual{font-size:42px;margin-bottom:8px}.reward{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:800;color:#6657d8}
.career-card{display:flex;gap:12px;align-items:flex-start}.career-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:25px;background:linear-gradient(145deg,#eef1ff,#fff0f8);flex:0 0 auto}.career-card h3{font-size:16px;margin:2px 0 5px}.career-card p{font-size:12px;color:var(--muted);line-height:1.4;margin:0}.career-meta{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}.mini-tag{background:#f4f5f9;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:700;color:#596174}
.search{width:100%;border:1px solid var(--line);background:#fff;border-radius:17px;padding:13px 14px;outline:none}.search:focus{border-color:#b5abff;box-shadow:0 0 0 4px #efedff}
.filter-row{display:flex;gap:8px;overflow:auto;padding:9px 0 4px;scrollbar-width:none}.filter-row::-webkit-scrollbar{display:none}.filter{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:8px 11px;border-radius:999px;font-size:12px;font-weight:750}.filter.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.chat-wrap{display:flex;flex-direction:column;gap:10px}.msg{max-width:84%;padding:12px 14px;border-radius:18px;line-height:1.45;font-size:14px}.msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}.msg.user{align-self:flex-end;background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;border-bottom-right-radius:5px}.quick-prompts{display:flex;gap:7px;overflow:auto;padding:4px 0 8px;scrollbar-width:none}.quick-prompts button{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 11px;font-size:12px;color:#4b5368}.chat-input{position:sticky;bottom:82px;display:flex;gap:8px;background:rgba(247,248,252,.92);padding:10px 0}.chat-input input{flex:1;border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff}.chat-input button{width:46px;border:0;border-radius:15px;background:var(--primary);color:#fff;font-size:19px}
.badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.badge-card{text-align:center}.badge-icon{margin:auto;width:64px;height:64px;border-radius:22px;display:grid;place-items:center;font-size:31px;background:linear-gradient(145deg,#edf1ff,#fceeff)}.locked{opacity:.42;filter:grayscale(1)}
.advisor-card{background:linear-gradient(145deg,#13203c,#3b3478);color:#fff;border:0}.advisor-card p{color:#dcdcf4}.advisor-card .primary-btn{background:#fff;color:#4037a3;box-shadow:none}
.list{display:flex;flex-direction:column;gap:10px}.list-row{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px}.list-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#f2f1ff}.list-row .grow{flex:1}.list-row strong{display:block;font-size:14px}.list-row small{color:var(--muted)}
.modal{position:fixed;inset:0;background:rgba(13,18,38,.45);z-index:99;display:grid;align-items:end}.modal-card{max-width:520px;width:100%;margin:0 auto;background:#fff;border-radius:28px 28px 0 0;padding:24px 20px calc(28px + env(safe-area-inset-bottom));max-height:84vh;overflow:auto}.modal-card h2{margin:3px 0 8px}.modal-card p{color:var(--muted);line-height:1.55}.close-x{float:right;border:0;background:#f2f3f7;width:34px;height:34px;border-radius:50%}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(15px);background:#17203b;color:#fff;border-radius:999px;padding:11px 16px;font-weight:700;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.notice{background:#fff8e9;border:1px solid #ffe1a5;color:#6f5a25;border-radius:18px;padding:13px;font-size:12px;line-height:1.45}.center{text-align:center}.mt{margin-top:14px}.mb{margin-bottom:14px}
@media (min-width:700px){body{padding:20px}.app-shell{min-height:calc(100vh - 40px);border-radius:34px;overflow:hidden;box-shadow:0 25px 70px rgba(25,30,70,.13)}.bottom-nav{bottom:20px;border-radius:0 0 34px 34px}.modal-card{border-radius:28px;margin-bottom:20px}}