/* Ukuran kartu dan jarak ringkas, tanpa mengecilkan teks materi atau arena game. */
#appView .page{padding-top:20px;padding-bottom:30px}
#appView .page-head{margin-bottom:16px}#appView .page-head h2{font-size:23px}#appView .page-head p{line-height:1.5}
#appView .panel{padding:18px;border-radius:14px}
#appView .quick-grid,#appView .module-grid,#appView .studio-game-menu,#appView .quiz-level-grid{gap:12px}
#appView .quick-card{padding:14px 12px;border-radius:12px}#appView .quick-icon{width:42px;height:42px;font-size:23px;margin:0 auto 9px}
#appView .game-menu-section{margin-bottom:18px}#appView .game-menu-section>h1{font-size:28px;margin:8px 0 16px}#appView .studio-eyebrow{font-size:10px;margin-bottom:7px}
#appView .studio-game-card{min-height:0;padding:16px;border-radius:14px;border-top-width:3px;box-shadow:0 4px 14px #102c4609;gap:0}#appView .studio-game-icon{font-size:34px;line-height:1.1;margin-bottom:8px}#appView .studio-game-card>span{font-size:9px;letter-spacing:1px}#appView .studio-game-card h2{font-size:18px;line-height:1.35;margin:8px 0}#appView .studio-game-card p{font-size:13px;line-height:1.55;margin:4px 0 14px;min-height:0}#appView .studio-game-card .btn{font-size:13px;min-height:42px;padding:9px 12px;margin-top:auto}
#appView .studio .module-card.v2{padding:16px;border-radius:14px;border-top-width:3px}#appView .module-card.v2 .module-art{height:64px;min-height:0;font-size:34px;margin-bottom:10px;padding:8px}#appView .studio .module-card.v2 h3{font-size:17px;line-height:1.4;margin:8px 0}#appView .studio .module-card.v2>p{font-size:12px;line-height:1.55;min-height:0;margin:7px 0}#appView .module-card.v2 .btn{font-size:12px;min-height:42px;padding:9px 12px;margin-top:auto}#appView .module-card.v2>small{font-size:9px}
#appView .quiz-level-card{padding:16px;border-radius:14px;min-height:0}#appView .quiz-level-card .level-number{font-size:28px}#appView .quiz-level-card h3{font-size:17px;line-height:1.4;margin:8px 0}#appView .quiz-level-card p{font-size:12px;line-height:1.5;min-height:0}#appView .quiz-level-card .btn{min-height:42px;font-size:12px;padding:9px 12px}
#appView .game-level-grid{gap:12px;padding:16px}#appView .game-level-card{padding:14px;min-height:165px;border-radius:13px;gap:8px}#appView .game-level-card b{font-size:17px}#appView .game-level-card small{font-size:12px}#appView .level-note{margin-inline:16px;font-size:12px;padding:12px}
#appView .stat-grid,#appView .teacher-stats{gap:12px;margin-bottom:16px}#appView .stat-card{padding:15px}#appView .teacher-stats article{padding:16px;gap:12px}#appView .teacher-stats article b{font-size:26px}#appView .teacher-stats article>span{width:42px;height:42px;font-size:21px}
#appView .hero-banner{min-height:170px;padding:24px}#appView .hero-banner h1{font-size:30px}#appView .studio-hero{padding:22px;gap:18px;margin-bottom:18px}#appView .studio-hero h2{font-size:27px}#appView .studio-hero img{max-height:200px;object-fit:contain}#appView .teacher-welcome{padding:22px;margin-bottom:18px}#appView .teacher-welcome h1{font-size:29px;margin:10px 0}
#appView .topbar{height:52px}#appView .global-nav button{padding:8px 11px;font-size:13px;min-height:36px}
@media(min-width:1100px){#appView .module-grid,#appView .quiz-level-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#appView>.sidebar{grid-template-columns:200px minmax(0,1fr) auto;gap:14px;padding-top:10px;padding-bottom:10px}#appView>.sidebar .brand-side{padding:0;grid-column:1}#appView>.sidebar #mainNav{grid-column:2;grid-row:1;padding:0;margin:0}#appView>.sidebar #mainNav button{font-size:12px;padding:10px 12px;min-height:40px}#appView>.sidebar #logoutBtn{grid-column:3;grid-row:1;margin:0;align-self:center;min-height:40px}#appView .brand-side b{font-size:18px}#appView .brand-side small{font-size:8px}}
@media(max-width:700px){#appView .studio-game-menu{grid-template-columns:repeat(2,minmax(0,1fr))}#appView .studio-game-card{padding:13px}#appView .studio-game-card h2{font-size:16px}#appView .studio-game-card p{font-size:12px}#appView .studio-game-card .btn{min-height:44px}#appView .module-card.v2 .btn,#appView .quiz-level-card .btn{min-height:44px}#appView .hero-banner{min-height:160px;padding:18px}#appView .hero-banner h1{font-size:25px}#appView .studio-hero{padding:18px}#appView .studio-hero h2{font-size:24px}#appView .page{padding-top:16px}#appView .game-menu-section>h1{font-size:25px}#appView .teacher-welcome h1{font-size:24px}}
@media(max-width:360px){#appView .studio-game-menu{grid-template-columns:1fr}#appView .studio-game-card{padding:14px}#appView .studio-game-card h2{font-size:17px}}
#appView .hero-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;overflow:hidden}#appView .hero-banner>div:first-child{position:relative;z-index:1;flex:1;min-width:0}#appView .hero-companions{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;flex:0 0 240px;height:145px;gap:0;padding:0;background:transparent}#appView .hero-companions>img{position:static;inset:auto;max-width:none;width:145px;height:145px;object-fit:contain;opacity:1;transform:none}#appView .hero-companions>.bit-animated{position:static;inset:auto;width:100px;height:100px;flex:0 0 100px;opacity:1}@media(max-width:600px){#appView .hero-banner{gap:4px;padding:18px 14px}#appView .hero-banner h1{font-size:21px;line-height:1.4}#appView .hero-banner p{font-size:11px;line-height:1.7}#appView .hero-companions{flex-basis:115px;height:110px;gap:0}#appView .hero-companions>img{width:85px;height:110px;margin-right:-10px}#appView .hero-companions>.bit-animated{width:56px;height:56px;flex-basis:56px}}@media(max-width:360px){#appView .hero-banner{flex-direction:column;align-items:flex-start}#appView .hero-companions{align-self:center;flex-basis:auto;width:150px;height:95px}#appView .hero-companions>img{height:95px}#appView .hero-banner h1{font-size:22px}}