*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f6f8f5;color:#18321f}button{border:0;border-radius:10px;padding:11px 16px;background:#176b3a;color:#fff;cursor:pointer;margin:4px}button.orange{background:#e67e22}button.danger{background:#c0392b}.navbtn,nav button{background:transparent;color:#18321f}nav{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid #ddd;padding:12px 5%;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-size:20px;cursor:pointer}.brand img{width:38px;height:38px;object-fit:contain}.navlinks{display:flex;align-items:center;gap:4px;flex-wrap:wrap}main{max-width:1100px;margin:30px auto;padding:0 18px;min-height:75vh}.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:25px;align-items:center;padding:55px 0}.hero h1{font-size:42px;margin:15px 0}.badge{display:inline-block;background:#dff2e4;color:#176b3a;padding:6px 10px;border-radius:20px;font-size:12px;font-weight:bold}.card{background:#fff;border:1px solid #e1e7e2;border-radius:16px;padding:22px;margin:14px 0;box-shadow:0 3px 12px #00000008}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.big{text-align:center;padding:60px}.form{max-width:550px;margin:50px auto}.form label,.form input,.form textarea{display:block;width:100%}.form label{font-weight:bold;margin:12px 0}.form input,.form textarea{margin-top:6px;padding:11px;border:1px solid #ccd6cf;border-radius:9px;font:inherit}.thumb{width:100%;height:160px;object-fit:cover;border-radius:12px}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}.center{text-align:center}.avatar-shop{width:110px;height:110px;object-fit:contain}.avatar-xl{width:140px;height:140px;object-fit:contain}.profile{text-align:center}.quizimg{max-width:100%;max-height:250px;display:block;margin:15px auto}.option{display:block;padding:12px;margin:7px 0;background:#f4f7f4;border-radius:9px}.comment{margin-bottom:10px}.comment small{display:block;color:#777}.reply{margin:10px 0 0 35px}.video{width:100%;min-height:350px;border:0;margin:20px 0}.content{line-height:1.7;margin:20px 0}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:12px;border-bottom:1px solid #ddd;text-align:left}.logo-preview{width:100px;height:100px;object-fit:contain;display:block;margin:10px 0}footer{text-align:center;padding:25px;background:#173d25;color:white;margin-top:40px}@media(max-width:700px){.hero{grid-template-columns:1fr}.hero h1{font-size:30px}nav{align-items:flex-start;flex-direction:column}.navlinks{width:100%}.video{min-height:220px}}

.video-wrap{margin-top:18px}.video{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#eee}.video-link{display:inline-block;margin-top:8px;text-decoration:none;font-weight:700}.video-error{margin-top:18px}.video-error p{margin-bottom:0}

/* Avatar & julukan siswa */
.profile-nav{display:inline-flex;align-items:center;gap:8px!important}.nav-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #f0c419;background:#fff}.nav-nickname{font-weight:700;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nickname{font-size:18px;margin:6px 0}.comment-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.comment-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid #ddd}.comment-head small{display:block;color:#666;font-weight:400;margin-top:2px}

.profile-nav{background:#fff!important;display:inline-flex!important;align-items:center;gap:7px!important;padding:6px 9px!important}.nav-avatar{width:34px!important;height:34px!important;border-radius:50%;object-fit:cover;border:2px solid #f0c419;background:#fff}.nav-nickname{font-weight:700;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-points{font-weight:700;white-space:nowrap}@media(max-width:700px){.profile-nav{width:auto!important}}

.notice{padding:18px;border:1px solid #f0b429;border-radius:14px;background:#fff8df;margin-top:14px}.notice h2{margin-top:0}

/* Editor isi materi dengan gambar */
.material-editor{max-width:900px}.editor-toolbar{display:flex;gap:5px;flex-wrap:wrap;align-items:center;padding:8px;background:#f3f6f3;border:1px solid #ccd6cf;border-bottom:0;border-radius:10px 10px 0 0}.editor-toolbar button{margin:0;padding:7px 10px}.editor-upload{display:inline-flex!important;align-items:center;gap:6px;background:#176b3a;color:#fff;padding:8px 11px;border-radius:8px;cursor:pointer!important;font-weight:700!important;margin:0!important}.editor-upload input{display:none!important}.rich-editor{min-height:300px;padding:14px;border:1px solid #ccd6cf;border-radius:0 0 10px 10px;background:#fff;line-height:1.7;outline:none}.rich-editor:focus{border-color:#176b3a;box-shadow:0 0 0 2px #176b3a22}.rich-editor img{max-width:100%;height:auto;display:block;margin:12px auto;border-radius:10px}.content img{max-width:100%;height:auto;display:block;margin:16px auto;border-radius:12px}.content h3,.content h4{margin-top:20px}.content ul,.content ol{padding-left:25px}
/* Identitas siswa pada navbar: julukan avatar dan nama akun */
.profile-nav .nav-identity{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15;min-width:0}.profile-nav .nav-student-name{font-size:11px;font-weight:500;color:#64748b;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-nav .nav-nickname{font-size:14px}
@media(max-width:700px){.profile-nav .nav-student-name{max-width:90px;font-size:10px}.profile-nav .nav-nickname{max-width:90px;font-size:12px}}

/* Navbar identity: keep student name and avatar nickname visible */
.profile-nav .nav-identity{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:2px!important;line-height:1.15!important;white-space:normal!important}
.profile-nav .nav-student-name{display:block!important;font-size:12px!important;font-weight:600!important;color:#334155!important;max-width:150px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.profile-nav .nav-nickname{display:block!important;font-size:13px!important;font-weight:700!important;color:#18321f!important;max-width:150px!important}

.brand-wrap{display:flex;align-items:center;cursor:pointer;min-width:0}
.brand-text{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.brand-text small{font-size:12px;font-weight:500;color:#64748b;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.brand-text small{max-width:90vw}.brand{font-size:18px}}

/* School/pangkalan subtitle in the website navbar */
.brand-wrap{flex:0 1 auto;min-width:0}
.brand-text{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1.12;min-width:0}
.brand-text b{display:block}
.brand-text small{display:block;font-size:12px;font-weight:500;color:#64748b;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){nav{gap:8px;padding:10px 3%}.brand-text small{max-width:180px}.brand{font-size:17px}}

:root{--primary:#176b3a;--secondary:#f0c419;--page-bg:#f6f8f5;--surface:#fff;--text-color:#18321f;--font-family:Arial;--base-font:16px;--card-radius:16px;--button-radius:10px}
body{font-family:var(--font-family),sans-serif;background:var(--page-bg);color:var(--text-color);font-size:var(--base-font)}
button{background:var(--primary);border-radius:var(--button-radius)}nav{background:var(--surface);color:var(--text-color)}.navbtn,nav button{color:var(--text-color)}.card{background:var(--surface);color:var(--text-color);border-radius:var(--card-radius)}footer{background:var(--primary)}.badge{background:color-mix(in srgb,var(--primary) 15%,white);color:var(--primary)}
.theme-layout{grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);align-items:start}.theme-form{max-width:none;margin:14px 0}.theme-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.theme-colors label{font-size:13px}.theme-colors input[type=color]{display:block;width:100%;height:42px;padding:3px;margin-top:5px}.theme-form select,.theme-form input:not([type=color]){width:100%;margin-top:5px;padding:9px;border:1px solid #ccd6cf;border-radius:8px;font:inherit}.theme-preview-wrap{position:sticky;top:90px}.theme-preview{border:1px solid #cbd5e1;border-radius:12px;overflow:hidden;background:var(--page-bg);color:var(--text-color)}.theme-preview-nav{padding:13px;background:var(--surface);border-bottom:1px solid #cbd5e1;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px}.theme-preview-content{padding:18px}.theme-preview-card{background:var(--surface);padding:16px;border:1px solid #ddd;border-radius:var(--card-radius);margin-top:16px}.muted{color:#64748b;font-size:12px}@media(max-width:700px){.theme-layout{grid-template-columns:1fr}.theme-preview-wrap{position:static}}

/* Game edukatif: responsif untuk ponsel dan desktop */
.game-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.game-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.game-card p{flex:1;color:#617066}
.game-art{width:100%;min-height:130px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:54px;gap:16px}
.quiz-art{background:linear-gradient(135deg,#fff1c2,#ffe08a)}
.memory-art{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.adventure-art{background:linear-gradient(135deg,#dcfce7,#86efac)}
.game-play{max-width:760px;margin:24px auto}
.game-progress{font-weight:700;color:var(--primary)}
.progress-track{height:9px;background:#e5e7eb;border-radius:20px;overflow:hidden;margin:10px 0 22px}
.progress-track span{display:block;height:100%;background:var(--primary);transition:width .2s}
.game-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px;margin:18px 0}
.game-option{margin:0;min-height:54px;text-align:left;white-space:normal;line-height:1.4}
.game-option.correct{background:#15803d!important}.game-option.wrong{background:#b91c1c!important}
.game-option:disabled{cursor:default;opacity:1}
.game-feedback{min-height:28px;line-height:1.5}
.secondary-btn{background:#64748b!important}
.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}
.memory-card{margin:0;min-height:88px;padding:8px;background:#2563eb;color:#fff;border-radius:12px;font-size:clamp(13px,2vw,19px);overflow-wrap:anywhere;white-space:normal;line-height:1.25}
.memory-card.revealed{background:#eff6ff;color:#1e3a8a;border:2px solid #93c5fd}
.memory-card:disabled{opacity:1}
.game-result{max-width:600px;margin:24px auto}
.game-score{font-size:54px;font-weight:800;color:var(--primary);line-height:1.2}
@media(max-width:520px){.memory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.memory-card{min-height:78px;padding:5px}.game-play{padding:15px}.game-art{min-height:100px}}