*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } :root{ --pond-deep:#1E1B4B;--pond-mid:#4338CA;--pond-teal:#6D28D9;--pond-sky:#A5B4FC; --pond-lily:#FFC93C;--duck-yellow:#F2A900;--duck-orange:#E8622C;--duck-brown:#5C3B18; --reed:#C99A5B;--mud:#44403C;--foam:#F0EDFF;--ripple:#E0D9FA; --bg:#F1EEFA;--surface:#FFFFFF;--surface-2:#E9E4F9;--border:#D3C7F0; --border-strong:#AC9AE0;--text:#1A1638;--text-2:#3D3670;--text-3:#726A9E; --accent:var(--pond-mid);--accent-dk:var(--pond-deep);--accent-light:#DEDAFC; --green:#0F7A3D;--green-light:#C9F5D9;--green-dk:#0D3B1F; --red:#E11D2E;--red-light:#FBD5D5;--red-dk:#7F1D1D; --yellow:var(--duck-yellow);--yellow-light:#FDECC5; --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px; --shadow-xs:0 1px 3px rgba(26,22,56,.10);--shadow-sm:0 2px 10px rgba(26,22,56,.14); --shadow-md:0 4px 20px rgba(26,22,56,.18);--shadow-lg:0 8px 36px rgba(26,22,56,.24); /* "Ink" variables: use these (not the raw --pond-* colors) for TEXT that needs to read as "brand-colored" — headings, labels, stat values, the selected-answer state, etc. The raw --pond-deep/-mid/-teal colors stay fixed dark shades because they're also used as BUTTON/PILL BACKGROUNDS with white text on top; darkening or lightening them to fix text contrast would break those buttons instead. These -ink variables give text its own independently-tunable color per theme. */ --heading-ink:var(--pond-deep);--accent-ink:var(--pond-mid);--teal-ink:var(--pond-teal); } body.dark{ --bg:#0F0D1A;--surface:#1C1830;--surface-2:#282143;--border:#443A72;--border-strong:#5B4D96; --text:#F0EDFF;--text-2:#C9BFEE;--text-3:#8F84BC;--accent:#8B7FF0;--accent-dk:#4338CA; --accent-light:#282143;--green:#4ADE80;--green-light:#132A1C;--green-dk:#22C55E; --red:#F87171;--red-light:#2E1620;--red-dk:#DC2626;--yellow-light:#332905; --shadow-xs:0 1px 3px rgba(0,0,0,.4);--shadow-sm:0 2px 10px rgba(0,0,0,.5); --shadow-md:0 4px 20px rgba(0,0,0,.6);--shadow-lg:0 8px 36px rgba(0,0,0,.7); /* Bright, high-contrast counterparts of the ink variables above — this is the actual fix for the "selected answer text is unreadable in dark mode" bug: --pond-deep (#1E1B4B, near-black) was being used as TEXT color on top of --accent-light (#282143 in dark mode, also near-black), which is dark-on-dark and unreadable. Every place that used to read color:var(--pond-deep/-mid/-teal) now reads color:var(--heading-ink) / var(--accent-ink) / var(--teal-ink) instead, so dark mode gets its own bright values here while light mode is untouched. */ --heading-ink:#E9E5FB;--accent-ink:#A5B4FC;--teal-ink:#C4B5FD; } body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5;transition:background .3s,color .3s} .page{display:none;min-height:100vh;flex-direction:column} .page.active{display:flex;animation:pageEnter .32s cubic-bezier(.22,1,.36,1)} @keyframes pageEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} body::before{content:none} .page{position:relative;z-index:1} #page-auth{align-items:center;justify-content:center;padding:2rem;background:linear-gradient(160deg,var(--foam) 0%,var(--ripple) 45%,var(--accent-light) 100%)} body.dark #page-auth{background:linear-gradient(160deg,var(--bg) 0%,var(--surface-2) 60%,var(--accent-light) 100%)} .auth-box{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-xl);padding:2.5rem;width:100%;max-width:400px;box-shadow:var(--shadow-lg)} .auth-logo{text-align:center;margin-bottom:2rem} .auth-logo .duck{width:84px;height:84px;object-fit:contain;display:block;margin:0 auto .5rem} @keyframes bobFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}} .auth-logo h1{font-family:'Space Grotesk',sans-serif;font-size:1.75rem;font-weight:900;letter-spacing:-.03em;color:var(--heading-ink)} body.dark .auth-logo h1{color:var(--duck-yellow)} .auth-logo p{color:var(--text-3);font-size:.8125rem;margin-top:.25rem;font-weight:600} .auth-tabs{display:flex;background:var(--surface-2);border-radius:var(--radius-sm);padding:4px;margin-bottom:1.5rem;gap:4px} .auth-tab{flex:1;padding:.5rem;border:none;background:transparent;border-radius:8px;font-family:'Space Grotesk',sans-serif;font-size:.875rem;font-weight:800;color:var(--text-3);cursor:pointer;transition:all .18s} .auth-tab.active{background:var(--surface);color:var(--heading-ink);box-shadow:var(--shadow-xs)} body.dark .auth-tab.active{color:var(--duck-yellow)} .auth-form{display:flex;flex-direction:column;gap:.875rem} .field label{display:block;font-size:.75rem;font-weight:700;color:var(--text-2);margin-bottom:.375rem;font-family:'Space Grotesk',sans-serif;letter-spacing:.02em;text-transform:uppercase} .field input{width:100%;padding:.75rem 1rem;border:2px solid var(--border);border-radius:var(--radius-sm);font-family:'Inter',sans-serif;font-size:.9rem;color:var(--text);outline:none;transition:all .18s;background:var(--surface)} .field input:focus{border-color:var(--pond-mid);box-shadow:0 0 0 4px rgba(76,111,255,.16)} .field input.error{border-color:var(--red)} .err-msg{font-size:.75rem;color:var(--red);display:none;margin-top:.25rem;font-weight:600} .btn{border:none;border-radius:var(--radius-md);padding:.8rem 1.25rem;font-family:'Space Grotesk',sans-serif;font-size:.95rem;font-weight:800;cursor:pointer;transition:all .18s;width:100%;margin-top:.25rem;letter-spacing:.01em} .btn.primary{background:var(--pond-mid);color:white;box-shadow:0 5px 0 var(--pond-deep)} .btn.primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--pond-deep)} .btn.primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pond-deep)} .btn.ghost{background:transparent;color:var(--text-2);border:2px solid var(--border)} .btn.ghost:hover{background:var(--surface-2);border-color:var(--border-strong)} .btn.success{background:var(--pond-teal);color:white;box-shadow:0 5px 0 var(--pond-deep)} .btn.success:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--pond-deep)} .btn.success:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pond-deep)} .btn.danger{background:var(--red);color:white;box-shadow:0 5px 0 var(--red-dk)} .btn.danger:active{transform:translateY(3px);box-shadow:0 2px 0 var(--red-dk)} .btn.review-btn{background:linear-gradient(135deg,var(--duck-orange),#E05A1A);color:white;box-shadow:0 5px 0 #A03A10} .btn.review-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 #A03A10} .btn:disabled{opacity:.4;cursor:default;transform:none!important;box-shadow:none!important} .topbar{background:var(--surface);border-bottom:2.5px solid var(--border);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-xs)} .topbar-logo{display:flex;align-items:center;gap:.5rem} .topbar-logo .duck-sm{width:28px;height:28px;object-fit:contain;display:inline-block} @keyframes waddle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}} .topbar-logo span{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:900;letter-spacing:-.02em;color:var(--heading-ink)} body.dark .topbar-logo span{color:var(--duck-yellow)} .topbar-right{display:flex;align-items:center;gap:.625rem} .user-pill{display:flex;align-items:center;gap:.5rem;padding:.375rem .875rem .375rem .375rem;border-radius:30px;font-size:.8125rem;font-weight:700;color:var(--text-2);border:2px solid var(--border);background:var(--surface);cursor:pointer;transition:all .18s;font-family:'Space Grotesk',sans-serif} .user-pill:hover{border-color:var(--pond-teal);color:var(--heading-ink)} body.dark .user-pill:hover{color:var(--duck-yellow)} .avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--pond-teal),var(--pond-mid));color:white;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;font-family:'Space Grotesk',sans-serif} #page-home{background:var(--bg)} .home-content{padding:1.75rem 1.5rem 8rem;flex:1;max-width:660px;margin:0 auto;width:100%} .home-greeting{margin-bottom:1.5rem} .home-greeting h2{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:900;letter-spacing:-.02em;color:var(--heading-ink)} body.dark .home-greeting h2{color:var(--duck-yellow)} .home-greeting p{color:var(--text-3);font-size:.875rem;margin-top:.2rem;font-weight:600} .stats-row{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;margin-bottom:1.25rem} .stat-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);padding:1.125rem 1.25rem;box-shadow:var(--shadow-sm);transition:transform .2s;position:relative;overflow:hidden} .stat-card::after{content:'';position:absolute;bottom:-10px;right:-10px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,var(--accent-light),transparent 70%);pointer-events:none} .stat-card:hover{transform:translateY(-2px)} .stat-card .stat-val{font-family:'Space Grotesk',sans-serif;font-size:1.75rem;font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--accent-ink)} body.dark .stat-card .stat-val{color:var(--duck-yellow)} .stat-card .stat-lbl{font-size:.6875rem;color:var(--text-3);margin-top:.3rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em} .streak-days-row{display:flex;gap:.3rem;margin-top:.875rem} .sday{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem} .sday-dot{width:100%;aspect-ratio:1;border-radius:8px;background:var(--surface-2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.6rem;transition:all .2s} .sday-dot.active{background:var(--duck-yellow);border-color:var(--duck-orange);color:white} .sday-dot.today{background:var(--pond-mid);border-color:var(--pond-deep);color:white;box-shadow:0 0 0 3px rgba(76,111,255,.28)} .sday-lbl{font-size:.5rem;color:var(--text-3);font-weight:700;text-transform:uppercase} .section-label{font-family:'Space Grotesk',sans-serif;font-size:.7rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin:1.5rem 0 .75rem;display:flex;align-items:center;gap:.5rem} .section-label::after{content:'';flex:1;height:2px;background:var(--border);border-radius:2px} .courses-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem} .courses-grid .cc{animation:cardFadeUp .4s cubic-bezier(.22,1,.36,1) backwards} .courses-grid .cc:nth-child(1){animation-delay:.02s}.courses-grid .cc:nth-child(2){animation-delay:.06s} .courses-grid .cc:nth-child(3){animation-delay:.10s}.courses-grid .cc:nth-child(4){animation-delay:.14s} .courses-grid .cc:nth-child(5){animation-delay:.18s}.courses-grid .cc:nth-child(6){animation-delay:.22s} .courses-grid .cc:nth-child(7){animation-delay:.26s}.courses-grid .cc:nth-child(8){animation-delay:.30s} .courses-grid .cc:nth-child(9){animation-delay:.34s}.courses-grid .cc:nth-child(n+10){animation-delay:.38s} @keyframes cardFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .cc{background:var(--surface);border:2.5px solid var(--border);border-left:5px solid var(--ac,var(--border));border-radius:var(--radius-lg);padding:1rem 1.125rem;display:flex;align-items:center;gap:.875rem;cursor:pointer;transition:all .2s;box-shadow:0 3px 0 var(--border);position:relative;overflow:hidden} .cc:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--border-strong);border-color:var(--border-strong)} .cc:active{transform:translateY(1px);box-shadow:0 2px 0 var(--border)} .cc.wide{grid-column:1/-1} .cc-bar-wrap{width:52px;height:5px;background:var(--surface-2);border-radius:4px;overflow:hidden;border:1px solid var(--border);flex-shrink:0;} .cc-bar-fill{height:100%;border-radius:4px;transition:width .5s cubic-bezier(.4,0,.2,1);} .cc-pct{font-family:'Space Grotesk',sans-serif;font-size:.62rem;font-weight:800;color:var(--text-3);flex-shrink:0;min-width:24px;text-align:right;} .cc-icon{width:42px;height:42px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900;flex-shrink:0;font-family:'Space Grotesk',sans-serif;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)} .cc-info{flex:1;min-width:0} .cc-info h3{font-family:'Space Grotesk',sans-serif;font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:var(--text)} .cc-info p{font-size:.7rem;color:var(--text-3);margin-top:.15rem;white-space:normal;overflow:visible;line-height:1.4;font-weight:600} .cc-right{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;flex-shrink:0} .xp-badge{font-size:.65rem;font-weight:800;color:var(--teal-ink);background:var(--accent-light);border:1.5px solid var(--border);border-radius:20px;padding:.2rem .6rem;font-family:'Space Grotesk',sans-serif;white-space:nowrap;} .cc-time-est{font-size:.62rem;font-weight:700;color:var(--text-3);white-space:nowrap;} .cc-progress-row{display:flex;align-items:center;gap:.4rem;} .pbar-wrap{width:52px;height:6px;background:var(--surface-2);border-radius:6px;overflow:hidden;border:1.5px solid var(--border)} .pbar{height:100%;border-radius:6px;transition:width .5s cubic-bezier(.4,0,.2,1)} .cc-chevron{color:var(--text-3);font-size:1rem;flex-shrink:0;font-weight:700} .review-banner{background:var(--surface-2);border:2.5px solid var(--border);border-radius:var(--radius-lg);padding:1.125rem 1.25rem;display:flex;align-items:center;gap:1rem;margin-bottom:1.125rem;cursor:pointer;transition:all .15s;box-shadow:3px 3px 0 var(--border)} .review-banner:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--border)} .review-banner-icon{font-size:1.625rem;flex-shrink:0;animation:wobble 3s ease-in-out infinite} @keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}} .review-banner-text{flex:1} .review-banner-text strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:.95rem;font-weight:800;color:var(--duck-orange)} .review-banner-text span{font-size:.75rem;color:var(--text-3);font-weight:600} .review-banner-arrow{color:var(--duck-orange);font-size:1.25rem;font-weight:800} .badges-shelf{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.375rem} .badge-chip{display:flex;align-items:center;gap:.375rem;background:var(--surface);border:2px solid var(--border);border-radius:20px;padding:.35rem .75rem;font-size:.7rem;font-weight:700;color:var(--text-2);transition:all .18s;font-family:'Space Grotesk',sans-serif} .badge-chip.earned{border-color:var(--duck-yellow);background:var(--yellow-light);color:#7A5200} .badge-chip-icon{font-size:.9rem} #page-course{background:var(--bg);overflow:hidden} .course-header{background:var(--surface);border-bottom:2px solid var(--border);padding:.875rem 1.5rem;display:flex;align-items:center;gap:.875rem;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-xs)} .back-btn{background:none;border:2px solid var(--border);cursor:pointer;font-size:.875rem;color:var(--text-3);padding:.4rem .75rem;border-radius:var(--radius-sm);transition:all .18s;font-weight:700;flex-shrink:0;font-family:'Space Grotesk',sans-serif} .back-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)} .ch-info{flex:1;min-width:0} .ch-info h2{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:900;letter-spacing:-.02em;color:var(--heading-ink)} body.dark .ch-info h2{color:var(--duck-yellow)} .ch-info p{font-size:.75rem;color:var(--text-3);font-weight:600} .xp-pill{font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:800;color:var(--accent-ink);background:var(--accent-light);border-radius:20px;padding:.35rem .875rem;border:2px solid var(--border);white-space:nowrap} .ch-meta{display:contents} .lang-tabs{display:flex;gap:.5rem;padding:.625rem 1.25rem;background:var(--surface);border-bottom:2px solid var(--border);overflow-x:auto;} .lang-tabs::-webkit-scrollbar{display:none} .lang-tab{flex-shrink:0;padding:.3rem .875rem;border:1.5px solid var(--border);border-radius:20px;font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:800;cursor:pointer;background:var(--surface);color:var(--text-3);transition:all .18s;white-space:nowrap;} .lang-tab:hover{border-color:var(--border-strong);color:var(--text)} .lang-tab.active-tab{background:var(--pond-mid);border-color:var(--pond-deep);color:white;box-shadow:0 2px 0 var(--pond-deep);} .course-layout{display:flex;flex:1;overflow:hidden;position:relative;} .course-path-col{flex:1;overflow-y:auto;overflow-x:hidden;padding:2rem 1.5rem 6rem;min-width:0;} .course-path-col::-webkit-scrollbar{width:4px} .course-path-col::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} .unit-block{margin-bottom:2.75rem;} .unit-header{display:flex;align-items:baseline;gap:1rem;margin-bottom:.65rem;padding:0;background:none;box-shadow:none;border-radius:0;} .unit-header::after{content:none;} .unit-index{font-family:'Space Grotesk',sans-serif;font-size:1.6rem;font-weight:900;letter-spacing:-.03em;color:var(--uc,var(--pond-mid));opacity:.9;flex-shrink:0;line-height:1;} .unit-ring{display:none;} .unit-header-text{flex:1;min-width:0;position:relative;z-index:1;} .unit-tag{font-family:'Space Grotesk',sans-serif;font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);display:block;} .unit-title-text{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:800;color:var(--text);letter-spacing:-.01em;margin-top:.1rem;display:block;} .unit-divider{display:none;} .unit-progress-text{font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:800;color:var(--text-3);white-space:nowrap;position:relative;z-index:1;flex-shrink:0;} .unit-time-est{font-weight:700;opacity:.75;} .unit-progress-track{height:3px;background:var(--border);border-radius:3px;margin-bottom:1.5rem;overflow:hidden;} .unit-progress-fill{height:100%;border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1);} .node-grid{display:flex;flex-direction:column;gap:.6rem;position:relative;padding:.15rem 0;} .node-path-item{position:relative;animation:cardFadeUp .35s cubic-bezier(.22,1,.36,1) backwards;} .node-path-item:not(:last-child)::after{content:'';position:absolute;left:38px;top:100%;width:2px;height:.6rem;background:var(--border);} .node-path-item .node-card{width:100%;} .node-card{position:relative;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:.875rem 1.125rem;cursor:pointer;display:flex;flex-direction:row;align-items:center;gap:.9rem;text-align:left;transition:transform .18s cubic-bezier(.34,1.2,.64,1), box-shadow .2s, border-color .2s;box-shadow:0 1px 2px rgba(20,16,50,.05);user-select:none;} .node-card:hover:not(.node-locked){transform:translateX(3px);box-shadow:0 4px 14px rgba(20,16,50,.12);border-color:var(--border-strong);} .node-card:active:not(.node-locked){transform:translateX(1px);} .node-card.node-done{border-color:transparent;background:var(--node-done-bg,var(--pond-mid));box-shadow:0 2px 8px rgba(0,0,0,.12);} .node-card.node-done:hover{box-shadow:0 4px 14px rgba(0,0,0,.18);border-color:transparent;} .node-card.node-active{border-color:var(--node-active-c,var(--pond-mid));box-shadow:0 0 0 3px var(--node-active-glow,rgba(45,122,90,.12));} .node-card.node-locked{opacity:.45;cursor:default;filter:grayscale(.6);} .node-card.node-quiz{border-style:dashed;} .node-card.node-quiz .node-icon-wrap{width:46px;height:46px;font-size:1.2rem;} .node-card.node-project{border-color:#4C6FFF55;} .node-card.node-project .node-icon-wrap{width:46px;height:46px;font-size:1.2rem;} .node-project-tag{flex-shrink:0;background:#4C6FFF;color:white;font-family:'Space Grotesk',sans-serif;font-size:.55rem;font-weight:900;letter-spacing:.04em;padding:.2rem .5rem;border-radius:8px;white-space:nowrap;} .node-quiz-tag{flex-shrink:0;background:var(--surface-2);color:var(--text-3);border:1.5px solid var(--border);font-family:'Space Grotesk',sans-serif;font-size:.55rem;font-weight:900;letter-spacing:.04em;padding:.2rem .5rem;border-radius:8px;white-space:nowrap;} .node-icon-wrap{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;position:relative;flex-shrink:0;} .node-card.node-done .node-icon-wrap{background:rgba(255,255,255,.25);} .node-card.node-done .node-icon-wrap::after{content:'✓';position:absolute;bottom:-3px;right:-4px;width:16px;height:16px;border-radius:50%;background:white;color:var(--accent-ink);font-size:.55rem;font-weight:900;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.85);} .node-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;} .node-label-row{display:flex;align-items:center;gap:.5rem;} .node-desc{font-size:.72rem;color:var(--text-3);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .node-card.node-done .node-desc{color:rgba(255,255,255,.75)} .node-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;flex-shrink:0;} .node-label{font-family:'Space Grotesk',sans-serif;font-size:.85rem;font-weight:800;color:var(--text);line-height:1.3;} .node-card.node-done .node-label{color:rgba(255,255,255,.85)} .node-card.node-active .node-label{color:var(--text-2)} .node-xp{font-family:'Space Grotesk',sans-serif;font-size:.6rem;font-weight:900;padding:.2rem .55rem;border-radius:20px;background:rgba(0,0,0,.1);color:rgba(255,255,255,.8);} .node-card:not(.node-done) .node-xp{background:var(--surface-2);color:var(--text-3);border:1.5px solid var(--border);} .node-card.node-active:not(.node-done) .node-xp{color:var(--text-2);} .node-time{font-family:'Space Grotesk',sans-serif;font-size:.58rem;font-weight:800;color:rgba(255,255,255,.7);margin-top:.25rem;text-align:right;white-space:nowrap;} .node-card:not(.node-done) .node-time{color:var(--text-3);} .node-lock-icon{position:absolute;top:.625rem;right:.625rem;font-size:.75rem;opacity:.6;} .course-sidebar{width:260px;flex-shrink:0;padding:1.25rem;border-left:2px solid var(--border);overflow-y:auto;background:var(--surface);display:flex;flex-direction:column;gap:.875rem;} .course-sidebar::-webkit-scrollbar{width:4px} .course-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} .sb-card{background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.125rem;} .sb-card-title{font-family:'Space Grotesk',sans-serif;font-size:.65rem;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.75rem;} .sb-stat-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.875rem;} .sb-stat-label{color:var(--text-2);font-weight:600} .sb-stat-value{font-family:'Space Grotesk',sans-serif;font-weight:900;color:var(--text)} .sb-prog-bar{height:8px;background:var(--surface-2);border-radius:8px;overflow:hidden;border:1.5px solid var(--border);margin:.5rem 0 .25rem;} .sb-prog-fill{height:100%;border-radius:8px;transition:width .6s cubic-bezier(.4,0,.2,1)} .next-up-card{background:var(--accent-light);border:2px solid var(--pond-teal);border-radius:var(--radius-lg);padding:1rem 1.125rem;cursor:pointer;transition:all .2s;} .next-up-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .next-up-card .sb-card-title{color:var(--teal-ink)} .next-up-name{font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:800;color:var(--text);line-height:1.3;margin-bottom:.5rem} .next-up-meta{display:flex;gap:.5rem;align-items:center} .next-up-xp{font-family:'Space Grotesk',sans-serif;font-size:.7rem;font-weight:800;color:var(--teal-ink)} .next-up-type{font-size:.7rem;color:var(--text-3);font-weight:600} .egg-sidebar-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.875rem;background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;} .egg-sidebar-label{font-family:'Space Grotesk',sans-serif;font-size:.65rem;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;} .egg-sidebar-stage{font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:800;color:var(--text-2);} #page-sandbox{background:var(--bg);flex-direction:column;min-height:100vh} .sb-topbar{background:var(--surface);border-bottom:2px solid var(--border);padding:.5rem 1rem;display:flex;align-items:center;gap:.75rem;flex-shrink:0;flex-wrap:wrap} .sb-back{background:none;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:.35rem .75rem;font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:700;color:var(--text-3);cursor:pointer;transition:all .18s} .sb-back:hover{background:var(--surface-2);color:var(--accent)} .sb-topbar-title{font-family:'Space Grotesk',sans-serif;font-size:.95rem;font-weight:900;color:var(--accent);letter-spacing:-.01em} .sb-lang-row{display:flex;gap:.375rem;align-items:center;flex-wrap:wrap;flex:1} .sb-lang-btn{padding:.3rem .875rem;border:1.5px solid var(--border);border-radius:20px;font-family:'Space Grotesk',sans-serif;font-size:.75rem;font-weight:700;cursor:pointer;background:transparent;color:var(--text-3);transition:all .18s} .sb-lang-btn:hover{border-color:var(--border-strong);color:var(--text)} .sb-lang-btn.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent-dk)} .sb-run-btn{display:flex;align-items:center;gap:.375rem;padding:.45rem 1.125rem;background:var(--green);color:white;border:none;border-radius:var(--radius-sm);font-family:'Space Grotesk',sans-serif;font-size:.85rem;font-weight:800;cursor:pointer;transition:all .18s;box-shadow:0 3px 0 var(--green-dk);flex-shrink:0} .sb-run-btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--green-dk)} .sb-run-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--green-dk)} .sb-open-btn{display:flex;align-items:center;gap:.375rem;padding:.4rem .875rem;background:var(--accent-light);color:var(--accent-dk);border:1.5px solid var(--accent);border-radius:var(--radius-sm);font-family:'Space Grotesk',sans-serif;font-size:.75rem;font-weight:700;cursor:pointer;transition:all .18s;flex-shrink:0} .sb-open-btn:hover{background:var(--accent);color:white} .sb-panes{display:flex;flex:1;overflow:hidden} .sb-pane-left{display:flex;flex-direction:column;width:50%;border-right:3px solid var(--border);flex-shrink:0} .sb-pane-right{display:flex;flex-direction:column;flex:1;background:var(--surface)} .sb-file-tabs{display:flex;align-items:center;gap:0;background:var(--surface);border-bottom:2px solid var(--border);padding:0 .75rem;flex-shrink:0} .sb-file-tab{padding:.5rem .875rem;font-size:.75rem;font-weight:700;color:var(--text-3);cursor:pointer;border-bottom:2.5px solid transparent;transition:all .18s;margin-bottom:-2px;white-space:nowrap;font-family:'Space Grotesk',sans-serif} .sb-file-tab.active{color:var(--accent);border-bottom-color:var(--accent)} .sb-editor-wrap{flex:1;overflow:hidden;position:relative;display:flex} .sb-line-nums{background:var(--surface-2);width:44px;flex-shrink:0;padding:.75rem 0;display:flex;flex-direction:column;align-items:flex-end;padding-right:.5rem;border-right:1px solid var(--border);overflow:hidden;pointer-events:none} .sb-ln{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--text-3);line-height:1.6;height:1.2rem;display:flex;align-items:center;opacity:.6} .sb-textarea{flex:1;background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:.8125rem;line-height:1.6;border:none;outline:none;resize:none;padding:.75rem .875rem;tab-size:2;overflow-y:auto} .sb-textarea::placeholder{color:var(--text-3)} .sb-status-bar{background:var(--surface);border-top:1px solid var(--border);padding:.3rem .875rem;display:flex;align-items:center;gap:.75rem;flex-shrink:0} .sb-status-bar span{font-size:.6875rem;color:var(--text-3);font-weight:600} .sb-status-ok{color:var(--green)!important} .sb-status-err{color:var(--red)!important} .sb-preview-header{display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;background:var(--surface);border-bottom:2px solid var(--border);flex-shrink:0} .sb-preview-label{font-family:'Space Grotesk',sans-serif;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3)} .sb-out-dot{width:8px;height:8px;border-radius:50%;background:var(--border-strong)} .sb-out-dot.ok{background:var(--green);box-shadow:0 0 6px var(--green)} .sb-out-dot.err{background:var(--red);box-shadow:0 0 6px var(--red)} .sb-output-console{flex:1;overflow-y:auto;padding:.75rem .875rem;font-family:'JetBrains Mono',monospace;font-size:.8rem;line-height:1.75;color:var(--text-2);background:var(--surface)} .sb-iframe-wrap{flex:1;overflow:hidden;background:white} .sb-iframe-wrap iframe{width:100%;height:100%;border:none;background:white} .out-line{display:block;white-space:pre-wrap;word-break:break-all} .out-line.err-line{color:var(--red)} .out-line.ok-line{color:var(--green)} .out-line.info-line{color:var(--teal-ink)} .out-empty{color:var(--text-3);font-style:italic;font-size:.75rem} #page-lesson{background:var(--bg)} .lesson-topbar{background:var(--surface);border-bottom:2.5px solid var(--border);padding:.75rem 1rem;display:flex;align-items:center;gap:.625rem;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-xs);} .close-btn{background:none;border:2px solid var(--border);cursor:pointer;font-size:.875rem;color:var(--text-3);padding:.375rem .625rem;border-radius:var(--radius-sm);transition:all .18s;font-weight:700;flex-shrink:0;min-width:38px;text-align:center;} .close-btn:hover{background:var(--surface-2);color:var(--text)} .close-btn:disabled{opacity:.3;cursor:default} .lesson-progress-bar{flex:1;height:12px;background:var(--surface-2);border-radius:12px;overflow:hidden;border:2px solid var(--border)} .lesson-progress-fill{height:100%;background:linear-gradient(90deg,var(--pond-teal),var(--pond-lily));border-radius:10px;transition:width .45s cubic-bezier(.4,0,.2,1);position:relative} .lesson-progress-fill::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:14px;height:14px;background:white;border-radius:50%;border:2.5px solid var(--pond-teal);box-shadow:0 1px 4px rgba(0,0,0,.2)} .lesson-body{flex:1;overflow-y:auto;padding:1.75rem 1.5rem 8rem;max-width:600px;margin:0 auto;width:100%} .step-badge{display:inline-flex;align-items:center;gap:.375rem;border-radius:20px;padding:.3rem 1rem;font-family:'Space Grotesk',sans-serif;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem;color:white;box-shadow:0 3px 0 rgba(0,0,0,.15)} .step-badge.learn{background:var(--pond-mid)} .step-badge.question{background:#4C6FFF} .step-badge.fill{background:var(--duck-orange)} .step-badge.type{background:var(--pond-teal)} .step-badge.history{background:linear-gradient(135deg,#C17F3A,#F5C842)} .step-badge.project{background:#4C6FFF} .project-brief ul li{margin-bottom:.3rem} .step-badge.review-badge-label{background:linear-gradient(135deg,var(--duck-orange),#E05A1A)} .lesson-question{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:900;letter-spacing:-.02em;line-height:1.4;margin-bottom:.75rem;color:var(--text);} .step-instruction{font-size:.8rem;color:var(--text-3);font-weight:600;margin-bottom:1.25rem;line-height:1.6;} .lesson-explain{background:var(--surface);border:2.5px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;line-height:1.85;font-size:.9rem;color:var(--text-2);box-shadow:var(--shadow-sm);} .lesson-explain code{font-family:'JetBrains Mono',monospace;background:var(--surface-2);padding:.2rem .45rem;border-radius:6px;font-size:.8rem;color:var(--accent-ink);border:1.5px solid var(--border)} body.dark .lesson-explain code{color:var(--duck-yellow)} .lesson-explain pre{font-family:'JetBrains Mono',monospace;background:#0D1810;color:#A8E063;border-radius:var(--radius-md);padding:1.25rem;font-size:.8125rem;overflow-x:auto;margin:.875rem 0;line-height:1.75;box-shadow:var(--shadow-sm)} .lesson-explain pre .kw{color:#7ECCD4} .lesson-explain pre .str{color:#F5C842} .lesson-explain pre .fn{color:#A8E063} .lesson-explain pre .num{color:#F07B39} .lesson-explain pre .cm{color:#3A7A52} .lesson-tip{margin-top:1.125rem;background:var(--yellow-light);border:2px solid rgba(245,158,11,.55);border-radius:var(--radius-md);padding:.875rem 1.125rem;font-size:.84rem;color:#6A4400;line-height:1.65;font-weight:500;} body.dark .lesson-tip{background:#1E1500;color:#F5C842;border-color:rgba(245,158,11,.3)} .mcq-options{display:flex;flex-direction:column;gap:.75rem} .mcq-opt{background:var(--surface);border:2.5px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.25rem;cursor:pointer;font-size:.95rem;font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:.875rem;transition:all .2s cubic-bezier(.34,1.56,.64,1);color:var(--text);box-shadow:0 4px 0 var(--border)} .mcq-opt-explain{flex-basis:100%;font-size:.8rem;font-weight:500;color:var(--text-2);line-height:1.5;padding-top:.25rem;margin-left:calc(34px + .875rem)} .mcq-opt:hover:not(.disabled){border-color:var(--pond-teal);transform:translateY(-2px);box-shadow:0 6px 0 var(--pond-mid);background:var(--accent-light)} .mcq-opt.selected{border-color:var(--pond-mid);background:var(--accent-light);box-shadow:0 4px 0 var(--pond-deep);color:var(--heading-ink)} .mcq-opt.correct{border-color:var(--pond-teal);background:var(--green-light);box-shadow:0 4px 0 var(--pond-deep);color:var(--green-dk)} .mcq-opt.wrong{border-color:var(--red);background:var(--red-light);box-shadow:0 4px 0 var(--red-dk);color:var(--red);animation:answerShake .4s cubic-bezier(.36,.07,.19,.97)} @keyframes answerShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}} .mcq-opt.disabled{cursor:default;transform:none!important} .mcq-letter{width:34px;height:34px;border-radius:10px;background:var(--surface-2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:900;flex-shrink:0;transition:all .18s} .mcq-opt.selected .mcq-letter{background:var(--pond-mid);border-color:var(--pond-deep);color:white} .mcq-opt.correct .mcq-letter{background:var(--pond-teal);border-color:var(--pond-deep);color:white} .mcq-opt.wrong .mcq-letter{background:var(--red);border-color:var(--red-dk);color:white} .code-challenge{background:#0D1810;border-radius:var(--radius-lg);padding:1.25rem 1.5rem;margin-bottom:1.125rem;font-family:'JetBrains Mono',monospace;font-size:.8125rem;line-height:2.1;color:#A8E063;box-shadow:var(--shadow-sm)} .code-blank{display:inline-block;min-width:80px;background:rgba(245,158,11,.12);border:2px dashed rgba(245,158,11,.5);border-radius:8px;padding:.1rem .6rem;color:#F5C842;font-family:'JetBrains Mono',monospace;font-size:.8125rem;cursor:pointer;transition:all .18s;vertical-align:baseline} .code-blank:hover{background:rgba(245,158,11,.22)} .wb-label{font-family:'Space Grotesk',sans-serif;font-size:.7rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem} .word-bank{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem} .word-chip{background:var(--surface);border:2.5px solid var(--border);border-radius:var(--radius-sm);padding:.4rem .875rem;font-family:'JetBrains Mono',monospace;font-size:.8125rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 3px 0 var(--border);color:var(--text)} .word-chip:hover{border-color:var(--pond-teal);box-shadow:0 3px 0 var(--pond-mid);transform:translateY(-2px)} .word-chip.used{opacity:.2;cursor:default;pointer-events:none} .hint-row{display:flex;align-items:center;margin-bottom:.75rem} .hint-toggle-btn{background:none;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:.3rem .875rem;font-family:'Space Grotesk',sans-serif;font-size:.75rem;font-weight:800;color:var(--text-2);cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:.4rem} .hint-toggle-btn:hover{background:var(--surface-2);border-color:var(--pond-teal);color:var(--accent-ink)} .hint-cost-tag{font-family:'Inter',sans-serif;font-size:.65rem;font-weight:800;color:var(--red);background:var(--red-light);border-radius:20px;padding:.1rem .5rem} .hint-cost-tag.free{color:var(--green-dk);background:var(--green-light)} .hint-box{background:var(--yellow-light);color:#6A4400;border:2px solid rgba(245,158,11,.55);border-radius:var(--radius-md);padding:.875rem 1.125rem;font-family:'Inter',sans-serif;font-size:.84rem;font-weight:500;margin-bottom:.875rem;line-height:1.65;} body.dark .hint-box{background:#1E1500;color:#F5C842;border-color:rgba(245,158,11,.3)} .code-input{width:100%;padding:1rem 1.125rem;border:2.5px solid var(--border);border-radius:var(--radius-lg);font-family:'JetBrains Mono',monospace;font-size:.9rem;background:var(--surface);color:var(--text);outline:none;transition:all .18s;resize:vertical;min-height:60px;box-shadow:var(--shadow-xs)} .code-input:focus{border-color:var(--pond-teal);box-shadow:0 0 0 4px rgba(67,56,202,.12)} .code-input.correct{border-color:var(--pond-teal);background:var(--green-light)} .code-input.wrong{border-color:var(--red);background:var(--red-light);animation:answerShake .4s cubic-bezier(.36,.07,.19,.97)} .step-counter{display:flex;align-items:center;gap:.5rem;margin-bottom:1.25rem} .step-counter-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .3s} .step-counter-dot.done{background:var(--pond-teal)} .step-counter-dot.active{background:var(--pond-mid);width:20px;border-radius:4px} .step-counter-text{font-family:'Space Grotesk',sans-serif;font-size:.75rem;font-weight:800;color:var(--text-3);margin-left:auto} .feedback-bar{position:fixed;bottom:0;left:0;right:0;padding:1.25rem 1.5rem 2rem;z-index:150;transform:translateY(110%);transition:transform .35s cubic-bezier(.34,1.2,.6,1)} .feedback-bar.show{transform:translateY(0)} .feedback-bar.correct-fb{background:var(--green-light);border-top:3.5px solid var(--pond-teal)} .feedback-bar.wrong-fb{background:var(--red-light);border-top:3.5px solid var(--red)} .fb-inner{max-width:600px;margin:0 auto;display:flex;align-items:center;gap:1rem} .fb-icon{font-size:2rem;flex-shrink:0} .fb-text{flex:1} .fb-text strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:900;color:var(--text)} .fb-text span{font-size:.8125rem;color:var(--text-2);font-weight:500} .fb-btn{flex-shrink:0} .check-area{padding:1rem 1.5rem;background:var(--surface);border-top:2.5px solid var(--border);position:sticky;bottom:0;box-shadow:0 -4px 16px rgba(27,77,62,.06)} .check-area-inner{max-width:600px;margin:0 auto} .kbd-hint{font-size:.7rem;color:var(--text-3);font-weight:600;text-align:center;margin-top:.5rem} .kbd-hint kbd{font-family:'JetBrains Mono',monospace;background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:.05rem .35rem;font-size:.68rem;margin:0 .1rem} .complete-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;gap:0;} .complete-screen .trophy{font-size:4.5rem;margin-bottom:1.125rem;animation:pop .55s cubic-bezier(.34,1.56,.64,1)} @keyframes pop{0%{transform:scale(0) rotate(-15deg)}80%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1)}} .complete-screen h2{font-family:'Space Grotesk',sans-serif;font-size:1.625rem;font-weight:900;letter-spacing:-.03em;margin-bottom:.375rem;color:var(--heading-ink)} body.dark .complete-screen h2{color:var(--duck-yellow)} .complete-screen p{color:var(--text-3);font-size:.9rem;margin-bottom:.5rem;font-weight:600} .complete-sub{font-size:.825rem;color:var(--text-3);font-weight:600;margin-top:.75rem;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:.6rem 1rem;display:inline-block;} .xp-award{background:var(--yellow-light);border:2.5px solid var(--duck-yellow);border-radius:var(--radius-lg);padding:1rem 2rem;font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:900;color:#6A4400;margin-bottom:1rem;display:inline-block;box-shadow:0 5px 0 var(--duck-orange)} body.dark .xp-award{color:#F5C842} .perfect-bonus-tag{display:inline-block;font-family:'Inter',sans-serif;font-size:.7rem;font-weight:800;background:var(--pond-teal);color:white;border-radius:20px;padding:.2rem .6rem;vertical-align:middle;margin-left:.4rem} .complete-actions{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:320px;margin-top:1.5rem} /* ── Course completion celebration screen ────────────────────────────── */ .course-celebration{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;position:relative;overflow:hidden} .confetti-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none} .confetti-piece{position:absolute;top:-20px;border-radius:2px;opacity:.9;animation-name:confettiFall;animation-timing-function:cubic-bezier(.4,0,.6,1);animation-iteration-count:1;animation-fill-mode:forwards} @keyframes confettiFall{ 0%{transform:translateY(-40px) rotate(0deg);opacity:0} 10%{opacity:.9} 100%{transform:translateY(420px) rotate(340deg);opacity:0} } @media (prefers-reduced-motion: reduce){.confetti-piece{animation:none;display:none}} .cc-badge{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.25rem;font-weight:900;margin-bottom:1.25rem;position:relative;z-index:1;animation:pop .6s cubic-bezier(.34,1.56,.64,1)} .course-celebration h1{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--heading-ink);margin-bottom:.5rem;position:relative;z-index:1} body.dark .course-celebration h1{color:var(--duck-yellow)} .cc-course-name{color:var(--text-3);font-size:.95rem;font-weight:600;margin-bottom:1.5rem;position:relative;z-index:1} .cc-stats-row{display:flex;gap:.75rem;margin-bottom:2rem;position:relative;z-index:1} .cc-stat{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.375rem;box-shadow:var(--shadow-sm);min-width:88px} .cc-stat-val{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:900;letter-spacing:-.03em;color:var(--accent-ink)} body.dark .cc-stat-val{color:var(--duck-yellow)} .cc-stat-lbl{font-size:.65rem;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem} .cc-actions{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:320px;position:relative;z-index:1} #page-profile{background:var(--bg)} .profile-topbar{background:var(--surface);border-bottom:2.5px solid var(--border);padding:.875rem 1.5rem;display:flex;align-items:center;gap:.875rem;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-xs)} .profile-topbar span{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:900;flex:1;color:var(--heading-ink)} body.dark .profile-topbar span{color:var(--duck-yellow)} .profile-content{padding:1.75rem 1.5rem 4rem;max-width:660px;margin:0 auto;width:100%} .profile-hero{background:linear-gradient(135deg,var(--pond-deep) 0%,var(--pond-mid) 100%);border-radius:var(--radius-xl);padding:1.75rem;display:flex;align-items:center;gap:1.25rem;margin-bottom:1.25rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden} .profile-hero::before{content:'🌿🌿';position:absolute;bottom:-8px;right:16px;font-size:2.5rem;opacity:.2;pointer-events:none} .profile-avatar-big{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--duck-yellow),var(--duck-orange));color:white;display:flex;align-items:center;justify-content:center;line-height:1;overflow:hidden;font-family:'Space Grotesk',sans-serif;font-size:1.875rem;font-weight:900;flex-shrink:0;box-shadow:0 4px 16px rgba(0,0,0,.25),0 0 0 4px rgba(255,255,255,.2)} .profile-hero-info{flex:1;min-width:0} .profile-hero-info h2{font-family:'Space Grotesk',sans-serif;font-size:1.375rem;font-weight:900;letter-spacing:-.02em;color:white;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .profile-hero-info p{font-size:.8125rem;color:rgba(255,255,255,.65);margin-top:.25rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .profile-hero-badges{margin-top:.625rem;display:flex;gap:.4rem;flex-wrap:wrap} /* Profile tab bar: hidden on desktop (the panels below all stay visible there, unchanged single-scroll layout) — only shown and made functional inside the mobile breakpoint further down. */ .qcg-profile-tabs{display:none} .qcg-profile-tab{font-family:'Space Grotesk',sans-serif;font-weight:800;cursor:pointer;border:2px solid var(--border);background:var(--surface);color:var(--text-3);border-radius:20px;transition:all .18s} .qcg-profile-tab.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent-dk)} /* .qcg-profile-panel-hidden intentionally has NO rule here — panels always stay visible on desktop regardless of which tab is "active" in JS state. It only actually hides anything inside the mobile breakpoint below, where it's redefined to display:none. */ .profile-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.375rem} .profile-stat{background:var(--surface);border:2.5px solid var(--border);border-radius:var(--radius-lg);padding:1rem;text-align:center;box-shadow:0 3px 0 var(--border);transition:transform .18s} .profile-stat:hover{transform:translateY(-2px)} .profile-stat-val{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:900;letter-spacing:-.04em;color:var(--accent-ink)} body.dark .profile-stat-val{color:var(--duck-yellow)} .profile-stat-lbl{font-size:.6rem;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem} .profile-section-title{font-family:'Space Grotesk',sans-serif;font-size:.7rem;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin:1.375rem 0 .875rem;display:flex;align-items:center;gap:.5rem} .profile-section-title::after{content:'';flex:1;height:2px;background:var(--border);border-radius:2px} .profile-courses{display:flex;flex-direction:column;gap:.625rem;margin-bottom:1rem} .profile-course-row{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-md);padding:.875rem 1.125rem;display:flex;align-items:center;gap:.875rem;transition:all .18s;box-shadow:0 2px 0 var(--border)} .profile-course-row:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--border-strong)} .profile-course-icon{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:.75rem;font-weight:900;flex-shrink:0;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)} .profile-course-name{flex:1;font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:800;color:var(--text)} .profile-course-pbar{flex:1;height:8px;background:var(--surface-2);border-radius:8px;overflow:hidden;border:1.5px solid var(--border);max-width:110px} .profile-course-fill{height:100%;border-radius:8px;transition:width .5s} .profile-course-pct{font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:800;color:var(--text-3);min-width:36px;text-align:right} .badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem} .badge-card{background:var(--surface);border:2.5px solid var(--border);border-radius:var(--radius-lg);padding:1rem .75rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;transition:all .22s cubic-bezier(.34,1.56,.64,1);position:relative;box-shadow:0 3px 0 var(--border)} .badge-card:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--border-strong)} .badge-card.earned{border-color:var(--duck-yellow);background:var(--yellow-light);box-shadow:0 3px 0 var(--duck-orange)} body.dark .badge-card.earned .badge-name{color:#F5C842} .badge-card.earned:hover{box-shadow:0 6px 0 var(--duck-orange)} .badge-card.locked{opacity:.4;filter:grayscale(.6)} .badge-icon{font-size:1.875rem;line-height:1} .badge-name{font-family:'Space Grotesk',sans-serif;font-size:.65rem;font-weight:800;color:var(--text-2);line-height:1.3} .badge-card.earned .badge-name{color:#6A4400} .badge-card-desc{font-size:.575rem;color:var(--text-3);line-height:1.35;text-align:center} .badge-card.earned .badge-card-desc{color:#8A6000} .badge-earned-tag{position:absolute;top:-8px;right:-8px;background:var(--duck-yellow);color:#6A4400;border-radius:20px;padding:.15rem .5rem;font-family:'Space Grotesk',sans-serif;font-size:.55rem;font-weight:900;border:2.5px solid var(--surface);box-shadow:var(--shadow-xs)} .badge-unlock-toast{position:fixed;bottom:5rem;left:50%;transform:translateX(-50%) translateY(140px);opacity:0;background:var(--surface);border:2.5px solid var(--duck-yellow);border-radius:var(--radius-xl);padding:1.125rem 1.625rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow-lg),0 0 0 4px rgba(245,158,11,.15);z-index:1000;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;pointer-events:none;visibility:hidden} .badge-unlock-toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible} .badge-unlock-icon{font-size:2.125rem} .badge-unlock-text strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:900;color:var(--text)} .badge-unlock-text span{font-size:.775rem;color:var(--text-3);font-weight:600} .modal-overlay{position:fixed;inset:0;background:rgba(11,30,23,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:300;padding:1rem} .modal-overlay.open{display:flex;animation:modalOverlayFade .22s ease} .modal-overlay.open .modal-box, .modal-overlay.open .golden-modal-box, .modal-overlay.open .onboarding-box{animation:modalPopIn .3s cubic-bezier(.22,1,.36,1)} @keyframes modalOverlayFade{from{opacity:0}to{opacity:1}} @keyframes modalPopIn{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}} .modal-box{background:var(--surface);border:2.5px solid var(--border);border-radius:var(--radius-xl);padding:2.125rem;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);position:relative} .modal-icon-box{width:68px;height:68px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:2.25rem;margin-bottom:1.25rem;box-shadow:inset 0 -4px 0 rgba(0,0,0,.1)} .modal-box h2{font-family:'Space Grotesk',sans-serif;font-size:1.25rem;font-weight:900;letter-spacing:-.02em;margin-bottom:.375rem;color:var(--heading-ink)} body.dark .modal-box h2{color:var(--duck-yellow)} .modal-box p{font-size:.9rem;color:var(--text-2);margin-bottom:1rem;font-weight:500;line-height:1.6} .modal-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.75rem} .modal-close{position:absolute;top:.875rem;right:.875rem;background:none;border:2px solid var(--border);border-radius:var(--radius-sm);padding:.3rem .55rem;font-size:.875rem;cursor:pointer;color:var(--text-3);transition:all .15s} .modal-close:hover{background:var(--surface-2);border-color:var(--border-strong)} .toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--pond-deep);color:white;padding:.7rem 1.375rem;border-radius:var(--radius-md);font-family:'Space Grotesk',sans-serif;font-size:.875rem;font-weight:800;z-index:999;transition:transform .35s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-lg)} .toast.show{transform:translateX(-50%) translateY(0)} .xp-pop{position:fixed;pointer-events:none;font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:900;color:var(--duck-yellow);z-index:998;animation:xpFloat 1.2s ease-out forwards;text-shadow:0 2px 8px rgba(0,0,0,.2)} @keyframes xpFloat{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(1.3)}} ::-webkit-scrollbar{width:4px;height:6px} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} /* ── STREAK SYSTEM ── */ .streak-flame-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center} .streak-flame{font-size:1.5rem;display:inline-block;filter:drop-shadow(0 2px 4px rgba(234,88,12,.3))} .streak-flame.lit{animation:flameFlicker 1.6s ease-in-out infinite} .streak-flame.unlit{opacity:.3;filter:grayscale(1)} @keyframes flameFlicker{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08) rotate(2deg)}} .streak-milestone-badge{display:inline-flex;align-items:center;gap:.3rem;background:linear-gradient(135deg,var(--duck-yellow),var(--duck-orange));color:#5A3300;font-family:'Space Grotesk',sans-serif;font-size:.65rem;font-weight:900;padding:.2rem .6rem;border-radius:20px;margin-top:.3rem;box-shadow:0 2px 0 #A03A10} .sday-dot.frozen{background:var(--pond-sky);border-color:var(--pond-teal)} /* ── MASTERY EGGS ── */ .mastery-egg-card{display:flex;flex-direction:column;align-items:center;gap:.625rem;padding:1.125rem;background:linear-gradient(160deg,var(--bg),var(--surface-2));border:2px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s;position:relative;overflow:hidden} .mastery-egg-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong)} .mastery-egg-svg-wrap{width:84px;height:84px;display:flex;align-items:center;justify-content:center;position:relative} .mastery-egg-svg-wrap svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(27,77,62,.18))} .mastery-egg-glow{position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,rgba(245,158,11,.25),transparent 70%);pointer-events:none;animation:eggGlowPulse 3s ease-in-out infinite} @keyframes eggGlowPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}} .mastery-egg-stagelabel{font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:800;color:var(--text-2)} .mastery-egg-sublabel{font-family:'Space Grotesk',sans-serif;font-size:.65rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em} .mastery-egg-progress-track{width:100%;height:7px;background:var(--surface-2);border-radius:8px;overflow:hidden;border:1.5px solid var(--border);margin-top:.1rem} .mastery-egg-progress-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--pond-teal),var(--pond-lily));transition:width .6s cubic-bezier(.4,0,.2,1)} .egg-stage-dots{display:flex;gap:.3rem;margin-top:.15rem} .egg-stage-dot{width:7px;height:7px;border-radius:50%;background:var(--border)} .egg-stage-dot.filled{background:var(--duck-yellow)} /* ── Focus timer (Pomodoro) widget — positioning moved here from inline styles (values unchanged) so it can be repositioned on mobile below. ── */ .qcg-pomodoro-widget{position:fixed;bottom:20px;right:20px;z-index:500} .qcg-pomodoro-fab{width:52px;height:52px;border-radius:50%;border:none;background:var(--pond-teal);color:#fff;font-size:1.3rem;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25)} .qcg-pomodoro-panel{position:absolute;bottom:64px;right:0;width:220px;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1rem;text-align:center} /* ── Mobile bottom nav — hidden entirely on desktop. Made visible (and given real fixed-bar styling) only inside the mobile breakpoint below; .qcg-bottom-nav-hidden additionally hides it on the handful of full-screen pages (auth, an active lesson, sandbox, etc) even on mobile — see qcgSyncBottomNav() in app.js. ── */ .qcg-bottom-nav{display:none} /* ═══════════════════════════════════════════════════════════════════ QUACKCODE — MOBILE RESPONSIVE PATCH Only active inside the @media breakpoints below, so the desktop layout (anything wider than 900px) is completely untouched. ════════════════════════════════════════════════════════════════════ */ /* ── Tablet / small laptop ── */ @media (max-width:900px){ .course-sidebar{width:220px} } /* ── Phones & narrow tablets ── */ @media (max-width:768px){ body{font-size:13.5px} /* Prevent iOS/Android auto-zoom-on-focus: mobile browsers zoom the whole page in the instant a focused input's rendered font-size is under 16px, and typically don't zoom back out afterward. Since the 13.5px root above shrinks every rem-based input below that threshold, force all actual form fields back up to 16px here specifically — this is the one thing that must stay full-size on mobile so the page never zooms. */ input, select, textarea { font-size: 16px !important; } /* Topbar: let it wrap instead of overflowing, shrink buttons */ .topbar{padding:.625rem .875rem;flex-wrap:wrap;row-gap:.5rem} .topbar-right{flex-wrap:wrap;justify-content:flex-end;gap:.4rem;width:100%} .topbar-right .btn.ghost{padding:.35rem .625rem;font-size:.75rem} .user-pill{padding:.3rem .625rem .3rem .3rem;font-size:.75rem} .topbar-logo span{font-size:1rem} /* Auth box */ #page-auth{padding:1rem} .auth-box{padding:1.5rem} /* Home */ .home-content{padding:1.25rem 1rem 8rem} .home-greeting h2{font-size:1.2rem} .stats-row{gap:.625rem} .stat-card{padding:.875rem 1rem} .stat-card .stat-val{font-size:1.4rem} /* The "Today's Goal" ring card is injected as a 3rd child into a 2-column grid, so it sat alone in column 1 with a full card-width of dead empty space next to it, plus the full square-card height of the two cards above it. Span it across both columns and lay it out as a compact horizontal strip instead — same information, roughly half the height, no wasted space. */ #qcg-xp-ring-card{grid-column:1/-1;display:flex;align-items:center;gap:.875rem;padding:.625rem 1rem} #qcg-xp-ring-card #qcg-xp-ring-wrap{margin:0} #qcg-xp-ring-card .stat-lbl{margin-top:0} /* The course picker moves to its own "Lessons" tab (bottom nav) instead of living inline at the bottom of Home — desktop still shows it right here on Home, unchanged. */ .qcg-home-courses-section{display:none} /* ── Bottom nav: real fixed tab bar, mobile only ── */ .qcg-bottom-nav{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:600; background:var(--surface);border-top:2px solid var(--border); padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom,0px)); box-shadow:0 -2px 10px rgba(0,0,0,.06); } .qcg-bottom-nav.qcg-bottom-nav-hidden{display:none} .qcg-bottom-nav-btn{ flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem; background:none;border:none;padding:.35rem .25rem;cursor:pointer; color:var(--text-3);font-family:'Space Grotesk',sans-serif; } .qcg-bnav-icon{font-size:1.25rem;line-height:1} .qcg-bnav-label{font-size:.62rem;font-weight:800} .qcg-bottom-nav-btn.active{color:var(--accent-ink)} /* Reserve room at the bottom of every page the nav bar can appear on, so its last bit of content (and the pomodoro widget floating just above the nav bar) is never hidden underneath either one. .home-content already had 8rem reserved (for the pomodoro widget alone, pre-existing) which comfortably covers the nav bar too, so it's intentionally left out of this rule rather than shrunk. */ .profile-content,.social-content{padding-bottom:calc(7rem + env(safe-area-inset-bottom,0px))} .course-path-col{padding-bottom:calc(1.5rem + 5.5rem + env(safe-area-inset-bottom,0px))} /* Sits just above the bottom nav instead of at the very corner. */ .qcg-pomodoro-widget{bottom:calc(70px + env(safe-area-inset-bottom,0px))} .courses-grid{grid-template-columns:1fr 1fr;gap:.625rem} .cc{padding:.75rem .875rem;gap:.625rem} .cc-icon{width:36px;height:36px;font-size:.7rem} .cc-info h3{font-size:.85rem} .cc-info p{font-size:.65rem} .review-banner{padding:.875rem 1rem;gap:.75rem} /* Course header / tabs: two clean rows instead of one squeezed row — row 1 is back + title (title gets full room to breathe so it can never be pushed into overflow by the pills), row 2 is the XP/time pills, forced onto their own line via ch-meta's flex-basis:100%. */ .course-header{padding:.75rem 1rem;gap:.5rem .625rem;flex-wrap:wrap} .ch-info{flex:1 1 auto;min-width:0} .ch-info h2{font-size:1rem;white-space:normal;overflow-wrap:break-word} .ch-info p{white-space:normal} .ch-meta{display:flex;flex:1 1 100%;gap:.5rem} .xp-pill{padding:.3rem .625rem;font-size:.7rem} .lang-tabs{padding:.5rem .875rem;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)} /* Course layout: stack sidebar below the path instead of beside it */ .course-layout{flex-direction:column;overflow-y:auto;overflow-x:hidden} .course-path-col{overflow:visible;padding:1.25rem 1rem 1.5rem;flex:none} .course-sidebar{ width:100%;border-left:none;border-top:2px solid var(--border); flex-direction:row;flex-wrap:wrap;gap:.75rem;overflow-y:visible; } .course-sidebar .sb-card, .course-sidebar .next-up-card, .course-sidebar .mastery-egg-card{flex:1 1 240px} .node-card{padding:.75rem .875rem;gap:.7rem} .node-icon-wrap{width:36px;height:36px;font-size:.95rem;border-radius:10px} .node-label{font-size:.78rem} .node-desc{display:none} .node-path-item:not(:last-child)::after{left:32px} .unit-header{gap:.75rem} .unit-index{font-size:1.3rem} .unit-title-text{font-size:.9rem} /* Lesson */ .lesson-body{padding:1.25rem 1rem 8rem} .lesson-question{font-size:1.05rem} .lesson-explain{padding:1.125rem} .lesson-explain pre{padding:.875rem;font-size:.75rem} .mcq-opt{padding:.875rem 1rem;font-size:.875rem} .code-challenge{padding:1rem 1.125rem;font-size:.75rem} .feedback-bar{padding:1rem 1rem 1.5rem} .fb-inner{gap:.625rem} .fb-icon{font-size:1.5rem} .fb-text strong{font-size:.9rem} .fb-text span{font-size:.75rem} .fb-btn{min-width:88px!important;padding:.65rem .875rem!important} .check-area{padding:.875rem 1rem} /* Focus timer widget: smaller and tucked closer to the corner so it overlaps less real content, with extra scroll clearance below. */ .qcg-pomodoro-widget{bottom:14px;right:14px} .qcg-pomodoro-fab{width:44px;height:44px;font-size:1.05rem} .qcg-pomodoro-panel{width:190px;bottom:54px} /* Profile: split into tab panels instead of one very long scroll (hero, stats, streak freezes, heatmap, all 9 courses, all 48 badges, and 3 settings/danger-zone cards were all stacked one after another). The tab bar becomes visible and functional only here; .qcg-profile-panel-hidden only actually hides anything here too — both are inert on desktop. */ .profile-content{padding:1.25rem 1rem 5.5rem} .profile-hero{padding:1.25rem;gap:1rem;flex-wrap:wrap} .profile-avatar-big{width:60px;height:60px;font-size:1.5rem} .profile-hero-info h2{font-size:1.1rem} .qcg-profile-tabs{display:flex;gap:.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:.25rem 0 .875rem;margin:-.25rem 0 0} .qcg-profile-tabs::-webkit-scrollbar{display:none} .qcg-profile-tab{flex-shrink:0;padding:.5rem 1rem;font-size:.8rem} .qcg-profile-panel-hidden{display:none} .profile-stats-row{grid-template-columns:repeat(2,1fr);gap:.625rem} .badges-grid{grid-template-columns:repeat(2,1fr)} /* Modals */ .modal-box{padding:1.5rem} .golden-modal-box{padding:1.5rem} /* Sandbox: stack editor above output instead of side-by-side. The language picker was wrapping into a tall stack of one-per-row pills, pushing the editor almost entirely off-screen — scroll it horizontally in one row instead, same pattern as .lang-tabs. */ .sb-topbar{padding:.5rem .75rem;gap:.5rem} .sb-lang-row{ order:3;width:100%;justify-content:flex-start; flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; } .sb-lang-row::-webkit-scrollbar{display:none} .sb-lang-btn{flex-shrink:0} .sb-panes{flex-direction:column;overflow-y:auto;overflow-x:hidden} .sb-pane-left{width:100%;border-right:none;border-bottom:3px solid var(--border);height:46vh;flex-shrink:0} .sb-pane-right{height:46vh;flex-shrink:0;padding-bottom:3rem} .sb-editor-wrap{overflow:auto} /* Social / leaderboard / duels */ .social-content{padding:1.25rem 1rem 5.5rem} .lb-banner{padding:1.25rem 1.25rem 1rem} .podium-slot.place-1 .podium-avatar{width:52px;height:52px;font-size:1.15rem} .podium-slot.place-2 .podium-avatar,.podium-slot.place-3 .podium-avatar{width:44px;height:44px;font-size:1rem} .duel-vs-row{gap:1rem} .duel-side .lb-avatar{width:46px;height:46px;font-size:1.05rem} .add-friend-row{flex-wrap:wrap} .add-friend-row button{width:100%} /* AI chat */ .ai-chat-body{padding:1rem 1rem .75rem} .ai-msg-row{max-width:92%} .ai-input-area{padding:.875rem 1rem 1.25rem} /* Modal meta / lesson topbar tightened */ .lesson-topbar{padding:.625rem .75rem;gap:.5rem} .close-btn{min-width:34px;padding:.3rem .5rem} } /* ── Small phones ── */ @media (max-width:420px){ .courses-grid{grid-template-columns:1fr} .profile-stats-row{grid-template-columns:repeat(2,1fr)} .badges-grid{grid-template-columns:repeat(2,1fr)} .node-card{padding:.65rem .75rem;gap:.6rem} .node-icon-wrap{width:32px;height:32px;font-size:.85rem} .stats-row{grid-template-columns:1fr 1fr} .topbar-right .btn.ghost{font-size:.7rem;padding:.3rem .55rem} .duel-vs-row{gap:.625rem} .duel-vs-label{font-size:.85rem} } /* ── Landscape phones / short viewports: shrink the sandbox panes ── */ @media (max-width:768px) and (max-height:480px){ .sb-pane-left,.sb-pane-right{height:auto;max-height:none} .sb-panes{flex-direction:row} .sb-pane-left{width:50%;border-right:3px solid var(--border);border-bottom:none} .sb-pane-right{flex:1} } /* ── Improved Friends System ── */ .friends-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:1rem} .friend-tab{padding:.55rem 1rem;font-size:.8rem;cursor:pointer;border:none;background:none;color:var(--text-3);border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:color .15s;font-family:'Space Grotesk',sans-serif;font-weight:800} .friend-tab.ft-active{color:var(--text);border-bottom-color:var(--pond-mid)} body.dark .friend-tab.ft-active{border-bottom-color:var(--duck-yellow);color:var(--text)} .friend-tab:hover:not(.ft-active){color:var(--text)} .friend-badge{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;font-size:.6rem;font-weight:900;background:var(--pond-mid);color:white;margin-left:4px;vertical-align:middle} .friend-pane{display:none}.friend-pane.fp-active{display:block} .friend-search-row{display:flex;gap:.5rem;margin-bottom:.875rem} .friend-search-wrap{flex:1;position:relative;display:flex;align-items:center} .friend-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:.9rem;pointer-events:none} .friend-search-input{width:100%;padding:.6rem .75rem .6rem 2.1rem;font-size:.8rem;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);outline:none;font-family:'Inter',sans-serif;transition:border-color .15s} .friend-search-input:focus{border-color:var(--pond-teal)} .fr-card{display:flex;align-items:center;gap:.75rem;padding:.75rem .875rem;border:2px solid var(--border);border-radius:var(--radius-lg);margin-bottom:.5rem;background:var(--surface);transition:border-color .15s;box-shadow:0 2px 0 var(--border)} .fr-card:hover{border-color:var(--border-strong)} .fr-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;flex-shrink:0;color:white;font-family:'Space Grotesk',sans-serif;position:relative} .fr-avatar.sm{width:28px;height:28px;font-size:.65rem} .fr-online-dot{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid var(--surface)} .dot-online{background:#3BA882}.dot-away{background:#F5C842}.dot-offline{background:var(--border-strong)} .fr-meta{flex:1;min-width:0} .fr-name{font-family:'Space Grotesk',sans-serif;font-size:.875rem;font-weight:800;color:var(--text)} .fr-sub{font-size:.7rem;color:var(--text-3);margin-top:.1rem;font-weight:600} .fr-xp-bar{height:4px;background:var(--surface-2);border-radius:4px;overflow:hidden;margin-top:.3rem;width:72px;border:1px solid var(--border)} .fr-xp-fill{height:100%;border-radius:4px;background:var(--pond-teal)} .fr-actions{display:flex;gap:.375rem;flex-shrink:0} .fr-icon-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:2px solid var(--border);border-radius:var(--radius-sm);background:none;cursor:pointer;color:var(--text-3);font-size:.875rem;transition:all .12s} .fr-icon-btn:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)} .fr-icon-btn.fr-danger:hover{background:var(--red-light);border-color:var(--red);color:var(--red)} .fr-icon-btn.fr-success:hover{background:var(--green-light);border-color:var(--pond-teal);color:var(--accent-ink)} .fr-pill{font-size:.65rem;font-weight:800;padding:.2rem .625rem;border-radius:20px;font-family:'Space Grotesk',sans-serif} .fr-pill.incoming{background:var(--accent-light);color:var(--heading-ink)} .fr-pill.outgoing{background:var(--surface-2);color:var(--text-3);border:1.5px solid var(--border)} .fr-pill-btn{padding:.35rem .875rem;font-size:.72rem;font-weight:800;border-radius:20px;cursor:pointer;border:2px solid;transition:all .12s;white-space:nowrap;font-family:'Space Grotesk',sans-serif} .fr-pill-btn.add{background:var(--pond-mid);color:white;border-color:var(--pond-deep);box-shadow:0 2px 0 var(--pond-deep)} .fr-pill-btn.add:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--pond-deep)} .fr-pill-btn.cancel{background:none;color:var(--text-3);border-color:var(--border)} .fr-pill-btn.cancel:hover{background:var(--surface-2);border-color:var(--border-strong)} .fr-pill-btn.accept{background:var(--pond-teal);color:white;border-color:var(--pond-deep);box-shadow:0 2px 0 var(--pond-deep)} .fr-pill-btn.accept:hover{transform:translateY(-1px)} .fr-pill-btn.decline{background:none;color:var(--red);border-color:var(--red)} .fr-pill-btn.decline:hover{background:var(--red-light)} .fr-section-hd{font-family:'Space Grotesk',sans-serif;font-size:.65rem;font-weight:900;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin:.875rem 0 .5rem;display:flex;align-items:center;gap:.5rem} .fr-section-hd::after{content:'';flex:1;height:1.5px;background:var(--border);border-radius:2px} .fr-empty{text-align:center;padding:1.75rem 1rem;color:var(--text-3)} .fr-empty .fr-empty-icon{font-size:1.75rem;margin-bottom:.5rem} .fr-empty p{font-size:.8rem;font-weight:600;line-height:1.5} .fr-results{border:2px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:.875rem} .fr-result-row{display:flex;align-items:center;gap:.625rem;padding:.6rem .875rem;border-bottom:1.5px solid var(--border);transition:background .1s} .fr-result-row:last-child{border-bottom:none} .fr-result-row:hover{background:var(--surface-2)} .fr-result-name{font-family:'Space Grotesk',sans-serif;font-size:.825rem;font-weight:800;flex:1;color:var(--text)} .fr-result-xp{font-size:.7rem;color:var(--text-3);font-weight:600;margin-right:.375rem} /* ═══════════════════════════════════════════════════════════════════ QUACKCODE — UI POLISH PACK Drop this