:root{--purple:#7658e8;--purple2:#9a82f4;--teal:#2dbdb4;--mint:#7edfc6;--yellow:#ffd45f;--orange:#ff9b68;--pink:#ef79ad;--blue:#62b8f0;--ink:#26314b;--muted:#748097;--line:#e4e8f1;--paper:#fff;--bg:#f6f7fc;--shadow:0 20px 50px rgba(48,56,90,.12);--soft-shadow:0 10px 26px rgba(48,56,90,.08)}
*{box-sizing:border-box}html{scroll-behavior:auto;background:var(--bg)}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);min-height:100vh;overflow-x:hidden}.app-bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 10% 10%,rgba(118,88,232,.13),transparent 30%),radial-gradient(circle at 90% 18%,rgba(45,189,180,.12),transparent 28%),radial-gradient(circle at 75% 90%,rgba(239,121,173,.1),transparent 30%),#f7f8fc}.shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:30;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(255,255,255,.84);backdrop-filter:blur(14px);border-bottom:1px solid rgba(224,228,239,.75)}.brand-button{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer}.brand-logo{width:35px;height:35px}.brand-name{font-weight:950;font-size:18px;letter-spacing:.04em}.topbar-right{display:flex;gap:10px;align-items:center}.tiny-pill{padding:8px 11px;background:#f1efff;color:#6758ca;border-radius:999px;font-size:11px;font-weight:850}.home-link{border:0;background:#fff;border:1px solid var(--line);color:#5f6980;border-radius:12px;padding:9px 12px;font-weight:800;cursor:pointer}
main{width:100%}.view{display:none;min-height:calc(100vh - 70px);padding:0}.view.active{display:flex;flex-direction:column}.landing-view{min-height:100vh;align-items:center;justify-content:center;position:relative;overflow:hidden}.landing-mode .topbar{display:none}.landing-mode .view{min-height:100vh}.landing-card{position:relative;width:min(760px,calc(100% - 34px));padding:54px 44px 50px;text-align:center;background:rgba(255,255,255,.83);border:1px solid rgba(255,255,255,.9);box-shadow:0 28px 90px rgba(67,57,133,.18);backdrop-filter:blur(14px);border-radius:42px;overflow:hidden}.landing-card:before{content:"";position:absolute;width:190px;height:190px;left:-55px;bottom:-70px;border-radius:50%;background:rgba(255,212,95,.42)}.landing-card:after{content:"";position:absolute;width:160px;height:160px;right:-45px;top:-60px;border-radius:50%;background:rgba(126,223,198,.4)}.landing-logo{position:relative;width:95px;height:95px;z-index:1;filter:drop-shadow(0 12px 18px rgba(118,88,232,.2))}.landing-kicker{position:relative;margin-top:8px;color:#7f73cf;letter-spacing:.22em;font-size:12px;font-weight:950;z-index:1}.landing-card h1{position:relative;margin:12px 0 15px;font-size:clamp(42px,7vw,68px);line-height:.98;letter-spacing:-.055em;z-index:1}.landing-card h1 span{color:var(--purple)}.landing-copy{position:relative;color:var(--muted);font-size:15px;font-weight:650;z-index:1}.start-button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:14px;border:0;border-radius:20px;padding:17px 27px;background:linear-gradient(135deg,var(--purple),#8d70f0);color:#fff;font-weight:950;font-size:18px;box-shadow:0 17px 34px rgba(118,88,232,.26);cursor:pointer;transition:.2s;margin-top:22px}.start-button:hover{transform:translateY(-3px);box-shadow:0 22px 40px rgba(118,88,232,.34)}.start-arrow{font-size:22px}.landing-orbit{position:absolute;font-weight:900;opacity:.78;animation:floaty 5s ease-in-out infinite}.orb-one{left:10%;top:21%;font-size:38px;color:var(--yellow)}.orb-two{right:13%;top:20%;font-size:42px;color:var(--pink);animation-delay:1s}.orb-three{left:14%;bottom:18%;font-size:28px;color:var(--teal);animation-delay:2s}
.screen-wrap{width:min(1180px,100%);margin:0 auto;padding:34px 24px 60px}.screen-wrap.narrow{width:min(860px,100%)}.section-headline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.back-link{background:none;border:0;color:#667189;font-weight:850;cursor:pointer;padding:6px 0}.role-tag{padding:8px 11px;border-radius:999px;font-size:11px;font-weight:950}.role-tag.teacher{background:#ece9ff;color:#6355c1}.role-tag.parent{background:#fff0f6;color:#bb5481}.screen-title{margin:0 0 18px}.screen-title.center{text-align:center}.screen-title h2,.teacher-hero h2,.skillHeader h2{font-size:34px;line-height:1.02;letter-spacing:-.04em;margin:7px 0}.screen-title p,.teacher-hero p,.skillHeader p{color:var(--muted);line-height:1.65;margin:0;max-width:780px}.eyebrow{font-size:11px;letter-spacing:.12em;color:#8b95a9;font-weight:950;text-transform:uppercase}.panel-grid{display:grid;gap:15px}.panel-choice{display:grid;grid-template-columns:62px 1fr 28px;gap:15px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:26px;padding:18px 20px;box-shadow:var(--soft-shadow);cursor:pointer;text-align:left;transition:.18s}.panel-choice:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.panel-choice-icon{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;font-size:28px}.teacher-choice .panel-choice-icon{background:#e8f7ff}.parent-choice .panel-choice-icon{background:#fff0f6}.admin-choice .panel-choice-icon{background:#f2f3f7}.panel-choice strong{display:block;font-size:17px}.panel-choice span{display:block;color:var(--muted);font-size:12px;margin-top:5px;line-height:1.45}.panel-choice b{font-size:24px;color:#9ba4b3}.panel-choice.disabled{opacity:.5;cursor:default;filter:saturate(.5)}
.teacher-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px;background:linear-gradient(135deg,#eef6ff,#fff7f0 60%,#effbf7);border:1px solid #e5ebf5;border-radius:30px;box-shadow:var(--soft-shadow)}.teacher-illustration{font-size:58px;letter-spacing:8px}.selector-card{position:relative;margin:16px 0 19px}.selector-button{width:100%;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;padding:15px 16px;border:2px solid #dfe4ef;background:#fff;border-radius:20px;box-shadow:var(--soft-shadow);cursor:pointer;text-align:left}.selector-button:hover{border-color:#b9aff4}.selector-icon{width:42px;height:42px;border-radius:14px;background:#f2efff;display:grid;place-items:center;font-size:20px}.selector-button span:nth-child(2){font-weight:950;font-size:15px}.selector-chevron{font-size:24px;color:#8f98a9}.picker-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);display:none;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 22px 45px rgba(44,54,84,.16);padding:8px;z-index:15;max-height:390px;overflow:auto}.picker-menu.open{display:grid;gap:6px}.picker-item{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:12px;width:100%;border:0;background:#fff;border-radius:15px;padding:9px;text-align:left;cursor:pointer}.picker-item:hover{background:#f6f4ff}.picker-item strong{display:block;font-size:13px}.picker-item small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.picker-item b{font-size:12px;color:#7b6dd0}.picker-avatar-img{width:50px;height:50px;object-fit:cover;border-radius:16px;background:#edf2f7}.detail-area.hidden,.child-step.hidden{display:none}.student-profile-card{background:#fff;border:1px solid var(--line);border-radius:30px;padding:23px;box-shadow:var(--shadow)}.student-profile-top{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:15px}.big-avatar{width:72px;height:72px;border-radius:23px;overflow:hidden;background:#f0efff;display:grid;place-items:center}.profile-img{width:100%;height:100%;object-fit:cover}.student-profile-top h2{margin:5px 0 2px;font-size:27px}.student-profile-top p{margin:0;color:var(--muted);font-size:12px}.profile-score{text-align:right}.profile-score small{display:block;color:var(--muted);font-size:11px}.profile-score strong{font-size:34px;color:var(--purple)}.profile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.info-block{background:#fafbff;border:1px solid #eef1f6;border-radius:17px;padding:14px}.info-block span{display:block;color:#8b94a6;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.info-block b{display:block;font-size:12px;margin-top:6px;line-height:1.45}.info-block small{display:block;color:var(--muted);font-size:10px;margin-top:4px;line-height:1.45}.student-insight{display:flex;gap:12px;align-items:flex-start;margin-top:13px;padding:15px 17px;background:linear-gradient(135deg,#f3f0ff,#edfcf7);border-radius:19px}.student-insight>span{font-size:22px}.student-insight strong{font-size:11px}.student-insight p{margin:4px 0 0;color:#647087;font-size:12px;line-height:1.6}.teacher-actions,.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.primary-action,.soft-action,.secondary-action,.hint-button,.sound-button{border:0;border-radius:15px;padding:12px 16px;font-weight:900;cursor:pointer}.primary-action{background:linear-gradient(135deg,var(--purple),#8d70f0);color:#fff;box-shadow:0 10px 22px rgba(118,88,232,.2)}.soft-action{background:#f0f2f8;color:#536077}.secondary-action{background:#eaf8f5;color:#2b8b77}.hint-button{background:#fff6d7;color:#8a6810}.sound-button{background:#eefcf9;color:#2b8b77}.wide{min-width:190px}.history-mini{margin-top:16px}.mini-chart{height:80px;display:flex;align-items:end;gap:9px;padding:5px 2px}.mini-col{height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:4px;flex:1}.mini-bar{width:min(38px,80%);background:linear-gradient(180deg,var(--teal),var(--purple));border-radius:10px 10px 4px 4px;display:flex;align-items:start;justify-content:center;color:#fff;font-size:9px;padding-top:4px;min-height:12px}.mini-col small{font-size:9px;color:#a0a8b6}.empty-mini{padding:13px;border-radius:14px;background:#fafbff;color:#9aa2b2;font-size:11px;text-align:center}
.lesson-grid,.skill-grid{display:grid;grid-template-columns:1fr;gap:13px}.lesson-card,.skill-card{display:grid;grid-template-columns:58px 1fr 26px;align-items:center;gap:14px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:24px;padding:17px;box-shadow:var(--soft-shadow);cursor:pointer;transition:.18s}.lesson-card:hover,.skill-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.lesson-icon,.skill-icon{width:56px;height:56px;border-radius:19px;display:grid;place-items:center;font-size:26px}.lesson-card.blue .lesson-icon{background:#e8f7ff}.lesson-card.teal .lesson-icon{background:#e8fbf7}.lesson-card.pink .lesson-icon{background:#fff0f6}.lesson-card strong,.skill-card strong{display:block;font-size:16px}.lesson-card span,.skill-card span{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:4px}.lesson-card small,.skill-card small{display:block;color:#8d97a8;font-size:10px;margin-top:6px}.lesson-card b,.skill-card>b{color:#9ca5b4;font-size:23px}.skill-index{width:34px;height:34px;border-radius:12px;background:#f1efff;color:#6758c9;display:grid;place-items:center;font-size:11px;font-weight:950}.skill-card{grid-template-columns:38px 58px 1fr 25px}
.activity-wrap{max-width:1020px}.activity-head-right{display:flex;gap:8px;align-items:center}.level-pill,.stage-pill{padding:8px 10px;border-radius:999px;font-size:10px;font-weight:950}.level-pill{background:#e9f8f5;color:#2e8c79}.stage-pill{background:#eeecff;color:#6258bd}.activity-header-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-radius:27px;background:linear-gradient(135deg,#eef7ff,#fbf2ff 55%,#f0fff9);border:1px solid #e5eaf3}.activity-student{display:inline-flex;align-items:center;gap:8px;color:#6b5ac7;font-weight:950;font-size:12px;margin-bottom:8px}.activity-avatar-img{width:34px;height:34px;border-radius:12px;object-fit:cover}.activity-header-card h2{font-size:28px;margin:3px 0}.activity-header-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.progress-line{height:9px;border-radius:999px;background:#e8ebf3;margin:13px 0;overflow:hidden}.progress-line>div{height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--teal),var(--yellow));border-radius:inherit;transition:.35s}.activity-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:30px;padding:24px;box-shadow:var(--shadow)}.activity-meta{display:flex;justify-content:space-between;color:#738096;font-weight:850;font-size:11px}.activity-content{text-align:center;padding:16px 4px 10px}.visual-scene{min-height:128px;display:grid;place-items:center}.visual-bubble{min-width:190px;min-height:112px;padding:18px 25px;border-radius:28px;background:linear-gradient(135deg,#f0edff,#eafcf8 60%,#fff8de);display:grid;place-items:center;font-size:50px;box-shadow:inset 0 0 0 2px rgba(118,88,232,.08)}.instruction{font-size:23px;font-weight:950;letter-spacing:-.02em;margin-top:3px}.instruction-sub{color:var(--muted);font-size:12px;margin-top:7px}.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;max-width:760px;margin:20px auto 10px}.option{background:#fbfcff;border:2px solid #e7eaf2;border-radius:20px;padding:15px;font-weight:900;color:#47536b;min-height:65px;transition:.18s;cursor:pointer}.option:hover{transform:translateY(-2px);border-color:#b8adf3}.option.correct{border-color:#43c99a;background:#e8fbf3;animation:pop .3s}.option.wrong{border-color:#ef92aa;background:#fff0f5;animation:shake .28s}.option.hint-target{border-color:#efbd42;background:#fff7d5;box-shadow:0 0 0 6px rgba(255,207,81,.24),0 0 28px rgba(255,190,74,.45);animation:pulseHint 1s infinite}.blank-space{display:inline-block;min-width:90px;border-bottom:4px dotted #8a7ce4;color:#8a7ce4}.picture-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;max-width:760px;margin:20px auto}.picture-card{background:#fff;border:2px solid #e5e8f0;border-radius:22px;padding:15px;min-height:135px;cursor:pointer;transition:.18s}.picture-card:hover{transform:translateY(-3px);border-color:#b9aff4}.picture-art{display:block;font-size:42px;line-height:1.4}.picture-card.correct{border-color:#43c99a;background:#e9fbf3}.picture-card.wrong{border-color:#ef92aa;background:#fff0f5}.picture-card.hint-target{border-color:#efbd42;box-shadow:0 0 0 6px rgba(255,207,81,.24),0 0 28px rgba(255,190,74,.45);animation:pulseHint 1s infinite}.match-board,.order-board{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:20px auto}.match-board h4{margin:0 0 8px;color:#8590a5;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.drag-source,.drop-zones{display:grid;gap:10px}.drag-chip,.drop-zone{min-height:56px;border-radius:18px;border:2px dashed #dfe3ee;background:#fafbff;padding:13px 15px;font-weight:900;display:flex;align-items:center;justify-content:center;cursor:grab}.drag-chip{border-style:solid;background:#f2efff;color:#6154c0}.drag-chip.used{opacity:.35;pointer-events:none}.drop-zone{color:#7d8799}.drop-zone span{font-size:26px}.drop-zone.match-correct{border-style:solid;border-color:#4bc89d;background:#e9fbf3;color:#2e8e6d;flex-direction:column;gap:2px}.drop-zone.match-correct span{font-size:18px}.drop-active{border-color:#8c7ce4!important;background:#f1efff!important}.match-wrong{animation:shake .3s;border-color:#ef92aa!important;background:#fff0f5!important}.order-board{grid-template-columns:1fr 1.25fr}.order-pool,.drop-order{min-height:230px;border-radius:22px;padding:14px;background:#fbfcff;border:2px dashed #dfe3ee;display:grid;align-content:start;gap:10px}.order-item{background:#fff;border:2px solid #e4e8f0;border-radius:16px;padding:13px 14px;font-weight:900;cursor:grab;display:flex;justify-content:space-between;align-items:center;box-shadow:0 5px 12px rgba(45,52,80,.04)}.order-item:hover{border-color:#b9aff4}.order-item span{color:#9aa2b2}.drop-title{text-align:center;color:#98a1b2;font-size:12px;padding:10px}.order-correct{border-color:#48c99c;background:#effcf6}.order-wrong{animation:shake .32s;border-color:#ef92aa;background:#fff0f5}.hint-target-zone{border-color:#efbd42;box-shadow:0 0 0 6px rgba(255,207,81,.24),0 0 28px rgba(255,190,74,.35);animation:pulseHint 1s infinite}.activity-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:15px}.feedback{max-width:760px;margin:12px auto 0;border-radius:18px;padding:13px 15px;font-weight:900}.feedback.good{background:#eafbf3;color:#2e8e6d}.feedback.retry{background:#fff6de;color:#7b6525}.hint-panel{max-width:760px;margin:12px auto 0}.hint-alert{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:18px;background:linear-gradient(135deg,#fff9de,#fff1ba);border:2px solid #efcf61;box-shadow:0 10px 22px rgba(226,177,46,.15);animation:hintAppear .25s}.hint-icon{width:42px;height:42px;border-radius:14px;background:#ffd365;display:grid;place-items:center;font-size:22px}.hint-alert strong{display:block;color:#8b690d;font-size:11px;letter-spacing:.08em}.hint-alert p{margin:3px 0 0;color:#715a1f;font-size:12px}.celebration{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.88);opacity:0;pointer-events:none;z-index:80;width:min(440px,calc(100vw - 34px));padding:26px;text-align:center;border-radius:30px;background:rgba(255,255,255,.96);box-shadow:0 35px 90px rgba(69,61,122,.28);border:2px solid #f4ecff}.celebration.show{opacity:1;transform:translate(-50%,-50%) scale(1);transition:.25s}.celebration-stars{font-size:32px;color:var(--yellow);letter-spacing:10px;animation:starPulse .9s infinite}.celebration #celebrationText{font-size:22px;font-weight:950;color:#5b4fc0;margin-top:8px}
.result-hero{display:grid;grid-template-columns:1.3fr .7fr;gap:15px}.result-main,.result-score{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:24px}.success-chip{background:#eafbf3;color:#2e8e6d;padding:8px 11px;border-radius:999px;font-size:11px;font-weight:950}.result-person{display:flex;align-items:center;gap:14px;margin-top:14px}.result-avatar-img{width:62px;height:62px;border-radius:20px;object-fit:cover}.result-main h2{font-size:29px;margin:0}.result-main p{margin:4px 0;color:var(--muted);font-size:12px}.result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.result-metrics div{background:#fafbff;border:1px solid #eef0f7;border-radius:17px;padding:13px}.result-metrics span{display:block;color:var(--muted);font-size:10px}.result-metrics strong{font-size:22px}.analysis-box{margin-top:14px;padding:15px;border-radius:19px;background:linear-gradient(135deg,#f4f1ff,#edfdf8)}.analysis-box p{margin:7px 0 0;color:#5a6680;line-height:1.6;font-size:12px}.result-score{display:grid;place-items:center;align-content:center;text-align:center}.score-ring{width:180px;height:180px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--purple) var(--score),#ececf4 0);position:relative}.score-ring:before{content:"";position:absolute;inset:15px;border-radius:50%;background:#fff}.score-ring strong{position:relative;font-size:37px}.result-score>span{margin-top:13px;font-weight:950}.result-score small{margin-top:4px;color:var(--muted)}
.parent-welcome{display:flex;gap:15px;align-items:center;padding:22px;background:linear-gradient(135deg,#fff4f8,#f4f1ff);border-radius:26px;border:1px solid #f0e7fa}.parent-welcome-icon{width:58px;height:58px;border-radius:18px;background:#fff;display:grid;place-items:center;font-size:29px;box-shadow:var(--soft-shadow)}.parent-welcome h2{margin:4px 0;font-size:28px}.parent-welcome p{margin:0;color:var(--muted);line-height:1.55}.child-step{margin-top:15px}.child-select-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;box-shadow:var(--soft-shadow)}.child-step-icon{width:56px;height:56px;border-radius:18px;overflow:hidden;background:#eef2f7;display:grid;place-items:center}.child-match-img{width:100%;height:100%;object-fit:cover}.child-select-card h3{margin:4px 0;font-size:18px}.child-select-card p{margin:0;color:var(--muted);font-size:11px}.child-name-button{background:#efedff;color:#6255c2;border:0;border-radius:15px;padding:12px 14px;font-weight:950;cursor:pointer}.parent-page-header{padding:22px 24px;background:linear-gradient(135deg,#fff4fa,#f3f1ff,#effbf7);border:1px solid #ece7f3;border-radius:28px}.parent-page-header h2{margin:6px 0;font-size:28px}.parent-page-header p{margin:0;color:var(--muted);font-size:12px}.parent-summary-banner{display:flex;gap:12px;align-items:flex-start;background:#eefbf6;border:1px solid #d9f1e8;border-radius:22px;padding:16px 18px;margin-top:15px}.summary-emoji{font-size:23px}.parent-summary-banner strong{font-size:14px;color:#327c63}.parent-summary-banner p{margin:5px 0 0;color:#5d6c7d;line-height:1.6;font-size:12px}.parent-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:13px;margin-top:13px}.parent-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:19px;box-shadow:var(--soft-shadow)}.parent-card>span{font-size:10px;letter-spacing:.08em;color:#8b94a6;font-weight:950}.parent-card h3{margin:7px 0 10px}.score-card{text-align:center}.parent-score{font-size:48px;font-weight:950;color:var(--purple);margin-top:7px}.score-card b{display:inline-block;background:#f0efff;color:#6257be;border-radius:999px;padding:7px 11px;font-size:11px}.score-card small{display:block;color:var(--muted);margin-top:8px}.parent-facts{display:grid;gap:9px;margin-top:11px}.parent-facts div{padding:10px 11px;border-radius:14px;background:#fafbff}.parent-facts small,.parent-facts b{display:block}.parent-facts small{color:var(--muted);font-size:10px}.parent-facts b{margin-top:3px;font-size:11px;line-height:1.45}.chart{display:flex;gap:8px;height:160px;margin-top:8px}.chart-y{width:28px;display:flex;flex-direction:column;justify-content:space-between;color:#a0a6b7;font-size:9px;padding:3px 0}.chart-plot{flex:1;display:flex;align-items:end;gap:8px;padding:0 6px 3px;border-left:1px dashed #dfe3ef;border-bottom:1px dashed #dfe3ef}.chart-col{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:5px}.chart-bar{min-height:8px;width:min(28px,70%);border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,var(--teal),var(--purple));display:flex;align-items:start;justify-content:center;color:#fff;font-size:8px;padding-top:4px}.chart-col small{font-size:9px;color:#98a0b1}.empty-chart{height:160px;border:1px dashed #dde1ee;border-radius:15px;display:grid;place-items:center;text-align:center;color:#9da5b6;font-size:11px;padding:15px}.timeline{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}.timeline-item{flex:1;min-width:72px;text-align:center;color:#a0a7b8;font-size:10px;font-weight:850}.timeline-item i{display:block;width:100%;height:8px;background:#e8eaf1;border-radius:999px;margin-bottom:7px}.timeline-item.active{color:#6558c3}.timeline-item.active i{background:linear-gradient(90deg,var(--purple),var(--teal))}.parent-note{display:flex;gap:12px;margin-top:13px;padding:15px 17px;background:#fff9df;border:1px solid #f4df9d;border-radius:20px;color:#6d602e}.parent-note>span{font-size:22px}.parent-note p{margin:0;line-height:1.6;font-size:12px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#2f3650;color:#fff;padding:12px 16px;border-radius:14px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;z-index:100;font-size:12px;font-weight:850}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}@keyframes pulseHint{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}@keyframes pop{0%{transform:scale(.95)}100%{transform:scale(1)}}@keyframes shake{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}@keyframes hintAppear{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}@keyframes starPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@media(max-width:820px){.topbar{padding:0 16px}.tiny-pill{display:none}.screen-wrap{padding:24px 16px 48px}.teacher-hero{align-items:flex-start}.teacher-illustration{font-size:38px}.profile-grid{grid-template-columns:repeat(2,1fr)}.result-hero,.parent-grid{grid-template-columns:1fr}.parent-page-header{padding:18px}.match-board,.order-board{grid-template-columns:1fr}.child-select-card{grid-template-columns:50px 1fr}.child-name-button{grid-column:1/-1}.landing-card{padding:44px 25px}.landing-orbit{display:none}}
@media(max-width:560px){.topbar{height:62px}.view{min-height:calc(100vh - 62px)}.screen-wrap{padding:20px 13px 40px}.landing-card h1{font-size:42px}.landing-copy{font-size:12px}.teacher-hero{padding:20px}.profile-grid{grid-template-columns:1fr}.student-profile-top{grid-template-columns:58px 1fr}.profile-score{grid-column:2;text-align:left}.activity-header-card{align-items:flex-start;flex-direction:column}.instruction{font-size:19px}.visual-bubble{min-width:140px;min-height:100px;font-size:42px}.options{grid-template-columns:1fr 1fr}.result-metrics{grid-template-columns:1fr 1fr 1fr}.parent-page-header h2{font-size:24px}.parent-page-header .result-person{align-items:flex-start}.picture-grid{grid-template-columns:1fr 1fr}}
/* v6 refinements: lesson/skill strip uses a compact initial instead of a large photo */
.strip-person.no-photo{display:flex;align-items:center;gap:10px}
.strip-initial{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#ece8ff,#ddfbf5);color:#6558c3;font-weight:950;font-size:15px;box-shadow:0 5px 12px rgba(74,67,130,.08)}
.activity-student-dot{color:var(--teal);font-size:11px;display:inline-block;animation:dotPulse 1.4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}

/* v7 activity mode: oyun alanını ana uygulamadan belirgin biçimde ayır */
body.activity-mode #activity{
  background:
    radial-gradient(circle at 8% 14%, rgba(255,212,95,.28), transparent 22%),
    radial-gradient(circle at 92% 18%, rgba(239,121,173,.23), transparent 24%),
    radial-gradient(circle at 78% 86%, rgba(126,223,198,.24), transparent 28%),
    linear-gradient(135deg,#f9f3ff 0%,#eefcff 52%,#fff8e9 100%);
}
body.activity-mode #activity .activity-wrap{padding-top:24px}
body.activity-mode #activity .activity-header-card{
  background:linear-gradient(135deg,#7259e9 0%,#5ccbc1 58%,#ffd45f 100%);
  border:0;color:#fff;box-shadow:0 20px 46px rgba(88,76,168,.22);
}
body.activity-mode #activity .activity-header-card p,
body.activity-mode #activity .activity-header-card .activity-student,
body.activity-mode #activity .activity-header-card .eyebrow{color:rgba(255,255,255,.86)}
body.activity-mode #activity .activity-header-card h2{color:#fff}
body.activity-mode #activity .sound-button{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.32);color:#fff}
body.activity-mode #activity .activity-card{border:2px solid rgba(118,88,232,.13);background:rgba(255,255,255,.92);box-shadow:0 28px 70px rgba(91,77,147,.16)}
body.activity-mode #activity .visual-scene{background:linear-gradient(135deg,rgba(118,88,232,.055),rgba(45,189,180,.065),rgba(255,212,95,.08));border-radius:24px;padding:10px;margin:0 auto 10px;max-width:860px}
body.activity-mode #activity .visual-bubble{background:linear-gradient(135deg,#ffffff,#f2efff 48%,#eafbf7);box-shadow:0 10px 28px rgba(82,72,137,.12), inset 0 0 0 3px rgba(118,88,232,.08)}
.skip-button{border:2px solid #e6d3e8;background:#fff4fb;color:#985376;border-radius:15px;padding:11px 15px;font-weight:950;cursor:pointer;transition:.18s}
.skip-button:hover{transform:translateY(-2px);background:#ffe9f4;border-color:#e5b8cf;box-shadow:0 8px 20px rgba(177,87,133,.12)}
.skip-feedback{background:#f8eff8!important;color:#845078!important;border:1px solid #ecd7e7}


/* v8: giriş ilkeleri ve ızgara düzeni */
.principles-title{position:relative;z-index:1;margin-top:20px;font-size:12px;font-weight:950;letter-spacing:.06em;color:#6f659e;text-transform:uppercase}.principles-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px auto 0;max-width:720px}.principle-card{padding:11px 12px;border-radius:15px;background:#fff;border:1px solid #edf0f6;text-align:left}.principle-card strong{display:block;font-size:10px;font-weight:950}.principle-card span{display:block;color:#7d8798;font-size:9px;line-height:1.35;margin-top:4px}.principle-card.ok strong{color:#2f8e74}.principle-card.note strong{color:#7b8597}.panel-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.skill-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.panel-choice{height:100%;grid-template-columns:56px 1fr;position:relative}.panel-choice>b{position:absolute;right:18px;top:50%;transform:translateY(-50%)}.teacher-actions{justify-content:center}.teacher-actions .primary-action,.teacher-actions .soft-action{min-width:250px;padding:15px 20px;font-size:15px}.profile-strip{display:none}.skill-grid .skill-card{min-height:150px}.lesson-card{min-height:150px}.three-choice{grid-template-columns:repeat(3,minmax(0,1fr))}.options{grid-template-columns:repeat(3,minmax(0,1fr))}.picture-grid.three-choice{grid-template-columns:repeat(3,minmax(0,1fr))}.activity-title-block h2{font-size:25px;margin:0 0 5px}.activity-title-block p{font-size:12px;margin:0}.transition-pause{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(35,28,71,.78);backdrop-filter:blur(10px);color:#fff;z-index:100;opacity:0;pointer-events:none;transition:.2s}.transition-pause.show{opacity:1;pointer-events:auto}.transition-pulse{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(135deg,#ffd45f,#f07cae,#6d5ce7);font-size:35px;box-shadow:0 18px 50px rgba(0,0,0,.24);animation:pulseCard 1.2s ease-in-out infinite}.transition-pause strong{margin-top:18px;font-size:22px}.transition-pause span{margin-top:5px;color:rgba(255,255,255,.78);font-size:12px}.hint-attention{animation:hintAttention 1.1s ease-in-out infinite}.hint-target-zone{border-color:#ffce53!important;box-shadow:0 0 0 4px rgba(255,206,83,.18),0 10px 24px rgba(255,206,83,.15)!important}.hint-alert{border:2px solid #ffd15c!important}.feedback.retry{animation:feedbackShake .35s ease-in-out}.activity-actions{gap:10px}.skip-button{min-width:150px}.match-board,.order-board{gap:18px}.order-item{cursor:grab}.order-item:active,.drag-chip:active{cursor:grabbing}.drag-source,.drop-zones{min-height:170px}.visual-bubble{min-width:180px;min-height:130px;font-size:56px}.activity-mode .topbar{display:none!important}.activity-mode .view{min-height:100vh}.activity-mode .screen-wrap.activity-wrap{padding-top:22px}.activity-mode .back-link{color:#6d6794}.activity-mode #activity{background:linear-gradient(135deg,#4f4a85 0%,#6d5ce7 35%,#2dbdb4 100%);}.activity-mode #activity .activity-header-card{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26)}.activity-mode #activity .activity-card{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.7)}
@keyframes hintAttention{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,209,92,.0)}50%{transform:scale(1.02);box-shadow:0 0 0 9px rgba(255,209,92,.14)}}
@keyframes pulseCard{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
@keyframes feedbackShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:1000px){.panel-grid,.lesson-grid,.skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.principles-mini{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.panel-grid,.lesson-grid,.skill-grid,.options,.three-choice,.picture-grid.three-choice{grid-template-columns:1fr}.principles-mini{grid-template-columns:1fr 1fr}.teacher-actions .primary-action,.teacher-actions .soft-action{min-width:0;width:100%}}

/* v9: üst bant yalnızca logo */
.topbar{justify-content:flex-start}.topbar-right{display:none}.brand-name{display:none}.brand-logo{width:40px;height:40px}.error-panel{max-width:620px;margin:90px auto;padding:28px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}.error-panel strong{display:block;font-size:20px;color:var(--ink);margin-bottom:8px}.error-panel p{color:var(--muted);margin:0 0 18px}.error-panel .primary-action{border:0;border-radius:14px;padding:12px 18px;background:linear-gradient(135deg,var(--purple),#8d70f0);color:#fff;font-weight:900;cursor:pointer}

/* v14: öğretim ekranı viewport içine daha sıkı otursun */
.activity-mode #activity{height:100vh;min-height:100vh;overflow:hidden;box-sizing:border-box}
.activity-mode #activity .activity-wrap{height:100%;min-height:0;box-sizing:border-box;padding:14px 18px 18px;display:flex;flex-direction:column;overflow:hidden}
.activity-mode #activity .activity-header-card{padding:14px 18px;border-radius:22px;flex:0 0 auto}
.activity-mode #activity .activity-header-card h2{font-size:22px}
.activity-mode #activity .activity-header-card p{font-size:11px}
.activity-mode #activity .progress-line{margin:8px 0;height:7px}
.activity-mode #activity .activity-card{padding:14px 18px;border-radius:24px;min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden}
.activity-mode #activity .activity-content{padding:8px 4px 4px;min-height:0;overflow:auto}
.activity-mode #activity .visual-scene{min-height:86px;padding:6px;margin-bottom:6px}
.activity-mode #activity .visual-bubble{min-width:140px;min-height:82px;padding:10px 18px;font-size:42px}
.activity-mode #activity .instruction{font-size:20px;margin-top:2px}
.activity-mode #activity .options{margin:12px auto 6px;gap:9px}
.activity-mode #activity .option{padding:10px;min-height:56px}
.activity-mode #activity .picture-grid,.activity-mode #activity .match-board,.activity-mode #activity .order-board{margin:12px auto 6px;gap:10px}
.activity-mode #activity .picture-card{min-height:108px;padding:10px}
.activity-mode #activity .picture-art{font-size:34px}
.activity-mode #activity .order-pool,.activity-mode #activity .drop-order{min-height:150px;padding:10px}
.activity-mode #activity .order-item{padding:10px 11px}
.activity-mode #activity .activity-actions{margin-top:8px;flex:0 0 auto}
.activity-mode #activity .hint-panel,.activity-mode #activity .feedback{margin-top:7px}
.hint-target{border-color:#f0b83d!important;background:#fff4be!important;box-shadow:0 0 0 5px rgba(255,203,75,.2),0 0 24px rgba(255,194,62,.35)!important;animation:pulseHint 1s infinite}

/* Veli kod giriş ekranı */
.parent-login-card{margin-top:16px;padding:22px;border:1px solid #eadff0;border-radius:24px;background:linear-gradient(135deg,#ffffff,#fff8fc 55%,#f4f2ff);box-shadow:var(--soft-shadow)}
.parent-login-card label{display:block;font-weight:950;font-size:12px;color:#697287;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.parent-code-row{display:grid;grid-template-columns:48px 1fr auto;gap:9px;align-items:center}
.code-lock{width:48px;height:48px;border-radius:16px;background:#f2efff;display:grid;place-items:center;font-size:21px}
.parent-code-input{width:100%;height:48px;border:2px solid #ddd8ef;border-radius:16px;background:#fff;padding:0 14px;font-size:20px;font-weight:950;letter-spacing:.2em;outline:none;transition:.18s}
.parent-code-input:focus{border-color:#8f7ae9;box-shadow:0 0 0 4px rgba(143,122,233,.12)}
.parent-login-button{height:48px;border:0;border-radius:16px;padding:0 18px;background:linear-gradient(135deg,var(--purple),#8d70f0);color:#fff;font-weight:950;cursor:pointer;box-shadow:0 10px 22px rgba(118,88,232,.18)}
.parent-login-message{min-height:18px;margin-top:10px;font-size:11px;color:#687389}
.parent-login-message.error{color:#a94b58}
.parent-login-message.success{color:#2f8367}
.parent-child-card{margin-top:16px;background:linear-gradient(135deg,#ffffff,#f6fffb);border-color:#dceee7}
@media(max-width:640px){.parent-code-row{grid-template-columns:42px 1fr}.parent-login-button{grid-column:1/-1}.code-lock{width:42px;height:48px}}

.teacher-login-card{margin-top:18px}.teacher-login-welcome{background:linear-gradient(135deg,#eef7ff,#f7f0ff 60%,#effbf7);border-color:#e4eaf7}.teacher-code-help{margin-top:10px;color:#7c8495;font-size:11px;line-height:1.5}.teacher-code-help span{display:inline-block;padding:4px 8px;border-radius:8px;background:#f0efff;color:#6759c3;font-weight:900}

/* v20: Öğretmen sınıf öğrenci görünümü */
.class-students-grid{margin-top:20px}
.class-students-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px;padding:0 2px}
.class-students-head h3{margin:5px 0 0;font-size:25px;letter-spacing:-.03em;color:#31384a}
.class-students-head>span{padding:8px 12px;border-radius:999px;background:#f0efff;color:#6759c3;font-size:11px;font-weight:900}
.class-student-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.class-student-card{position:relative;display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;text-align:left;width:100%;padding:16px;border:1px solid #e5e8f1;border-radius:24px;background:linear-gradient(145deg,#fff,#fbfcff);box-shadow:0 10px 24px rgba(52,60,88,.07);cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.class-student-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(52,60,88,.12);border-color:#cfc6f4}
.class-student-photo{width:84px;height:84px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#e9f5ff,#f7eeff);box-shadow:inset 0 0 0 1px rgba(109,92,231,.08)}
.class-student-img{width:100%;height:100%;object-fit:cover;display:block}
.class-student-info strong{display:block;font-size:16px;color:#303747;margin-bottom:5px}
.class-student-info span{display:block;font-size:10px;color:#7b8495;line-height:1.35}
.class-student-info small{display:block;margin-top:7px;color:#6d6794;font-size:10px;font-weight:800}
.class-student-score{position:absolute;top:13px;right:14px;padding:5px 8px;border-radius:999px;background:#eefcf9;color:#2b8b77;font-size:10px;font-weight:950}
@media(max-width:900px){.class-student-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.class-student-grid{grid-template-columns:1fr}.class-students-head{align-items:flex-start;flex-direction:column}.class-student-card{grid-template-columns:72px 1fr}.class-student-photo{width:72px;height:72px;border-radius:18px}}


/* v22: Öğretmen öğrenci seçimi + ayrıntı aynı ekrana sığacak kompakt düzen */
.teacherStudents-screen .class-students-grid{margin-bottom:10px}
.class-students-grid.has-selection .class-students-head{margin-bottom:8px}
.class-students-grid.has-selection .class-students-head h3{font-size:19px}
.class-students-grid.has-selection .class-students-head>span{padding:5px 9px;font-size:9px}
.class-student-grid{transition:.2s}
.class-students-grid.has-selection .class-student-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.class-students-grid.has-selection .class-student-card{grid-template-columns:52px 1fr;gap:8px;padding:8px;border-radius:15px;min-height:68px}
.class-students-grid.has-selection .class-student-photo{width:52px;height:52px;border-radius:14px}
.class-students-grid.has-selection .class-student-info strong{font-size:11px;line-height:1.15;margin-bottom:2px;padding-right:13px}
.class-students-grid.has-selection .class-student-info span{display:none}
.class-students-grid.has-selection .class-student-info small{margin-top:0;font-size:8px;line-height:1.15}
.class-students-grid.has-selection .class-student-score{top:6px;right:6px;padding:3px 5px;font-size:8px}
.class-students-grid.has-selection .class-student-card.selected{border-color:#8d78ee;background:linear-gradient(145deg,#f6f3ff,#ffffff);box-shadow:0 0 0 2px rgba(141,120,238,.13),0 10px 20px rgba(74,63,130,.10)}
.detail-area:not(.hidden) .student-profile-card{padding:16px 18px;border-radius:23px}
.detail-area:not(.hidden) .student-profile-top{grid-template-columns:60px 1fr auto;gap:12px}
.detail-area:not(.hidden) .big-avatar{width:60px;height:60px;border-radius:18px}
.detail-area:not(.hidden) .student-profile-top h2{font-size:22px;margin:3px 0 1px}
.detail-area:not(.hidden) .student-profile-top p{font-size:10px}
.detail-area:not(.hidden) .profile-score strong{font-size:28px}
.detail-area:not(.hidden) .profile-grid{margin-top:11px;gap:8px}
.detail-area:not(.hidden) .info-block{padding:10px;border-radius:14px}
.detail-area:not(.hidden) .info-block b{font-size:11px;margin-top:4px}
.detail-area:not(.hidden) .info-block small{font-size:9px}
.detail-area:not(.hidden) .student-insight{margin-top:9px;padding:10px 12px;border-radius:15px}
.detail-area:not(.hidden) .student-insight p{font-size:10px;line-height:1.45}
.detail-area:not(.hidden) .history-mini{margin-top:9px}
.detail-area:not(.hidden) .mini-chart{height:52px}
.detail-area:not(.hidden) .teacher-actions{margin-top:10px}
.detail-area:not(.hidden) .teacher-actions .primary-action,.detail-area:not(.hidden) .teacher-actions .soft-action{min-width:205px;padding:11px 14px;font-size:13px}
@media(max-width:1050px){.class-students-grid.has-selection .class-student-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.class-students-grid.has-selection .class-student-card{grid-template-columns:44px 1fr}.class-students-grid.has-selection .class-student-photo{width:44px;height:44px}}
@media(max-width:820px){.class-students-grid.has-selection .class-student-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.detail-area:not(.hidden) .profile-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.class-students-grid.has-selection .class-student-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-area:not(.hidden) .student-profile-top{grid-template-columns:54px 1fr}.detail-area:not(.hidden) .profile-score{grid-column:2;text-align:left}.detail-area:not(.hidden) .teacher-actions{flex-direction:column}.detail-area:not(.hidden) .teacher-actions .primary-action,.detail-area:not(.hidden) .teacher-actions .soft-action{width:100%;min-width:0}}

/* v23: Öğrenci seçildiğinde liste küçülür, seçilen öğrencinin ayrıntı alanı büyür. */
.class-students-grid.has-selection .class-students-head{margin-bottom:6px}
.class-students-grid.has-selection .class-students-head h3{font-size:18px}
.class-students-grid.has-selection .class-students-head>span{padding:4px 8px;font-size:9px}
.class-students-grid.has-selection .class-student-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.class-students-grid.has-selection .class-student-card{grid-template-columns:34px 1fr;gap:7px;padding:7px 8px;border-radius:13px;min-height:52px;box-shadow:none}
.class-students-grid.has-selection .class-student-photo{width:34px;height:34px;border-radius:10px}
.class-students-grid.has-selection .class-student-info strong{font-size:10px;line-height:1.15;margin-bottom:0;padding-right:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.class-students-grid.has-selection .class-student-info span{display:block;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.class-students-grid.has-selection .class-student-info small{display:none}
.class-students-grid.has-selection .class-student-score{top:5px;right:5px;padding:2px 4px;font-size:7px}
.class-students-grid.has-selection .class-student-card.selected{border-color:#8d78ee;background:linear-gradient(145deg,#f4f0ff,#fff);box-shadow:0 0 0 2px rgba(141,120,238,.16)}

/* Seçilen öğrenci ayrıntısı özellikle büyütülür. */
.teacherStudents-screen .detail-area:not(.hidden){margin-top:12px}
.teacherStudents-screen .detail-area:not(.hidden) .student-profile-card{padding:26px 28px;border-radius:28px;box-shadow:0 18px 40px rgba(52,60,88,.11)}
.teacherStudents-screen .detail-area:not(.hidden) .student-profile-top{grid-template-columns:88px 1fr auto;gap:18px}
.teacherStudents-screen .detail-area:not(.hidden) .big-avatar{width:88px;height:88px;border-radius:25px}
.teacherStudents-screen .detail-area:not(.hidden) .student-profile-top h2{font-size:31px;margin:6px 0 3px}
.teacherStudents-screen .detail-area:not(.hidden) .student-profile-top p{font-size:12px}
.teacherStudents-screen .detail-area:not(.hidden) .profile-score strong{font-size:38px}
.teacherStudents-screen .detail-area:not(.hidden) .profile-score small{font-size:11px}
.teacherStudents-screen .detail-area:not(.hidden) .profile-grid{margin-top:20px;gap:12px}
.teacherStudents-screen .detail-area:not(.hidden) .info-block{padding:15px;border-radius:17px}
.teacherStudents-screen .detail-area:not(.hidden) .info-block b{font-size:12px;margin-top:6px}
.teacherStudents-screen .detail-area:not(.hidden) .info-block small{font-size:10px}
.teacherStudents-screen .detail-area:not(.hidden) .student-insight{margin-top:14px;padding:15px 17px;border-radius:19px}
.teacherStudents-screen .detail-area:not(.hidden) .student-insight p{font-size:12px;line-height:1.6}
.teacherStudents-screen .detail-area:not(.hidden) .history-mini{margin-top:15px}
.teacherStudents-screen .detail-area:not(.hidden) .mini-chart{height:85px}
.teacherStudents-screen .detail-area:not(.hidden) .teacher-actions{margin-top:17px}
.teacherStudents-screen .detail-area:not(.hidden) .teacher-actions .primary-action,.teacherStudents-screen .detail-area:not(.hidden) .teacher-actions .soft-action{min-width:250px;padding:15px 19px;font-size:15px}

@media(max-width:1050px){
  .class-students-grid.has-selection .class-student-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
  .class-students-grid.has-selection .class-student-card{grid-template-columns:30px 1fr;padding:6px;}
  .class-students-grid.has-selection .class-student-photo{width:30px;height:30px}
}
@media(max-width:820px){
  .class-students-grid.has-selection .class-student-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .teacherStudents-screen .detail-area:not(.hidden) .profile-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .class-students-grid.has-selection .class-student-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .teacherStudents-screen .detail-area:not(.hidden) .student-profile-top{grid-template-columns:64px 1fr}
  .teacherStudents-screen .detail-area:not(.hidden) .big-avatar{width:64px;height:64px}
  .teacherStudents-screen .detail-area:not(.hidden) .profile-score{grid-column:2;text-align:left}
  .teacherStudents-screen .detail-area:not(.hidden) .teacher-actions{flex-direction:column}
  .teacherStudents-screen .detail-area:not(.hidden) .teacher-actions .primary-action,.teacherStudents-screen .detail-area:not(.hidden) .teacher-actions .soft-action{width:100%;min-width:0}
}

/* v24: Öğrenci seçildiğinde diğer öğrenci kartları yaklaşık %60 küçülür. */
.class-students-grid.has-selection .class-student-grid{align-items:start;}
.class-students-grid.has-selection .class-student-card:not(.selected){
  width:60%;
  justify-self:center;
  grid-template-columns:32px 1fr;
  gap:5px;
  padding:5px;
  min-height:41px;
  border-radius:11px;
  box-shadow:0 5px 12px rgba(52,60,88,.05);
}
.class-students-grid.has-selection .class-student-card:not(.selected):hover{transform:translateY(-1px);}
.class-students-grid.has-selection .class-student-card:not(.selected) .class-student-photo{width:32px;height:32px;border-radius:9px;}
.class-students-grid.has-selection .class-student-card:not(.selected) .class-student-info strong{font-size:8px;line-height:1.1;margin-bottom:1px;padding-right:8px;}
.class-students-grid.has-selection .class-student-card:not(.selected) .class-student-info small{font-size:6.5px;line-height:1.05;}
.class-students-grid.has-selection .class-student-card:not(.selected) .class-student-score{top:3px;right:3px;padding:2px 3px;font-size:6px;}
.class-students-grid.has-selection .class-student-card.selected{width:100%;transform:none;min-height:86px;padding:12px;border-radius:19px;grid-template-columns:84px 1fr auto;gap:12px;}
.class-students-grid.has-selection .class-student-card.selected .class-student-photo{width:84px;height:84px;border-radius:20px;}
.class-students-grid.has-selection .class-student-card.selected .class-student-info strong{font-size:15px;line-height:1.2;padding-right:16px;}
.class-students-grid.has-selection .class-student-card.selected .class-student-info span{display:block;font-size:9px;}
.class-students-grid.has-selection .class-student-card.selected .class-student-info small{font-size:8px;margin-top:5px;}
@media(max-width:900px){
  .class-students-grid.has-selection .class-student-card:not(.selected){width:70%;}
}
@media(max-width:560px){
  .class-students-grid.has-selection .class-student-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .class-students-grid.has-selection .class-student-card:not(.selected){width:68%;}
  .class-students-grid.has-selection .class-student-card.selected{grid-column:1 / -1;grid-template-columns:62px 1fr auto;}
  .class-students-grid.has-selection .class-student-card.selected .class-student-photo{width:62px;height:62px;}
}

/* v26: Öğrenci seçildiğinde diğer kartların gerçekten animasyonlu küçülmesi. */
.class-students-grid.has-selection .class-student-card:not(.selected){
  width:62.5% !important;
  transform:scale(.625);
  transform-origin:center center;
  opacity:.88;
  padding:5px !important;
  transition:transform .42s cubic-bezier(.2,.85,.25,1), opacity .32s ease, box-shadow .32s ease, width .32s ease;
}
.class-students-grid.has-selection .class-student-card:not(.selected).is-shrinking{
  animation:teacherCardShrink .48s cubic-bezier(.2,.85,.25,1) forwards;
}
.class-students-grid.has-selection .class-student-card.selected{
  animation:teacherCardPop .45s cubic-bezier(.2,1.35,.35,1) both;
}
@keyframes teacherCardShrink{
  from{transform:scale(1);opacity:1}
  to{transform:scale(.625);opacity:.88}
}
@keyframes teacherCardPop{
  0%{transform:scale(.96);opacity:.8}
  70%{transform:scale(1.035)}
  100%{transform:scale(1);opacity:1}
}
@media(max-width:900px){
  .class-students-grid.has-selection .class-student-card:not(.selected){width:68% !important;transform:scale(.68)}
  @keyframes teacherCardShrink{from{transform:scale(1)}to{transform:scale(.68)}}
}
@media(max-width:560px){
  .class-students-grid.has-selection .class-student-card:not(.selected){width:70% !important;transform:scale(.70)}
  @keyframes teacherCardShrink{from{transform:scale(1)}to{transform:scale(.70)}}
}

/* v28: Sayı sorularında sayı emojisi sabit, taşmayan ve dengeli boyutta gösterilir. */
.visual-scene.number-visual{min-height:118px;display:flex;align-items:center;justify-content:center;}
.visual-scene.number-visual .visual-bubble{width:116px;height:116px;min-width:116px;min-height:116px;display:flex;align-items:center;justify-content:center;font-size:3.15rem;line-height:1;overflow:hidden;padding:0;}
@media (max-width:760px){.visual-scene.number-visual .visual-bubble{width:94px;height:94px;min-width:94px;min-height:94px;font-size:2.5rem;}}
.picture-label,.visual-label{display:block;margin-top:4px;font-size:11px;font-weight:900;color:#697286}
.drop-zone .drop-visual{font-size:28px;line-height:1.05}.drop-zone .visual-label{font-size:10px;color:#778095}
.result-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:680px){.result-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

.timeline-item{position:relative}.timeline-item.current-level{color:#6558c3;transform:translateY(-1px)}.timeline-item.current-level i{box-shadow:0 0 0 3px rgba(101,88,195,.10)}.timeline-arrow{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-size:24px;line-height:1;font-weight:950;color:#6558c3;text-shadow:0 2px 5px rgba(101,88,195,.18);animation:levelArrow 1.15s ease-in-out infinite}.timeline-item.current-level span{display:inline-block;padding-top:13px}.timeline-item.current-level:after{content:'MEVCUT SEVİYE';display:block;margin-top:24px;font-size:8px;letter-spacing:.08em;font-weight:950;color:#6558c3;opacity:.88}@keyframes levelArrow{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,4px)}}