@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{--ink:#eef4ff;--muted:#8291b0;--blue:#4382ff;--cyan:#33d5df;--orange:#f9704a;--surface:#101b33;--stroke:#273756;--head:'Outfit',sans-serif;--body:'Manrope',sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--body)}body{background:#070f20;color:var(--ink);background-image:radial-gradient(ellipse 48% 30% at 0% 0%,#173b6c99,transparent),radial-gradient(ellipse 35% 26% at 100% 100%,#31246d60,transparent)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}a{text-decoration:none;color:inherit}[hidden]{display:none!important}
.app-shell{min-height:100vh}.topbar{height:78px;padding:0 max(24px,calc((100vw - 1510px)/2));display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff16;background:#091328ae}.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-family:var(--head);font-weight:800;letter-spacing:-.65px}.brand-icon{display:inline-grid;place-items:center;width:39px;height:39px;background:linear-gradient(140deg,#28cfe1,#397bff 62%,#8563ef);color:white;border-radius:13px;box-shadow:0 8px 22px #2878ed55}.brand small{display:block;font:700 9px var(--body);letter-spacing:2.4px;color:#8ba7d0;margin-top:1px}.topnav{display:flex;align-items:center;gap:25px;color:#c3cee2;font-size:12px;font-weight:700}.nav-logout{border:1px solid #334b73;background:#172844;color:#bcd4f5;border-radius:9px;padding:8px 11px;font-size:11px;font-weight:800}.nav-divider{height:24px;width:1px;background:#344260}.nav-admin{color:#eaf2ff}.nav-admin span{margin-left:7px;color:#57bffc}.online-pill{background:#13322570;border:1px solid #23695165;padding:8px 12px;border-radius:50px;display:flex;align-items:center;gap:7px}.live-dot{display:inline-block;flex:none;width:8px;height:8px;background:#44ecac;border-radius:50%;box-shadow:0 0 0 4px #45e7a016,0 0 14px #19e9aa96}
.content{max-width:1558px;margin:auto;padding:24px 24px 10px}.headline{display:flex;align-items:flex-end;justify-content:space-between;padding:0 2px 24px}.headline h1{font:750 clamp(24px,2.45vw,37px)/1.14 var(--head);letter-spacing:-1.4px;margin:9px 0 6px}.headline h1 em{color:#6dacef;font-style:normal}.headline p{margin:0;color:#8e9fc1;font-size:13px}.eyebrow{font:800 10px var(--body);letter-spacing:2.2px;color:#81a9ef;display:flex;gap:10px;align-items:center}.right-badge{letter-spacing:.6px;background:#182743;padding:9px 13px;border:1px solid #2b3b5b;border-radius:50px;color:#c8d3e9}.separator-dot{color:#617290}
.chat-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) 290px;gap:12px;height:clamp(460px,58vh,640px)}.video-panel{min-width:0;position:relative;overflow:hidden;border:1px solid #34425a;border-radius:18px;background:#030912;box-shadow:0 20px 42px #0003}.video-panel:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 45%,#102c56,transparent 60%),radial-gradient(ellipse at 80% 90%,#151e3b,transparent 60%);pointer-events:none}.video-panel.own:before{background:radial-gradient(ellipse at 50% 44%,#1e2f54,transparent 65%)}.video-panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.video-panel .pane-head{z-index:3;position:absolute;top:0;left:0;right:0;height:56px;background:linear-gradient(#030816ae,transparent);display:flex;justify-content:space-between;align-items:flex-start;padding:19px 20px;color:#d4e4ff;font-weight:800;letter-spacing:1.1px;font-size:10px}.pane-head>span:first-child{display:flex;gap:9px;align-items:center}.pane-tag{font-weight:600;letter-spacing:0;text-align:right;color:#a4b7d6}.video-background,.camera-empty{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;pointer-events:none}.video-background h2{font:700 27px var(--head);margin:20px 0 5px}.video-background p,.camera-empty p{color:#8d9dbb;font-size:12px;line-height:1.7;max-width:310px;margin:0}.glow-sphere{display:grid;place-items:center;border-radius:50%;height:144px;width:144px;background:radial-gradient(circle at 33% 27%,#79b4ee,#1d3e72 51%,#111d37 72%);border:1px solid #5cb5f845;box-shadow:0 0 0 19px #64adfa08,0 0 0 47px #64adfa05,0 35px 110px #2690ee4a;animation:float 6s ease-in-out infinite}.glow-sphere span{font-size:75px;color:#c7eaff;text-shadow:0 0 35px #42c1ff}.mini-spinner{width:22px;height:22px;border:3px solid #ffffff36;border-top-color:#5be8bf;border-radius:50%;animation:rotate 1s linear infinite;margin-top:19px}.watermark,.self-name{position:absolute;z-index:3;bottom:18px;left:19px;border:1px solid #ffffff25;background:#0716279c;border-radius:50px;padding:8px 12px;color:#d7eaff;font-weight:800;font-size:10px;letter-spacing:1px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(12px)}.camera-empty .camera-ring{width:112px;height:112px;border-radius:38px;display:grid;place-items:center;background:linear-gradient(145deg,#1f3962,#101b32);box-shadow:0 0 0 16px #589cff0b,0 0 0 34px #589cff06;color:#75b5ff;font-size:55px;margin-bottom:18px}.camera-empty h3{font:700 19px var(--head);margin:0 0 7px}.self-name{letter-spacing:0}
.sidebar-chat{border:1px solid #273653;background:linear-gradient(180deg,#17233a,#121d32);border-radius:18px;min-width:0;display:flex;flex-direction:column;overflow:hidden}.side-section{padding:20px;border-bottom:1px solid #2a3852}.side-eyebrow{font-size:9px;font-weight:800;color:#64a2f6;letter-spacing:2px;margin-bottom:12px}.side-section h3{font:700 19px var(--head);margin:0 0 20px}.partner-info{display:flex;align-items:center;gap:11px}.partner-info .avatar-circle{width:46px;height:46px;display:grid;place-items:center;background:#2c4472;border-radius:14px;color:#88eaff;font-size:25px}.partner-info b,.partner-info span{display:block}.partner-info b{font-size:12px}.partner-info span{font-size:10px;color:#8c9cb8;margin-top:5px}.settings-panel{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;padding-top:16px;padding-bottom:15px}.settings-panel .side-eyebrow{grid-column:1/-1;margin:0 0 2px}.settings-panel label{font-size:10px;color:#aebad3;font-weight:700}.settings-panel select{background:#0e1a30;border:1px solid #2e4062;padding:8px 7px;color:#dce9ff;border-radius:9px;outline:0;min-width:0;width:100%;font-size:11px}.settings-panel label[for="scopeSelect"],#scopeSelect{grid-column:1/-1}.chat-section{flex:1;min-height:0;display:flex;flex-direction:column;border-bottom:0;padding-top:16px;padding-bottom:13px}.chat-messages{overflow:auto;flex:1;min-height:55px;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.chat-intro{font-size:11px;color:#8092b3;line-height:1.6}.bubble{padding:8px 11px;max-width:90%;font-size:11px;line-height:1.6;overflow-wrap:anywhere;background:#283c5c;border-radius:10px 10px 10px 3px;align-self:flex-start}.bubble.mine{background:#2369d1;align-self:flex-end;border-radius:10px 10px 3px 10px}.message-form{display:flex;gap:5px}.message-form input{background:#0a1428;color:#ecf3ff;border:1px solid #344361;border-radius:10px;min-width:0;width:100%;font-size:11px;padding:10px}.message-form button{background:#377af0;border:0;border-radius:10px;color:white;width:39px;flex:none}.safety-note{padding:12px 20px;border-top:1px solid #293956;color:#899bb9;font-size:10px;line-height:1.5}
.toolbar{display:flex;align-items:center;gap:20px;border:1px solid #273856;background:#142139ab;padding:15px 17px;border-radius:17px;margin-top:12px;min-height:86px}.main-actions,.tool-actions{display:flex;gap:9px}.btn{border-radius:12px;border:1px solid transparent;padding:15px 29px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:800;min-width:138px;transition:transform .2s,filter .2s}.btn:not(:disabled):hover,.icon-btn:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.13)}.btn-start{background:linear-gradient(125deg,#1dd59a,#20ac7a);color:#06241c;box-shadow:0 7px 24px #00da8a31}.btn-next{background:#285cf2;color:white}.btn-stop{background:#3d2734;color:#ffbdc5;border-color:#844456}.tool-actions{margin-left:auto}.icon-btn{width:46px;height:46px;border-radius:12px;background:#233651;border:1px solid #375073;color:#f3f7ff;font-size:19px}.icon-btn.danger{color:#ffa1a8;border-color:#754458}.toolbar-hint{font-size:11px;color:#9aabc9;display:flex;gap:9px;align-items:center;white-space:nowrap}.foot{display:flex;justify-content:space-between;color:#667999;font-size:10px;padding:17px 4px}
.modal-cover{position:fixed;inset:0;z-index:20;background:#030914c9;display:grid;place-items:center;padding:22px;backdrop-filter:blur(10px)}.auth-card{display:grid;grid-template-columns:1fr 1fr;width:min(100%,960px);min-height:550px;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 45px 130px #0009}.auth-art{position:relative;background:radial-gradient(ellipse at 20% 20%,#4479cc70,transparent 55%),radial-gradient(ellipse at 85% 90%,#0da8bc57,transparent 45%),linear-gradient(160deg,#071a36,#0e2754 70%,#133967);padding:36px;color:white;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.art-halo{position:absolute;border:1px solid #c4eaff23;border-radius:50%;width:410px;height:410px;left:35%;top:8%}.art-halo-two{width:290px;height:290px;left:49%;top:20%}.art-label{position:relative;display:flex;gap:10px;align-items:center;color:#8dcae9;font-size:11px;letter-spacing:2px;font-weight:800}.art-center{position:relative;z-index:1}.art-orbit{width:82px;height:82px;background:linear-gradient(145deg,#68caf6,#285fd2);border:1px solid #a1ecff90;border-radius:26px;display:grid;place-items:center;transform:rotate(-12deg);font-size:48px;box-shadow:0 24px 55px #21a9ed65;margin-bottom:39px}.art-center h2{font:800 clamp(33px,3vw,44px)/1.13 var(--head);letter-spacing:-1.5px;margin:0}.art-center h2 em{font-style:normal;color:#72e0ee}.art-center p{color:#9cbde2;font-size:13px;line-height:1.9;max-width:285px}.art-bottom{position:relative;display:flex;justify-content:space-between;color:#7d9dc3;font-size:11px}.auth-content{color:#12203e;padding:42px clamp(30px,3.4vw,55px);display:flex;flex-direction:column;justify-content:center}.modal-logo{display:flex;align-items:center;gap:10px;font:800 21px var(--head);margin-bottom:24px}.modal-logo .brand-icon{width:32px;height:32px;font-size:18px}.auth-eyebrow{letter-spacing:2.2px;font-size:10px;color:#4081cf;font-weight:800}.auth-content h2{font:750 32px/1.19 var(--head);letter-spacing:-1.1px;margin:11px 0}.auth-desc{font-size:12px;color:#7b879c;line-height:1.8;margin:0 0 24px}.auth-tabs{display:grid;grid-template-columns:repeat(3,1fr);background:#eef2f8;padding:5px;border-radius:11px;margin-bottom:20px}.auth-tab{border:0;border-radius:8px;background:transparent;padding:11px 5px;color:#7d8ca8;font-size:12px;font-weight:800}.auth-tab.selected{background:white;color:#2260b9;box-shadow:0 3px 10px #12264817}.auth-field{margin-bottom:12px}.auth-field label{display:block;font-size:11px;font-weight:800;color:#44526b;margin-bottom:7px}.auth-field input{width:100%;border:1px solid #dce3ee;border-radius:10px;padding:12px 13px;font-size:12px;outline:0;color:#1b2e51}.auth-field input:focus{border-color:#77a7ff;box-shadow:0 0 0 3px #75a9ff22}.age-agreement,.check-line{display:flex;gap:10px;align-items:start;color:#748099;font-size:10px;line-height:1.6;margin:9px 0 17px}.age-agreement input,.check-line input{accent-color:#2678ec;margin:3px 0}.btn-auth{border:0;background:linear-gradient(115deg,#2684fa,#185ac7);border-radius:11px;color:#fff;padding:14px 17px;display:flex;width:100%;justify-content:space-between;font-size:12px;font-weight:800;box-shadow:0 13px 20px #2875e142}.form-error{color:#ce3752;font-size:11px;min-height:17px;line-height:1.5}.privacy-line{font-size:10px;color:#7c8a9d;border-top:1px solid #e8edf5;padding-top:15px;margin-top:5px}.report-card{background:#f8faff;border-radius:20px;padding:28px;color:#152644;width:min(100%,420px)}.report-card h2{font:750 25px var(--head);margin:0}.report-card p{font-size:12px;color:#77859b;line-height:1.7}.report-card label:not(.check-line){display:block;margin:12px 0 6px;font-size:12px;font-weight:750}.report-card select,.report-card textarea{width:100%;padding:11px;border-radius:9px;border:1px solid #d9e0ec;background:white;color:#263752}.modal-buttons{display:flex;gap:10px;margin-top:18px}.modal-buttons button{flex:1;padding:12px;border:0;border-radius:10px;font-size:12px;font-weight:800}.btn-light{background:#e3e9f4;color:#516681}.btn-report{background:#e44862;color:white}.toast{position:fixed;right:23px;bottom:22px;z-index:35;background:#fff;color:#192e52;border:1px solid #bfd2eb;padding:14px 19px;border-radius:11px;box-shadow:0 15px 35px #0005;display:none;font-size:12px;max-width:350px}.toast.show{display:block}
@keyframes rotate{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-12px)}}
@media(max-width:1250px){.chat-layout{grid-template-columns:1fr 1fr;height:auto}.video-panel{height:430px}.sidebar-chat{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1.2fr}.side-section{border-bottom:0;border-right:1px solid #2c3b59}.safety-note{grid-column:1/-1}.chat-section{height:240px}.toolbar{flex-wrap:wrap}.toolbar-hint{display:none}}
@media(max-width:740px){.topbar{height:66px;padding:0 16px}.topnav{gap:10px}.nav-divider,.nav-admin{display:none}.nav-logout{font-size:10px;padding:7px 8px}.content{padding:18px 12px}.headline{padding-bottom:16px}.right-badge{display:none}.headline h1{font-size:27px}.chat-layout{grid-template-columns:1fr 1fr;gap:8px}.video-panel{height:300px;border-radius:12px}.pane-head{padding:12px!important;font-size:9px!important}.pane-tag{font-size:9px}.video-background h2{font-size:17px}.video-background p,.camera-empty p{font-size:10px}.glow-sphere{width:70px;height:70px}.glow-sphere span{font-size:32px}.camera-empty .camera-ring{height:72px;width:72px;font-size:34px;border-radius:23px}.camera-empty h3{font-size:14px}.sidebar-chat{grid-column:1/-1;grid-template-columns:1fr 1fr}.chat-section{grid-column:1/-1;height:220px;border-top:1px solid #2c3b59}.side-section{padding:14px}.toolbar{padding:11px;gap:12px}.main-actions{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.main-actions .btn{min-width:0;padding:13px 5px;font-size:12px;gap:6px}.tool-actions{margin-left:0}.icon-btn{width:41px;height:41px}.foot{flex-direction:column;gap:6px;font-size:9px}.auth-card{grid-template-columns:1fr;min-height:0;max-width:430px}.auth-art{display:none}.auth-content{padding:29px}.auth-content h2{font-size:27px}.modal-cover{padding:14px}}
@media(max-width:390px){.video-panel{height:260px}.video-background p,.camera-empty p{display:none}.side-section h3{font-size:15px}}

/* Akses login terpisah untuk pengguna video dan administrator. */
.admin-access{padding:12px 4px;text-align:center;display:flex;flex-direction:column;gap:5px}.admin-access a{color:#1e64d8;font-size:13px;font-weight:800;text-decoration:none}.admin-access a:hover{text-decoration:underline}.admin-access small{font-size:11px;color:#69758a}