/* Evalluy Cloud — kontrak DESIGN.md "Ruang Gelap" + revisi "Ramah" (2026-10-26). Semua warna dari token di :root; jarak 4/8/12/16/24/32/48. */
:root {
  --bg: #16171A;
  --surface-1: #1C1D21;
  --surface-2: #24262B;
  --surface-3: #2E3036;
  --scrim: #0E0F11;
  --danger-bg: #2A1C1B;
  --row-hover: #202226;
  --row-selected: #2B2820;
  --border: #33363C;
  --border-control: #6E727A;
  --text: #E6E4DF;
  --text-muted: #9E9B94;
  --text-disabled: #7C7972;
  --accent: #E8B04A;
  --on-accent: #16171A;
  --danger: #F2766B;
  --success: #6CC58A;
  --stage: #2A2C31;
  /* Warna kategori jenis file: hanya untuk kotak ikon dan meteran kuota (DESIGN § 4) */
  --type-folder: #E8B04A; --type-folder-bg: #2E2717;
  --type-image: #5CC8B8; --type-image-bg: #14302B;
  --type-video: #B39DF0; --type-video-bg: #251F3A;
  --type-doc: #7AB2F0; --type-doc-bg: #172636;
  --type-archive: #F0A26B; --type-archive-bg: #33251A;
  --type-other: var(--text-muted); --type-other-bg: var(--surface-2);
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-control: 8px;
  --r-dialog: 12px;
  --shadow-float: 0 8px 24px rgb(0 0 0 / .45);
  --control-h: 36px;
  --icon-btn: 32px;
  --row-h: 48px;
  --tile: 28px;
  color-scheme: dark;
}
/* Plus Jakarta Sans 2.7.1 (OFL, static/fonts/OFL.txt), disimpan sendiri: tidak pernah dari Google Fonts (DESIGN § 5). */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@media (max-width: 719px) {
  :root { --control-h: 44px; --icon-btn: 44px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/20px var(--font-ui); }
h1, h2, p, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-2); padding: 0 var(--s1); border-radius: var(--r-control); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.stack { display: grid; gap: var(--s3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s2); top: var(--s2); transform: translateY(-200%); background: var(--surface-2); color: var(--text); padding: var(--s2) var(--s3); border-radius: var(--r-control); z-index: 50; }
.skip-link:focus { transform: none; }

/* Ikon (sprite Lucide, stroke 1.5, currentColor) */
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-nav { width: 20px; height: 20px; }
.icon-brand { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.icon-empty { width: 32px; height: 32px; color: var(--text-muted); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Tombol */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--control-h); padding: 0 var(--s4); border: 1px solid transparent; border-radius: var(--r-control); font: 600 14px/20px var(--font-ui); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-control); font-weight: 500; }
.btn-secondary:hover { background: var(--row-hover); }
.btn-discord { width: 100%; background: var(--surface-2); color: var(--text); border-color: var(--border-control); }
.btn-discord:hover { border-color: var(--text-muted); }
.btn:disabled { background: var(--surface-2); color: var(--text-disabled); border-color: var(--border); cursor: not-allowed; }
.icon-btn { display: inline-grid; place-items: center; width: var(--icon-btn); height: var(--icon-btn); padding: 0; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-muted); cursor: pointer; list-style: none; }
.icon-btn:hover { background: var(--row-hover); color: var(--text); }
summary.icon-btn::-webkit-details-marker { display: none; }
summary.icon-btn::marker { content: ""; }

/* Isian */
.label { font: 500 13px/18px var(--font-ui); color: var(--text); }
.input { min-height: var(--control-h); padding: 0 var(--s3); border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--bg); color: var(--text); font: 400 14px/20px var(--font-ui); }
.choice { display: flex; align-items: center; gap: var(--s2); min-height: var(--control-h); }
.choice input { accent-color: var(--accent); }

/* Halaman tengah: Masuk, Belum punya akses, Galat */
.page-center { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--s5) var(--s4); }
.center-card { width: 100%; max-width: 360px; display: grid; gap: var(--s4); }
.center-card-wide { max-width: 60ch; }
.product { display: flex; align-items: center; gap: var(--s3); font: 800 28px/36px var(--font-ui); letter-spacing: -0.015em; }
.title { font: 800 22px/28px var(--font-ui); letter-spacing: -0.015em; text-wrap: balance; }
/* Nama produk = tanda kecil (ikon folder terisi, sama dengan favicon) + teks; bukan logo gambar (DESIGN § 3) */
.brand-mark { display: inline-grid; place-items: center; flex: none; width: var(--tile); height: var(--tile); border-radius: var(--r-control); background: var(--type-folder-bg); color: var(--type-folder); }
.brand-mark-lg { width: 40px; height: 40px; }
.brand-mark .icon { fill: currentColor; stroke: none; }
.brand-mark-lg .icon { width: 20px; height: 20px; }
.brand-sub { color: var(--text-muted); font-weight: 500; }
.lede { color: var(--text-muted); }
.hint { color: var(--text-muted); font-size: 13px; line-height: 18px; }
.legal { color: var(--text-muted); font-size: 13px; line-height: 18px; }
.legal a { color: var(--text-muted); }
.notice { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3); border-radius: var(--r-control); }
.notice-danger, .banner { border: 1px solid var(--danger); background: var(--danger-bg); color: var(--danger); }
.notice .icon { margin-top: 2px; }
.who { display: flex; align-items: center; gap: var(--s3); }
.who p { min-width: 0; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.actions form { display: contents; }

/* Avatar */
.avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; }
.avatar-lg { width: 40px; height: 40px; }
.avatar-initials { display: inline-grid; place-items: center; background: var(--surface-2); color: var(--text); font: 500 12px/16px var(--font-ui); }
.avatar-lg.avatar-initials { font: 600 16px/24px var(--font-ui); }

/* Kerangka aplikasi — desktop ≥ 960 px */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) var(--s3); overflow-y: auto; background: var(--surface-1); }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--icon-btn); padding: 0 var(--s2); }
.product-name { display: flex; align-items: center; gap: var(--s2); min-width: 0; font: 800 17px/24px var(--font-ui); letter-spacing: -0.01em; }
.drawer-close { display: none; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.nav-item { display: flex; align-items: center; gap: var(--s3); min-height: var(--control-h); padding: 0 var(--s2); border-radius: var(--r-control); color: var(--text-muted); font-weight: 500; text-decoration: none; }
.nav-item:hover { background: var(--row-hover); color: var(--text); }
.nav-item.is-active { background: var(--row-selected); color: var(--text); font-weight: 600; }
.nav-item.is-active .icon { color: var(--accent); }
.nav-item.is-disabled, .nav-item.is-disabled:hover { background: transparent; color: var(--text-disabled); cursor: default; }
.badge-soon { margin-left: auto; font: 500 12px/16px var(--font-ui); color: var(--text-disabled); }
.sidebar-bottom { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border); }
.quota { display: grid; gap: var(--s2); padding: 0 var(--s2); }
.quota-text { color: var(--text-muted); font-size: 13px; line-height: 18px; }
.quota-warn { color: var(--danger); }
meter { display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--border); appearance: none; -webkit-appearance: none; }
meter::-webkit-meter-bar { height: 4px; border: 0; border-radius: 2px; background: var(--border); }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value { background: var(--accent); border-radius: 2px; }
meter::-webkit-meter-even-less-good-value { background: var(--danger); border-radius: 2px; }
meter::-moz-meter-bar { background: var(--accent); border-radius: 2px; }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--danger); }
/* ≥ 90 %: isi merah ditentukan oleh near_full di server (sama dengan teks "Hampir penuh"), bukan batas high pada <meter>. */
meter.is-near-full::-webkit-meter-optimum-value, meter.is-near-full::-webkit-meter-suboptimum-value, meter.is-near-full::-webkit-meter-even-less-good-value { background: var(--danger); }
meter.is-near-full::-moz-meter-bar { background: var(--danger); }
.account { position: relative; display: flex; align-items: center; gap: var(--s2); padding: 0 0 0 var(--s2); }
.account-text { flex: 1; min-width: 0; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-role { color: var(--text-muted); font: 500 12px/16px var(--font-ui); }
/* Panel menu akun menempel di tepi kiri baris akun (bukan tepi kanan tombol ⋯, yang membuatnya keluar dari layar di sidebar 240 px) dan membuka ke atas. */
.menu-panel { position: absolute; left: 0; bottom: calc(100% + var(--s1)); z-index: 20; display: grid; min-width: 240px; padding: var(--s1); border-radius: var(--r-control); background: var(--surface-2); box-shadow: var(--shadow-float); }
.menu-panel form { display: contents; }
.menu-items { display: grid; }
.menu-quota { display: none; gap: var(--s2); padding: var(--s2) var(--s3); margin-bottom: var(--s1); border-bottom: 1px solid var(--border); }
.menu-item { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: var(--control-h); padding: 0 var(--s3); border: 0; border-radius: var(--r-control); background: transparent; color: var(--text); font: 400 14px/20px var(--font-ui); text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-3); }
.menu-item:disabled { color: var(--text-disabled); cursor: not-allowed; }
.menu-item:disabled:hover { background: transparent; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar-wrap { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); background: var(--bg); }
.topbar { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: 0 var(--s5); }
.menu-toggle { display: none; }
.breadcrumb { min-width: 0; max-width: 100%; }
.page-title { overflow: hidden; text-overflow: ellipsis; font: 800 22px/28px var(--font-ui); letter-spacing: -0.015em; text-wrap: balance; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: var(--s2); }
.banner { display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s4) var(--s5) 0; padding: var(--s3); border-radius: var(--r-control); }
.banner p { color: var(--text); }
.banner .icon { margin-top: 2px; }
.content { flex: 1; padding: var(--s5); }
.content:focus { outline: none; }
.empty { display: grid; justify-items: center; gap: var(--s2); max-width: 60ch; margin: var(--s7) auto; text-align: center; }
.empty-title { font: 700 16px/24px var(--font-ui); }
.empty-text { color: var(--text-muted); }
.bottombar { display: none; }

/* ===== Bagian 2: daftar file, dialog, antrean (spec Bagian 2 § 11) ===== */
[hidden] { display: none !important; }
html:not(.js) .js-only { display: none !important; }
.noscript { margin-bottom: var(--s4); }

/* Bilah atas: breadcrumb + judul, cari, Folder baru, Unggah */
/* Breadcrumb kecil di atas judul (DESIGN § 3, revisi 2026-10-26): judul panjang tidak lagi menghimpit "File saya". */
.topbar-title { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.topbar-title .page-title { min-width: 0; max-width: 100%; }
.crumbs { display: flex; align-items: center; gap: var(--s1); min-width: 0; margin: 0; padding: 0; list-style: none; font: 500 13px/18px var(--font-ui); }
/* Basis 0 + batas max-content: segmen pendek ("File saya") tampil utuh dulu, segmen panjang berbagi sisa ruang. */
.crumbs li { display: flex; flex: 1 1 0; align-items: center; gap: var(--s1); min-width: 0; max-width: max-content; color: var(--text-muted); }
.crumb-sep { flex: none; }
.crumbs a { overflow: hidden; max-width: 160px; color: var(--text-muted); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumb-back { display: none; }
.searchbar { display: flex; align-items: flex-end; gap: var(--s2); padding: 0 var(--s5) var(--s3); }
.js .searchbar:not([data-open]) { display: none; }
.field { flex: 1; display: grid; gap: var(--s1); min-width: 0; max-width: 480px; }
.field .input { width: 100%; }
.field-error { display: flex; align-items: flex-start; gap: var(--s1); color: var(--danger); font-size: 13px; line-height: 18px; }
.field-error .icon { margin-top: 1px; }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); font-weight: 500; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-danger-solid { background: var(--danger); color: var(--on-accent); }
.notice-info { margin-bottom: var(--s4); border: 1px solid var(--border-control); background: var(--surface-1); color: var(--text); }
.search-scope { margin-bottom: var(--s3); }

/* Daftar file (DESIGN § 3): baris 40 px, kepala lengket, folder di atas */
.files { width: 100%; border-collapse: collapse; table-layout: fixed; }
.files th, .files td { height: var(--row-h); padding: 0 var(--s2); border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.files thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); color: var(--text-muted); font: 600 13px/18px var(--font-ui); white-space: nowrap; }
.files th a { display: inline-flex; align-items: center; gap: var(--s1); color: inherit; text-decoration: none; }
.files th a:hover { color: var(--text); }
.files tbody tr:hover { background: var(--row-hover); }
.files tbody tr.is-selected { background: var(--row-selected); }
.files input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.col-check { width: 40px; }
.col-ukuran { width: 112px; }
.col-diubah, .col-dihapus { width: 136px; }
.col-sisa { width: 232px; }
.col-menu { width: 48px; }
.files .col-ukuran, .files .col-diubah, .files .col-dihapus, .files .col-menu { text-align: right; }
.files-trash .col-sisa { color: var(--text-muted); }
.col-nama { overflow: hidden; }
.item-link, .item-static { display: flex; align-items: center; gap: var(--s3); min-width: 0; color: var(--text); text-decoration: none; }
.item-link:hover .item-name { text-decoration: underline; }
.item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files tr[data-kind="folder"] .item-name { font-weight: 600; }
.item-location, .item-meta { display: block; overflow: hidden; padding-left: calc(var(--tile) + var(--s3)); color: var(--text-muted); font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }

/* Kotak ikon jenis file (DESIGN § 6): bentuk ikon tetap pembeda utama, warna penanda tambahan */
.type-tile { display: inline-grid; place-items: center; flex: none; width: var(--tile); height: var(--tile); border-radius: var(--r-control); background: var(--type-other-bg); color: var(--type-other); }
.type-tile .icon { stroke-width: 1.75; }
.type-folder { background: var(--type-folder-bg); color: var(--type-folder); }
.type-folder .icon { fill: currentColor; stroke: none; }
.type-file-image { background: var(--type-image-bg); color: var(--type-image); }
.type-file-play { background: var(--type-video-bg); color: var(--type-video); }
.type-file-type, .type-file-text { background: var(--type-doc-bg); color: var(--type-doc); }
.type-file-archive { background: var(--type-archive-bg); color: var(--type-archive); }

/* Area klik baris (DESIGN § 3): folder = seluruh baris, file = seluruh sel Nama. Tautan nama diregangkan lewat ::after,
   bukan onclick di <tr>, jadi tetap satu tautan untuk keyboard, pembaca layar, Ctrl+klik, dan tanpa JS. */
.files tbody tr { position: relative; }
.files tr[data-kind="folder"] .item-link::after, .files tr[data-kind="file"] .item-link::after, .files tr[data-bot-row] .item-link::after { content: ""; position: absolute; inset: 0; }
.files tr[data-kind="file"] .col-nama, .files tr[data-bot-row] .col-nama { position: relative; }
.files tbody input, .files tbody button { position: relative; z-index: 1; }
.item-meta { display: none; }
.rename { display: grid; gap: var(--s1); }
.rename-input { width: 100%; }
.bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-control); background: var(--surface-1); }
.bulk-count { margin-right: auto; font-weight: 600; }

/* Memuat (DESIGN § 9): baris abu statis ≤ 300 ms, lalu "Memuat…" */
.content[data-state="pending"] .files tbody td > * { visibility: hidden; }
.content[data-state="pending"] .files tbody td { background: var(--surface-1); }
.content[data-state="loading"] > * { display: none; }
.content[data-state="loading"]::before { content: "Memuat…"; display: block; margin: var(--s7) auto; color: var(--text-muted); text-align: center; }

/* Lapisan melayang: menu, dialog, toast, antrean (satu-satunya pemakai bayangan) */
@keyframes muncul { from { opacity: 0; transform: translateY(4px); } }
.float-menu:not([hidden]), .dialog[open], .toast:not([hidden]) { animation: muncul 120ms ease-out; }
.float-menu { position: fixed; z-index: 60; display: grid; min-width: 200px; padding: var(--s1); border-radius: var(--r-control); background: var(--surface-2); box-shadow: var(--shadow-float); }
.menu-sep { height: 1px; margin: var(--s1) 0; border: 0; background: var(--border); }
.menu-item-danger { color: var(--danger); }
.dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--r-dialog); background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-float); }
.dialog-wide { width: min(560px, calc(100vw - 32px)); }
.dialog::backdrop { background: var(--scrim); opacity: .7; }
.dialog-form { display: grid; gap: var(--s4); padding: var(--s5); }
.dialog-title { font: 700 16px/24px var(--font-ui); overflow-wrap: anywhere; }
.dialog-text { color: var(--text-muted); overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: space-between; gap: var(--s3); }
.picker-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); color: var(--text-muted); }
.picker-crumb { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.picker-here { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.picker-list { display: grid; grid-template-columns: minmax(0, 1fr); max-height: 320px; margin: 0; padding: var(--s1); overflow: auto; list-style: none; border: 1px solid var(--border); border-radius: var(--r-control); }
.picker-item { display: flex; align-items: center; gap: var(--s2); width: 100%; min-width: 0; min-height: var(--control-h); padding: 0 var(--s3); border: 0; border-radius: var(--r-control); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.picker-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-item:hover, .picker-item:focus-visible { background: var(--surface-3); }
.picker-item:disabled { background: transparent; color: var(--text-disabled); cursor: not-allowed; }
.picker-empty { padding: var(--s3); color: var(--text-muted); }
.detail-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; }
.detail-list dt { color: var(--text-muted); }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.toast { position: fixed; left: var(--s5); bottom: var(--s5); z-index: 70; display: flex; align-items: center; gap: var(--s3); max-width: min(480px, calc(100vw - 32px)); padding: var(--s2) var(--s2) var(--s2) var(--s4); border: 1px solid var(--border); border-radius: var(--r-dialog); background: var(--surface-2); box-shadow: var(--shadow-float); }
.toast p { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast > .icon { color: var(--success); }
.toast.is-error { border-color: var(--danger); }
.toast.is-error > .icon { color: var(--danger); }
.toast-action { min-height: var(--control-h); padding: 0 var(--s2); border: 0; border-radius: var(--r-control); background: transparent; color: var(--accent); font: 600 14px/20px var(--font-ui); cursor: pointer; }
.toast-action:hover { background: var(--surface-3); }
.queue { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 65; width: 360px; max-width: calc(100vw - 32px); border-radius: var(--r-dialog); background: var(--surface-2); box-shadow: var(--shadow-float); }
.queue-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s4); }
.queue-title { flex: 1; min-width: 0; font: 600 14px/20px var(--font-ui); }
.queue[data-collapsed] .queue-list { display: none; }
.queue[data-collapsed] [data-queue-toggle] .icon { transform: rotate(180deg); }
.queue-list, .queue-sub { margin: 0; padding: 0; list-style: none; }
.queue-list { max-height: 320px; overflow: auto; padding-bottom: var(--s2); border-top: 1px solid var(--border); }
.queue-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: var(--s1) var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s4); }
.queue-sub .queue-item { padding-left: var(--s6); }
.queue-icon { display: inline-grid; color: var(--text-muted); }
.queue-item.is-done .queue-icon { color: var(--success); }
.queue-item.is-error .queue-icon, .queue-item.is-error .queue-status { color: var(--danger); }
.queue-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-status { grid-column: 2; color: var(--text-muted); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.queue-item progress { grid-column: 2; }
.queue-group-toggle { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); width: 100%; min-height: var(--control-h); padding: 0 var(--s2) 0 var(--s4); border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.queue-group-toggle:hover { background: var(--surface-3); }
.queue-group-toggle .queue-status { grid-column: auto; }
progress { display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--border); appearance: none; -webkit-appearance: none; }
progress::-webkit-progress-bar { border-radius: 2px; background: var(--border); }
progress::-webkit-progress-value { border-radius: 2px; background: var(--accent); }
progress::-moz-progress-bar { border-radius: 2px; background: var(--accent); }
.drop-overlay { position: fixed; inset: var(--s3); z-index: 55; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: var(--r-dialog); background: var(--bg); opacity: .92; pointer-events: none; }
.drop-overlay p { padding: var(--s4); font: 600 16px/24px var(--font-ui); text-align: center; overflow-wrap: anywhere; }

/* ≥ 720 px: isi yang menggulir, sehingga kepala tabel lengket di bawah bilah atas */
@media (min-width: 720px) {
  .main { height: 100vh; height: 100dvh; }
  .content { min-height: 0; overflow: auto; }
  .files thead th { top: calc(-1 * var(--s5)); }
  /* Aksi massal menimpa baris kepala (tidak memakan ruang), jadi baris tidak bergeser saat centang pertama. */
  .bulkbar { position: sticky; top: calc(-1 * var(--s5)); z-index: 3; flex-wrap: nowrap; height: var(--row-h); margin: 0 0 calc(-1 * var(--row-h)) var(--s6); padding: 0 var(--s3); }
}

/* Tablet 720–959 px: rel ikon 64 px, kuota pindah ke menu akun */
@media (min-width: 720px) and (max-width: 959px) {
  .shell { grid-template-columns: 64px minmax(0, 1fr); }
  .sidebar { align-items: center; padding: var(--s4) var(--s2); }
  .sidebar-top { padding: 0; }
  .brand-text, .badge-soon, .quota, .account-text { display: none; }
  .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-item { justify-content: center; width: 44px; padding: 0; }
  .account { position: static; flex-direction: column; padding: 0; }
  .menu { position: relative; }
  .menu-quota { display: grid; }
}

/* HP < 720 px: laci navigasi, bilah bawah lengket */
@media (max-width: 719px) {
  .shell { display: block; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(304px, 85vw); height: auto; box-shadow: var(--shadow-float); transform: translateX(-100%); visibility: hidden; transition: transform 120ms ease-out, visibility 0s linear 120ms; }
  .sidebar[data-open] { transform: none; visibility: visible; transition: transform 120ms ease-out; }
  .drawer-close, .menu-toggle { display: inline-grid; }
  .main { min-height: 100vh; min-height: 100dvh; }
  .scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); opacity: .7; }
  .topbar { gap: var(--s1); padding: 0 var(--s2); }
  .btn-upload { display: none; }
  .btn-search { width: var(--icon-btn); padding: 0; }
  .btn-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .content { padding: var(--s4); }
  .banner { margin: var(--s3) var(--s4) 0; }
  .bottombar { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); border-top: 1px solid var(--border); background: var(--surface-1); }
  .bar-quota { flex: 1; display: grid; gap: var(--s1); min-width: 0; }
  .legal a { display: inline-flex; align-items: center; min-height: var(--control-h); }
}

/* Bagian 2 — desktop: toast bergeser keluar dari sidebar 240 px */
@media (min-width: 960px) {
  .toast { left: calc(240px + var(--s5)); }
}

/* Bagian 2 — tablet */
@media (min-width: 720px) and (max-width: 959px) {
  .toast { left: calc(64px + var(--s5)); }
  .col-diubah, .col-dihapus { display: none; }
  .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .btn-collapse { width: var(--control-h); padding: 0; }
}

/* Bagian 2 — HP: baris dua tingkat 56 px, bilah aksi massal menggantikan bilah bawah */
@media (max-width: 719px) {
  .topbar-title { flex-direction: row; align-items: center; gap: 0; }
  .files .item-link { -webkit-touch-callout: none; }  /* tekan lama = mode pilih, bukan pratinjau tautan iOS */
  .crumbs { display: none; }
  .crumb-back { display: inline-grid; place-items: center; width: var(--icon-btn); height: var(--icon-btn); color: var(--text-muted); }
  .crumb-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .searchbar { padding: 0 var(--s4) var(--s3); }
  .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .btn-collapse { width: var(--control-h); padding: 0; }
  .files thead { display: none; }
  .files td { height: 56px; }
  .col-check, .col-ukuran, .col-diubah, .col-dihapus, .col-sisa { display: none; }
  .is-selecting .files .col-check { display: table-cell; }
  .item-meta { display: block; }
  .col-menu { width: 52px; }
  .bulkbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; padding: var(--s2) var(--s4); border-top: 1px solid var(--border); border-radius: 0; }
  .toast { left: var(--s4); right: var(--s4); bottom: calc(var(--control-h) + var(--s5)); max-width: none; }
  .queue { left: var(--s2); right: var(--s2); bottom: calc(var(--control-h) + var(--s4)); width: auto; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity !important; animation: none !important; }
}

/* ===== Bagian 3: berbagi dan ZIP (spec Bagian 3 § 8) ===== */
.nav-item { position: relative; }
.badge-count { margin-left: auto; min-width: 20px; padding: 0 var(--s1); border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 12px/20px var(--font-ui); text-align: center; }
.item-line { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.item-line .item-link { flex: 0 1 auto; }
.badge-shared, .badge-new { flex: none; display: inline-flex; align-items: center; gap: var(--s1); font: 500 12px/16px var(--font-ui); }
.badge-shared { color: var(--text-muted); }
.badge-new { padding: 0 var(--s2); border-radius: 999px; font-weight: 700; background: var(--accent); color: var(--on-accent); }
.share-info { margin-bottom: var(--s3); }
.col-pemilik { width: 160px; }
.owner { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files .col-pemilik { color: var(--text-muted); }
.dialog-actions-end { display: flex; gap: var(--s3); }
.share-body { display: grid; gap: var(--s3); }
.share-modes { display: grid; gap: var(--s1); margin: 0; padding: 0; border: 0; }
.choice-disabled { color: var(--text-disabled); gap: var(--s2); }
.share-people { display: grid; gap: var(--s1); margin-left: var(--s5); }
.people-list { display: grid; max-height: 220px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.person { display: flex; align-items: center; gap: var(--s2); min-height: var(--control-h); }
.person input { accent-color: var(--accent); }
.person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-user { color: var(--text-muted); font-size: 13px; }
@keyframes sorot { from { background: var(--row-selected); } }
tr[data-highlight] { animation: sorot 3s ease-out; }
@media (prefers-reduced-motion: reduce) {
  tr[data-highlight] { background: var(--row-selected); }
}
@media (min-width: 720px) and (max-width: 959px) {
  .badge-count { position: absolute; top: 0; right: 0; min-width: 16px; font-size: 11px; line-height: 16px; }
  .col-pemilik { display: none; }
}
@media (max-width: 719px) {
  .col-pemilik { display: none; }
  .badge-shared-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .share-people { margin-left: var(--s4); }
}

/* Bagian 4 — Admin (spec Bagian 4 § 8) */
.tabs { display: flex; gap: var(--s1); margin-bottom: var(--s4); border-bottom: 1px solid var(--border); }
.tab { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--s3); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-muted); text-decoration: none; }
.tab:hover { color: var(--text); }
.tab.is-active { border-bottom-color: var(--accent); color: var(--text); }
.admin-summary { margin-bottom: var(--s4); color: var(--text-muted); }
.admin-summary .num { color: var(--text); }
.admin-notice, .admin-hint { margin-bottom: var(--s3); }
.col-id { width: 144px; }
.col-peran { width: 72px; }
.col-pakai { width: 152px; }
.col-status { width: 120px; }
.col-server { width: 72px; }
.col-login { width: 120px; }
.files .col-id { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.files .col-peran, .files .col-server, .files .col-login { color: var(--text-muted); }
.files .col-login { white-space: nowrap; }
.usage { display: grid; gap: var(--s1); }
.pill { display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s2); border: 1px solid var(--border-control); border-radius: 999px; font: 500 12px/18px var(--font-ui); color: var(--text-muted); white-space: nowrap; }
.pill-aktif { border-color: var(--success); color: var(--success); }
.pill-diblokir, .pill-tak_terbaca { border-color: var(--danger); color: var(--danger); }
@media (max-width: 1199px) {
  .col-id, .col-server { display: none; }
}
@media (max-width: 959px) {
  .col-peran, .col-login { display: none; }
}
@media (max-width: 719px) {
  .col-pakai, .col-status { display: none; }
}

/* Bagian 4 — tab Log */
.log-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.log-hint { margin-bottom: var(--s3); }
.log-nav { display: flex; gap: var(--s4); margin-top: var(--s4); }
.col-waktu { width: 176px; }
.col-aktor { width: 144px; }
.col-aksi { width: 176px; }
.files-log .item-meta { padding-left: 0; }
@media (max-width: 959px) {
  .col-waktu, .col-aktor, .col-aksi { display: none; }
  .files-log .item-meta { display: block; }
  .files-log td { height: 56px; }
}

/* Bagian 8 — tab File bot */
.bot-hint { margin-bottom: var(--s3); }
.col-botsisa { width: 144px; }
.files .col-botsisa { color: var(--text-muted); white-space: nowrap; }
.col-botaksi { width: 176px; }
.files .col-botaksi { text-align: right; }
@media (max-width: 959px) {
  .col-botaksi { width: 52px; }
}
@media (max-width: 719px) {
  .col-botsisa { display: none; }
}