:root{
  --navy:#07172f;--navy2:#0c274c;--blue:#1677ff;--cyan:#45b8ff;--gold:#f2ba38;--gold2:#ffd976;
  --white:#f7fbff;--muted:#a8bdd6;--danger:#ff5e6c;--success:#3ed598;--panel:rgba(12,39,76,.88);
  --shadow:0 22px 70px rgba(0,0,0,.28);--radius:26px;--font-scale:1;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:#041022;color:var(--white);font-family:Roboto,"Segoe UI",Arial,sans-serif;overflow:hidden}
button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 10%,rgba(25,119,255,.18),transparent 34%),radial-gradient(circle at 85% 15%,rgba(242,186,56,.13),transparent 30%),linear-gradient(145deg,#041022,#09244b 54%,#06172f);z-index:-2}
body:after{content:"";position:fixed;inset:0;opacity:.22;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:40px 40px}
.app-shell{height:100%;display:grid;grid-template-rows:auto 1fr auto}.app-shell.focused .topbar,.app-shell.focused .footer{display:none}.app-shell.focused{grid-template-rows:1fr}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px clamp(14px,2vw,30px);background:rgba(3,15,33,.88);border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:blur(18px);z-index:20}
.brand{display:flex;align-items:center;gap:12px;background:none;border:0;color:var(--white);text-align:left;padding:0}.brand img{width:48px;height:48px;border-radius:15px;box-shadow:0 0 0 2px rgba(242,186,56,.6),0 8px 24px rgba(0,0,0,.25)}.brand span{display:flex;flex-direction:column;line-height:1}.brand strong{font-size:20px;color:var(--gold2)}.brand small{font-size:15px;margin-top:5px}
.status-area{display:flex;justify-content:center}.network-badge{font-size:12px;font-weight:900;padding:7px 11px;border-radius:999px;background:rgba(62,213,152,.12);border:1px solid rgba(62,213,152,.28);color:#82f2c2}.network-badge.offline{background:rgba(255,190,75,.12);border-color:rgba(255,190,75,.35);color:#ffd477}
.topbar-actions{display:flex;align-items:center;gap:10px}.icon-btn,.teacher-btn,.install-btn,.official-btn{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:white;border-radius:14px;min-height:44px;padding:0 14px;font-weight:800}.icon-btn{font-size:22px;min-width:48px}.teacher-btn,.install-btn{background:linear-gradient(135deg,var(--gold),#d38d13);color:#17213b;border-color:#ffe49b}.install-btn{background:linear-gradient(135deg,#4cc5ff,#177ce6);color:white;border-color:#74d3ff}
.main-view{overflow:auto;padding:clamp(16px,2vw,30px);scrollbar-width:thin;scrollbar-color:#277fd1 transparent}.footer{display:flex;justify-content:center;gap:18px;align-items:center;padding:9px 18px;background:rgba(2,13,29,.9);border-top:1px solid rgba(255,255,255,.1);color:#c8d8eb;font-size:13px}.footer strong{color:var(--gold2)}.version{opacity:.7}
.primary,.secondary,.danger,.ghost{border:0;border-radius:15px;padding:13px 18px;font-weight:900;min-height:48px}.primary{background:linear-gradient(135deg,#ffd66d,#edae22);color:#17213b;box-shadow:0 8px 25px rgba(242,186,56,.22)}.secondary{background:rgba(255,255,255,.09);color:white;border:1px solid rgba(255,255,255,.16)}.danger{background:rgba(255,94,108,.18);color:#ffb4ba;border:1px solid rgba(255,94,108,.36)}.ghost{background:transparent;color:#dbe9f8;border:1px solid rgba(255,255,255,.12)}.wide{width:100%}.hidden{display:none!important}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:24px;max-width:1500px;margin:0 auto 26px}.hero-main{position:relative;min-height:310px;padding:34px;border-radius:32px;overflow:hidden;background:linear-gradient(135deg,rgba(17,68,126,.95),rgba(4,24,53,.98));border:1px solid rgba(103,184,255,.3);box-shadow:var(--shadow)}.hero-main:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-110px;bottom:-170px;background:radial-gradient(circle,var(--gold),transparent 68%);opacity:.2}.coming{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#1d2637;font-weight:900;box-shadow:0 7px 22px rgba(242,186,56,.25)}.hero h1{font-size:clamp(38px,5vw,72px);line-height:.95;margin:22px 0 14px;letter-spacing:-2px}.hero h1 span{color:var(--gold2)}.hero p{font-size:clamp(17px,1.6vw,23px);line-height:1.5;color:#d8e7f8;max-width:760px}.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.hero-side{display:grid;grid-template-rows:1fr auto;gap:18px}.mini-card,.stat-row{background:var(--panel);border:1px solid rgba(255,255,255,.11);border-radius:26px;box-shadow:var(--shadow)}.mini-card{padding:24px;display:flex;flex-direction:column;justify-content:center}.mini-illustration{font-size:86px;line-height:1;filter:drop-shadow(0 15px 20px rgba(0,0,0,.25));margin-bottom:14px}.mini-card h3{margin:0 0 8px;font-size:24px}.mini-card p{margin:0;color:var(--muted);line-height:1.45}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);padding:16px;gap:10px}.stat{text-align:center}.stat strong{display:block;color:var(--gold2);font-size:24px}.stat small{color:var(--muted)}
.library-toolbar{max-width:1500px;margin:0 auto 15px;display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}.section-head h2,.library-toolbar h2{margin:0;font-size:clamp(24px,2.4vw,36px)}.section-head p,.library-toolbar p{margin:6px 0 0;color:var(--muted)}.library-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.search{min-width:min(330px,42vw);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:15px;color:white;padding:13px 16px;outline:none}.search:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(69,184,255,.13)}.filter-row{display:flex;gap:7px;flex-wrap:wrap}.filter-chip{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);color:#dbe9f8;border-radius:999px;padding:9px 13px;font-weight:800}.filter-chip.active{background:linear-gradient(135deg,#4fc6ff,#197cec);border-color:transparent;color:white}
.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;max-width:1500px;margin:0 auto}.story-card{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(160deg,rgba(21,61,106,.98),rgba(7,23,47,.98));border:1px solid rgba(255,255,255,.12);box-shadow:0 15px 40px rgba(0,0,0,.2);transition:.22s transform,.22s border-color}.story-card:hover{transform:translateY(-4px);border-color:rgba(255,217,118,.65)}.favorite-btn{position:absolute;right:12px;top:12px;z-index:4;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(3,15,33,.72);color:white;font-size:21px}.favorite-btn.active{color:#ffd15e;background:rgba(44,34,4,.82)}.story-cover{height:165px;display:flex;align-items:center;justify-content:center;font-size:88px;position:relative;background:linear-gradient(145deg,var(--story-color,#2f8f62),#163a63);background-size:cover;background-position:center}.story-cover:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 15%,rgba(255,255,255,.3),transparent 24%),linear-gradient(transparent,rgba(0,0,0,.2))}.story-cover.has-image>span:not(.story-age){opacity:0}.story-age{position:absolute;top:13px;left:13px;z-index:2;background:rgba(3,15,33,.78);padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.18)}.story-body{padding:18px}.story-body h3{margin:0 0 8px;font-size:22px}.story-body p{margin:0 0 16px;min-height:45px;color:var(--muted);line-height:1.45}.story-meta{display:flex;justify-content:space-between;color:#d5e7fb;font-size:13px}.story-actions{display:flex;gap:9px;margin-top:16px}.story-actions button{flex:1;border:0;border-radius:13px;padding:11px 10px;font-weight:800}.read-btn{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#14213d}.share-btn{background:rgba(255,255,255,.09);color:white;border:1px solid rgba(255,255,255,.13)!important}.card-progress{height:7px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:14px;overflow:hidden}.card-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--gold2))}
.reader-shell{height:100%;min-height:650px;display:grid;grid-template-rows:auto 1fr auto auto;gap:12px;max-width:1600px;margin:0 auto}.reader-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.reader-title{display:flex;align-items:center;gap:13px}.reader-title .emoji{font-size:42px}.reader-title h2{margin:0;font-size:clamp(24px,3vw,40px)}.reader-title p{margin:3px 0 0;color:var(--muted)}.reader-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.reader-tools button{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:white;border-radius:13px;padding:10px 13px;font-weight:800}.reader-tools button.accent{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#17213b;border:0}.reader-stage{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr);gap:16px;min-height:0}.scene{position:relative;min-height:430px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#7bd8ff 0 32%,#a7df6b 33% 57%,#4a9b46 58%);border:2px solid rgba(255,217,118,.68);box-shadow:var(--shadow)}.scene:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 10%,#fff7ac 0 5%,transparent 6%),linear-gradient(180deg,transparent 58%,rgba(26,96,44,.28));pointer-events:none}.scene.custom-image{background-size:cover;background-position:center}.scene.custom-image:before{background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.18))}.scene-decoration{position:absolute;font-size:clamp(54px,8vw,125px);filter:drop-shadow(0 14px 12px rgba(0,0,0,.2));user-select:none;transition:.2s transform}.scene-decoration:hover,.scene-decoration:active{transform:scale(1.08) rotate(-2deg)}.hotspot{position:absolute;display:grid;place-items:center;width:82px;height:82px;border-radius:50%;font-size:48px;border:3px solid rgba(255,255,255,.85);background:rgba(3,15,33,.55);box-shadow:0 0 0 8px rgba(69,184,255,.16),0 14px 30px rgba(0,0,0,.23);animation:float 3s ease-in-out infinite}.hotspot.active{box-shadow:0 0 0 12px rgba(255,217,118,.25),0 0 30px rgba(255,217,118,.7)}@keyframes float{50%{transform:translateY(-7px)}}
.story-page{border-radius:28px;padding:clamp(22px,3vw,42px);background:linear-gradient(155deg,rgba(255,251,230,.98),rgba(239,245,219,.98));color:#173145;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.story-page:before{content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;background:rgba(205,95,55,.32)}.page-number{display:inline-block;align-self:flex-start;border-radius:999px;padding:7px 11px;background:#143d67;color:white;font-weight:800;font-size:13px}.story-page h3{font-size:clamp(25px,3vw,44px);margin:18px 0;color:#7f3f1e}.story-text{font-family:Georgia,"Times New Roman",serif;font-size:calc(clamp(20px,2.3vw,34px) * var(--font-scale));line-height:1.55;margin:0;white-space:pre-line}.story-hint{margin-top:24px;padding:13px 15px;border-radius:16px;background:rgba(28,102,138,.1);font-family:inherit;font-size:15px}.audio-pill{margin-top:18px;display:inline-flex;align-self:flex-start;align-items:center;gap:8px;border-radius:999px;background:#e7f2e4;padding:9px 13px;color:#26543c;font-weight:800}.reader-nav{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.nav-btn{height:60px;min-width:130px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.09);color:white;font-weight:900;font-size:18px}.nav-btn.next{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#13213d}.progress-wrap{display:flex;align-items:center;gap:12px}.progress{height:13px;flex:1;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}.progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--gold2));transition:.3s width}.progress-label{min-width:66px;text-align:center;font-weight:800;color:#d9eafa}.page-rail{display:flex;gap:8px;overflow:auto;padding:2px 0 5px}.page-thumb{min-width:54px;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);color:white;font-weight:900}.page-thumb.active{background:linear-gradient(135deg,var(--cyan),var(--blue));border-color:#8ddaff}.focus-unlock{position:fixed;right:18px;top:18px;z-index:500;border:1px solid rgba(255,255,255,.25);background:rgba(3,15,33,.82);color:white;padding:12px 16px;border-radius:14px;font-weight:900;backdrop-filter:blur(12px)}
.modal{position:fixed;inset:0;display:none;place-items:center;padding:18px;background:rgba(0,8,20,.78);backdrop-filter:blur(12px);z-index:100}.modal.open{display:grid}.modal-card{position:relative;width:min(1100px,96vw);max-height:92vh;overflow:auto;padding:28px;border-radius:28px;background:linear-gradient(145deg,#0b2a53,#06172f);border:1px solid rgba(255,255,255,.16);box-shadow:0 28px 90px rgba(0,0,0,.45)}.modal-card.small{width:min(500px,94vw);text-align:center}.modal-close{position:sticky;float:right;top:0;z-index:4;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.1);color:white;font-size:26px}.modal-icon{font-size:58px}.modal-card h2{margin:8px 0 10px}.modal-card p{color:var(--muted);line-height:1.5}.big-input{width:100%;padding:15px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:white;outline:none;margin:12px 0}.teacher-heading,.editor-heading{display:flex;justify-content:space-between;align-items:start;gap:16px}.eyebrow{color:var(--gold2);font-weight:900;letter-spacing:1.5px;font-size:12px}.teacher-badge{background:rgba(62,213,152,.16);color:#7af2bf;border:1px solid rgba(62,213,152,.35);padding:8px 12px;border-radius:999px;font-weight:900}.settings-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin:22px 0}.setting-card{min-height:115px;padding:16px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);display:flex;flex-direction:column;gap:12px}.setting-card input[type=range]{width:100%}.setting-card select{padding:10px;border-radius:10px;background:#0c274c;color:white;border:1px solid rgba(255,255,255,.15)}.switch-card input{display:none}.switch-card i{width:54px;height:29px;border-radius:999px;background:#53677e;position:relative}.switch-card i:after{content:"";position:absolute;width:23px;height:23px;left:3px;top:3px;border-radius:50%;background:white;transition:.2s}.switch-card input:checked+i{background:var(--success)}.switch-card input:checked+i:after{left:28px}.teacher-actions,.editor-actions,.share-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.file-label{display:inline-flex;align-items:center}.file-label input{display:none}.storage-info{padding:12px 15px;border-radius:15px;background:rgba(69,184,255,.08);border:1px solid rgba(69,184,255,.18);color:#cceaff;margin-bottom:14px}.story-admin{display:grid;gap:10px;margin-top:18px}.story-admin>h3{margin-bottom:2px}.admin-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:13px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}.admin-row h4{margin:0}.admin-row small{color:var(--muted)}.admin-buttons{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.admin-buttons button{padding:9px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.08);color:white}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.form-grid label{display:flex;flex-direction:column;gap:7px;color:#dbe9f9;font-weight:800}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea,.page-card input,.page-card textarea{padding:13px;border-radius:13px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:white;outline:none}.form-grid textarea,.page-card textarea{resize:vertical}.form-grid option{color:#111}.editor-panel{width:min(1280px,97vw)}.page-editor-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:28px 0 12px}.page-editor-head h3{margin:0;font-size:25px}.page-editor-head p{margin:5px 0 0;color:var(--muted)}.page-editor-list{display:grid;gap:16px}.page-card{border-radius:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);padding:16px}.page-card-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.page-card-head h4{margin:0;font-size:20px}.page-card-actions{display:flex;gap:6px;flex-wrap:wrap}.page-card-actions button{width:39px;height:39px;border-radius:10px;background:rgba(255,255,255,.08);color:white;border:1px solid rgba(255,255,255,.12)}.page-card-grid{display:grid;grid-template-columns:280px 1fr;gap:16px}.media-box{min-height:220px;border-radius:18px;background:linear-gradient(145deg,#123a65,#07172f);border:1px dashed rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.media-box img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.media-placeholder{text-align:center;color:var(--muted);padding:16px}.media-placeholder b{display:block;font-size:54px;margin-bottom:9px}.media-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.media-actions label,.media-actions button{border-radius:11px;padding:9px 11px;background:rgba(255,255,255,.08);color:white;border:1px solid rgba(255,255,255,.13);font-weight:800}.media-actions input{display:none}.page-fields{display:grid;gap:10px}.page-fields label{display:grid;gap:6px;font-weight:800;color:#dbe9f9}.page-fields textarea{min-height:120px}.audio-editor{padding:11px;border-radius:14px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.09)}.audio-editor audio{width:100%;height:42px}.recording{background:rgba(255,94,108,.25)!important;border-color:#ff7a86!important;animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,94,108,.09)}}.sticky-actions{position:sticky;bottom:-28px;padding:15px;margin:22px -28px -28px;background:rgba(3,15,33,.93);border-top:1px solid rgba(255,255,255,.1);z-index:3}
.quiz-panel{width:min(780px,95vw)}.quiz-top{text-align:center}.quiz-top .quiz-icon{font-size:70px}.quiz-question{font-size:clamp(24px,3vw,38px);text-align:center;margin:24px 0}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:13px}.quiz-option{min-height:80px;border-radius:18px;border:2px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:white;font-size:18px;font-weight:900;padding:15px}.quiz-option.correct{background:rgba(62,213,152,.22);border-color:#68eab5}.quiz-option.wrong{background:rgba(255,94,108,.2);border-color:#ff7a86}.quiz-score{text-align:center}.quiz-score strong{font-size:74px;color:var(--gold2)}.qr-canvas{width:256px;height:256px;background:white;padding:10px;border-radius:18px;margin:8px auto;display:block}.feature-panel{width:min(900px,95vw)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:20px}.feature-grid article{padding:20px;border-radius:19px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);display:grid;gap:8px}.feature-grid b{font-size:19px;color:var(--gold2)}.feature-grid span{color:var(--muted);line-height:1.45}
.toast{position:fixed;left:50%;bottom:70px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#0b2a53;color:white;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 18px;z-index:600;transition:.25s;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}.empty{grid-column:1/-1;max-width:700px;margin:60px auto;text-align:center;color:var(--muted)}.empty .emoji{font-size:80px}
.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:1100px){.settings-grid{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr}.hero-side{grid-template-columns:1fr 1fr;grid-template-rows:none}.reader-stage{grid-template-columns:1fr}.scene{min-height:360px}.page-card-grid{grid-template-columns:220px 1fr}}
@media(max-width:760px){html,body{overflow:auto}.app-shell{min-height:100%;height:auto}.main-view{overflow:visible;padding:13px}.status-area{display:none}.teacher-btn{font-size:0;width:48px}.teacher-btn:before{content:"👩‍🏫";font-size:21px}.install-btn{font-size:0;width:48px}.install-btn:before{content:"⬇";font-size:21px}.brand small{display:none}.hero-main{padding:22px;min-height:280px}.hero h1{font-size:42px}.hero-side{grid-template-columns:1fr}.library-toolbar{align-items:stretch;flex-direction:column}.library-controls{align-items:stretch;flex-direction:column}.search{min-width:100%}.reader-shell{height:auto;min-height:0}.reader-head{align-items:flex-start;flex-direction:column}.reader-tools{justify-content:flex-start}.reader-stage{display:flex;flex-direction:column}.scene{min-height:300px}.story-page{min-height:350px}.reader-nav{grid-template-columns:1fr 1fr}.progress-wrap{grid-column:1/-1;grid-row:1}.nav-btn{min-width:0}.settings-grid,.form-grid,.quiz-options,.feature-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.page-card-grid{grid-template-columns:1fr}.media-box{min-height:200px}.admin-row{grid-template-columns:1fr}.admin-buttons{justify-content:flex-start}.footer{flex-direction:column;gap:3px}.hotspot{width:62px;height:62px;font-size:35px}.teacher-heading,.editor-heading{flex-direction:column}.page-editor-head{align-items:stretch;flex-direction:column}.sticky-actions{bottom:0}.focus-unlock{right:9px;top:9px}}


/* V1.2.0 — Classroom Session & Interactive Hotspot */
.classroom-btn{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:white;border-radius:13px;padding:11px 15px;font-weight:900}.classroom-btn.active-session{background:rgba(62,213,152,.18);border-color:rgba(62,213,152,.5);color:#8affca;animation:sessionPulse 1.8s infinite}@keyframes sessionPulse{50%{box-shadow:0 0 0 7px rgba(62,213,152,.06)}}
.danger{background:linear-gradient(135deg,#d84d5e,#982d43)!important;color:white!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:13px;padding:12px 16px;font-weight:900}.danger:disabled{opacity:.45;cursor:not-allowed}.teacher-badge.live{background:rgba(255,89,94,.16);color:#ff9ca2;border-color:rgba(255,89,94,.42)}
.active-session-card{margin:18px 0;padding:18px;border-radius:20px;background:linear-gradient(135deg,rgba(62,213,152,.12),rgba(69,184,255,.08));border:1px solid rgba(62,213,152,.28);display:flex;justify-content:space-between;align-items:center;gap:18px}.active-session-card p{margin:5px 0 0}.live-dot{color:#58efaa;margin-right:8px}.session-live-stats{display:flex;gap:10px;flex-wrap:wrap}.session-live-stats span{min-width:90px;padding:10px 12px;text-align:center;border-radius:14px;background:rgba(0,0,0,.18)}.session-live-stats b{display:block;color:var(--gold2);font-size:23px}.random-student-result{margin:15px 0;padding:22px;text-align:center;border-radius:22px;background:linear-gradient(135deg,rgba(247,190,56,.17),rgba(69,184,255,.12));border:1px solid rgba(247,190,56,.35)}.random-student-result small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.random-student-result strong{display:block;font-size:clamp(30px,5vw,58px);color:var(--gold2);margin-top:5px}.session-history{margin-top:24px}.session-history-head h3{margin:0}.session-history-head p{margin:5px 0 12px}.session-table{border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden}.session-table-row{display:grid;grid-template-columns:1.1fr 1.6fr 1fr .8fr;gap:12px;padding:13px 15px;border-top:1px solid rgba(255,255,255,.08);align-items:center}.session-table-row:first-child{border-top:0}.session-table-row.head{background:rgba(255,255,255,.08);font-weight:900;color:var(--gold2)}.session-table-row small{display:block;color:var(--muted);margin-top:4px}.empty-session{padding:28px;text-align:center;color:var(--muted);border:1px dashed rgba(255,255,255,.15);border-radius:18px}
.hotspot-panel{width:min(1180px,97vw)}.hotspot-toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:18px 0}.hotspot-toolbar label{display:grid;gap:6px;font-weight:900}.hotspot-toolbar label.grow{flex:1;min-width:230px}.hotspot-toolbar input{min-height:46px;border-radius:13px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:white;padding:10px 13px}.hotspot-toolbar label:first-child input{width:82px;text-align:center;font-size:25px}.hotspot-editor-stage{position:relative;min-height:520px;border-radius:24px;background-size:cover!important;background-position:center!important;border:2px solid rgba(255,255,255,.15);overflow:hidden;touch-action:none;cursor:default}.hotspot-editor-stage.adding{cursor:crosshair;box-shadow:0 0 0 4px rgba(247,190,56,.12)}.hotspot-editor-marker{position:absolute;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;border:4px solid white;background:linear-gradient(145deg,#ffc845,#e89713);color:#07172f;font-size:36px;box-shadow:0 12px 28px rgba(0,0,0,.35);touch-action:none;cursor:grab;z-index:4}.hotspot-editor-marker:active{cursor:grabbing}.hotspot-editor-marker.selected{outline:5px solid rgba(69,184,255,.5);outline-offset:4px}.hotspot-scene-fallback{position:absolute;transform:translate(-50%,-50%);font-size:80px;filter:drop-shadow(0 10px 12px rgba(0,0,0,.25));pointer-events:none}.hotspot-editor-hint{margin:10px 0;color:#d7e8fb}.hotspot-editor-list{display:flex;gap:8px;overflow:auto;padding:6px 1px}.hotspot-list-item{min-width:190px;display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center;text-align:left;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:white;padding:10px}.hotspot-list-item b{font-size:27px;grid-row:1/3}.hotspot-list-item span{font-weight:900}.hotspot-list-item small{color:var(--muted)}.hotspot-list-item.active{border-color:var(--gold2);background:rgba(247,190,56,.12)}.empty-hotspots{padding:14px;color:var(--muted)}
.hotspot.challenge{background:linear-gradient(145deg,#ffcc4d,#df8f0d);color:#07172f;animation:challengeBounce 1.3s infinite}.hotspot.challenge.found{background:linear-gradient(145deg,#5df0b2,#1ba46d);animation:none}.hotspot.challenge.found:after{content:'✓';position:absolute;right:-4px;top:-7px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#138259;font-size:15px;font-weight:1000}@keyframes challengeBounce{50%{transform:scale(1.09)}}.challenge-status{padding:13px 14px;margin-top:14px;border-radius:15px;background:rgba(247,190,56,.13);border:1px solid rgba(247,190,56,.3);display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px}.challenge-status span{font-weight:1000;color:var(--gold2)}.challenge-mini-progress{height:9px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}.challenge-mini-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--success));border-radius:inherit;transition:.25s}.confetti-wrap{position:fixed;inset:0;z-index:900;pointer-events:none;display:grid;place-items:center;overflow:hidden}.confetti-wrap i{position:absolute;font-style:normal;font-size:26px;animation:confettiFly 1.9s ease-out forwards}@keyframes confettiFly{0%{transform:translate(0,10vh) scale(.2) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(var(--x),-55vh) scale(1.3) rotate(var(--r));opacity:0}}
@media(max-width:900px){.session-table-row{grid-template-columns:1fr 1fr}.session-table-row.head{display:none}.active-session-card{align-items:flex-start;flex-direction:column}.hotspot-editor-stage{min-height:380px}}
@media(max-width:760px){.classroom-btn{font-size:0;width:48px;padding:10px}.classroom-btn:before{content:'🏫';font-size:21px}.classroom-btn.active-session:before{content:'●';color:#72f0b8}.session-table-row{grid-template-columns:1fr}.hotspot-editor-stage{min-height:300px}.hotspot-editor-marker{width:58px;height:58px;font-size:28px}.challenge-status{grid-template-columns:1fr auto}.challenge-mini-progress{grid-column:1/-1}}

/* Reader overflow refinement */
.story-page{justify-content:flex-start;overflow:auto}
#hotspotModal{z-index:160}

/* V1.3.0 — Cerita Lucu & Bintang Membaca */
.reward-card{position:relative;overflow:hidden}.reward-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;top:-90px;background:radial-gradient(circle,rgba(255,209,94,.32),transparent 68%)}
.reward-top{display:flex;align-items:center;gap:15px}.reward-top .mini-illustration{font-size:62px;margin:0}.reward-top small{color:var(--gold2);font-weight:900;letter-spacing:1px}.reward-top h3{margin:4px 0 0}.reward-progress{height:12px;background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden;margin-top:18px}.reward-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--gold2));border-radius:inherit;box-shadow:0 0 16px rgba(255,209,94,.38)}
.surprise-btn{border-color:rgba(255,209,94,.45)!important}.surprise-btn:hover{background:rgba(255,209,94,.15)!important}
.story-category{position:absolute;bottom:12px;left:12px;z-index:3;background:linear-gradient(135deg,rgba(6,23,47,.88),rgba(18,63,108,.9));padding:7px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid rgba(255,255,255,.2);box-shadow:0 7px 20px rgba(0,0,0,.22)}
.story-meta{gap:9px;flex-wrap:wrap}.story-meta span:last-child{color:var(--gold2)}
.voice-style-pill{border-color:rgba(255,209,94,.45)!important;background:rgba(255,209,94,.12)!important;color:#ffe09a!important}
.setting-card small{color:var(--muted);line-height:1.35}
@media(max-width:760px){.reward-top .mini-illustration{font-size:52px}.story-meta{font-size:12px}}


/* V1.4.0 — Koleksi Resmi & Literasi PAUD */
.official-btn{border:1px solid rgba(69,184,255,.32);background:linear-gradient(135deg,rgba(69,184,255,.18),rgba(22,119,255,.2));color:#dff4ff;border-radius:14px;min-height:44px;padding:0 14px;font-weight:900}
.official-btn:hover,.official-cta:hover{border-color:rgba(255,217,118,.55);box-shadow:0 8px 24px rgba(22,119,255,.16)}
.stat-row{grid-template-columns:repeat(4,1fr)}
.alignment-badge{position:absolute!important;right:12px!important;bottom:12px!important;left:auto!important;z-index:3!important;background:linear-gradient(135deg,#f7df90,#e7aa2f)!important;color:#12213a!important;padding:7px 10px!important;border-radius:999px!important;font-size:11px!important;font-weight:1000!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 22px rgba(0,0,0,.24)!important}
.story-origin{display:block;margin:-7px 0 13px;color:#ffd976;font-weight:800;line-height:1.35}
.official-panel{width:min(1500px,97vw);max-height:94vh}
.official-heading{align-items:center}.official-heading .teacher-badge{white-space:nowrap}
.official-notice{display:flex;gap:14px;align-items:flex-start;margin:16px 0;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(242,186,56,.13),rgba(69,184,255,.08));border:1px solid rgba(242,186,56,.28)}
.official-notice strong{color:var(--gold2);white-space:nowrap}.official-notice span{color:#d9e8f8;line-height:1.45}
.official-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}.official-toolbar .search{min-width:min(360px,100%)}
.official-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;max-height:58vh;overflow:auto;padding:2px 6px 12px 2px;scrollbar-width:thin;scrollbar-color:#2f83d3 transparent}
.official-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:22px;background:linear-gradient(160deg,rgba(19,60,105,.96),rgba(6,23,47,.98));border:1px solid rgba(255,255,255,.12);box-shadow:0 15px 36px rgba(0,0,0,.18)}
.official-card:hover{border-color:rgba(255,217,118,.48)}
.official-card-head{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center}.official-icon{width:60px;height:60px;display:grid;place-items:center;border-radius:18px;font-size:35px;background:linear-gradient(145deg,rgba(255,217,118,.22),rgba(69,184,255,.16));border:1px solid rgba(255,255,255,.13)}
.official-card-head small{display:block;color:var(--gold2);font-weight:900;letter-spacing:.2px}.official-card-head h3{margin:3px 0 4px;font-size:21px}.official-card-head span{color:var(--muted);font-size:13px}
.rights-badge{align-self:flex-start;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:1000;border:1px solid transparent}
.rights-badge.cc{background:rgba(62,213,152,.14);color:#8bf0c4;border-color:rgba(62,213,152,.35)}
.rights-badge.noncommercial{background:rgba(242,186,56,.14);color:#ffe097;border-color:rgba(242,186,56,.36)}
.rights-badge.permission{background:rgba(255,94,108,.13);color:#ffb6bd;border-color:rgba(255,94,108,.32)}
.rights-badge.official-link{background:rgba(69,184,255,.13);color:#a9e1ff;border-color:rgba(69,184,255,.32)}
.official-card>p{margin:0;color:#c9dced;line-height:1.5}
.official-guidance{display:grid;gap:5px;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}.official-guidance b{color:#d9ecff}.official-guidance span{color:var(--muted);line-height:1.4}.official-guidance.activity{background:rgba(62,213,152,.055)}
.official-card details{border-top:1px solid rgba(255,255,255,.09);padding-top:10px}.official-card summary{cursor:pointer;color:#ffe19a;font-weight:900}.official-card details p{margin:9px 0 0;color:var(--muted);line-height:1.45}
.official-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}.official-card-actions button{flex:1;min-width:150px;padding:10px 12px;min-height:44px}
.official-footer-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px}
.official-empty{grid-column:1/-1}
@media(max-width:900px){.stat-row{grid-template-columns:repeat(2,1fr)}.official-grid{grid-template-columns:1fr;max-height:60vh}.official-notice{flex-direction:column}}
@media(max-width:760px){.official-btn{font-size:0;width:48px;padding:10px}.official-btn:before{content:'🏛️';font-size:21px}.official-panel{max-height:none}.official-grid{max-height:none;overflow:visible}.official-toolbar{align-items:stretch;flex-direction:column}.official-toolbar .search{width:100%;min-width:0}.official-card-actions{flex-direction:column}.official-card-actions button{width:100%}.official-notice strong{white-space:normal}}


/* V1.5.0 — Pembelajaran Mendalam & Studio Aktivitas */
.activity-top-btn{border:1px solid rgba(255,217,118,.36);background:linear-gradient(135deg,rgba(242,186,56,.18),rgba(22,119,255,.2));color:#fff2bd;border-radius:14px;min-height:44px;padding:0 14px;font-weight:900}
.activity-cta{border-color:rgba(255,217,118,.42)!important;background:linear-gradient(135deg,rgba(242,186,56,.16),rgba(69,184,255,.1))!important}.activity-reader-btn{border-color:rgba(255,217,118,.5)!important;color:#ffe39a!important}.activity-card-btn{max-width:52px;background:rgba(69,184,255,.13);color:#c9efff;border:1px solid rgba(69,184,255,.28)!important}.activity-card-btn:hover{background:rgba(69,184,255,.24)}
.activity-panel{width:min(1500px,97vw);max-height:95vh}.activity-heading{align-items:end}.activity-story-picker{display:grid;gap:6px;color:var(--gold2);font-weight:900;min-width:min(360px,100%)}.activity-story-picker select{background:#0b2a52;border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:14px;padding:12px 14px}
.activity-story-head{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:20px;margin:16px 0;border-radius:23px;background:linear-gradient(135deg,color-mix(in srgb,var(--activity-color,#2f8f62) 42%,#102c50),rgba(6,23,47,.98));border:1px solid rgba(255,255,255,.14);overflow:hidden}.activity-story-head:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-90px;top:-110px;background:radial-gradient(circle,rgba(255,217,118,.26),transparent 70%)}.activity-emoji{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;font-size:48px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.17)}.activity-story-head h2{margin:4px 0 5px}.activity-story-head p{margin:0;color:#d8e7f8}.activity-score{position:relative;z-index:2;display:grid;text-align:right}.activity-score strong{font-size:28px;color:var(--gold2)}.activity-score small{color:var(--muted)}
.deep-learning-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.deep-learning-strip article{padding:14px 16px;border-radius:17px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.1);display:grid;gap:4px}.deep-learning-strip b{color:var(--gold2)}.deep-learning-strip span{color:var(--muted);font-size:13px}
.activity-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}.activity-card,.lesson-plan-card{border-radius:23px;background:linear-gradient(160deg,rgba(18,58,102,.97),rgba(6,23,47,.99));border:1px solid rgba(255,255,255,.12);padding:18px;box-shadow:0 16px 38px rgba(0,0,0,.18)}.activity-card-title,.lesson-plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.activity-card-title>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:10px}.activity-card-title h3{margin:0}.activity-card-title p{grid-column:2;margin:4px 0 0;color:var(--muted)}.activity-icon{grid-row:1/3;font-size:35px}.activity-status{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted);font-size:12px;font-weight:900;white-space:nowrap}.activity-status.done{background:rgba(62,213,152,.13);color:#86edc0;border:1px solid rgba(62,213,152,.25)}
.sequence-list{display:grid;gap:8px;margin:16px 0}.sequence-item{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:11px;border-radius:15px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}.sequence-number{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#14213d;font-weight:1000}.sequence-item b{display:block}.sequence-item small{display:block;color:var(--muted);margin-top:3px}.sequence-controls{display:flex;gap:5px}.sequence-controls button{width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.08);color:white;font-weight:1000}
.emotion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:17px 0}.emotion-option{min-height:82px;border-radius:16px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.06);color:white;display:grid;place-items:center;gap:3px}.emotion-option span{font-size:31px}.emotion-option.active{background:linear-gradient(135deg,rgba(242,186,56,.24),rgba(69,184,255,.17));border-color:var(--gold2);box-shadow:0 0 0 3px rgba(242,186,56,.1)}.reflection-note{display:grid;gap:7px;color:#d8e7f8;font-weight:800}.reflection-note textarea{resize:vertical;min-height:94px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:white;border-radius:14px;padding:12px}.activity-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px}.activity-actions button{min-height:43px;padding:10px 13px}
.lesson-plan-card{margin-top:16px}.lesson-plan-head h3{margin:5px 0 0;font-size:23px}.lesson-principles{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.lesson-principles span{padding:7px 10px;border-radius:999px;background:rgba(69,184,255,.11);border:1px solid rgba(69,184,255,.24);color:#bfeaff;font-size:12px;font-weight:900}.lesson-principles span:nth-child(-n+3){background:rgba(242,186,56,.11);border-color:rgba(242,186,56,.27);color:#ffe19a}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.lesson-grid article{padding:13px 14px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}.lesson-grid b{color:var(--gold2)}.lesson-grid p{margin:7px 0 0;color:var(--muted);line-height:1.43}
@media(max-width:1050px){.activity-layout{grid-template-columns:1fr}.lesson-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.activity-top-btn{font-size:0;width:48px;padding:10px}.activity-top-btn:before{content:'🧩';font-size:21px}.activity-panel{max-height:none}.activity-heading,.activity-story-head{align-items:stretch;grid-template-columns:1fr}.activity-story-picker{min-width:0}.activity-score{text-align:left}.deep-learning-strip,.lesson-grid{grid-template-columns:1fr}.emotion-grid{grid-template-columns:repeat(2,1fr)}.sequence-item small{display:none}.lesson-plan-head{flex-direction:column}.activity-actions{justify-content:stretch}.activity-actions button{flex:1}}


/* V1.6.0 — Panggung Cerita & Portofolio Anak */
.stage-top-btn,.stage-reader-btn{background:linear-gradient(135deg,#8f43b5,#5c2d91)!important;color:#fff!important;border-color:#b889df!important}.stage-panel,.portfolio-panel{width:min(1220px,96vw);max-height:94vh}.stage-layout{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(380px,1.5fr) minmax(250px,.8fr);gap:16px;align-items:start}.stage-cast,.story-theater,.stage-tools-card,.portfolio-narrative,.performance-history{background:linear-gradient(160deg,rgba(15,43,80,.98),rgba(5,24,50,.98));border:1px solid rgba(86,170,255,.3);border-radius:22px;padding:18px;box-shadow:0 16px 40px rgba(0,0,0,.22)}.stage-section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.stage-section-head h3{margin:4px 0 12px}.stage-count{background:#153e70;color:#bfe0ff;border-radius:999px;padding:7px 11px;font-size:.8rem}.stage-role-grid{display:grid;gap:10px}.stage-role-card{display:grid;gap:7px;padding:12px;border-radius:14px;background:rgba(255,255,255,.055)}.stage-role-card span{font-weight:800;color:#fff}.stage-role-card select,.portfolio-toolbar select,.assessment-card select{width:100%;background:#081c38;color:#fff;border:1px solid #315e91;border-radius:10px;padding:10px}.theater-scene{min-height:410px;border-radius:22px;padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--stage-color) 34%,transparent),transparent 55%),linear-gradient(145deg,#102e58,#06172f);border:2px solid color-mix(in srgb,var(--stage-color) 65%,#e0b74e);position:relative;overflow:hidden}.theater-visual{font-size:clamp(3rem,7vw,6rem);display:flex;gap:22px;filter:drop-shadow(0 12px 14px rgba(0,0,0,.25));margin-bottom:12px}.theater-scene-label{font-size:.78rem;letter-spacing:.12em;font-weight:900;color:#eec75d}.theater-speaker{margin-top:12px;font-size:1.35rem;font-weight:900;color:#fff}.theater-speaker small{display:block;color:#7bc6ff;font-size:.85rem;margin-top:4px}.theater-scene blockquote{font-size:clamp(1.25rem,2.2vw,2rem);line-height:1.4;font-weight:800;color:#fff;margin:22px 0;max-width:820px}.theater-progress{width:85%;height:9px;background:#071326;border-radius:999px;overflow:hidden}.theater-progress i{display:block;height:100%;background:linear-gradient(90deg,#e7b542,#ffdb75)}.stage-controls{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}.stage-tools-card{display:grid;gap:16px}.stage-timer,.stage-record{display:grid;gap:10px;padding:14px;border-radius:15px;background:rgba(255,255,255,.055)}.stage-timer>span,.stage-record>span{font-weight:900;color:#fff}.stage-timer strong{font-size:2.4rem;color:#f1ca61;font-variant-numeric:tabular-nums}.stage-timer div,.stage-record div{display:flex;gap:8px;flex-wrap:wrap}.stage-award{border:1px solid #e4b649;background:linear-gradient(135deg,#9a6a10,#d6a52c);color:#08162b;border-radius:16px;padding:15px;font-weight:900}.portfolio-toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:15px}.portfolio-toolbar label{display:grid;gap:6px;min-width:250px;font-weight:800}.portfolio-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:15px}.portfolio-summary>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;background:linear-gradient(145deg,#133d70,#0b2447);border:1px solid #2d6399;border-radius:17px;padding:15px}.portfolio-summary span{font-size:2rem;grid-row:1/3}.portfolio-summary strong{font-size:1.7rem;color:#f0c859}.portfolio-summary small{color:#b8cce4}.assessment-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:10px}.assessment-card{display:grid;gap:10px;background:#0e2b50;border:1px solid #2d6399;border-radius:16px;padding:14px}.assessment-card span{font-weight:900}.portfolio-note{display:grid;gap:8px;margin:15px 0;font-weight:900}.portfolio-note textarea{background:#071c37;color:#fff;border:1px solid #315e91;border-radius:14px;padding:13px;resize:vertical}.portfolio-narrative{margin:14px 0}.portfolio-narrative p{font-size:1.05rem;line-height:1.7}.performance-history{margin-top:14px}.performance-history h3{margin-top:0}.performance-history>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.09)}.performance-history>div span{grid-row:1/3;font-size:1.5rem}.performance-history>div small{color:#a9c1dc}.portfolio-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:15px}.portfolio-empty{text-align:center;padding:45px 20px}.portfolio-empty>span{font-size:4rem}.portfolio-empty h3{font-size:1.5rem}.hidden{display:none!important}@media(max-width:980px){.stage-layout{grid-template-columns:1fr}.assessment-grid{grid-template-columns:repeat(2,1fr)}.stage-tools-card{grid-template-columns:1fr 1fr}.stage-award{grid-column:1/-1}}@media(max-width:620px){.assessment-grid,.portfolio-summary,.stage-tools-card{grid-template-columns:1fr}.theater-scene{min-height:330px}.theater-visual{gap:8px}.portfolio-toolbar>*{width:100%}.portfolio-actions{flex-direction:column}}


/* ===== V1.7.0 Studio Cerita AI & Budaya Nusantara ===== */
.smart-top-btn{background:linear-gradient(135deg,#6d4bd1,#a56cf2);color:#fff;border:1px solid #cab8ff;border-radius:13px;padding:10px 14px;font-weight:900;box-shadow:0 7px 20px #4e31a44d;white-space:nowrap}
.smart-home-btn{border-color:#ae93ff!important;color:#e8ddff!important}.region-badge{position:absolute;left:12px;bottom:12px;background:#0c315fe8;color:#fff;border:1px solid #edc55a;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:900;box-shadow:0 4px 12px #001b}.bilingual-note{display:block;color:#6551a1!important;margin-top:5px;font-weight:800}.language-toggle{background:linear-gradient(135deg,#fff2c6,#ffd369)!important;color:#4c3700!important;border-color:#e2ae2b!important}.branch-choice-box{margin:14px 0;padding:13px;border:1px solid #dbc275;border-radius:14px;background:#fff9df}.branch-choice-box>b{display:block;color:#5c4300;margin-bottom:9px}.branch-choice-box>div{display:flex;gap:9px;flex-wrap:wrap}.branch-choice-box button{display:flex;align-items:center;gap:7px;border:0;border-radius:12px;padding:11px 14px;background:linear-gradient(135deg,#0d4f91,#1374bd);color:white;font-weight:900;box-shadow:0 6px 14px #0b4a7d3b}.branch-choice-box button span{font-size:22px}
.smart-studio-panel{width:min(1080px,96vw)}.smart-mode-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.smart-mode-card{display:flex;align-items:center;gap:12px;border:1px solid #c8d4e7;border-radius:16px;padding:15px;background:#f7faff;cursor:pointer}.smart-mode-card:has(input:checked){border-color:#7357d7;background:#f2edff;box-shadow:0 0 0 3px #7357d719}.smart-mode-card input{width:22px;height:22px}.smart-mode-card span{display:grid;gap:4px}.smart-mode-card b{color:#19385f}.smart-mode-card small{color:#63758d}.smart-form{margin-top:12px}.ai-config-details{margin:16px 0;border:1px solid #d7ddeb;border-radius:14px;padding:13px;background:#f8faff}.ai-config-details summary{cursor:pointer;font-weight:900;color:#213f6a}.ai-config-grid{margin-top:13px}.smart-status{border-left:5px solid #7658dc;background:#f3efff;color:#463780;padding:12px 15px;border-radius:10px;margin:14px 0;font-weight:800}
.avatar-panel{width:min(900px,95vw)}.avatar-layout{display:grid;grid-template-columns:310px 1fr;gap:20px;margin:16px 0}.avatar-preview-card{border-radius:22px;background:linear-gradient(160deg,#0b315c,#07172f);padding:25px;text-align:center;color:#fff;box-shadow:0 16px 35px #07172f35}.avatar-preview{--avatar-color:#f2b705;width:180px;height:180px;margin:0 auto 16px;border-radius:50%;background:linear-gradient(145deg,#fff,#e9f2ff);border:10px solid var(--avatar-color);display:grid;place-items:center;font-size:98px;position:relative;box-shadow:0 0 0 5px #ffffff22}.avatar-preview i{position:absolute;right:-8px;top:-14px;font-size:54px;font-style:normal}.avatar-preview-card h3{font-size:27px;margin:8px}.avatar-preview-card p{color:#f9ce57;font-weight:900}.avatar-controls{display:grid;gap:16px}.avatar-controls label{display:grid;gap:7px;font-weight:900;color:#203c63}.avatar-controls select,.avatar-controls input{min-height:46px;border:1px solid #cbd7e8;border-radius:11px;padding:9px}.avatar-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.avatar-options button{width:56px;height:56px;border:2px solid #ccd8e7;border-radius:14px;background:#fff;font-size:30px}.avatar-options button.active{border-color:#f2b705;background:#fff7d8;transform:translateY(-2px)}
.accessibility-panel .access-row{display:grid;gap:7px;font-weight:900;margin:14px 0}.accessibility-panel select{min-height:48px;border:1px solid #cbd7e8;border-radius:11px;padding:9px}.access-switch{display:flex;align-items:center;justify-content:space-between;border:1px solid #d6dfeb;border-radius:12px;padding:13px 14px;margin:8px 0;font-weight:900}.access-switch input{width:24px;height:24px}.high-contrast{--navy:#000b18;filter:contrast(1.15)}.high-contrast .story-card,.high-contrast .modal-card,.high-contrast .story-page{border:2px solid #f2b705}.dyslexia-font,.dyslexia-font *{font-family:Arial,Verdana,Tahoma,sans-serif!important;letter-spacing:.025em;word-spacing:.08em}.dyslexia-font .story-text{line-height:1.9}
@media(max-width:900px){.smart-mode-row,.avatar-layout{grid-template-columns:1fr}.avatar-preview-card{padding:18px}.smart-top-btn{padding:9px 10px}.topbar-actions{gap:6px}}
@media(max-width:640px){.smart-top-btn{font-size:0}.smart-top-btn:before{content:'✨';font-size:19px}.branch-choice-box>div{display:grid}.branch-choice-box button{width:100%}}