:root{--ink:#111827;--muted:#667085;--line:#d7dee8;--paper:#fff;--bg:#eefdf8;--brand:#0f766e;--brand2:#2563eb;--sun:#facc15;--rose:#f43f5e;--shadow:0 18px 44px rgba(17,24,39,.12)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:linear-gradient(180deg,#e8fff8,#eef6ff 54%,#fff7dc)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.app{width:min(1240px,100%);margin:0 auto;padding:12px clamp(12px,3vw,28px) 34px}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(232,255,248,.92);backdrop-filter:blur(14px);padding:10px 0}.brand{border:0;background:transparent;display:flex;align-items:center;gap:10px;text-align:left;color:var(--ink);padding:6px;border-radius:12px}.mark{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--sun));color:#052e2b;font-weight:900}.brand strong,.brand small{display:block}.brand small{color:var(--muted);font-size:12px}.nav{display:flex;gap:6px;overflow:auto}.nav-btn,.ghost-btn{border:1px solid var(--line);background:#fff;border-radius:12px;min-height:44px;padding:0 14px;font-weight:900;color:var(--ink)}.nav-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.view{display:none}.view.active{display:block}.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end;margin:16px 0;padding:24px;border-radius:8px;background:linear-gradient(135deg,#dffcf2,#e4edff 58%,#fff0c2);border:1px solid rgba(17,24,39,.08)}.eyebrow{margin:0 0 6px;color:var(--brand);font-size:12px;text-transform:uppercase;font-weight:900;letter-spacing:.08em}h1,h2{margin:0;line-height:1.05;letter-spacing:0}h1{font-size:clamp(34px,6vw,66px)}h2{font-size:clamp(26px,4vw,44px)}.lead{margin:10px 0 0;color:var(--muted);font-size:clamp(16px,2.2vw,20px);line-height:1.45}.score-card{min-width:150px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:16px;text-align:center}.score-card span{display:block;color:var(--muted);font-weight:900;font-size:12px}.score-card strong{font-size:46px;color:#ca8a04}
.track-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.track-card,.section-head,.workspace,.ranking-layout,.apk-grid,.apk-meta{background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.track-card{padding:16px;display:grid;gap:10px}.track-card strong{font-size:20px}.track-card small{color:var(--muted);line-height:1.4}.track-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;font-weight:900}.track-progress{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}.track-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));width:0}.course-map-wrap{margin-top:16px}.section-head.compact{padding:18px}.course-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px}.course-row{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;display:grid;gap:6px}.course-row span{color:var(--muted);font-size:12px;font-weight:900}.primary-btn{border:0;background:var(--brand);color:#ecfdf5;border-radius:12px;min-height:48px;padding:0 16px;font-weight:900}.workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;margin-top:16px;padding:16px}.mission-list{border-right:1px solid var(--line);padding-right:14px;max-height:calc(100vh - 150px);overflow:auto}.mission-list>div{display:grid;gap:10px}.mission-group{display:grid;gap:6px}.mission-group>strong{font-size:12px;text-transform:uppercase;color:var(--muted)}.mission-tab{border:1px solid var(--line);background:#fff;border-radius:8px;padding:12px;text-align:left;font-weight:900}.mission-tab.active{border-color:var(--brand);background:#ecfdf5}.mission-panel{min-width:0}.mission-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.activity{display:grid;gap:14px}.challenge{display:grid;gap:10px;background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:14px}.answer-row{display:flex;gap:8px;flex-wrap:wrap}.answer-row input,.answer-row select,.profile-form input,.profile-form select,.editor textarea{border:1px solid var(--line);border-radius:12px;background:#fff;min-height:48px;padding:10px}.answer-row input{min-width:160px;flex:1}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.choice{border:1px solid var(--line);background:#fff;border-radius:8px;min-height:82px;padding:12px;font-weight:900}.feedback{min-height:46px;background:#eefdf6;color:#07543f;border-radius:8px;padding:12px;font-weight:900}.code{background:#111827;color:#e5e7eb;border-radius:8px;padding:14px;white-space:pre-wrap;line-height:1.5;overflow:auto}.editor{display:grid;grid-template-columns:1fr 1fr;gap:12px}.editor textarea{min-height:220px;font-family:Consolas,monospace}.preview{border:1px solid var(--line);border-radius:8px;background:#fff;min-height:220px;padding:14px;overflow:auto}.sql-table{width:100%;border-collapse:collapse;background:#fff}.sql-table th,.sql-table td{border:1px solid var(--line);padding:8px;text-align:left}.section-head{padding:22px;margin-top:16px}.ranking-layout{display:grid;grid-template-columns:310px 1fr;gap:16px;margin-top:14px;padding:16px}.profile-form{display:grid;gap:12px;align-content:start}.profile-form label{display:grid;gap:6px;color:var(--muted);font-weight:900}.ranking-list{display:grid;gap:8px}.rank-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px}.rank-pos{width:38px;height:38px;border-radius:50%;background:#fef3c7;display:grid;place-items:center;font-weight:900}.project-grid,.apk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}.project-card,.apk-grid article{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;display:grid;gap:8px}.apk-meta{padding:16px;white-space:pre-wrap;overflow:auto;margin-top:14px;background:#fff}.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(80px);opacity:0;background:#111827;color:#fff;border-radius:999px;padding:12px 16px;font-weight:900;transition:.2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:800px){.topbar{align-items:flex-start;flex-direction:column}.nav{width:100%}.nav-btn{flex:1;padding-inline:10px}.hero{grid-template-columns:1fr}.score-card{width:100%}.workspace{grid-template-columns:1fr}.mission-list{border-right:0;border-bottom:1px solid var(--line);padding:0 0 12px}.editor{grid-template-columns:1fr}.ranking-layout{grid-template-columns:1fr}}