:root { color-scheme:dark; --bg:#071621; --panel:#102431; --panel-2:#142d3d; --stroke:#244052; --white:#edf8fb; --sub:#94aebd; --teal:#20cfb5; --gold:#f5bc68; --red:#ff8686; font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--white); background:var(--bg); }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
.loading-screen { min-height:100vh; display:grid; place-content:center; justify-items:center; gap:12px; color:var(--sub); }
.spinner { width:38px;height:38px;border:3px solid var(--stroke);border-top-color:var(--teal);border-radius:50%;animation:spin .85s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.brand { display:flex; align-items:center; font-size:27px; font-weight:850; letter-spacing:-1.5px; gap:10px; white-space:nowrap; }
.brand-large { font-size:37px; }
.brand-accent { color:var(--teal); }
.brand-icon { font-size:16px; display:grid; place-items:center; width:37px; height:37px; background:var(--teal); color:#06312c; border-radius:11px; box-shadow:0 0 25px #20cfb526; }
.brand-large .brand-icon { width:47px; height:47px; font-size:20px; }
.eyebrow { color:var(--teal); font-size:11px; letter-spacing:2px; font-weight:800; margin:0 0 11px; }
.login-page { min-height:100dvh; display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);position:relative;overflow:hidden; }
.login-backdrop { position:absolute; inset:0;background:radial-gradient(ellipse at 82% 34%,#0d695c50,transparent 42%),radial-gradient(ellipse at 12% 83%,#11517345,transparent 54%);pointer-events:none; }
.login-panel { align-self:center; padding:10vh clamp(24px,8vw,120px); max-width:770px; z-index:1; }
.login-panel .eyebrow { margin-top:55px; }
.login-panel h1 { font-size:clamp(36px,4.4vw,66px);letter-spacing:-2.8px;line-height:1.11;margin:0 0 25px; }
.login-panel h1 span,.page-heading h1 span { color:var(--teal); }
.login-description { max-width:490px;color:#a6bdc8;font-size:16px;line-height:1.8; }
.login-action { background:#ffffff08;border:1px solid var(--stroke);border-radius:16px;display:inline-flex; flex-direction:column;gap:7px;padding:18px;margin-top:25px; }
.google-button { min-width:230px;min-height:43px; }
.hint,.tiny { font-size:12px;color:var(--sub); }
.hint { margin:0; }
.tiny { margin-top:25px; }
.login-decoration { display:flex;align-items:center;justify-content:center; position:relative; }
.login-decoration::before { content:''; position:absolute; width:350px; height:350px;border-radius:50%;border:1px solid #20cfb53a;box-shadow:0 0 0 80px #20cfb509,0 0 0 160px #20cfb505; }
.decor-card { position:absolute;padding:25px 33px;border:1px solid #ffffff1b;border-radius:20px;background:#143747e0;backdrop-filter:blur(14px);box-shadow:0 25px 70px #0005;font-size:27px;color:var(--teal); }
.decor-card span { font-size:14px;color:var(--white);font-weight:700;margin-left:8px; }
.decor-one { transform:translate(-80px,-120px) rotate(-8deg); }.decor-two{transform:translate(65px,35px) rotate(7deg);}.decor-three{transform:translate(-100px,165px) rotate(-4deg);}
.app-shell { display:grid;grid-template-columns:245px minmax(0,1fr);min-height:100vh; }
.sidebar { position:sticky;top:0;height:100dvh;background:#0b1c29;border-right:1px solid #1b3746;padding:29px 17px;display:flex;flex-direction:column; }
.sidebar .brand { padding-left:12px;margin-bottom:53px; }
.nav-caption { font-size:10px;letter-spacing:1.5px;color:#688898;font-weight:800;padding:0 16px;margin-bottom:14px; }
.nav-list { display:grid;gap:7px; }.nav-button { display:flex;align-items:center;gap:11px;border:0;border-radius:10px;background:transparent;color:#93acba;padding:14px 15px;text-align:left;font-size:13px;font-weight:650; }
.nav-button.active { background:#1c4d51;color:#38e7d0; }.nav-button:not(.active):hover { background:#152f3e; color:white; }
.nav-icon { width:22px;font-size:20px;text-align:center; }.lock-symbol { margin-left:auto;color:#637e8b; }
.sidebar-bottom { margin-top:auto; }.plan-card { border:1px solid #294b59;border-radius:13px;padding:17px;background:linear-gradient(140deg,#123b42,#102736);display:grid;gap:7px; }
.plan-label { font-size:10px;letter-spacing:1.3px;color:#8cb9bc;font-weight:800; }.plan-card strong { font-size:18px; }.plan-card span { color:#9fb9c1;font-size:12px; }
.logout-button { width:100%;background:none;border:0;text-align:left;padding:22px 11px 4px;color:#8ba6b5;font-weight:600;font-size:13px; }.logout-button:hover { color:white; }
.main-column { min-width:0; }.topbar { position:sticky;z-index:3;top:0;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4vw,64px);border-bottom:1px solid #193441;background:#071621f0;backdrop-filter:blur(16px); }
.breadcrumb { font-size:13px;color:#b4cad4; }.breadcrumb span { color:#4c6c7a;padding:0 9px; }
.topbar-actions { display:flex;align-items:center;gap:10px; }.account-chip { border:1px solid #2d4b59;border-radius:30px;padding:10px 14px;color:#b5d0db;font-size:12px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.install-btn {border:1px solid #2d7b79;background:#14403d;color:#40e1cb;padding:10px 13px;border-radius:10px;font-size:12px;font-weight:700;}
.page-content { max-width:1400px;margin:auto;padding:50px clamp(22px,4vw,64px) 90px; }
.page-heading { display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:46px; }
.page-heading h1 { font-size:clamp(29px,3.3vw,43px);letter-spacing:-1.5px; margin:0 0 12px; }
.muted { color:#93adbc;font-size:14px;line-height:1.65;margin:0; }.pill { white-space:nowrap;background:#11453f;border:1px solid #166b5b;padding:9px 15px;border-radius:30px;color:#3be3bc;font-size:11px;font-weight:750; }
.section-heading { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:19px; }.section-heading h2 { margin:0;font-size:19px;letter-spacing:-.4px; }.subtle-text { margin:4px 0 0;color:#829eac;font-size:12px; }
.profile-section { margin-bottom:58px; }.profile-list { display:flex;flex-wrap:wrap;gap:13px; }
.profile-card { min-width:160px;min-height:90px;text-align:left;display:flex;align-items:center;gap:13px;border:1px solid #254657;border-radius:14px;padding:15px 17px;background:#102532;color:#d5e5eb;transition:transform .15s,border-color .15s; }
.profile-card:hover { transform:translateY(-2px); }.profile-card.selected { background:#123d3f;border-color:var(--teal);box-shadow:inset 0 0 0 1px #20cfb540; }
.profile-avatar { display:grid;place-items:center;width:45px;height:45px;border-radius:12px;background:#224d62;font-weight:850;font-size:21px;color:#bbeafb; }
.profile-card.selected .profile-avatar { background:#19b69d;color:#082d2b; }.profile-card strong { display:block;font-size:13px; }.profile-card small { color:#89a7b4;display:block;margin-top:6px;font-size:11px; }
.video-count {background:#182f3d;color:#9fb8c6;padding:9px 13px;border-radius:9px;font-size:12px;}.video-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:25px 18px; }
.video-card { border:0;background:transparent;color:inherit;text-align:left;padding:0;min-width:0; }.video-thumb { aspect-ratio:16/9;border-radius:13px;background:#173647;position:relative;overflow:hidden;display:block; }
.video-thumb img { display:block;width:100%;height:100%;object-fit:cover;transition:transform .18s; }.video-card:hover img { transform:scale(1.045); }.play-overlay { position:absolute;inset:0;display:grid;place-items:center;background:#0003;opacity:0;transition:opacity .18s; }.video-card:hover .play-overlay,.video-card:focus-visible .play-overlay { opacity:1; }.play-overlay span { background:#20cfb5;color:#09282b;border-radius:50%;width:48px;height:48px;display:grid;place-items:center; }
.duration { position:absolute;bottom:9px;right:10px;background:#000c;border-radius:5px;padding:4px 6px;font-size:11px; }.video-name { display:block;margin-top:11px;font-size:13px;font-weight:750;line-height:1.5; }.video-channel { display:block;color:#849fad;font-size:12px;margin-top:5px; }
.empty-state {border:1px dashed #345160;border-radius:20px;background:#10212b;padding:65px 25px;text-align:center; }.empty-icon {font-size:37px;color:#29cdb8;margin-bottom:13px;}.empty-state h3{margin:0 0 10px;font-size:19px;}.empty-state p{margin:0 auto;max-width:480px;line-height:1.7;color:#8babb8;font-size:13px;}.youtube-note{color:#6d8d9b;font-size:11px;margin-top:33px;}
.manager-panel,.notice-panel,.faq-list {border:1px solid #244656;background:#102430;padding:25px;border-radius:18px; }.manager-profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}.manager-profile {padding:17px;border-radius:12px;background:#1a3442;display:flex;align-items:center;gap:12px;}.manager-profile strong{display:block;font-size:13px;}.manager-profile span{display:block;color:#98b4c1;font-size:11px;margin-top:5px;}.notice-panel{margin-top:21px;border-color:#665737;background:#372d1d55;}.notice-panel strong{color:#ebc887;}.notice-panel p{font-size:13px;color:#b7b0a2;line-height:1.7;margin-bottom:0;}
.faq-list{padding:0 24px;}.faq-list details {border-bottom:1px solid #2a4857;padding:20px 0;}.faq-list details:last-child{border:0;}.faq-list summary{cursor:pointer;font-weight:750;font-size:14px;}.faq-list details p{line-height:1.7;color:#a0bdc9;font-size:13px;margin-bottom:0;}
.pin-dialog,.player-dialog {padding:0;color:var(--white);background:#102631;border:1px solid #365465;border-radius:20px;box-shadow:0 30px 100px #000a; }.pin-dialog::backdrop,.player-dialog::backdrop {background:#020b12da;backdrop-filter:blur(8px);}.pin-dialog {width:min(calc(100vw - 32px),420px);}.pin-dialog form {padding:35px;position:relative;}.dialog-x {position:absolute;top:15px;right:17px;background:transparent;color:#b5cbd5;border:0;font-size:25px;}.dialog-lock {font-size:38px;margin-bottom:15px;}.pin-dialog h2{font-size:23px;letter-spacing:-.5px;margin:0 0 8px;}.pin-dialog p {color:#91adb9;line-height:1.65;font-size:13px;}.pin-dialog label {display:block;margin-top:23px;font-size:12px;font-weight:800;margin-bottom:9px;}.pin-dialog input {width:100%;height:49px;border-radius:10px;border:1px solid #3c6170;color:white;background:#0c1d28;outline:none;padding:0 15px;letter-spacing:4px;}.pin-dialog input:focus{border-color:var(--teal);}.primary-btn{background:#1fc7af;color:#062d28;border:0;border-radius:10px;padding:14px;width:100%;font-weight:800;margin-top:18px;}.pin-dialog .error-text{color:var(--red);min-height:20px;margin:8px 0 0;}
.player-dialog {width:min(96vw,1100px);max-height:94dvh;}.player-topbar{padding:18px 23px;display:flex;align-items:center;justify-content:space-between;gap:15px;}.player-topbar .eyebrow{font-size:9px;margin-bottom:5px;}.player-topbar h2 {font-size:16px;margin:0;line-height:1.5;}.player-close {border:0;background:#23414e;border-radius:50%;width:33px;height:33px;color:#fff;font-size:23px;flex:none;}.player-mount{width:100%;aspect-ratio:16/9;background:#000;}.player-mount iframe{width:100%;height:100%;border:0;display:block;}.player-toolbar{padding:17px 23px;display:flex;align-items:center;justify-content:space-between;gap:16px;}.player-toolbar>span{font-size:12px;color:#95adba;}.player-buttons{display:flex;align-items:center;gap:8px;}.player-buttons button{background:#1c3b48;color:#d3e6ed;border:1px solid #315365;border-radius:9px;padding:10px 11px;font-size:12px;}.player-buttons button[aria-pressed="true"]{border-color:var(--teal);background:#155247;color:#56efda;}
.notification {position:fixed;z-index:15;left:50%;top:17px;transform:translateX(-50%);background:#193e48;border:1px solid #368b8b;color:white;border-radius:12px;box-shadow:0 12px 40px #0008;padding:13px 19px;font-size:13px;max-width:min(90vw,540px);text-align:center;}
.mobile-nav,.mobile-brand{display:none;}
@media(max-width:900px){.login-page{grid-template-columns:1fr;}.login-panel{padding:90px 9vw;}.login-decoration{display:none;}.app-shell{grid-template-columns:205px minmax(0,1fr);}.sidebar{padding:25px 11px;}.sidebar .brand{margin-bottom:40px;}.page-content{padding-top:38px;}.page-heading{align-items:start;}.pill{white-space:normal;}}
@media(max-width:660px){.app-shell{display:block;}.sidebar{display:none;}.mobile-brand{display:flex;font-size:23px;}.mobile-brand .brand-icon{width:29px;height:29px;font-size:13px;border-radius:8px;}.breadcrumb{display:none;}.topbar{height:65px;padding:0 17px;}.account-chip{max-width:120px;}.page-content{padding:33px 18px 110px;}.page-heading{margin-bottom:32px;}.page-heading .pill{display:none;}.profile-card{min-width:calc(50% - 7px);flex:1;}.profile-list{gap:10px;}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 11px;}.video-name{font-size:12px;}.video-channel{font-size:11px;}.mobile-nav{position:fixed;z-index:4;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:10px 8px max(10px,env(safe-area-inset-bottom));background:#0c2230ef;backdrop-filter:blur(15px);border-top:1px solid #2a4958;}.mobile-nav button{width:30%;background:none;color:#bed4dc;border:0;font-size:22px;display:grid;gap:4px;justify-items:center;}.mobile-nav span{font-size:10px;}.player-toolbar{display:block;}.player-buttons{margin-top:12px;flex-wrap:wrap;}.player-dialog{width:100vw;max-width:100vw;border-radius:10px;}.login-panel h1{letter-spacing:-1.5px;}}

.mobile-logout { display:none; }
@media(max-width:660px){ .mobile-logout{display:block;border:1px solid #315365;background:#1c3846;color:#e3f3f7;border-radius:10px;padding:8px 11px;} }

/* Kunci keluar Profil Anak */
.kids-lock-notice { margin:16px 0 0; padding:13px 16px; border:1px solid #88713b; background:#382e1d; color:#ffe4a4; border-radius:12px; line-height:1.6; font-size:12px; }
.profile-card:disabled { opacity:.60; cursor:wait; transform:none; }
.primary-btn:disabled { opacity:.65; cursor:wait; }