:root{--viewport-safe:100%}html,body{width:100%;max-width:100%;overflow-x:hidden}body{overflow-y:auto}.app-shell{width:100%;max-width:100%;overflow-x:clip}.main,.layout,.files-panel,.right-column{min-width:0;max-width:100%}.app-shell:after{max-width:100vw;max-height:100vh;overflow:hidden}.topbar,.action-row,.panel-heading,.provider{min-width:0}.provider>*{min-width:0}
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.4,0,.2,1)}body{isolation:isolate}.file-card{position:relative}
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.4,0,.2,1)}.view-enter{animation:viewEnter .6s var(--ease-out) both}.app-shell:after{content:"";position:fixed;z-index:-1;inset:-35%;pointer-events:none;background:conic-gradient(from 120deg,transparent 0 35%,rgba(59,130,246,.06) 43%,transparent 52% 100%);animation:ambientOrbit 28s linear infinite}.sidebar:after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7;animation:scanLine 5s ease-in-out infinite}.sidebar{position:relative;overflow:hidden}.nav button{position:relative;overflow:hidden}.nav button:after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1px;background:var(--gold-bright);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}.nav button.active:after,.nav button:hover:after{transform:scaleX(1)}.panel{transition:transform .35s var(--ease-out),border-color .35s ease,box-shadow .35s ease}.panel:hover{border-color:#2f5bb8;box-shadow:0 25px 75px rgba(0,0,0,.5)}.file-card{animation:cardReveal .6s var(--ease-out) both}.file-card:nth-child(2){animation-delay:.05s}.file-card:nth-child(3){animation-delay:.1s}.file-card:nth-child(4){animation-delay:.15s}.file-card:nth-child(5){animation-delay:.2s}.file-card:nth-child(6){animation-delay:.25s}.file-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(96,165,250,.12) 48%,transparent 66%);transform:translateX(-120%)}.file-card:hover:before{animation:cardShine .9s var(--ease-out)}.progress{position:relative}.progress:after{content:"";position:absolute;inset:0;width:42%;background:linear-gradient(90deg,transparent,rgba(96,165,250,.4),transparent);animation:progressSweep 2.2s ease-in-out infinite}.primary,.secondary{transition:transform .25s var(--ease-out),background .25s ease,border-color .25s ease,box-shadow .25s ease}.primary:active,.secondary:active,.nav button:active{transform:scale(.97)}.avatar{animation:avatarPulse 4s ease-in-out infinite}.login-card{position:relative;overflow:hidden}.login-card:before{content:"";position:absolute;inset:-80% 30% auto -40%;height:200px;background:rgba(59,130,246,.10);filter:blur(30px);transform:rotate(-18deg);animation:loginGlow 7s ease-in-out infinite}.loading-card{animation:loadingFloat 2.4s ease-in-out infinite}@keyframes viewEnter{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}@keyframes cardReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes ambientOrbit{to{transform:rotate(360deg)}}@keyframes scanLine{0%,100%{transform:translateX(-100%);opacity:0}35%,65%{transform:translateX(100%);opacity:.8}}@keyframes cardShine{to{transform:translateX(120%)}}@keyframes progressSweep{0%{transform:translateX(-120%)}60%,100%{transform:translateX(260%)}}@keyframes avatarPulse{0%,100%{box-shadow:0 0 0 rgba(59,130,246,0)}50%{box-shadow:0 0 22px rgba(59,130,246,.3)}}@keyframes loginGlow{0%,100%{transform:translate(0) rotate(-18deg);opacity:.45}50%{transform:translate(50px,25px) rotate(-12deg);opacity:.9}}@keyframes loadingFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
:root{--motion-fast:.2s;--motion-smooth:.55s}.loading-overlay{position:fixed;z-index:50;inset:0;display:grid;place-items:center;background:rgba(2,6,16,.8);backdrop-filter:blur(5px);animation:fade .2s ease}.loading-card{display:grid;justify-items:center;gap:11px;padding:28px 34px;border:1px solid var(--gold-dark);border-radius:16px;background:#061020;color:var(--gold-bright);box-shadow:var(--shadow);animation:rise .3s ease}.loading-spinner{width:42px;height:42px;border:3px solid #31456f;border-top-color:var(--gold-bright);border-radius:50%;animation:spin .8s linear infinite}.loading-dots{color:var(--muted);font-size:12px;animation:pulse 1.3s ease-in-out infinite}.server-status{animation:pulse 2s ease-in-out infinite}.stat-number{animation:countGlow 2.5s ease-in-out infinite}.panel,.file-card,.provider{animation:rise .55s ease both}.app-shell .main{animation:fade .45s ease both}.progress span{animation:progressGlow 1.8s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}@keyframes countGlow{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 18px rgba(96,165,250,.35)}}@keyframes progressGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
:root{--brand-name:'XaXi Cloud'}.provider-picker{display:grid;gap:4px;min-width:180px;color:var(--muted);font-size:11px}.provider-picker select{min-height:40px;padding:8px 10px}textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#04070f;color:var(--ink);outline:none;resize:vertical;font:12px monospace}textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(59,130,246,.16)}
:root{--brand-name:'XaXi Cloud'}
.brand{font-size:0!important;letter-spacing:0!important}.brand:after{content:var(--brand-name);font:700 21px 'Space Grotesk';letter-spacing:-1px}.brand:before{content:"";width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:url('/logo.webp') center/cover no-repeat;box-shadow:0 0 0 2px rgba(59,130,246,.4),0 8px 22px rgba(0,0,0,.3)}.media-frame{width:100%;height:min(65vh,620px);border:1px solid var(--line);border-radius:9px;background:#ffffff}.media-audio{display:block;width:100%;margin:30px 0}.media-empty{overflow-wrap:anywhere}.encrypt-option{display:flex;align-items:center;gap:7px;color:var(--gold-bright);padding:10px 4px;white-space:nowrap}.encrypt-option input{width:16px;min-height:16px;accent-color:var(--gold)}.retention-value{width:90px!important;min-height:40px!important}.server-status{font-size:11px;color:var(--muted);text-align:right;max-width:180px;line-height:1.5}@media(max-width:560px){.server-status{display:none}.provider-picker{min-width:140px}}
:root{--ink:#eaf1ff;--muted:#9fb3d9;--paper:#050b18;--panel:#0c1b36;--panel-soft:#12244a;--line:#2a3f6b;--gold:#3b82f6;--gold-bright:#60a5fa;--gold-dark:#2563eb;--danger:#f87171;--shadow:0 24px 70px rgba(0,0,0,.45)}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;color:var(--ink);background:radial-gradient(circle at 85% 0%,#1d3a72 0,#04070f 34%,var(--paper) 70%);font:14px 'DM Sans',sans-serif;min-height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:linear-gradient(115deg,transparent 0 48%,#60a5fa 49% 50%,transparent 51%);background-size:34px 34px}button,input,select{font:inherit}button{cursor:pointer;border:0}.app-shell{min-height:100vh;display:grid;grid-template-columns:256px minmax(0,1fr);position:relative}.sidebar{padding:25px 18px;background:linear-gradient(180deg,#101c33,#04070f);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:30px;animation:slideIn .55s ease both}.brand{display:flex;align-items:center;gap:10px;color:var(--gold-bright);font:700 23px 'Space Grotesk';letter-spacing:-1px}.brand:before{content:"";width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:url('/logo.webp') center/cover no-repeat;box-shadow:0 0 0 2px rgba(59,130,246,.4),0 8px 22px rgba(0,0,0,.3)}.brand span{color:var(--gold)}.workspace-label{font-size:10px;text-transform:uppercase;letter-spacing:1.8px;color:var(--muted);margin:0 10px 8px}.nav{display:grid;gap:6px}.nav button,.side-link{background:transparent;text-align:left;padding:12px 13px;border-radius:10px;color:var(--muted);display:flex;gap:11px;align-items:center;transition:.2s ease}.nav button.active,.nav button:hover,.side-link:hover{background:rgba(59,130,246,.16);color:var(--gold-bright);transform:translateX(3px)}.sidebar-bottom{margin-top:auto}.provider-mini{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:6px 10px}.dot{width:8px;height:8px;border-radius:50%;background:#3a4a6b;box-shadow:0 0 0 3px rgba(115,105,79,.12)}.dot.on{background:#6ee7b7;box-shadow:0 0 0 3px rgba(168,209,116,.12)}.dot.off{background:var(--danger)}.main{padding:30px clamp(18px,4vw,64px) 54px;max-width:1600px;width:100%;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:38px}.eyebrow{color:var(--muted);font-size:12px}.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold-bright),var(--gold-dark));color:#0e1930;display:grid;place-items:center;font-weight:800}.user-menu{display:flex;align-items:center;gap:12px}.user-menu small{color:var(--muted);display:block;margin-top:2px}.greeting{font:600 clamp(28px,3vw,46px) 'Space Grotesk';letter-spacing:-1.8px;margin:0 0 8px;color:#eaf1ff}.subtle{color:var(--muted);margin:0;line-height:1.6}.action-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:28px 0}.primary,.secondary{padding:12px 17px;border-radius:9px;display:inline-flex;gap:9px;align-items:center;justify-content:center;transition:.2s ease}.primary{background:var(--gold);color:#081226;font-weight:800;box-shadow:0 7px 18px rgba(59,130,246,.2)}.primary:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:0 12px 26px rgba(59,130,246,.32)}.secondary{background:var(--panel-soft);color:var(--gold-bright);border:1px solid var(--line)}.secondary:hover{border-color:var(--gold);background:#16233f;transform:translateY(-2px)}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:18px;align-items:start}.panel{background:rgba(10,20,40,.9);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:22px;animation:rise .55s ease both}.files-panel{min-width:0}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.panel h2,.panel h3{margin:0;color:#dfe8fa;font-family:'Space Grotesk'}.breadcrumb{display:flex;gap:9px;color:var(--muted);margin-bottom:17px}.crumb{cursor:pointer}.crumb:hover{color:var(--gold-bright)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:12px}.file-card{border:1px solid var(--line);background:linear-gradient(145deg,#101c33,#19160f);border-radius:11px;padding:15px;min-height:142px;display:flex;flex-direction:column;justify-content:space-between;gap:15px;transition:.22s ease;cursor:pointer;overflow:hidden}.file-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.25)}.file-icon{width:47px;height:47px;border-radius:12px;display:grid;place-items:center;background:rgba(59,130,246,.14);color:var(--gold-bright)}.file-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8effc}.file-meta,.provider-meta{color:var(--muted);font-size:12px;overflow-wrap:anywhere}.dropzone{margin-top:17px;border:1px dashed #2b53a8;border-radius:11px;text-align:center;padding:20px;color:var(--muted);transition:.2s}.dropzone.drag,.dropzone:hover{background:rgba(59,130,246,.1);border-color:var(--gold);color:var(--gold-bright)}.right-column{display:grid;gap:18px}.stats{min-width:0}.stat-number{font:700 31px 'Space Grotesk';color:var(--gold-bright);margin:15px 0 3px}.provider{display:flex;justify-content:space-between;gap:14px;align-items:center;border-bottom:1px solid rgba(64,56,32,.7);padding:14px 0;min-width:0}.provider:last-child{border-bottom:0}.provider-name{display:flex;align-items:center;gap:8px;font-weight:700;overflow-wrap:anywhere}.progress{height:5px;border-radius:5px;background:#1b2b4d;margin-top:8px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold-bright));border-radius:inherit;transition:width .7s ease}.login-page{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 0,#12244a,#03060d 62%)}.login-card{width:min(100%,460px);padding:clamp(25px,6vw,48px);background:rgba(10,20,40,.94);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);animation:rise .6s ease both}.login-card h1{font:600 clamp(28px,7vw,42px) 'Space Grotesk';line-height:1.08;margin:30px 0 9px;color:#e7eefb}.field{display:grid;gap:7px;margin:15px 0}.field label{font-size:12px;color:var(--muted)}input,select{width:100%;min-height:43px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#04070f;color:var(--ink);outline:none}input:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(59,130,246,.16)}.error{color:#fca5a5;margin-top:10px}.modal-backdrop{position:fixed;z-index:10;inset:0;padding:18px;display:grid;place-items:center;background:rgba(0,0,0,.72);animation:fade .2s ease}.modal{width:min(100%,520px);max-height:calc(100vh - 36px);overflow:auto;background:#0c1b36;border:1px solid var(--gold-dark);border-radius:15px;padding:25px;box-shadow:var(--shadow);animation:rise .3s ease}.modal h2{margin:0 0 18px;color:var(--gold-bright);font-family:'Space Grotesk'}.modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:20px}.toast{position:fixed;z-index:20;right:20px;bottom:20px;max-width:min(360px,calc(100vw - 40px));padding:13px 16px;border:1px solid var(--gold-dark);border-radius:9px;background:#101c33;color:var(--gold-bright);box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translateY(0)}.media-preview{max-width:100%;max-height:65vh;display:block;margin:8px auto;border-radius:9px}.media-empty{text-align:center;color:var(--muted);padding:25px}.preview-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes slideIn{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;padding:16px;gap:16px;border-right:0;border-bottom:1px solid var(--line)}.sidebar-bottom{margin-top:0}.sidebar .nav{display:flex;overflow:auto}.sidebar .nav button{white-space:nowrap}.main{padding-top:22px}.layout{grid-template-columns:1fr}.right-column{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}@media(max-width:560px){.topbar{align-items:flex-start;margin-bottom:25px}.user-menu strong,.user-menu small{display:none}.greeting{letter-spacing:-1px}.panel{padding:16px}.action-row>*{flex:1 1 auto}.action-row .primary,.action-row .secondary{min-height:43px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.file-card{padding:12px;min-height:125px}.file-name{font-size:12px}.provider{align-items:flex-start;flex-direction:column}.provider .action-row{width:100%;margin:0!important}.provider .action-row button{flex:1}.modal{padding:19px}.login-card{padding:27px 20px}}
/* ---- Monitor VPS: kartu grafik yang bergerak --------------------------------------------------
   Garis digambar dari kiri ke kanan tiap data baru (stroke-dashoffset), titik ujungnya berdenyut.
   Tanpa ini, grafik hanya gambar diam — dan grafik yang diam tidak menunjukkan apa pun tentang
   mesin yang sedang bekerja. */
.graf{display:grid;gap:12px;margin-bottom:14px}
.graf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.graf-angka{font:700 30px 'Space Grotesk';color:var(--gold-bright);letter-spacing:-1px;line-height:1.1}
.graf-svg{width:100%;height:118px;display:block;overflow:visible}
.graf-area{opacity:.85;transition:opacity .35s ease}
.graf-garis{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.graf-garis.gambar{stroke-dasharray:1400;stroke-dashoffset:1400;animation:gambarGaris 1.15s var(--ease-out) forwards}
.graf-titik{filter:drop-shadow(0 0 6px rgba(59,130,246,.75))}
.graf-titik.denyut{animation:denyutTitik 1.6s ease-in-out infinite}
.graf-kaki{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
@keyframes gambarGaris{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
@keyframes denyutTitik{0%,100%{r:3.5;opacity:.85}50%{r:6;opacity:1}}
@media(max-width:560px){.graf-svg{height:92px}.graf-angka{font-size:24px}}
/* ---- Lapisan animasi: Hermes Office & Monitor VPS -------------------------------------------- */
/* Dipisah dari blok dasar supaya mudah dicabut: hapus bagian ini + 3 baris animateView()/
   halaman-* di app.js, keduanya sudah ada sejak awal. */
.halaman-office .panel,.halaman-monitor .panel{animation:naikHalus .62s var(--ease-out) both}
.halaman-office .panel:nth-child(2){animation-delay:.06s}
.halaman-office .panel:nth-child(3){animation-delay:.12s}
.halaman-office .right-column .panel,.halaman-monitor .right-column .panel{animation:naikHalus .62s var(--ease-out) both;animation-delay:.1s}
.halaman-office .sidebar .nav button,.halaman-monitor .sidebar .nav button{animation:masukKiri .5s var(--ease-out) both}
.halaman-office .sidebar .nav button:nth-child(2){animation-delay:.07s}
.halaman-office .sidebar .nav button:nth-child(3){animation-delay:.14s}
.halaman-office .greeting,.halaman-monitor .greeting{animation:naikHalus .6s var(--ease-out) both}
.halaman-office .topbar,.halaman-monitor .topbar{animation:turunHalus .5s var(--ease-out) both}

/* Hermes Office: baris keadaan masuk berurutan + titik status berdenyut (agen hidup) */
.halaman-office .provider{animation:masukKanan .55s var(--ease-out) both}
.halaman-office .provider:nth-of-type(1){animation-delay:.12s}
.halaman-office .provider:nth-of-type(2){animation-delay:.2s}
.halaman-office .provider:nth-of-type(3){animation-delay:.28s}
.halaman-office .provider:nth-of-type(4){animation-delay:.36s}
.halaman-office .provider .provider-name:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 0 0 rgba(96,165,250,.6);animation:denyutAgen 2.2s ease-out infinite}
.halaman-office .provider:nth-of-type(2) .provider-name:before{animation-delay:.5s}
.halaman-office .provider:nth-of-type(3) .provider-name:before{animation-delay:1s}
.halaman-office .provider:nth-of-type(4) .provider-name:before{animation-delay:1.5s}

/* Monitor VPS: kartu grafik hidup, angka berdenyut pelan, status server berkedip */
.halaman-monitor .graf-garis.gambar{animation-duration:1.5s}
.halaman-monitor .stat-number,.halaman-monitor #cpu-angka,.halaman-monitor #mem-angka,.halaman-monitor #jaring-angka,.halaman-monitor #disk-angka{animation:denyutAngka 3s ease-in-out infinite}
.halaman-monitor .server-status:before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#34d399;animation:denyutHidup 1.8s ease-in-out infinite}
.halaman-monitor .panel:hover{box-shadow:0 25px 75px rgba(59,130,246,.14)}
.halaman-monitor aside .provider{animation:masukKanan .5s var(--ease-out) both}
.halaman-monitor aside .provider:nth-child(2){animation-delay:.06s}
.halaman-monitor aside .provider:nth-child(3){animation-delay:.12s}
.halaman-monitor aside .provider:nth-child(4){animation-delay:.18s}
.halaman-monitor aside .provider:nth-child(5){animation-delay:.24s}
.halaman-monitor aside .provider:nth-child(6){animation-delay:.3s}

@keyframes naikHalus{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes turunHalus{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes masukKiri{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes masukKanan{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes denyutAgen{0%{box-shadow:0 0 0 0 rgba(96,165,250,.55)}70%{box-shadow:0 0 0 9px rgba(96,165,250,0)}100%{box-shadow:0 0 0 0 rgba(96,165,250,0)}}
@keyframes denyutAngka{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 16px rgba(96,165,250,.4)}}
@keyframes denyutHidup{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}