:root{--bg:#070b16;--panel:#0d1422;--panel2:#101a2b;--line:#ffffff12;--text:#f4f7ff;--muted:#8390a7;--cyan:#42dfff;--violet:#9275ff;--green:#55e6ad;--red:#ff6689;--gold:#ffd66b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 85% -5%,#183a5b55,transparent 34%),radial-gradient(circle at -10% 50%,#38226433,transparent 32%),var(--bg);color:var(--text);font-family:Arial,"Tahoma",sans-serif;min-height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,black,transparent 70%)}main{position:relative;width:min(100%,620px);margin:auto;padding:18px 15px 105px;overflow:hidden}.ambient{position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(70px);opacity:.15;pointer-events:none}.a1{background:var(--cyan);top:100px;right:-100px}.a2{background:var(--violet);top:550px;left:-110px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.brand{display:flex;align-items:center;gap:10px}.brand .mark{width:35px;height:35px;border:1px solid #42dfff55;border-radius:11px;display:grid;place-items:center;background:#42dfff0b;color:var(--cyan);font-size:11px;font-weight:900}.brand strong{font-weight:950;letter-spacing:2px;font-size:14px}.brand strong span{color:var(--cyan)}.brand small{display:block;color:#64738a;font-size:6px;letter-spacing:2px;margin-top:3px}.coin{background:#ffffff07;border:1px solid var(--line);padding:9px 12px;border-radius:13px;font-size:11px;box-shadow:0 10px 30px #0003}.coin:first-letter{color:var(--gold)}.screen{display:none}.screen.active{display:block}.hello{font-size:18px;margin-bottom:12px}.hello b{font-weight:900}.online{color:var(--green);font-size:7px;margin-right:5px}.hero{position:relative;display:flex;justify-content:space-between;align-items:center;padding:20px;border-radius:26px;background:linear-gradient(145deg,#12243aee,#09111eee);border:1px solid #42dfff1c;box-shadow:0 25px 70px #0008;overflow:hidden}.hero:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:#42dfff0c;left:-50px;bottom:-100px}.hero-copy{flex:1}.eyebrow{color:var(--cyan);font-size:8px;font-weight:800;letter-spacing:1.8px}.eyebrow b{color:#b6c3d8}.danger{color:var(--red)}.hero h1{font-size:28px;margin:7px 0 4px}.hero h1 b{color:#fff}.hero p{font-size:10px;color:var(--muted);margin:0 0 12px}.hero p i{color:#506078;font-style:normal;padding:0 5px}.bar{height:7px;background:#ffffff09;border-radius:20px;overflow:hidden;border:1px solid #ffffff05}.bar i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--violet),var(--cyan));width:0;transition:width .5s ease}.hero-copy>small{display:block;color:#64738a;font-size:8px;margin-top:6px}.avatar{width:78px;height:78px;border-radius:25px;display:grid;place-items:center;font-size:34px;font-weight:900;background:linear-gradient(145deg,#1b4167,#101a2b);border:1px solid #42dfff55;box-shadow:0 0 35px #42dfff13;z-index:1}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:11px}.quick-grid button{border:1px solid var(--line);background:#ffffff05;color:var(--text);border-radius:18px;text-align:right;padding:13px 11px;display:flex;flex-direction:column;gap:4px;cursor:pointer}.quick-grid span{font-size:20px}.quick-grid b{font-size:10px}.quick-grid small{font-size:7px;color:var(--muted)}.section{display:flex;justify-content:space-between;align-items:center;margin:23px 2px 10px;font-size:13px}.section button{border:0;background:none;color:var(--cyan);font-size:9px}.muted{font-size:7px;color:#617089;letter-spacing:1.5px}.quests{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quest{padding:12px 9px;border:1px solid var(--line);background:#ffffff05;border-radius:17px;display:flex;gap:7px;align-items:flex-start}.quest>span{font-size:15px}.quest b{display:block;font-size:8px;line-height:1.5}.quest small{font-size:7px;color:var(--green);display:block;margin-top:4px}.done{border-color:#55e6ad33;background:#55e6ad08}.activity{display:grid;gap:7px}.activity>div{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--line);background:#ffffff04;border-radius:14px}.activity span{font-size:13px}.activity b{font-size:9px;color:var(--green)}.activity small{font-size:8px;color:var(--muted);margin-right:auto}.empty{color:var(--muted);font-size:9px}.page h2{font-size:27px;margin:5px 0}.page p{font-size:10px;color:var(--muted);margin-top:0}.master{padding:14px;background:#ffffff05;border:1px solid var(--line);border-radius:18px}.master>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:9px}.master>div:first-child div small{display:block;color:var(--muted);font-size:7px;margin-top:4px}.master strong{color:var(--cyan);font-size:16px}.chapters{display:grid;gap:8px;margin-top:12px}.chapter{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--line);background:#ffffff05;border-radius:17px;cursor:pointer;transition:.2s}.chapter:active{transform:scale(.985)}.locked{opacity:.42}.num{width:39px;height:39px;border-radius:13px;background:#102138;color:var(--cyan);display:grid;place-items:center;font-size:10px;font-weight:900}.cm{flex:1}.cm b{font-size:10px}.cm small{display:block;color:var(--muted);font-size:7px;margin-top:4px}.state{font-size:13px;color:var(--cyan)}.profile{text-align:center;padding:23px 18px;background:linear-gradient(145deg,#11243a,#09121f);border:1px solid var(--line);border-radius:27px}.profile-ring{width:106px;height:106px;padding:5px;margin:0 auto 10px;border-radius:32px;background:linear-gradient(135deg,var(--cyan),var(--violet),transparent 70%)}.big{width:96px;height:96px}.profile h2{margin:7px 0 3px;font-size:22px}.profile span{font-size:9px;color:var(--cyan)}.profile-xp{margin-top:17px;text-align:right}.profile-xp small{font-size:7px;color:var(--muted);display:block;margin-top:6px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.stats div{padding:15px 5px;text-align:center;border:1px solid var(--line);background:#ffffff05;border-radius:16px}.stats b{display:block;font-size:14px}.stats small{font-size:8px;color:var(--muted)}.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.badge{padding:13px 5px;text-align:center;border:1px solid var(--line);background:#ffffff04;border-radius:16px;opacity:.3;filter:grayscale(1)}.badge.unlocked{opacity:1;filter:none;border-color:#42dfff2c;background:#42dfff07}.badge span{display:block;font-size:24px}.badge small{font-size:7px;color:var(--muted);display:block;margin-top:5px}nav{position:fixed;z-index:10;bottom:9px;left:50%;transform:translateX(-50%);width:min(calc(100% - 20px),600px);display:grid;grid-template-columns:repeat(5,1fr);padding:7px;background:#07101ddd;backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:22px;box-shadow:0 15px 50px #0009}nav button{border:0;background:none;color:#68778e;font-size:19px;padding:4px;display:grid;place-items:center;gap:2px}nav small{font-size:7px}nav .active{color:#e9fbff}nav .battle{color:var(--cyan)}.modal{display:none;position:fixed;inset:0;background:#000c;backdrop-filter:blur(9px);z-index:20;align-items:center;justify-content:center;padding:12px}.modal.show{display:flex}.box{width:min(100%,580px);max-height:90vh;overflow:auto;background:linear-gradient(150deg,#101d30,#07101b);border:1px solid var(--line);border-radius:25px;padding:23px;position:relative;box-shadow:0 30px 100px #000}.close{position:absolute;left:13px;top:12px;background:#ffffff0a;color:#fff;border:0;width:34px;height:34px;border-radius:11px;font-size:22px}.lesson h2{font-size:23px;margin:8px 0}.lesson p{font-size:10px;color:#a9b7c9;line-height:2}.code{direction:ltr;text-align:left;font:12px/1.8 monospace;background:#04080e;border:1px solid #ffffff08;border-radius:15px;padding:15px;white-space:pre-wrap;margin:12px 0}.concept{padding:12px;border-radius:14px;background:#42dfff07;border:1px solid #42dfff18;margin:10px 0 12px}.concept b{display:block;color:var(--cyan);font-size:9px;margin-bottom:5px}.concept span{font-size:9px;color:#b5c2d3;line-height:1.8}.choices{display:grid;gap:8px}.choices button{padding:12px;border-radius:13px;border:1px solid var(--line);background:#101e30;color:#dce7f4;text-align:right;font-size:10px;cursor:pointer}.choices button.right{border-color:#55e6ad;background:#55e6ad0b}.choices button.wrong{border-color:var(--red)}.choices button:disabled{opacity:.7}.reward{margin-top:13px;padding:10px;border-radius:13px;background:#ffd66b08;color:var(--gold);font-size:9px}.ranklist{display:grid;gap:7px}.rankrow{display:flex;align-items:center;gap:10px;padding:12px;background:#ffffff05;border:1px solid var(--line);border-radius:13px;font-size:9px}.rankrow .place{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#102138;color:var(--cyan);font-weight:900}.rankrow span:nth-child(2){flex:1}.rankrow span small{display:block;color:var(--muted);font-size:7px;margin-top:3px}.rankrow>b{font-size:8px;color:var(--green)}.toast{position:fixed;z-index:30;bottom:90px;left:50%;transform:translate(-50%,20px);opacity:0;background:#101d2d;border:1px solid var(--line);padding:11px 15px;border-radius:14px;font-size:9px;transition:.25s;white-space:nowrap;box-shadow:0 15px 40px #0009}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:390px){.quests{grid-template-columns:1fr}.quick-grid{gap:6px}.quick-grid button{padding:11px 8px}.quick-grid small{font-size:6px}}

/* PREMIUM PROFILE */
.profile.premium-card{position:relative;overflow:hidden;margin-top:4px;padding:22px 18px 18px;border-radius:30px;border:1px solid #ffffff12;background:linear-gradient(150deg,#101a2c,#080d19 72%);box-shadow:0 28px 80px #0009}.premium-card.is-premium{border-color:#42dfff45;background:radial-gradient(circle at 50% 8%,#42dfff18,transparent 30%),radial-gradient(circle at 80% 70%,#9275ff16,transparent 35%),linear-gradient(150deg,#101d31,#090c17)}.premium-card.is-premium:before{content:"";position:absolute;inset:0;border-radius:30px;padding:1px;background:linear-gradient(130deg,#42dfff77,#9275ff33,#42dfff22);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.premium-top{display:flex;justify-content:space-between;align-items:center;color:#75849c;font-size:8px;letter-spacing:1.5px;font-weight:800}.premium-pill{display:none;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#42dfff10;border:1px solid #42dfff35;color:var(--cyan);box-shadow:0 0 22px #42dfff15}.profile-ring{position:relative;width:112px;height:112px;margin:18px auto 12px;border-radius:50%;padding:4px;background:conic-gradient(from 30deg,var(--cyan),var(--violet),#fff,var(--cyan));box-shadow:0 0 35px #42dfff25}.profile-ring:after{content:"";position:absolute;inset:-7px;border:1px solid #42dfff18;border-radius:50%;animation:spin 8s linear infinite}.avatar.big{width:104px;height:104px;border-radius:50%;font-size:42px;background:radial-gradient(circle at 35% 25%,#244c70,#0b1220);border:3px solid #080d19;box-shadow:inset 0 0 30px #42dfff12}.crown{position:absolute;bottom:-2px;right:2px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#0c1423;border:1px solid #42dfff55;color:var(--cyan);font-size:12px}.premium-card .eyebrow{text-align:center}.premium-card h2{text-align:center;margin:7px 0 1px;font-size:23px}.profile-title{text-align:center;color:#9aa9c0;font-size:10px}.profile-level{display:flex;justify-content:center;gap:12px;margin:10px 0;color:#dfe7f4;font-size:9px}.profile-level span{color:var(--cyan)}.mastery-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:15px}.mastery-strip>div{padding:10px 5px;text-align:center;border:1px solid #ffffff0c;background:#ffffff04;border-radius:14px}.mastery-strip b{display:block;font-size:15px}.mastery-strip small{color:#6f7d93;font-size:7px}.premium-unlock{display:flex;flex-direction:column;gap:5px;margin-top:12px;padding:12px;border-radius:16px;background:linear-gradient(100deg,#42dfff0b,#9275ff0b);border:1px dashed #42dfff27}.premium-unlock b{font-size:10px}.premium-unlock span{font-size:8px;color:#73829a}.premium-unlock button{align-self:flex-start;border:0;background:transparent;color:var(--cyan);font-size:8px;padding:4px 0}.skill-list{display:grid;gap:8px}.skill-list>div{display:flex;justify-content:space-between;align-items:center;padding:13px;border:1px solid var(--line);border-radius:15px;background:#ffffff04;font-size:10px}.skill-list b{font-size:8px;color:var(--cyan)}.premium-modal{text-align:center;padding:12px 4px}.premium-icon{font-size:48px;margin:4px 0 10px;filter:drop-shadow(0 0 20px #42dfff66)}.premium-modal h2{margin:8px 0;font-size:21px}.premium-modal p{color:#8795ab;font-size:10px;line-height:1.9}.premium-features{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0;text-align:right}.premium-features div{padding:12px;border:1px solid #ffffff0d;border-radius:15px;background:#ffffff04}.premium-features b{font-size:9px}.premium-features small{display:block;color:#74839a;font-size:7px;margin-top:4px}.premium-cta{width:100%;padding:13px;border:1px solid #42dfff35;border-radius:14px;background:#42dfff0c;color:var(--cyan);font-weight:800}@keyframes spin{to{transform:rotate(360deg)}}
/* PREMIUM V2 */
.premium-extra{display:none;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}.premium-extra>div{padding:10px 5px;text-align:center;border:1px solid #42dfff20;background:linear-gradient(145deg,#42dfff08,#9275ff08);border-radius:14px;box-shadow:inset 0 0 18px #42dfff06}.premium-extra span{display:block;font-size:15px;margin-bottom:4px}.premium-extra b{display:block;font-size:7px;color:#eafcff;letter-spacing:.7px}.premium-extra small{display:block;color:#70819a;font-size:6px;margin-top:3px}.premium-card.is-premium .profile-title{color:#c9f9ff;text-shadow:0 0 12px #42dfff44}.premium-card.is-premium .profile-level b{color:#fff;text-shadow:0 0 14px #42dfff33}.premium-card.is-premium .mastery-strip>div{border-color:#42dfff18;background:linear-gradient(145deg,#42dfff08,#ffffff03)}.premium-card.is-premium .mastery-strip b{color:#eafcff;text-shadow:0 0 12px #42dfff33}.premium-card.is-premium .crown{box-shadow:0 0 18px #42dfff44}.premium-card.is-premium .profile-ring{animation:premiumPulse 2.8s ease-in-out infinite}.premium-card.is-premium .premium-orb{display:block}.premium-orb{display:none;position:absolute;width:120px;height:120px;border-radius:50%;filter:blur(35px);pointer-events:none;opacity:.3}.orb1{background:#42dfff;top:-55px;left:-45px}.orb2{background:#9275ff;bottom:-65px;right:-45px}@keyframes premiumPulse{50%{filter:drop-shadow(0 0 18px #42dfff66);transform:scale(1.025)}}

/* V8.6 profile evolution */
.profile-card, .premium-card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.premium-card.rank-rookie{--rank-glow:rgba(148,163,184,.18)}
.premium-card.rank-coder{--rank-glow:rgba(34,211,238,.22)}
.premium-card.rank-hacker{--rank-glow:rgba(59,130,246,.24)}
.premium-card.rank-master{--rank-glow:rgba(168,85,247,.28)}
.premium-card.rank-legend{--rank-glow:rgba(250,204,21,.32)}
.premium-card.is-premium{box-shadow:0 0 0 1px rgba(34,211,238,.22),0 24px 80px var(--rank-glow,rgba(34,211,238,.18))}
.premium-card.is-premium .profile-ring{filter:drop-shadow(0 0 18px rgba(34,211,238,.48))}

/* V9.5 VISUAL EVOLUTION — independent vector assets, no sprite slicing */
.brand .mark{padding:0;overflow:hidden;border:0;background:transparent;box-shadow:0 0 24px #42dfff18}
.brand .mark img{width:100%;height:100%;display:block}
.hero{padding:20px 20px 20px 16px;min-height:158px}
.hero-rank-art{width:78px;flex:0 0 78px;display:grid;place-items:center;order:2;filter:drop-shadow(0 0 18px #42dfff22)}
.hero-rank-art img{width:72px;height:72px;display:block}
.hero-copy{order:1}
.quick-grid button>span{width:34px;height:34px;display:grid;place-items:center}
.quick-grid button>span img{width:32px;height:32px;display:block;filter:drop-shadow(0 0 8px #42dfff18)}
.quick-grid button{position:relative;overflow:hidden;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.quick-grid button:after{content:"";position:absolute;inset:auto -30px -45px;height:80px;background:radial-gradient(circle,#42dfff16,transparent 65%);pointer-events:none}
.quick-grid button:hover{transform:translateY(-2px);border-color:#42dfff30;background:#42dfff08}
.profile-rank-badge{position:absolute;width:42px;height:42px;right:-5px;bottom:3px;z-index:4;filter:drop-shadow(0 0 12px #42dfff55)}
.premium-pill img{width:17px;height:17px;vertical-align:middle;filter:drop-shadow(0 0 6px #42dfff66)}
.profile.premium-card.is-premium .profile-rank-badge{animation:badgeFloat 3s ease-in-out infinite}
.premium-card.is-premium .profile-ring:before{content:"";position:absolute;inset:-13px;border:1px dashed #42dfff22;border-radius:50%;animation:spin 14s linear infinite reverse}
@keyframes badgeFloat{50%{transform:translateY(-3px) rotate(4deg)}}
@media(max-width:390px){.hero-rank-art{width:64px;flex-basis:64px}.hero-rank-art img{width:60px;height:60px}.hero{padding-right:14px}}

/* LESSON MEDIA (image / video / note) */
.lesson-media{margin:12px 0;border-radius:15px;overflow:hidden;border:1px solid #ffffff08;background:#04080e}
.lesson-media img{display:block;width:100%;height:auto}
.lesson-media video{display:block;width:100%;max-height:260px;background:#000}
.lesson-note{display:flex;align-items:center;gap:6px;margin:10px 0;padding:11px 14px;border-radius:13px;border:1px solid #42dfff30;background:#42dfff0c;color:var(--cyan);font-size:10px;text-decoration:none;width:fit-content}