:root{--bg:#071226;--panel:#0d1b32;--panel2:#102442;--line:#20395e;--text:#edf3ff;--muted:#9aaccb;--purple:#7257ff;--blue:#35b9f3;--green:#55d6a8;--shadow:0 20px 60px #0003}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:14px}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:#b8adff}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #7d6aff;outline-offset:2px}[hidden]{display:none!important}.auth-layout{min-height:100vh;display:grid;grid-template-columns:1.03fr .97fr;background:radial-gradient(ellipse at 10% 10%,#162c55 0,transparent 50%),var(--bg)}.auth-art{padding:45px clamp(25px,6vw,95px);display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;border-right:1px solid #ffffff0b;background:linear-gradient(145deg,#0b1c36dd,#09152be8)}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-weight:800;font-size:18px;letter-spacing:-.5px}.brand small{display:block;color:#91a7ca;font-size:10px;font-weight:500;letter-spacing:1px;margin-top:5px}.brand-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#7656ff,#2a9fe7);font-size:17px;box-shadow:0 8px 30px #6248ff44}.art-copy{max-width:570px;padding:45px 0}.eyebrow{display:inline-block;color:#9f90ff;background:#6c55ff18;border:1px solid #7867ff44;padding:8px 12px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.6px}.art-copy h1{font-size:clamp(36px,4vw,59px);letter-spacing:-2px;line-height:1.12;margin:22px 0}.art-copy p{font-size:15px;line-height:1.8;color:#a8b9d6;max-width:460px}.language-orbs{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}.language-orbs span{padding:11px 13px;border:1px solid #2a4165;background:#102441;border-radius:12px;font-size:11px}.code-decoration{padding:19px 22px;border:1px solid #1b3456;background:#09172c;border-radius:15px;color:#91baff;font:12px/2 ui-monospace,monospace}.code-green{color:#5edcb1}.auth-side{display:grid;place-items:center;padding:35px 24px}.auth-card{width:min(100%,435px);padding:30px;background:#0d1b32;border:1px solid #20395e;border-radius:22px;box-shadow:var(--shadow)}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;background:#08162a;border-radius:12px;margin-bottom:27px}.tab{border:0;border-radius:9px;padding:12px;color:#9aaccb;background:transparent;font-weight:700;font-size:12px}.tab.active{background:#263b63;color:white}.auth-card h2{font-size:25px;letter-spacing:-.7px;margin:0 0 8px}.muted{color:var(--muted);font-size:12px;line-height:1.7}.form-stack{display:grid;gap:15px;margin-top:24px}.form-stack label{display:grid;gap:8px;color:#cbd8ef;font-size:11px;font-weight:700}.form-stack input,.field,.search-input,.chat-form input,.chat-form textarea,select{width:100%;background:#08162b;border:1px solid #263f63;color:white;border-radius:10px;padding:13px;outline:none}.form-stack input:focus,.field:focus,select:focus{border-color:#7864ff}.btn{border:1px solid #2b4265;background:#142846;color:#e7eeff;padding:12px 15px;border-radius:10px;font-weight:700;font-size:11px;transition:.2s}.btn:hover,.quick-card:hover,.choice-card:hover{transform:translateY(-1px);border-color:#7867ff}.btn.primary{border-color:transparent;background:linear-gradient(105deg,#7054ff,#3e8ce8);color:white;box-shadow:0 8px 22px #6248ff25}.btn.full{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:4px}.btn.small{padding:9px 11px;font-size:10px}.text-btn{border:0;background:none;color:#b7aaff;font-weight:700}.form-note,.auth-privacy{font-size:11px;color:#93a6c7;margin-top:20px}.auth-privacy{border-top:1px solid #20395e;padding-top:17px;line-height:1.7}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}.sidebar{height:100vh;position:sticky;top:0;background:#09162a;border-right:1px solid #1a3152;padding:25px 15px;display:flex;flex-direction:column;z-index:20}.side-brand{padding:0 10px 28px}.side-brand .brand-mark{width:39px;height:39px}.side-nav{display:grid;gap:5px}.nav-item{width:100%;display:flex;align-items:center;gap:13px;border:1px solid transparent;background:transparent;color:#9caecc;text-align:left;border-radius:10px;padding:12px;font-size:11px;font-weight:600}.nav-item>span{width:20px;text-align:center;font-size:17px;color:#9aabce}.nav-item.active{background:linear-gradient(90deg,#4736a933,#18345588);border-color:#5e53a544;color:white}.nav-item.active>span{color:#b5a8ff}.sidebar-bottom{margin-top:auto}.sidebar-tip{padding:15px;background:#102441;border:1px solid #223c60;border-radius:12px;margin:15px 0}.sidebar-tip span{font-size:20px}.sidebar-tip b,.sidebar-tip small{display:block}.sidebar-tip b{font-size:11px;margin:10px 0 6px}.sidebar-tip small{color:var(--muted);font-size:10px}.logout{color:#efb7d0}.main-area{min-width:0}.topbar{height:75px;border-bottom:1px solid #1c3354;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:#08152af2;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.breadcrumb{color:#8fa3c4;font-size:11px}.breadcrumb span{padding:0 10px;color:#465b7c}.breadcrumb b{color:#e8efff}.top-actions{display:flex;align-items:center;gap:18px}.streak{font-size:11px;color:#ffd17b}.avatar{width:38px;height:38px;border:1px solid #5c51ac;background:linear-gradient(135deg,#7755ff,#248bd4);color:white;border-radius:13px;font-weight:800;overflow:hidden;background-size:cover;background-position:center}.mobile-menu{display:none;background:transparent;border:0;color:white;font-size:21px}.page-content{padding:31px 36px;max-width:1500px;margin:0 auto;min-height:calc(100vh - 125px)}.footer{padding:18px 36px;border-top:1px solid #1c3354;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;color:#6f84a6;font-size:10px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px}.section-head h1{font-size:26px;margin:0 0 8px;letter-spacing:-.8px}.section-head p{font-size:12px;color:var(--muted);margin:0;line-height:1.7}.welcome-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.welcome-row h1{font-size:27px;letter-spacing:-1px;margin:0 0 8px}.welcome-row p{color:var(--muted);font-size:12px;margin:0;line-height:1.7}.hero-banner{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:20px;padding:25px 27px;border:1px solid #2b3d75;border-radius:18px;background:radial-gradient(circle at 82% 15%,#6148d755,transparent 32%),linear-gradient(115deg,#15294a,#161d43);margin-bottom:22px;overflow:hidden}.hero-banner h2{font-size:22px;line-height:1.3;letter-spacing:-.6px;margin:12px 0}.hero-banner p{color:#afc0df;font-size:11px;line-height:1.7;max-width:550px}.hero-art{min-height:150px;display:grid;place-items:center;position:relative}.hero-art .code-window{width:min(100%,300px);transform:rotate(3deg);border:1px solid #6b69ba66;background:#08172ee8;border-radius:12px;padding:16px;font:11px/1.9 ui-monospace,monospace;color:#a7caff;box-shadow:0 20px 35px #0003}.code-window .green{color:#5ce0ad}.float-chip{position:absolute;right:4%;top:4%;background:#6b4aff;border:1px solid #ad9fff;border-radius:11px;padding:9px 12px;font-size:10px;animation:float 4s ease-in-out infinite}.float-chip.two{left:1%;right:auto;top:auto;bottom:3%;background:#123d55;border-color:#2d8ca4;animation-delay:-2s}@keyframes float{50%{transform:translateY(-8px)}}.quote{font-size:11px;color:#b4a9ff;margin-top:12px;min-height:17px}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:20px 0}.stat-card{padding:17px;background:#0d1b32;border:1px solid #20395e;border-radius:14px;display:flex;align-items:center;gap:13px;min-width:0}.stat-icon{width:43px;height:43px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:#182e54;font-size:20px}.stat-card small{font-size:10px;color:var(--muted);display:block;margin-bottom:6px}.stat-card strong{font-size:23px;letter-spacing:-.7px}.dashboard-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:17px}.panel{background:#0d1b32;border:1px solid #20395e;border-radius:15px;padding:20px;min-width:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.panel-heading h2{font-size:14px;margin:0}.panel-heading small{color:var(--muted);font-size:10px}.progress{height:7px;border-radius:99px;background:#1d3153;overflow:hidden}.progress span{height:100%;display:block;background:linear-gradient(90deg,#684bff,#45c8f2);border-radius:99px}.progress-row{display:flex;align-items:center;gap:10px}.progress-row .progress{flex:1}.progress-row small{color:#aebce0;font-size:10px}.path-list{display:grid;gap:10px}.path-item{display:flex;align-items:center;gap:12px;border:1px solid #1c3558;background:#0b1a31;border-radius:12px;padding:12px}.path-dot{width:35px;height:35px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:#183d55;color:#55e0b1;font-weight:800}.path-item.locked .path-dot{background:#172844;color:#788eaf}.path-item b{font-size:11px;display:block;margin-bottom:5px}.path-item small{font-size:10px;color:var(--muted)}.path-status{margin-left:auto;color:#52d8ad;font-size:10px}.path-item .btn{margin-left:auto}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.quick-card{background:#0a1930;border:1px solid #1d385e;border-radius:12px;padding:15px;text-align:left;color:white;transition:.2s}.quick-card .quick-icon{font-size:22px;margin-bottom:12px}.quick-card b{display:block;font-size:11px;margin-bottom:6px}.quick-card small{color:var(--muted);font-size:10px;line-height:1.5}.tree{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 5px;overflow-x:auto}.tree-node{position:relative;background:#142b4c;border:1px solid #3a5680;border-radius:12px;padding:11px 15px;text-align:center;min-width:170px;font-size:11px}.tree-node.root{background:linear-gradient(110deg,#4936a5,#1e5888);border-color:#8c7bff;font-weight:800}.tree-children{display:flex;justify-content:center;align-items:flex-start;gap:14px;position:relative;flex-wrap:wrap}.tree-children:before{content:"";height:14px;border-left:1px solid #435d85;position:absolute;top:-14px}.tree-branch{display:flex;flex-direction:column;align-items:center;gap:10px}.tree-branch:before{content:"";height:12px;border-left:1px solid #435d85}.tree-leaf{background:#0a1a30;border:1px solid #24436a;border-radius:10px;padding:10px 12px;font-size:10px;min-width:115px;text-align:center}.tag{display:inline-flex;background:#273967;color:#c4caff;padding:5px 8px;border-radius:6px;font-size:9px;font-weight:700}.resource-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.search-input{max-width:320px}.resource-grid,.course-grid,.quiz-grid,.news-grid,.practice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.resource-card,.course-card,.news-card,.practice-card{padding:18px;display:flex;flex-direction:column;min-width:0;background:#0d1b32;border:1px solid #20395e;border-radius:14px}.resource-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}.resource-logo{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:17px;background:#182f55;color:#8dbaff;flex-shrink:0}.resource-card h3,.course-card h3,.news-card h3,.practice-card h3{font-size:13px;margin:0 0 8px}.resource-card p,.course-card p,.news-card p,.practice-card p{font-size:10px;color:var(--muted);line-height:1.7;margin:0 0 14px}.resource-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;margin-bottom:14px}.resource-card a{color:#b6a7ff;text-decoration:none;font-size:11px;font-weight:700}.course-banner{display:flex;justify-content:space-between;align-items:center;background:#152b52;border-radius:12px;padding:15px;margin-bottom:14px}.course-banner .big-emoji{font-size:32px}.course-card .progress{margin:12px 0}.course-card .btn{width:100%;margin-top:auto}.choice-card{background:#0c1d37;border:1px solid #203a61;color:white;border-radius:14px;padding:18px;text-align:left;min-height:125px;transition:.2s}.choice-card .choice-emoji{font-size:25px;display:block;margin-bottom:12px}.choice-card b{font-size:12px;display:block;margin-bottom:7px}.choice-card small{font-size:10px;color:var(--muted);line-height:1.6}.choice-card.selected{border-color:#8b68ff;background:#211e50;box-shadow:0 0 0 1px #8b68ff44}.quiz-actions{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.quiz-step{font-size:11px;color:var(--muted)}.lesson-detail{display:grid;grid-template-columns:1fr 1fr;gap:15px}.lesson-copy{line-height:1.8;color:#c0cee6;font-size:12px}.lesson-code{background:#08162b;border:1px solid #243d60;border-radius:10px;padding:15px;white-space:pre-wrap;overflow:auto;color:#91e5c2;font:12px/1.7 ui-monospace,monospace}.link-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.task-list{display:grid;gap:9px}.task{display:flex;align-items:flex-start;gap:12px;padding:13px;border:1px solid #20395e;background:#0a1930;border-radius:11px}.task input{accent-color:#7458ff;width:17px;height:17px;margin-top:2px}.task b{font-size:11px;display:block;margin-bottom:5px}.task small{font-size:10px;color:var(--muted);line-height:1.5}.task.done{border-color:#276b64;background:#0b292f}.task.done b{text-decoration:line-through;color:#83d8be}.news-hero{padding:22px;background:linear-gradient(115deg,#1c2f59,#25204e);border:1px solid #514c92;border-radius:15px;margin-bottom:18px;min-height:150px}.news-hero h2{font-size:20px;margin:12px 0}.news-hero p{font-size:11px;line-height:1.7;color:#c1cbe5;max-width:850px}.editor-layout{display:grid;grid-template-columns:1fr 1fr;gap:15px}.editor-box,.output-box{border:1px solid #203a60;background:#08162b;border-radius:13px;overflow:hidden}.editor-top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#102442;border-bottom:1px solid #203a60;font-size:11px}.editor-box textarea{display:block;width:100%;min-height:220px;background:#08162b;color:#8de0ff;border:0;padding:17px;resize:vertical;font-family:ui-monospace,monospace;font-size:12px;line-height:1.8;outline:none}.output-content{min-height:220px;padding:17px;font-family:ui-monospace,monospace;font-size:12px;line-height:1.8;color:#8de0b9;white-space:pre-wrap;overflow-wrap:anywhere}.editor-note{font-size:10px;color:var(--muted);line-height:1.7;margin-top:13px}.chat-box{max-width:900px;margin:auto;border:1px solid #20395e;background:#0b1b34;border-radius:17px;overflow:hidden}.chat-header{padding:18px;border-bottom:1px solid #20395e;display:flex;align-items:center;gap:12px}.bot-avatar{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:#243d75;font-size:22px}.chat-header b{font-size:12px}.chat-header small{display:block;color:#55d6a8;font-size:10px;margin-top:5px}.chat-messages{padding:22px;display:grid;gap:14px;min-height:250px;max-height:440px;overflow:auto}.message{max-width:88%;padding:13px 15px;border-radius:12px;background:#132b4e;color:#dce8ff;font-size:12px;line-height:1.7;white-space:pre-wrap}.message.user{justify-self:end;background:#4934a4}.chat-form{display:flex;gap:10px;padding:14px;border-top:1px solid #20395e}.chat-form input{flex:1;min-width:0}.profile-grid{display:grid;grid-template-columns:290px 1fr;gap:18px}.profile-card{text-align:center}.profile-large{width:85px;height:85px;border-radius:25px;display:grid;place-items:center;background:linear-gradient(135deg,#7655ff,#267dc8);font-size:25px;font-weight:800;margin:8px auto 15px;overflow:hidden;background-size:cover;background-position:center}.profile-card h2{font-size:17px;margin:0 0 6px}.profile-card p{font-size:11px;color:var(--muted)}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.profile-stats div{background:#0a1930;padding:12px 5px;border-radius:10px}.profile-stats b{display:block;font-size:17px}.profile-stats small{font-size:9px;color:var(--muted)}.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.achievement{border:1px solid #20395e;background:#0b1b34;border-radius:12px;text-align:center;padding:19px 10px}.achievement span{font-size:29px;display:block;margin-bottom:10px}.achievement b{font-size:11px;display:block;margin-bottom:5px}.achievement small{font-size:9px;color:var(--muted)}.leader-row{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid #1d3454}.leader-row:last-child{border-bottom:0}.rank{width:28px;font-weight:800;color:#a7b8d8}.leader-avatar{width:38px;height:38px;border-radius:12px;background:#2b3f6a;display:grid;place-items:center;background-size:cover;background-position:center;flex-shrink:0}.leader-name{flex:1;font-size:11px;font-weight:700}.leader-name small{display:block;color:var(--muted);font-weight:500;font-size:9px;margin-top:4px}.leader-xp{font-size:11px;color:#ffd17b;font-weight:800}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.admin-form{display:grid;gap:10px}.admin-form label{font-size:10px;color:var(--muted);display:grid;gap:6px}.admin-form textarea{min-height:90px;resize:vertical}.admin-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #20395e}.admin-item:last-child{border-bottom:0}.admin-item div{flex:1;min-width:0}.admin-item b{font-size:11px;display:block}.admin-item small{font-size:10px;color:var(--muted)}.modal-backdrop{position:fixed;inset:0;background:#020813d9;z-index:80;display:grid;place-items:center;padding:20px;overflow:auto}.modal{width:min(760px,100%);max-height:90vh;overflow:auto;background:#0d1b32;border:1px solid #314975;border-radius:18px;padding:24px;box-shadow:var(--shadow)}.modal h2{margin:0 0 8px;font-size:22px}.modal p{color:var(--muted);font-size:11px;line-height:1.7}.modal-close{float:right;background:#172b49;border:1px solid #30466a;border-radius:8px;color:white;padding:7px 11px}.toast{position:fixed;top:18px;right:18px;z-index:99;background:#183b50;border:1px solid #2f8e85;color:#e8fff9;padding:13px 18px;border-radius:12px;box-shadow:var(--shadow);font-size:12px;max-width:min(90vw,360px);opacity:0;transform:translateY(-10px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translateY(0)}.empty-state{border:1px dashed #2b4568;border-radius:14px;padding:35px;text-align:center;color:var(--muted);font-size:12px;grid-column:1/-1}.frozen{display:inline-flex;align-items:center;gap:7px;color:#9eb4d5;background:#172843;border:1px solid #2a4264;border-radius:8px;padding:7px 9px;font-size:10px}.frozen span{animation:freeze 2s infinite}@keyframes freeze{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@media(max-width:1100px){.app-shell{grid-template-columns:220px minmax(0,1fr)}.page-content{padding:25px 22px}.topbar{padding:0 22px}.stat-grid{grid-template-columns:repeat(2,1fr)}.resource-grid,.course-grid,.news-grid,.practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-art{padding-left:4vw;padding-right:4vw}.dashboard-grid{grid-template-columns:1fr}.hero-banner{grid-template-columns:1fr .6fr}}
@media(max-width:760px){.auth-layout{grid-template-columns:1fr}.auth-art{min-height:auto;padding:25px 24px 10px}.art-copy{padding:32px 0 18px}.art-copy h1{font-size:35px;letter-spacing:-1.2px}.art-copy p{font-size:13px}.code-decoration{display:none}.auth-side{padding:20px 16px 32px}.auth-card{padding:23px}.app-shell{display:block}.sidebar{position:fixed;z-index:30;left:-270px;top:0;width:250px;transition:left .25s;box-shadow:var(--shadow)}.sidebar.open{left:0}.mobile-menu{display:block}.topbar{height:62px;padding:0 16px;gap:12px}.breadcrumb{flex:1;font-size:10px}.top-actions{gap:9px}.page-content{padding:22px 15px}.welcome-row{flex-direction:column;align-items:flex-start}.welcome-row h1{font-size:24px}.stat-grid{gap:9px}.stat-card{padding:13px;gap:9px}.stat-icon{width:36px;height:36px}.stat-card strong{font-size:19px}.hero-banner{grid-template-columns:1fr;padding:20px}.hero-art{min-height:130px}.resource-grid,.course-grid,.quiz-grid,.news-grid,.practice-grid,.lesson-detail,.editor-layout,.profile-grid,.admin-grid{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}.achievement-grid{grid-template-columns:repeat(2,1fr)}.footer{padding:16px;gap:9px}.chat-form{flex-direction:column}.tree-children{gap:7px}.tree-node{min-width:145px}.tree-leaf{min-width:95px}.modal{padding:18px}.profile-stats{gap:5px}}