/* ==========================================================================
   FolderKita — tampilan cloud drive modern (Cloud Dock style)
   Struktur: dock ikon mini + sidebar gelap + top bar + area konten
   ========================================================================== */

:root {
  --font: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Tema utama: ungu (ganti biru) */
  --purple: #7c3aed;
  --purple-dark: #6d28d9;
  --purple-light: #ede9fe;
  --purple-deep: #5b21b6;
  --purple-glow: rgba(124, 58, 237, .35);

  --ink: #1e1b4b;
  --ink-2: #4c1d95;
  --ink-3: #6d28d9;

  --bg: #f8f7ff;
  --white: #fff;
  --hover: #f3f0ff;
  --hover-2: #ebe5ff;
  --line: #e5e0f5;
  --line-2: #d4cce8;

  --amber: #f59e0b;
  --danger: #ef4444;
  --danger-soft: #fef2f2;
  --folder: #fbbf24;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 3px rgba(30, 27, 75, .1), 0 4px 12px rgba(30, 27, 75, .06);
  --shadow-lg: 0 10px 40px rgba(30, 27, 75, .18);
  --shadow-glow: 0 0 20px var(--purple-glow);
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
h3 { font-size: 13.5px; font-weight: 600; margin: 18px 0 10px; }
p { margin: 8px 0; color: var(--ink-2); }
a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--purple-dark); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #a78bfa; }

.muted { display: block; color: var(--ink-2); font-size: 12.5px; font-weight: 500; }

/* Tombol & kontrol dasar */
button {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  background: var(--purple);
  color: #fff;
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
  box-shadow: 0 1px 3px rgba(124, 58, 237, .3);
}
button:hover {
  background: var(--purple-dark);
  box-shadow: 0 3px 10px rgba(124, 58, 237, .35);
  transform: translateY(-1px);
}
button:active { transform: translateY(0); }
.smallbtn {
  background: var(--hover);
  color: var(--ink);
  padding: 9px 14px;
  font-size: 12.5px;
  box-shadow: 0 1px 2px rgba(30, 27, 75, .06);
  transition: background .15s ease, box-shadow .15s ease;
}
.smallbtn:hover { background: var(--hover-2); color: var(--ink); box-shadow: 0 2px 6px rgba(30, 27, 75, .1); }

input, select, textarea {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }

/* ==========================================================================
   1. KERANGKA — dock mini + sidebar gelap + top bar + area konten
   ========================================================================== */

.app {
  display: flex;
  width: 100%;
  height: 100vh;
  background: var(--bg);
  overflow: hidden;
}

/* Tinggi mengikuti viewport yang benar-benar terlihat (browser mobile) */
@supports (height: 100dvh) {
  .app { height: 100dvh; }
}

/* --- Dock ikon mini (far left, 56px) --- */
.minidock {
  flex: none;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 0 12px;
  background: linear-gradient(180deg, #1e1b4b 0%, #0f0a1e 100%);
  border-right: 1px solid rgba(124, 58, 237, .2);
  overflow-y: auto;
  overflow-x: hidden;
}
.minidock::-webkit-scrollbar { width: 0; }
.minidock a, .minidock button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, .65);
  font-size: 18px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.minidock a:hover, .minidock button:hover {
  background: rgba(124, 58, 237, .25);
  color: #c4b5fd;
  transform: scale(1.08);
}
.minidock a.active, .minidock button.active {
  background: rgba(124, 58, 237, .4);
  color: #a78bfa;
  box-shadow: 0 0 12px rgba(124, 58, 237, .3);
}
.minidock .dock-sep {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, .12);
  margin: 4px 0;
}
.minidock .dock-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
/* Tooltip dock */
.minidock a[title], .minidock button[title] { position: relative; }
.minidock a[title]:hover::after, .minidock button[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e1b4b;
  color: #e9d5ff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  z-index: 100;
  pointer-events: none;
}

/* --- Sidebar utama --- */
.sidebar {
  flex: none;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 12px;
  overflow-y: auto;
  background: linear-gradient(180deg, #1e1b4b 0%, #0f0a1e 100%);
  color: #fff;
  border-right: 1px solid rgba(124, 58, 237, .15);
}
.sidebar::-webkit-scrollbar { width: 0; }

/* Blok sidebar tidak boleh menyusut saat ruang vertikal sempit */
.sidebar .brand,
.sidebar .side-cta,
.sidebar .nav,
.sidebar .side-storage { flex: none; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: #fff;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  font-size: 16px;
  box-shadow: 0 0 12px rgba(124, 58, 237, .4);
}

.side-cta {
  display: block;
  padding: 11px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 14px rgba(124, 58, 237, .35);
  transition: box-shadow .15s ease, transform .15s ease;
}
.side-cta:hover {
  box-shadow: 0 6px 20px rgba(124, 58, 237, .45);
  transform: translateY(-1px);
  color: #fff;
}

.nav { display: grid; gap: 2px; }
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav a .ni { display: grid; place-items: center; width: 20px; font-size: 14px; }
.nav a:hover { background: rgba(124, 58, 237, .2); color: #e9d5ff; }
.nav a.active {
  background: rgba(124, 58, 237, .35);
  color: #c4b5fd;
  font-weight: 600;
  border-left-color: #a78bfa;
  box-shadow: inset 0 0 20px rgba(124, 58, 237, .15);
}

/* --- Detail penyimpanan (sidebar) --- */
.side-storage {
  margin-top: auto;
  display: grid;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(124, 58, 237, .25);
}
.side-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(167, 139, 250, .7); }
.side-item { display: grid; gap: 6px; }
.si-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .85); }
.si-head i { font-style: normal; }
.sbar { display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.sbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.side-item small { font-size: 10.5px; color: rgba(255, 255, 255, .6); }
.side-upgrade { display: inline-block; margin-top: 2px; font-size: 12px; font-weight: 700; color: #a78bfa; }
.side-upgrade:hover { color: #c4b5fd; }

/* Panel penyimpanan versi konten (dipakai di beranda layar kecil) */
.sidedata {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.sidedata .side-label { color: var(--ink-2); }
.sidedata .si-head { color: var(--ink); }
.sidedata .sbar { background: #e9ecf1; }
.sidedata .sbar i { background: var(--purple); }
.sidedata .side-item small { color: var(--ink-2); }
.sidedata .side-upgrade { color: var(--purple); }
.homestorage { display: block; }

/* --- Viewport kanan --- */
.viewport { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topsearch {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 680px;
  height: 46px;
  padding: 0 18px;
  background: var(--hover);
  border-radius: 999px;
}
.topsearch:focus-within {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .1), var(--shadow);
}
.ts-icon { color: var(--ink-2); font-size: 16px; }
.topsearch input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; border-radius: 0; font-size: 14px; }
.topsearch input:focus { background: transparent; border: 0; box-shadow: none; }
.topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topbar-actions > * { flex: none; }

/* Tombol app drawer (tampil hanya di ponsel) + latar gelap drawer */
.drawer-btn {
  display: none;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}
.drawer-btn:hover { background: var(--hover); color: var(--ink); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(32, 33, 36, .45); }
.drawer-backdrop[hidden] { display: none; }


.ibtn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}
.ibtn:hover { background: var(--hover); color: var(--ink); }

.userchip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}
.userchip:hover { background: var(--hover); color: var(--ink); }
.userchip span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
}

.main { flex: 1; min-height: 0; overflow: auto; padding: 4px 26px 34px; }

/* ==========================================================================
   2. LOGIN / SETUP
   ========================================================================== */

body:not(:has(.app)) {
  padding: 16px;
  background: linear-gradient(135deg, #2f6ff0 0%, #1a54d8 100%);
  background-attachment: fixed;
}

.authbox {
  width: min(430px, calc(100% - 32px));
  margin: 8vh auto;
  padding: 30px 26px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(9, 30, 66, .3);
}
.authbox .brand.big { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: var(--purple); margin-bottom: 14px; }
.authbox h2 { font-size: 20px; }
.authbox p { font-size: 13px; }
.authbox form { display: grid; gap: 14px; margin-top: 18px; }
.authbox button { padding: 13px; }

.alert {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--danger-soft);
  border-left: 4px solid var(--danger);
  border-right: 1px solid rgba(217, 48, 37, .2);
  border-top: 1px solid rgba(217, 48, 37, .2);
  border-bottom: 1px solid rgba(217, 48, 37, .2);
  color: #b3261e;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(217, 48, 37, .08);
}

/* ==========================================================================
   3. JUDUL HALAMAN, SEKSI, CHIP KATEGORI
   ========================================================================== */

.pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 18px;
}
.pagehead-t h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.4px; color: var(--purple); }
.pagehead-t .muted { margin-top: 3px; }
.pagehead-r { flex: none; }

.section { margin-bottom: 26px; }
.seclabel {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
}
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sechead .seclabel { margin: 0; }
.seclink { font-size: 12.5px; font-weight: 600; }

.view-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--hover);
  box-shadow: inset 0 1px 3px rgba(60, 64, 67, .06);
}
.vbtn { width: 36px; height: 30px; padding: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.vbtn:hover { background: var(--hover-2); color: var(--ink); }
.vbtn.active { background: #fff; color: var(--purple); box-shadow: var(--shadow); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .05);
}
.chip:hover { background: var(--hover); color: var(--ink); }
.chip.active {
  background: var(--purple-light);
  border-color: #b8d0f7;
  color: var(--purple);
  box-shadow: 0 1px 4px rgba(124, 58, 237, .12);
}

/* --- Baris pencarian di beranda --- */
.searchrow { margin-bottom: 14px; }
.searchpill { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 46px; background: var(--hover); border-radius: 999px; border: 1px solid var(--line); transition: background .15s ease, box-shadow .15s ease; }
.searchpill:focus-within { background: #fff; box-shadow: 0 0 0 3px rgba(124, 58, 237, .1), var(--shadow); }
.pill-icon { color: var(--ink-2); font-size: 16px; flex: none; }
.searchpill input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; font-size: 14px; color: var(--ink); }
.searchpill input:focus { outline: none; }
.searchpill button { flex: none; padding: 8px 16px; border-radius: 999px; background: var(--purple); color: #fff; font-size: 13px; font-weight: 600; }
.searchpill button:hover { background: var(--purple-dark); }

/* --- Kotak kategori beranda --- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cat-tile { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; box-shadow: 0 1px 2px rgba(60, 64, 67, .04); }
.cat-tile:hover { border-color: var(--purple); box-shadow: 0 4px 12px rgba(124, 58, 237, .12); transform: translateY(-1px); color: var(--ink); }
.cat-text { display: grid; gap: 2px; }
.cat-text b { font-size: 13.5px; font-weight: 600; }
.cat-text small { font-size: 11px; color: var(--ink-2); }
.cat-icon { font-size: 22px; flex: none; }

/* --- Akses cepat --- */
.quickrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.quick { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.quick:hover { box-shadow: 0 4px 12px rgba(60, 64, 67, .1); transform: translateY(-1px); color: var(--ink); }
.quick-icon { font-size: 20px; flex: none; }
.quick b { font-size: 13.5px; font-weight: 600; }
.quick small { font-size: 11px; color: var(--ink-2); margin-left: auto; }

/* --- Divider & baris info --- */
.divider { height: 1px; background: var(--line); margin: 18px 0; }
.rows { display: grid; gap: 2px; margin-bottom: 18px; }
.row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .15s ease, box-shadow .15s ease; }
.row:hover { background: var(--hover); box-shadow: 0 2px 6px rgba(60, 64, 67, .06); color: var(--ink); }
.row-icon { font-size: 20px; flex: none; }
.row-body { flex: 1; min-width: 0; }
.row-body b { display: block; font-size: 13.5px; font-weight: 600; }
.row-body small { font-size: 11.5px; color: var(--ink-2); }
.row-go { font-size: 18px; color: var(--ink-2); flex: none; }

/* --- Panel penyimpanan beranda --- */
.storage { padding: 14px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); margin-bottom: 18px; }
.bar { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 8px; }
.bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--purple-dark)); }
.bar-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-2); }
.bar-meta a { color: var(--purple); font-weight: 600; }

/* --- Section head & empty state --- */
.sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sectionhead h2 { margin: 0; font-size: 15px; font-weight: 600; }
.sectionhead a { font-size: 12.5px; font-weight: 600; color: var(--purple); text-decoration: none; }
.sectionhead a:hover { color: var(--purple-dark); }
.empty { padding: 28px; text-align: center; color: var(--ink-2); font-size: 13px; }

/* --- Group title di list view --- */
.group-title { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-2); margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.qcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 128px;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--hover);
  color: var(--ink);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .06);
}
.qcard:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(60, 64, 67, .12);
  transform: translateY(-1px);
}
.qcard.is-primary { background: var(--purple); color: #fff; box-shadow: 0 10px 22px rgba(124, 58, 237, .3); }
.qcard.is-primary:hover { background: var(--purple-dark); color: #fff; }
.qcard.is-empty { justify-content: flex-end; background: var(--bg); border-color: var(--line); }
.q-top { display: flex; flex-direction: column; gap: 12px; }
.q-label { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-2); }
.qcard.is-primary .q-label { color: rgba(255, 255, 255, .82); }
.q-chips { display: flex; align-items: center; padding-right: 8px; }
.q-chips i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: -9px;
  border-radius: 50%;
  background: #fff;
  font-size: 15px;
  font-style: normal;
  box-shadow: 0 1px 4px rgba(60, 64, 67, .22);
}
.q-badge {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 42px;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .5px;
}
.q-foot b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-foot small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-2); }
.qcard.is-primary .q-foot small { color: rgba(255, 255, 255, .85); }

/* --- Kotak kategori besar (beranda) --- */
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.catbox {
  display: grid;
  gap: 2px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(60, 64, 67, .06);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.catbox:hover { border-color: #c6dafc; box-shadow: 0 8px 20px rgba(60, 64, 67, .14); transform: translateY(-2px); color: var(--ink); }
.catbox .cat-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: var(--purple-light);
  font-size: 23px;
}
.catbox b { font-size: 14.5px; font-weight: 600; }
.catbox small { font-size: 12px; color: var(--ink-2); }
.catbox.active { border-color: var(--purple); background: var(--purple-light); }

/* ==========================================================================
   4b. TOMBOL UPLOAD MENGAMBANG (ala Google Drive)
   ========================================================================== */

.fabwrap {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.fab-input { display: none; }
.fab {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--purple);
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(9, 30, 66, .28), 0 2px 4px rgba(9, 30, 66, .18);
  transition: box-shadow .18s ease, transform .15s ease, background .15s ease;
}
.fab:hover {
  background: #f1f6ff;
  color: var(--purple-dark);
  box-shadow: 0 8px 22px rgba(9, 30, 66, .32), 0 3px 6px rgba(9, 30, 66, .2);
  transform: scale(1.05);
}
.fab:active { transform: scale(0.97); }
.fab .fab-ico { display: block; transition: transform .2s ease; }
.fabwrap.open .fab .fab-ico { transform: rotate(45deg); }
.fab:disabled { opacity: .65; cursor: default; }

.fabmenu {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.fabmenu[hidden] { display: none; }
.fabitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.fabitem:hover { background: var(--hover); color: var(--ink); }
.fabitem .fi { font-size: 17px; }
.fabmenu { min-width: 244px; }
.fabnew {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 10px;
  border-bottom: 1px solid var(--line);
}
.fabnew .fi { font-size: 17px; }
.fabnew input { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 12.5px; }
.fabnew button { padding: 9px 13px; border: 0; border-radius: 10px; background: var(--purple); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fabnew button:hover { background: var(--purple-dark); }

.app.has-fab .main { padding-bottom: 108px; }


/* ==========================================================================
   4. TABEL FILE (Nama · Pemilik · Terakhir diubah · Ukuran · aksi)
   ========================================================================== */

.tablewrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.trow {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 100px 180px 132px 48px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 6px 14px;
  border-top: 1px solid var(--line);
}
.trow:first-child { border-top: 0; }
.trow.thead {
  min-height: 44px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-2);
}
.trow:not(.thead):hover { background: #f4f6f9; transition: background .12s ease; }
.trow.tempty { display: block; padding: 28px; text-align: center; color: var(--ink-2); font-size: 13px; }

.c-name { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--ink); font-size: 13.5px; font-weight: 600; }
a.c-name:hover { color: var(--ink); }
a.c-name:hover .tname { text-decoration: underline; }
.tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-owner { display: flex; align-items: center; }
.c-owner .avatar { width: 28px; height: 28px; font-size: 12px; }
.c-date, .c-size { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-act { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.star { flex: none; color: var(--amber); font-size: 12px; }

.badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 23px;
  height: 27px;
  border-radius: 4px;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2px;
}
.badge-folder { width: 26px; height: 26px; background: transparent; font-size: 20px; }

/* Warna label jenis file (dipakai .badge, .q-badge, dan .glyph.badge-text) */
.badge-doc { background: #7c3aed; }
.badge-sheet { background: #0f9d58; }
.badge-slide { background: #f4b400; }
.badge-pdf { background: #ea4335; }
.badge-img { background: #a142f4; }
.badge-vid { background: #e8710a; }
.badge-aud { background: #0b8043; }
.badge-zip { background: #5f6368; }
.badge-apk { background: #188038; }
.badge-txt { background: #5f6368; }
.badge-file { background: #5f6368; }

/* ==========================================================================
   5. TAMPILAN GRID (kartu) — dipakai lewat tombol pengalih tampilan
   ========================================================================== */

.items-container { display: block; }
.homerecent { display: none; }
.items-container.list-view .only-grid { display: none; }
.items-container.grid-view .only-list { display: none; }

/* Grid kartu item: 6 kolom di desktop (dipakai kartu folder, kartu berkas, mode galeri,
   dan File Terbaru), lalu 3 kolom di ponsel — lihat media query di bawah */
.items-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }

.item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--hover);
  transition: box-shadow .18s ease, transform .18s ease, background .15s ease;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .06);
  overflow: hidden;
}
.item-card.is-folder { overflow: visible; }
.item-card:hover {
  background: #fff;
  box-shadow: 0 4px 14px rgba(60, 64, 67, .13), 0 1px 3px rgba(60, 64, 67, .08);
  transform: translateY(-2px);
}
.card-thumb { display: block; color: var(--ink); }
.thumbbox {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(60, 64, 67, .08);
  transition: box-shadow .15s ease;
}
.thumbbox:hover { box-shadow: inset 0 0 0 1px rgba(60, 64, 67, .15); }
.thumbbox img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbbox .glyph { font-size: 40px; line-height: 1; }
.thumbbox.has-thumb .glyph { display: none; }
.thumbbox .glyph.badge-text { width: 44px; height: 54px; border-radius: 6px; font-size: 14px; }
.item-card .fav {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--amber);
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(60, 64, 67, .2);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.item-card .fav:hover { transform: scale(1.18); box-shadow: 0 2px 8px rgba(60, 64, 67, .28); }
.card-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .12s ease;
}
.card-name:hover { color: var(--purple); }
.card-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--ink-2); min-width: 0; }
.card-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-ext {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
}
/* --- Ikon jenis file (SVG): kini hanya glyph besar di tengah kotak pratinjau.
   Badge ikon kecil di pojok kartu dihapus agar kartu bersih (sama seperti kartu
   folder); jenis berkas tetap terbaca dari warna latar kotak, chip ekstensi di
   bawah nama, dan label jenis pada tampilan daftar. --- */
.thumbbox .glyph svg { display: block; width: 46px; height: 46px; }
.thumbbox video { display: block; width: 100%; height: 100%; object-fit: cover; }
.item-card .fav { top: auto; left: auto; bottom: 8px; right: 8px; }
.play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff; font-size: 30px; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); pointer-events: none; }
/* Tanggal (Created / Modified) selalu satu baris per tanggal: label + nilai sejajar */
.card-dates { display: grid; gap: 1px; margin-top: 6px; color: var(--ink-2); container: carddates / inline-size; }
.card-dates .cd-row { display: flex; align-items: baseline; gap: 3px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 10px; line-height: 1.35; }
.card-dates i { flex: none; font-style: normal; font-weight: 600; color: var(--ink-3); }
.card-dates b { flex: none; font-weight: 700; color: var(--ink-3); }
.card-dates .cd-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Warna ikon jenis file (selaras dengan label tabel) */
.type-folder { color: #f9ab00; }
.type-doc { color: #7c3aed; }
.type-sheet { color: #0f9d58; }
.type-slide { color: #f4b400; }
.type-pdf { color: #ea4335; }
.type-img { color: #a142f4; }
.type-vid { color: #e8710a; }
.type-aud { color: #0b8043; }
.type-apk { color: #188038; }
.type-zip, .type-txt, .type-file { color: #5f6368; }

/* --- Latar kartu file mengikuti jenis filenya --- */
.thumbbox.type-img { background: #f4ecfe; }
.thumbbox.type-vid { background: #fdf0e4; }
.thumbbox.type-aud { background: #e7f3ec; }
.thumbbox.type-doc { background: #ede9fe; }
.thumbbox.type-sheet { background: #e6f4ea; }
.thumbbox.type-slide { background: #fef7e0; }
.thumbbox.type-pdf { background: #fdeceb; }
.thumbbox.type-apk { background: #e9f5e9; }
.thumbbox.type-zip, .thumbbox.type-txt, .thumbbox.type-file { background: #eef1f5; }
/* Alias kelas cat-X ↔ type-X */
.thumbbox.cat-image { background: #f4ecfe; }
.thumbbox.cat-video { background: #fdf0e4; }
.thumbbox.cat-audio { background: #e7f3ec; }
.thumbbox.cat-doc { background: #ede9fe; }
.thumbbox.cat-archive { background: #eef1f5; }
.thumbbox.cat-apk { background: #e9f5e9; }
.thumbbox.cat-other { background: #eef1f5; }

/* --- Kartu folder: berbentuk folder Windows (lidah + badan) berwarna kuning ---
   Bagian atas kartu memuat pratinjau isi folder, bagian bawah memuat informasi.
   Kartu folder memakai lebar kolom dan ukuran kotak pratinjau yang sama dengan
   kartu berkas supaya kedua grid sejajar (seragam) di semua ukuran layar. */
.items-grid.is-folders { padding-top: 26px; row-gap: 28px; margin-bottom: 16px; }
.item-card.is-folder {
  padding: 10px;
  border-radius: 2px 16px 16px 16px;
  background: linear-gradient(180deg, #ffd75e 0%, #ffc93b 46%, #f6b116 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -10px 14px -12px rgba(150, 96, 0, .5), 0 2px 6px rgba(199, 145, 12, .26);
}
.item-card.is-folder:hover { background: linear-gradient(180deg, #ffdf74 0%, #ffd24f 46%, #f8b723 100%); }
/* Lidah folder menonjol di kiri atas badan kartu */
.item-card.is-folder::before {
  content: '';
  position: absolute;
  left: 0;
  top: -22px;
  width: 46%;
  height: 24px;
  border-radius: 10px 12px 0 0;
  background: linear-gradient(180deg, #ffe694 0%, #ffd345 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
/* Kartu folder: pratinjau tanpa badge ikon di pojok (bentuk kartunya sendiri sudah folder) */
/* Kotak pratinjau isi folder: gambar anak folder pertama, atau ikon folder bila kosong.
   Jumlah isi (file/folder) diletakkan rata kiri di pojok kiri bawah kotak pratinjau,
   tanpa latar/badge putih agar kotak tetap bersih; kartu folder tetap hanya memuat
   kotak pratinjau + nama (ringkas dan seragam dengan kartu berkas). */
.thumbbox.is-folder {
  aspect-ratio: 3 / 2; /* kotak pratinjau 2/3 tinggi dari lebar — lebih ramping */
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(184, 132, 0, .24), 0 1px 3px rgba(150, 96, 0, .2);
  overflow: hidden;
  display: grid;
  place-items: center; /* ikon folder tetap di tengah kotak */
  container: fprev / inline-size; /* ukuran teks jumlah isi mengikuti lebar kotak pratinjau */
}
.thumbbox.is-folder .glyph { color: #e8a300; }
/* Jumlah file/folder di pojok kiri bawah kotak pratinjau: rata kiri, tanpa background/badge */
.thumbbox.is-folder .fcount {
  position: absolute;
  left: 7px;
  bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
  max-width: calc(100% - 14px);
  color: #7a5a00;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
/* Tiap bagian jumlah isi dipangkas dengan elipsis bila ruangnya sempit */
.thumbbox.is-folder .fcount > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pemisah "·" hanya dipakai saat jumlah isi tampil satu baris (lihat @container fprev) */
.thumbbox.is-folder .fcount .fc-sep { display: none; font-style: normal; }
/* Ada gambar pratinjau: gambar menutupi kotak, jumlah isi tetap di pojok kiri bawah
   dengan teks putih + bayangan tipis agar terbaca (tetap tanpa badge/latar putih) */
.thumbbox.is-folder.has-thumb img { position: absolute; inset: 0; }
.thumbbox.is-folder.has-thumb .fcount {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 6px rgba(0, 0, 0, .45);
}
/* Teks nama folder dibuat cokelat tua agar terbaca di atas latar kuning */
.item-card.is-folder .card-name { color: #3d2c00; }

/* Card preview area — pembungkus link gambar */
.card-preview-area { display: block; width: 100%; }
.card-preview-area > .thumbbox { width: 100%; }

/* --- Mode galeri (kategori Gambar/Video): tampil penuh seperti galeri foto --- */
.items-grid.is-gallery .item-card { padding: 0; background: transparent; }
.items-grid.is-gallery .item-card:hover { background: transparent; }
.items-grid.is-gallery .thumbbox { border-radius: var(--radius); background: #eef1f5; }
.items-grid.is-gallery .card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 72%);
}
.items-grid.is-gallery .card-name { color: #fff; }
.items-grid.is-gallery .card-meta { display: none; }
.items-grid.is-gallery .card-actions { top: 8px; right: 8px; }



/* ==========================================================================
   6. MENU AKSI (⋮) & DROPDOWN
   ========================================================================== */

.menu-wrap { position: relative; }
.menu-wrap > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.menu-wrap > summary::-webkit-details-marker { display: none; }
.menu-wrap > summary:hover { background: var(--hover-2); color: var(--ink); }
.menu-wrap[open] > summary { background: var(--purple); color: #fff; }
.menu-wrap[open] > summary:hover { background: var(--purple-dark); color: #fff; }

/* Kartu grid: tombol aksi mengapung di sudut kanan atas */
.item-card .card-actions { position: absolute; top: 12px; right: 12px; z-index: 3; }
.item-card .card-actions .menu-wrap > summary {
  width: 30px; height: 30px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 4px rgba(60, 64, 67, .18);
  font-size: 16px;
  border-radius: 50%;
  transition: background .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
}
.item-card .card-actions .menu-wrap > summary:hover {
  background: #fff;
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(60, 64, 67, .24);
}
.item-card .card-actions .menu-wrap[open] > summary { background: var(--purple); color: #fff; }

.detailforms {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  width: 254px;
  padding: 8px;
  display: grid;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.detailforms form { display: grid; gap: 6px; }
.detailforms .inline { display: block; margin: 0; }
.detailforms input, .detailforms select { padding: 9px 11px; font-size: 12.5px; }
.detailforms button,
.detailforms .smallbtn,
.detailforms .menu-btn,
.detailforms .menu-item-link {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
}
.detailforms button:hover, .detailforms .smallbtn:hover, .detailforms .menu-item-link:hover { background: var(--hover); color: var(--ink); }
.helptip { width: 290px; padding: 16px; font-size: 12.5px; color: var(--ink-2); }
.helptip b { display: block; margin-bottom: 8px; color: var(--ink); }
.helptip ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }

/* Baris tanggal Created/Modified di dalam menu ⋮ (info sebelum daftar aksi) */
.menu-dates {
  margin: 0 0 4px;
  padding: 2px 32px 7px 4px; /* sisa ruang untuk tombol ✕ di pojok kanan menu */
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
}

/* ==========================================================================
   7. PANEL TAMBAH, BREADCRUMB, FORM
   ========================================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  overflow-x: auto;
  white-space: nowrap;
}
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--purple); text-decoration: underline; }
.breadcrumb i { color: var(--line-2); font-style: normal; }
.breadcrumb .crumb-curr { color: var(--ink); }

.formgrid { display: grid; gap: 12px; }
@media (min-width: 760px) { .formgrid { grid-template-columns: 1fr 1fr auto; align-items: center; } }


/* ==========================================================================
   8. PANEL UMUM (pengguna, profil) & RESPONSIF
   ========================================================================== */

.panel { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.panel > p { font-size: 13.5px; }

.fileline { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-top: 1px solid var(--line); }
.fileline:first-of-type { border-top: 0; }
.fileicon { font-size: 20px; color: var(--ink-2); }
.fileinfo { min-width: 0; }
.fileinfo b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fileinfo small { font-size: 12px; color: var(--ink-2); }
.filetail { margin-left: auto; }
.profilerow { display: flex; align-items: center; gap: 14px; }
.profilerow b { display: block; font-size: 14px; font-weight: 600; }
.profilerow small { display: block; font-size: 12px; color: var(--ink-2); }

/* --- Tablet & mobile: sidebar jadi bilah atas, tabel menyusut --- */
@media (max-width: 1023px) {
  .app { flex-direction: column; height: auto; min-height: 100vh; }
  .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
  }
  .brand { display: none; }
  .side-cta { flex: none; padding: 9px 16px; font-size: 12.5px; white-space: nowrap; }
  .nav { display: flex; flex: none; flex-wrap: wrap; gap: 6px; }
  .nav a { padding: 9px 12px; font-size: 12.5px; white-space: nowrap; background: rgba(255, 255, 255, .12); }
  .nav a .ni { width: auto; font-size: 13px; }
  .side-storage { display: none; }
  .topbar { height: 64px; padding: 0 14px; gap: 10px; }
  .topsearch { height: 42px; padding: 0 14px; }
  .main { padding: 0 14px 26px; }
  .app.has-fab .main { padding-bottom: 96px; }
  .catgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .fabwrap { right: 16px; bottom: 16px; gap: 10px; }
  .fab { width: 54px; height: 54px; font-size: 25px; }
  .pagehead { padding: 16px 0 14px; }
  .pagehead-t h1 { font-size: 21px; }
  .trow { grid-template-columns: minmax(0, 1fr) 116px 44px; }
  .trow .c-owner, .trow.thead .c-owner { display: none; }
  .trow .c-size, .trow.thead .c-size { display: none; }
  /* Grid kartu: 4 kolom di tablet, 3 kolom di ponsel */
  .items-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .items-grid.is-folders { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .detailforms { width: min(268px, 82vw); }
}

@media (min-width: 1024px) {
  .homestorage { display: none; }
}

/* ==========================================================================
   9. PENYEMPURNAAN — pembungkus tabel, tombol ikon, popover top bar
   ========================================================================== */

.table { display: block; width: 100%; }
.card-body { min-width: 0; }

.iconbtn {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.menu-wrap.pop > summary { font-size: 18px; }

@media (max-width: 640px) {
  .userchip span { display: none; }
  .trow { grid-template-columns: minmax(0, 1fr) 40px; }
  .trow .c-date, .trow.thead .c-date { display: none; }
  .c-name { gap: 10px; }
  .seclabel { font-size: 11.5px; }
  /* Tombol upload mengambang sudah menggantikan tombol sidebar di layar kecil */
  .side-cta { display: none; }
  .nav a { padding: 8px 11px; }
  .topbar-actions { gap: 0; }
  .ibtn { width: 36px; height: 36px; font-size: 16px; }
  .catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .catbox { justify-items: center; text-align: center; gap: 0; padding: 13px 6px; border-radius: 12px; }
  .catbox .cat-ico { width: 38px; height: 38px; margin-bottom: 6px; border-radius: 12px; font-size: 18px; }
  .catbox b { font-size: 12px; }
  .catbox small { font-size: 10.5px; }
  /* Kotak "Lainnya" tetap ada di desktop/tablet; di ponsel cukup 6 kategori utama = 2 baris */
  .catgrid .catbox.is-other { display: none; }
  /* Beranda ponsel: kotak kategori langsung di bawah header, tanpa panel Detail Penyimpanan & Akses Cepat */
  .homestorage, .homequick { display: none; }
  /* Header ponsel: hanya app drawer, pencarian, dan profil */
  .app.js-ready .drawer-btn { display: grid; }
  .app.js-ready .topbar-actions > .iconbtn, .app.js-ready .topbar-actions > .menu-wrap { display: none; }
  /* Sidebar berubah menjadi app drawer (off-canvas) */
  .app.js-ready .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    width: 264px;
    height: 100vh;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    padding: 18px 16px;
    transform: translateX(-106%);
    visibility: hidden;
    transition: transform .22s ease;
    box-shadow: 0 18px 40px rgba(9, 30, 66, .38);
  }
  .app.js-ready.drawer-open .sidebar { transform: none; visibility: visible; }
  .brand { display: flex; }
  .nav { display: grid; gap: 2px; }
  .nav a { padding: 11px 12px; font-size: 13.5px; }
  /* Beranda ponsel: kategori, item root, lalu 6 file terbaru */
  .homerecent { display: block; }
  /* Grid kartu 3 per baris di ponsel (termasuk mode galeri dan File Terbaru) */
  .items-grid, .items-grid.is-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  /* Kartu folder juga 3 per baris dengan ukuran kartu yang sengaja dikecilkan
     agar seragam dengan kartu berkas; lidah folder ikut dikecilkan */
  .items-grid.is-folders { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 20px; row-gap: 24px; column-gap: 10px; margin-bottom: 12px; }
  .item-card.is-folder { padding: 8px; border-radius: 2px 12px 12px 12px; }
  .item-card.is-folder::before { top: -16px; height: 18px; width: 46%; border-radius: 7px 8px 0 0; }
  .item-card { gap: 8px; padding: 8px; }
  /* Ikon jenis berkas disesuai karena kartu kini 3 per baris (kotak lebih kecil dari versi 2 kolom) */
  .thumbbox .glyph svg { width: 34px; height: 34px; }
  .card-name { font-size: 12.5px; }
  .card-meta { gap: 6px; font-size: 10.5px; }
  .chip-ext { padding: 1px 5px; font-size: 9px; }
  /* Tanggal di menu ⋮ tetap satu baris per tanggal (label + nilai sejajar) */
  .card-dates .cd-row { font-size: 10px; }
  .fabmenu { min-width: 228px; }
  .fabnew { padding: 2px 6px 8px; }
  /* Menu opsi ⋮ tampil sebagai panel bawah agar tidak terpotong tepi layar */
  .detailforms {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    width: auto;
    max-height: 76vh;
    overflow: auto;
    z-index: 120;
    padding: 10px;
    border-radius: 16px;
  }
  .item-card .card-actions .menu-wrap > summary { width: 32px; height: 32px; }

}


/* ==========================================================================
   10. UPLOAD PER BERKAS — progress di paling atas, aplikasi tetap bisa dipakai
   ========================================================================== */

.up-panel {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: min(560px, calc(100vw - 12px));
  max-height: 62vh;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
}
.up-panel[hidden] { display: none; }
.up-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.up-ico { flex: none; font-size: 15px; }
.up-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--ink); }
.up-sum { flex: none; font-size: 11.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.up-min, .up-close { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: var(--hover); color: var(--ink-2); font-size: 13px; line-height: 1; }
.up-min:hover, .up-close:hover { background: var(--hover-2); color: var(--ink); }
.up-total { height: 6px; border-radius: 999px; background: var(--hover-2); overflow: hidden; }
.up-total i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--purple); transition: width .2s ease; }
.up-list { display: grid; gap: 6px; max-height: 34vh; overflow-y: auto; }
.up-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 44px; align-items: center; gap: 8px; }
.up-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink); }
.up-bar { height: 6px; border-radius: 999px; background: var(--hover-2); overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; background: var(--purple); transition: width .15s linear; }
.up-pct { text-align: right; font-size: 11px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.up-msg { display: none; grid-column: 2 / 4; font-size: 11px; font-weight: 600; color: var(--danger); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-row.is-done .up-bar i { background: #0f9d58; }
.up-row.is-done .up-pct { color: #0f7b31; }
.up-row.is-err .up-bar, .up-row.is-err .up-pct { display: none; }
.up-row.is-err .up-msg { display: block; }
.up-panel.min .up-total, .up-panel.min .up-list, .up-panel.min .up-foot { display: none; }
.up-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.up-foot:not(:has(button:not([hidden]))) { display: none; }
.up-foot button { padding: 8px 14px; border-radius: 10px; background: var(--hover); color: var(--ink); font-size: 12px; }
.up-foot button:hover { background: var(--hover-2); }
.up-foot .up-reload, .up-foot .up-reload:hover { background: var(--purple); color: #fff; }
.up-foot .up-reload:hover { background: var(--purple-dark); }
.up-foot button[hidden] { display: none; }

/* Pemberitahuan singkat setelah upload lewat form biasa (tanpa JavaScript) */
.notice {
  display: block;
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: #e6f4ea;
  border: 1px solid rgba(15, 157, 88, .24);
  color: #0f7b31;
  font-size: 12.5px;
  font-weight: 600;
}
.notice.is-warn { background: var(--danger-soft); border-color: rgba(217, 48, 37, .22); color: #b3261e; }

/* Tombol tutup di dalam popup menu aksi (⋮) */
.detailforms .menu-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: var(--hover);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.detailforms .menu-close:hover { background: var(--hover-2); color: var(--ink); }

/* Menu ⋮ yang sedang terbuka tampil di lapisan paling atas kartu lain */
.item-card.menu-open .card-actions { z-index: 90; }
.tablewrap.menu-open { overflow: visible; }

/* Ukuran tanggal (kini tampil di dalam menu ⋮) mengikuti lebar panel agar selalu satu baris */
@container carddates (min-width: 150px) { .card-dates .cd-row { font-size: 11px; } }
@container carddates (min-width: 168px) { .card-dates .cd-row { font-size: 12px; } }
@container carddates (max-width: 133px) { .card-dates .cd-row { font-size: 9.2px; } }

/* Jumlah isi folder di pojok kiri bawah kotak pratinjau: tampil satu baris
   ("3 file · 2 folder") bila kotak cukup lebar, dan huruf mengecil di kotak sempit
   agar tidak pernah terpotong */
@container fprev (min-width: 132px) {
  .thumbbox.is-folder .fcount { flex-wrap: nowrap; }
  .thumbbox.is-folder .fcount .fc-sep { display: inline; }
}
@container fprev (max-width: 98px) { .thumbbox.is-folder .fcount { left: 5px; bottom: 5px; font-size: 9.5px; } }

@media (max-width: 640px) {
  .up-panel { width: calc(100vw - 10px); padding: 8px 10px; border-radius: 0 0 14px 14px; }
  .up-row { grid-template-columns: minmax(0, 1fr) 66px 38px; gap: 6px; }
  .up-list { max-height: 30vh; }
  .up-title { font-size: 12.5px; }
  .up-sum { font-size: 11px; }
}

/* ==========================================================================
   12. MODE PILIH — pilih semua/sebagian item lalu pindahkan sekaligus
   ========================================================================== */

/* Tombol pembuka mode pilih di header seksi */
.sechead-r { display: flex; align-items: center; gap: 10px; }
.pickselbtn {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.pickselbtn:hover { background: var(--hover); color: var(--ink); }
.pickselbtn[aria-pressed="true"] {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
  box-shadow: 0 2px 6px rgba(124, 58, 237, .25);
  transition: background .15s ease, box-shadow .15s ease;
}
.pickselbtn[aria-pressed="true"]:hover { box-shadow: 0 3px 10px rgba(124, 58, 237, .32); }

/* Kotak centang: tersembunyi sampai mode pilih aktif */
.pick { display: none; }
.item-card .pick {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 7;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 3px rgba(60, 64, 67, .3);
  cursor: pointer;
}
.item-card .pick input { width: 17px; height: 17px; margin: 0; accent-color: var(--purple); cursor: pointer; }
.items-container.sel-mode .item-card .pick { display: grid; }
/* Saat memilih: tombol ⋮ disembunyikan agar tidak salah klik */
.items-container.sel-mode .item-card .card-actions { display: none; }
.items-container.sel-mode .item-card.picked { outline: 2px solid var(--purple); outline-offset: -2px; background: #eaf1fd; }
.items-container.sel-mode .item-card.picked .card-name,
.items-container.sel-mode .item-card.picked .card-meta,
.items-container.sel-mode .item-card.picked .card-dates,
.items-container.sel-mode .item-card.picked .card-dates i,
.items-container.sel-mode .item-card.picked .card-dates b { color: var(--ink); }

/* Kolom kotak centang pada tampilan daftar */
.trow .c-pick { display: none; }
.items-container.sel-mode .trow { grid-template-columns: 32px minmax(0, 2.4fr) 100px 180px 132px 48px; }
.items-container.sel-mode .trow .c-pick { display: flex; align-items: center; justify-content: center; }
.items-container.sel-mode .trow .c-pick input { width: 17px; height: 17px; margin: 0; accent-color: var(--purple); cursor: pointer; }
.items-container.sel-mode .trow .c-act { visibility: hidden; }
.items-container.sel-mode .trow.picked { background: #eaf1fd; }
.items-container.sel-mode .item-card .card-thumb,
.items-container.sel-mode .trow .c-name { cursor: pointer; }

/* Umpan sentuh saat menahan kartu / baris (long-tap) */
.item-card.lt-pressing,
.trow.lt-pressing {
  transform: scale(0.96);
  opacity: 0.82;
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}
.items-container.sel-mode .item-card.picked,
.items-container.sel-mode .trow.picked {
  box-shadow: inset 0 0 0 2px var(--purple);
}

/* Bilah aksi massal (mengapung di bawah layar) */
.selbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: calc(100vw - 20px);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(60, 64, 67, .18), 0 2px 6px rgba(60, 64, 67, .1);
  transition: opacity .2s ease, transform .2s ease;
}
.selbar:not([hidden]) { opacity: 1; transform: translateX(-50%) translateY(0); }
.selbar[hidden] { display: none; }
.selcount { flex: none; font-size: 13px; font-weight: 700; color: var(--ink); }
.selform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seltarget { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.selbar select {
  max-width: 190px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
}
.selgo, .seldel, .selbtn {
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.selgo { background: var(--purple); color: #fff; }
.selgo:hover { background: var(--purple-dark); }
.seldel { background: var(--danger-soft); color: #b3261e; }
.seldel:hover { background: #fbd9d7; }
.seldel.fav { background: #fef7e0; color: #8a6100; }
.seldel.fav:hover { background: #fdeec3; }
.selbtn { background: var(--hover); color: var(--ink-2); }
.selbtn:hover { background: var(--hover-2); color: var(--ink); }
.selgo:disabled, .seldel:disabled { opacity: .45; cursor: not-allowed; }
/* FAB disembunyikan selama memilih agar tidak menutupi bilah aksi */
.app.sel-on .fabwrap { display: none; }

@media (max-width: 1023px) {
  .items-container.sel-mode .trow { grid-template-columns: 32px minmax(0, 1fr) 116px 44px; }
}

@media (max-width: 640px) {
  .items-container.sel-mode .trow { grid-template-columns: 32px minmax(0, 1fr) 40px; }
  .selbar { left: 8px; right: 8px; bottom: 10px; transform: none; max-width: none; gap: 6px; padding: 8px; }
  .selform { gap: 6px; }
  .selcount { font-size: 12.5px; }
  .selbar select { max-width: 132px; }
  .selgo, .seldel, .selbtn { padding: 7px 11px; font-size: 12px; }
  .app.sel-on .main { padding-bottom: 116px; }
}