:root{--navy:#102654;--navy2:#1a3a7e;--blue:#2469eb;--blue2:#1861d4;--lav:#7c55e8;--green:#17a871;--orange:#f58a3b;--pink:#ee5c87;--yellow:#efb73e;--dark:#142340;--muted:#61738f;--line:#e7edf8;--bg:#f5f8ff;--white:#fff;--shadow:0 16px 42px rgba(24,48,90,.08);font-family:ui-rounded,'Nunito',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:var(--dark)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit}.shell{min-height:100vh;display:flex}.sidebar{background:linear-gradient(175deg,#163b79,#0b1c40 90%);color:#eff6ff;width:254px;flex:0 0 254px;min-height:100vh;padding:23px 15px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto;z-index:30}.brand{display:block;text-decoration:none;padding:4px 11px 19px;border-bottom:1px solid #ffffff20}.brand-mark{font-size:33px;font-weight:1000;letter-spacing:-1.5px;color:white}.brand-mark span{color:#ffc64a}.brand small{display:block;margin-top:-3px;font-size:12px;color:#d3e7fd}.side-group{margin-top:19px}.side-label{color:#91aad3;font-weight:800;letter-spacing:1.3px;display:block;padding:0 13px 9px;font-size:10px}.nav-btn{width:100%;background:transparent;border:0;color:#e5eeff;display:flex;gap:11px;align-items:center;text-align:left;padding:10px 12px;font-weight:700;font-size:13px;border-radius:11px;margin:1px 0;transition:.15s}.nav-btn span{font-size:19px}.nav-btn:hover{background:#ffffff19}.nav-btn.active{background:#246bf0;box-shadow:0 5px 16px #0002;color:white}.sidebar-bottom{margin-top:auto;padding:17px 6px 0}.aside-tip{background:#ffffff17;border:1px solid #ffffff24;border-radius:14px;padding:12px;line-height:1.5;font-size:12px;color:#dbeafa}.aside-tip span{font-size:19px;display:block}.admin-link{background:none;border:0;color:#d8eaff;font-size:12px;margin-top:18px;text-decoration:underline;text-underline-offset:3px}.credit{display:block;color:#8aa2c6;margin:15px 7px 0;font-size:10px}.screen-overlay{display:none}.main-column{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{height:74px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4%;gap:12px;position:sticky;top:0;z-index:20}.top-title{font-size:16px;font-weight:900}.top-title span{color:var(--blue)}.top-right{display:flex;align-items:center;gap:13px}.connection-pill{background:#e8f8ef;border:1px solid #c6f0d9;color:#21774f;font-size:11px;font-weight:800;border-radius:20px;padding:7px 10px;white-space:nowrap}.connection-pill.demo{background:#fff7e7;color:#946819;border-color:#ffdfa1}.user-pill{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 12px;display:flex;gap:8px;align-items:center;font-size:12px;font-weight:800}.mobile-menu{display:none}.page{width:min(1240px,100%);margin:0 auto;padding:30px clamp(16px,4%,52px) 50px;flex:1;outline:0}.footer{text-align:center;padding:20px 12px 30px;color:#8ca0b9;font-size:11px}.eyebrow{text-transform:uppercase;color:var(--blue);font-weight:1000;font-size:11px;letter-spacing:2px}.h1{font-size:clamp(28px,3.2vw,43px);letter-spacing:-1.4px;line-height:1.13;margin:12px 0 14px;font-weight:1000}.h2{font-size:clamp(22px,2.2vw,29px);margin:3px 0 12px;letter-spacing:-.5px}.muted{color:var(--muted)}.lead{font-size:15px;line-height:1.65;color:var(--muted);max-width:650px}.hero{background:linear-gradient(115deg,#eef3ff 0%,#eaf8ff 50%,#fff2db 100%);border:1px solid #dce7ff;border-radius:25px;min-height:350px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;padding:clamp(20px,4vw,44px);box-shadow:var(--shadow);gap:8px}.hero-copy{position:relative;z-index:2;flex:1}.hero h1{font-size:clamp(28px,3.3vw,47px);line-height:1.14;letter-spacing:-1.5px;margin:12px 0}.hero h1 strong{color:#275fdb}.hero p{color:#50637d;max-width:490px;line-height:1.65;font-size:15px}.hero-mascot{position:relative;min-width:220px;max-width:300px;flex:0 1 300px;text-align:center}.mascot-circle{background:linear-gradient(135deg,#bfdaff,#e4d3ff);height:270px;width:270px;border-radius:50%;display:grid;place-items:center;margin:auto;box-shadow:inset 0 0 0 12px #ffffff66}.mascot-face{font-size:130px;line-height:1;filter:drop-shadow(0 8px 9px #5163a63a)}.speech{position:absolute;right:0;bottom:0;background:white;border-radius:15px;padding:12px 17px;border:1px solid #d8e4ff;box-shadow:var(--shadow);font-weight:900;color:#3d4e67;transform:rotate(-3deg);font-size:13px}.btn{border:0;border-radius:12px;padding:12px 18px;font-weight:900;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform .15s,filter .15s}.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}.btn-primary{color:white;background:linear-gradient(135deg,#2673f5,#1954cf);box-shadow:0 6px 14px #1e63d72f}.btn-green{color:white;background:linear-gradient(135deg,#20be88,#0b9a6e)}.btn-outline{background:white;border:1px solid #cbdaf5;color:#2051a3}.btn-orange{background:#ff923d;color:#fff}.btn-danger{background:#fff0f2;color:#ad3150}.btn-small{padding:8px 11px;font-size:12px;border-radius:9px}.btn-wide{width:100%}.buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:30px 0 15px}.section-top h2{margin:0;font-size:20px;letter-spacing:-.4px}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.topics-grid{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:13px}.topic-card{color:white;border:none;border-radius:17px;padding:17px 12px 14px;text-align:left;min-height:165px;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden;box-shadow:0 12px 20px #183d6b16;transition:transform .2s}.topic-card:hover{transform:translateY(-5px)}.topic-card:after{content:'◯';position:absolute;right:-19px;top:-30px;font-size:130px;opacity:.09}.topic-emoji{font-size:32px;margin-bottom:15px}.topic-card h3{margin:auto 0 8px;font-size:14px}.topic-card small{opacity:.95;line-height:1.4;font-size:11px}.topic-cta{margin-top:11px;background:#ffffff35;width:27px;height:27px;display:grid;place-items:center;border-radius:50%}.card{background:white;border:1px solid var(--line);border-radius:18px;padding:21px;box-shadow:var(--shadow)}.feature-card{display:flex;gap:15px;align-items:flex-start}.feature-icon{font-size:32px;width:61px;height:61px;border-radius:18px;background:#edf3ff;display:grid;place-items:center;flex:none}.feature-card h3{margin:0 0 5px;font-size:16px}.feature-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:900;border-radius:20px;padding:6px 11px;background:#e9efff;color:#2a5bbe}.badge.green{color:#0c8565;background:#e0f9ed}.badge.orange{color:#a86418;background:#fff2d6}.badge.pink{color:#ad3562;background:#fce6ee}.banner{background:linear-gradient(100deg,#1c3a80,#5b4bd8);padding:20px 24px;border-radius:18px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:15px}.banner p{margin:5px 0 0;font-size:13px;color:#d9e6ff}.panel-title{margin-bottom:22px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.panel-title p{margin:0;color:var(--muted);line-height:1.6}.case-card{cursor:pointer;border:1px solid var(--line);transition:transform .15s,border-color .15s;text-align:left;display:flex;flex-direction:column;gap:10px;width:100%;height:100%}.case-card:hover{border-color:#9bbbf9;transform:translateY(-3px)}.case-card .icon-big{font-size:30px}.case-card h3{font-size:16px;margin:0}.case-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55;flex:1}.chip{font-size:11px;font-weight:800;border-radius:7px;padding:5px 9px;background:#ecf1fc;color:#4b6084;display:inline-block}.small-top{display:flex;align-items:center;justify-content:space-between;gap:5px}.stage{max-width:830px;margin:auto}.stage-card{background:white;border:1px solid #e5eefa;border-radius:21px;padding:clamp(19px,3vw,30px);box-shadow:var(--shadow)}.case-illustration{border-radius:17px;background:linear-gradient(125deg,#e6eeff,#fff0de);height:170px;display:flex;justify-content:center;align-items:center;font-size:65px;margin-bottom:20px;position:relative;overflow:hidden}.case-illustration::after{content:'💬';position:absolute;right:18%;top:20px;font-size:39px}.case-illustration::before{content:'✨';position:absolute;left:10%;bottom:22px;font-size:30px}.question-text{font-size:clamp(17px,2vw,22px);font-weight:900;line-height:1.45;margin:15px 0 22px}.choices{display:flex;flex-direction:column;gap:12px}.choice{width:100%;text-align:left;padding:16px 17px;border:1px solid #dfe7f6;border-radius:13px;background:#f9fbff;display:flex;align-items:center;gap:12px;font-weight:700;font-size:14px;color:#26385b;transition:.15s}.choice .letter{width:30px;height:30px;border-radius:50%;background:#dbe6f6;display:grid;place-items:center;font-size:12px;flex:none}.choice:not(:disabled):hover{background:#eaf2ff;border-color:#8bb4f6}.choice.selected{background:#e4efff;border:2px solid #4389ed}.choice.correct{background:#e5fbef;border-color:#47c88b}.choice.correct .letter{background:#11a86f;color:#fff}.choice.wrong{background:#fff0f2;border-color:#f18da5}.choice.wrong .letter{background:#d94b69;color:white}.feedback{border:1px solid #bfe9d6;background:#e7faef;border-radius:15px;padding:17px;line-height:1.6;margin-top:18px;font-size:14px}.feedback.wrong{background:#fff6e8;border-color:#f9dab3}.feedback strong{display:block;font-size:15px;margin-bottom:6px}.progress{height:10px;background:#e9eff9;border-radius:20px;overflow:hidden;min-width:70px}.progress span{display:block;height:100%;background:linear-gradient(90deg,#2a70ff,#17b687);border-radius:20px;transition:width .2s}.quiz-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 15px}.quiz-tools strong{font-size:14px}.wheel-wrap{position:relative;margin:auto;width:min(380px,82vw);aspect-ratio:1}.wheel{width:100%;height:100%;border:12px solid #fff;border-radius:50%;box-shadow:0 15px 45px #18366533,0 0 0 8px #e0eafa;background:conic-gradient(#7655e8 0 20%,#f28a36 20% 40%,#1da877 40% 60%,#e75881 60% 80%,#2b84ed 80% 100%);display:grid;place-items:center;transition:transform 4.2s cubic-bezier(.2,.85,.17,1)}.wheel-hub{background:white;border:9px solid #f4f7ff;border-radius:50%;height:94px;width:94px;display:grid;place-items:center;font-size:40px;box-shadow:0 5px 15px #0002}.wheel-pointer{position:absolute;z-index:4;top:-22px;left:calc(50% - 19px);filter:drop-shadow(0 3px 2px #0003);font-size:40px;color:#132e67}.wheel-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.legend{display:grid;gap:10px;margin-top:20px}.legend-item{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}.legend-item i{width:16px;height:16px;border-radius:5px;display:inline-block}.wheel-result{margin-top:18px;padding:17px;background:#e9f9f1;border-radius:14px;border:1px solid #b9e9ce}.binary-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.bin-btn{border:0;padding:23px 12px;border-radius:17px;font-size:15px;font-weight:900;transition:transform .15s}.bin-btn:hover{transform:translateY(-3px)}.bin-good{background:#e0f9eb;color:#08774e}.bin-bad{background:#ffedf1;color:#bd3853}.result-ring{border-radius:50%;height:165px;width:165px;margin:5px auto 15px;background:conic-gradient(#26bf89 var(--amount),#e8eef8 0);display:grid;place-items:center}.ring-inner{border-radius:50%;background:white;width:123px;height:123px;display:grid;place-items:center;font-weight:1000;font-size:36px}.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.score-cell{background:#f1f6fe;border-radius:14px;padding:15px;text-align:center}.score-cell strong{display:block;font-size:25px;color:#1a3f83}.score-cell small{font-size:11px;color:var(--muted);font-weight:800}.kpi{display:flex;gap:12px;align-items:center}.kpi .ki{border-radius:14px;background:#edf3ff;font-size:23px;width:49px;height:49px;display:grid;place-items:center;flex:none}.kpi strong{display:block;font-weight:1000;font-size:26px;line-height:1.2}.kpi small{font-size:11px;color:var(--muted);font-weight:800}.bar-chart{display:flex;align-items:flex-end;justify-content:space-around;gap:7px;height:215px;padding:22px 0 0}.bar-slot{flex:1;max-width:65px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:7px}.bar-inner{width:85%;min-height:3px;border-radius:8px 8px 0 0;transition:height .3s}.bar-slot small{text-align:center;font-size:10px;font-weight:800;min-height:28px;line-height:1.15;color:var(--muted)}.bar-slot strong{font-size:11px}.table-scroll{overflow-x:auto;border-radius:14px;border:1px solid var(--line)}table{width:100%;border-collapse:collapse;background:white;font-size:12px}th{background:#f0f5ff;color:#51637f;font-weight:900;text-align:left}td,th{padding:12px;white-space:normal;border-bottom:1px solid #edf1fa;vertical-align:middle}tr:last-child td{border-bottom:0}.table-actions{display:flex;gap:7px;flex-wrap:wrap}.filters{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.filters select,.filters input,.form-control{padding:11px 12px;border:1px solid #d8e3f5;border-radius:10px;background:white;min-width:0;color:#233251;outline-color:#3a84ef}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}.form-field label{font-size:12px;font-weight:900;color:#435674}.form-field input,.form-field textarea,.form-field select{width:100%;padding:11px 12px;border:1px solid #d8e3f5;border-radius:10px;background:white;outline-color:#3a84ef;font-size:13px}.form-field textarea{resize:vertical;min-height:95px}.check-line{display:flex;gap:9px;align-items:center;font-size:13px}.modal-overlay{position:fixed;inset:0;background:#061330b3;display:flex;align-items:center;justify-content:center;padding:14px;z-index:90}.modal{background:white;border-radius:22px;padding:25px;max-width:610px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 25px 90px #0005}.modal header{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:20px}.modal header h2{margin:0;font-size:21px}.close{border:0;background:#eef2f9;border-radius:9px;font-size:21px;height:37px;width:37px}.empty{text-align:center;padding:38px 20px;color:var(--muted)}.empty span{display:block;font-size:40px;margin-bottom:10px}.empty h3{color:var(--dark)}#toast{position:fixed;bottom:24px;right:24px;background:#1b346a;color:white;padding:13px 19px;border-radius:12px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(15px);transition:.25s;z-index:100;max-width:350px;font-size:13px}#toast.show{opacity:1;transform:translateY(0)}.loading{padding:70px 20px;text-align:center;color:var(--muted)}.admin-alert{border-radius:13px;padding:12px 16px;background:#fff5e2;color:#825b20;border:1px solid #f4db9d;font-size:13px;line-height:1.5}.special-note{background:#eff6ff;border:1px solid #cee0fa;color:#3d5a89;padding:14px 17px;border-radius:12px;line-height:1.6;font-size:13px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.spaced{margin:20px 0}.text-center{text-align:center}.w100{width:100%}.mt{margin-top:24px}.mb{margin-bottom:20px}.tag{display:inline-block;font-size:10px;padding:4px 7px;background:#e7f9ee;color:#14845b;border-radius:6px;font-weight:900}.tag.off{background:#fff0f2;color:#b43b50}.admin-only{display:none}body.has-admin .admin-only{display:block}
@media(max-width:1170px){.topics-grid{grid-template-columns:repeat(3,minmax(140px,1fr))}.sidebar{width:223px;flex-basis:223px}.page{padding:24px 24px 40px}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.sidebar{position:fixed;top:0;left:0;transform:translateX(-105%);transition:transform .2s;width:min(300px,84vw);height:100dvh}.sidebar.open{transform:translateX(0)}.screen-overlay.open{display:block;position:fixed;inset:0;background:#071b4891;z-index:25}.mobile-menu{display:block;border:0;background:#edf3ff;color:#2456aa;border-radius:9px;height:38px;width:40px;font-size:19px}.topbar{height:65px;padding:0 19px}.top-title{font-size:14px}.page{padding:22px 17px 36px}.hero-mascot{max-width:210px;min-width:160px}.mascot-circle{height:185px;width:185px}.mascot-face{font-size:91px}.speech{font-size:11px}.wheel-layout{grid-template-columns:1fr}.wheel-layout>div:first-child{order:2}}
@media(max-width:580px){.top-title{display:none}.topbar{justify-content:space-between}.connection-pill{font-size:10px;padding:6px}.user-pill{padding:7px 9px}.hero{flex-direction:column;align-items:flex-start;text-align:left;padding:24px 19px;min-height:0}.hero h1{font-size:32px}.hero-mascot{align-self:center;order:-1;flex:auto;min-width:0}.mascot-circle{height:126px;width:126px}.mascot-face{font-size:65px}.speech{right:-75px;bottom:-4px;max-width:150px;font-size:10px;padding:8px}.topics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.topic-card{min-height:150px;padding:14px 12px}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.panel-title{flex-direction:column}.score-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.score-cell{padding:13px 6px}.score-cell strong{font-size:22px}.form-grid{grid-template-columns:1fr}.section-top h2{font-size:19px}.buttons>.btn{flex:1}.stage-card{padding:17px}.wheel-wrap{width:min(300px,77vw)}.table-scroll{margin:0 -4px}.banner{padding:16px}.quiz-tools{flex-wrap:wrap}.modal{padding:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.sidebar,.topbar,.footer,.btn,.admin-link,.filters,.table-actions{display:none!important}.page{padding:0}.card{box-shadow:none;break-inside:avoid}body{background:white}}

/* Vista pública de puntajes */
#score-filter{max-width:100%;font-size:15px}#scores-table .table-scroll{max-height:600px;overflow:auto}#scores-table th{position:sticky;top:0;z-index:1}#scores-table td:nth-child(5){font-size:16px;color:#126f53}#scores-table table{min-width:590px} @media(max-width:580px){#scores-table table{min-width:590px}}
/* Aula9 v4 — Interfaz fiel al boceto aprobado, reconstruida con HTML5/CSS3 */
:root{--navy:#08275b;--navy2:#061d42;--blue:#086bf4;--paper:#f0f8ff;--line:#cae0f8;--ink:#08235c;--muted:#526f96;--radius:14px;--shadow:0 5px 16px #16427610}
html{font-size:14px}body{background:linear-gradient(135deg,#e8f4ff,#f6fbff 55%,#eaf4ff)}
.shell{background:transparent}.sidebar{width:224px;flex-basis:224px;background:linear-gradient(180deg,#09356e 0%,#062757 67%,#082e64 100%);padding:20px 8px 12px;box-shadow:3px 0 10px #1c5a9522;border-right:2px solid #184f8a;overflow-x:hidden}
.brand{padding:0 16px 21px;border:0}.brand-mark{font-size:43px;font-weight:1000;letter-spacing:-2px}.brand-mark span{color:#ffce03}.brand small{font-size:17px;font-weight:800;color:white;margin-top:-8px}
.side-group{margin-top:2px}.nav-btn{font-size:13px;padding:12px 11px;gap:14px;margin:1px 0;border-radius:8px;font-weight:750;line-height:1.35;color:#f1f8ff}.nav-btn span{font-size:23px;font-weight:800;width:26px;text-align:center}.nav-btn:hover{background:#ffffff1d}.nav-btn.active{background:linear-gradient(105deg,#0877ff,#0052d1);box-shadow:inset 0 0 0 1px #318eff,0 5px 15px #001c4f55}
.sidebar-bottom{padding:0 6px;margin-top:auto;position:relative;flex-shrink:0}.sidebar-lumi-art{background:url('/assets/illustrations/lumi_side.png') center top / cover no-repeat;width:205px;height:222px;margin-left:-4px;mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 80%,transparent 100%)}.sidebar-lumi-talk{background:#e3f4ff;border:1px solid #90bcfa;border-radius:14px;color:#143f8a;padding:12px 10px;line-height:1.32;margin:0 3px;box-shadow:0 6px 11px #0003;font-size:12px}.sidebar-lumi-talk strong{font-size:17px;color:#09366c}.credit{color:#b7dafa;font-size:10px;margin:13px 8px 0}
.main-column{background:linear-gradient(115deg,#f5fbff 0%,#e8f4ff 100%)}.topbar{position:relative;height:70px;background:linear-gradient(120deg,#f1f8ff 60%,#e6f5ff);padding:8px 14px 8px 23px;border-bottom:0;gap:12px;align-items:center}
.top-heading{min-width:0;text-align:left}.top-title{font-size:clamp(15px,1.7vw,25px);letter-spacing:-.6px;color:#092968;font-weight:1000;line-height:1.15}.top-heading>small{display:block;color:#315d99;letter-spacing:.1px;margin-top:4px;font-size:12px}.top-right{gap:10px;flex-shrink:0}.top-datetime{background:#f4f9ff;padding:10px 12px;border-radius:13px;color:#092e75;font-size:11px;font-weight:850;text-transform:capitalize;box-shadow:0 1px 0 #9cd0ff}.connection-pill{padding:7px 9px;border-radius:8px;background:#e8f8f1;color:#178a50;font-size:10px}.connection-pill.demo{background:#fff8dd;color:#a16b21}.user-pill{border:0;background:#f4f9ff;border-radius:15px;box-shadow:0 1px 0 #95c5fc;padding:8px 11px;text-align:left;color:#0b2d6b}.user-pill>span:last-child{display:grid;gap:3px}.user-pill strong{font-size:12px}.user-pill small{font-size:10px;font-weight:500}.user-icon{display:inline-flex;border-radius:50%;color:white;background:#1379f6;height:32px;width:32px;align-items:center;justify-content:center}
.page{max-width:none;width:100%;margin:0;padding:0 10px 36px}.footer{padding:13px 8px 20px;color:#7695b6;background:#f0f8ff}
.dashboard-root{display:grid;gap:10px;color:#0a2967}.dashboard-hero-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(325px,1.12fr);gap:10px;min-width:0}.dashboard-hero{border:1px solid #a7d6fa;border-radius:13px;position:relative;overflow:hidden;height:200px;background:linear-gradient(90deg,#52b2fe 0%,#9dd9ff 48%,#90ccea 100%);box-shadow:var(--shadow)}
.dashboard-hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 95%,#d4ee9f88 0%,transparent 31%),linear-gradient(100deg,#2a9aef26 0%,transparent 65%)}
.hero-intro{position:relative;z-index:2;padding:22px 16px 9px 29px;width:52%;text-shadow:0 1px 1px #0d78be22}.small-brand{float:left;margin:0 19px 5px 0;padding:11px 15px;border-radius:15px;background:linear-gradient(#062d66,#061a44);color:white;font-size:29px;font-weight:1000;letter-spacing:-2px;line-height:1}.small-brand span{color:#ffce0d}.small-brand small{display:block;font-size:11px;letter-spacing:0;font-weight:650;margin-top:5px}.hero-intro h1{color:white;font-size:clamp(20px,2.3vw,31px);line-height:1.05;text-shadow:0 2px 3px #134a7a66;margin:2px 0 17px}.hero-intro p{clear:both;color:#072661;font-size:15px;font-weight:1000;line-height:1.4;max-width:345px;margin:0 0 7px}.hero-sub{font-size:11px;color:#164581;max-width:320px;font-weight:700}.hero-lumi{position:absolute;right:18%;bottom:-10px;width:32%;z-index:1;height:100%;display:flex;align-items:end;justify-content:center}.hero-lumi img{width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 0 12px #ffffff44)}.hero-bubble{position:absolute;top:12px;right:4%;z-index:3;background:white;border:1px solid #aacdec;border-radius:16px;padding:11px;font-size:11px;font-weight:800;box-shadow:0 2px 5px #0c4c9222;color:#07255b;max-width:205px}.hero-bubble strong{display:block;text-align:right;font-size:17px;color:#0b3b98;margin-top:5px}
.dashboard-panel{border:1px solid #c5e1fa;background:#fff;border-radius:13px;padding:12px;box-shadow:0 2px 7px #2a7eda0b;min-width:0}.dashboard-panel h3{font-size:14px;letter-spacing:-.4px;color:#0b245a;margin:0 0 9px;font-weight:1000}.dashboard-panel h3 small{font-size:10px;font-weight:600;color:#50719e}.progress-summary{min-height:200px}.progress-flex{display:flex;align-items:center;gap:13px;height:135px}.progress-donut{flex:none;width:124px;height:124px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#10be73 0 var(--amount),#d6e6f6 var(--amount) 100%);position:relative}.progress-donut:before{content:'';background:#fff;width:91px;height:91px;border-radius:50%;position:absolute}.progress-donut strong{z-index:1;font-weight:1000;font-size:30px;color:#092b70}.progress-entries{flex:1;display:grid;gap:8px;min-width:0}.prog-entry{display:flex;align-items:center;gap:8px}.prog-entry>span{display:grid;place-items:center;color:#fff;border-radius:8px;width:28px;height:28px;flex:0 0 28px;font-size:18px}.prog-entry>div{min-width:0;flex:1}.prog-entry>div>div:first-child{display:flex;justify-content:space-between;gap:4px;color:#19407a}.prog-entry small{font-size:10px;font-weight:700}.prog-entry b{font-size:10px}.prog-entry .progress{height:8px;margin-top:3px;background:#d5e7f9}.prog-entry .progress span{background:#138af7}.prog-entry:nth-child(2) .progress span{background:#f8358c}.prog-entry:nth-child(3) .progress span{background:#1bc988}.prog-entry:nth-child(4) .progress span{background:#ff9933}.dashboard-note{font-size:9px;color:#5880a8}
.game-and-activity{display:grid;grid-template-columns:minmax(0,4fr) minmax(225px,1fr);gap:9px}.games-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-width:0}.game-card{border-radius:13px;padding:12px;min-height:288px;display:flex;flex-direction:column;min-width:0;box-shadow:0 2px 8px #2255aa10;border:1px solid #c9dcfc;background:white}.card-purple{background:linear-gradient(180deg,#fff 0,#f2ecff 100%)}.card-pink{background:linear-gradient(180deg,#fff 0,#fff0f7 100%)}.card-green{background:linear-gradient(180deg,#fff 0,#eafaF3 100%)}.card-yellow{background:linear-gradient(180deg,#fff 0,#fff7e4 100%)}.game-title{display:flex;align-items:center;gap:8px;margin-bottom:6px}.game-title span{background:#8241f5;color:white;display:grid;place-items:center;width:41px;height:41px;border-radius:9px;font-size:24px;flex-shrink:0}.card-pink .game-title span{background:#ff268d}.card-green .game-title span{background:#10b962}.card-yellow .game-title span{background:#ffb000}.game-title h2{font-size:clamp(13px,1.1vw,16px);color:#4215b8;font-weight:1000;margin:0;line-height:1.13;letter-spacing:-.6px}.card-pink .game-title h2{color:#dd0e63}.card-green .game-title h2{color:#006c2c}.card-yellow .game-title h2{color:#c25c00}.game-art{height:115px;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:9px;margin:0 0 6px}.game-art>img{width:100%;height:100%;object-fit:contain}.game-card p{font-size:11px;line-height:1.45;color:#173c75;margin:7px 0 12px;min-height:30px}.game-card-foot{margin-top:auto}.game-card-foot small{font-weight:750;font-size:9px;color:#24487d}.game-card .progress{height:8px;margin:5px 0 7px;border-radius:8px;background:#d3e3f8}.game-card .progress span{background:linear-gradient(95deg,#983cff,#7133e9)}.card-pink .progress span{background:linear-gradient(95deg,#ff3f96,#d80067)}.card-green .progress span{background:linear-gradient(95deg,#0acf82,#0bac58)}.card-yellow .progress span{background:linear-gradient(95deg,#ffce06,#f4a000)}.game-button{border:0;color:white;border-radius:9px;font-size:12px;font-weight:950;padding:10px 4px;width:100%;background:linear-gradient(110deg,#a042ff,#6f27e7);transition:filter .15s,transform .15s}.game-button:hover{transform:translateY(-2px);filter:brightness(1.06)}.card-pink .game-button{background:linear-gradient(95deg,#ff3a9c,#ec0076)}.card-green .game-button{background:linear-gradient(95deg,#18ce86,#00a65b)}.card-yellow .game-button{background:linear-gradient(95deg,#ffc50d,#ff9900)}
.home-wheel{width:116px;height:116px;border-radius:50%;position:relative;box-shadow:0 0 0 5px white,0 7px 8px #69278448;background:conic-gradient(#f02d88 0 72deg,#8d29e4 72deg 144deg,#ffac23 144deg 216deg,#1d86ff 216deg 288deg,#19bf81 288deg 360deg);display:grid;grid-template-columns:repeat(2,1fr);align-items:center;justify-items:center;transform:rotate(20deg)}.home-wheel span{font-size:18px;filter:drop-shadow(0 1px 1px #0034);color:white}.home-wheel span:nth-child(5){position:absolute;right:18%;top:36%}.home-wheel i{position:absolute;left:calc(50% - 11px);top:calc(50% - 11px);width:22px;height:22px;background:#183875;border:4px solid #b5b6c1;border-radius:50%;box-shadow:0 2px 2px #0004}.home-wheel:after{content:'';width:5px;height:63px;position:absolute;bottom:50%;left:calc(50% - 2px);background:linear-gradient(#102956,#fff0);z-index:-1}
.activity-panel{min-width:0;padding:12px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:5px}.panel-head h3{margin:0 0 10px}.link-btn{border:1px solid #bbd8f8;color:#166be4;background:white;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:800;white-space:nowrap}.activity-feed{display:grid}.activity-feed>div:not(.no-activity){display:flex;gap:7px;align-items:center;padding:12px 0;border-bottom:1px solid #e2ecf9;min-width:0}.activity-feed>div>span{height:34px;width:34px;background:#e7efff;display:grid;place-items:center;border-radius:9px;flex-shrink:0}.activity-feed>div>div{flex:1;min-width:0}.activity-feed strong{font-size:11px;display:block;line-height:1.4;color:#163867}.activity-feed small{font-size:10px;display:block;color:#5a7395;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-feed time{font-size:9px;color:#3869a1;white-space:nowrap}.no-activity{background:#f4f9ff;color:#6b89b0;border-radius:8px;padding:12px;margin-top:14px;font-size:11px}
.metrics-panel{border:1px solid #c7e2fd;background:#fff;border-radius:13px;padding:9px 13px}.metrics-panel>h2{margin:0 0 10px;font-size:14px;font-weight:1000;color:#072664}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.metric{display:grid;grid-template-columns:50px auto;grid-template-rows:auto auto;gap:1px 11px;align-items:center;background:linear-gradient(#fbfdff,#f0f7ff);border:1px solid #e0edfa;border-radius:10px;padding:9px;min-width:0}.metric-ico{grid-row:1 / 3;display:grid;place-items:center;color:white;font-size:25px;font-weight:900;height:46px;width:46px;border-radius:10px}.metric-ico.blue{background:linear-gradient(135deg,#30a2ff,#065ce4)}.metric-ico.green{background:linear-gradient(135deg,#34e998,#0cad59)}.metric-ico.gold{background:linear-gradient(135deg,#ffd939,#feb000)}.metric-ico.violet{background:linear-gradient(135deg,#a15aff,#722cf3)}.metric strong{font-size:22px;color:#14346e}.metric small{font-size:10px;color:#295488}
.dashboard-graphs{display:grid;grid-template-columns:minmax(0,1.17fr) minmax(0,1.06fr) minmax(0,1.1fr);gap:9px}.dashboard-graphs>.dashboard-panel{min-height:180px}.bar-chart{display:flex;gap:8px;align-items:end;height:136px;justify-content:space-around;background:repeating-linear-gradient(to top,transparent 0,transparent 29px,#edf5fd 30px);border-bottom:1px solid #cadcf1;padding:0 3px}.bar-item{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.bar-item>strong{font-size:10px;font-weight:900;color:#164078;margin-bottom:2px}.bar-track{height:91px;width:min(44px,90%);display:flex;flex-direction:column;justify-content:flex-end}.bar-fill{border-radius:6px 6px 0 0;width:100%;min-height:1px;transition:height .4s}.bar-item>small{font-size:9px;line-height:1.2;color:#42618a;text-align:center;min-height:36px;margin-top:4px;overflow-wrap:anywhere}.chart-hint{font-size:9px;color:#6d87a5;margin:7px 0 0}
.distribution{display:flex;align-items:center;justify-content:center;gap:18px;min-height:140px}.donut{width:125px;height:125px;flex:0 0 125px;border-radius:50%;display:grid;place-items:center}.donut>div{width:78px;height:78px;border-radius:50%;display:grid;align-content:center;justify-items:center;background:#fff}.donut strong{font-size:26px;color:#0c3874}.donut small{font-size:10px;color:#315782}.dist-list{flex:1;min-width:0;display:grid;gap:10px}.dist-list>div{display:flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap}.dist-list i{width:14px;height:14px;border-radius:50%;flex-shrink:0}.dist-list span{flex:1}.dist-list strong{color:#214879}
.compact-table{width:100%;border-collapse:collapse;font-size:10px}.compact-table th{text-align:left;font-size:10px;background:#e9f3fe;color:#173d70;padding:6px}.compact-table td{border-bottom:1px solid #e5effa;color:#315781;padding:6px}.compact-table tr:nth-child(even){background:#f7fbff}.empty-td{text-align:center;padding:20px!important}.dashboard-bottom{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:9px}.achievement-row{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:17px 2px 5px}.achievement-row>div{flex:1;min-width:0;text-align:center}.achievement-row span{width:40px;height:46px;display:grid;place-items:center;border:3px solid #fff;outline:1px solid #c5e0f7;border-radius:35%;margin:0 auto 7px;background:var(--c);color:white;font-size:24px;box-shadow:0 3px 7px #0002}.achievement-row small{font-size:10px;line-height:1.1;font-weight:800;display:block;color:#184080}.resource-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.resource-mini-grid button{background:linear-gradient(#f8fbff,#eaf4ff);border:1px solid #dce9fa;border-radius:9px;display:grid;justify-items:center;gap:2px;padding:8px 3px;min-width:0}.resource-mini-grid span{font-size:24px}.resource-mini-grid strong{font-size:10px;color:#1c4686}.resource-mini-grid small{font-size:9px;color:#597da8;text-align:center}.dashboard-offline{font-size:11px;color:#7c5a20;background:#fff6df;border:1px solid #ffe1a1;border-radius:10px;padding:10px 13px}.material-card{min-height:185px}.material-icon{font-size:33px;margin-bottom:9px}.about-card{line-height:1.8;max-width:800px}
/* Keep playable views visually aligned with the dashboard */
.page>.panel-title,.page>.stage,.page>.card,.page>.grid,.page>.filters,.page>.topics-grid{margin:16px auto}.panel-title{padding:14px 12px}.heading{color:#09296b}.card,.stage-card{border:1px solid #c8e1fa;box-shadow:0 3px 9px #2255aa10}.btn{border-radius:10px}.wheel{box-shadow:0 0 0 9px #f4f9ff,0 12px 22px #2255aa22}
@media (max-width:1320px){.sidebar{width:204px;flex-basis:204px}.top-datetime{display:none}.connection-pill{max-width:155px;overflow:hidden;text-overflow:ellipsis}.progress-donut{width:95px;height:95px}.progress-donut:before{width:70px;height:70px}.progress-donut strong{font-size:24px}.dashboard-hero-row{grid-template-columns:minmax(0,1.65fr) minmax(300px,1.1fr)}.game-and-activity{grid-template-columns:minmax(0,4fr) minmax(190px,1fr)}.game-card{padding:9px}.game-title span{width:33px;height:33px;font-size:20px}.game-art{height:107px}.game-title h2{font-size:13px}}
@media (max-width:1080px){.topbar{padding:8px 12px}.top-heading>small{display:none}.dashboard-hero-row{grid-template-columns:1fr}.dashboard-hero{height:210px}.progress-summary{min-height:136px}.progress-flex{height:auto}.progress-entries{grid-template-columns:repeat(2,minmax(0,1fr))}.game-and-activity{grid-template-columns:1fr}.activity-panel{display:block}.activity-feed{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.games-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboard-graphs{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-bottom .dashboard-panel:last-child{grid-column:1/-1}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar-bottom{display:none}}
@media (max-width:760px){.sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;flex-basis:auto;height:100vh;transform:translateX(-102%);transition:transform .2s;z-index:60}.sidebar.open{transform:translateX(0)}.sidebar-bottom{display:block}.screen-overlay{display:none;position:fixed;inset:0;background:#031c4380;z-index:50}.screen-overlay.open{display:block}.mobile-menu{display:grid;place-items:center;width:35px;height:35px;background:#e9f4ff;color:#0d53aa;border:1px solid #bfd7f0;border-radius:9px}.topbar{height:65px;position:sticky;top:0;z-index:20}.top-title{font-size:14px;white-space:normal}.top-heading{flex:1}.top-right .connection-pill{display:none}.top-right .user-pill small{display:none}.user-pill{padding:5px 8px}.user-icon{height:28px;width:28px}.page{padding:10px 9px 28px}.dashboard-hero-row{grid-template-columns:1fr}.dashboard-hero{height:220px}.hero-intro{width:64%;padding:18px}.small-brand{font-size:20px;padding:9px;margin-right:7px}.small-brand small{font-size:8px}.hero-intro h1{font-size:21px}.hero-intro p{font-size:12px}.hero-sub{font-size:10px}.hero-lumi{width:47%;right:0}.hero-bubble{font-size:9px;top:9px;right:3px;padding:7px;max-width:120px}.hero-bubble strong{font-size:12px}.progress-summary{min-height:unset}.progress-donut{width:86px;height:86px}.progress-donut:before{width:62px;height:62px}.progress-donut strong{font-size:19px}.games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card{min-height:285px}.game-art{height:115px}.game-card h2{font-size:14px}.dashboard-graphs{grid-template-columns:1fr}.dashboard-bottom{grid-template-columns:1fr}.dashboard-bottom .dashboard-panel:last-child{grid-column:auto}.activity-feed{grid-template-columns:1fr}.top-datetime{display:none}}
@media (max-width:390px){.page{padding:7px 5px}.games-grid{gap:6px}.game-card{padding:8px;min-height:275px}.game-title h2{font-size:12px}.game-title span{width:29px;height:29px;font-size:18px}.game-art{height:100px}.game-button{font-size:11px}.progress-entries{grid-template-columns:1fr}.hero-bubble{display:none}.hero-intro{width:67%}.metric{grid-template-columns:38px auto;gap:5px}.metric-ico{width:35px;height:35px;font-size:18px}.metric strong{font-size:18px}.metric small{font-size:9px}}