/* Phase 4: cheerful, accessible light-mode visual foundation. */
:root{color-scheme:light;--bg:#f6f8fe;--panel:#ffffff;--panel2:#f0f4ff;--border:#e1e8f5;--text:#243253;--muted:#65748e;--purple:var(--theme-primary,#7058df);--mint:var(--theme-accent,#14b8a6);--shadow:0 18px 50px #263a6c14;--theme-primary:#7058df;--theme-accent:#14b8a6;--font-display:'Outfit'}
body{background:radial-gradient(ellipse at 90% 2%,#ece8ff 0,transparent 32%),radial-gradient(ellipse at 2% 94%,#e7f7fd 0,transparent 40%),var(--bg);color:var(--text)}
h1,h2,h3,h4{font-family:var(--font-display),system-ui,sans-serif}
.sidebar{background:#fff;border-color:#e2e8f2;box-shadow:8px 0 30px #1d315507}.topbar{background:#ffffffbc;border-bottom-color:#e4e9f5;backdrop-filter:blur(14px)}
.brand-mark{background:linear-gradient(145deg,var(--theme-primary),#a4a2ff);color:white;box-shadow:0 8px 17px #6b5bd748;border-radius:13px;letter-spacing:0;padding:0}
.brand-mark img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.brand-word{color:#27324b}.brand-period,.brand-dot{color:var(--theme-accent)}
.workspace-label{color:#8796ae}.nav-item{color:#66758d}.nav-item:hover{color:var(--theme-primary);background:#f4f2ff}.nav-item.active{color:var(--theme-primary);background:#f2efff;border-color:#e4dfff}
.nav-item .icon{width:32px;height:32px;display:inline-grid;place-items:center;flex:none;background:linear-gradient(145deg,#fff,#ecf2ff);box-shadow:inset 1px 2px 2px #ffffffdd,0 4px 9px #bac5df8c;border:1px solid #e1e5f2;border-radius:11px;font-size:20px;transition:.2s}
.nav-item:hover .icon{transform:translateY(-2px) rotate(-5deg)}
.phase4-flat .nav-item .icon{background:transparent;border:0;box-shadow:none;transform:none}
.nav-badge{border-color:#e7e5f4;color:#827b9e}.mini-user{border-color:#edf0f8}.mini-user-copy small,.mini-arrow{color:#7788a1}
.online-status{background:#f4fdf9;color:#487e72;border-color:#d7f2e6}.online-dot{background:var(--theme-accent);box-shadow:0 0 0 3px #12b69d18}
.avatar{color:#fff;background:linear-gradient(135deg,var(--theme-primary),#61bbd7)}
.search-wrap{background:#f7f9fd;border-color:#e1e8f3}.search-wrap input{color:#233451}.search-wrap input::placeholder,.search-icon,.search-shortcut{color:#8a9ab0}.search-shortcut{border-color:#e0e6f1}
.topbar-status{color:#7587a0}.footer{border-color:#e3eaf5;color:#8190a5}
.eyebrow{color:var(--theme-accent)}.page-description,.section-subtitle{color:#6f7e95}.section-title,.page-title{color:#222e47}.text-link{color:var(--theme-primary)}
.btn-primary{color:white;background:var(--theme-primary);box-shadow:0 8px 21px #6953dc35}.btn-primary:hover{background:var(--theme-primary);filter:brightness(1.07)}
.btn-secondary{background:white;border-color:#d9dfef;color:#425372}.btn-secondary:hover{background:#f7f6ff;border-color:#d1c7ff}.btn-quiet{color:#5d6d85;border-color:#d9dfed;background:#fafbfe}.btn-danger{color:#b53b58;background:#fff1f3;border-color:#ffc9d5}.btn-ghost{color:var(--theme-primary)}
.pill{color:#687c9c;background:#f6f8fd;border-color:#e1e7f3}.pill.mint{background:#ebfbf6;border-color:#d5f3e8;color:#168c77}.pill.purple{background:#f2efff;border-color:#e3dcff;color:#6b50d2}.pill.yellow{background:#fffaeb;border-color:#f8e8c2;color:#a88125}.pill.pink{background:#fff0f4;border-color:#f7d6df;color:#b75678}
.hero{background:radial-gradient(ellipse at 78% 55%,#c6b5ff94,transparent 38%),radial-gradient(ellipse at 15% 110%,#a7e3eaa1,transparent 44%),linear-gradient(115deg,#ffffff,#edeaff);border-color:#e4ddff;box-shadow:0 20px 60px #6556ba13}
.hero h1{color:#292e52}.hero h1 em{color:var(--theme-primary)}.hero p{color:#657590}.featured-label{background:#ecfaf6;color:#008d7b;border:1px solid #d6f1e9}
.hero-visual{background:linear-gradient(140deg,#a8a0ff,#73e0d1);color:#343074;border-color:#fff7;box-shadow:inset 0 4px 14px #fff9,0 22px 38px #7a70c044}
.stat-card,.panel{background:#fff;border-color:#e3e9f4;box-shadow:0 8px 30px #263b7008}.stat-icon{background:#f1edff;color:var(--theme-primary);box-shadow:0 6px 12px #aa9ae63b}.stat-copy small{color:#8290a6}.stat-icon.mint{color:#0caa94;background:#e5faf2}.stat-icon.yellow{color:#b98519;background:#fff6dc}
.filter-chip{background:white;border-color:#dae3f0;color:#6b7892}.filter-chip:hover{background:#f4f3ff}.filter-chip.selected{background:var(--theme-primary);border-color:var(--theme-primary);color:white}
.quiz-card{background:#fff;border-color:#e1e7f0;box-shadow:0 9px 23px #27365e0b}.quiz-card:hover{border-color:#bdadff;box-shadow:0 20px 40px #6e5dc327}.quiz-description{color:#75849a}.quiz-meta{border-color:#e9edf5;color:#75849a}.favorite-button{color:#7c8ca4}
.quiz-art .art-icon{filter:drop-shadow(0 7px 7px #ffffff45);transform:rotate(-9deg)}.quiz-art{border-bottom:1px solid #e9edf4}
.field,.select{background:#fff;color:#253550;border-color:#d8e0ef}.field:focus,.select:focus{border-color:var(--theme-primary)}.field::placeholder{color:#96a3b6}.form-field label,.form-field span{color:#56677f}.form-hint{color:#8997aa}
.builder-question{background:#f8faff;border-color:#e3e9f4}.admin-quiz-row,.data-row,.member-row{border-color:#e8edf5}.admin-quiz-row p,.data-row small{color:#8190a5}
.note{background:#f2f7ff;border-color:#dce7ff;color:#5b6f99}.auth-switch{color:#65758d}
.question-panel{background:#fff;border-color:#dfe7f3}.question-info{color:#72829b}.question-panel h2{color:#25314f}.progress-track{background:#e8eaf6}.progress-fill{background:linear-gradient(90deg,var(--theme-primary),var(--theme-accent))}
.option-btn{background:#f8faff;color:#304460;border-color:#dce5f3}.option-btn:hover:not(:disabled){background:#f2efff;border-color:#beb2fa}.option-tag{background:#e9eefa;color:#5c6e8b}.option-btn.correct{background:#e5fbf0;color:#197d60;border-color:#62d69c}.option-btn.wrong{background:#ffebf1;color:#af4059;border-color:#f2a3b5}.option-btn.muted{opacity:.5}
.answer-feedback{background:#f1f7ff;border-color:#e1eaf8;color:#4f6079}.answer-feedback strong{color:#3c4d69}.play-points,.data-row .score{color:var(--theme-primary)}.kbd-hint{color:#8290a3}
.profile-cover{background:linear-gradient(120deg,#ede8ff,#daf3f2);border-color:#d8dcf3}.profile-cover p{color:#677893}
.player-chip{background:#f3f6fc;color:#526582;border-color:#dae2f0}.live-pin{color:#604ed4;border-color:#e4dbff;background:#f4f0ff}.live-pin strong{color:#3e2b9e}
.phase4-lang-field{display:inline-flex;align-items:center;gap:6px;color:#745dde;font-size:15px;background:#fff;border:1px solid #e4e7f0;border-radius:11px;padding:8px 10px;white-space:nowrap}.phase4-lang-field select{max-width:132px;border:0;color:#36465f;background:transparent;font-size:12px;font-weight:700;outline:0;cursor:pointer}
/* Login-only entry screen */
.phase4-loading .app-shell{visibility:hidden}.phase4-auth-mode .sidebar,.phase4-auth-mode .topbar,.phase4-auth-mode .footer,.phase4-auth-mode .mobile-nav{display:none!important}
.phase4-auth-mode .app-shell{min-height:100vh;display:block}.phase4-auth-mode .main-area{min-height:100vh}.phase4-auth-mode .content{max-width:none;padding:42px clamp(16px,5vw,65px);display:grid;place-items:center}
.phase4-auth-mode .auth-wrap{max-width:1120px;width:100%;margin:auto;display:grid;grid-template-columns:1fr minmax(360px,.88fr);gap:18px 75px;align-items:start}
.phase4-auth-brand{grid-column:1;grid-row:1;display:flex;gap:15px;align-items:center;margin:8px 0 22px}
.phase4-auth-logo{width:65px;height:65px;display:grid;place-items:center;border-radius:19px;background:linear-gradient(150deg,var(--theme-primary),#a6a3ff);color:white;font:800 37px var(--font-display);box-shadow:0 13px 25px #6d5bd75b;overflow:hidden}
.phase4-auth-logo img{width:100%;height:100%;object-fit:cover}.phase4-auth-site{font:800 33px var(--font-display);letter-spacing:-1px}.phase4-auth-tagline{font-size:12px;color:#7585a1;margin-top:2px}
.phase4-auth-intro{grid-column:1;grid-row:2 / span 5;background:linear-gradient(145deg,#fff,#eaeaff);border:1px solid #e9e4ff;border-radius:28px;min-height:440px;padding:clamp(27px,4vw,55px);position:relative;box-shadow:0 22px 65px #5a5fc21a;display:flex;flex-direction:column;justify-content:center;gap:20px;overflow:hidden}
.phase4-auth-intro:after{content:'\2728';font-size:160px;position:absolute;right:-28px;bottom:-40px;transform:rotate(-14deg);color:#b5a3ff40;pointer-events:none}
.phase4-feature-badge{background:#e3faf2;border:1px solid #c9eade;color:#178c7b;border-radius:30px;align-self:flex-start;padding:10px 17px;font-size:12px;font-weight:800}
.phase4-auth-intro h2{font-size:clamp(31px,3.5vw,49px);line-height:1.14;letter-spacing:-1.5px;max-width:510px;color:#2a3262}.phase4-auth-intro p{font-size:15px;color:#677895;line-height:1.75;max-width:420px}.phase4-auth-intro .phase4-lang-field{align-self:flex-start}
.phase4-auth-mode .auth-wrap>.eyebrow,.phase4-auth-mode .auth-wrap>.page-title,.phase4-auth-mode .auth-wrap>.page-description,.phase4-auth-mode .auth-wrap>.panel{grid-column:2;grid-row:auto}
.phase4-auth-mode .auth-wrap>.eyebrow{margin:36px 0 0}.phase4-auth-mode .auth-wrap>.page-title{margin:-9px 0 0}.phase4-auth-mode .auth-wrap>.page-description{margin:-10px 0 4px}.phase4-auth-mode .auth-wrap>.panel{padding:32px;box-shadow:0 22px 60px #46507613}
/* The white-label editor and safe preview */
.phase4-design-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.8fr);align-items:start;gap:22px}
.phase4-preview-col{position:sticky;top:22px}.phase4-design-form{padding:27px}.phase4-design-form>.section-title{margin-bottom:22px}.phase4-design-form .form-grid{gap:17px}.phase4-design-form .form-field span{font-weight:700;font-size:12px}.phase4-color{width:100%;height:48px;border:1px solid #d9e2f0;border-radius:11px;background:#fff;cursor:pointer;padding:3px}
.phase4-upload-line{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.phase4-upload-line .field{flex:1;min-width:150px}.phase4-rule{border:0;border-top:1px solid #e6eaf4;margin:27px 0}.phase4-copy-head{display:flex;justify-content:space-between;align-items:end;gap:14px;margin-bottom:18px}.phase4-copy-head .form-field{min-width:150px}.phase4-editor-copy{display:grid;gap:15px}.phase4-editor-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.phase4-preview-label{font-size:11px;font-weight:900;letter-spacing:1.8px;color:#7b88a4;margin-bottom:14px}.phase4-preview-box{padding:18px}.phase4-preview-box>.section-subtitle{margin-top:15px;line-height:1.5}
.phase4-mock{border-radius:19px;overflow:hidden;background:#fff;border:1px solid #e2e6f3}.phase4-mock-head{display:flex;align-items:center;gap:9px;padding:15px;border-bottom:1px solid #eee}.phase4-mock-head strong{font-weight:800;font-size:13px}.phase4-mock-logo{width:28px;height:28px;display:grid;place-items:center;background:var(--preview-primary);color:white;border-radius:9px;overflow:hidden;font-weight:900}.phase4-mock-logo img{width:100%;height:100%;object-fit:cover}.phase4-mock-menu{margin-inline-start:auto;color:#8992a7}
.phase4-mock-hero{background:linear-gradient(120deg,#f1eeff,#ecf9f6);margin:12px;padding:20px 18px;border-radius:15px}.phase4-mock-badge{font-size:9px;font-weight:800;color:#2b9385}.phase4-mock-hero h3{font-size:21px;margin:13px 0;color:#283256;line-height:1.22;overflow-wrap:anywhere}.phase4-mock-hero p{font-size:11px;line-height:1.6;color:#65768d}.phase4-mock-cta{display:inline-block;font-size:10px;font-weight:900;margin-top:15px;border-radius:9px;background:var(--preview-primary);color:white;padding:10px}.phase4-mock-cards{display:flex;gap:9px;margin:12px}.phase4-mock-cards>div{flex:1;text-align:center;background:#f6f8fe;padding:13px 8px;border-radius:12px;font-size:26px;box-shadow:inset 0 2px 3px white,0 3px 8px #dfe7f8}.phase4-mock-cards small{font-size:10px;color:#7888a2}.phase4-mock-footer{display:block;text-align:center;color:#75829c;margin:13px;font-size:10px}
.phase4-history{margin-top:21px}.phase4-history-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #e9edf4;padding:12px 0}.phase4-history-row small{display:block;color:#8997ac;font-size:11px;margin-top:3px}.phase4-history-row strong{font-size:13px}
.phase4-question-media{margin:0 0 23px;border-radius:16px;overflow:hidden;background:#e9edfa;text-align:center}.phase4-question-media img{display:block;max-width:100%;width:auto;max-height:380px;margin:auto;object-fit:contain}.phase4-question-media video,.phase4-question-media iframe{display:block;width:100%;aspect-ratio:16/9;border:0;max-height:460px}
.phase4-builder-media{margin-top:18px;padding:19px;border:1px dashed #c9d4ed;background:#f8faff;border-radius:13px}.phase4-builder-media h4{margin-bottom:15px;color:#4d5877;font-size:14px}
.phase4-rtl{font-family:'DM Sans',Tahoma,Arial,sans-serif}.phase4-rtl .nav-item{text-align:right}.phase4-rtl .hero-visual{left:7%;right:auto}.phase4-rtl .hero-copy{position:relative;z-index:2}
@media(max-width:1120px){.phase4-design-grid{grid-template-columns:1fr}.phase4-preview-col{position:static}.phase4-auth-mode .auth-wrap{gap:14px 35px}}
@media(max-width:760px){.phase4-auth-mode .auth-wrap{display:flex;flex-direction:column;gap:18px}.phase4-auth-brand{margin:0}.phase4-auth-intro{min-height:auto;padding:28px 23px;width:100%}.phase4-auth-intro h2{font-size:30px}.phase4-auth-mode .auth-wrap>.panel,.phase4-auth-mode .auth-wrap>.page-description,.phase4-auth-mode .auth-wrap>.page-title,.phase4-auth-mode .auth-wrap>.eyebrow{width:100%;margin:0}.phase4-auth-mode .auth-wrap>.panel{padding:23px}.phase4-lang-field select{max-width:80px}.topbar-actions{gap:8px}.phase4-copy-head{align-items:start;flex-direction:column}.phase4-design-form{padding:18px}.phase4-auth-mode .content{padding:23px 16px}}
@media(max-width:650px){.mobile-nav{background:#fffef9ed;border-color:#e4e9f3;box-shadow:0 -10px 30px #36427118}.mobile-nav button{color:#7a8ba1}.mobile-nav button.active{color:var(--theme-primary)}.phase4-auth-mode .mobile-nav{display:none}.phase4-auth-mode .content{padding:16px}.phase4-feature-badge{font-size:10px}}