:root{
  --bg:#07090e;--panel:#10141d;--panel2:#151b26;--text:#f4f7fb;--muted:#8e98a8;
  --line:#242c3a;--silver:#c9d0da;--accent:#e9eef5;--danger:#ff4d5e;--good:#4fe39a;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 75% -10%,#1b2433 0,transparent 35%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}
button{font:inherit}.noise{position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1180px)/2));position:sticky;top:0;background:#080b12e8;backdrop-filter:blur(14px);z-index:20}
.brand{border:0;background:none;color:white;display:flex;gap:12px;align-items:center;cursor:pointer;text-align:left}.brand-mark{width:39px;height:39px;border:1px solid #8791a1;display:grid;place-items:center;font-size:12px;letter-spacing:2px}.brand strong{display:block;font-size:13px;letter-spacing:2.5px}.brand small{display:block;color:#7f8998;font-size:9px;letter-spacing:4px;margin-top:3px}
.top-stats{display:flex;gap:22px;align-items:center;color:#bec6d2;font-size:13px}.avatar,.big-avatar{border:1px solid #596477;background:linear-gradient(145deg,#202837,#0e121a);color:white;border-radius:50%;display:grid;place-items:center;font-weight:800}.avatar{width:38px;height:38px;cursor:pointer}.big-avatar{width:84px;height:84px;font-size:24px}
main{max-width:1180px;margin:auto;padding:56px 24px 90px}.view{display:none;animation:fade .25s ease}.view.active{display:block}@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero{display:grid;grid-template-columns:1.5fr .7fr;gap:55px;align-items:center;padding:35px 0 55px}.eyebrow{font-size:11px;letter-spacing:2.8px;color:#8f99aa;text-transform:uppercase}.hero h1,.page-title{font-size:clamp(42px,7vw,78px);line-height:.9;letter-spacing:-3px;margin:12px 0 24px}.hero h1 span{font-weight:300;color:#aeb7c5}.hero-copy,.sub{max-width:620px;color:#9ea8b7;font-size:17px;line-height:1.65}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.centered{justify-content:center}.btn{border:1px solid var(--line);padding:13px 18px;border-radius:9px;background:#161c26;color:white;cursor:pointer;font-weight:700}.btn:hover{transform:translateY(-1px);border-color:#667183}.btn.primary{background:#eef2f7;color:#080b12;border-color:white}.btn.ghost{background:transparent}.btn.tiny{padding:8px 11px;font-size:12px}
.readiness-card,.panel,.question-card,.results-card,.profile-card{border:1px solid var(--line);background:linear-gradient(145deg,#121722ee,#0b0e15ee);border-radius:18px}.readiness-card{padding:34px;text-align:center}.readiness-card h3{letter-spacing:2px;font-size:12px}.readiness-card p{color:var(--muted);font-size:13px}
.ring{width:155px;height:155px;margin:auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#e9eef5 0%,#202735 0);position:relative}.ring:after{content:"";position:absolute;inset:12px;border-radius:50%;background:#0e1219}.ring span{z-index:2;font-size:32px;font-weight:800}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat-card{border-top:1px solid #3a4352;padding:22px 8px}.stat-card small{color:#778292;font-size:9px;letter-spacing:1.8px}.stat-card strong{display:block;font-size:30px;margin:8px 0}.stat-card .small-value{font-size:17px;min-height:36px}.stat-card span{color:#697484;font-size:11px}
.section-title{font-size:15px;letter-spacing:3px;margin:70px 0 22px}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.mode-card{text-align:left;min-height:220px;border:1px solid var(--line);background:linear-gradient(155deg,#151b26,#0c1017);color:white;border-radius:15px;padding:22px;cursor:pointer;transition:.2s}.mode-card:hover{transform:translateY(-4px);border-color:#657083}.mode-card h3{letter-spacing:1.5px}.mode-card p{color:#929cab;line-height:1.5;font-size:13px}.mode-card em{display:block;margin-top:25px;color:#737e8d;font-style:normal;font-size:11px}.mode-icon{font-size:28px}.mode-card.danger:hover{border-color:#8e3b47}.mode-card.exam{background:linear-gradient(155deg,#eceff3,#bac3cf);color:#090c11}.mode-card.exam p,.mode-card.exam em{color:#4d5662}
.panel{margin-top:55px;padding:28px}.panel-head{display:flex;justify-content:space-between;align-items:center}.panel h2{margin:0}.topic-bars{display:grid;gap:14px;margin-top:25px}.bar-row{display:grid;grid-template-columns:180px 1fr 48px;gap:15px;align-items:center;font-size:12px}.bar{height:8px;background:#242c39;border-radius:8px;overflow:hidden}.bar div{height:100%;background:#dce2e9;border-radius:8px}
.back{background:none;color:#8e99a9;border:0;padding:0;margin-bottom:30px;cursor:pointer}.topics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:35px}.topic-card{border:1px solid var(--line);background:#111620;border-radius:14px;padding:22px;cursor:pointer}.topic-card:hover{border-color:#687385}.topic-card h3{margin:8px 0}.topic-card p{color:#8f99a8;line-height:1.5;font-size:13px}.topic-num{font-size:10px;letter-spacing:2px;color:#697384}
.learn-box{max-width:850px}.learn-box h1{font-size:48px}.learn-section{border-left:2px solid #566174;padding-left:22px;margin:35px 0}.learn-section h3{letter-spacing:1px}.learn-section p,.learn-section li{color:#b2bbc7;line-height:1.75}.remember{background:#151c28;border:1px solid #2e3948;border-radius:12px;padding:20px;margin:25px 0}.remember b{color:white}
.quiz-shell{max-width:850px;margin:auto}.quiz-head{display:flex;justify-content:space-between;align-items:center}.pill{padding:8px 11px;border:1px solid #303948;border-radius:99px;font-size:10px;letter-spacing:2px}.progress-track{height:4px;background:#1d2430;margin:26px 0 10px}.progress-fill{height:100%;background:#e7ebf0;width:0;transition:.3s}.quiz-meta{display:flex;justify-content:space-between;color:#7f8998;font-size:11px;letter-spacing:1px}.question-card{margin-top:22px;padding:38px}.question-card h2{font-size:29px;line-height:1.35}.answers{display:grid;gap:11px;margin-top:28px}.answer{border:1px solid #303846;background:#131923;color:#eef2f6;padding:16px 18px;border-radius:10px;text-align:left;cursor:pointer}.answer:hover{border-color:#758092}.answer.correct{border-color:#3da875;background:#11281f}.answer.wrong{border-color:#bd4050;background:#2b1218}.answer:disabled{cursor:default}.feedback{margin-top:22px;padding:18px;border-radius:10px;background:#0d1118;border:1px solid #26303e;color:#adb7c4;line-height:1.55}.feedback strong{color:white}.hidden{display:none!important}.next{margin-top:18px;width:100%}
.results-card{max-width:740px;margin:40px auto;padding:48px;text-align:center}.result-icon{font-size:52px}.results-card h1{font-size:45px;margin:9px 0}.big-score{font-size:82px;font-weight:900;letter-spacing:-5px}.results-card>p{color:#9ba5b4}.result-breakdown{display:grid;gap:8px;margin:28px 0;text-align:left}.result-row{display:flex;justify-content:space-between;border-bottom:1px solid #232b37;padding:10px 0;color:#a9b2bf}.profile-card{display:flex;align-items:center;gap:20px;padding:25px;max-width:620px}.profile-card h2{margin:0}.profile-card p{color:#8994a3}.rank-track{max-width:620px;height:7px;background:#252d3a;margin:20px 0 35px;border-radius:10px}.rank-track div{height:100%;background:#e6ebf1;border-radius:10px}.danger-btn{border-color:#5e2c34;color:#ff8d99;background:#1a1014}
footer{text-align:center;padding:25px;color:#4e5867;font-size:9px;letter-spacing:2px;border-top:1px solid #151b24}
@media(max-width:850px){.hero{grid-template-columns:1fr}.stats-grid,.mode-grid{grid-template-columns:repeat(2,1fr)}.topics-grid{grid-template-columns:1fr 1fr}.top-stats span{display:none}}
@media(max-width:560px){main{padding:32px 17px 70px}.hero h1,.page-title{font-size:44px}.stats-grid,.mode-grid,.topics-grid{grid-template-columns:1fr}.bar-row{grid-template-columns:105px 1fr 35px}.question-card{padding:24px}.big-score{font-size:62px}}

.track-box{margin-top:30px;max-width:650px;border:1px solid var(--line);border-radius:13px;padding:15px;background:#0c1017}
.track-switch{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0}
.track-btn{border:1px solid #303846;background:#111720;color:#9ba6b5;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:10px;font-weight:800;letter-spacing:.7px}
.track-btn.active{background:#eef2f7;color:#080b12;border-color:#fff}
.track-box small{color:#6f7a89}
#examTimer{font-variant-numeric:tabular-nums;color:#dce2e9;font-weight:800}
.category-note{border:1px solid #314052;background:#101722;border-radius:12px;padding:18px;margin:22px 0;color:#aab4c1;line-height:1.6}

.cloud-status{font-size:11px!important;color:#8995a5!important;white-space:nowrap}
.cloud-status.ok{color:#78dca5!important}
.cloud-status.err{color:#ff9a9f!important}
@media(max-width:850px){.top-stats .cloud-status{display:inline!important;font-size:9px!important}}

.hero-side{display:flex;flex-direction:column;gap:18px}
.ella-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  min-height:360px;
  background:#0c1017;
}
.ella-photo{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  object-position:center 35%;
  display:block;
}
.ella-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:20px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(5,8,14,.88) 60%, rgba(5,8,14,.97) 100%);
}
.ella-overlay h3{
  margin:8px 0 4px;
  font-size:28px;
  letter-spacing:-1px;
}
.ella-overlay p{
  margin:0;
  color:#a5afbd;
  line-height:1.5;
}
@media(max-width:850px){
  .hero-side{order:-1}
  .ella-card{min-height:300px}
  .ella-photo{min-height:300px; object-position:center 30%}
}

/* ===== V1.7 Avatar + Shop ===== */
.avatar-mini-card{
  width:100%;display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);
  border-radius:16px;background:linear-gradient(145deg,#131925,#0d1119);color:white;text-align:left;cursor:pointer
}
.avatar-mini-card:hover{border-color:#647184;transform:translateY(-1px)}
.mini-avatar-stage{width:82px;height:82px;border-radius:13px;overflow:hidden;position:relative;flex:0 0 82px}
.avatar-mini-copy{display:flex;flex-direction:column;gap:3px}
.avatar-mini-copy strong{font-size:15px}.avatar-mini-copy small{color:#818d9d}

.avatar-studio-grid{display:grid;grid-template-columns:minmax(320px,.9fr) 1.35fr;gap:24px;margin-top:35px}
.avatar-stage-card,.wardrobe-panel{border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#121722,#0b0e15);overflow:hidden}
.avatar-stage{height:540px;position:relative;overflow:hidden}
.avatar-stage-footer{display:flex;justify-content:space-between;align-items:center;padding:22px;border-top:1px solid var(--line)}
.avatar-stage-footer h2{margin:5px 0 0}.coin-pill,.shop-wallet{padding:11px 14px;border:1px solid #3a4352;border-radius:999px;background:#111720;font-weight:900}
.wardrobe-panel{padding:24px}
.wardrobe-tabs,.shop-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.shop-tab{padding:9px 12px;border-radius:9px;border:1px solid #303846;background:#111720;color:#8d98a7;font-weight:800;cursor:pointer;font-size:11px}
.shop-tab.active,.shop-tab:hover{background:#eef2f7;color:#080b12;border-color:#fff}
.wardrobe-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wardrobe-item{padding:14px;border:1px solid #293241;border-radius:12px;background:#0e131b;color:white;cursor:pointer;text-align:left}
.wardrobe-item.equipped{border-color:#e9eef5;background:#171e2a}
.wardrobe-item strong{display:block}.wardrobe-item small{color:#7f8997}
.shop-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:25px}
.shop-wallet{font-size:21px;white-space:nowrap}
.reward-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:30px 0}
.reward-strip>div{border:1px solid var(--line);border-radius:12px;padding:17px;background:#10151e}
.reward-strip b{font-size:21px;display:block}.reward-strip span{font-size:11px;color:#7f8997}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.shop-item{border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,#151b26,#0c1017);overflow:hidden}
.shop-preview{height:180px;position:relative;overflow:hidden}
.shop-info{padding:17px}.shop-info h3{margin:4px 0 8px}.shop-info p{color:#84909f;font-size:12px;min-height:35px;line-height:1.45}
.shop-buy-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px}
.price{font-weight:900}.shop-buy{padding:8px 10px;border:0;border-radius:8px;font-weight:900;cursor:pointer}
.shop-buy.buy{background:#eef2f7;color:#090c11}.shop-buy.owned{background:#17251f;color:#82dfaa}.shop-buy.locked{background:#24161a;color:#ff8f9d}
.rare{color:#ddb6ff}.legendary{color:#ffd57a}

/* CSS avatar scene */
.ava-scene{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#3a465b,#10141d)}
.ava-bg-runway{background:linear-gradient(#7994b2 0 47%,#68717b 47% 60%,#303944 60%)}
.ava-bg-garage{background:linear-gradient(#262b32 0 55%,#11151a 55%);box-shadow:inset 0 -60px 80px #0005}
.ava-bg-catcafe{background:linear-gradient(#c9ae91 0 58%,#795c43 58%);filter:saturate(.7)}
.ava-bg-jdm{background:linear-gradient(135deg,#3c1d50,#102c46 58%,#13151d)}
.ava-bg-hangar{background:linear-gradient(#707a85 0 52%,#343a42 52%);}

.ava-body{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:68%;height:78%}
.ava-head{position:absolute;left:50%;top:2%;transform:translateX(-50%);width:42%;aspect-ratio:.82;border-radius:48% 48% 44% 44%;background:#e3b89c;z-index:4}
.ava-hair{position:absolute;left:50%;top:-3%;transform:translateX(-50%);width:49%;height:45%;border-radius:50% 50% 38% 38%;background:#332922;z-index:5}
.ava-braid{position:absolute;top:29%;width:8%;height:43%;border-radius:999px;background:repeating-linear-gradient(#3b2e26 0 10px,#201914 10px 20px);z-index:3}
.ava-braid.left{left:25%;transform:rotate(5deg)}.ava-braid.right{right:25%;transform:rotate(-5deg)}
.ava-neck{position:absolute;left:50%;top:34%;transform:translateX(-50%);width:14%;height:11%;background:#d6a789;z-index:2}
.ava-torso{position:absolute;left:50%;top:39%;transform:translateX(-50%);width:66%;height:54%;border-radius:24% 24% 11% 11%;background:#444c58;z-index:2}
.ava-arm{position:absolute;top:44%;width:18%;height:44%;border-radius:999px;background:#444c58;z-index:1}.ava-arm.left{left:7%;transform:rotate(8deg)}.ava-arm.right{right:7%;transform:rotate(-8deg)}
.ava-legs{position:absolute;left:50%;bottom:-5%;transform:translateX(-50%);width:45%;height:27%;background:linear-gradient(90deg,#27303b 0 46%,transparent 46% 54%,#27303b 54%);z-index:1}
.ava-eyes{position:absolute;left:50%;top:18%;transform:translateX(-50%);width:54%;height:8%;border-radius:999px;background:linear-gradient(90deg,#21242a 0 38%,transparent 38% 62%,#21242a 62%);z-index:6}
.ava-mouth{position:absolute;left:50%;top:72%;transform:translateX(-50%);width:18%;height:3px;border-radius:50%;background:#a46864;z-index:6}

/* Outfit skins */
.outfit-grey .ava-torso,.outfit-grey .ava-arm{background:#535c68}
.outfit-tt .ava-torso,.outfit-tt .ava-arm{background:linear-gradient(135deg,#1f2732,#090c10 70%)}
.outfit-tt .ava-torso:after{content:"TT";position:absolute;right:16%;top:12%;font-size:15px;font-weight:900;color:#dce3ea;letter-spacing:1px}
.outfit-gt4 .ava-torso,.outfit-gt4 .ava-arm{background:linear-gradient(135deg,#d9dce1,#7a2026 48%,#202630 49%)}
.outfit-gt4 .ava-torso:after{content:"GT-FOUR";position:absolute;left:50%;top:14%;transform:translateX(-50%);font-size:11px;font-weight:900;color:#fff}
.outfit-mechanic .ava-torso,.outfit-mechanic .ava-arm{background:#293c56}
.outfit-mechanic .ava-torso:after{content:"MAINT";position:absolute;left:50%;top:12%;transform:translateX(-50%);font-size:11px;color:#cbd7e4}
.outfit-cat .ava-torso,.outfit-cat .ava-arm{background:#302b38}
.outfit-cat .ava-torso:after{content:"=^.^=";position:absolute;left:50%;top:13%;transform:translateX(-50%);font-size:15px;color:#eee}
.outfit-pilot .ava-torso,.outfit-pilot .ava-arm{background:#1d2635}
.outfit-pilot .ava-torso:after{content:"✈";position:absolute;left:50%;top:11%;transform:translateX(-50%);font-size:21px;color:#d7dee7}

/* Accessories */
.acc-sunglasses .ava-eyes{height:13%;top:16%;background:#111;border:3px solid #2d333a}
.acc-headset:after{content:"🎧";position:absolute;left:50%;top:8%;transform:translateX(-50%);font-size:54px;z-index:8}
.acc-spanner:after{content:"🔧";position:absolute;right:9%;bottom:18%;font-size:38px;z-index:8}
.acc-catears .ava-hair:after{content:"▲     ▲";position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:26px;color:#332922;white-space:pre}
.acc-keys:after{content:"🔑";position:absolute;right:15%;bottom:24%;font-size:31px;z-index:8}

/* Pets */
.ava-pet{position:absolute;right:7%;bottom:6%;font-size:54px;filter:drop-shadow(0 5px 8px #0007);z-index:9}
.pet-black{filter:grayscale(1) brightness(.45) drop-shadow(0 5px 8px #0007)}
.pet-white{filter:grayscale(1) brightness(1.8) drop-shadow(0 5px 8px #0007)}
.pet-ginger{filter:sepia(.9) saturate(2) drop-shadow(0 5px 8px #0007)}
.pet-pilot:after{content:"✈";position:absolute;font-size:19px;right:0;top:-9px}
.pet-mechanic:after{content:"🔧";position:absolute;font-size:18px;right:-3px;bottom:-1px}
.pet-turbo:after{content:"💨";position:absolute;font-size:20px;left:-18px;top:12px}

/* preview cards inherit the same scene but smaller */
.shop-preview .ava-body{width:56%;height:88%}.shop-preview .ava-pet{font-size:38px}
.shop-preview .ava-head{width:38%}.shop-preview .ava-hair{width:45%}

@media(max-width:950px){
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .avatar-studio-grid{grid-template-columns:1fr}
  .avatar-stage{height:500px}
}
@media(max-width:560px){
  .reward-strip{grid-template-columns:repeat(2,1fr)}
  .shop-grid{grid-template-columns:1fr}
  .shop-title-row{display:block}.shop-wallet{display:inline-block;margin-top:14px}
  .wardrobe-grid{grid-template-columns:1fr}
  .avatar-stage{height:470px}
}