/* ===== Tema: semua warna lewat variabel. :root = terang, [data-theme=dark] = gelap ===== */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-deep: #f8fafd;
  --surface: #ffffff;
  --surface-2: #f8fafd;
  --text: #1f1f1f;
  --muted: #444746;
  --line: #e0e3e7;
  --line-soft: #f1f3f4;
  --blue: #0b57d0;
  --on-blue: #ffffff;
  --hover: rgba(31,31,31,.06);
  --hover-strong: rgba(31,31,31,.1);
  --selected: #c2e7ff;
  --on-selected: #001d35;
  --nav: #c2e7ff;
  --search: #e9eef6;
  --search-focus: #ffffff;
  --input-bg: #ffffff;
  --input-border: #747775;
  --input-border-soft: #c4c7c5;
  --placeholder: #5f6368;
  --icon: #444746;
  --brand-text: #444746;
  --brand-icon: #0b57d0;
  --shadow: rgba(60,64,67,.3);
  --shadow-2: rgba(60,64,67,.15);
  --overlay: rgba(32,33,36,.42);
  --badge-viewer-bg: #e8f0fe; --badge-viewer-fg: #1967d2;
  --badge-editor-bg: #e6f4ea; --badge-editor-fg: #137333;
  --flash-bg: #e8f0fe; --flash-fg: #174ea6;
  --error: #b3261e; --danger-border: #f2b8b5;
  --ok: #1e8e3e; --warn: #f9ab00; --full: #d93025; --track: #e0e3e7;
  --cap-bg: #f1f3f4; --cap-line: #bdc1c6;
  --cap-1: #202124; --cap-2: #174ea6; --cap-3: #0d652d; --cap-4: #b06000; --cap-5: #5f6368;
  --ic-file: #5f6368; --ic-fold: #ffffff; --ic-audio: #137333; --ic-video: #d93025;
  --glass: rgba(255,255,255,.8); --glass-solid: rgba(255,255,255,.92); --glass-border: rgba(255,255,255,.55);
  --wall-app-scrim: rgba(255,255,255,.35); --wall-head: rgba(255,255,255,.94); --wall-side: rgba(255,255,255,.55);
  --player-bg: #000000;
  --toast-bg: #323232; --toast-fg: #f2f2f2; --error-bg: #b3261e; --error-fg: #ffffff;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1f1f1f;
  --bg-deep: #131314;
  --surface: #282a2c;
  --surface-2: #282a2c;
  --text: #e3e3e3;
  --muted: #c4c7c5;
  --line: #444746;
  --line-soft: #333537;
  --blue: #a8c7fa;
  --on-blue: #062e6f;
  --hover: rgba(255,255,255,.08);
  --hover-strong: rgba(255,255,255,.12);
  --selected: #004a77;
  --on-selected: #c2e7ff;
  --nav: #004a77;
  --search: #282a2c;
  --search-focus: #333537;
  --input-bg: #1f1f1f;
  --input-border: #8e918f;
  --input-border-soft: #444746;
  --placeholder: #8e918f;
  --icon: #c4c7c5;
  --brand-text: #e3e3e3;
  --brand-icon: #a8c7fa;
  --shadow: rgba(0,0,0,.6);
  --shadow-2: rgba(0,0,0,.35);
  --overlay: rgba(0,0,0,.6);
  --badge-viewer-bg: #0842a0; --badge-viewer-fg: #d3e3fd;
  --badge-editor-bg: #0f5223; --badge-editor-fg: #c4eed0;
  --flash-bg: #004a77; --flash-fg: #c2e7ff;
  --error: #f2b8b5; --danger-border: #8c1d18;
  --ok: #6dd58c; --warn: #fdd663; --full: #f28b82; --track: #444746;
  --cap-bg: #333537; --cap-line: #5f6368;
  --cap-1: #e3e3e3; --cap-2: #a8c7fa; --cap-3: #6dd58c; --cap-4: #fdd663; --cap-5: #c4c7c5;
  --ic-file: #c4c7c5; --ic-fold: #282a2c; --ic-audio: #6dd58c; --ic-video: #f28b82;
  --glass: rgba(31,31,31,.72); --glass-solid: rgba(31,31,31,.9); --glass-border: rgba(255,255,255,.12);
  --wall-app-scrim: rgba(19,19,20,.55); --wall-head: rgba(31,31,31,.94); --wall-side: rgba(31,31,31,.6);
  --toast-bg: #e3e3e3; --toast-fg: #1f1f1f; --error-bg: #f2b8b5; --error-fg: #601410;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: var(--bg); }
body {
  font-family: Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
}
button, input, select, textarea { font-family: inherit; font-size: 14px; color: var(--text); }
input, select, textarea { background: var(--input-bg); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--blue); }
input[type=file] { background: transparent; color: var(--muted); }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--text); }
.app { display: flex; flex-direction: column; height: 100vh; }
.top {
  height: 64px; display: flex; align-items: center; gap: 12px; padding: 8px 16px; flex: none;
  background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 220px; font-size: 22px; color: var(--brand-text); }
.brand svg { color: var(--brand-icon); }
.logo-img { width: 32px; height: 32px; object-fit: contain; display: block; border-radius: 6px; }
.brand.center .logo-img { width: 36px; height: 36px; }
.search { flex: 1; display: flex; justify-content: center; }
.search input {
  width: min(720px, 100%); height: 46px; border: 0; border-radius: 24px;
  background: var(--search); color: var(--text); padding: 0 20px;
}
.search input:focus {
  outline: none; background: var(--search-focus);
  box-shadow: 0 1px 2px var(--shadow), 0 2px 6px var(--shadow-2);
}
.theme-toggle {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent;
  color: var(--icon); display: grid; place-items: center; padding: 0;
}
.theme-toggle:hover { background: var(--hover); }
.theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
.theme-float { position: fixed; top: 16px; right: 16px; z-index: 5; color: #fff; background: rgba(0,0,0,.25); }
.theme-float:hover { background: rgba(0,0,0,.4); }
.public .top .theme-toggle, .zip-head .theme-toggle { margin-left: auto; }
.theme-float.theme-plain { color: var(--icon); background: transparent; }
.theme-float.theme-plain:hover { background: var(--hover); }
.userbox { position: relative; }
.userbox > summary {
  list-style: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
}
.userbox > summary::-webkit-details-marker { display: none; }
.ava {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue); color: var(--on-blue); display: grid; place-items: center; font-weight: 500;
}
.userbox .menu, .more .menu, .create-menu {
  background: var(--surface); color: var(--text); border-radius: 8px;
  box-shadow: 0 1px 2px var(--shadow), 0 2px 6px 2px var(--shadow-2);
  padding: 8px;
}
.userbox .menu { position: absolute; right: 0; top: 44px; min-width: 200px; z-index: 30; }
.userbox .menu a, .userbox .menu button, .more .menu a, .more .menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 8px 12px; border-radius: 4px; color: var(--text);
}
.userbox .menu a:hover, .userbox .menu button:hover, .more .menu a:hover, .more .menu button:hover { background: var(--hover); }
.who { padding: 8px 12px 12px; color: var(--muted); }
.body { display: flex; min-height: 0; flex: 1; }
.side { width: 256px; flex: none; display: flex; flex-direction: column; padding: 8px 12px 12px 0; }
.side > a {
  display: flex; align-items: center; gap: 12px;
  height: 40px; margin-right: 12px; padding: 0 12px 0 20px;
  border-radius: 0 20px 20px 0; color: var(--text); font-weight: 500;
}
.side > a svg { color: var(--icon); }
.side > a:hover { background: var(--hover); }
.side > a.on { background: var(--nav); color: var(--on-selected); }
.side > a.on svg { color: var(--on-selected); }
.create { margin: 8px 0 12px 12px; position: relative; }
.create > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 20px 0 14px; border-radius: 16px;
  background: var(--surface); color: var(--text); font-weight: 500; font-size: 14px; cursor: pointer;
  box-shadow: 0 1px 3px var(--shadow), 0 4px 8px 3px var(--shadow-2);
}
.create > summary::-webkit-details-marker { display: none; }
.create-menu { position: absolute; left: 0; top: 64px; z-index: 20; min-width: 280px; }
.create-menu form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.create-menu input[type=text] { border: 1px solid var(--input-border); border-radius: 8px; padding: 8px 10px; }
.quota { margin-top: auto; padding: 8px 16px 8px 20px; }
.bar { height: 4px; background: var(--track); border-radius: 4px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--ok); }
.bar span.warn { background: var(--warn); }
.bar span.full { background: var(--full); }
.quota p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.quota-label { color: var(--text); font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.quota .quota-note { margin-top: 4px; font-size: 11px; }
.quota.over .quota-text, .quota.over .quota-note { color: var(--error); font-weight: 500; }
.quota.over .bar span { background: var(--full); }
.card label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
.card label.check input { width: 18px; height: 18px; margin: 0; padding: 0; }
.toast {
  position: fixed; left: 24px; bottom: 24px; z-index: 70; max-width: min(480px, calc(100vw - 48px));
  background: var(--toast-bg); color: var(--toast-fg); padding: 12px 16px; border-radius: 8px;
  box-shadow: 0 2px 8px var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: none; }
.toast.error { background: var(--error-bg); color: var(--error-fg); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 24px 0; gap: 12px; }
.toolbar h1 { font-size: 22px; font-weight: 400; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.toolbar h1 a { color: var(--muted); }
.sep { color: var(--muted); }
.list-wrap { overflow: auto; flex: 1; padding: 8px 12px 24px; }
table.files { width: 100%; border-collapse: collapse; table-layout: fixed; color: var(--text); }
table.files th {
  text-align: left; font-weight: 500; color: var(--muted); font-size: 13px;
  padding: 8px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 1;
}
table.files th:nth-child(2), table.files td:nth-child(2) { width: 180px; }
table.files th:nth-child(3), table.files td:nth-child(3) { width: 170px; }
table.files th:nth-child(4), table.files td:nth-child(4) { width: 120px; }
table.files td { padding: 0 12px; height: 48px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr.row:hover { background: var(--hover); }
tr.row.selected, tr.row.selected:hover { background: var(--selected); color: var(--on-selected); }
tr.row.selected .size, tr.row.selected td { color: var(--on-selected); }
.name-in { display: flex; align-items: center; gap: 12px; min-width: 0; }
.name-in svg { flex: none; }
.nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.size { color: var(--muted); }
.ic-file-body { fill: var(--ic-file); }
.ic-file-fold { fill: var(--ic-fold); }
.ic-audio { fill: var(--ic-audio); }
.ic-video { fill: var(--ic-video); }
.badge { border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 500; flex: none; }
.badge.viewer { background: var(--badge-viewer-bg); color: var(--badge-viewer-fg); }
.badge.editor { background: var(--badge-editor-bg); color: var(--badge-editor-fg); }
.more { position: relative; flex: none; }
.more > summary {
  list-style: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: var(--icon);
  background:
    radial-gradient(circle at 8px 16px, currentColor 2px, transparent 2.2px),
    radial-gradient(circle at 16px 16px, currentColor 2px, transparent 2.2px),
    radial-gradient(circle at 24px 16px, currentColor 2px, transparent 2.2px);
}
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary, .more > summary:hover { background-color: var(--hover-strong); }
.more .menu { position: absolute; right: 0; top: 36px; z-index: 15; min-width: 220px; }
.more .menu form { display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.more .menu input, .more .menu select { width: 100%; border: 1px solid var(--input-border); border-radius: 6px; padding: 6px 8px; }
.empty td { text-align: center; color: var(--muted); height: 120px; }
.btn {
  background: var(--blue); color: var(--on-blue); border: 0; border-radius: 18px;
  padding: 8px 16px; font-weight: 500; display: inline-block;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--blue); border: 1px solid var(--input-border-soft); }
.btn.ghost:hover { background: var(--hover); filter: none; }
.flash { margin: 8px 24px 0; background: var(--flash-bg); color: var(--flash-fg); border-radius: 8px; padding: 10px 12px; }
.hint { color: var(--muted); margin: 8px 0; }
.overlay {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 48px 16px; z-index: 40; overflow: auto;
}
.dialog {
  background: var(--surface); color: var(--text); width: min(560px, 100%); border-radius: 28px;
  padding: 20px 24px 24px; box-shadow: 0 8px 28px var(--shadow);
}
.dialog h2, .dialog h3 { font-weight: 400; margin: 8px 0 12px; }
.dialog h2 { font-size: 22px; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.x { color: var(--blue); font-weight: 500; }
.finder, .person, .link-form, .admin-create, .public-create form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px;
}
.finder input, .link-form input, .link-form select, .admin-create input, .admin-create select,
.card input, .card select, .public-create input, .person select, .share-list select, .settings-form input[type=text], .settings-form input:not([type]) {
  border: 1px solid var(--input-border); border-radius: 8px; padding: 8px 10px; color: var(--text); background: var(--input-bg);
}
.public-create input[type=file], .settings-form input[type=file] { border: 0; padding: 0; background: transparent; }
.share-list button, .link-list button, .person button:not(.btn) {
  border: 1px solid var(--input-border-soft); background: transparent; color: var(--blue); border-radius: 16px; padding: 5px 12px;
}
.finder input { flex: 1; min-width: 180px; }
.person, .share-list li, .link-list li { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.share-list, .link-list { list-style: none; margin: 0; padding: 0; }
.link-url { display: flex; gap: 8px; margin: 8px 0; }
.link-url input { flex: 1; border: 1px solid var(--input-border-soft); border-radius: 8px; padding: 8px; }
.link-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13px; }
.link-form { flex-direction: column; align-items: stretch; }
.link-form label, .card label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg-deep); }
.card {
  width: min(440px, 92vw); background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 14px;
}
.card.inline { margin: 16px 24px; }
.card h1 { font-size: 24px; font-weight: 400; margin: 0; }
.card .btn { height: 40px; }
.brand.center { justify-content: center; min-width: 0; }
.error { color: var(--error); margin: 0; }
.captcha-row { display: flex; align-items: center; gap: 12px; }
.captcha-row a { color: var(--blue); }
.captcha { border-radius: 8px; display: block; }
.cap-bg { fill: var(--cap-bg); }
.cap-line { stroke: var(--cap-line); }
.cap-1 { fill: var(--cap-1); } .cap-2 { fill: var(--cap-2); } .cap-3 { fill: var(--cap-3); } .cap-4 { fill: var(--cap-4); } .cap-5 { fill: var(--cap-5); }
.public .top { border-bottom: 1px solid var(--line); }
.public-main { padding: 12px 24px 32px; }
.public-main h1 { font-weight: 400; }
.stage { max-width: 100%; max-height: 70vh; display: block; margin: 12px 0; }
video.stage { background: var(--player-bg); border-radius: 12px; }
#preview-dialog {
  border: 0; border-radius: 16px; padding: 16px; max-width: min(1100px, 96vw);
  background: var(--surface); color: var(--text); box-shadow: 0 8px 28px var(--shadow);
}
#preview-dialog img, #preview-dialog audio { max-width: 100%; max-height: 70vh; display: block; }
#preview-dialog video { width: min(1060px, 92vw); max-height: 74vh; display: block; background: var(--player-bg); border-radius: 10px; }
#preview-dialog .pv-title { margin: 0 0 10px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#preview-dialog .pv-error { margin: 12px 0; color: var(--error); }
#preview-dialog .pv-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
#preview-dialog::backdrop { background: var(--overlay); }
@media (max-width: 800px) {
  .body { flex-direction: column; }
  .side { width: auto; flex-direction: row; overflow: auto; padding: 0; }
  .quota { display: none; }
  .brand { min-width: 0; font-size: 18px; }
  table.files th:nth-child(2), table.files td:nth-child(2),
  table.files th:nth-child(3), table.files td:nth-child(3) { display: none; }
}

/* ---------- Jam ---------- */
.top-clock {
  flex: none; color: var(--muted); font-size: 14px; white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: .2px; padding: 0 4px;
}

/* ---------- Wallpaper ---------- */
/* Warna di blok wallpaper/animasi sengaja tetap: ini latar foto/animasi yang sama di kedua tema. */
.wall { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #0a0f24; }
.wall-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wall-img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.wall-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,10,26,.08) 0%, rgba(6,10,26,.34) 100%); }
[data-theme="dark"] .wall-login .wall-scrim { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.5) 100%); }
.wall-app { background: transparent; opacity: .22; }
.wall-app .wall-scrim { background: var(--wall-app-scrim); }
.has-wall .app { position: relative; z-index: 1; }
body.has-wall:not(.login-page) { background: var(--bg); }
.has-wall table.files th { background: var(--wall-head); }
.has-wall .side { background: var(--wall-side); }
.has-wall .top { background: transparent; }

.wall-anim { position: absolute; inset: -25%; animation: wall-spin 48s linear infinite; will-change: transform; }
.blob { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; will-change: transform; opacity: .9; }
.b1 { left: 4%; top: 6%; background: radial-gradient(circle, rgba(26,115,232,.95) 0%, rgba(26,115,232,.35) 38%, rgba(26,115,232,0) 68%); animation: drift-a 9s ease-in-out infinite alternate; }
.b2 { right: 2%; top: 0; background: radial-gradient(circle, rgba(140,70,255,.9) 0%, rgba(140,70,255,.3) 40%, rgba(140,70,255,0) 68%); animation: drift-b 11s ease-in-out infinite alternate; }
.b3 { left: 22%; bottom: 0; background: radial-gradient(circle, rgba(0,191,166,.85) 0%, rgba(0,191,166,.28) 40%, rgba(0,191,166,0) 68%); animation: drift-c 8s ease-in-out infinite alternate; }
.b4 { right: 12%; bottom: 6%; background: radial-gradient(circle, rgba(255,128,32,.85) 0%, rgba(255,128,32,.25) 40%, rgba(255,128,32,0) 66%); animation: drift-d 10s ease-in-out infinite alternate; }
.b5 { left: 38%; top: 30%; width: 40vmax; height: 40vmax; background: radial-gradient(circle, rgba(66,133,244,.8) 0%, rgba(66,133,244,0) 65%); animation: drift-e 6.5s ease-in-out infinite alternate; }
.b6 { left: 8%; top: 46%; width: 36vmax; height: 36vmax; background: radial-gradient(circle, rgba(234,67,160,.6) 0%, rgba(234,67,160,0) 65%); animation: drift-b 7.5s ease-in-out infinite alternate-reverse; }
.streak {
  position: absolute; left: 0; height: 2px; width: 46vmax; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
  will-change: transform, opacity; animation: streak 4.2s cubic-bezier(.5,0,.3,1) infinite;
}
.s1 { top: 34%; animation-delay: 0s; }
.s2 { top: 48%; animation-delay: 1.3s; animation-duration: 3.6s; }
.s3 { top: 60%; animation-delay: 2.4s; animation-duration: 5s; }
.s4 { top: 42%; animation-delay: 3.1s; height: 1px; }
.s5 { top: 70%; animation-delay: .7s; animation-duration: 4.8s; height: 3px; }
.wall-grain {
  position: absolute; inset: -60px; opacity: .14;
  background-image: radial-gradient(rgba(255,255,255,.55) .6px, transparent .9px), radial-gradient(rgba(0,0,0,.6) .6px, transparent .9px);
  background-size: 3px 3px, 5px 5px; background-position: 0 0, 1px 2px;
  will-change: transform; animation: grain .8s steps(5) infinite;
}
@keyframes wall-spin { to { transform: rotate(360deg); } }
@keyframes drift-a { 0% { transform: translate3d(-10%, -6%, 0) scale(1); } 50% { transform: translate3d(18%, 12%, 0) scale(1.25); } 100% { transform: translate3d(4%, 26%, 0) scale(.9); } }
@keyframes drift-b { 0% { transform: translate3d(8%, 0, 0) scale(1.1); } 50% { transform: translate3d(-22%, 16%, 0) scale(.85); } 100% { transform: translate3d(-6%, -14%, 0) scale(1.2); } }
@keyframes drift-c { 0% { transform: translate3d(0, 10%, 0) scale(.9); } 50% { transform: translate3d(24%, -16%, 0) scale(1.2); } 100% { transform: translate3d(-14%, -4%, 0) scale(1); } }
@keyframes drift-d { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-26%, -20%, 0) scale(1.3); } 100% { transform: translate3d(10%, -8%, 0) scale(.85); } }
@keyframes drift-e { 0% { transform: translate3d(-30%, 20%, 0) scale(.8); } 100% { transform: translate3d(30%, -24%, 0) scale(1.35); } }
@keyframes streak {
  0% { transform: translate3d(-60vmax, 0, 0) rotate(-18deg); opacity: 0; }
  15% { opacity: .9; } 60% { opacity: .6; }
  100% { transform: translate3d(150vmax, -20vmax, 0) rotate(-18deg); opacity: 0; }
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-17px, 9px, 0); }
  40% { transform: translate3d(11px, -23px, 0); } 60% { transform: translate3d(-29px, -7px, 0); }
  80% { transform: translate3d(23px, 19px, 0); } 100% { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wall-anim { animation-duration: 400s; }
  .blob { animation-duration: 90s !important; }
  .streak { animation-duration: 40s !important; }
  .wall-grain { animation: none; }
}

/* ---------- Halaman masuk ---------- */
.login-page.has-wall { background: #0a0f24; }
.login-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px 0; margin: auto; }
.login-clock-box { text-align: center; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.login-clock { font-size: clamp(52px, 11vw, 96px); font-weight: 300; line-height: 1; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.login-date { margin-top: 8px; font-size: 16px; font-weight: 400; opacity: .92; }
.login-page.has-wall .card { background: var(--glass-solid); border-color: var(--glass-border); box-shadow: 0 12px 40px rgba(0,0,0,.28); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-page.has-wall .card { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
}

/* ---------- Admin ---------- */
.admin-scroll { overflow: auto; flex: 1; padding-bottom: 32px; }
.admin-scroll .list-wrap { overflow: visible; flex: none; }
.admin-create { padding: 12px 24px 0; }
.pad { padding: 0 24px; }
table.users-table { table-layout: auto; }
table.users-table th, table.users-table td { width: auto !important; }
table.users-table td { height: auto; padding: 8px 12px; }
table.users-table form { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; margin: 0; }
table.users-table input, table.users-table select { border: 1px solid var(--input-border-soft); border-radius: 6px; padding: 5px 8px; }
table.users-table button { border: 1px solid var(--input-border-soft); background: transparent; border-radius: 16px; padding: 5px 12px; color: var(--blue); }
table.users-table button:hover { background: var(--hover); }
table.users-table button.danger { color: var(--error); border-color: var(--danger-border); }
@media (max-width: 800px) {
  table.users-table th:nth-child(2), table.users-table td:nth-child(2),
  table.users-table th:nth-child(3), table.users-table td:nth-child(3) { display: table-cell; }
}
.settings-box { margin: 16px 24px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 20px; max-width: 640px; background: var(--surface); color: var(--text); }
.settings-box h2 { font-size: 18px; font-weight: 500; margin: 0 0 12px; }
.settings-box h3 { font-size: 15px; font-weight: 500; margin: 18px 0 8px; }
.settings-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.settings-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.settings-form label.check { flex-direction: row; align-items: center; gap: 8px; }
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-forms { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wall-preview { margin: 4px 0 12px; }
.wall-preview img, .wall-preview video { max-width: 100%; max-height: 220px; border-radius: 12px; display: block; background: var(--surface-2); }
.logo-preview { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.logo-preview img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
@media (max-width: 800px) { .top-clock { display: none; } }

/* ---------- Pilih & unduh ZIP ---------- */
.selbar {
  display: flex; align-items: center; gap: 12px; margin: 8px 24px 0; padding: 6px 8px 6px 16px;
  min-height: 48px; border-radius: 24px; background: var(--surface-2); color: var(--muted);
}
.selbar.active { background: var(--selected); color: var(--on-selected); font-weight: 500; }
.selbar .selcount { flex: 1; }
.selbar .btn[disabled] { opacity: .45; cursor: default; }
.pick { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--blue); cursor: pointer; }
.public-main .selbar { margin: 8px 0 0; }
.zip-main { max-width: 760px; }
.zip-parts { list-style: none; margin: 16px 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.zip-parts li { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--line); }
.zip-parts li:first-child { border-top: 0; }
.zip-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.zip-info strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zip-info span { color: var(--muted); font-size: 13px; }
.zip-btn { min-width: 132px; text-align: center; position: relative; overflow: hidden; }
.zip-btn.busy { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); pointer-events: none; }
.zip-btn .zb-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--selected); transition: width .3s; }
.zip-btn .zb-text { position: relative; }

/* ---------- Seret & lepas ---------- */
.main.dropping::after {
  content: "Lepaskan berkas untuk mengupload"; position: absolute; inset: 8px; z-index: 25;
  border: 2px dashed var(--blue); border-radius: 16px; background: var(--hover);
  display: grid; place-items: center; color: var(--blue); font-size: 18px; font-weight: 500; pointer-events: none;
}

/* ---------- Panel transfer (upload / ZIP) ---------- */
.tx-panel {
  position: fixed; right: 24px; bottom: 0; z-index: 60; width: min(380px, calc(100vw - 32px));
  background: var(--surface); color: var(--text); border-radius: 16px 16px 0 0;
  box-shadow: 0 4px 16px var(--shadow), 0 1px 3px var(--shadow-2); overflow: hidden;
}
.tx-head { display: flex; align-items: center; gap: 4px; padding: 10px 8px 10px 20px; background: var(--surface-2); }
[data-theme="dark"] .tx-head { background: var(--bg-deep); }
.tx-title { flex: 1; font-size: 15px; font-weight: 500; }
.tx-icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--icon);
  display: grid; place-items: center; padding: 0;
}
.tx-icon-btn:hover { background: var(--hover); }
.tx-panel.collapsed .tx-list { display: none; }
.tx-panel.collapsed .tx-toggle svg { transform: rotate(180deg); }
.tx-list { list-style: none; margin: 0; padding: 4px 0; max-height: 320px; overflow: auto; }
.tx-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 12px 8px 20px; }
.tx-item:hover { background: var(--hover); }
.tx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-meta { grid-column: 2 / 3; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.tx-bar { grid-column: 2 / 3; height: 4px; border-radius: 4px; background: var(--track); overflow: hidden; }
.tx-bar span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s; }
.tx-bar.indeterminate span { width: 35%; animation: tx-ind 1.2s ease-in-out infinite; }
@keyframes tx-ind { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.tx-side { grid-row: 1 / span 3; grid-column: 3; display: flex; align-items: center; }
.tx-done { color: var(--ok); }
.tx-err { color: var(--error); }
.tx-item.error .tx-meta { color: var(--error); }
.tx-item.done .tx-bar, .tx-item.error .tx-bar, .tx-item.cancelled .tx-bar { display: none; }
.tx-type { color: var(--icon); grid-row: 1 / span 3; }
.tx-foot { padding: 6px 20px 12px; font-size: 13px; }
.tx-foot a { color: var(--blue); font-weight: 500; }
.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }