:root{--font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--accent:#4f7cff;--accent2:#7c5cff;--accent-soft:#4f7cff24;--bg:#0b0f1a;--panel:#141925b8;--panel2:#ffffff0f;--line:#ffffff14;--line2:#ffffff24;--ink:#e9edf7;--muted:#a3abc2;--muted2:#6d7690;--chrome:#0d111c9e;--shadow:0 30px 80px -20px #000000a6,0 0 0 1px #ffffff0f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}[data-theme=light]{--bg:#e9edf6;--panel:#ffffffd1;--panel2:#0f172a0d;--line:#0f172a14;--line2:#0f172a24;--ink:#141a2b;--muted:#586179;--muted2:#8b93a8;--chrome:#ffffffb3;--shadow:0 30px 70px -24px #141e3c59,0 0 0 1px #0f172a14;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#app{height:100%}body{color:var(--ink);font:13.5px/1.45 var(--font);-webkit-font-smoothing:antialiased;background:var(--bg);margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}input,select{font:inherit;color:inherit}.wall{z-index:0;pointer-events:none;background:radial-gradient(60% 70% at 15% 20%,#3b2c8f 0%,#0000 60%),radial-gradient(55% 60% at 85% 25%,#0f6c8c 0%,#0000 60%),radial-gradient(70% 70% at 60% 100%,#8a2c6a 0%,#0000 60%),linear-gradient(160deg,#0d1022,#0a1420);position:fixed;inset:0}[data-theme=light] .wall{background:radial-gradient(60% 60% at 20% 30%,#9be7c4 0%,#0000 60%),radial-gradient(60% 60% at 85% 20%,#a7c4ff 0%,#0000 60%),radial-gradient(70% 60% at 60% 100%,#f8d0e8 0%,#0000 65%),linear-gradient(#eef3fb,#e4ecf7)}.wall:after{content:"";opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.glass{background:var(--chrome);-webkit-backdrop-filter:blur(22px)saturate(160%);border:1px solid var(--line)}.mark{background:linear-gradient(135deg,var(--accent),var(--accent2));width:26px;height:26px;box-shadow:0 4px 14px -4px var(--accent);border-radius:8px;flex:none;position:relative}.mark:before{content:"";border:2px solid #fff;border-radius:3px;position:absolute;inset:22% 32%}.auth{z-index:1;place-items:center;min-height:100%;padding:24px;display:grid;position:relative}.auth-card{width:min(100%,360px);box-shadow:var(--shadow);text-align:center;border-radius:24px;flex-direction:column;gap:16px;padding:30px 26px 24px;display:flex}.auth-brand{flex-direction:column;align-items:center;gap:12px;display:flex}.auth-brand strong{letter-spacing:-.01em;font-size:20px;display:block}.auth-brand small{color:var(--muted);font-size:12.5px}.auth-logo{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));width:54px;height:54px;box-shadow:0 10px 24px -10px var(--accent);border-radius:17px;place-items:center;display:grid}.field{color:var(--muted);text-align:left;flex-direction:column;gap:6px;font-size:12.5px;display:flex}.field input{border:1px solid var(--line2);background:var(--panel2);border-radius:12px;outline:none;height:44px;padding:0 14px;font-size:14px;transition:border-color .15s,box-shadow .15s}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.field .err{color:#ff8095;align-items:center;gap:5px;font-size:12px;font-style:normal;display:flex}.btn{border:1px solid var(--line2);background:var(--panel2);height:44px;color:var(--ink);border-radius:12px;justify-content:center;align-items:center;gap:8px;display:inline-flex}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 10px 26px -12px var(--accent);border-color:#0000;font-weight:700}.btn:disabled{opacity:.6;cursor:default}.spin{animation:1s linear infinite sp}@keyframes sp{to{transform:rotate(360deg)}}.shell{z-index:1;gap:12px;height:100%;padding:12px;display:flex;position:relative}.side{width:216px;box-shadow:var(--shadow);border-radius:20px;flex-direction:column;flex:0 0 216px;gap:12px;padding:12px 10px;display:flex}.side-brand{border-bottom:1px solid var(--line);letter-spacing:-.01em;align-items:center;gap:10px;padding:6px 8px 12px;font-size:15px;font-weight:800;display:flex}.side nav{flex-direction:column;gap:4px;display:flex}.side nav button,.side-bottom button{height:42px;color:var(--muted);text-align:left;background:0 0;border:0;border-radius:13px;align-items:center;gap:11px;padding:0 11px;font-size:13.5px;font-weight:600;transition:background .15s,color .15s;display:flex}.side nav button:hover,.side-bottom button:hover{background:var(--panel2);color:var(--ink)}.side nav button.active{background:var(--accent-soft);color:var(--ink);font-weight:700}.side nav .ico{color:#fff;border-radius:10px;flex:none;place-items:center;width:30px;height:30px;transition:transform .15s;display:grid;box-shadow:0 6px 16px -8px #0009}.side nav button:hover .ico{transform:translateY(-1px)}.ico.i-files{background:linear-gradient(145deg,#ffc145,#ff8a1f)}.ico.i-photos{background:linear-gradient(145deg,#ff6b8b,#e2336b)}.ico.i-videos{background:linear-gradient(145deg,#6f8cff,#6146ff)}.ico.i-mirror{background:linear-gradient(145deg,#2fd6b0,#0f9b8e)}.ico.i-cam{background:linear-gradient(145deg,#9d7bff,#6c3cff)}.side-bottom{border-top:1px solid var(--line);flex-direction:column;gap:4px;margin-top:auto;padding-top:10px;display:flex}.stage{border:1px solid var(--line);min-width:0;box-shadow:var(--shadow);background:#0000003d;border-radius:20px;flex:1;overflow:hidden}.stage iframe{background:#fff;border:0;width:100%;height:100%;display:block}.ovl{z-index:60;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#04091199;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.mdl{width:min(100%,400px);max-height:calc(100vh - 40px);box-shadow:var(--shadow);border-radius:20px;flex-direction:column;gap:14px;padding:22px;display:flex;overflow:auto}.mdl-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.mdl-head span{align-items:center;gap:9px;font-size:15px;font-weight:700;display:flex}.mdl-head .x{border:1px solid var(--line);width:30px;height:30px;color:var(--muted);background:0 0;border-radius:9px;place-items:center;display:grid}.mdl-head .x:hover{color:var(--ink);border-color:var(--accent)}.mdl-mail{color:var(--muted);word-break:break-all;margin-top:-4px;font-size:12.5px}.kolom{flex-direction:column;gap:13px;display:flex}.kolom h3{color:var(--ink);align-items:center;gap:8px;margin:0;font-size:13.5px;display:flex}.pesan{color:#22c38e;background:#22c38e24;border:1px solid #22c38e4d;border-radius:11px;align-items:center;gap:8px;padding:10px 13px;font-size:13px;display:flex}@media (width<=820px){.shell{flex-direction:column;gap:8px;padding:8px}.side{border-radius:16px;flex-direction:row;flex:none;align-items:center;width:100%;padding:7px;overflow-x:auto}.side-brand{display:none}.side nav,.side-bottom{border:0;flex-direction:row;margin:0;padding:0}.side nav button,.side-bottom button{white-space:nowrap;height:36px;padding:0 9px;font-size:12.5px}.side nav .ico{border-radius:8px;width:24px;height:24px}.stage{border-radius:16px}}