/* =========================================================
   VENA — penyimpanan pribadi
   Motif: map arsip bertab. Warna dasar abu-sage, aksen hijau-teal tua,
   kuning marigold hanya untuk bintang & zona jatuh unggahan.
   ========================================================= */
:root {
  --bg: #F2F4F1;
  --surface: #FFFFFF;
  --surface-2: #F7F8F6;
  --ink: #1B2420;
  --muted: #5F6D67;
  --line: #DCE2DD;
  --accent: #0E6B63;
  --accent-hover: #0A5650;
  --accent-ink: #FFFFFF;
  --accent-soft: #DCEBE7;
  --folder-back: #D99A2B; --folder-front: #F2C35E;
  --paper: #FFFFFF; --paper-fold: #E9EEEB; --paper-line: #C9D3CE;
  --folder: #DCE9E5;
  --folder-hover: #CFE1DC;
  --folder-tab: #C4DAD4;
  --marigold: #D9951F;
  --danger: #B3261E;
  --danger-soft: #FBE7E5;
  --shadow: 0 1px 2px rgba(27,36,32,.06), 0 8px 24px rgba(27,36,32,.08);
  --radius: 10px;
  --font-display: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-image: #B4532A; --k-video: #7446A8; --k-audio: #22719A; --k-pdf: #B3261E;
  --k-sheet: #2E7D32; --k-doc: #2C5BB8; --k-archive: #8A6A12; --k-code: #4B5A63; --k-slides: #BF6A00; --k-file: #5F6D67;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121816; --surface: #1A221F; --surface-2: #161D1B; --ink: #E4EBE7; --muted: #95A39D; --line: #2C3632;
    --accent: #5BBFB2; --accent-hover: #74CDC1; --accent-ink: #0B1A17; --accent-soft: #1F3531;
    --folder: #20302C; --folder-hover: #273A35; --folder-tab: #2C433D;
    --folder-back: #B07A1E; --folder-front: #E0AF4A; --paper: #E8EEEB; --paper-fold: #C9D3CE; --paper-line: #9FB0A9;
    --marigold: #F0B755; --danger: #F2867C; --danger-soft: #3A1F1D;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    --k-image: #E58A63; --k-video: #B08BE0; --k-audio: #6DB6DD; --k-pdf: #F2867C;
    --k-sheet: #79C47D; --k-doc: #82A7F0; --k-archive: #D7B455; --k-code: #A3B3BC; --k-slides: #F0A54A; --k-file: #95A39D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121816; --surface: #1A221F; --surface-2: #161D1B; --ink: #E4EBE7; --muted: #95A39D; --line: #2C3632;
  --accent: #5BBFB2; --accent-hover: #74CDC1; --accent-ink: #0B1A17; --accent-soft: #1F3531;
  --folder: #20302C; --folder-hover: #273A35; --folder-tab: #2C433D;
  --folder-back: #B07A1E; --folder-front: #E0AF4A; --paper: #E8EEEB; --paper-fold: #C9D3CE; --paper-line: #9FB0A9;
  --marigold: #F0B755; --danger: #F2867C; --danger-soft: #3A1F1D;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --k-image: #E58A63; --k-video: #B08BE0; --k-audio: #6DB6DD; --k-pdf: #F2867C;
  --k-sheet: #79C47D; --k-doc: #82A7F0; --k-archive: #D7B455; --k-code: #A3B3BC; --k-slides: #F0A54A; --k-file: #95A39D;
  color-scheme: dark;
}
:root[data-theme="candy"] {
  --bg: #FFF7F2; --surface: #FFFCFA; --surface-2: #FFF0EC; --ink: #3B2935; --muted: #7D6671; --line: #F1D8D8;
  --accent: #B85C8A; --accent-hover: #984872; --accent-ink: #FFFFFF; --accent-soft: #F8DCE9;
  --folder-back: #D99AAE; --folder-front: #F8C7D5; --paper: #FFFCFA; --paper-fold: #F4D9D8; --paper-line: #DDBFC5;
  --folder: #FCE5E7; --folder-hover: #F8D4DD; --folder-tab: #F4CBD7; --marigold: #D99554;
  --danger: #B44956; --danger-soft: #FBE1E1; --shadow: 0 1px 2px rgba(91,47,65,.06), 0 10px 28px rgba(184,92,138,.12);
  --k-image: #C86F58; --k-video: #8F72C5; --k-audio: #5B9BBC; --k-pdf: #C95562; --k-sheet: #5C9A6A; --k-doc: #5E7FC1; --k-archive: #B98A45; --k-code: #687681; --k-slides: #C77A45; --k-file: #7D6671;
  color-scheme: light;
}
:root[data-theme="candy"] body { background: radial-gradient(circle at 8% 0%, rgba(248,199,213,.35), transparent 30%), radial-gradient(circle at 95% 10%, rgba(213,241,232,.45), transparent 28%), var(--bg); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
code { font-size: .88em; background: var(--surface-2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.tiny { font-size: 12.5px; }
.error { color: var(--danger); font-size: 13.5px; min-height: 1em; margin: 8px 0 0; }
.grow { flex: 1; }

.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-xl { width: 44px; height: 44px; stroke-width: 1.5; }

/* ---------- tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px;
  padding: 9px 18px; font-weight: 700; font-size: 14.5px;
  background: var(--surface); color: var(--ink);
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-ghost.danger, .btn-danger { color: var(--danger); }
.btn-danger { background: var(--danger-soft); }
.btn-danger:hover { border-color: var(--danger); }
.btn-small { padding: 6px 14px; font-size: 13.5px; }
.btn-block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink);
}
.icon-btn:hover { background: var(--accent-soft); }
.link-btn { border: 0; background: none; color: var(--accent); padding: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- brand ---------- */
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  position: relative; width: 26px; height: 20px; margin-top: 4px;
  background: var(--accent); border-radius: 2px 6px 6px 6px;
}
.brand-mark::before {
  content: ""; position: absolute; left: 0; top: -5px; width: 12px; height: 6px;
  background: var(--accent); border-radius: 4px 4px 0 0;
}
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.brand-lg .brand-mark { width: 34px; height: 26px; }
.brand-lg .brand-mark::before { width: 15px; height: 7px; top: -6px; }
.brand-lg .brand-name { font-size: 28px; }

/* ---------- layar umum ---------- */
.screen { min-height: 100vh; min-height: 100dvh; }
.screen-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; }
.spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--accent-soft); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.setup { width: 100%; max-width: 560px; padding: 32px; }
.setup h1 { font-size: 26px; margin: 22px 0 6px; }
.steps { padding-left: 20px; margin: 18px 0 22px; display: grid; gap: 8px; }
.steps li { padding-left: 4px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; font-weight: 700; font-size: 14px; }
.field small { font-weight: 400; }
.field input, .dlg input[type="text"] {
  width: 100%; padding: 11px 13px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface-2); font-weight: 400;
}
.field input:focus, .dlg input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- login ---------- */
.screen-login { display: grid; grid-template-columns: 1.05fr 1fr; }
.login-art {
  background: var(--accent); display: grid; place-items: center; overflow: hidden; position: relative;
}
.tab-stack { position: relative; width: min(380px, 70%); aspect-ratio: 4 / 3.2; }
.tab-sheet {
  position: absolute; left: 0; right: 0; height: 74%;
  border-radius: 4px 16px 16px 16px;
  box-shadow: 0 -1px 0 rgba(255,255,255,.15) inset, 0 20px 40px rgba(0,0,0,.18);
  animation: rise .7s cubic-bezier(.2,.8,.2,1) both;
}
.tab-sheet span {
  position: absolute; top: -30px; height: 31px; padding: 6px 18px 0;
  border-radius: 10px 10px 0 0; background: inherit;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.tab-sheet.s1 { top: 0; background: #E9F1EE; color: #0E6B63; }
.tab-sheet.s1 span { left: 0; }
.tab-sheet.s2 { top: 13%; background: #F3C66B; color: #4A3407; animation-delay: .08s; }
.tab-sheet.s2 span { left: 34%; }
.tab-sheet.s3 { top: 26%; background: #FFFFFF; color: #1B2420; animation-delay: .16s; }
.tab-sheet.s3 span { right: 0; }
.tab-sheet.s3::after {
  content: ""; position: absolute; left: 9%; right: 38%; top: 22%; height: 46%;
  background:
    linear-gradient(#0E6B63, #0E6B63) 0 0 / 70% 10px no-repeat,
    linear-gradient(#C9D6D1, #C9D6D1) 0 34% / 100% 8px no-repeat,
    linear-gradient(#C9D6D1, #C9D6D1) 0 58% / 86% 8px no-repeat,
    linear-gradient(#C9D6D1, #C9D6D1) 0 82% / 60% 8px no-repeat;
  border-radius: 4px;
}
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
.login-body { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(24px, 6vw, 88px); max-width: 620px; }
.login-title { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; margin: 36px 0 14px; letter-spacing: -0.03em; }
.login-lead { font-size: 17px; max-width: 40ch; margin: 0 0 28px; }
.btn-google {
  align-self: flex-start; background: var(--surface); border: 1px solid var(--line);
  padding: 12px 22px; font-size: 15.5px; box-shadow: var(--shadow);
}
.btn-google:hover { border-color: var(--accent); }
#loginHint { margin: 14px 0 0; }
.pw-form { max-width: 380px; display: grid; gap: 4px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 48px !important; font-size: 16px; }
.password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); padding: 0; }
.password-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.password-toggle .i { width: 19px; height: 19px; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; margin: 0 0 14px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.pw-form .btn-block { padding: 12px 18px; font-size: 15.5px; }
.pw-form p { margin: 12px 0 0; }
#btnResetSetup { align-self: flex-start; margin-top: 18px; }
.install-btn {
  align-self: flex-start; margin-top: 28px; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius: 14px; padding: 12px 18px 12px 14px; gap: 12px; text-align: left; background: var(--accent-soft); color: var(--ink);
}
.install-btn .i { width: 26px; height: 26px; color: var(--accent); }
.install-btn span { display: grid; }
.install-btn small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.legal { margin: 34px 0 0; display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); }
.menu-foot { display: grid; gap: 2px; padding: 6px 12px 8px; }
.status-legal { margin-left: 8px; opacity: .85; }
.install-steps { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; counter-reset: st; }
.install-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.install-steps .ico { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }

/* ---------- desktop & jendela ---------- */
.desk {
  min-height: 100vh; min-height: 100dvh; padding: 14px;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(243,198,107,.35), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(91,191,178,.35), transparent 60%),
    linear-gradient(160deg, #0E6B63 0%, #0B5752 55%, #0A3F3C 100%);
}
:root[data-theme="dark"] .desk { background: radial-gradient(900px 600px at 85% -10%, rgba(243,198,107,.12), transparent 60%), linear-gradient(160deg, #0B2A27, #08191A); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .desk { background: radial-gradient(900px 600px at 85% -10%, rgba(243,198,107,.12), transparent 60%), linear-gradient(160deg, #0B2A27, #08191A); } }
.win {
  height: calc(100vh - 28px); height: calc(100dvh - 28px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 30px 80px rgba(0,0,0,.35);
}

.titlebar {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 16px; min-height: 52px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.brand-mark.small { width: 20px; height: 15px; margin-top: 3px; }
.brand-mark.small::before { width: 9px; height: 5px; top: -4px; }
.win-title { font-family: var(--font-display); font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account { position: relative; }
.avatar-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--surface); padding: 0; overflow: hidden;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 0 0 1px var(--line);
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }

/* navigasi */
.navbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.nav-btns { display: flex; gap: 2px; }
.nb {
  width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--ink);
  display: grid; place-items: center;
}
.nb:hover:not(:disabled) { background: var(--accent-soft); }
.nb:disabled { color: var(--muted); opacity: .45; cursor: default; }
.nb .i { width: 19px; height: 19px; }
.address {
  flex: 1; min-width: 0; height: 38px; display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 0 6px;
}
.address::-webkit-scrollbar { display: none; }
.address .root-ico { color: var(--accent); display: grid; padding: 0 4px 0 2px; }
.address .root-ico .i { width: 18px; height: 18px; }
.address button, .address span.current {
  border: 0; background: none; padding: 4px 8px; border-radius: 6px; white-space: nowrap; font-size: 14.5px; color: var(--ink);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.address button:hover { background: var(--accent-soft); }
.address span.current { font-weight: 700; }
.address .sep { color: var(--muted); display: inline-flex; flex: none; }
.address .sep .i { width: 15px; height: 15px; }
.search {
  width: 280px; flex: none; display: flex; align-items: center; gap: 8px; height: 38px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 0 12px;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.search input { flex: 1; border: 0; background: transparent; outline: none; min-width: 0; height: 100%; font-size: 14.5px; }
.search .i { color: var(--muted); width: 18px; height: 18px; }

/* bilah perintah */
.cmdbar {
  display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: thin;
}
.cmd {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  border: 0; background: none; color: var(--ink); padding: 7px 11px; border-radius: 8px; font-size: 14px; font-weight: 700;
}
.cmd:hover:not(:disabled) { background: var(--accent-soft); }
.cmd:disabled { opacity: .38; cursor: default; }
.cmd .i { width: 18px; height: 18px; }
.cmd.danger:not(:disabled) { color: var(--danger); }
.cmd-primary { background: var(--accent); color: var(--accent-ink); padding: 7px 14px 7px 11px; margin-right: 4px; }
.cmd-primary:hover:not(:disabled) { background: var(--accent-hover); }
.cmd-icon { padding: 7px 9px; }
.cmd-icon[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.cmd-sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; flex: none; }
.sort-wrap { flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.select { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 8px; font-size: 13.5px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); margin: 0 4px; flex: none; }
.seg button { border: 0; background: none; padding: 5px 9px; display: grid; place-items: center; color: var(--muted); }
.seg button.on { background: var(--accent-soft); color: var(--accent); }
.seg .i { width: 18px; height: 18px; }

/* badan jendela */
.win-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; position: relative; }
.win.no-details .win-body { grid-template-columns: 240px minmax(0, 1fr); }
.win.no-details .details { display: none; }

/* panel kiri */
.navpane { overflow-y: auto; border-right: 1px solid var(--line); padding: 10px 8px; display: flex; flex-direction: column; background: var(--surface-2); }
.np-label { margin: 10px 10px 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.np-label:first-of-type { margin-top: 2px; }
.nav { display: grid; gap: 1px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 14.5px;
}
.nav a .i { width: 18px; height: 18px; color: var(--muted); }
.nav a:hover { background: var(--accent-soft); }
.nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.nav a.active .i { color: var(--accent); }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 14px; }
.tree .row { display: flex; align-items: center; gap: 2px; border-radius: 8px; padding-right: 6px; }
.tree .row:hover { background: var(--accent-soft); }
.tree .row.active { background: var(--accent-soft); }
.tree .row.active .tname { color: var(--accent); font-weight: 700; }
.tree .twisty { width: 22px; height: 28px; border: 0; background: none; display: grid; place-items: center; color: var(--muted); flex: none; padding: 0; }
.tree .twisty .i { width: 14px; height: 14px; transition: transform .12s; }
.tree .twisty.open .i { transform: rotate(90deg); }
.tree .twisty.leaf { visibility: hidden; }
.tree .tname { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 5px 2px; text-align: left; font-size: 14px; color: var(--ink); }
.tree .tname span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree .tname svg { width: 18px; height: 16px; flex: none; }
.tree .tree-empty { font-size: 13px; color: var(--muted); padding: 4px 10px 4px 32px; }

.disk { margin-top: auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: grid; gap: 6px; }
.disk p { margin: 0; }
.disk-top { display: flex; align-items: center; gap: 10px; }
.disk-top strong { font-size: 14px; }
.disk-ico { width: 34px; height: 24px; color: var(--accent); flex: none; }
.quota-bar { position: relative; height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.quota-bar span { position: absolute; left: 0; top: 0; display: block; height: 100%; width: 0; background: color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: inherit; transition: width .6s; }
.quota-bar span.app-fill { background: var(--accent); }
.quota-bar.warn span:first-child { background: var(--danger); }
.quota-legend { display: flex; align-items: center; gap: 6px; }
.quota-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.quota-legend:has(#quotaApp:empty) { display: none; }

/* panel tengah */
.pane { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 14px 0; padding: 10px 14px; border-radius: 10px; background: var(--danger-soft); font-size: 14px;
}
.banner span { flex: 1; min-width: 200px; }
.note { margin: 10px 14px 0; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; }
.content { flex: 1; overflow: auto; padding: 12px 14px 90px; outline: none; }

/* item: ikon besar */
.items.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; align-content: start; }
.it {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 8px; border-radius: 10px; border: 1px solid transparent; user-select: none; cursor: default; outline: none;
}
.it:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.it.selected { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.it:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.it .ic { width: 76px; height: 68px; display: grid; place-items: center; position: relative; }
.it .ic svg.big { width: 64px; height: 64px; }
.it .ic img { max-width: 76px; max-height: 64px; object-fit: cover; border-radius: 6px; border: 2px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.it .nm {
  width: 100%; text-align: center; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.it.selected .nm { -webkit-line-clamp: 4; }
.it .col { display: none; }
.it .star-badge { position: absolute; top: 6px; right: 14px; color: var(--marigold); }
.it .star-badge .i { width: 16px; height: 16px; fill: currentColor; }
.it .shared-badge { position: absolute; top: 44px; right: 18px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.it .shared-badge .i { width: 12px; height: 12px; stroke-width: 2.4; }

/* item: detail / daftar */
.list-head { display: none; }
.items.list ~ .list-head, .content.listing .list-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 130px 90px; position: sticky; top: -12px; z-index: 2;
  background: var(--surface); border-bottom: 1px solid var(--line); margin: -12px -14px 4px; padding: 0 14px;
}
.list-head button { border: 0; background: none; text-align: left; padding: 9px 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.list-head button:hover { color: var(--ink); background: var(--surface-2); }
.list-head button.on { color: var(--accent); }
.list-head button.on::after { content: " ▾"; }
.list-head button[data-sort="size"] { text-align: right; }
.items.list { display: flex; flex-direction: column; }
.items.list .it {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 130px 90px; align-items: center; gap: 0;
  padding: 0; border-radius: 6px; min-height: 40px;
}
.items.list .it .ic { display: none; }
.items.list .it .nm { display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px 10px; -webkit-line-clamp: unset; white-space: nowrap; }
.items.list .it .nm .mini { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.items.list .it .nm .mini svg { width: 22px; height: 22px; }
.items.list .it .nm .label { overflow: hidden; text-overflow: ellipsis; }
.items.grid .it .nm .mini { display: none; }
.items.list .it .col { display: block; padding: 6px 10px; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.items.list .it .col.c-size { text-align: right; }
.items.list .it .star-badge { position: static; display: inline-grid; margin-left: 2px; }
.items.grid .nm .star-badge { display: none; }
.items.list .star-badge.grid-only { display: none; }
.items.list .it .shared-badge { display: none; }

/* tombol ⋮ di layar sentuh */
.more-btn { display: none; border: 0; background: none; color: var(--muted); padding: 0; place-items: center; }
.more-btn .i { width: 20px; height: 20px; }
@media (hover: none) {
  .items.grid .it .more-btn { display: grid; position: absolute; top: 2px; left: 2px; width: 32px; height: 32px; border-radius: 50%; }
  .items.grid .it .more-btn:active { background: var(--accent-soft); }
  .items.list .it .more-btn { display: grid; width: 40px; height: 40px; }
  .it { -webkit-touch-callout: none; -webkit-user-select: none; }
}

/* kosong & loading */
.empty { text-align: center; padding: 50px 16px; display: grid; justify-items: center; gap: 10px; }
.empty .empty-art svg { width: 110px; height: 90px; }
.empty h3 { font-size: 19px; }
.empty p { margin: 0; max-width: 42ch; color: var(--muted); }
.empty .btn { margin-top: 8px; }
.list-loading { display: grid; place-items: center; padding: 60px; }

/* panel detail */
.details { border-left: 1px solid var(--line); overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.details .d-preview {
  height: 160px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
}
.details .d-preview img { width: 100%; height: 100%; object-fit: contain; }
.details .d-preview svg.big { width: 84px; height: 84px; }
.details h3 { font-size: 17px; overflow-wrap: anywhere; line-height: 1.3; }
.details dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13.5px; }
.details dt { color: var(--muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.details .d-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.details .d-actions .btn { padding: 8px 10px; font-size: 13.5px; white-space: nowrap; border-radius: 9px; border: 1px solid var(--line); justify-content: flex-start; }
.details .d-actions .btn .i { width: 17px; height: 17px; }
.details .d-actions .btn-primary { border-color: transparent; grid-column: 1 / -1; justify-content: center; }
.details .d-actions .btn.danger { color: var(--danger); }
.details .d-hint { font-size: 13px; color: var(--muted); margin: 0; }
.details .d-hint kbd { font: inherit; font-size: 12px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: var(--surface-2); color: var(--ink); }

/* bilah status */
.statusbar {
  display: flex; align-items: center; gap: 18px; padding: 5px 16px; min-height: 30px;
  border-top: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; color: var(--muted);
}

/* ---------- zona jatuh ---------- */
.drop-zone {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--marigold) 18%, transparent);
  outline: 3px dashed var(--marigold); outline-offset: -14px;
}
.drop-card { background: var(--surface); padding: 28px 36px; border-radius: 18px; box-shadow: var(--shadow); text-align: center; color: var(--ink); }
.drop-card .i { color: var(--marigold); }
.drop-card p { margin: 10px 0 0; }

/* ---------- menu ---------- */
.menu {
  position: absolute; z-index: 80; min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  display: grid;
}
.menu button, .menu a {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 0; background: none; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; color: var(--ink); text-decoration: none;
}
.menu button:hover, .menu a:hover, .menu button:focus-visible { background: var(--accent-soft); outline: none; }
.menu .danger { color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu-head { padding: 8px 12px; display: grid; }
.menu-right { right: 0; top: calc(100% + 8px); }
.menu-floating { position: fixed; }

/* ---------- unggahan ---------- */
.uploads {
  position: fixed; right: 20px; bottom: 20px; z-index: 70; width: min(380px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
}
.uploads-head { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.uploads-head strong { flex: 1; font-size: 14.5px; }
.uploads.min .uploads-list { display: none; }
.uploads.min [data-action="toggle-uploads"] .i { transform: rotate(180deg); }
.uploads-list { list-style: none; margin: 0; padding: 4px 0; max-height: 300px; overflow: auto; }
.uploads-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 14px; align-items: center; }
.uploads-list .u-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uploads-list .u-state { font-size: 12.5px; color: var(--muted); grid-column: 1; }
.uploads-list .u-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.uploads-list .u-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.uploads-list li.done .u-bar span { background: var(--accent); }
.uploads-list li.fail .u-state { color: var(--danger); }
.uploads-list li.fail .u-bar span { background: var(--danger); }
.uploads-list .u-act { grid-row: 1 / 3; grid-column: 2; }
.uploads-list .u-act .icon-btn { width: 32px; height: 32px; }

/* ---------- dialog ---------- */
.dlg {
  border: 1px solid var(--line); border-radius: 18px; padding: 24px; width: min(440px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.dlg::backdrop { background: rgba(10, 16, 14, .45); }
.dlg h3 { font-size: 20px; margin-bottom: 14px; overflow-wrap: anywhere; }
.dlg p { margin: 0 0 6px; }
.dlg-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.dlg-move { width: min(520px, calc(100vw - 32px)); }
.move-list { list-style: none; margin: 8px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 12px; height: 280px; overflow: auto; }
.move-list li button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; border-radius: 8px; text-align: left;
}
.move-list li button:hover { background: var(--accent-soft); }
.move-list li button:disabled { opacity: .45; cursor: not-allowed; background: none; }
.move-list .i { color: var(--accent); }
.move-list .chev { margin-left: auto; color: var(--muted); }
.move-list .hint { padding: 20px; color: var(--muted); text-align: center; }
.switch-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; cursor: pointer; }
.switch-row > span { flex: 1; display: grid; }
.switch {
  appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background .15s;
}
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.share-link { display: flex; gap: 8px; margin-top: 8px; }
.share-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.share-apps .tiny { width: 100%; }
.app-btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface);
  padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink);
}
.app-btn .i { width: 18px; height: 18px; }
.app-btn.wa { background: #1F9D55; border-color: #1F9D55; color: #fff; }
.app-btn.wa:hover { background: #188046; }
.app-btn.tg .i { color: #2A8BD0; }
.app-btn:not(.wa):hover { background: var(--accent-soft); }
.expiry-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 8px; font-size: 14.5px; }
.share-link input { flex: 1; min-width: 0; }

/* ---------- pilih ikon ---------- */
.dlg-icon { width: min(560px, calc(100vw - 24px)); }
.icon-top { display: flex; gap: 18px; align-items: center; }
.icon-preview { width: 104px; height: 96px; flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.icon-preview svg { width: 78px; height: 74px; }
.icon-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-colors button {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface); padding: 0;
  box-shadow: 0 0 0 1px var(--line); background: var(--c);
}
.icon-colors button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--accent); }
.icon-colors button.none { background: conic-gradient(#F2C35E 0 25%, #7DB4F5 0 50%, #8BD07A 0 75%, #EF7B70 0); }
.icon-label { margin: 16px 0 8px; font-weight: 700; font-size: 14px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; max-height: 270px; overflow-y: auto; padding: 2px; }
.icon-grid button {
  display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); font-size: 12px; color: var(--ink);
}
.icon-grid button:hover { background: var(--accent-soft); }
.icon-grid button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.icon-grid svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- seret-pindah ---------- */
.drop-hover { outline: 2px solid var(--accent) !important; outline-offset: -2px; background: var(--accent-soft) !important; }
.it.dragging { opacity: .45; }
.drag-ghost {
  position: fixed; top: -100px; left: -100px; padding: 6px 12px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px; box-shadow: var(--shadow);
}


/* ---------- pemutar musik ---------- */
.player {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 8px 16px; border-top: 1px solid var(--line); background: var(--surface);
}
.pl-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-art { width: 46px; height: 46px; border-radius: 10px; flex: none; overflow: hidden; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.pl-art img { width: 100%; height: 100%; object-fit: cover; }
.pl-art svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-text { display: grid; min-width: 0; }
.pl-text strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-text span { font-size: 12.5px; color: var(--muted); }
.pl-center { display: grid; gap: 2px; justify-items: center; min-width: 0; }
.pl-ctrls { display: flex; align-items: center; gap: 6px; }
.pb { position: relative; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ink); display: grid; place-items: center; }
.pb:hover { background: var(--accent-soft); }
.pb .i { width: 19px; height: 19px; }
.pb[aria-pressed="true"] { color: var(--accent); }
.pb[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 2px; left: 50%; margin-left: -2px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.pl-play { width: 42px; height: 42px; background: var(--accent); color: var(--accent-ink); }
.pl-play:hover { background: var(--accent-hover); }
.pl-seek { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-seek input { flex: 1; accent-color: var(--accent); height: 4px; }
.pl-right { display: flex; justify-content: flex-end; gap: 4px; }
.pl-list {
  position: absolute; right: 12px; bottom: calc(100% + 8px); width: min(380px, calc(100vw - 24px)); max-height: 50vh; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
}
.pl-list-head { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pl-list ol, .vs-list ol { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.pl-list li button, .vs-list li button {
  width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: inherit;
}
.pl-list li button:hover { background: var(--accent-soft); }
.pl-list li.on button { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.pl-list .n, .vs-list .n { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pl-list .t, .vs-list .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-list .s, .vs-list .s { color: var(--muted); font-size: 12px; }

/* ---------- pemutar video ---------- */
.vstage { position: fixed; inset: 0; z-index: 88; background: #0A0F0E; color: #EEF3F1; display: flex; flex-direction: column; }
.vstage .viewer-head .icon-btn { color: #EEF3F1; }
.vstage .viewer-head .icon-btn:hover { background: rgba(255,255,255,.12); }
.vs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.vstage.list-off .vs-body { grid-template-columns: minmax(0, 1fr); }
.vstage.list-off .vs-list { display: none; }
.vs-main { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 12px; }
.vs-main video { max-width: 100%; max-height: 100%; width: 100%; background: #000; border-radius: 8px; }
.vs-msg { position: absolute; inset: auto 20px 20px; text-align: center; background: rgba(0,0,0,.6); padding: 10px 14px; border-radius: 10px; }
.vs-list { border-left: 1px solid rgba(255,255,255,.1); overflow-y: auto; }
.vs-list li button { color: #DCE6E1; }
.vs-list li button:hover { background: rgba(255,255,255,.08); }
.vs-list li.on button { background: rgba(91,191,178,.2); color: #8FE0D5; font-weight: 700; }
.vs-ctrls { display: flex; justify-content: center; gap: 10px; padding: 10px; }
.vs-ctrls .pb { color: #EEF3F1; }
.vs-ctrls .pb:hover { background: rgba(255,255,255,.12); }
.vs-ctrls .pb[aria-pressed="true"] { color: #8FE0D5; }
.vs-ctrls .pl-play { background: #5BBFB2; color: #0B1A17; }
.cmd-play:not(:disabled) { color: var(--accent); }


/* ---------- drive (partisi) ---------- */
.drive-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.drv-row {
  width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left;
  padding: 6px 8px; border-radius: 10px; color: var(--ink);
}
.drv-row:hover { background: var(--accent-soft); }
.drv-row.active { background: var(--accent-soft); }
.drv-row.active .drv-name { color: var(--accent); }
.drv-ico { width: 34px; height: 26px; flex: none; }
.drv-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.drv-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drv-use { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drv-bar { display: block; height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; }
.drv-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.drv-bar.nolimit { display: none; }
.drv-bar.warn span { background: var(--danger); }
.add-drive {
  display: flex; align-items: center; gap: 8px; margin: 4px 4px 0; padding: 7px 10px; border: 1px dashed var(--line);
  border-radius: 10px; background: none; color: var(--muted); font-size: 13.5px; font-weight: 700;
}
.add-drive:hover { color: var(--accent); border-color: var(--accent); }
.add-drive .i { width: 16px; height: 16px; }

.items.drives-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding-top: 4px; }
.drv-card {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 16px 16px 14px; min-height: 104px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; color: var(--ink); cursor: pointer;
}
.drv-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface-2); }
.drv-card:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.drv-big { width: 64px; height: 48px; flex: none; }
.drv-card-body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.drv-card-body strong { font-family: var(--font-display); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drv-card .drv-bar { height: 8px; }
.drv-card .drv-more { display: grid; position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; }
.drv-card .drv-more:hover { background: var(--accent-soft); }
.drv-add { justify-content: center; border-style: dashed; color: var(--muted); font-weight: 700; gap: 10px; }
.drv-add .i { width: 22px; height: 22px; }
.drv-add:hover { color: var(--accent); border-color: var(--accent); }
.mv-disk { width: 26px; height: 20px; flex: none; }

.dlg-drive { width: min(480px, calc(100vw - 24px)); }
.drive-preview { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.drive-preview strong { font-family: var(--font-display); font-size: 18px; }
.drive-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.drive-row .select { width: 100%; padding: 10px 8px; }
.limit-wrap { position: relative; display: block; }
.limit-wrap input { width: 100%; padding: 11px 44px 11px 13px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); font-weight: 400; }
.limit-wrap em { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); font-weight: 700; }
.field-label { margin: 2px 0 8px; font-weight: 700; font-size: 14px; }
#driveColors { margin-bottom: 12px; }

/* ---------- pratinjau ---------- */
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(8, 12, 11, .94); color: #EEF3F1; display: flex; flex-direction: column; }
.viewer-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; }
.viewer-head .icon-btn { color: #EEF3F1; }
.viewer-head .icon-btn:hover { background: rgba(255,255,255,.12); }
.viewer-title { flex: 1; min-width: 0; display: grid; padding: 0 6px; }
.viewer-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-title .tiny { color: #A8B5B0; }
.viewer-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px 64px 24px; }
.viewer-body img, .viewer-body video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.viewer-body iframe { width: 100%; height: 100%; border: 0; border-radius: 6px; background: #fff; }
.viewer-body audio { width: min(520px, 100%); }
.viewer-body pre {
  width: 100%; height: 100%; margin: 0; overflow: auto; padding: 20px; border-radius: 8px;
  background: #151C19; color: #DCE6E1; font: 13.5px/1.55 ui-monospace, "SFMono-Regular", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.viewer-msg { text-align: center; display: grid; gap: 14px; justify-items: center; max-width: 420px; }
.viewer-msg .i-xl { color: #A8B5B0; }
.viewer-msg p { margin: 0; color: #C5D0CB; }
.viewer-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center;
}
.viewer-nav:hover { background: rgba(255,255,255,.2); }
.viewer-nav.prev { left: 10px; }
.viewer-nav.next { right: 10px; }
.viewer .spinner { border-color: rgba(255,255,255,.15); border-top-color: #fff; }

/* ---------- pratinjau foto penuh ---------- */
.viewer-body.img-mode { display: flex; align-items: center; justify-content: center; padding: 0 60px 10px; overflow: hidden; }
.viewer-body.img-mode img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 0; cursor: zoom-in; }
.viewer-body.img-mode.zoomed { display: block; overflow: auto; padding: 0; }
.viewer-body.img-mode.zoomed img { width: auto; height: auto; cursor: zoom-out; display: block; margin: auto; }

/* ---------- pratinjau dokumen ---------- */
.viewer-loading { display: grid; justify-items: center; gap: 12px; color: #C5D0CB; }
.viewer-loading p { margin: 0; }
.viewer-msg svg.big { width: 80px; height: 80px; }
.viewer-body.doc-mode { display: flex; flex-direction: column; align-items: stretch; justify-content: stretch; place-items: stretch; padding: 0; position: relative; min-width: 0; }
.viewer:has(.doc-mode) { background: #0A0F0E; }
.pdf-scroll { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; padding: 12px 12px 70px; -webkit-overflow-scrolling: touch; }
.pdf-pages { display: grid; justify-content: center; gap: 12px; }
.pdf-page { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.4); border-radius: 2px; overflow: hidden; }
.pdf-page canvas { display: block; max-width: 100%; height: auto; }
.doc-bar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  background: rgba(20,28,25,.92); color: #EEF3F1; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.doc-bar .pb { color: #EEF3F1; width: 34px; height: 34px; }
.doc-bar .pb:hover { background: rgba(255,255,255,.12); }
.doc-bar #pdfZoom { min-width: 44px; text-align: center; }
.doc-bar span { white-space: nowrap; }
.doc-sep { width: 1px; height: 18px; background: rgba(255,255,255,.25); margin: 0 6px; }
.sheet-wrap { flex: 1; overflow: auto; background: #fff; color: #1B2420; margin: 0 12px; border-radius: 6px; -webkit-overflow-scrolling: touch; }
.sheet-wrap table { border-collapse: collapse; font: 13px/1.35 system-ui, sans-serif; }
.sheet-wrap td, .sheet-wrap th { border: 1px solid #DDE3DF; padding: 4px 8px; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.sheet-wrap thead th { position: sticky; top: 0; background: #EEF2EF; color: #5F6D67; font-weight: 700; z-index: 2; }
.sheet-wrap tbody th { position: sticky; left: 0; background: #EEF2EF; color: #5F6D67; font-weight: 400; text-align: right; z-index: 1; }
.sheet-wrap thead th.corner { left: 0; z-index: 3; }
.sheet-note { margin: 0; padding: 8px 12px; background: #FFF6DE; color: #6A4B00; font-size: 13px; }
.sheet-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px 14px; }
.sheet-tabs button { border: 0; background: rgba(255,255,255,.1); color: #DCE6E1; padding: 7px 14px; border-radius: 8px; white-space: nowrap; font-size: 13.5px; }
.sheet-tabs button.on { background: #5BBFB2; color: #0B1A17; font-weight: 700; }

/* ---------- toast ---------- */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: calc(100vw - 32px); }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 14px; max-width: 520px;
  background: var(--ink); color: var(--bg); padding: 11px 14px 11px 18px; border-radius: 12px; font-size: 14.5px; box-shadow: var(--shadow);
  animation: toast-in .2s ease-out;
}
.toast.err { background: var(--danger); color: #fff; }
.toast-progress { width: min(420px, calc(100vw - 32px)); }
.tp-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tp-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-sub { font-size: 12.5px; opacity: .8; }
.tp-bar { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--bg) 25%, transparent); overflow: hidden; margin-top: 3px; }
.tp-bar span { display: block; height: 100%; width: 0; background: var(--bg); transition: width .2s; }
.toast-progress.indeterminate .tp-bar span { width: 35% !important; animation: indet 1.1s ease-in-out infinite; }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.toast button { border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; padding: 2px 4px; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

.fab {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30;
  width: 58px; height: 58px; border-radius: 18px; border: 0;
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); display: grid; place-items: center;
}
.fab .i { width: 26px; height: 26px; stroke-width: 2.2; }

.only-mobile { display: none; }
.scrim { display: none; }

/* ---------- responsif ---------- */
@media (max-width: 1180px) {
  .win-body, .win.no-details .win-body { grid-template-columns: 220px minmax(0, 1fr); }
  .details { display: none; }
  #btnDetails { display: none; }
  .search { width: 220px; }
}
@media (max-width: 900px) {
  .desk { padding: 0; }
  .win { height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
  .only-mobile { display: inline-grid; }
  .win-body, .win.no-details .win-body { grid-template-columns: minmax(0, 1fr); }
  .navpane {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; width: 290px;
    background: var(--surface); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow);
    padding-top: 12px;
  }
  .np-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 6px 10px; }
  .desk.nav-open .navpane { transform: none; }
  .desk.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(10,16,14,.4); }
  .titlebar { padding-left: 6px; }
  .titlebar .brand-mark.small { display: none; }
  .navbar { flex-wrap: wrap; gap: 8px; }
  .address { order: 2; flex-basis: 100%; }
  .nav-btns { order: 1; }
  .search { order: 1; flex: 1; width: auto; min-width: 0; }
  .nav-btns [data-action="refresh"] { display: none; }
  .cmdbar .cmd-primary, .cmdbar [data-action="upload-files"] { display: none; }
  .cmdbar .cmd span { display: none; }
  .cmdbar .cmd { padding: 8px 10px; }
  .cmdbar .cmd-sep[data-hide-in] { display: none; }
  .desk:not(.has-sel) .cmdbar [data-need] { display: none; }
  .content { padding: 10px 10px 110px; }
  .items.grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .items.list .it, .items.list ~ .list-head, .content.listing .list-head { grid-template-columns: minmax(0, 1fr) 84px; }
  .items.list .it .c-date, .items.list .it .c-type, .list-head [data-sort="modified"], .list-head [data-sort="type"] { display: none !important; }
  .statusbar { padding-bottom: calc(5px + env(safe-area-inset-bottom)); }
  .status-legal { display: none; }
  .uploads { right: 16px; bottom: calc(90px + env(safe-area-inset-bottom)); }
  .fab { bottom: calc(46px + env(safe-area-inset-bottom)); }
  .desk.playing .fab { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .player { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 8px 10px; }
  .pl-center { grid-column: 1 / -1; grid-row: 2; }
  .pl-right { grid-row: 1; grid-column: 2; }
  .pl-seek { font-size: 11.5px; }
  .vs-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .vs-list { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); max-height: 34vh; }
}
@media (max-width: 760px) {
  .screen-login { grid-template-columns: 1fr; grid-template-rows: 38vh auto; }
  .login-art { min-height: 260px; }
  .tab-stack { width: min(300px, 70%); }
  .login-body { padding: 32px 20px 40px; }
  .login-title { margin-top: 24px; }
}
@media (max-width: 560px) {
  .sort-wrap .select { max-width: 120px; }
  .titlebar #btnTheme { display: none; }
  .viewer-body { padding: 4px 8px 16px; }
  .pdf-scroll { padding: 8px 4px 70px; }
  .viewer-body.img-mode { padding: 0 0 6px; }
  .sheet-wrap { margin: 0 4px; }
  .viewer-nav { top: auto; bottom: 18px; transform: none; }
  .setup { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* kolom tampilan detail diatur eksplisit (supaya tombol ⋮ di HP tidak menggeser kolom) */
.items.list .it .nm { grid-column: 1; grid-row: 1; }
.items.list .it .c-date { grid-column: 2; grid-row: 1; }
.items.list .it .c-type { grid-column: 3; grid-row: 1; }
.items.list .it .c-size { grid-column: 4; grid-row: 1; }
@media (hover: none) {
  .items.list .it, .content.listing .list-head { grid-template-columns: minmax(0, 1fr) 150px 130px 90px 40px; }
  .items.list .it .more-btn { grid-column: 5; grid-row: 1; }
}
@media (max-width: 900px) {
  .items.list .it .c-size { grid-column: 2; }
  .items.list .it, .content.listing .list-head { grid-template-columns: minmax(0, 1fr) 84px; }
}
@media (max-width: 900px) and (hover: none) {
  .items.list .it, .content.listing .list-head { grid-template-columns: minmax(0, 1fr) 84px 40px; }
  .items.list .it .more-btn { grid-column: 3; }
}

/* =====================================================================
   MODEL TAMPILAN "MODERN"
   Kartu melayang di atas latar polos, aksen ungu-indigo + koral,
   huruf Plus Jakarta Sans, kotak isi berwarna, navigasi bawah di HP.
   ===================================================================== */
:root { --k-folder: var(--folder-front); }
.bottom-nav { display: none; }
.menu-val { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--muted); }

:root.skin-modern {
  --bg: #ECEEF6; --surface: #FFFFFF; --surface-2: #F4F5FB; --ink: #14172B; --muted: #676C8A; --line: #E0E3EF;
  --accent: #5847E0; --accent-hover: #4636C9; --accent-ink: #FFFFFF; --accent-soft: #ECE9FD;
  --marigold: #FF7F57; --danger: #D83A4A; --danger-soft: #FDE8EA;
  --folder-back: #5847E0; --folder-front: #8C7DF5; --folder: #ECE9FD; --folder-hover: #E2DEFC; --folder-tab: #D6D0FB;
  --paper: #FFFFFF; --paper-fold: #EAEBF5; --paper-line: #CDD0E3;
  --shadow: 0 1px 2px rgba(20,23,43,.05), 0 12px 32px rgba(20,23,43,.08);
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-folder: #6E5DEB;
}
@media (prefers-color-scheme: dark) {
  :root.skin-modern:not([data-theme="light"]) {
    --bg: #0D0E19; --surface: #161828; --surface-2: #1C1F33; --ink: #ECEDF7; --muted: #9A9FBF; --line: #282C45;
    --accent: #8E80FF; --accent-hover: #A99EFF; --accent-ink: #0D0E19; --accent-soft: #252347;
    --marigold: #FF9B7A; --danger: #FF7A86; --danger-soft: #3A1C24;
    --folder-back: #6C5CE7; --folder-front: #9C90FF; --folder: #252347; --folder-hover: #2D2A55; --folder-tab: #353166;
    --paper: #E7E8F6; --paper-fold: #C9CBE2; --paper-line: #9A9EC0;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.45);
    --k-folder: #9C90FF;
  }
}
:root.skin-modern[data-theme="dark"] {
  --bg: #0D0E19; --surface: #161828; --surface-2: #1C1F33; --ink: #ECEDF7; --muted: #9A9FBF; --line: #282C45;
  --accent: #8E80FF; --accent-hover: #A99EFF; --accent-ink: #0D0E19; --accent-soft: #252347;
  --marigold: #FF9B7A; --danger: #FF7A86; --danger-soft: #3A1C24;
  --folder-back: #6C5CE7; --folder-front: #9C90FF; --folder: #252347; --folder-hover: #2D2A55; --folder-tab: #353166;
  --paper: #E7E8F6; --paper-fold: #C9CBE2; --paper-line: #9A9EC0;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.45);
  --k-folder: #9C90FF;
}
.skin-modern body { letter-spacing: -0.005em; }
.skin-modern h1, .skin-modern h2, .skin-modern h3 { font-weight: 800; letter-spacing: -0.02em; }

/* login */
.skin-modern .login-art { background: linear-gradient(150deg, #5847E0 0%, #7A5CF0 55%, #FF7F57 140%); }
.skin-modern .tab-sheet { border-radius: 8px 24px 24px 24px; }
.skin-modern .tab-sheet.s1 { background: #EEEBFF; color: #5847E0; }
.skin-modern .tab-sheet.s2 { background: #FFB79F; color: #6B2610; }
.skin-modern .tab-sheet.s3::after { background:
    linear-gradient(#5847E0, #5847E0) 0 0 / 70% 10px no-repeat,
    linear-gradient(#D9DCEC, #D9DCEC) 0 34% / 100% 8px no-repeat,
    linear-gradient(#D9DCEC, #D9DCEC) 0 58% / 86% 8px no-repeat,
    linear-gradient(#D9DCEC, #D9DCEC) 0 82% / 60% 8px no-repeat; }
.skin-modern .btn { border-radius: 14px; }
.skin-modern .login-title { font-weight: 800; letter-spacing: -0.035em; }

/* kerangka: tanpa bingkai jendela, semua bagian jadi kartu melayang */
html.skin-modern .desk { background: var(--bg) !important; padding: 14px 16px; }
.skin-modern .win { background: transparent; box-shadow: none; border-radius: 0; height: calc(100vh - 28px); height: calc(100dvh - 28px); overflow: visible; }
.skin-modern .titlebar { background: transparent; border: 0; padding: 2px 4px 10px; min-height: 0; }
.skin-modern .brand-mark.small { width: 30px; height: 30px; border-radius: 10px; margin: 0; background: linear-gradient(135deg, var(--accent), #FF7F57); }
.skin-modern .brand-mark.small::before { display: none; }
.skin-modern .win-title { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.skin-modern .avatar-btn { width: 40px; height: 40px; border-radius: 14px; box-shadow: var(--shadow); border: 0; }
.skin-modern #btnTheme { background: var(--surface); box-shadow: var(--shadow); border-radius: 14px; }

.skin-modern .navbar { border: 0; padding: 0 4px 10px; gap: 10px; }
.skin-modern .nav-btns { background: var(--surface); border-radius: 14px; padding: 3px; box-shadow: var(--shadow); }
.skin-modern .nb { border-radius: 11px; }
.skin-modern .address { background: var(--surface); border: 0; border-radius: 14px; height: 44px; box-shadow: var(--shadow); padding: 0 10px; }
.skin-modern .address .root-ico { color: var(--accent); }
.skin-modern .address button, .skin-modern .address span.current { border-radius: 9px; font-size: 14.5px; }
.skin-modern .search { background: var(--surface); border: 0; border-radius: 14px; height: 44px; width: 340px; box-shadow: var(--shadow); }
.skin-modern .search:focus-within { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }

.skin-modern .cmdbar { background: var(--surface); border: 0; border-radius: 18px; margin: 0 4px 12px; padding: 6px; box-shadow: var(--shadow); gap: 4px; }
.skin-modern .cmd { border-radius: 12px; font-weight: 600; }
.skin-modern .cmd-primary { background: linear-gradient(135deg, var(--accent), #7A5CF0); color: #fff; padding: 8px 16px 8px 12px; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.skin-modern .cmd-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent-hover), #6A4BE6); }
.skin-modern .cmd-sep { background: var(--line); }
.skin-modern .select, .skin-modern .seg { border-radius: 12px; border-color: var(--line); background: var(--surface-2); }
.skin-modern .seg button.on, .skin-modern .cmd-icon[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.skin-modern .win-body { gap: 12px; padding: 0 4px; overflow: visible; }
.skin-modern .navpane { background: var(--surface); border: 0; border-radius: 24px; box-shadow: var(--shadow); padding: 14px 10px; }
.skin-modern .np-label { font-size: 11.5px; font-weight: 700; color: var(--muted); margin: 14px 12px 6px; }
.skin-modern .nav a { border-radius: 12px; padding: 9px 12px; font-weight: 600; }
.skin-modern .nav a .i { width: 19px; height: 19px; }
.skin-modern .nav a.active { background: var(--accent); color: var(--accent-ink); }
.skin-modern .nav a.active .i { color: var(--accent-ink); }
.skin-modern .drv-row { border-radius: 14px; padding: 8px 10px; }
.skin-modern .drv-row.active { background: var(--accent-soft); }
.skin-modern .add-drive { border-radius: 14px; }
.skin-modern .tree .row { border-radius: 10px; }
.skin-modern .disk { border: 0; border-radius: 18px; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); }

.skin-modern .pane { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); }
.skin-modern .content { padding: 16px 16px 90px; }
.skin-modern .details { background: var(--surface); border: 0; border-radius: 24px; box-shadow: var(--shadow); }
.skin-modern .details .d-preview { border: 0; border-radius: 18px; background: var(--surface-2); }
.skin-modern .details .d-actions .btn { border-radius: 12px; border-color: var(--line); }
.skin-modern .statusbar { background: transparent; border: 0; padding: 8px 10px 0; }

/* isi folder: kotak besar berwarna sesuai jenis file */
.skin-modern .items.grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.skin-modern .it { align-items: stretch; padding: 8px 8px 10px; border-radius: 20px; border: 0; background: transparent; }
.skin-modern .it:hover { background: var(--surface-2); }
.skin-modern .it.selected { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.skin-modern .items.grid .it .ic {
  width: 100%; height: 108px; border-radius: 16px;
  background: color-mix(in srgb, var(--kind, var(--accent)) 13%, var(--surface-2));
}
.skin-modern .items.grid .it .ic svg.big { width: 60px; height: 60px; filter: drop-shadow(0 4px 8px rgba(20,23,43,.12)); }
.skin-modern .items.grid .it .ic img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; border: 0; border-radius: 16px; box-shadow: none; }
.skin-modern .items.grid .it .nm { text-align: left; font-weight: 600; font-size: 13.5px; padding: 0 4px; }
.skin-modern .it .star-badge { top: 14px; right: 16px; }
.skin-modern .it .shared-badge { top: 92px; right: 16px; }
.skin-modern .items.list .it { border-radius: 14px; min-height: 46px; }
.skin-modern .items.list .it:hover { background: var(--surface-2); }
.skin-modern .content.listing .list-head { background: var(--surface); }

.skin-modern .drv-card { border: 0; border-radius: 22px; background: var(--surface-2); box-shadow: none; }
.skin-modern .drv-card:hover { background: var(--accent-soft); }
.skin-modern .drv-add { background: transparent; border: 2px dashed var(--line); }

/* pemutar mengambang */
.skin-modern .player { margin: 12px 4px 0; border: 0; border-radius: 22px; box-shadow: var(--shadow); }
.skin-modern .pl-play { background: linear-gradient(135deg, var(--accent), #7A5CF0); color: #fff; }

/* menu, dialog, toast */
.skin-modern .menu { border: 0; border-radius: 18px; box-shadow: 0 20px 50px rgba(20,23,43,.18); padding: 8px; }
.skin-modern .menu button, .skin-modern .menu a { border-radius: 11px; font-weight: 500; }
.skin-modern .dlg { border: 0; border-radius: 26px; }
.skin-modern .toast { border-radius: 16px; }
.skin-modern .fab { border-radius: 20px; background: linear-gradient(135deg, var(--accent), #7A5CF0); color: #fff; }

/* dialog pilih model */
.dlg-skin { width: min(560px, calc(100vw - 24px)); }
.skin-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.skin-opt { display: grid; gap: 6px; text-align: left; padding: 10px 10px 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); }
.skin-opt small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.skin-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.skin-prev { position: relative; display: block; height: 110px; border-radius: 10px; overflow: hidden; margin-bottom: 4px; }
.skin-prev i, .skin-prev b { position: absolute; display: block; }
.skin-prev.classic { background: linear-gradient(160deg, #0E6B63, #0A3F3C); }
.skin-prev.classic i.t { left: 8px; right: 8px; top: 8px; height: 12px; background: #F7F8F6; border-radius: 6px 6px 0 0; }
.skin-prev.classic i.n { left: 8px; right: 8px; top: 20px; height: 9px; background: #fff; border-bottom: 1px solid #DCE2DD; }
.skin-prev.classic i.s { left: 8px; top: 29px; bottom: 8px; width: 28%; background: #F7F8F6; border-radius: 0 0 0 6px; }
.skin-prev.classic i.m { left: calc(8px + 28%); right: 8px; top: 29px; bottom: 8px; background: #fff; border-radius: 0 0 6px 0; }
.skin-prev.classic i.m b { width: 18px; height: 14px; background: #F2C35E; border-radius: 2px 4px 4px 4px; top: 10px; }
.skin-prev.classic i.m b:nth-child(1) { left: 10px; } .skin-prev.classic i.m b:nth-child(2) { left: 36px; }
.skin-prev.classic i.m b:nth-child(3) { left: 62px; } .skin-prev.classic i.m b:nth-child(4) { left: 10px; top: 36px; }
.skin-prev.modern { background: #ECEEF6; }
.skin-prev.modern i.s { left: 8px; top: 8px; bottom: 8px; width: 26%; background: #fff; border-radius: 10px; box-shadow: 0 2px 6px rgba(20,23,43,.08); }
.skin-prev.modern i.s::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 9px; border-radius: 5px; background: #5847E0; }
.skin-prev.modern i.m { left: calc(12px + 26%); right: 8px; top: 8px; bottom: 8px; background: #fff; border-radius: 10px; box-shadow: 0 2px 6px rgba(20,23,43,.08); }
.skin-prev.modern i.m b { width: 26px; height: 22px; border-radius: 7px; top: 12px; }
.skin-prev.modern i.m b:nth-child(1) { left: 10px; background: #DCD6FD; } .skin-prev.modern i.m b:nth-child(2) { left: 42px; background: #FFD9CC; }
.skin-prev.modern i.m b:nth-child(3) { left: 74px; background: #D3F0E2; } .skin-prev.modern i.m b:nth-child(4) { left: 10px; top: 44px; background: #DDE8FF; }

/* ---------- Modern di HP ---------- */
@media (max-width: 900px) {
  .skin-modern .desk { padding: 0; }
  .skin-modern .win { height: 100vh; height: 100dvh; }
  .skin-modern .titlebar { padding: 10px 10px 8px; }
  .skin-modern .win-title { font-size: 22px; }
  .skin-modern .navbar { padding: 0 10px 8px; }
  .skin-modern .search { width: auto; }
  .skin-modern .cmdbar { margin: 0 10px 10px; }
  .skin-modern .win-body { padding: 0; }
  .skin-modern .pane { border-radius: 24px 24px 0 0; }
  .skin-modern .navpane { border-radius: 0 24px 24px 0; }
  .skin-modern .content { padding: 12px 10px 120px; }
  .skin-modern .items.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .skin-modern .items.grid .it .ic { height: 96px; }
  .skin-modern .statusbar { display: none; }
  .skin-modern .fab { display: none; }
  .skin-modern .player { margin: 0 8px 76px; }
  .skin-modern .uploads { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .skin-modern .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 35;
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 22px; box-shadow: 0 10px 30px rgba(20,23,43,.18); padding: 6px;
  }
  .skin-modern .bottom-nav a {
    display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 14px;
    color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600;
  }
  .skin-modern .bottom-nav a .i { width: 21px; height: 21px; }
  .skin-modern .bottom-nav a.active { color: var(--accent); background: var(--accent-soft); }
  .skin-modern .bn-plus {
    justify-self: center; width: 52px; height: 52px; border: 0; border-radius: 18px; margin-top: -22px;
    background: linear-gradient(135deg, var(--accent), #FF7F57); color: #fff; display: grid; place-items: center;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .skin-modern .bn-plus .i { width: 26px; height: 26px; stroke-width: 2.3; }
  .skin-modern.playing .bottom-nav, .skin-modern .desk.playing .bottom-nav { }
  .skin-opts { grid-template-columns: 1fr; }
}

/* =====================================================================
   MODEL TAMPILAN CANDY
   Layout kartu pastel dengan aksen permen, ikon lebih bulat, dan
   navigasi yang terasa ringan. Candy tetap memakai layar aplikasi utama,
   tetapi seluruh chrome dan isi folder memiliki bahasa visual tersendiri.
   ===================================================================== */
.skin-candy {
  --bg: #FFF8F3; --surface: #FFFEFC; --surface-2: #FFF0F2; --ink: #493342; --muted: #896E7C; --line: #F0D7DF;
  --accent: #D85B91; --accent-hover: #B94778; --accent-ink: #FFFFFF; --accent-soft: #FADCE9;
  --folder-back: #E8A0B8; --folder-front: #FFD0DD; --folder: #FFE9EF; --folder-hover: #FBD8E4; --folder-tab: #F7C2D4;
  --paper: #FFFEFC; --paper-fold: #F7DDE3; --paper-line: #E4C2CF; --marigold: #F0A65A;
  --danger: #C84A58; --danger-soft: #FCE2E5; --shadow: 0 8px 28px rgba(182,83,126,.13);
  --k-folder: #F38DAE; --k-image: #F28C72; --k-video: #A68BE4; --k-audio: #69B9D0; --k-pdf: #E96C79;
  --k-sheet: #78B985; --k-doc: #7194D4; --k-archive: #D0A05C; --k-code: #82909C; --k-slides: #E7A05F; --k-file: #896E7C;
  --font-display: "Nunito", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-body: "Nunito", "Atkinson Hyperlegible", system-ui, sans-serif;
  background: var(--bg);
}
.skin-candy body { background: radial-gradient(circle at 0 0, #FFE1EE 0, transparent 28%), radial-gradient(circle at 100% 0, #DDF8F0 0, transparent 25%), var(--bg); }
.skin-candy .desk { background: transparent; padding: 18px; }
.skin-candy .win { border: 3px solid #FFFFFF; border-radius: 30px; box-shadow: 0 18px 50px rgba(184,91,137,.16); overflow: hidden; }
.skin-candy .titlebar { background: linear-gradient(90deg, #FFF1F6, #F0FFF9); border-bottom: 2px solid var(--line); min-height: 58px; }
.skin-candy .brand-mark.small { width: 38px; height: 38px; border-radius: 50% 45% 55% 48%; background: linear-gradient(135deg, #F88DB5 15%, #FFD36E 55%, #8EDFCC); box-shadow: 0 5px 12px rgba(216,91,145,.25); transform: rotate(-8deg); }
.skin-candy .brand-mark.small::before { background: #FFFFFF; width: 9px; height: 9px; left: 9px; top: 9px; box-shadow: 14px 8px 0 #FFFFFF; opacity: .85; }
.skin-candy .win-title { color: #A83D70; font-weight: 900; }
.skin-candy .avatar-btn, .skin-candy #btnTheme { border: 2px solid #FFFFFF; box-shadow: 0 5px 14px rgba(184,83,126,.15); }
.skin-candy .navbar { background: #FFFFFFB8; border-radius: 18px; margin: 10px 12px 0; padding: 7px; border: 1px solid #FFFFFF; }
.skin-candy .nav-btns, .skin-candy .address, .skin-candy .search { border: 2px solid var(--line); border-radius: 18px; background: var(--surface); }
.skin-candy .nb, .skin-candy .cmd, .skin-candy .seg button { border-radius: 14px; }
.skin-candy .cmdbar { margin: 10px 12px; border: 2px solid #FFFFFF; border-radius: 22px; background: #FFFFFFA8; box-shadow: var(--shadow); }
.skin-candy .cmd-primary { border-radius: 16px; background: linear-gradient(135deg, #D85B91, #F18B9F); box-shadow: 0 7px 15px rgba(216,91,145,.22); }
.skin-candy .win-body { gap: 14px; padding: 0 12px 12px; }
.skin-candy .navpane, .skin-candy .pane, .skin-candy .details { border: 2px solid #FFFFFF; border-radius: 24px; box-shadow: var(--shadow); }
.skin-candy .navpane { background: #FFF5F8; }
.skin-candy .nav a, .skin-candy .drv-row, .skin-candy .tree .row { border-radius: 15px; }
.skin-candy .nav a.active { background: linear-gradient(135deg, #D85B91, #F18B9F); color: #FFFFFF; }
.skin-candy .content { padding: 14px 16px 24px; }
.skin-candy .items.grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 15px; }
.skin-candy .it { padding: 9px; border: 2px solid transparent; border-radius: 24px; background: #FFFFFFA8; }
.skin-candy .it:hover { background: #FFF0F5; border-color: #F6C7D8; transform: translateY(-2px); }
.skin-candy .it.selected { background: #FADCE9; border-color: var(--accent); box-shadow: 0 8px 18px rgba(216,91,145,.17); }
.skin-candy .items.grid .it .ic { width: 100%; height: 102px; border-radius: 29px 18px 29px 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--kind, var(--accent)) 24%, #FFFFFF), #FFF7FA); border: 2px solid #FFFFFF; }
.skin-candy .items.grid .it .ic::after { content: "✦"; position: absolute; right: 12px; top: 8px; color: #F2A0BC; font-size: 18px; }
.skin-candy .items.grid .it .ic svg.big { width: 62px; height: 62px; filter: drop-shadow(0 6px 6px rgba(168,61,112,.14)); }
.skin-candy .items.grid .it .nm { font-weight: 800; color: #5A3A4B; }
.skin-candy .drv-card { border: 2px solid #FFFFFF; border-radius: 25px; background: #FFF4F7; box-shadow: var(--shadow); }
.skin-candy .drv-card:hover { background: #FADCE9; }
.skin-candy .statusbar { background: #FFF0F5; border-top: 2px solid #FFFFFF; }
.skin-candy .menu, .skin-candy .dlg { border: 2px solid #FFFFFF; border-radius: 24px; box-shadow: 0 18px 45px rgba(137,70,105,.2); }
.skin-candy .fab { border-radius: 50%; background: linear-gradient(135deg, #D85B91, #F18B9F); }

/* preview pemilih model */
.skin-prev.candy { background: linear-gradient(135deg, #FFD3E2, #DDF7EE); }
.skin-prev.candy i.c1, .skin-prev.candy i.c2, .skin-prev.candy i.c3, .skin-prev.candy i.c4 { width: 38px; height: 30px; border-radius: 13px 8px 13px 8px; box-shadow: 0 3px 5px #B96E8A44; }
.skin-prev.candy i.c1 { left: 16px; top: 22px; background: #F38EAF; }
.skin-prev.candy i.c2 { left: 61px; top: 22px; background: #FFD36E; }
.skin-prev.candy i.c3 { left: 106px; top: 22px; background: #8EDFCC; }
.skin-prev.candy i.c4 { left: 38px; top: 62px; background: #A995E8; }
.skin-prev.candy i.cb { left: 150px; top: 64px; width: 28px; height: 28px; border-radius: 50%; background: #D85B91; }

/* =====================================================================
   VENA DI DALAM JENDELA / PANEL (mode tertanam)
   ===================================================================== */
.pane-drives { display: none; }
html.embed body { background: var(--surface); }
html.embed .desk { padding: 0 !important; background: var(--surface) !important; }
html.embed .win { height: 100vh !important; height: 100dvh !important; border-radius: 0 !important; box-shadow: none !important; background: var(--surface) !important; }
html.embed .titlebar, html.embed .navpane, html.embed .scrim, html.embed .fab,
html.embed .bottom-nav, html.embed #btnDetails, html.embed .details { display: none !important; }
html.embed .win-body { grid-template-columns: minmax(0, 1fr) !important; }
html.embed .navbar { padding: 6px 8px; gap: 6px; }
html.embed .nb { width: 32px; height: 32px; }
html.embed .address { height: 34px; }
html.embed .search { height: 34px; width: 220px; }
html.embed .cmdbar { padding: 4px 6px; }
html.embed .cmd { padding: 6px 9px; font-size: 13.5px; }
html.embed .statusbar { min-height: 26px; padding: 3px 12px; }
html.embed .status-legal { display: none; }
html.embed .content { padding: 10px 12px 40px; }
@media (max-width: 700px) { html.embed .search { width: 140px; } html.embed .cmdbar .cmd span { display: none; } }

/* panel Dua panel: daftar rapat ala Commander */
html.embed-pane .cmdbar { display: none; }
html.embed-pane .pane-drives { display: flex; gap: 3px; flex: none; }
html.embed-pane .pane-drives button {
  min-width: 34px; height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-2); font: 700 12.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--ink);
}
html.embed-pane .pane-drives button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html.embed-pane .nav-btns [data-action="refresh"], html.embed-pane #navFwd { display: none; }
html.embed-pane .navbar { flex-wrap: nowrap; }
html.embed-pane .search { width: 150px; }
html.embed-pane .content { padding: 0 0 30px; }
html.embed-pane .items.list .it { border-radius: 0; min-height: 30px; }
html.embed-pane .items.list .it .nm { padding: 3px 10px; font-size: 13.5px; }
html.embed-pane .items.list .it .col { padding: 3px 10px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
html.embed-pane .items.list .it.selected { background: var(--accent); color: var(--accent-ink); }
html.embed-pane .items.list .it.selected .col { color: var(--accent-ink); }
html.embed-pane .content.listing .list-head { margin: 0 0 2px; top: 0; padding: 0; }
html.embed-pane .list-head button { padding: 6px 10px; font-size: 12px; }
html.embed-pane .statusbar { font: 12px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
html.embed-pane .selection-bar, html.embed-pane #trashNote { margin: 6px; }

/* =====================================================================
   MODEL DESKTOP OS
   ===================================================================== */
.os {
  position: fixed; inset: 0; overflow: hidden; user-select: none;
  background:
    radial-gradient(900px 600px at 78% 18%, rgba(255,196,120,.55), transparent 60%),
    radial-gradient(1000px 800px at 10% 100%, rgba(80,170,160,.55), transparent 60%),
    linear-gradient(160deg, #1D5C74 0%, #173E5A 45%, #1B2945 100%);
}
:root[data-theme="dark"] .os { background: radial-gradient(900px 600px at 78% 18%, rgba(255,196,120,.18), transparent 60%), linear-gradient(160deg, #0E2230, #0A1220); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .os { background: radial-gradient(900px 600px at 78% 18%, rgba(255,196,120,.18), transparent 60%), linear-gradient(160deg, #0E2230, #0A1220); } }
.os-icons {
  position: absolute; left: 10px; top: 10px; bottom: 58px; display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 104px); grid-auto-columns: 96px; gap: 4px; align-content: start;
}
.os-icon {
  display: grid; justify-items: center; align-content: start; gap: 6px; padding: 8px 4px; border: 1px solid transparent;
  border-radius: 8px; background: none; color: #fff; text-align: center; cursor: default;
}
.os-icon:hover { background: rgba(255,255,255,.12); }
.os-icon.sel { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); }
.os-icon-img { width: 56px; height: 46px; display: grid; place-items: center; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.os-icon-img.sp { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.92); color: #1D5C74; }
.os-icon-img.sp .i { width: 26px; height: 26px; }
.os-disk { width: 56px; height: 42px; }
.os-icon-lbl { font-size: 12.5px; line-height: 1.25; text-shadow: 0 1px 3px rgba(0,0,0,.7); max-width: 92px; overflow-wrap: anywhere; }
.os-icon.drop-hover { outline: 2px solid #fff !important; background: rgba(255,255,255,.25) !important; }

.os-windows { position: absolute; inset: 0 0 48px 0; pointer-events: none; }
.os-windows.dragging iframe { pointer-events: none; }
.dwin {
  position: absolute; display: flex; flex-direction: column; pointer-events: auto;
  background: var(--surface); border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 18px 50px rgba(0,0,0,.45);
}
.dwin.active { box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 24px 70px rgba(0,0,0,.6); }
.dwin.min { display: none; }
.dwin.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.dwin-bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 0 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); cursor: default; }
.dwin:not(.active) .dwin-bar { opacity: .8; }
.dwin-ico { color: var(--folder-back); display: grid; }
.dwin-ico .i { width: 17px; height: 17px; }
.dwin-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwin-btn { width: 44px; height: 36px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; }
.dwin-btn:hover { background: var(--line); }
.dwin-btn.close:hover { background: #E81123; color: #fff; }
.dwin-btn .i { width: 15px; height: 15px; }
.dwin-body { flex: 1; min-height: 0; }
.dwin-body iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--surface); }
.dwin-rs { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.dwin-rs::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); opacity: .6; }
.dwin.max .dwin-rs { display: none; }

.os-taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: rgba(16, 24, 32, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #fff; z-index: 9000;
  border-top: 1px solid rgba(255,255,255,.08);
}
.os-startbtn { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font-weight: 700; }
.os-startbtn:hover { background: rgba(255,255,255,.18); }
.os-logo { width: 22px; height: 17px; border-radius: 2px 5px 5px 5px; background: linear-gradient(135deg, #F3C66B, #5BBFB2); position: relative; }
.os-logo::before { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 5px; border-radius: 3px 3px 0 0; background: #F3C66B; }
.os-tasks { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.os-task {
  display: flex; align-items: center; gap: 8px; max-width: 200px; height: 38px; padding: 0 12px; flex: none;
  border: 0; border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; font-size: 13px; position: relative;
}
.os-task span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-task .i { width: 16px; height: 16px; color: #F3C66B; flex: none; }
.os-task:hover { background: rgba(255,255,255,.14); }
.os-task.on { background: rgba(255,255,255,.2); }
.os-task::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 3px; height: 3px; border-radius: 3px; background: #5BBFB2; }
.os-task.min::after { left: 44%; right: 44%; background: rgba(255,255,255,.5); }
.os-tray { display: flex; align-items: center; gap: 14px; padding: 0 8px; font-size: 12.5px; white-space: nowrap; }
.os-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.os-free { opacity: .8; }

.os-start {
  position: absolute; left: 8px; bottom: 56px; width: min(380px, calc(100vw - 16px)); max-height: calc(100vh - 72px); overflow-y: auto; z-index: 9001;
  background: var(--surface); color: var(--ink); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.5); padding: 14px;
}
.os-start-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); }
.os-start-head span:last-child { display: grid; }
.os-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.os-start-label { margin: 12px 6px 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.os-start-drives { display: grid; gap: 4px; }
.os-start-drives button, .os-start-places button, .os-start-actions button {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 9px; text-align: left; color: var(--ink); font-size: 14px;
}
.os-start-drives button:hover, .os-start-places button:hover, .os-start-actions button:hover { background: var(--accent-soft); }
.os-start-drives span { display: grid; }
.os-start-drives small { color: var(--muted); font-size: 12px; }
.os-sdisk { width: 34px; height: 26px; flex: none; }
.os-start-places { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.os-start-places .i, .os-start-actions .i { width: 18px; height: 18px; color: var(--muted); }
.os-start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.os-start-actions .danger, .os-start-actions .danger .i { color: var(--danger); }
.os-start-foot { margin: 12px 6px 0; color: var(--muted); }

/* Desktop di HP: jendela selalu penuh, ikon lebih besar */
.os.os-mobile .os-icons { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 86px); grid-template-rows: none; grid-auto-rows: 100px; right: 10px; justify-content: center; }
.os.os-mobile .dwin { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.os.os-mobile .dwin-btn[data-wact="max"], .os.os-mobile .dwin-rs { display: none; }
.os.os-mobile .os-startbtn span:last-child, .os.os-mobile .os-free { display: none; }
.os.os-mobile .os-task { max-width: 120px; }

/* =====================================================================
   MODEL DUA PANEL (Commander)
   ===================================================================== */
.cmdr { position: fixed; inset: 0; display: flex; flex-direction: column; background: #1E2A33; color: #E8EEF1; }
.cmdr-head { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 12px; background: #15202A; border-bottom: 1px solid #0E161D; }
.cmdr-logo { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: #F3C66B; color: #15202A; font: 800 14px ui-monospace, Menlo, Consolas, monospace; }
.cmdr-head strong { font-size: 15px; }
.cmdr-sub { font: 12px ui-monospace, Menlo, Consolas, monospace; color: #8FA3B0; padding: 2px 8px; border: 1px solid #2D3D49; border-radius: 4px; }
.cmdr-free { font: 12px ui-monospace, Menlo, Consolas, monospace; color: #8FA3B0; margin-right: 6px; }
.cmdr-hbtn { width: 34px; height: 34px; border: 0; border-radius: 6px; background: none; color: #C9D6DD; display: grid; place-items: center; }
.cmdr-hbtn:hover { background: #2A3A46; color: #fff; }
.cmdr-hbtn .i { width: 18px; height: 18px; }
.cmdr-tabs { display: none; }
.cmdr-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; }
.cmdr-pane { position: relative; min-width: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #0E161D; background: var(--surface); }
.cmdr-pane.active { box-shadow: 0 0 0 2px #F3C66B; }
.cmdr-pane::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent; z-index: 2; }
.cmdr-pane.active::before { background: #F3C66B; }
.cmdr-pane iframe { width: 100%; height: 100%; border: 0; display: block; }
.cmdr-fbar { display: flex; align-items: stretch; gap: 3px; padding: 4px; background: #15202A; overflow-x: auto; }
.cmdr-fbar button {
  display: flex; align-items: center; gap: 7px; flex: 1 0 auto; justify-content: center; height: 36px; padding: 0 12px;
  border: 0; border-radius: 5px; background: #24333F; color: #E8EEF1; font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.cmdr-fbar button:hover { background: #2F4352; }
.cmdr-fbar button.danger { color: #FF9C93; }
.cmdr-fbar kbd { font: 700 11.5px ui-monospace, Menlo, Consolas, monospace; color: #15202A; background: #F3C66B; border-radius: 3px; padding: 2px 5px; }
.cmdr-fbar .arrow { color: #F3C66B; font-weight: 800; }
.cmdr-hint { align-self: center; padding: 0 10px; font: 12px ui-monospace, Menlo, Consolas, monospace; color: #8FA3B0; white-space: nowrap; }
@media (max-width: 760px) {
  .cmdr-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px 4px 0; }
  .cmdr-tabs button { height: 34px; border: 0; border-radius: 6px 6px 0 0; background: #24333F; color: #C9D6DD; font-weight: 700; }
  .cmdr-tabs button.on { background: #F3C66B; color: #15202A; }
  .cmdr-panes { grid-template-columns: 1fr; padding-top: 0; }
  .cmdr-pane { display: none; }
  .cmdr-pane.active { display: block; }
  .cmdr-fbar button { flex: 0 0 auto; padding: 0 10px; }
  .cmdr-hint, .cmdr-free, .cmdr-sub { display: none; }
  .cmdr-fbar { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
}

/* pratinjau model di dialog */
.skin-opts { grid-template-columns: repeat(3, 1fr); }
.skin-prev.desktop { background: linear-gradient(160deg, #1D5C74, #1B2945); }
.skin-prev.desktop i.ic1, .skin-prev.desktop i.ic2 { left: 8px; width: 16px; height: 13px; border-radius: 3px; background: #F2C35E; }
.skin-prev.desktop i.ic1 { top: 10px; } .skin-prev.desktop i.ic2 { top: 32px; background: #8BD07A; }
.skin-prev.desktop i.w1 { left: 34px; top: 10px; width: 60%; height: 52%; background: #fff; border-radius: 4px; border-top: 7px solid #DCE2DD; }
.skin-prev.desktop i.w2 { left: 54px; top: 34px; width: 52%; height: 44%; background: #F7F8F6; border-radius: 4px; border-top: 7px solid #C4DAD4; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.skin-prev.desktop i.tb { left: 0; right: 0; bottom: 0; height: 12px; background: rgba(16,24,32,.85); }
.skin-prev.commander { background: #1E2A33; }
.skin-prev.commander i.p1, .skin-prev.commander i.p2 { top: 6px; bottom: 20px; width: calc(50% - 9px); background:
   repeating-linear-gradient(#fff 0 9px, #EEF2EF 9px 10px); border-radius: 3px; }
.skin-prev.commander i.p1 { left: 6px; box-shadow: 0 0 0 2px #F3C66B; } .skin-prev.commander i.p2 { right: 6px; }
.skin-prev.commander i.fb { left: 6px; right: 6px; bottom: 5px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(90deg, #F3C66B 0 10px, #24333F 10px 26px); }
@media (max-width: 560px) { .skin-opts { grid-template-columns: 1fr; } .skin-prev { height: 90px; } }
.os { z-index: 1; }
.dlg-skin { width: min(760px, calc(100vw - 24px)); }
html.skin-desktop .uploads { bottom: 60px; }
html.skin-desktop .toasts { bottom: 62px; }
html.skin-commander .toasts { bottom: 54px; }
html.skin-commander .uploads { bottom: 54px; }

/* Recovery password tersembunyi */
.version-secret{border:0;background:none;color:inherit;font:inherit;padding:0;cursor:pointer}.recovery-question{font-weight:700;padding:12px;border-radius:10px;background:var(--surface-2)}

/* =====================================================================
   CANDY 2.0 — arsitektur candy shelf, bukan Classic berwarna
   ===================================================================== */
html.skin-candy body{background:#fff4f7;background-image:radial-gradient(#f3b8cf 1.5px,transparent 1.5px),radial-gradient(#bde9de 1.5px,transparent 1.5px);background-position:0 0,18px 18px;background-size:36px 36px}
.skin-candy .desk{padding:24px;background:transparent}
.skin-candy .win{display:flex;flex-direction:column;gap:0;max-width:1500px;margin:0 auto;border:0;border-radius:34px;background:#fffafc;box-shadow:0 24px 70px rgba(136,74,112,.22);overflow:hidden}
.skin-candy .titlebar{min-height:82px;padding:16px 24px;background:linear-gradient(110deg,#ffcadc 0%,#ffe7ad 47%,#c9f2e6 100%);border:0;position:relative;overflow:hidden}
.skin-candy .titlebar:after{content:"";position:absolute;width:180px;height:180px;right:110px;top:-112px;border-radius:50%;background:#fff8;box-shadow:170px 42px 0 -26px #fff7,270px 80px 0 -48px #fff8}
.skin-candy .brand-mark.small{z-index:1;width:46px;height:46px;border-radius:16px 25px 18px 26px;background:#fff;box-shadow:6px 7px 0 #d85b9166;transform:rotate(-7deg)}
.skin-candy .brand-mark.small:before{background:#d85b91;width:15px;height:8px;top:-6px;border-radius:7px 7px 0 0}
.skin-candy .win-title{z-index:1;font-size:24px;color:#7e315e;letter-spacing:-.04em}
.skin-candy #btnTheme,.skin-candy .avatar-btn{z-index:2;width:44px;height:44px;border:0;background:#ffffffaa;border-radius:16px;color:#7e315e}
.skin-candy .navbar{display:grid;grid-template-columns:auto minmax(180px,1fr) minmax(220px,360px);gap:12px;align-items:center;margin:0;padding:14px 22px;background:#fffafc;border:0}
.skin-candy .nav-btns{display:flex;gap:6px;padding:6px;background:#fbe4ed;border:0;border-radius:18px}
.skin-candy .nb{width:36px;height:36px;border-radius:12px;color:#9b4f77}
.skin-candy .nb:hover{background:#fff}
.skin-candy .address,.skin-candy .search{height:48px;border:2px solid #f5d6e1;border-radius:17px;background:#fff;box-shadow:none}
.skin-candy .address{padding:0 16px;color:#88476b;font-weight:800}
.skin-candy .search{padding:0 14px}
.skin-candy .search input{font-weight:700;color:#70445b}
.skin-candy .cmdbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 22px 16px;padding:11px 13px;border:0;border-radius:22px;background:#f8e9ef;box-shadow:none}
.skin-candy .cmd{min-height:38px;padding:8px 13px;border:0;border-radius:14px;background:#fff;color:#80516a;font-weight:800;box-shadow:0 3px 0 #ead0db}
.skin-candy .cmd:hover{background:#fff2f6;transform:translateY(-1px)}
.skin-candy .cmd-primary{background:#d85b91;color:#fff;box-shadow:0 4px 0 #ad416f}
.skin-candy .cmd.danger{background:#ffe2e5;color:#b44956;box-shadow:0 3px 0 #f1c5cc}
.skin-candy .cmd-sep{display:none}
.skin-candy .sort-wrap{margin-left:auto}
.skin-candy .select{border:0;border-radius:13px;background:#fff;padding:9px 12px;color:#80516a;font-weight:800}
.skin-candy .seg{padding:4px;border-radius:15px;background:#fff0f5}
.skin-candy .seg button{border-radius:11px}
.skin-candy .win-body{grid-template-columns:236px minmax(0,1fr) 238px;gap:16px;padding:0 22px 18px;min-height:0;background:#fffafc}
.skin-candy .navpane{border:0;border-radius:26px;background:#f9eaf0;padding:18px 13px;box-shadow:none}
.skin-candy .np-label{padding:0 10px;color:#ad6689;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:900}
.skin-candy .nav a{margin:4px 0;padding:12px 13px;border-radius:16px;color:#80516a;font-weight:800}
.skin-candy .nav a:hover{background:#fff5f8}
.skin-candy .nav a.active{background:#d85b91;color:#fff;box-shadow:0 5px 0 #b94778}
.skin-candy .drive-list,.skin-candy .tree{padding:4px 0}
.skin-candy .drv-row,.skin-candy .tree .row{border-radius:13px;color:#80516a}
.skin-candy .add-drive{border:2px dashed #e9b6ca;border-radius:15px;background:transparent;color:#ad6689;font-weight:800}
.skin-candy .disk{margin-top:16px;border:0;border-radius:20px;background:#fff;padding:12px;box-shadow:0 5px 14px #d98aaa22}
.skin-candy .pane{border:0;border-radius:28px;background:#fff;box-shadow:0 7px 24px #d98aaa18;overflow:auto}
.skin-candy .content{padding:20px 22px 28px}
.skin-candy .list-head{border:0;color:#bd7798;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.skin-candy .items.grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:17px}
.skin-candy .items.grid .it{min-height:166px;padding:12px;border:0;border-radius:25px;background:#fff7fa;box-shadow:0 5px 0 #f0d7e0;transition:transform .16s,box-shadow .16s,background .16s}
.skin-candy .items.grid .it:nth-child(3n+1){background:#fff1f5}.skin-candy .items.grid .it:nth-child(3n+2){background:#fff8e7}.skin-candy .items.grid .it:nth-child(3n){background:#edfbf7}
.skin-candy .items.grid .it:hover{transform:rotate(-1deg) translateY(-4px);box-shadow:0 10px 0 #eccbd8}
.skin-candy .items.grid .it.selected{outline:3px solid #d85b91;outline-offset:2px;background:#ffe0eb;box-shadow:0 7px 0 #dca0b8}
.skin-candy .items.grid .it .ic{height:102px;border:0;border-radius:22px;background:transparent}
.skin-candy .items.grid .it .ic:before{content:"";position:absolute;width:72px;height:72px;border-radius:28px 42px 32px 40px;background:#fff8;transform:rotate(12deg)}
.skin-candy .items.grid .it .ic:after{content:"✦";right:10px;top:4px;color:#d85b91;font-size:20px}
.skin-candy .items.grid .it .ic svg.big{position:relative;width:58px;height:58px;filter:none}
.skin-candy .items.grid .it .nm{padding:5px 4px 0;text-align:left;font-weight:900;color:#634255;line-height:1.25}
.skin-candy .items.grid .it .col{color:#a77b90}
.skin-candy .details{border:0;border-radius:26px;background:#fff0f5;box-shadow:none;padding:16px}
.skin-candy .details:empty{background:#f9eaf0}
.skin-candy .statusbar{margin:0;border:0;background:#fbe4ed;color:#97617d;padding:11px 22px;font-weight:800}
.skin-candy .menu,.skin-candy .dlg{border:0;border-radius:27px;box-shadow:0 24px 70px rgba(112,52,87,.25)}
.skin-candy .menu button{border-radius:13px;color:#80516a;font-weight:700}
.skin-candy .menu button:hover{background:#ffe5ef}
.skin-candy .fab{background:#d85b91;box-shadow:0 7px 0 #ad416f}
@media (max-width:900px){
  .skin-candy .desk{padding:0}.skin-candy .win{border-radius:0;min-height:100dvh}.skin-candy .navbar{grid-template-columns:auto 1fr; padding:10px 12px}.skin-candy .address{grid-column:1/-1;order:3}.skin-candy .search{grid-column:1/-1;order:4}.skin-candy .cmdbar{margin:0 12px 10px;overflow-x:auto;flex-wrap:nowrap}.skin-candy .cmd{white-space:nowrap}.skin-candy .win-body{grid-template-columns:minmax(0,1fr);padding:0 10px 12px}.skin-candy .navpane{border-radius:0 26px 26px 0}.skin-candy .items.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.skin-candy .items.grid .it{min-height:142px}.skin-candy .details{display:none}.skin-candy .statusbar{padding:9px 12px}.skin-candy .titlebar{min-height:68px;padding:11px 13px}}

/* Candy: dialog model selalu terbaca dan tidak tertutup oleh layout aplikasi */
html.skin-candy .dlg-skin{z-index:200;position:fixed;width:min(900px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;background:#fffafc;color:#493342;border:3px solid #fff;outline:0;padding:22px;display:block}
html.skin-candy .dlg-skin:not([open]){display:none}
html.skin-candy .dlg-skin h3{color:#7e315e;font-size:23px}
html.skin-candy .dlg-skin>form{display:block}
html.skin-candy .dlg-skin .muted,html.skin-candy .dlg-skin small{color:#795d6d}
html.skin-candy .dlg-skin .skin-opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
html.skin-candy .dlg-skin .skin-opt{min-width:0;background:#fff;color:#493342;border:2px solid #f0d7df;border-radius:22px;padding:12px;text-align:left;box-shadow:0 4px 0 #efd6df}
html.skin-candy .dlg-skin .skin-opt:hover{background:#fff3f7;border-color:#d85b91;transform:translateY(-2px)}
html.skin-candy .dlg-skin .skin-opt strong{display:block;color:#713b5a;font-size:16px;margin-top:7px}
html.skin-candy .dlg-skin .skin-opt small{display:block;color:#795d6d;font-size:12px;line-height:1.35;margin-top:3px}
html.skin-candy .dlg-skin .skin-opt[aria-pressed="true"]{border-color:#d85b91;box-shadow:0 0 0 3px #fadce9,0 4px 0 #dca0b8}
html.skin-candy .dlg-skin .dlg-actions{margin-top:18px;border-top:1px solid #f0d7df;padding-top:15px}
html.skin-candy .dlg-skin .btn-primary{background:#d85b91;color:#fff}

/* Candy dark: bukan hanya latar belakang, seluruh permukaan ikut berubah */
html.skin-candy[data-theme="dark"]{--bg:#211827;--surface:#302238;--surface-2:#3c2945;--ink:#fff1f8;--muted:#d6b8cb;--line:#60415d;--accent:#f18bb8;--accent-hover:#ffacd0;--accent-ink:#32172a;--accent-soft:#56334f;--danger:#ff9fa9;--danger-soft:#512b39;--shadow:0 10px 32px rgba(0,0,0,.35)}
html.skin-candy[data-theme="dark"] body{background-color:#211827;background-image:radial-gradient(#6b3b62 1.5px,transparent 1.5px),radial-gradient(#315b57 1.5px,transparent 1.5px)}
html.skin-candy[data-theme="dark"] .win,html.skin-candy[data-theme="dark"] .navbar,html.skin-candy[data-theme="dark"] .pane{background:#2b2033;color:var(--ink)}
html.skin-candy[data-theme="dark"] .titlebar{background:linear-gradient(110deg,#643654,#554126,#27544d)}
html.skin-candy[data-theme="dark"] .win-title,html.skin-candy[data-theme="dark"] .address,html.skin-candy[data-theme="dark"] .search input{color:#fff1f8}
html.skin-candy[data-theme="dark"] .nav-btns,html.skin-candy[data-theme="dark"] .cmdbar,html.skin-candy[data-theme="dark"] .statusbar{background:#3c2945;color:#f8dce9}
html.skin-candy[data-theme="dark"] .navpane{background:#38263f;color:var(--ink)}
html.skin-candy[data-theme="dark"] .nav a,html.skin-candy[data-theme="dark"] .drv-row,html.skin-candy[data-theme="dark"] .tree .row{color:#f3d7e7}
html.skin-candy[data-theme="dark"] .nav a:hover,html.skin-candy[data-theme="dark"] .cmd:hover{background:#50324f}
html.skin-candy[data-theme="dark"] .cmd,html.skin-candy[data-theme="dark"] .select,html.skin-candy[data-theme="dark"] .address,html.skin-candy[data-theme="dark"] .search{background:#46304b;border-color:#684660;color:#ffeaf5}
html.skin-candy[data-theme="dark"] .cmd-primary{background:#d85b91;color:#fff}
html.skin-candy[data-theme="dark"] .details{background:#3b2944;color:var(--ink)}
html.skin-candy[data-theme="dark"] .items.grid .it,html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n+1),html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n+2),html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n){background:#3b2944;box-shadow:0 5px 0 #241929}
html.skin-candy[data-theme="dark"] .items.grid .it:hover{background:#50324f}
html.skin-candy[data-theme="dark"] .items.grid .it .nm{color:#fff1f8}
html.skin-candy[data-theme="dark"] .items.grid .it .col,html.skin-candy[data-theme="dark"] .list-head{color:#d6b8cb}
html.skin-candy[data-theme="dark"] .disk{background:#46304b;color:var(--ink)}
html.skin-candy[data-theme="dark"] .menu,html.skin-candy[data-theme="dark"] .dlg{background:#302238;color:#fff1f8;border-color:#684660}
html.skin-candy[data-theme="dark"] .dlg-skin{background:#302238;color:#fff1f8}
html.skin-candy[data-theme="dark"] .dlg-skin h3,html.skin-candy[data-theme="dark"] .dlg-skin .skin-opt strong{color:#ffd3e7}
html.skin-candy[data-theme="dark"] .dlg-skin .muted,html.skin-candy[data-theme="dark"] .dlg-skin small{color:#d6b8cb}
html.skin-candy[data-theme="dark"] .dlg-skin .skin-opt{background:#46304b;color:#fff1f8;border-color:#684660;box-shadow:0 4px 0 #241929}
html.skin-candy[data-theme="dark"] .dlg-skin .skin-opt:hover{background:#563651}
@media(max-width:560px){html.skin-candy .dlg-skin .skin-opts{grid-template-columns:1fr}}

/* Candy overlay fix: menu akun dan dialog tidak boleh terpotong header */
html.skin-candy .win{overflow:visible}
html.skin-candy .titlebar{overflow:visible;z-index:80}
html.skin-candy .account{position:relative;z-index:120}
html.skin-candy #menuAccount{z-index:300;position:absolute;right:0;top:calc(100% + 8px);max-height:calc(100dvh - 100px);overflow:auto}
html.skin-candy .dlg-skin{z-index:1000}
html.skin-candy::backdrop{z-index:900}

/* Candy eye-comfort palette: pastel desaturasi, kontras lembut, ikon bubble */
html.skin-candy{--bg:#f2f0ee;--surface:#fbfaf8;--surface-2:#f1efed;--ink:#41434a;--muted:#74747a;--line:#ddd9d7;--accent:#7e718d;--accent-hover:#695d78;--accent-ink:#fff;--accent-soft:#e7e1ea;--folder-back:#b89da9;--folder-front:#d8c3cb;--folder:#eee7e9;--folder-hover:#e6dce0;--folder-tab:#d5c3cb;--danger:#a86e75;--danger-soft:#f2e1e2;--shadow:0 8px 26px rgba(74,68,75,.10)}
html.skin-candy body{background:#f2f0ee;background-image:radial-gradient(#d8ced0 1.2px,transparent 1.2px),radial-gradient(#cbdcd5 1.2px,transparent 1.2px);background-size:38px 38px;background-position:0 0,19px 19px}
html.skin-candy .titlebar{background:linear-gradient(110deg,#e6cbd2,#eee1c5 48%,#cfe1da)}
html.skin-candy .brand-mark.small{box-shadow:5px 6px 0 #9f879566}
html.skin-candy .brand-mark.small:before{background:#9f8795}
html.skin-candy .win-title{color:#5d5264}
html.skin-candy #btnTheme,html.skin-candy .avatar-btn{color:#5d5264;background:#fffdfacc}
html.skin-candy .nav-btns,html.skin-candy .cmdbar{background:#e9e3e6}
html.skin-candy .address,html.skin-candy .search,html.skin-candy .cmd,html.skin-candy .select{border-color:#d9d4d4;background:#fbfaf8;color:#55535b;box-shadow:0 2px 0 #d7d2d2}
html.skin-candy .cmd-primary,html.skin-candy .nav a.active{background:#8e7f9d;color:#fff;box-shadow:0 4px 0 #75677f}
html.skin-candy .navpane{background:#e8e3e5}
html.skin-candy .nav a,html.skin-candy .drv-row,html.skin-candy .tree .row{color:#5d5a62}
html.skin-candy .nav a:hover{background:#f7f4f3}
html.skin-candy .items.grid .it,html.skin-candy .items.grid .it:nth-child(3n+1),html.skin-candy .items.grid .it:nth-child(3n+2),html.skin-candy .items.grid .it:nth-child(3n){background:#faf8f6;box-shadow:0 4px 0 #ddd8d6}
html.skin-candy .items.grid .it:nth-child(3n+1){background:#f6ecee}.skin-candy .items.grid .it:nth-child(3n+2){background:#f4f0e5}.skin-candy .items.grid .it:nth-child(3n){background:#eaf2ee}
html.skin-candy .items.grid .it:hover{background:#fff;box-shadow:0 8px 0 #d8d2d0}
html.skin-candy .items.grid .it.selected{outline-color:#8e7f9d;background:#e9e1ec;box-shadow:0 5px 0 #c9bacf}
html.skin-candy .items.grid .it .ic{border-radius:50% 42% 55% 46%;background:#e8e1e6}
html.skin-candy .items.grid .it:nth-child(3n+1) .ic{background:#ead8dc}.skin-candy .items.grid .it:nth-child(3n+2) .ic{background:#e9e1c9}.skin-candy .items.grid .it:nth-child(3n) .ic{background:#d9e8e1}
html.skin-candy .items.grid .it .ic:before{width:76px;height:76px;border-radius:50%;background:#ffffff80;transform:rotate(-10deg)}
html.skin-candy .items.grid .it .ic:after{color:#9b8492;opacity:.7}
html.skin-candy .items.grid .it .ic svg.big{filter:saturate(.62) contrast(.94);opacity:.9}
html.skin-candy .items.grid .it .nm{color:#505057}
html.skin-candy .details{background:#eee9eb}
html.skin-candy .statusbar{background:#e8e1e5;color:#706b72}
html.skin-candy .fab{background:#8e7f9d;box-shadow:0 5px 0 #75677f}
html.skin-candy[data-theme="dark"]{--bg:#25272b;--surface:#303238;--surface-2:#393b41;--ink:#e7e4e5;--muted:#b9b6ba;--line:#505158;--accent:#b7a8c0;--accent-hover:#cbbbd2;--accent-ink:#29252c;--accent-soft:#4a414f;--folder:#4b454b;--folder-hover:#564d55;--danger:#d19b9f;--danger-soft:#49383d;--shadow:0 8px 26px rgba(0,0,0,.24)}
html.skin-candy[data-theme="dark"] body{background:#25272b;background-image:radial-gradient(#45404a 1.2px,transparent 1.2px),radial-gradient(#354642 1.2px,transparent 1.2px)}
html.skin-candy[data-theme="dark"] .titlebar{background:linear-gradient(110deg,#55434d,#514a3c,#38504a)}
html.skin-candy[data-theme="dark"] .win,html.skin-candy[data-theme="dark"] .navbar,html.skin-candy[data-theme="dark"] .pane{background:#2c2e33;color:#e7e4e5}
html.skin-candy[data-theme="dark"] .navpane,html.skin-candy[data-theme="dark"] .nav-btns,html.skin-candy[data-theme="dark"] .cmdbar{background:#38383e}
html.skin-candy[data-theme="dark"] .address,html.skin-candy[data-theme="dark"] .search,html.skin-candy[data-theme="dark"] .cmd,html.skin-candy[data-theme="dark"] .select{background:#3d3e45;border-color:#575860;color:#e7e4e5;box-shadow:0 2px 0 #24252a}
html.skin-candy[data-theme="dark"] .items.grid .it,html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n+1),html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n+2),html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n){background:#38393f;box-shadow:0 4px 0 #222328}
html.skin-candy[data-theme="dark"] .items.grid .it .ic,html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n+1) .ic,html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n+2) .ic,html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n) .ic{background:#49464d}
html.skin-candy[data-theme="dark"] .items.grid .it .nm{color:#eee9ec}
html.skin-candy[data-theme="dark"] .details{background:#38363d}
html.skin-candy[data-theme="dark"] .statusbar{background:#37343a;color:#c7c1c6}

/* Video: selalu mempertahankan rasio asli dan berada tepat di tengah */
.vs-main video{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;place-self:center}
.volume-control{display:inline-flex;align-items:center;gap:7px;color:var(--muted);padding:0 6px}.volume-control .i{width:18px;height:18px}.volume-control input{width:92px;accent-color:var(--accent)}.video-volume{color:#eef3f1}.video-volume input{accent-color:#8fe0d5}

/* Candy diperbarui menjadi iOS Calm: kartu translucent, biru sistem, tipografi SF */
html.skin-candy{--bg:#f2f2f7;--surface:#ffffff;--surface-2:#f7f7fa;--ink:#1c1c1e;--muted:#6e6e73;--line:#d1d1d6;--accent:#3478f6;--accent-hover:#2563d9;--accent-ink:#fff;--accent-soft:#e2ecff;--folder-back:#9db9ef;--folder-front:#b9d0ff;--folder:#e8f0ff;--folder-hover:#dce8ff;--folder-tab:#c8dcff;--danger:#c93442;--danger-soft:#ffe5e7;--shadow:0 12px 30px rgba(60,60,67,.12);--font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif}
html.skin-candy body{background:#f2f2f7;background-image:none;font-family:var(--font-body)}
html.skin-candy .desk{padding:18px;background:#f2f2f7}
html.skin-candy .win{max-width:1440px;border:1px solid #fff;border-radius:24px;background:#f2f2f7;box-shadow:0 20px 50px rgba(60,60,67,.14)}
html.skin-candy .titlebar{min-height:68px;padding:12px 20px;background:rgba(255,255,255,.86);border-bottom:1px solid #d1d1d6;backdrop-filter:blur(18px)}
html.skin-candy .titlebar:after{display:none}
html.skin-candy .brand-mark.small{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#62a4ff,#3478f6);box-shadow:0 4px 10px #3478f644;transform:none}
html.skin-candy .brand-mark.small:before{background:#fff;width:12px;height:6px;top:-5px;border-radius:4px 4px 0 0}
html.skin-candy .win-title{font-size:22px;color:#1c1c1e;font-weight:750}
html.skin-candy #btnTheme,html.skin-candy .avatar-btn{width:38px;height:38px;border:1px solid #d1d1d6;border-radius:50%;background:#fff;color:#3478f6;box-shadow:none}
html.skin-candy .navbar{grid-template-columns:auto minmax(180px,1fr) minmax(220px,340px);gap:10px;margin:0;padding:12px 18px;background:#f2f2f7}
html.skin-candy .nav-btns{padding:3px;gap:2px;border:1px solid #d1d1d6;border-radius:11px;background:#fff}
html.skin-candy .nb{width:36px;height:34px;border-radius:9px;color:#3478f6}
html.skin-candy .address,html.skin-candy .search{height:40px;border:1px solid #d1d1d6;border-radius:10px;background:#fff;color:#1c1c1e;box-shadow:none}
html.skin-candy .address{padding:0 12px;font-weight:600}
html.skin-candy .cmdbar{margin:0 18px 12px;padding:8px;border:1px solid #d1d1d6;border-radius:14px;background:#fff;box-shadow:none}
html.skin-candy .cmd{min-height:34px;padding:7px 11px;border:0;border-radius:9px;background:#f2f2f7;color:#3478f6;font-weight:650;box-shadow:none}
html.skin-candy .cmd:hover{background:#e2ecff;transform:none}
html.skin-candy .cmd-primary{background:#3478f6;color:#fff;box-shadow:none}
html.skin-candy .cmd.danger{background:#ffe5e7;color:#c93442;box-shadow:none}
html.skin-candy .select{border:1px solid #d1d1d6;border-radius:9px;background:#fff;color:#1c1c1e;box-shadow:none}
html.skin-candy .win-body{grid-template-columns:218px minmax(0,1fr) 230px;gap:12px;padding:0 18px 14px;background:#f2f2f7}
html.skin-candy .navpane{border:1px solid #d1d1d6;border-radius:16px;background:#fff;padding:12px 9px;box-shadow:0 3px 10px #3c3c4320}
html.skin-candy .np-label{padding:5px 10px;color:#6e6e73;font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
html.skin-candy .nav a{margin:2px 0;padding:9px 11px;border-radius:9px;color:#3a3a3c;font-weight:550}
html.skin-candy .nav a:hover{background:#f2f2f7}
html.skin-candy .nav a.active{background:#e2ecff;color:#3478f6;box-shadow:none}
html.skin-candy .add-drive{border:1px dashed #b7b7bd;border-radius:9px;background:#f7f7fa;color:#3478f6;font-weight:600}
html.skin-candy .disk{border:1px solid #d1d1d6;border-radius:13px;background:#f7f7fa;box-shadow:none}
html.skin-candy .pane{border:1px solid #d1d1d6;border-radius:16px;background:#fff;box-shadow:0 3px 10px #3c3c4320}
html.skin-candy .content{padding:16px 18px 24px}
html.skin-candy .list-head{color:#6e6e73;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
html.skin-candy .items.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
html.skin-candy .items.grid .it,html.skin-candy .items.grid .it:nth-child(3n+1),html.skin-candy .items.grid .it:nth-child(3n+2),html.skin-candy .items.grid .it:nth-child(3n){min-height:150px;padding:10px;border:1px solid #e5e5ea;border-radius:14px;background:#fff;box-shadow:0 3px 10px #3c3c4320}
html.skin-candy .items.grid .it:hover{transform:translateY(-2px);background:#fbfbfd;box-shadow:0 6px 14px #3c3c4330}
html.skin-candy .items.grid .it.selected{outline:2px solid #3478f6;outline-offset:1px;background:#eaf1ff;box-shadow:0 3px 10px #3478f633}
html.skin-candy .items.grid .it .ic,html.skin-candy .items.grid .it:nth-child(3n+1) .ic,html.skin-candy .items.grid .it:nth-child(3n+2) .ic,html.skin-candy .items.grid .it:nth-child(3n) .ic{height:92px;border-radius:12px;background:#f2f2f7}
html.skin-candy .items.grid .it .ic:before{width:62px;height:62px;border-radius:50%;background:#fff;transform:none}
html.skin-candy .items.grid .it .ic:after{color:#3478f6;opacity:.55;font-size:16px}
html.skin-candy .items.grid .it .ic svg.big{width:52px;height:52px;filter:none;opacity:.9}
html.skin-candy .items.grid .it .nm{padding:5px 3px 0;color:#1c1c1e;font-weight:600}
html.skin-candy .details{border:1px solid #d1d1d6;border-radius:16px;background:#fff;box-shadow:0 3px 10px #3c3c4320}
html.skin-candy .statusbar{background:#fff;border-top:1px solid #d1d1d6;color:#6e6e73;padding:9px 18px}
html.skin-candy .menu,html.skin-candy .dlg{border:1px solid #d1d1d6;border-radius:16px;background:#fff;box-shadow:0 18px 45px #3c3c4338}
html.skin-candy .menu button{border-radius:9px;color:#1c1c1e}
html.skin-candy .menu button:hover{background:#f2f2f7}
html.skin-candy .fab{background:#3478f6;box-shadow:0 5px 12px #3478f655}
html.skin-candy[data-theme="dark"]{--bg:#1c1c1e;--surface:#2c2c2e;--surface-2:#3a3a3c;--ink:#f2f2f7;--muted:#aeaeb2;--line:#48484a;--accent:#70a7ff;--accent-hover:#8bb8ff;--accent-ink:#102244;--accent-soft:#263b60;--shadow:0 12px 30px rgba(0,0,0,.3)}
html.skin-candy[data-theme="dark"] body,html.skin-candy[data-theme="dark"] .desk{background:#1c1c1e}
html.skin-candy[data-theme="dark"] .titlebar,html.skin-candy[data-theme="dark"] .navbar,html.skin-candy[data-theme="dark"] .win,html.skin-candy[data-theme="dark"] .win-body{background:#1c1c1e;color:#f2f2f7}
html.skin-candy[data-theme="dark"] .navpane,html.skin-candy[data-theme="dark"] .pane,html.skin-candy[data-theme="dark"] .details,html.skin-candy[data-theme="dark"] .cmdbar,html.skin-candy[data-theme="dark"] .menu,html.skin-candy[data-theme="dark"] .dlg{background:#2c2c2e;border-color:#48484a;color:#f2f2f7}
html.skin-candy[data-theme="dark"] .address,html.skin-candy[data-theme="dark"] .search,html.skin-candy[data-theme="dark"] .cmd,html.skin-candy[data-theme="dark"] .select{background:#3a3a3c;border-color:#48484a;color:#f2f2f7}
html.skin-candy[data-theme="dark"] .items.grid .it,html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n+1),html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n+2),html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n){background:#2c2c2e;border-color:#48484a;box-shadow:none}
html.skin-candy[data-theme="dark"] .items.grid .it .ic,html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n+1) .ic,html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n+2) .ic,html.skin-candy[data-theme="dark"] .items.grid .it:nth-child(3n) .ic{background:#3a3a3c}
html.skin-candy[data-theme="dark"] .items.grid .it .nm,html.skin-candy[data-theme="dark"] .nav a{color:#f2f2f7}
@media(max-width:900px){html.skin-candy .desk{padding:0}html.skin-candy .win{border-radius:0}html.skin-candy .win-body{grid-template-columns:minmax(0,1fr);padding:0 10px 10px}html.skin-candy .navpane{border-radius:0 16px 16px 0}html.skin-candy .items.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}}

/* Video player fix: area media mengambil ruang di antara header dan footer,
   rasio asli dipertahankan sehingga video portrait tidak terpotong. */
.vstage{overflow:hidden}
.vs-body{flex:1 1 auto;min-height:0;overflow:hidden}
.vs-main{min-width:0;min-height:0;overflow:hidden;padding:8px 12px}
.vs-main video{display:block;place-self:center;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#000;border-radius:10px}
.vstage .vs-ctrls{flex:0 0 auto;min-height:58px;z-index:4;background:rgba(10,15,14,.96);position:relative}
.video-overlay-controls{position:absolute;right:22px;bottom:22px;z-index:6;display:flex;align-items:center;padding:8px 11px;border-radius:999px;background:rgba(15,20,25,.78);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(12px);box-shadow:0 5px 18px rgba(0,0,0,.35)}
.video-overlay-controls .volume-control{color:#fff}.video-overlay-controls .volume-control input{width:100px;accent-color:#8fe0d5}
.vs-msg{z-index:7;bottom:18px}
@media(max-width:700px){.vs-body{display:block;position:relative}.vs-main{height:100%;padding:4px}.vs-list{position:absolute;inset:0 0 0 auto;width:min(86vw,320px);z-index:8;background:#111}.video-overlay-controls{right:12px;bottom:12px}.vstage .vs-ctrls{min-height:54px;padding:6px;gap:5px}}