/* TuTu: Tetapan Paparan, TuTu App, log masuk, profil dan Tutu APP — bertema SMK Tungku (hijau, emas, merah logo). */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400.woff') format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500 600;font-display:swap;src:url('fonts/poppins-500.woff') format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700 900;font-display:swap;src:url('fonts/poppins-700.woff') format('woff')}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/lora-var.woff') format('woff')}
@font-face{font-family:'Carlito';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/carlito-400.woff') format('woff')}
@font-face{font-family:'Carlito';font-style:normal;font-weight:600 900;font-display:swap;src:url('fonts/carlito-700.woff') format('woff')}
@font-face{font-family:'Adventor';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/adventor-400.woff') format('woff')}
@font-face{font-family:'Adventor';font-style:normal;font-weight:600 900;font-display:swap;src:url('fonts/adventor-700.woff') format('woff')}
:root{--tt-a:var(--brand);--tt-b:var(--brand-dark);--tt-coral:#ff7a59;--tt-gold:#ffb84d;--tt-gold-dark:#c46a0a;--tt-teal:var(--teal);--tt-cream:#fff8fb;--tt-grad:linear-gradient(135deg,var(--brand),#ff7a59);--tutu-font:Inter}
html[data-font=poppins]{--tutu-font:'Poppins'}html[data-font=lora]{--tutu-font:'Lora'}html[data-font=carlito]{--tutu-font:'Carlito'}html[data-font=adventor]{--tutu-font:'Adventor'}
html[data-font]:not([data-font=inter]):not([data-font=sistem]) body{font-family:var(--tutu-font),Inter,ui-sans-serif,system-ui,sans-serif}
html[data-font=sistem] body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
html[data-font] :is(.paper,.att-paper){font-family:Inter,ui-sans-serif,system-ui,sans-serif}
/* Saiz tulisan: skala keseluruhan antara muka; laporan A4 kekal saiz asal. */
html[data-size=sm]{zoom:.92}html[data-size=lg]{zoom:1.1}
/* zoom juga membesarkan vh: tinggi penuh skrin dibahagi semula supaya sidebar/drawer muat dan profil di bawah kiri kekal nampak */
html[data-size=sm]{--tt-zf:.92}html[data-size=lg]{--tt-zf:1.1}
html[data-size] body{min-height:calc(100vh / var(--tt-zf,1))}html[data-size] .admin-shell{min-height:calc(100vh / var(--tt-zf,1))}
html[data-size] .admin-sidebar{height:calc(100vh / var(--tt-zf,1))}
html[data-size] .site-shell.login-shell{min-height:calc(100dvh / var(--tt-zf,1))}
html[data-size] dialog{max-height:calc(92vh / var(--tt-zf,1))}
@media screen and (max-width:1023px){html[data-size] .admin-sidebar,html[data-size] .school-nav .nav-links,html[data-size] .school-nav .nav-links.open{height:calc(100dvh / var(--tt-zf,1))!important}html[data-size] dialog#modal{max-height:calc((100dvh - 16px) / var(--tt-zf,1))}}
html[data-size=sm] :is(.paper-wrap,.att-print-preview){zoom:1.087}html[data-size=lg] :is(.paper-wrap,.att-print-preview){zoom:.909}
@media print{html[data-size]{zoom:1!important}html[data-size] :is(.paper-wrap,.att-print-preview){zoom:1!important}#tutu-sky,.tutu-prefs,.tutu-welcome{display:none!important}}
/* Prestasi Ringan: tanpa animasi, kabur kaca dan latar bergerak. */
html[data-perf=lite] *,html[data-perf=lite] *::before,html[data-perf=lite] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-perf=lite]{scroll-behavior:auto}html[data-perf=lite] body::before,html[data-perf=lite] #tutu-sky{display:none}
html[data-perf=lite] .glass-card{background:var(--glass-strong);box-shadow:0 3px 12px #1f293712}
html[data-perf=lite] :is(.topbar,.admin-topbar){background:#fffffff2}html[data-perf=lite][data-theme=dark] :is(.topbar,.admin-topbar){background:#172334}

/* Tema latar */
html[data-bg=senja] body{background:radial-gradient(circle at 8% 0,#fb4f7a40,transparent 32rem),radial-gradient(circle at 95% 8rem,#ffb84d45,transparent 28rem),radial-gradient(circle at 70% 100%,#9261d72e,transparent 30rem),linear-gradient(135deg,#fff5f8 0%,#fff8f0 45%,#f8f3ff 100%)}
html[data-bg=senja][data-theme=dark] body{background:radial-gradient(circle at 8% 0,#7a234066,transparent 32rem),radial-gradient(circle at 95% 8rem,#7a4a1655,transparent 28rem),radial-gradient(circle at 70% 100%,#3f2a7a55,transparent 30rem),linear-gradient(135deg,#1a1222,#1b1424 55%,#1d1520)}
html[data-bg=senja] body::before{background-image:linear-gradient(#ffffff70 1px,transparent 1px),linear-gradient(90deg,#ffffff70 1px,transparent 1px)}
html[data-bg=orbit] body{background:radial-gradient(circle at 50% 38%,#ffffff,transparent 40rem),linear-gradient(160deg,#eef6ff 0%,#f6f2ff 50%,#fff6ee 100%)}
html[data-bg=orbit][data-theme=dark] body{background:radial-gradient(circle at 50% 38%,#1c2c48,transparent 40rem),linear-gradient(160deg,#0c1424,#111a2e 55%,#170f22)}
html[data-bg=galaksi] body{background:radial-gradient(ellipse at 20% 10%,#c7d2fe80,transparent 30rem),radial-gradient(ellipse at 85% 70%,#fbcfe880,transparent 30rem),linear-gradient(180deg,#eef2ff,#f8f5ff 60%,#fdf2f8)}
html[data-bg=galaksi][data-theme=dark] body{background:radial-gradient(ellipse at 20% 10%,#3b2a7a66,transparent 30rem),radial-gradient(ellipse at 85% 70%,#7a1f5a55,transparent 30rem),linear-gradient(180deg,#050a1a,#0a1030 60%,#120a26)}
html:is([data-bg=orbit],[data-bg=galaksi]) body::before{display:none}
#tutu-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#tutu-sky[data-kind=orbit] i{position:absolute;left:50%;top:42%;border:1.5px dashed #4f7cff38;border-radius:50%;transform:translate(-50%,-50%);animation:tutu-spin 80s linear infinite}
#tutu-sky[data-kind=orbit] .o1{width:46vmax;height:46vmax}#tutu-sky[data-kind=orbit] .o2{width:72vmax;height:72vmax;border-color:#12b8a62e;animation-duration:120s;animation-direction:reverse}#tutu-sky[data-kind=orbit] .o3{width:100vmax;height:100vmax;border-color:#ffb84d33;animation-duration:170s}
#tutu-sky[data-kind=orbit] b{position:absolute;left:50%;top:42%;width:12px;height:12px;border-radius:50%;background:var(--tt-gold);box-shadow:0 0 18px var(--tt-gold);transform-origin:0 0;animation:tutu-orbit 30s linear infinite}
#tutu-sky[data-kind=orbit] .p1{--r:23vmax}#tutu-sky[data-kind=orbit] .p2{--r:36vmax;width:9px;height:9px;background:#12b8a6;box-shadow:0 0 16px #12b8a6;animation-duration:46s;animation-delay:-12s}#tutu-sky[data-kind=orbit] .p3{--r:50vmax;width:14px;height:14px;background:#fb4f7a;box-shadow:0 0 18px #fb4f7a;animation-duration:70s;animation-delay:-30s}
@keyframes tutu-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes tutu-orbit{from{transform:rotate(0) translateX(var(--r))}to{transform:rotate(360deg) translateX(var(--r))}}
#tutu-sky[data-kind=galaksi] i{position:absolute;border-radius:50%;background:#4338ca99;animation:tutu-twinkle 4s ease-in-out infinite}
html[data-theme=dark] #tutu-sky[data-kind=galaksi] i{background:#fff;box-shadow:0 0 6px #fff}
#tutu-sky .neb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35}#tutu-sky .n1{width:40vmax;height:22vmax;left:-8vmax;top:8vh;background:#818cf8}#tutu-sky .n2{width:36vmax;height:20vmax;right:-6vmax;bottom:6vh;background:#f472b6}
#tutu-sky .shoot{position:absolute;top:12%;left:-10%;width:140px;height:2px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(18deg);opacity:0;animation:tutu-shoot 9s ease-in 3s infinite}
@keyframes tutu-twinkle{50%{opacity:.25;transform:scale(.6)}}
@keyframes tutu-shoot{0%{opacity:0;transform:translate(0,0) rotate(18deg)}4%{opacity:.9}12%{opacity:0;transform:translate(70vw,23vw) rotate(18deg)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#tutu-sky *{animation:none!important}}

html.i18n-loading #app{visibility:hidden}
/* Ikon umum */
.ticon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor}
.ticon path[d^="M16.4 12.9"]{fill:currentColor;stroke:none}
.tutu-icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#e8edf3;color:var(--ink);cursor:pointer}
html[data-theme=dark] .tutu-icon-btn{background:#314159}
.brand-text{display:flex;flex-direction:column;line-height:1.05}.brand .brand-slogan{margin-top:3px;font-size:8.5px;letter-spacing:.2em;font-weight:850;text-transform:uppercase;background:linear-gradient(90deg,var(--brand-dark),#e4602f 55%,#c46a0a);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=dark] .brand .brand-slogan{background:linear-gradient(90deg,#ff9fbb,var(--tt-gold) 55%,#ff8fa3);-webkit-background-clip:text;background-clip:text}
.tutu-footer-slogan{display:block;margin-top:8px;font-size:10px;font-weight:850;letter-spacing:.24em;text-transform:uppercase;color:var(--tt-gold-dark)}
html[data-theme=dark] .tutu-footer-slogan{color:var(--tt-gold)}

/* Butang & panel Tetapan Paparan */
.tutu-prefs-action .ticon{width:18px;height:18px}
.nav-actions .tutu-prefs-action{width:44px;height:44px;min-height:44px;padding:0;flex:0 0 44px;border-radius:50%}.nav-actions .tutu-prefs-action .action-text{display:none}
.tutu-prefs{position:fixed;z-index:400;max-height:min(80vh,640px);overflow:auto;border:1px solid #fff;border-radius:22px;background:#fbfdfff5;box-shadow:0 26px 70px #1f293733;backdrop-filter:blur(22px) saturate(160%);opacity:0;transform:translateY(-6px) scale(.98);transition:opacity .18s,transform .18s;color:var(--ink)}
.tutu-prefs.in{opacity:1;transform:none}
.tutu-prefs.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;max-height:88dvh;border-radius:26px 26px 0 0;padding-bottom:env(safe-area-inset-bottom);transform:translateY(30px)}
@media(min-width:720px){.tutu-prefs.sheet{left:50%!important;right:auto;bottom:50%;width:min(420px,calc(100% - 32px))!important;border-radius:26px;transform:translate(-50%,calc(50% + 20px))}.tutu-prefs.sheet.in{transform:translate(-50%,50%)}}
.tutu-prefs.sheet.in{transform:none}
.tutu-sheet-backdrop{position:fixed;inset:0;z-index:399;background:#18212f55;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s}.tutu-sheet-backdrop.show{opacity:1;pointer-events:auto}
.tutu-prefs-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 10px 18px;background:inherit;border-bottom:1px solid var(--line);z-index:1}
.tutu-prefs-head strong{display:flex;align-items:center;gap:9px;font-size:15px}.tutu-prefs-head strong .ticon{color:var(--tt-a)}
.tutu-prefs.sheet .tutu-prefs-head::before{content:"";position:absolute;left:50%;top:6px;width:42px;height:4px;border-radius:9px;background:#18212f2e;transform:translateX(-50%)}
.tutu-prefs-body{padding:12px 18px 18px;display:grid;gap:12px}
.tutu-pref>span{display:block;margin-bottom:6px;font-size:12px;font-weight:750;color:var(--muted)}
.tutu-seg{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:#ffffffb8}
.tutu-seg button{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;min-width:0;padding:0 8px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.tutu-seg button span{overflow:hidden;text-overflow:ellipsis}
.tutu-seg button:hover{background:#18212f0d}
.tutu-seg button.on{color:#fff;background:var(--tt-grad);box-shadow:0 8px 18px #fb4f7a40}
.tutu-seg button .ticon{width:15px;height:15px}
.tutu-seg.small button{min-height:34px;font-size:11.5px}
.tutu-font-select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:#ffffffc4;padding:0 12px;color:var(--ink);font:inherit;font-size:14px}
.tutu-pref-note{display:flex;gap:8px;align-items:flex-start;margin:2px 0 0;font-size:11.5px;line-height:1.55;color:var(--muted)}.tutu-pref-note .ticon{width:15px;height:15px;margin-top:2px;color:var(--tt-a)}
html[data-theme=dark] .tutu-prefs{background:#172334f5;border-color:var(--line)}
html[data-theme=dark] :is(.tutu-seg,.tutu-font-select){background:#101b2bbf;border-color:var(--line)}
html[data-theme=dark] .tutu-seg button:hover{background:#ffffff12}
html[data-theme=dark] .tutu-sheet-backdrop{background:#030711a6}

/* Avatar */
.tutu-avatar{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--tt-a),#ff7a59 60%,var(--tt-gold));color:#fff;box-shadow:0 0 0 2px #fff,0 6px 16px #fb4f7a33}
.tutu-avatar img{width:100%;height:100%;object-fit:cover}.tutu-avatar b{font-size:14px;font-weight:850;letter-spacing:.02em}
.tutu-avatar.sm{width:30px;height:30px}.tutu-avatar.sm b{font-size:11px}
.tutu-avatar.xl{width:92px;height:92px;box-shadow:0 0 0 4px #fff,0 14px 34px #fb4f7a40}.tutu-avatar.xl b{font-size:30px}
.tutu-avatar.welcome{width:100%;height:100%;box-shadow:none}.tutu-avatar.welcome b{font-size:40px}
html[data-theme=dark] .tutu-avatar{box-shadow:0 0 0 2px #22324a,0 6px 16px #0006}

/* Menu pengguna kiri bawah */
.tutu-side-user{position:relative;padding:8px!important}
.tutu-user-btn{display:flex;align-items:center;gap:10px;width:100%;padding:6px;border:0;border-radius:14px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.tutu-user-btn:hover,.tutu-user-btn[aria-expanded=true]{background:#ffffffb0}
html[data-theme=dark] .tutu-user-btn:hover,html[data-theme=dark] .tutu-user-btn[aria-expanded=true]{background:#ffffff12}
.tutu-user-meta{display:flex;flex-direction:column;min-width:0;flex:1}.tutu-user-meta strong{font-size:11.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tutu-user-meta small{font-size:10.5px;margin-top:2px}
.tutu-user-chev{width:16px;height:16px;color:var(--muted);transform:rotate(180deg);transition:transform .2s}.tutu-user-btn[aria-expanded=true] .tutu-user-chev{transform:none}
.tutu-user-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:30;padding:6px;border:1px solid #fff;border-radius:18px;background:#fbfdfff7;box-shadow:0 -14px 40px #1f29372b;backdrop-filter:blur(20px);animation:tutu-pop .16s ease-out}
.tutu-user-menu[hidden]{display:none}
@keyframes tutu-pop{from{opacity:0;transform:translateY(6px)}}
.tutu-mi{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;text-align:left;cursor:pointer}
.tutu-mi:hover{background:#fb4f7a12}.tutu-mi .ticon{color:var(--tt-a)}.tutu-mi.red{color:#c0263f}.tutu-mi.red .ticon{color:#c0263f}.tutu-mi.red:hover{background:#c0263f12}
.tutu-mi+.tutu-mi.red{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 12px 12px}
html[data-theme=dark] .tutu-user-menu{background:#1c2a3ff7;border-color:var(--line)}html[data-theme=dark] .tutu-mi .ticon{color:#ff9fbb}html[data-theme=dark] .tutu-mi.red,html[data-theme=dark] .tutu-mi.red .ticon{color:#ff8fa3}
.admin-sidebar .tutu-side-group .ticon{width:19px;height:19px;stroke-width:1.6}

/* Kad log masuk */
/* Log masuk: muat satu skrin. Komputer dua lajur, telefon satu lajur padat; footer laman disembunyikan. */
.site-shell.login-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.site-shell.login-shell>main{flex:1;display:flex;min-height:0}.site-shell.login-shell>.footer{display:none}
.login-wrap.tutu-login{flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;padding:clamp(12px,3vh,32px) 16px}.login-wrap.tutu-login>.tutu-login-card{margin:auto}
.tutu-login-card{position:relative;width:min(900px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);padding:0;overflow:hidden;text-align:left}
.tutu-login-card::before{content:"";position:absolute;z-index:2;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--brand),#ff7a59 35%,#ffb84d 65%,var(--teal))}
.tutu-login-side{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:44px 38px;background:radial-gradient(circle at 12% 8%,#ffffffb3,transparent 52%),linear-gradient(150deg,#fb4f7a1f,#ffb84d26 55%,#4ad7c31f);border-right:1px solid #fb4f7a1f}
html[data-theme=dark] .tutu-login-side{background:radial-gradient(circle at 12% 8%,#ffffff12,transparent 52%),linear-gradient(150deg,#fb709826,#ffb84d14 55%,#4ad7c314);border-color:var(--line)}
.tutu-login-main{display:flex;flex-direction:column;padding:38px 38px 22px;min-width:0}
.tutu-login-h{margin:0 0 16px;font-size:22px;letter-spacing:-.02em}
.tutu-portal-title{margin:16px 0 6px;font-size:40px;font-weight:900;letter-spacing:-.035em;line-height:1.06;color:var(--ink)}.tutu-portal-title span{background:var(--tt-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=dark] .tutu-portal-title span{background:linear-gradient(135deg,#ff9fbb,#ffc38a);-webkit-background-clip:text;background-clip:text}
.tutu-login-school{margin:0;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.tutu-slogan-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;background:linear-gradient(90deg,#fb4f7a14,#ffb84d26,#c72f5b14);border:1px solid #ffb84d66;color:#b0450f;font-size:11px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.tutu-slogan-chip .ticon{width:14px;height:14px;color:var(--tt-gold-dark)}
html[data-theme=dark] .tutu-slogan-chip{color:var(--tt-gold);border-color:#ffb84d44}html[data-theme=dark] .tutu-slogan-chip .ticon{color:var(--tt-gold)}
.tutu-login-card .form-error{text-align:left;margin:0 0 12px}
.tutu-login-card .field{text-align:left;margin:0 0 12px;gap:0}
.tutu-login-card .field label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tutu-ifield{position:relative}.tutu-ifield .field input{padding-left:44px;min-height:50px;font-size:14px;border-radius:14px}
.tutu-ifield-ic{position:absolute;left:15px;top:16px;width:18px;height:18px;color:var(--tt-a);pointer-events:none}
html[data-theme=dark] .tutu-ifield-ic{color:#ff9fbb}
.tutu-login-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:2px!important;min-height:52px;font-size:15px!important;border-radius:16px!important}
.tutu-login-help{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;text-align:left;font-size:12px;line-height:1.5;color:var(--muted)}.tutu-login-help .ticon{flex:none;width:16px;height:16px;margin-top:1px;color:#2563eb}
.tutu-or{display:flex;align-items:center;gap:12px;margin:14px 0 12px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.2em}.tutu-or::before,.tutu-or::after{content:"";flex:1;height:1px;background:var(--line)}
.tutu-visit{display:flex;align-items:center;gap:14px;padding:11px 16px;border:2px solid #fb4f7a40;border-radius:18px;background:linear-gradient(135deg,#fb4f7a0d,#ffb84d14);text-align:left;transition:transform .15s,border-color .15s,box-shadow .15s}
.tutu-visit:hover{transform:translateY(-2px);border-color:var(--tt-a);box-shadow:0 12px 26px #fb4f7a26}
.tutu-visit>.ticon:first-child{flex:none;width:34px;height:34px;padding:7px;border-radius:12px;background:var(--tt-a);color:#fff}
.tutu-visit span{flex:1;display:flex;flex-direction:column;min-width:0}.tutu-visit b{font-size:15px}.tutu-visit small{font-size:11.5px;color:var(--tt-a);font-weight:700}
.tutu-visit-go{transform:rotate(180deg);color:var(--tt-a)}
html[data-theme=dark] .tutu-visit{border-color:#ff9fbb40;background:#ff9fbb0d}html[data-theme=dark] .tutu-visit small,html[data-theme=dark] .tutu-visit-go{color:#ff9fbb}
.tutu-login-tools{display:flex;gap:8px;margin-top:10px}.tutu-login-tools .btn{display:inline-flex;align-items:center;gap:7px;flex:1 1 0;min-width:0;justify-content:center;margin:0;align-self:auto;white-space:nowrap}
.tutu-login-tools .ticon{flex:none;width:16px;height:16px}
.tutu-login-foot{margin:12px 0 0;text-align:center;font-size:10px;letter-spacing:.14em;color:var(--muted)}
/* Maskot di kad log masuk */
.tutu-login-mascot{display:flex;align-items:center;gap:14px;margin-top:26px;padding:12px 18px 12px 10px;max-width:100%;border-radius:22px;background:#ffffffa6;border:1px solid #fb4f7a24;box-shadow:0 14px 30px #c72f5b14;text-align:left}
html[data-theme=dark] .tutu-login-mascot{background:#ffffff0d;border-color:var(--line);box-shadow:none}
.tutu-login-mascot .tutu-stage{--s:96px!important}
.tutu-login-mascot .tutu-bubble{left:-2px;min-width:140px;transform:translateY(6px) scale(.92);transform-origin:30px 100%}.tutu-login-mascot .tutu-bubble.on{transform:translateY(-2px) scale(1)}.tutu-login-mascot .tutu-bubble::after{left:34px}
.tutu-login-hi b{display:block;font-size:15px;color:var(--brand-dark)}.tutu-login-hi span{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
html[data-theme=dark] .tutu-login-hi b{color:#ff9fbb}
@media(min-width:761px) and (max-height:720px){.tutu-login-side{padding:30px 32px}.tutu-portal-title{font-size:34px;margin-top:12px}.tutu-login-mascot{margin-top:18px}.tutu-login-mascot .tutu-stage{--s:78px!important}.tutu-login-main{padding:28px 32px 16px}.tutu-login-h{margin-bottom:12px;font-size:20px}.tutu-ifield .field input{min-height:46px}.tutu-login-btn{min-height:48px}.tutu-or{margin:10px 0 9px}.tutu-visit{padding:8px 14px}}
@media(max-width:760px){
 .login-wrap.tutu-login{padding:8px 10px}
 .tutu-login-card{grid-template-columns:1fr;width:min(460px,100%);text-align:center}
 .tutu-login-side{align-items:center;padding:18px 16px 0;background:none;border:0}
 html[data-theme=dark] .tutu-login-side{background:none}
 .tutu-login-side .tutu-slogan-chip{display:none}
 .tutu-portal-title{font-size:28px;margin:0 0 3px}
 .tutu-login-school{font-size:10px;letter-spacing:.12em}
 .tutu-login-mascot{width:100%;margin-top:10px;padding:6px 14px 6px 6px;gap:10px;background:linear-gradient(135deg,#fb4f7a12,#ffb84d1c);box-shadow:none}
 .tutu-login-mascot .tutu-stage{--s:58px!important}
 .tutu-login-hi b{font-size:14px}.tutu-login-hi span{font-size:12px}
 .tutu-login-main{padding:12px 16px 12px}
 .tutu-login-h{display:none}
 .tutu-login-card .field{margin-bottom:10px}
 .tutu-ifield .field input{min-height:46px;font-size:16px}.tutu-ifield-ic{top:14px}
 .tutu-login-btn{min-height:48px}
 .tutu-login-help{margin-top:10px;font-size:11.5px}
 .tutu-or{margin:11px 0 9px;font-size:10px}
 .tutu-visit{padding:8px 12px;gap:12px;border-radius:16px}.tutu-visit>.ticon:first-child{width:32px;height:32px;padding:6px}.tutu-visit b{font-size:14px}.tutu-visit small{font-size:11px}
 .tutu-login-tools .btn{font-size:11px;padding:0 8px;gap:5px}.tutu-login-tools .ticon{width:14px;height:14px}
 .tutu-login-foot{margin-top:9px;font-size:9.5px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:760px) and (max-height:720px){.tutu-login-side{padding-top:14px}.tutu-login-mascot{padding:4px 12px 4px 4px}.tutu-login-mascot .tutu-stage{--s:50px!important}.tutu-ifield .field input{min-height:44px}.tutu-ifield-ic{top:13px}.tutu-login-btn{min-height:46px}.tutu-login-help{margin-top:8px}.tutu-or{margin:9px 0 8px}.tutu-visit{padding:6px 12px}}
@media(max-width:760px) and (max-height:640px){.login-wrap.tutu-login{padding:6px 10px}.tutu-login-side{padding-top:14px}.tutu-portal-title{font-size:25px;margin:6px 0 2px}.tutu-login-mascot{margin-top:8px;padding:4px 12px 4px 4px}.tutu-login-mascot .tutu-stage{--s:46px!important}.tutu-login-hi b{font-size:13px}.tutu-login-hi span{font-size:11.5px}.tutu-login-main{padding-top:10px}.tutu-ifield .field input{min-height:44px}.tutu-login-btn{min-height:44px}.tutu-login-help{display:none}.tutu-or{margin:8px 0 7px}.tutu-login-foot{display:none}}
@media(max-width:340px){.tutu-login-tools{flex-wrap:wrap}.tutu-login-tools .btn{flex:1 1 100%}}

/* Alu-aluan */
.tutu-welcome{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px;background:#18212fa6;backdrop-filter:blur(10px);opacity:0;transition:opacity .35s;cursor:pointer}
.tutu-welcome.in{opacity:1}.tutu-welcome.out{opacity:0}
.tutu-welcome-card{position:relative;width:min(400px,100%);padding:34px 26px 24px;border-radius:30px;text-align:center;background:linear-gradient(160deg,#ffffff,#f7fbf2 60%,#fff8e1);box-shadow:0 40px 90px #0008;transform:translateY(24px) scale(.94);transition:transform .5s cubic-bezier(.2,1.3,.4,1);overflow:hidden}
.tutu-welcome-card::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--brand),#ff7a59 35%,#ffb84d 65%,var(--teal))}
.tutu-welcome.in .tutu-welcome-card{transform:none}
.tutu-welcome-hi{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--muted)}
.tutu-welcome h2{margin:4px 0 6px;font-size:30px;line-height:1.15;color:#18212f}
.tutu-welcome-date{margin:0 0 12px;font-size:12px;color:#5f6b7e}
.tutu-welcome-tap{display:block;margin-top:14px;font-size:10.5px;color:#8a94a6;letter-spacing:.06em}
.tutu-confetti i{position:absolute;top:-12px;left:var(--x);width:8px;height:14px;border-radius:2px;background:var(--tt-gold);animation:tutu-fall 2.6s var(--d) ease-in forwards}
.tutu-confetti i:nth-child(3n){background:var(--tt-a)}.tutu-confetti i:nth-child(3n+1){background:var(--tt-b)}.tutu-confetti i:nth-child(4n){width:6px;height:6px;border-radius:50%}
@keyframes tutu-fall{to{transform:translateY(105vh) rotate(540deg)}}
html[data-theme=dark] .tutu-welcome-card{background:linear-gradient(160deg,#1c2a3f,#17263a 60%,#2a2414)}html[data-theme=dark] .tutu-welcome h2{color:#edf3fb}html[data-theme=dark] .tutu-welcome-date{color:#abbad0}

/* Dialog pengesahan */
.tutu-confirm{width:min(400px,calc(100% - 28px));padding:0;border-radius:26px;overflow:hidden}
.tutu-confirm-card{padding:28px 24px 18px;text-align:center}
.tutu-confirm-icon{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 12px;border-radius:50%;background:#fb4f7a14;color:var(--tt-a)}
.tutu-confirm-icon>.ticon{width:38px;height:38px}.tutu-confirm-icon.danger{background:#c72f5b14;color:var(--tt-b)}
.tutu-confirm-icon .tutu-avatar.xl{width:84px;height:84px}
.tutu-confirm h2{margin:0 0 8px;font-size:22px}.tutu-confirm p{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.tutu-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tutu-confirm-actions .btn{margin:0;align-self:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;font-size:13px}
.tutu-btn-danger{color:#fff;background:linear-gradient(135deg,#c72f5b,#e0455d);box-shadow:0 10px 24px #c72f5b40;border:0}
.tutu-slogan-mini{display:block;margin-top:14px;font-size:9.5px;font-weight:850;letter-spacing:.24em;text-transform:uppercase;color:var(--tt-gold-dark)}
.tutu-confirm[open]{animation:tutu-dlg .22s cubic-bezier(.2,1.2,.4,1)}@keyframes tutu-dlg{from{opacity:0;transform:scale(.94)}}
html[data-theme=dark] .tutu-slogan-mini{color:var(--tt-gold)}

/* Modal TuTu & panduan pasang */
#modal.tutu-modal{width:min(560px,calc(100% - 20px))}#modal.tutu-modal-xl{width:min(1100px,calc(100% - 16px));padding:18px}
#modal.tutu-modal .dialog-head h2{display:flex;align-items:center;gap:10px;font-size:20px}
.tutu-install-hero{display:flex;gap:14px;align-items:center;margin-bottom:16px}.tutu-install-hero img{border-radius:20px;box-shadow:0 10px 24px #fb4f7a33;flex:none}
.tutu-install-hero b{font-size:14px}.tutu-install-hero p{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.tutu-tabs{display:flex;gap:6px;padding:4px;border-radius:14px;background:#18212f0a;margin-bottom:14px}
.tutu-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-weight:750;cursor:pointer}
.tutu-tabs button.on{background:#fff;color:var(--tt-a);box-shadow:0 4px 12px #1f293718}
html[data-theme=dark] .tutu-tabs{background:#ffffff0d}html[data-theme=dark] .tutu-tabs button.on{background:#22324a;color:#ff9fbb}
.tutu-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.tutu-step{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:16px;background:#ffffffb8;border:1px solid var(--line)}
.tutu-step-n{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;color:#fff;font-weight:850;font-size:13px;background:linear-gradient(135deg,var(--tt-a),#ff7a59)}
.tutu-step>div{flex:1;min-width:0}.tutu-step b{display:block;font-size:13px}.tutu-step small{display:block;margin-top:3px;font-size:11.5px;line-height:1.5}
.tutu-step-ic{color:var(--tt-gold-dark)}.tutu-step-ic .ticon{width:22px;height:22px}
html[data-theme=dark] .tutu-step{background:#23334890}html[data-theme=dark] .tutu-step-ic{color:var(--tt-gold)}
.tutu-install .btn.full{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}

/* Tetapan Profil */
.tutu-profile-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:20px;align-items:start}
.tutu-profile-side{display:grid;gap:16px}.tutu-profile-side h2{display:flex;align-items:center;gap:9px;font-size:16px;margin:0 0 10px}.tutu-profile-side h2 .ticon{color:var(--tt-a)}
.tutu-profile-hero{display:flex;gap:20px;align-items:center;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.tutu-profile-hero h2{margin:0;font-size:19px;line-height:1.25}.tutu-profile-hero p{margin:3px 0 10px;font-size:12px;color:var(--muted)}
.tutu-avatar-edit{position:relative;flex:none}.tutu-avatar-pick{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tt-a);color:#fff;border:3px solid #fff;cursor:pointer}
.tutu-avatar-pick .ticon{width:16px;height:16px}
.tutu-avatar-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}.tutu-avatar-actions .btn{display:inline-flex;align-items:center;gap:7px;margin:0;cursor:pointer}.tutu-avatar-actions .ticon{width:15px;height:15px}
.tutu-profile-card .field input[readonly]{background:#18212f08;color:var(--muted)}
.tutu-profile-card .save-bar .btn,.tutu-profile-side .btn{display:inline-flex;align-items:center;gap:8px}
.tutu-prefs-inline{padding:0}
.tutu-app-card{display:flex;gap:14px;align-items:flex-start}.tutu-app-card img{border-radius:18px;box-shadow:0 8px 18px #fb4f7a33;flex:none}.tutu-app-card p{font-size:12px;margin:0 0 10px}
@media(max-width:980px){.tutu-profile-grid{grid-template-columns:1fr}}
@media(max-width:560px){.tutu-profile-hero{flex-direction:column;text-align:center}.tutu-avatar-actions{justify-content:center}}

/* ================= Tutu APP ================= */
.tutu-page-head{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.tutu-page-head h1{margin:0 0 4px;font-size:30px;line-height:1.1}.tutu-page-head p{margin:0;font-size:12.5px;color:var(--muted)}.tutu-page-head .section-kicker{margin:0 0 4px;color:var(--c1)}
.tutu-head-ic{display:grid;place-items:center;width:58px;height:58px;flex:none;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 12px 26px color-mix(in srgb,var(--c1) 35%,transparent)}.tutu-head-ic .ticon{width:28px;height:28px}
.tutu-back{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:#ffffffa8;border:1px solid #fff;color:var(--ink)}
html[data-theme=dark] .tutu-back{background:#2b3d528c;border-color:var(--line)}
.tutu-head-actions{margin-left:auto;display:flex;gap:8px}.tutu-head-actions .btn{display:inline-flex;align-items:center;gap:7px;margin:0}
.tutu-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}.tutu-toolbar .btn{display:inline-flex;align-items:center;gap:7px;margin:0;align-self:auto}.tutu-toolbar .btn .ticon{width:15px;height:15px}
.tutu-search{position:relative;display:flex;align-items:center;flex:1 1 220px;min-width:0}.tutu-search .ticon{position:absolute;left:13px;width:16px;height:16px;color:var(--muted)}
.tutu-search input{width:100%;min-height:42px;padding:0 14px 0 38px;border:1px solid var(--line);border-radius:14px;background:#ffffffc4;color:var(--ink);font:inherit;font-size:13px}
html[data-theme=dark] .tutu-search input{background:#101b2bbf}
.tutu-toolbar .tutu-seg{flex:none}.tutu-toolbar .tutu-seg button{flex:0 0 auto;padding:0 12px}
.tutu-hint{display:flex;gap:8px;align-items:flex-start;margin:12px 2px 0;font-size:11.5px;line-height:1.55;color:var(--muted)}.tutu-hint .ticon{width:15px;height:15px;margin-top:2px;color:var(--tt-a)}
.tutu-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 16px;text-align:center;color:var(--muted);font-size:13px}.tutu-empty .ticon{width:30px;height:30px;color:var(--tt-gold-dark)}
.tutu-hub-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}.tutu-hub-hero h1{margin:0 0 6px;font-size:34px}.tutu-hub-hero p{margin:0;font-size:13px;color:var(--muted)}.tutu-hub-hero .section-kicker{color:var(--tt-a)}
.tutu-hub-hero .btn{display:inline-flex;align-items:center;gap:7px;margin:0;align-self:auto}

/* Skrin telefon (pelancar aplikasi) */
.tutu-phone{position:relative;padding:14px 18px 16px;border-radius:30px;border:8px solid #18212f;background:radial-gradient(circle at 12% 0,#ffffff40,transparent 50%),radial-gradient(circle at 100% 100%,#ffb84d66,transparent 55%),linear-gradient(155deg,#fb4f7a,#ff7a59 55%,#ffb84d);color:#fff;box-shadow:0 30px 70px #c72f5b33,inset 0 0 0 1px #ffffff1a;min-height:380px;overflow:hidden}
.tutu-phone::before{content:"";position:absolute;left:50%;top:6px;width:84px;height:20px;border-radius:12px;background:#18212f;transform:translateX(-50%)}
.tutu-phone.games{background:radial-gradient(circle at 10% 0,#ffffff38,transparent 50%),radial-gradient(circle at 100% 100%,#fb4f7a66,transparent 55%),linear-gradient(155deg,#9261d7,#c45bb8 50%,#fb4f7a)}
.tutu-page-murid .tutu-phone{background:radial-gradient(circle at 12% 0,#ffffff38,transparent 50%),radial-gradient(circle at 100% 100%,#4ad7c366,transparent 55%),linear-gradient(155deg,#4f7cff,#3aa0e0 50%,#12b8a6)}
.tutu-hub-phone{background:radial-gradient(circle at 12% 0,#ffffff38,transparent 50%),radial-gradient(circle at 100% 100%,#12b8a655,transparent 55%),linear-gradient(155deg,#fb4f7a,#9261d7 55%,#4f7cff)!important}
html[data-theme=dark] .tutu-phone{filter:saturate(.9) brightness(.86)}
.tutu-phone-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px 14px;font-size:11.5px;font-weight:750;opacity:.92}
.tutu-phone-ttl{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#ffffff1f;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tutu-phone-ttl .ticon{width:13px;height:13px}
.tutu-phone-sig{display:inline-flex;align-items:flex-end;gap:2px;height:11px}.tutu-phone-sig i{width:3px;border-radius:1px;background:#fff}.tutu-phone-sig i:nth-child(1){height:4px}.tutu-phone-sig i:nth-child(2){height:6px}.tutu-phone-sig i:nth-child(3){height:8px}.tutu-phone-sig i:nth-child(4){height:11px}.tutu-phone-sig b{width:20px;height:10px;margin-left:5px;border:1.5px solid #fff;border-radius:3px;background:linear-gradient(90deg,#fff 70%,transparent 70%);background-clip:content-box;padding:1px}
.tutu-phone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:18px 10px;padding:6px 2px 10px}
.tutu-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:0;border:0;background:none;color:#fff;font:inherit;cursor:pointer;text-align:center}
.tutu-app>span:not(.tutu-app-lb):not(.tutu-app-by):not(.tutu-app-move):not(.tutu-app-ic){display:contents}
.tutu-app-ic{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;overflow:hidden;background:linear-gradient(140deg,var(--c1,#fff),var(--c2,#e2e8f0));color:#fff;box-shadow:0 10px 20px #0000003d,inset 0 1px 0 #ffffff59;transition:transform .15s}
.tutu-app-ic:has(img){background:#fff}.tutu-app-ic img{width:100%;height:100%;object-fit:contain;padding:13%}.tutu-app-ic.cover img{object-fit:cover;padding:0}
.tutu-app-ic .ticon{width:28px;height:28px}
.tutu-app:hover .tutu-app-ic{transform:translateY(-3px) scale(1.04)}.tutu-app:active .tutu-app-ic{transform:scale(.94)}
.tutu-app-lb{max-width:100%;font-size:11.5px;font-weight:700;line-height:1.25;text-shadow:0 1px 3px #0008;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.tutu-app-by{margin-top:-4px;font-size:9.5px;opacity:.85;text-shadow:0 1px 2px #0008}
.tutu-app.add .tutu-app-ic{background:#ffffff1f;border:2px dashed #ffffff8c;box-shadow:none}
.tutu-app-x{position:absolute;top:-6px;left:calc(50% - 40px);z-index:2;display:grid;place-items:center;width:24px;height:24px;padding:0;border:2px solid #fff;border-radius:50%;background:#e0455d;color:#fff;cursor:pointer}.tutu-app-x .ticon{width:12px;height:12px;stroke-width:3}
.tutu-phone.manage .tutu-app-ic{animation:tutu-jiggle .3s ease-in-out infinite alternate}.tutu-phone.manage .tutu-app:nth-child(2n) .tutu-app-ic{animation-delay:-.15s}
@keyframes tutu-jiggle{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
.tutu-app-move{display:flex;gap:4px}.tutu-app-move button{width:26px;height:22px;padding:0;border:0;border-radius:8px;background:#ffffff2e;color:#fff;font-size:15px;font-weight:900;line-height:1;cursor:pointer}.tutu-app-move button:disabled{opacity:.3;cursor:default}
.tutu-phone-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}.tutu-phone-dots i{width:6px;height:6px;border-radius:50%;background:#ffffff59}.tutu-phone-dots i.on{background:#fff}
.tutu-phone .tutu-empty{color:#ffffffd9}.tutu-phone .tutu-empty .ticon{color:var(--tt-gold)}
.tutu-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;padding:4px 2px 8px}
.tutu-hub-app{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:22px;background:#ffffff14;border:1px solid #ffffff26;color:#fff;transition:transform .15s,background .15s}
.tutu-hub-app:hover{transform:translateY(-3px);background:#ffffff24}
.tutu-hub-app .tutu-app-ic.big{width:58px;height:58px;margin-bottom:4px}
.tutu-hub-app b{font-size:15px}.tutu-hub-app small{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--tt-gold)}.tutu-hub-app em{font-style:normal;font-size:11.5px;line-height:1.5;opacity:.85}
.tutu-app-list{display:grid;gap:10px}
.tutu-app-row{display:flex;align-items:center;gap:14px;padding:14px}.tutu-app-row .tutu-app-ic{width:52px;height:52px;border-radius:15px;flex:none}.tutu-app-row .tutu-app-ic .ticon{width:24px;height:24px}
.tutu-app-row>div{flex:1;min-width:0}.tutu-app-row b{font-size:14px}.tutu-app-row p{margin:2px 0;font-size:12px;line-height:1.5;color:var(--muted)}.tutu-app-row small{font-size:11px}
.tutu-row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.tutu-row-actions .btn{margin:0;display:inline-flex;align-items:center;gap:6px}
.tutu-form .save-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center;margin-top:16px}.tutu-form .save-bar .btn,.tutu-game-info .save-bar .btn{display:inline-flex;align-items:center;gap:7px;margin:0;align-self:auto}
.tutu-form .save-bar small{margin-right:auto}
.tutu-logo-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tutu-logo-pick .btn{display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer}
.tutu-logo-prev{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;border:1.5px dashed var(--line);background:#fff;color:var(--muted);overflow:hidden}.tutu-logo-prev img{width:100%;height:100%;object-fit:contain}
.tutu-form .tutu-seg button{white-space:normal;line-height:1.15;min-height:44px;text-align:center}.tutu-form .tutu-seg button span{overflow:visible}
.tutu-src{margin-top:4px}.tutu-src[hidden]{display:none}
.tutu-src textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
/* EduGames */
.tutu-game-info{text-align:center}.tutu-game-logo{display:grid;place-items:center;width:104px;height:104px;margin:0 auto 12px;border-radius:28px;overflow:hidden;color:#fff;background:linear-gradient(135deg,var(--c1),#0e7490);box-shadow:0 14px 30px #0003}
.tutu-game-logo img{width:100%;height:100%;object-fit:cover}.tutu-game-logo .ticon{width:48px;height:48px}
.tutu-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:10px}.tutu-chips .badge{gap:5px}.tutu-chips .ticon{width:12px;height:12px}.badge.gold{background:#ffb84d33;color:#7a5600}
.tutu-game-info p{font-size:13px;line-height:1.6}.tutu-game-info .save-bar{justify-content:center}
.tutu-game-by{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#18212f08;text-align:left}.tutu-game-by div{display:flex;flex-direction:column}.tutu-game-by b{font-size:13px}.tutu-game-by small{font-size:10.5px}
.tutu-game-stage{height:min(74vh,720px);border-radius:16px;overflow:hidden;background:#0b1530}.tutu-game-stage iframe{width:100%;height:100%;border:0;background:#fff}
.tutu-modal-xl .save-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}.tutu-modal-xl .save-bar small{display:inline-flex;align-items:center;gap:6px}.tutu-modal-xl .save-bar .ticon{width:14px;height:14px}
/* Buku Nota Guru */
.tutu-notes{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:18px;align-items:start}
.tutu-notes-list{display:grid;gap:10px;padding:14px;position:sticky;top:96px}
#tutu-note-items{display:grid;gap:8px;max-height:56vh;overflow:auto;padding:2px}
.tutu-note-item{display:grid;gap:3px;width:100%;padding:11px 12px;border:1px solid var(--line);border-left:5px solid #cbd5e1;border-radius:14px;background:#ffffffb8;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.tutu-note-item b{display:flex;align-items:center;gap:6px;font-size:13px}.tutu-note-item b .ticon{width:13px;height:13px;color:var(--tt-b)}.tutu-note-item small{display:flex;align-items:center;gap:4px;font-size:10.5px}.tutu-note-item small .ticon{width:12px;height:12px}.tutu-note-item span{font-size:11.5px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tutu-note-item.on{border-color:var(--tt-a);box-shadow:0 0 0 2px #fb4f7a33}
.tutu-note-item.c-hijau,.tutu-note-paper.c-hijau{--nc:#ff7a59}.tutu-note-item.c-kuning,.tutu-note-paper.c-kuning{--nc:#e0b000}.tutu-note-item.c-merah,.tutu-note-paper.c-merah{--nc:#d03a52}.tutu-note-item.c-biru,.tutu-note-paper.c-biru{--nc:#2563eb}.tutu-note-item.c-ungu,.tutu-note-paper.c-ungu{--nc:#7c3aed}
.tutu-note-item[class*=" c-"]{border-left-color:var(--nc,#cbd5e1)}
html[data-theme=dark] .tutu-note-item{background:#23334890}
.tutu-note-editor{padding:18px}
.tutu-note-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px}.tutu-note-meta .check{display:inline-flex;align-items:center;gap:6px}.tutu-note-meta .ticon{width:14px;height:14px}
.tutu-colors{display:flex;gap:7px}.tutu-color{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;background:var(--nc,#e2e8f0)}
.tutu-color.c-none{background:repeating-linear-gradient(45deg,#e2e8f0 0 4px,#fff 4px 8px)}.tutu-color.c-hijau{--nc:#ff7a59}.tutu-color.c-kuning{--nc:#e0b000}.tutu-color.c-merah{--nc:#d03a52}.tutu-color.c-biru{--nc:#2563eb}.tutu-color.c-ungu{--nc:#7c3aed}
.tutu-color.on{box-shadow:0 0 0 2.5px var(--ink)}
.tutu-md-bar{display:flex;flex-wrap:wrap;gap:4px;padding:5px;border:1px solid var(--line);border-radius:12px 12px 0 0;background:#ffffffa8}
.tutu-md-bar button{min-width:34px;height:32px;padding:0 9px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-weight:850;cursor:pointer}.tutu-md-bar button:hover,.tutu-md-bar button.on{background:#fb4f7a1a;color:var(--tt-a)}
.tutu-md-sp{flex:1}.tutu-md-prev{display:inline-flex;align-items:center;gap:6px}.tutu-md-prev .ticon{width:14px;height:14px}
html[data-theme=dark] .tutu-md-bar{background:#101b2b8c}
.tutu-note-paper{position:relative;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;background:linear-gradient(#fffef8,#fffef8) padding-box;box-shadow:inset 6px 0 0 var(--nc,transparent)}
.tutu-note-editor>.tutu-note-paper{border-top:1px solid var(--line);border-radius:14px}
.tutu-note-ph{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 18px 10px 24px;border-bottom:2px solid #ffb84d66}.tutu-note-ph b{font-size:16px}.tutu-note-ph span{font-size:11px;color:#6b7280}
/* Garisan kertas sejajar dengan baris teks (14px / 28px): garis di bawah garis dasar huruf, mula dari atas kotak kandungan. */
.tutu-note-body{display:block;width:100%;min-height:340px;margin:0;padding:12px 18px 18px 24px;border:0;background:repeating-linear-gradient(transparent 0 22px,#2563eb26 22px 23px,transparent 23px 28px) content-box;color:#18212f;font:inherit;font-size:14px;line-height:28px;resize:none;overflow:hidden;outline:0;box-sizing:border-box}
.tutu-note-body::placeholder{color:#8a94a6}
.tutu-note-lined{white-space:pre-wrap;overflow-wrap:break-word}
.tutu-note-write{position:relative}
.tutu-ink-cv{position:absolute;z-index:2;touch-action:none;-webkit-user-select:none;user-select:none}
.tutu-note-write[data-ink-mode=pen] .tutu-note-body,.tutu-note-write[data-ink-mode=hl] .tutu-note-body,.tutu-note-write[data-ink-mode=erase] .tutu-note-body{-webkit-user-select:none;user-select:none}
.tutu-note-write:not([data-ink-mode=type]){box-shadow:inset 0 0 0 2px #fb4f7a33;border-radius:0 0 12px 12px}
.tutu-ink-modes{display:inline-flex;gap:2px;padding:2px;border-radius:10px;background:#18212f0d}
.tutu-md-bar .tutu-ink-modes button{display:inline-flex;align-items:center;gap:6px;height:28px;font-weight:750}.tutu-ink-modes .ticon{width:15px;height:15px}
.tutu-md-bar .tutu-ink-modes button.on{background:var(--tt-grad);color:#fff}
.tutu-ink-bar[hidden]{display:none}.tutu-ink-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-top:0;background:#fff8fbd9}
html[data-theme=dark] .tutu-ink-bar{background:#101b2b8c}html[data-theme=dark] .tutu-ink-modes{background:#ffffff14}
.tutu-ink-bar button{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border:0;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;font:inherit;font-size:12px;font-weight:750}
.tutu-ink-bar button:hover,.tutu-ink-bar button.on{background:#fb4f7a1f;color:var(--tt-a)}.tutu-ink-bar .ticon{width:18px;height:18px}
.tutu-ink-bar .tutu-ink-c{width:30px;min-width:30px;height:30px;padding:0;border-radius:50%;background:var(--ic);box-shadow:inset 0 0 0 2px #fff}
.tutu-ink-bar .tutu-ink-c.on,.tutu-ink-bar .tutu-ink-c:hover{background:var(--ic);box-shadow:inset 0 0 0 2px #fff,0 0 0 2.5px var(--ic)}
.tutu-ink-z i{display:block;width:var(--iz);height:var(--iz);border-radius:50%;background:currentColor}
.tutu-ink-div{width:1px;height:22px;background:var(--line);margin:0 2px}
.tutu-ink-more{display:inline-flex!important;gap:5px}.tutu-ink-more .ticon{width:15px!important;height:15px!important}
.tutu-ink-note{display:flex;align-items:center;gap:8px;margin-top:12px!important;padding:8px 10px;border-radius:10px;background:#fb4f7a12;color:#5f6b7e;font-size:12px}.tutu-ink-note .ticon{width:15px;height:15px;color:var(--tt-a)}
.tutu-note-paper{color:#18212f}.tutu-note-ph b{color:#18212f}
.tutu-md{padding:12px 18px 18px 24px;min-height:200px;color:#18212f;font-size:14px;line-height:1.7}.tutu-md h3{margin:10px 0 4px;font-size:16px}.tutu-md p{margin:0 0 6px;line-height:1.7}.tutu-md ul,.tutu-md ol{margin:0 0 8px;padding-left:22px}.tutu-md code{padding:1px 5px;border-radius:5px;background:#f1f5f9}.tutu-md hr{border:0;border-top:1px dashed #cbd5e1;margin:10px 0}.tutu-gap{height:8px}
.tutu-md[hidden],.tutu-note-body[hidden]{display:none}
.tutu-check{list-style:none;padding-left:2px!important}.tutu-check li{display:flex;gap:9px;align-items:flex-start;margin:3px 0}.tutu-check li.done span{text-decoration:line-through;color:#8a94a6}
.tutu-cb{display:grid;place-items:center;width:20px;height:20px;margin-top:3px;flex:none;padding:0;border:2px solid #94a3b8;border-radius:6px;background:#fff;color:#fff;cursor:pointer}.tutu-check li.done .tutu-cb{border-color:var(--tt-a);background:var(--tt-a)}.tutu-cb .ticon{width:13px;height:13px;stroke-width:3}
html[data-theme=dark] .tutu-note-paper{background:#fdfcf5}
.tutu-note-editor .save-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}.tutu-note-editor .content-actions{display:flex;flex-wrap:wrap;gap:6px}.tutu-note-editor .btn{display:inline-flex;align-items:center;gap:6px;margin:0}
.tutu-note-editor .btn .ticon,.tutu-notes-list .btn .ticon{width:14px;height:14px}.tutu-notes-list .btn.full{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:0}
.tutu-people{display:grid;gap:6px;max-height:46vh;overflow:auto;margin:10px 0}.tutu-person{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);cursor:pointer;font-size:12.5px;font-weight:650}.tutu-person[hidden]{display:none}.tutu-person:has(input:checked){border-color:var(--tt-a);background:#fb4f7a0d}
@media(max-width:900px){.tutu-notes{grid-template-columns:1fr}.tutu-notes-list{position:static}#tutu-note-items{max-height:260px}}
/* ClassPin */
.cp-wrap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:18px;align-items:start}
.cp-ctl{display:grid;gap:10px;padding:16px}.cp-ctl .tutu-seg button{padding:0 6px;font-size:12px;gap:5px}.cp-lb{font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.cp-input{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#ffffffc4;color:var(--ink);font:inherit;font-size:13px;line-height:1.5;resize:vertical}
html[data-theme=dark] .cp-input{background:#101b2bbf}
.cp-ctl .content-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.cp-ctl .btn{display:inline-flex;align-items:center;gap:6px;margin:0}.cp-ctl .btn .ticon{width:14px;height:14px}
.cp-range{grid-template-columns:1fr 1fr!important;gap:8px}
.cp-sw{display:flex;align-items:center;gap:10px;cursor:pointer;margin-top:4px}.cp-sw input{position:absolute;opacity:0}.cp-sw>span:last-child{display:flex;flex-direction:column;font-size:12.5px}.cp-sw small{font-size:11px}
.cp-swk{position:relative;width:44px;height:26px;flex:none;border-radius:999px;background:#cbd5e1;transition:background .2s}.cp-swk::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0003;transition:transform .2s}
.cp-sw input:checked+.cp-swk{background:var(--tt-a)}.cp-sw input:checked+.cp-swk::after{transform:translateX(18px)}.cp-sw input:focus-visible+.cp-swk{outline:3px solid var(--teal);outline-offset:2px}
.cp-count{padding:10px 12px;border-radius:12px;background:#fb4f7a0f;font-size:13px}.cp-count b{font-size:20px;color:var(--tt-a)}
.cp-hist{display:flex;flex-wrap:wrap;gap:6px;max-height:160px;overflow:auto}.cp-h{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:#18212f0d;font-size:12px;font-weight:700}.cp-h b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--tt-gold);color:#3a2a00;font-size:10.5px}
.cp-lists{display:grid;gap:6px}.cp-list{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px}.cp-list.on{border-color:var(--tt-a);background:#fb4f7a0d}
.cp-list>button:first-child{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:6px 8px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}.cp-list b{font-size:13px}.cp-list small{font-size:10.5px}.cp-list .tutu-icon-btn{width:30px;height:30px}.cp-list .tutu-icon-btn .ticon{width:14px;height:14px}
.cp-stage{padding:14px}.cp-stage:fullscreen{display:flex;flex-direction:column;justify-content:center;background:var(--tt-cream);padding:24px}
.cp-cv{position:relative}.cp-cv canvas{display:block;width:100%}.cp-fx{position:absolute;inset:0;pointer-events:none}
.cp-actions{display:flex;gap:10px;margin-top:12px}.cp-actions .btn{margin:0;width:56px;justify-content:center;display:inline-flex;align-items:center}
.cp-go{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border:0;border-radius:18px;color:#3a2a00;background:linear-gradient(135deg,#ffe066,var(--tt-gold) 45%,#e4992d);font:inherit;font-size:17px;font-weight:900;letter-spacing:.08em;cursor:pointer;box-shadow:0 12px 26px #e4992d55,inset 0 -3px 0 #0000001f;transition:transform .12s}
.cp-go:hover{transform:translateY(-2px)}.cp-go:active{transform:scale(.98)}.cp-go:disabled{opacity:.55;cursor:not-allowed;transform:none}.cp-go .ticon{width:22px;height:22px}
.cp-win{position:absolute;inset:0;display:grid;place-items:center;background:#18212fa8;border-radius:16px;backdrop-filter:blur(3px);animation:tutu-pop .25s}.cp-win[hidden]{display:none}
.cp-wc{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 30px;max-width:90%;border-radius:24px;background:linear-gradient(160deg,#fff,#fff8e1);box-shadow:0 30px 60px #0007;text-align:center;animation:tutu-dlg .4s cubic-bezier(.2,1.4,.4,1)}
.cp-wc small{font-size:11px;font-weight:850;letter-spacing:.3em;color:var(--tt-b)}.cp-wc b{font-size:clamp(28px,6vw,52px);line-height:1.1;color:var(--tt-a);word-break:break-word}.cp-wc .btn{display:inline-flex;align-items:center;gap:7px;margin:4px 0 0;align-self:center}
@media(max-width:900px){.cp-wrap{grid-template-columns:1fr}.cp-stage{order:-1}}

@media(max-width:760px){
 .tutu-page-head{gap:10px;align-items:flex-start;flex-wrap:wrap}.tutu-page-head h1{font-size:24px}.tutu-head-ic{width:48px;height:48px;border-radius:15px}.tutu-head-ic .ticon{width:24px;height:24px}.tutu-page-head>div{flex:1 1 200px;min-width:0}.tutu-head-actions{margin-left:0;width:100%}.tutu-head-actions .btn{flex:1;justify-content:center}
 .tutu-back{display:none}
 .tutu-hub-hero{flex-direction:column;align-items:stretch}.tutu-hub-hero h1{font-size:28px}.tutu-hub-hero .btn{justify-content:center}
 .tutu-phone{border-width:0;border-radius:24px;padding:12px 10px 14px}.tutu-phone::before{display:none}
 .tutu-phone-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 6px}
 .tutu-app-ic{width:56px;height:56px;border-radius:16px}.tutu-app-lb{font-size:10.5px}.tutu-app-x{left:calc(50% - 36px)}
 .tutu-hub-grid{grid-template-columns:1fr 1fr;gap:10px}.tutu-hub-app{padding:12px;border-radius:18px}.tutu-hub-app em{display:none}.tutu-hub-app b{font-size:13.5px}
 .tutu-toolbar .tutu-search{flex-basis:100%}.tutu-toolbar .btn,.tutu-toolbar .tutu-seg{flex:1 1 auto;justify-content:center}
 .tutu-app-row{flex-wrap:wrap}.tutu-app-row .tutu-row-actions{flex:1 1 100%;justify-content:stretch}.tutu-row-actions .btn{flex:1;justify-content:center}
 #modal.tutu-modal{padding:20px 16px}.tutu-game-stage{height:68vh}
 .tutu-confirm-actions{grid-template-columns:1fr}.tutu-confirm-actions .btn:last-child{order:-1}
}
@media(max-width:360px){.tutu-phone-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ================= Maskot TuTu ================= */
.tutu-stage{position:relative;width:var(--s);height:var(--s);perspective:600px;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent;outline:0}
.tutu-stage:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:50%}
.tutu-stage::after{content:"";position:absolute;left:24%;right:24%;bottom:1%;height:7%;border-radius:50%;background:radial-gradient(#c72f5b40,transparent 70%);animation:tutu-shadow 4.2s ease-in-out infinite;pointer-events:none}
.tutu-m{width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.5,1);animation:tutu-float 4.2s ease-in-out infinite}
.tutu-m svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 12px #c72f5b38)}
@keyframes tutu-float{50%{translate:0 -6px}}@keyframes tutu-shadow{50%{transform:scale(.85);opacity:.6}}
.tutu-m .tt-x{opacity:0;transition:opacity .28s}
.tutu-m[data-ex=normal] .tt-normal,.tutu-m[data-ex=senyum] .tt-senyum,.tutu-m[data-ex=ketawa] .tt-ketawa,.tutu-m[data-ex=tidur] .tt-tidur,.tutu-m[data-ex=sayang] .tt-sayang,.tutu-m[data-ex=terkejut] .tt-terkejut,.tutu-m[data-ex=bersiul] .tt-bersiul,.tutu-m[data-ex=semangat] .tt-semangat,.tutu-m[data-ex=baca] .tt-baca,.tutu-m[data-ex=sedih] .tt-sedih{opacity:1}
.tutu-m .tt-face{transition:transform .5s ease}
.tutu-m .tt-blink{animation:tutu-blink 4.2s infinite;transform-origin:center;transform-box:fill-box}@keyframes tutu-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.tutu-m .tt-wave{animation:tutu-wave .9s ease-in-out infinite;transform-origin:190px 132px}@keyframes tutu-wave{50%{transform:rotate(-18deg)}}
.tutu-m .tt-tassel{transform-origin:178px 52px;animation:tutu-tassel 3s ease-in-out infinite}@keyframes tutu-tassel{50%{transform:rotate(6deg)}}
.tutu-m[data-ex=ketawa]{animation:tutu-laugh .35s ease-in-out infinite}@keyframes tutu-laugh{50%{translate:0 -6px;rotate:2deg}}
.tutu-m[data-ex=semangat]{animation:tutu-jump .7s ease-in-out infinite}@keyframes tutu-jump{50%{translate:0 -10px}}
.tutu-m[data-ex=tidur]{animation:tutu-sleep 3.4s ease-in-out infinite}@keyframes tutu-sleep{50%{rotate:-5deg;translate:0 4px}}
.tutu-m[data-ex=terkejut]{animation:tutu-shake .2s linear 3}@keyframes tutu-shake{25%{translate:-3px 0}75%{translate:3px 0}}
.tutu-m .tt-hearts{animation:tutu-beat .7s ease-in-out infinite;transform-origin:center;transform-box:fill-box}@keyframes tutu-beat{50%{transform:scale(1.15)}}
.tutu-m .tt-tear{animation:tutu-tear 1.2s ease-in infinite;transform-box:fill-box}.tutu-m .tt-tear.t2{animation-delay:.6s}@keyframes tutu-tear{to{transform:translateY(40px);opacity:0}}
.tutu-m .tt-zz{animation:tutu-zz 2.4s ease-out infinite;transform-box:fill-box}.tutu-m .tt-zz.z2{animation-delay:.8s}.tutu-m .tt-zz.z3{animation-delay:1.6s}@keyframes tutu-zz{0%{transform:translate(0,0) scale(.6);opacity:0}30%{opacity:1}100%{transform:translate(-20px,-44px) scale(1.2);opacity:0}}
.tutu-m .tt-note{animation:tutu-note 2s ease-out infinite;transform-box:fill-box}.tutu-m .tt-note.n2{animation-delay:1s}@keyframes tutu-note{0%{transform:translate(0,0);opacity:0}30%{opacity:1}100%{transform:translate(24px,-40px) rotate(20deg);opacity:0}}
html[data-perf=lite] .tutu-m,html[data-perf=lite] .tutu-stage::after{animation:none!important}
.tutu-bubble{position:absolute;left:50%;bottom:calc(100% + 6px);z-index:6;min-width:150px;max-width:min(230px,calc(100vw - 24px));visibility:hidden;padding:9px 12px;border-radius:14px;background:#fff;border:1px solid #fb4f7a40;box-shadow:0 12px 28px #c72f5b26;color:var(--ink);font-size:12.5px;font-weight:650;line-height:1.45;text-align:center;opacity:0;transform:translateX(calc(-50% + var(--bx,0px))) translateY(6px) scale(.92);transition:.25s;pointer-events:none}
.tutu-bubble::after{content:"";position:absolute;left:calc(50% - var(--bx,0px));bottom:-7px;width:12px;height:12px;background:#fff;border-right:1px solid #fb4f7a40;border-bottom:1px solid #fb4f7a40;transform:translateX(-50%) rotate(45deg)}
.tutu-bubble.on{opacity:1;visibility:visible;transform:translateX(calc(-50% + var(--bx,0px))) translateY(-2px) scale(1)}
.tutu-bubble.below{bottom:auto;top:calc(100% + 6px)}.tutu-bubble.below::after{bottom:auto;top:-7px;transform:translateX(-50%) rotate(225deg)}
html[data-theme=dark] .tutu-bubble,html[data-theme=dark] .tutu-bubble::after{background:#22324a;border-color:#fb709840;color:var(--ink)}
/* Maskot dalam alu-aluan, Ringkasan dan Tutu APP */
.tutu-welcome-card .tutu-mascot-slot{display:flex;justify-content:center;margin:-6px auto 2px}
.tutu-overview-mascot{margin-left:auto;position:relative;z-index:25}
.tutu-hub-hero .tutu-mascot-slot{flex:none}
.tutu-hub-side{display:flex;align-items:center;gap:12px}
.tutu-confirm-icon.mascot{width:auto;height:auto;background:none}
.tutu-install-hero .tutu-mascot-slot{flex:none}
/* Butang TuTu terapung */
#tutu-fab{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:300;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:#fffffff0;border:1px solid #fff;box-shadow:0 0 0 3px #fb4f7a33,0 14px 34px #c72f5b38;animation:tutu-fabpulse 2.8s ease-in-out infinite}
#tutu-fab .tutu-stage::after{display:none}#tutu-fab .tutu-m svg{filter:none}
@keyframes tutu-fabpulse{50%{box-shadow:0 0 0 8px #fb4f7a14,0 14px 34px #c72f5b38}}
html[data-theme=dark] #tutu-fab{background:#22324af0;border-color:var(--line)}
html[data-perf=lite] #tutu-fab{animation:none}
@media print{#tutu-fab,#tutu-fab-panel{display:none!important}}
#tutu-fab-panel{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:301;width:min(330px,calc(100vw - 28px));padding:14px;border-radius:22px;border:1px solid #fff;background:#fbfdfff7;box-shadow:0 26px 60px #1f293738;backdrop-filter:blur(20px);opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right;transition:.2s;color:var(--ink)}
#tutu-fab-panel.in{opacity:1;transform:none}
html[data-theme=dark] #tutu-fab-panel{background:#172334f7;border-color:var(--line)}
.tutu-fab-head{display:flex;align-items:center;gap:10px}.tutu-fab-head>div:nth-child(2){flex:1}.tutu-fab-head b{display:block;font-size:16px}.tutu-fab-head small{font-size:11px}
.tutu-fab-hi{margin:10px 0 6px;font-size:14px;font-weight:750}
.tutu-fab-tip{display:flex;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:14px;background:#fb4f7a0f;font-size:12.5px;line-height:1.55}.tutu-fab-tip .ticon{width:16px;height:16px;margin-top:2px;color:var(--brand)}
.tutu-fab-links{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tutu-fab-links>*{display:flex;align-items:center;gap:7px;min-height:42px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:#ffffffb8;color:var(--ink);font:inherit;font-size:12px;font-weight:700;cursor:pointer;text-align:left}
.tutu-fab-links .ticon{width:16px;height:16px;color:var(--brand)}
html[data-theme=dark] .tutu-fab-links>*{background:#ffffff0d}
.tutu-fab-hide{display:block;margin:10px auto 0;padding:4px 8px;border:0;background:none;color:var(--muted);font:inherit;font-size:11.5px;text-decoration:underline;cursor:pointer}
body:has(dialog[open]) #tutu-fab{opacity:0;pointer-events:none}
html.drawer-open #tutu-fab,html.drawer-open #tutu-fab-panel{display:none}
@media(max-width:760px){#tutu-fab{width:58px;height:58px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}#tutu-fab .tutu-stage{--s:50px!important}#tutu-fab-panel{bottom:calc(76px + env(safe-area-inset-bottom,0px));right:10px}.tutu-overview-mascot{display:none}body.has-tutu-fab .admin-main{padding-bottom:84px}}