:root{--navy:#082b5b;--navy2:#061f43;--blue:#1260a8;--gold:#e0b128;--red:#a92333;--paper:#f5f1e7;--ink:#142238;--muted:#647087;--white:#fff;--line:#dce2ea;--shadow:0 16px 40px rgba(9,37,76,.12)}*{box-sizing:border-box}body{margin:0;background:#f5f7fa;color:var(--ink);font-family:"DM Sans",sans-serif;font-size:16px}.topbar{height:82px;padding:0 clamp(20px,4vw,68px);display:flex;align-items:center;gap:42px;background:var(--white);border-bottom:1px solid #e7ebf0;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px;color:var(--navy);text-decoration:none;min-width:max-content}.crest{display:grid;place-items:center;width:43px;height:49px;background:var(--navy);color:var(--gold);font:700 28px "Playfair Display";clip-path:polygon(8% 0,92% 0,100% 74%,50% 100%,0 74%)}.brand b{font:700 21px "Playfair Display";letter-spacing:.04em}.brand small{display:block;font-size:10px;letter-spacing:.18em;margin-top:2px}.nav{display:flex;gap:8px;margin:auto}.nav-link,.profile,.text-button{border:0;background:none;font:inherit;cursor:pointer}.nav-link{padding:10px 15px;border-radius:9px;color:#536176;font-weight:600}.nav-link:hover,.nav-link.active{color:var(--navy);background:#eef4fb}.profile{display:flex;align-items:center;gap:10px;color:var(--navy);font-weight:700}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--navy)}main{max-width:1440px;margin:0 auto;padding:42px clamp(20px,5vw,76px) 70px}.view{display:none}.view.active{display:block}.welcome-grid{display:grid;grid-template-columns:1.28fr .72fr;gap:44px;align-items:center;min-height:340px;padding:20px 0 48px}.eyebrow{font-size:.76rem;letter-spacing:.18em;font-weight:700;color:var(--red)}h1,h2{font-family:"Playfair Display",serif;color:var(--navy);margin:.2em 0}.welcome-copy h1{font-size:clamp(2.8rem,5vw,5.3rem);line-height:.98;max-width:800px}.welcome-copy h1 em{color:var(--red);font-style:normal}.welcome-copy p{font-size:1.08rem;line-height:1.7;color:#58667a;max-width:650px}.motto{font-weight:700;color:var(--navy);font-size:.8rem;letter-spacing:.12em;display:flex;align-items:center;gap:12px;margin-top:26px}.motto i{width:5px;height:5px;background:var(--gold);border-radius:50%}.passport-card{position:relative;overflow:hidden;min-height:250px;padding:22px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#0a376f 0%,#061b3a 100%);box-shadow:0 24px 55px rgba(7,31,66,.25);transform:rotate(1.5deg)}.passport-shine{position:absolute;width:260px;height:260px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-80px;top:-90px;box-shadow:0 0 0 30px rgba(255,255,255,.03),0 0 0 70px rgba(255,255,255,.02)}.passport-head,.passport-foot{position:relative;display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.15em;font-weight:700}.passport-body{position:relative;display:grid;grid-template-columns:66px 1fr 76px;gap:15px;align-items:center;margin:38px 0}.passport-avatar{width:62px;height:72px;border:2px solid var(--gold);display:grid;place-items:center;font-family:"Playfair Display";font-size:24px}.passport-body small{display:block;font-size:.55rem;letter-spacing:.14em;opacity:.7}.passport-body strong,.passport-body b{display:block;margin:2px 0 10px}.qr{width:70px;height:70px;background:repeating-linear-gradient(45deg,#fff 0 4px,transparent 4px 8px),repeating-linear-gradient(-45deg,#fff 0 3px,transparent 3px 7px);border:5px solid white}.journey-card,.next-mission,.stats-card,.recent-card,.identity-card{background:white;border:1px solid #e4e9ef;border-radius:18px;box-shadow:var(--shadow)}.journey-card{padding:28px 32px}.section-head{display:flex;justify-content:space-between;align-items:end}.section-head h2{font-size:2rem}.progress-label{font-weight:700;color:var(--blue);background:#e9f3ff;padding:8px 12px;border-radius:99px}.route{display:grid;grid-template-columns:repeat(6,1fr);position:relative;margin:30px 0}.route:before{content:"";position:absolute;left:7%;right:7%;top:26px;height:3px;background:#dce2e9}.stage{position:relative;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;color:#8690a0;z-index:1}.stage span{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#edf0f4;border:4px solid white;box-shadow:0 0 0 2px #dce2e9;font-weight:700}.stage b{text-transform:uppercase;font-size:.77rem;letter-spacing:.06em}.stage small{font-size:.68rem}.stage.current{color:var(--navy)}.stage.current span{background:var(--gold);box-shadow:0 0 0 3px var(--navy)}.level-progress{display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:center}.progress-track{height:9px;background:#e7ebf0;border-radius:10px;overflow:hidden}.progress-track span{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));border-radius:10px}.level-progress small{grid-column:1/-1;color:var(--muted)}.dashboard-grid{display:grid;grid-template-columns:1.45fr .75fr 1fr;gap:20px;margin-top:20px}.next-mission,.stats-card,.recent-card{padding:25px}.next-mission{display:grid;grid-template-columns:80px 1fr;gap:5px 20px;background:var(--navy);color:white}.next-mission .eyebrow{grid-column:1/-1;color:#f4ca51}.mission-number{font:700 4.5rem "Playfair Display";color:var(--gold);line-height:1}.mission-copy h3{font:700 1.5rem "Playfair Display";margin:0}.mission-copy p{color:#c6d4e5;line-height:1.5}.mission-copy button,.primary-action{border:0;border-radius:10px;background:var(--red);color:#fff;padding:12px 16px;font-weight:700;cursor:pointer}.mission-copy button:hover,.primary-action:hover{background:#c32c3e}.stat-ring{width:118px;height:118px;border-radius:50%;margin:18px auto;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at center,#fff 56%,transparent 58%),conic-gradient(var(--gold) 0 32%,#e5eaf0 32%)}.stat-ring b{display:block;font-size:1.55rem;color:var(--navy)}.stat-ring span{display:block;font-size:.65rem}.mini-stats{display:flex;justify-content:space-between;text-align:center;color:var(--muted);font-size:.72rem}.mini-stats b{display:block;color:var(--navy);font-size:1.1rem}.stamp-row{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #edf0f3}.stamp{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;font:700 1.4rem "Playfair Display";transform:rotate(-7deg)}.grade-a{border:2px dashed var(--red);color:var(--red);background:#fff2f3}.grade-b{border:2px dashed var(--blue);color:var(--blue);background:#eef7ff}.stamp-row b{display:block;font-size:.86rem}.stamp-row small{color:var(--muted);font-size:.7rem}.text-button{color:var(--red);font-weight:700;margin-top:16px}.page-title{padding:35px 0}.page-title h1{font-size:clamp(2.5rem,5vw,4.5rem)}.page-title p{color:var(--muted);font-size:1.05rem}.mission-list{display:grid;gap:12px}.mission-item{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:16px;background:white;padding:18px;border:1px solid var(--line);border-radius:14px}.mission-item.done{border-left:5px solid var(--gold)}.mission-item .num{width:48px;height:48px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700}.mission-item h3{margin:0;color:var(--navy)}.mission-item p{margin:4px 0 0;color:var(--muted);font-size:.86rem}.status{font-size:.75rem;font-weight:700;padding:8px 12px;border-radius:20px;background:#edf1f5;color:#657185}.done .status{background:#fff6d7;color:#7a5d00}.key-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.key-card{background:#fff;padding:25px;border-radius:16px;border-top:5px solid;box-shadow:var(--shadow)}.key-card>b{font:700 2.8rem "Playfair Display"}.key-card h3{color:var(--navy);font-size:1rem}.key-card p{color:var(--muted);line-height:1.55}.key-card.a{border-color:#b32032}.key-card.b{border-color:#1e64a5}.key-card.c{border-color:#e0b128}.key-card.d{border-color:#7a8190}.promise{margin-top:25px;padding:35px;display:flex;gap:25px;background:var(--navy);color:white;border-radius:18px}.promise-mark{font:700 6rem "Playfair Display";color:var(--gold);line-height:.8}.promise h2{color:white;max-width:800px}.promise p{color:#c8d6e8}.identity-card{padding:30px;display:grid;grid-template-columns:220px 1fr;gap:35px}.photo-placeholder{min-height:250px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font:700 4rem "Playfair Display";position:relative}.photo-placeholder small{position:absolute;bottom:12px;color:#fff;font:600 .65rem "DM Sans";letter-spacing:.12em}.identity-card dl{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px;margin:0}.identity-card dl div{padding:10px 0;border-bottom:1px solid var(--line)}dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}dd{margin:4px 0;font-weight:700;color:var(--navy)}dialog{border:0;border-radius:20px;max-width:480px;padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.3)}dialog::backdrop{background:rgba(4,22,46,.68);backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:1.7rem;cursor:pointer}.dialog-icon{width:64px;height:64px;background:var(--gold);color:var(--navy);display:grid;place-items:center;border-radius:50%;font:700 2rem "Playfair Display";margin-bottom:20px}.challenge{display:flex;flex-direction:column;padding:16px;background:#f2f6fb;border-left:4px solid var(--blue);margin:20px 0}.primary-action{width:100%}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,120px);background:var(--navy);color:#fff;padding:14px 22px;border-radius:12px;box-shadow:var(--shadow);transition:.3s;z-index:30}.toast.show{transform:translate(-50%,0)}@media(max-width:1000px){.welcome-grid{grid-template-columns:1fr}.passport-card{max-width:520px}.dashboard-grid{grid-template-columns:1fr 1fr}.next-mission{grid-column:1/-1}.key-grid{grid-template-columns:1fr 1fr}.route{overflow:auto;grid-template-columns:repeat(6,130px);padding:4px}.route:before{display:none}}@media(max-width:680px){.topbar{height:70px;padding:0 14px}.nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:20;justify-content:space-around;padding:7px}.profile-name,.brand small{display:none}.brand{margin-right:auto}.nav-link{font-size:.76rem;padding:9px}.welcome-grid{padding-top:0}.welcome-copy h1{font-size:2.65rem}.passport-card{min-height:230px}.passport-body{grid-template-columns:60px 1fr}.qr{display:none}.journey-card{padding:22px 16px}.dashboard-grid,.key-grid{grid-template-columns:1fr}.identity-card{grid-template-columns:1fr}.identity-card dl{grid-template-columns:1fr}.mission-item{grid-template-columns:48px 1fr}.mission-item .status{grid-column:2}.promise{padding:26px 20px}main{padding:28px 16px 95px}}