/* Kloud - design system (sibling of Karma API).
 * Dark only. Shared tokens live in :root (browser.css and viewer.css use them).
 * Sections: fonts+tokens, base, shell, page header, surfaces, buttons, forms, menus,
 * badges, tables, empty states, alerts, modals, uploads, toasts, previews, public pages,
 * auth, responsive, motion (everything animated turns off under prefers-reduced-motion). */

@font-face { font-family: 'Inter'; src: url('/static/fonts/inter.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/static/fonts/spacegrotesk.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/static/fonts/jetbrainsmono.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #05060a;
  --bg-2: #0a0c14;
  --panel: rgba(16, 19, 30, .66);
  --panel-solid: #0d1018;
  --panel-hi: rgba(255, 255, 255, .045);
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);
  --text: #e9edf6;
  --text-2: #a3abc0;
  --text-3: #7c84a0;

  --cyan: #22d3ee;
  --violet: #8b5cf6;
  --pink: #f472b6;
  --accent: #8b5cf6;
  --grad: linear-gradient(120deg, #22d3ee 0%, #8b5cf6 52%, #f472b6 100%);
  --grad-soft: linear-gradient(120deg, rgba(34, 211, 238, .16), rgba(139, 92, 246, .16) 52%, rgba(244, 114, 182, .16));

  --good: #34d399;
  --bad: #f87171;
  --caution: #facc15;
  --danger: #fb923c;

  --r-sm: 9px;
  --r: 14px;
  --r-lg: 20px;
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .35);
  --ring: 0 0 0 2px rgba(139, 92, 246, .55), 0 0 0 5px rgba(139, 92, 246, .16);

  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* Density. Compact is the default (about as many rows as Seafile at 100% zoom);
     html[data-density="comfortable"] (ui.js, per browser) brings back the roomier sizes. */
  --side: 228px;
  --top: 50px;
  --row: 34px;
  --row-head: 32px;
  --cell-x: 12px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Legacy names from the old stylesheet, mapped onto the new palette so nothing that
     still refers to them breaks. New code should use the tokens above. */
  --gray-950: #030409;
  --gray-900: var(--bg-2);
  --gray-850: #10131d;
  --gray-800: var(--panel-solid);
  --gray-700: #262b3b;
  --gray-600: #3a4054;
  --gray-500: var(--text-3);
  --gray-400: var(--text-2);
  --gray-300: #c9d0e0;
  --muted: var(--text-2);
  --muted-soft: var(--text-3);
  --glass: var(--panel);
  --glass-hover: rgba(255, 255, 255, .08);
  --glass-strong: rgba(255, 255, 255, .12);
  --border: var(--line);
  --border-hover: var(--line-2);
  --karma-200: #ddd6fe;
  --karma-300: #c4b5fd;
  --karma-400: #a78bfa;
  --karma-500: #8b5cf6;
  --karma-600: #7c3aed;
  --blue: #7dd3fc;
  --emerald: #6ee7b7;
  --green: var(--good);
  --orange: #fdba74;
  --red: #fca5a5;
  --yellow: var(--caution);
  --amber: #fbbf24;
  --shine: inset 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-xl: var(--shadow);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #262b3b transparent; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.55 var(--sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }

/* Aurora: three slow, blurred colour fields behind everything, plus a faint dot grid. */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora i {
  position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%;
  filter: blur(90px); opacity: .17; will-change: transform;
}
.aurora i:nth-child(1) { background: #22d3ee; left: -22vmax; top: -26vmax; animation: drift1 38s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { background: #7c3aed; right: -26vmax; top: -10vmax; opacity: .2; animation: drift2 46s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { background: #db2777; left: 18vmax; bottom: -42vmax; opacity: .11; animation: drift3 52s ease-in-out infinite alternate; }
/* Phones and touch tablets: keep the same colours but stop the drift. Three huge blurred layers
   moving forever cost GPU time and battery there for a barely visible effect. (Hidden tabs are
   not painted at all, so desktop needs nothing extra.) */
@media (max-width: 760px), (hover: none) { .aurora i { animation: none; will-change: auto; } }
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 85%);
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

::selection { background: rgba(139, 92, 246, .45); color: #fff; }
a { color: #a5b4fc; text-decoration: none; transition: color .15s, background-color .15s, border-color .15s; }
a:hover { color: #c7d2fe; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.15; color: var(--text); }
h1 { margin: 0; font-size: clamp(20px, 1.7vw, 23px); font-weight: 700; }
h2 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 650; }
code, kbd, pre, .mono { font-family: var(--mono); }
code {
  padding: 1px 6px; border-radius: 7px; font-size: .86em; color: #c4b5fd;
  background: rgba(139, 92, 246, .1); border: 1px solid rgba(139, 92, 246, .2);
}
kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: rgba(255, 255, 255, .04);
  font: 600 11px var(--mono); color: var(--text-2);
}
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nowrap { white-space: nowrap; }
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
main:focus { outline: none; }

/* SVG icons from the sprite in header.ejs: <svg class="ic"><use href="#ic-folder"/></svg> */
.ic {
  width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -4px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ic.sm { width: 15px; height: 15px; vertical-align: -3px; }
.ic.lg { width: 22px; height: 22px; }
.ic.xl { width: 28px; height: 28px; }

/* ------------------------------------------------------------------ shell */
body.app-body { padding-left: var(--side); }

.topbar {
  position: sticky; top: 0; z-index: 80;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 6, 10, .72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  transition: box-shadow .25s var(--ease), border-color .25s;
}
.topbar.is-scrolled { box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .9); border-bottom-color: var(--line-2); }
.topbar-inner { display: flex; align-items: center; gap: 12px; min-height: var(--top); padding: 6px 22px; }
.menu-btn, .topbar-brand { display: none !important; }

.brand { display: flex; align-items: center; gap: 11px; color: var(--text); min-width: 0; }
.brand:hover { color: var(--text); }
.brand-logo {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  box-shadow: 0 8px 26px -8px rgba(139, 92, 246, .8);
  transition: transform .3s var(--spring), box-shadow .3s;
}
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.05); box-shadow: 0 10px 30px -6px rgba(139, 92, 246, 1); }
.brand-mark { display: block; width: 100%; height: 100%; }
.brand-text { display: grid; line-height: 1.1; min-width: 0; }
.brand-text b { font: 700 16px/1.1 var(--display); letter-spacing: -.02em; color: var(--text); }
.brand-text small { margin-top: 2px; font: 500 9.5px/1.2 var(--mono); color: var(--text-3); letter-spacing: .12em; text-transform: uppercase; }
.brand-name { font: 700 16px/1 var(--display); letter-spacing: -.02em; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 85; width: var(--side);
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 10px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 12, 20, .84), rgba(7, 8, 13, .92));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.sidebar > .brand { padding: 2px 6px 8px; }
.side-nav { display: grid; gap: 1px; }
.nav-section { display: grid; gap: 1px; }
.nav-title { padding: 11px 10px 5px; font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.nav-section:first-child .nav-title { padding-top: 6px; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 5px 10px; border-radius: 9px;
  color: var(--text-2); font-weight: 500; font-size: 13px;
  transition: background-color .15s, color .15s, transform .15s var(--ease);
}
.nav-link .ic { width: 17px; height: 17px; color: var(--text-3); transition: color .15s, transform .25s var(--spring); }
.nav-link:hover { color: var(--text); background: rgba(255, 255, 255, .045); }
.nav-link:hover .ic { color: var(--text-2); transform: scale(1.08); }
.nav-link:active { transform: scale(.985); }
.nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(139, 92, 246, .24), rgba(139, 92, 246, .04)); }
.nav-link.active .ic { color: #c4b5fd; }
.nav-link.active::before {
  content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--grad); box-shadow: 0 0 14px rgba(139, 92, 246, .9);
  transform-origin: center;
}
.app-layout:not(.is-quiet) .nav-link.active::before { animation: inkIn .45s var(--spring) .1s backwards; }
.nav-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-foot { margin-top: auto; padding-top: 10px; display: grid; gap: 7px; }
.account-card {
  display: flex; align-items: center; gap: 2px; padding: 5px 5px 5px 6px; border-radius: 12px;
  background: var(--panel-hi); border: 1px solid var(--line);
}
.account-card .icon-btn { width: 30px; height: 30px; }
.account-user { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 2px; border-radius: 9px; color: var(--text-2); }
.account-user:hover { color: var(--text); }
.account-user .avatar { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; box-shadow: 0 0 0 1px var(--line-2); }
.account-who { display: grid; min-width: 0; line-height: 1.25; }
.account-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; font-size: 13px; }
.account-who small { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.sign-out-btn:hover { color: var(--bad) !important; background: rgba(248, 113, 113, .12) !important; }
.side-credit { margin: 0; text-align: center; font: 500 10.5px var(--mono); letter-spacing: .04em; color: var(--text-3); opacity: .8; }
.sidebar-scrim { display: none; }

.top-context { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-3); font-size: 13px; }
.top-context .ic { color: var(--text-3); opacity: .7; }
.top-context-section { white-space: nowrap; }
.top-context-page { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.top-context .ic { flex: none; }
.top-context-link { flex: 0 1 auto; min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); border-radius: 6px; }
.top-context-link:hover { color: var(--text); text-decoration: none; }
.top-trail > .top-context-link:first-child { flex: none; }
.top-trail .top-context-page { flex: 0 1 auto; }
.top-search { position: relative; margin: 0 0 0 auto; width: min(440px, 40vw); flex: none; }
.top-search > .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; transition: color .15s; }
.top-search input[type=search] {
  width: 100%; height: 36px; padding: 0 44px 0 38px; border-radius: 11px;
  background: rgba(255, 255, 255, .04); border-color: var(--line-2);
}
.top-search input[type=search]:focus { background: rgba(0, 0, 0, .4); }
.top-search:focus-within > .ic { color: #c4b5fd; }
.top-search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; transition: opacity .15s; }
.top-search:focus-within kbd { opacity: 0; }
.top-search input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.app-layout { position: relative; min-width: 0; }
.content { display: block; min-width: 0; max-width: 1680px; margin: 0 auto; padding: 14px 22px 48px; }
.container { width: min(100%, 30rem); margin: 0 auto; padding: 42px 16px 40px; }
.public-container { min-width: 0; padding: 24px 0 48px; }
.foot { padding: 18px 16px 26px; text-align: center; font: 500 11px var(--mono); letter-spacing: .04em; color: var(--text-3); }

.public-top .topbar-inner { justify-content: space-between; width: min(calc(100% - 32px), 72rem); margin: 0 auto; padding: 10px 0; }
.public-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text-2); font: 600 11px var(--mono); letter-spacing: .04em;
}
.public-chip .ic { color: var(--good); }
.login-body > .topbar { display: none; }

/* Soft navigation (only while uploads are on screen): a thin bar at the top while the next page loads. */
body.soft-nav-loading::before {
  content: ''; position: fixed; top: 0; left: 0; z-index: 9800; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, #22d3ee, #8b5cf6, #f472b6, transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: soft-nav-progress .9s linear infinite;
}
body.drag-upload-active .content { outline: 1px dashed rgba(167, 139, 250, .45); outline-offset: -10px; border-radius: var(--r-lg); }

/* ------------------------------------------------------------ page header */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head > div:first-child { min-width: 0; }
.page-head h1 { overflow-wrap: anywhere; }
.page-subtitle { margin: 4px 0 0; max-width: 92ch; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.page-head .hint { margin-top: 4px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px; font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.eyebrow .bar { width: 18px; height: 2px; border-radius: 2px; background: var(--grad); }
.head-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.count-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 8px; border-radius: 999px; vertical-align: 3px;
  font: 600 11px var(--mono); color: #c4b5fd; background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .3);
}

.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; color: var(--text-3); font-size: 13px; }
.crumbs a { color: var(--text-2); border-radius: 6px; }
.crumbs a:hover { color: var(--text); }
.crumb-back {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 8px;
  color: var(--text-2) !important; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 9px; font-weight: 600;
  transition: background-color .15s, color .15s, transform .15s var(--ease);
}
.crumb-back:hover { color: var(--text) !important; background: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .4); }
.crumb-back:active { transform: translateY(1px); }
.crumb-path { min-width: 0; overflow-wrap: anywhere; }

.segmented {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; overflow-x: auto; max-width: 100%;
  background: rgba(255, 255, 255, .035); border: 1px solid var(--line); scrollbar-width: none;
}
.segmented a {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 9px; border: 1px solid transparent;
  color: var(--text-2); font-weight: 600; font-size: 13px; white-space: nowrap; transition: color .2s, background-color .2s, border-color .2s;
}
.segmented button {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  color: var(--text-2); background: transparent; font-weight: 600; font-size: 13px; white-space: nowrap; transition: color .2s, background-color .2s, border-color .2s;
}
.segmented button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.segmented button[aria-pressed='true'] {
  color: #fff; border-color: rgba(167, 139, 250, .35);
  background: linear-gradient(120deg, rgba(34, 211, 238, .2), rgba(139, 92, 246, .3) 55%, rgba(244, 114, 182, .2));
}
.density-tip { margin-top: 10px; }
.density-tip kbd { height: 19px; min-width: 19px; font-size: 10px; }
.segmented a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.segmented a.active {
  color: #fff; border-color: rgba(167, 139, 250, .35);
  background: linear-gradient(120deg, rgba(34, 211, 238, .2), rgba(139, 92, 246, .3) 55%, rgba(244, 114, 182, .2));
  box-shadow: 0 6px 20px -8px rgba(139, 92, 246, .8);
}

/* --------------------------------------------------------------- surfaces */
.panel, .card, .toolbar, .table-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
.panel::before, .card::before, .table-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
}
.panel, .card { margin-bottom: 12px; padding: 15px 16px; }
.panel > h2, .card > h2, .card > h3, .panel > h3 { display: flex; align-items: center; gap: 9px; }
.card.narrow { width: min(460px, 100%); margin: 40px auto; }
.card.highlight { border-color: rgba(52, 211, 153, .4); }
.card.flush, .panel.flush { padding: 0; overflow: hidden; }

/* Spotlight: a soft light follows the pointer (ui.js feeds --mx / --my). */
.spot { isolation: isolate; }
.spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(139, 92, 246, .12), transparent 45%);
}
.spot:hover::after { opacity: 1; }

.lift { transition: transform .25s var(--spring), border-color .2s, box-shadow .25s; }
.lift:hover { transform: translateY(-3px); border-color: rgba(167, 139, 250, .4); box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(139, 92, 246, .12); }

.toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; z-index: 60; overflow: visible;
  margin-bottom: 10px; padding: 8px 10px; border-radius: var(--r);
}
.toolbar form, .inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar form.inline { display: inline-flex; }
.toolbar-note {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 9px;
  color: var(--good); background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .28); font-size: 12.5px; font-weight: 600;
}
.domain-picker-form { margin-left: auto; }
.domain-picker-form label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.domain-row-form { display: inline-flex !important; align-items: center; gap: 4px; }
.domain-row-form select { width: 92px; height: 28px; padding: 0 7px; font-size: 12px; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid2 form, .grid2 .manage-action { padding: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: var(--r); }
.manage-action h3 { margin: 0 0 8px; font-size: 14px; }
.property-list { display: grid; gap: 0; margin: 0; }
.property-list > div {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 34px; padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.property-list > div:last-child { border-bottom: 0; }
.property-list dt { color: var(--text-3); font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.property-list dd { margin: 0; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.detail {
  overflow: auto; max-height: 50vh; margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r);
  color: var(--text-2); background: rgba(0, 0, 0, .35); border: 1px solid var(--line); font-size: 12px; line-height: 1.6;
}
.hint, .meta { color: var(--text-2); font-size: 13px; }
.hint code, .meta code { font-size: .85em; overflow-wrap: anywhere; } /* long links wrap on phones */

/* Admin access log summary + generic stat cards. */
.access-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.metric-card { --c: var(--violet); display: grid; gap: 4px; margin: 0; padding: 11px 14px 12px; overflow: hidden; }
.metric-card span { display: flex; align-items: center; gap: 7px; color: var(--text-3); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.metric-card span .ic { width: 15px; height: 15px; color: var(--c); }
.metric-card strong { position: relative; z-index: 1; color: var(--text); font: 700 22px/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metric-card::after {
  content: ''; position: absolute; right: -30px; top: -50px; width: 130px; height: 130px; border-radius: 50%;
  background: var(--c); filter: blur(48px); opacity: .2; pointer-events: none;
}
.metric-card { transition: transform .25s var(--spring), border-color .2s, box-shadow .25s; }
.metric-card:hover { transform: translateY(-3px); border-color: rgba(167, 139, 250, .35); box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .85); }
.metric-card:nth-child(2) { --c: var(--cyan); }
.metric-card:nth-child(3) { --c: var(--good); }
.metric-card:nth-child(4) { --c: var(--pink); }

/* Settings pages. */
.settings-section { margin-bottom: 12px; }
.section-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 11px; }
.section-head h2 { margin: 0 0 2px; font-size: 15.5px; }
.section-head h3 { margin: 0 0 2px; }
.section-head .hint { margin: 0; }
/* Group labels inside a settings card (Server Settings > Limits). */
.settings-subhead {
  margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--text-3); font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.section-head + .settings-subhead { margin-top: 4px; padding-top: 0; border-top: 0; }
.section-icon, .tc-icon {
  flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  color: #c4b5fd; background: var(--grad-soft); border: 1px solid var(--line-2);
}
.profile-pic-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.profile-pic-row .avatar-lg { box-shadow: 0 0 0 1px var(--line-2), 0 16px 40px -14px rgba(139, 92, 246, .8); }
.profile-pic-meta { display: grid; gap: 2px; min-width: 0; }
.profile-pic-meta b { font: 700 18px var(--display); letter-spacing: -.01em; color: var(--text); }
.profile-pic-meta .icon-setting-actions { justify-content: flex-start; margin-top: 10px; }
.icon-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
.icon-setting-card {
  display: grid; gap: 8px; justify-items: center; padding: 12px 10px 11px; text-align: center;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .25s var(--spring), border-color .2s, background-color .2s;
}
.icon-setting-card:hover { transform: translateY(-3px); border-color: rgba(167, 139, 250, .4); background: rgba(139, 92, 246, .06); }
.icon-setting-preview { width: 38px; height: 38px; }
.icon-setting-preview svg, .icon-setting-preview img { display: block; width: 100%; height: 100%; }
.icon-setting-preview img { object-fit: cover; border-radius: 9px; }
.icon-setting-name { font-weight: 600; font-size: 13px; }
.icon-setting-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.icon-upload { position: relative; overflow: hidden; }
.icon-upload input[type='file'] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.admin-settings-form { max-width: 820px; }
.setting-field { margin-bottom: 14px; }
.setting-field:last-child { margin-bottom: 0; }
.setting-field > label { display: block; margin-bottom: 6px; color: var(--text); font-weight: 600; font-size: 13.5px; }
.setting-input {
  display: flex; align-items: stretch; max-width: 280px; overflow: hidden;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line-2); border-radius: 11px;
  transition: border-color .15s, box-shadow .2s, background-color .15s;
}
.setting-input:focus-within { border-color: rgba(139, 92, 246, .7); box-shadow: 0 0 0 4px rgba(139, 92, 246, .16); background: rgba(0, 0, 0, .4); }
.setting-input input[type=number] { flex: 1 1 auto; min-width: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.setting-input .unit {
  display: flex; align-items: center; padding: 0 12px; user-select: none;
  color: var(--text-3); background: rgba(255, 255, 255, .035); border-left: 1px solid var(--line); font: 600 11.5px var(--mono); white-space: nowrap;
}
.admin-settings-form .hint { margin: 7px 0 0; }
.admin-settings-form textarea { width: 100%; }
.toggle-field {
  display: flex; align-items: flex-start; gap: 11px; margin: 0 0 8px; padding: 10px 12px; cursor: pointer;
  color: var(--text); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .15s, background-color .15s;
}
.toggle-field:hover { border-color: rgba(139, 92, 246, .4); background: rgba(139, 92, 246, .05); }
.toggle-field:last-of-type { margin-bottom: 0; }
.toggle-field input[type=checkbox] { margin-top: 1px; }
.toggle-text { display: flex; flex-direction: column; gap: 3px; }
.toggle-title { font-weight: 600; }
.toggle-hint { color: var(--text-2); font-size: 13px; line-height: 1.45; }
.settings-actions { position: sticky; bottom: 16px; z-index: 5; display: flex; justify-content: flex-end; margin-top: 18px; }

/* ---------------------------------------------------------------- buttons */
button { font: inherit; color: inherit; }
.btn, .link-btn, .icon-btn { cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.btn {
  --btn-bg: rgba(255, 255, 255, .055); --btn-fg: var(--text); --btn-bd: var(--line-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 32px; padding: 0 13px; overflow: hidden;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 10px;
  font: 600 13px/1.2 var(--sans); white-space: nowrap; text-decoration: none; user-select: none;
  transition: transform .15s var(--ease), background-color .15s, border-color .15s, box-shadow .2s, color .15s;
}
.btn:hover { --btn-bg: rgba(255, 255, 255, .09); --btn-bd: rgba(255, 255, 255, .2); color: var(--btn-fg); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; }
.btn .ic { width: 16px; height: 16px; vertical-align: 0; }
.btn.sm { min-height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; gap: 6px; }
.btn.block { width: 100%; }
.btn.primary, .btn.submit {
  --btn-bg: var(--grad); --btn-fg: #fff; --btn-bd: transparent;
  background-size: 160% 100%; background-position: 0 0;
  box-shadow: 0 8px 24px -10px rgba(139, 92, 246, .85); text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  transition: transform .15s var(--ease), background-position .4s var(--ease), box-shadow .2s, color .15s;
}
.btn.primary:hover, .btn.submit:hover { --btn-bg: var(--grad); --btn-bd: transparent; background-position: 100% 0; box-shadow: 0 10px 30px -8px rgba(139, 92, 246, 1); }
.btn.primary::after, .btn.submit::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
}
.btn.primary:hover::after, .btn.submit:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }
.btn.ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-2); }
.btn.ghost:hover { --btn-bg: rgba(255, 255, 255, .06); --btn-bd: transparent; --btn-fg: var(--text); }
.btn.danger { --btn-bg: rgba(239, 68, 68, .12); --btn-bd: rgba(239, 68, 68, .35); --btn-fg: #fca5a5; box-shadow: none; text-shadow: none; }
.btn.danger:hover { --btn-bg: rgba(239, 68, 68, .22); --btn-bd: rgba(239, 68, 68, .6); --btn-fg: #fecaca; }
.btn.danger::after { content: none; }
.btn.copy.copied, .btn.copied { --btn-bg: rgba(52, 211, 153, .14); --btn-bd: rgba(52, 211, 153, .45); --btn-fg: #a7f3d0; }
/* Sent and waiting for the next page (app.js): spinner, no second click. */
.is-busy { pointer-events: none; cursor: progress; }
.btn.is-busy { opacity: .82; }
.btn-spin { width: 13px; height: 13px; border-width: 2px; }
.link-btn .btn-spin { width: 11px; height: 11px; }
.toolbar .upload .btn.primary { --btn-bg: var(--grad); }
.newfolder .btn { --btn-bg: rgba(52, 211, 153, .14); --btn-bd: rgba(52, 211, 153, .35); --btn-fg: #a7f3d0; }

.link-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 0; border-radius: 7px;
  color: var(--text-2); background: none; font-weight: 600; font-size: 13px;
  transition: color .15s, background-color .15s;
}
.link-btn:hover { color: var(--text); background: rgba(255, 255, 255, .06); text-decoration: none; }
.link-btn.danger { color: #fca5a5; }
.link-btn.danger:hover { color: #fecaca; background: rgba(239, 68, 68, .14); }
.inline, form.inline { display: inline; margin: 0; }

.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; padding: 0; color: var(--text-2);
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s var(--ease);
}
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, .08); text-decoration: none; }
.icon-btn:active { transform: scale(.92); }
.icon-btn.danger:hover { color: #fca5a5; background: rgba(239, 68, 68, .14); }
/* Admin permanent-delete: solid red so it is unmistakably different from "move to trash". */
.icon-btn.danger.perma-delete { color: #fff; background: rgba(239, 68, 68, .82); border-color: rgba(248, 113, 113, .9); box-shadow: 0 6px 16px -8px rgba(239, 68, 68, .9); }
.icon-btn.danger.perma-delete:hover { color: #fff; background: #dc2626; }
.icon-btn.copied { color: var(--good); background: rgba(52, 211, 153, .14); }
.icon-actions { white-space: nowrap; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; width: 100%; min-width: 0; }
.row-actions form.inline { display: flex; margin: 0; }
.row-actions .icon-btn { width: 30px; height: 30px; }
.qr-btn { min-width: 44px !important; padding-inline: 10px; }
[data-tooltip] { cursor: inherit; }

/* Favourite star (the button text is a fallback "*", drawn with a glyph). */
.star-form { line-height: 1; }
.star {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
  color: var(--text-3); background: transparent; border: 0; border-radius: 8px; font-size: 0; line-height: 1; vertical-align: middle; cursor: pointer;
  transition: color .15s, background-color .15s, transform .25s var(--spring);
}
.star::before { content: '\2606'; font-size: 16px; line-height: 1; }
.star.on::before { content: '\2605'; }
.star:hover { color: var(--caution); background: rgba(250, 204, 21, .1); transform: scale(1.12); }
.star.on { color: var(--caution); text-shadow: 0 0 12px rgba(250, 204, 21, .55); }

/* ----------------------------------------------------------------- forms */
input[type=text], input[type=password], input[type=number], input[type=email], input[type=url],
input[type=search], input[type=date], input[type=datetime-local], input[type=file], select, textarea, .linkbox {
  min-width: 0; height: 34px; padding: 0 11px;
  color: var(--text); background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line-2); border-radius: 10px;
  font: 500 13.5px var(--sans); outline: none;
  transition: border-color .15s, box-shadow .2s, background-color .15s;
}
textarea { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
input[type=file] { height: auto; padding: 6px; font-size: 13px; }
input:hover, select:hover, textarea:hover { border-color: rgba(255, 255, 255, .2); }
input:focus, select:focus, textarea:focus, .linkbox:focus {
  border-color: rgba(139, 92, 246, .7); box-shadow: 0 0 0 4px rgba(139, 92, 246, .16); background-color: rgba(0, 0, 0, .4);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-radius: 11px; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input[type=number], input[type=date], input[type=datetime-local], select { color-scheme: dark; }
input[type=file]::file-selector-button {
  margin-right: 10px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  color: var(--text); background: rgba(255, 255, 255, .07); border: 1px solid var(--line-2); font: 600 12.5px var(--sans);
}
select { appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3abc0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
select option, select optgroup { background: #121522; color: var(--text); }
input[type=radio] { accent-color: var(--violet); }

/* Checkboxes: custom box with an animated tick. */
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none;
  width: 17px; height: 17px; margin: 0; vertical-align: middle; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, .26); border-radius: 5px; background: rgba(0, 0, 0, .3);
  transition: background-color .15s, border-color .15s, box-shadow .2s, transform .15s var(--spring);
}
input[type=checkbox]:hover { border-color: rgba(167, 139, 250, .8); }
input[type=checkbox]:active { transform: scale(.88); }
input[type=checkbox]:checked, input[type=checkbox]:indeterminate {
  border-color: transparent; background: linear-gradient(135deg, #22d3ee, #8b5cf6 60%, #f472b6);
  box-shadow: 0 4px 12px -4px rgba(139, 92, 246, .9);
}
input[type=checkbox]::after {
  content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); opacity: 0;
  transition: transform .2s var(--spring), opacity .15s;
}
input[type=checkbox]:checked::after { transform: rotate(45deg) scale(1); opacity: 1; }
input[type=checkbox]:indeterminate::after { left: 3.5px; top: 6.5px; width: 7px; height: 0; border-width: 0 0 2px; transform: none; opacity: 1; }
input[type=checkbox]:focus-visible { box-shadow: var(--ring); border-radius: 5px; }

label { display: block; margin-bottom: 12px; color: var(--text-2); font-weight: 500; font-size: 13px; }
label input:not([type=checkbox]):not([type=radio]), label select, label textarea { display: block; width: 100%; margin-top: 6px; }
label.btn { margin: 0; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field-label { color: var(--text-2); font: 600 12px var(--sans); letter-spacing: .02em; }
.input-wrap { position: relative; display: block; }
.input-wrap > .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; transition: color .15s; }
.input-wrap > input { width: 100%; margin: 0 !important; padding-left: 40px; }
.input-wrap:focus-within > .ic { color: #c4b5fd; }
.check-option { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text-2); font-weight: 600; font-size: 13px; cursor: pointer; }
.check-option input { margin: 0; }
.linkrow { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.linkbox { flex: 1; min-width: 0; font: 500 12.5px var(--mono); color: #c7d2fe; }
.linkbox.small { width: min(440px, 42vw); }
.file-select-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-select-row .modal-help { flex: 1 1 160px; min-width: 0; margin: 0; }
.file-picker { position: relative; overflow: hidden; margin: 0; }
.quota-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 3px 0; }
.quota-cell .quota-usage { grid-column: 1 / -1; }
.quota-usage { white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.quota-form { display: flex; align-items: center; gap: 6px; }
.quota-input { width: 84px; height: 28px !important; padding: 0 8px !important; font-size: 12.5px !important; }
.quota-bar {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 220px; height: 6px;
  border: 0; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .07);
}
.quota-bar::-webkit-progress-bar { background: rgba(255, 255, 255, .07); border-radius: 99px; }
.quota-bar::-webkit-progress-value { background: var(--grad); border-radius: 99px; }
.quota-bar::-moz-progress-bar { background: var(--grad); border-radius: 99px; }
.quota-bar.is-high::-webkit-progress-value { background: linear-gradient(90deg, var(--danger), var(--bad)); }
.quota-bar.is-high::-moz-progress-bar { background: linear-gradient(90deg, var(--danger), var(--bad)); }

/* Custom select (app.js swaps every <select> for a button + a floating menu). */
.native-select-hidden { display: none !important; }
.custom-select { display: inline-block; min-width: 140px; vertical-align: middle; }
label .custom-select { display: block; width: 100%; margin-top: 6px; }
.custom-select-button {
  position: relative; display: block; width: 100%; min-height: 34px; padding: 6px 32px 6px 11px;
  color: var(--text); background: rgba(0, 0, 0, .28); border: 1px solid var(--line-2); border-radius: 10px;
  font: 600 13px var(--sans); text-align: left; outline: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s;
}
.custom-select-button span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-button::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .7;
  transform: translateY(-65%) rotate(45deg); transition: transform .2s var(--ease);
}
.custom-select-button:hover, .custom-select.open .custom-select-button { border-color: rgba(167, 139, 250, .55); background-color: rgba(139, 92, 246, .1); }
.custom-select-button:focus-visible { border-color: rgba(139, 92, 246, .7); box-shadow: 0 0 0 4px rgba(139, 92, 246, .16); border-radius: 11px; }
.custom-select.open .custom-select-button::after { transform: translateY(-25%) rotate(225deg); }
.custom-select-menu {
  position: fixed; z-index: 9600; max-height: min(280px, calc(100vh - 16px)); overflow: auto; padding: 5px;
  background: rgba(14, 16, 26, .97); border: 1px solid var(--line-2); border-radius: 13px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .9), 0 0 0 1px rgba(139, 92, 246, .12);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.custom-select-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 31px; padding: 5px 10px;
  color: var(--text-2); background: transparent; border: 0; border-radius: 8px; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer;
  transition: background-color .12s, color .12s;
}
.custom-select-menu button:hover, .custom-select-menu button.active { color: #fff; background: rgba(139, 92, 246, .2); }
.custom-select-menu button.selected { color: #fff; font-weight: 600; background: linear-gradient(90deg, rgba(139, 92, 246, .26), rgba(139, 92, 246, .06)); }
.custom-select-menu button.selected::after {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 99px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}
.custom-select-menu button:disabled { color: var(--text-3); cursor: not-allowed; opacity: .55; }

/* ----------------------------------------------------------------- menus */
.new-dropdown { position: relative; z-index: 70; }
.new-dropdown-trigger { padding-right: 11px; }
.new-caret {
  width: 0; height: 0; margin-left: 2px; opacity: .8;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
  transition: transform .2s var(--ease);
}
.new-dropdown.open .new-caret { transform: rotate(180deg); }
.new-dropdown-menu, .context-menu, .autocomplete-menu {
  padding: 5px; overflow: hidden;
  background: rgba(14, 16, 26, .97); border: 1px solid var(--line-2); border-radius: 13px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .9), 0 0 0 1px rgba(139, 92, 246, .12);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.new-dropdown-menu { position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; width: max-content; min-width: 200px; transform-origin: top left; }
.new-dropdown-menu button, .context-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 31px; padding: 5px 10px;
  color: var(--text-2); background: transparent; border: 0; border-radius: 8px;
  font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; cursor: pointer;
  transition: background-color .12s, color .12s;
}
.new-dropdown-menu button:hover, .new-dropdown-menu button:focus-visible,
.context-menu button:hover, .context-menu button:focus-visible { color: #fff; background: rgba(139, 92, 246, .2); box-shadow: none; }
.context-menu button .i { color: var(--text-3); transition: color .12s; }
.context-menu button:hover .i { color: #c4b5fd; }
.context-menu button.danger { color: #fca5a5; }
.context-menu button.danger:hover { color: #fecaca; background: rgba(239, 68, 68, .16); }
.context-menu button.danger:hover .i { color: #fca5a5; }
.context-menu button.danger[data-menu-command="perma-delete"] { color: #fca5a5; }
.new-dropdown-separator, .context-separator { height: 1px; margin: 5px 4px; background: var(--line); }
.context-menu { position: fixed; z-index: 100; min-width: 220px; }
.autocomplete-field { position: relative; }
.autocomplete-menu { position: absolute; z-index: 2; left: 0; right: 0; top: calc(100% + 6px); padding: 4px; }
.autocomplete-menu button {
  display: block; width: 100%; min-height: 31px; padding: 5px 10px; color: var(--text-2);
  background: transparent; border: 0; border-radius: 9px; text-align: left; cursor: pointer;
}
.autocomplete-menu button:hover, .autocomplete-menu button.active { color: #fff; background: rgba(139, 92, 246, .2); }

.tooltip-layer {
  position: fixed; z-index: 10000; width: max-content; max-width: min(520px, calc(100vw - 16px)); padding: 6px 9px;
  color: var(--text); background: rgba(18, 21, 34, .97); border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .8);
  font-size: 12px; font-weight: 500; line-height: 1.25; text-align: center; white-space: normal; overflow-wrap: anywhere;
  pointer-events: none; opacity: 0; transform: translateY(3px) scale(.98);
  transition: opacity .12s var(--ease), transform .16s var(--ease);
}
.tooltip-layer.visible { opacity: 1; transform: none; }
.tooltip-layer::before {
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px;
  background: rgba(18, 21, 34, .97); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  transform: translateX(-50%) rotate(45deg);
}
.tooltip-layer.below::before { top: -5px; bottom: auto; border: 0; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); }

/* CSS-drawn row icons (<span class="i i-trash">). Kept: app.js and the views use them. */
.i { position: relative; display: inline-block; flex: none; width: 16px; height: 16px; }
.i::before, .i::after { content: ''; position: absolute; box-sizing: border-box; }
.i-open::before { left: 1px; top: 3px; width: 14px; height: 10px; border: 2px solid currentColor; border-radius: 8px / 6px; }
.i-open::after { left: 6px; top: 6px; width: 4px; height: 4px; background: currentColor; border-radius: 50%; }
.i-download::before { left: 7px; top: 1px; width: 2px; height: 9px; background: currentColor; }
.i-download::after { left: 3px; top: 7px; width: 10px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.i-link::before { left: 1px; top: 6px; width: 8px; height: 5px; border: 2px solid currentColor; border-radius: 5px; transform: rotate(-30deg); }
.i-link::after { right: 1px; top: 5px; width: 8px; height: 5px; border: 2px solid currentColor; border-radius: 5px; transform: rotate(-30deg); }
.i-copy::before { left: 5px; top: 1px; width: 9px; height: 10px; border: 2px solid currentColor; border-radius: 3px; }
.i-copy::after { left: 1px; top: 5px; width: 9px; height: 10px; background: var(--panel-solid); border: 2px solid currentColor; border-radius: 3px; }
.i-move::before { left: 4px; top: 0; width: 12px; height: 12px; background: currentColor; opacity: .5; clip-path: polygon(0 0, 42% 0, 52% 22%, 100% 22%, 100% 100%, 0 100%); }
.i-move::after { left: 0; top: 4px; width: 12px; height: 12px; background: currentColor; clip-path: polygon(0 0, 42% 0, 52% 22%, 100% 22%, 100% 100%, 0 100%); }
.i-share::before { left: 2px; top: 7px; width: 12px; height: 2px; background: currentColor; border-radius: 1px; transform: rotate(-45deg); }
.i-share::after { left: 6px; top: 3px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.i-clock::before { inset: 1px; border: 2px solid currentColor; border-radius: 50%; }
.i-clock::after { left: 7px; top: 4px; width: 5px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.i-lock::before { left: 3px; top: 7px; width: 10px; height: 7px; border: 2px solid currentColor; border-radius: 2px; }
.i-lock::after { left: 5px; top: 1px; width: 6px; height: 8px; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; }
.i-public::before { left: 1px; top: 1px; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; }
.i-public::after { left: 3px; top: 7px; width: 10px; border-top: 2px solid currentColor; }
.i-rename::before { left: 1px; top: 4px; width: 14px; height: 8px; border: 2px solid currentColor; border-radius: 2px; }
.i-rename::after { left: 4px; top: 6px; width: 2px; height: 4px; background: currentColor; }
.i-trash::before { left: 4px; top: 5px; width: 8px; height: 10px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 2px 2px; }
.i-trash::after { left: 3px; top: 2px; width: 10px; border-top: 2px solid currentColor; }
.i-restore::before { left: 2px; top: 3px; width: 12px; height: 10px; border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%; }
.i-restore::after { left: 1px; top: 2px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 6px solid currentColor; }
.i-image::before { left: 1px; top: 3px; width: 14px; height: 11px; border: 2px solid currentColor; border-radius: 2px; }
.i-image::after { left: 3px; top: 8px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }

/* ---------------------------------------------------------------- badges */
.badge {
  --c: var(--text-2);
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px;
  font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; vertical-align: middle;
  color: var(--c); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--c) 13%, transparent); border-color: color-mix(in srgb, var(--c) 30%, transparent);
}
.badge + .badge { margin-left: 4px; }
.badge.public, .badge.tone-good { --c: var(--good); }
.badge.private, .badge.tone-muted { --c: #94a3b8; }
.badge.shared, .badge.tone-violet { --c: #c4b5fd; }
.badge.permission, .badge.tone-cyan { --c: #67e8f9; }
.badge.tone-bad { --c: var(--bad); }
.badge.tone-warn { --c: var(--caution); }
.badge.tone-pink { --c: var(--pink); }
.badge.tone-orange { --c: var(--danger); }
.inline-badge {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; white-space: nowrap;
  font: 600 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.inline-badge.shared { color: #c4b5fd; background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .32); }

.shared-by-chip {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 26px; padding: 0 10px 0 3px;
  border: 1px solid rgba(139, 92, 246, .35); border-radius: 999px; background: rgba(139, 92, 246, .12);
}
.shared-by-chip .avatar { flex: 0 0 auto; }
.shared-by-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--karma-200); }

.client-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font: 500 12px var(--mono); color: var(--text-2); }
.client-label-tag {
  flex: 0 0 auto; padding: 1px 6px; border-radius: 5px; font: 700 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: #94a3b8; background: rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .35);
}

.server-indicator {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  color: var(--text-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); border-radius: 8px;
}
.server-indicator.online { color: var(--good); border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .1); }
.server-indicator.offline { color: var(--bad); border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .1); }
.server-indicator.local { color: #c4b5fd; border-color: rgba(139, 92, 246, .32); background: rgba(139, 92, 246, .11); }
.server-glyph { position: relative; display: block; width: 13px; height: 14px; }
.server-glyph::before, .server-glyph::after {
  content: ''; position: absolute; left: 0; width: 13px; height: 5px; border: 1.5px solid currentColor; border-radius: 3px; box-sizing: border-box;
}
.server-glyph::before { top: 1px; }
.server-glyph::after { bottom: 1px; }
.server-property { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.server-property strong { display: block; color: var(--text); }
.server-property .meta { display: block; margin-top: 2px; }

/* Avatars (profile pictures + initials fallback). */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; overflow: hidden;
  border-radius: 50%; object-fit: cover; vertical-align: middle;
  color: #fff; font: 700 11px/1 var(--display); text-transform: uppercase;
}
.avatar-sm { width: 22px; height: 22px; font-size: 10px; }
.avatar-lg { width: 96px; height: 96px; border-radius: 26px; font-size: 40px; }
.avatar-c0 { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.avatar-c1 { background: linear-gradient(135deg, #34d399, #059669); }
.avatar-c2 { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.avatar-c3 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.avatar-c4 { background: linear-gradient(135deg, #f472b6, #db2777); }
.avatar-c5 { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.avatar-c6 { background: linear-gradient(135deg, #f87171, #dc2626); }
.avatar-c7 { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.user-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.user-chip > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- tables */
.listing {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
  font-size: 13.5px;
}
.listing th, .listing td { height: var(--row); padding: 4px var(--cell-x); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.listing th {
  height: var(--row-head); padding-top: 5px; padding-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-3); background: rgba(255, 255, 255, .018); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.listing td { color: var(--text-2); }
.listing tbody tr { transition: background-color .15s; }
.listing tbody tr:hover { background: rgba(255, 255, 255, .03); }
.listing tbody tr.selected { background: linear-gradient(90deg, rgba(139, 92, 246, .18), rgba(139, 92, 246, .06)); }
.listing tbody tr.selected:hover { background: linear-gradient(90deg, rgba(139, 92, 246, .24), rgba(139, 92, 246, .08)); }
.listing tbody tr.dragging { opacity: .5; }
.listing tbody tr.drop-target { background: rgba(52, 211, 153, .12); outline: 1px solid rgba(52, 211, 153, .45); outline-offset: -1px; }
.listing tr:last-child td { border-bottom: 0; }
.listing td.actions, .listing th.actions { text-align: right; white-space: nowrap; }
.listing td.actions { padding-left: 6px; padding-right: 10px; }
.listing.compact { box-shadow: none; }
.listing code { white-space: nowrap; }
.listing .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* A glass card that holds a table (+ an optional head and the pager app.js adds). */
.table-card { margin-bottom: 12px; overflow: hidden; }
.table-card > .listing, .panel > .listing, .listing-shell > .listing {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.panel > .listing { margin-top: 12px; background: rgba(0, 0, 0, .14); border: 1px solid var(--line); border-radius: var(--r); }
.table-card-head { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.table-card-head > div { min-width: 0; flex: 1; }
.table-card-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 0 0 1px; font-size: 14.5px; }
.table-card-head .section-icon, .table-card-head .tc-icon { width: 30px; height: 30px; border-radius: 9px; }
.table-card-head .hint { margin: 0; }
.table-card-head .head-actions { margin-left: auto; }
.table-scroll { width: 100%; overflow-x: auto; }

.listing-shell {
  position: relative; z-index: 1; width: 100%; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
}
.listing-shell > .listing { min-width: 0; overflow: visible; }
.select-colgroup { width: 40px; }
.favorite-colgroup { width: 32px; }
.name-colgroup { width: auto; }
.size-colgroup { width: 96px; }
.modified-colgroup { width: 190px; }
.sharing-colgroup { width: 174px; }
.actions-colgroup { width: 296px; }
.select-col, .favorite-col { text-align: center !important; padding-left: 0 !important; padding-right: 0 !important; }
.select-col { width: 40px; }
.favorite-col { width: 32px; }
.select-col input[type=checkbox] { display: block; margin: 0 auto; }
.item-size, .item-modified, .item-sharing { color: var(--text-2); overflow: hidden; }
.item-size { font-variant-numeric: tabular-nums; }
.sharing-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.item-sharing .badge.permission { margin-left: 0; }
.name-cell { min-width: 0; }
.name-cell .star-form { margin-right: 4px; }
.item-name {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; max-width: 100%;
  color: var(--text); font-weight: 600; transition: color .15s;
}
/* Name cell with the favourite star in front of it (owned pages). */
.name-with-star { display: flex; align-items: center; gap: 4px; min-width: 0; }
.name-with-star .item-name { flex: 1 1 auto; width: auto; }
a.item-name:hover { color: #c7d2fe; text-decoration: none; }
.item-label { flex: 1 1 auto; display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-name .inline-badge, .item-name .server-indicator { flex: 0 0 auto; }
.item-sub { display: block; margin-top: 2px; color: var(--text-3); font-size: 12px; font-weight: 400; }
.clip-text, .overflow-link { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.overflow-link { color: inherit; text-decoration: none; }
.overflow-link:hover { color: #c7d2fe; text-decoration: none; }
.overflow-link code { color: inherit; }

.item-icon { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px; transition: transform .25s var(--spring); }
a.item-name:hover .item-icon { transform: scale(1.1) rotate(-4deg); }
.folder-icon { background: linear-gradient(180deg, #facc15, #d97706); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); }
.shared-folder-icon { background: linear-gradient(180deg, #c4b5fd, #22c55e); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); }
.file-icon { background: linear-gradient(180deg, #a78bfa, #7c3aed); border-radius: 3px; }
.item-icon-svg { background: transparent; border-radius: 0; box-shadow: none; }
.item-icon-svg svg { display: block; width: 100%; height: 100%; }
.item-icon-custom { overflow: hidden; background: rgba(255, 255, 255, .05); border-radius: 5px; }
.item-icon-custom img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Trash / restore columns. */
.trash-location, .restore-target { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-location, .trash-location a { color: var(--text-2); }
.trash-location a:hover { color: #c7d2fe; }
.restore-target { color: var(--emerald); font-weight: 600; }

/* Pagination (app.js builds it after long tables). */
.listing-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 12px; padding: 6px 10px;
  color: var(--text-2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.table-card > .listing-pagination { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: rgba(255, 255, 255, .015); }
.pager-summary { font: 600 11.5px var(--mono); color: var(--text-3); white-space: nowrap; }
.pager-controls { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; flex-wrap: wrap; }
.pager-btn {
  min-width: 30px; height: 28px; padding: 0 8px; cursor: pointer;
  color: var(--text-2); background: transparent; border: 1px solid transparent; border-radius: 9px; font: 600 12.5px var(--mono);
  transition: background-color .15s, color .15s, border-color .15s, transform .15s var(--ease);
}
.pager-btn:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .06); }
.pager-btn:active:not(:disabled) { transform: scale(.94); }
.pager-btn.active { color: #fff; background: var(--grad-soft); border-color: rgba(139, 92, 246, .45); }
.pager-btn:disabled { cursor: not-allowed; opacity: .4; }
.pager-ellipsis { min-width: 20px; color: var(--text-3); text-align: center; font-family: var(--mono); }
a.pager-btn, span.pager-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pager-btn.is-disabled { opacity: .4; cursor: default; }

/* Access log table. */
.admin-log-shell { overflow: hidden; }
.admin-log-table { table-layout: fixed; }
.admin-log-table th, .admin-log-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-log-table th:nth-child(1) { width: 206px; }
.admin-log-table th:nth-child(2) { width: 92px; }
.admin-log-table th:nth-child(3) { width: 100px; }
.admin-log-table th:nth-child(4) { width: 170px; }
.admin-log-table th:nth-child(5) { width: 124px; }
.admin-log-table th:nth-child(6) { width: 108px; }
.admin-log-table th:nth-child(7) { width: 110px; }
.admin-log-table th:nth-child(8) { width: 86px; }
.admin-log-table time.when { display: grid; }
.admin-log-target { color: var(--text); font-weight: 600; }
.admin-log-path { font-family: var(--mono); }
.admin-log-path code { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Column widths for the tables on the owned pages (th classes). */
.col-when { width: 214px; }
.col-who { width: 190px; }
.col-action { width: 206px; }
.col-type { width: 104px; }
.col-size { width: 104px; }
.col-status { width: 140px; }
.col-sharing { width: 140px; }
.col-loc { width: 210px; }
.col-restore { width: 170px; }
.col-details { width: 240px; }
.col-acts { width: 120px; }
.col-acts-sm { width: 80px; }
.col-acts-lg { width: 200px; }
.col-perm { width: 130px; }
.col-count { width: 110px; }

/* Relative times (ui.js fills data-rel); the original date stays as the small line. */
time.when { display: inline-grid; line-height: 1.25; }
time.when.has-rel { font: 500 11px/1.35 var(--mono); color: var(--text-3); letter-spacing: -.01em; }
time.when.has-rel::before { content: attr(data-rel); color: var(--text); font: 500 13px/1.35 var(--sans); letter-spacing: 0; }
/* Compact: one line ("3 hours ago"); the exact date is the tooltip (ui.js). Comfortable shows both lines. */
html:not([data-density="comfortable"]) time.when.has-rel { font-size: 0; line-height: 0; }
html:not([data-density="comfortable"]) time.when.has-rel::before { line-height: 1.35; }
/* One-line times need far less room than the two-line ones. */
html:not([data-density="comfortable"]) .col-when,
html:not([data-density="comfortable"]) .admin-log-table th:nth-child(1) { width: 128px; }

/* Activity actions. */
.action-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 500; text-transform: capitalize; }
.action-pill::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-3)); box-shadow: 0 0 10px var(--c, transparent); }
.tone-good { --c: var(--good); }
.tone-bad { --c: var(--bad); }
.tone-cyan { --c: var(--cyan); }
.tone-violet { --c: #a78bfa; }
.tone-pink { --c: var(--pink); }
.tone-warn { --c: var(--caution); }
.tone-muted { --c: #94a3b8; }
.type-tag { font: 500 11.5px var(--mono); color: var(--text-3); text-transform: lowercase; }

/* ---------------------------------------------------------------- empty states */
.empty { color: var(--text-3); text-align: center; padding: 36px 20px; }
td.empty { height: auto; padding: 30px 20px 32px; }
td.empty:not(.empty-rich)::before {
  content: ''; display: block; width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 13px;
  border: 1px solid var(--line-2); background-color: rgba(139, 92, 246, .1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
p.empty { padding: 18px 10px; }
.empty-info { display: grid; justify-items: center; gap: 8px; max-width: 460px; margin: 0 auto; text-align: center; color: var(--text-3); }
.empty-info b { color: var(--text); font: 600 15px var(--display); letter-spacing: -.01em; }
.empty-info p { margin: 0; color: var(--text-3); font-size: 13px; line-height: 1.5; text-wrap: balance; }
.empty-info .btn { margin-top: 8px; }
.empty-icon {
  position: relative; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 15px; display: grid; place-items: center;
  color: #c4b5fd; background: var(--grad-soft); border: 1px solid var(--line-2);
  box-shadow: 0 14px 34px -16px rgba(139, 92, 246, .9);
}
.empty-icon .ic { width: 22px; height: 22px; stroke-width: 1.8; }
.empty-icon::after { content: ''; position: absolute; inset: -5px; border-radius: 19px; border: 1px solid rgba(139, 92, 246, .18); }

/* ---------------------------------------------------------------- alerts */
.alert {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 9px 12px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); font-size: 13.5px; line-height: 1.5;
}
.alert::before {
  content: ''; flex: none; width: 18px; height: 18px; margin-top: 1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.alert.error { color: #fecaca; background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); }
.alert.error::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E");
  color: #fca5a5;
}
.alert.ok { color: #d1fae5; background: rgba(52, 211, 153, .09); border-color: rgba(52, 211, 153, .32); }
.alert.ok::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}
.alert.warn { color: #fef3c7; background: rgba(250, 204, 21, .08); border-color: rgba(250, 204, 21, .32); }
.alert.warn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E");
  color: var(--caution);
}
.alert > div { min-width: 0; }
.alert > div > p { margin: 3px 0 0; color: inherit; opacity: .9; }
.alert.disk-warning::before { content: none; }
.alert.disk-warning > .ic { color: #fca5a5; margin-top: 1px; }
.alert.disk-warning strong { color: #fff; }

/* ---------------------------------------------------------------- modals */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: start center; overflow-y: auto;
  padding: min(10vh, 72px) 16px 24px;
  background: rgba(2, 3, 6, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal-dialog {
  position: relative; width: min(440px, 100%); overflow: visible; color: var(--text);
  background: rgba(14, 16, 26, .96); border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(139, 92, 246, .14);
}
.modal-dialog::before {
  content: ''; position: absolute; inset: 0 24px auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .6), transparent);
}
.transfer-dialog { width: min(620px, 100%); }
/* Keyboard shortcuts ("?", ui.js). */
.shortcuts-backdrop { z-index: 9500; padding-top: min(6vh, 48px); }
.shortcuts-dialog { width: min(720px, 100%); }
.shortcuts-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; max-height: min(66vh, 620px); overflow-y: auto; }
.shortcut-group h3 { margin: 0 0 6px; color: var(--text-3); font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.shortcut-list { display: grid; gap: 1px; margin: 0; }
.shortcut-list > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); }
.shortcut-list > div:last-child { border-bottom: 0; }
.shortcut-list dt { color: var(--text-2); font-size: 12px; white-space: nowrap; }
.shortcut-list dd { margin: 0; color: var(--text); font-size: 13px; }
.shortcut-list kbd, .shortcuts-foot kbd { height: 20px; min-width: 20px; padding: 0 5px; font-size: 10.5px; }
.shortcuts-foot { align-items: center; justify-content: space-between; }
.shortcuts-foot .hint { font-size: 12px; }
.density-btn[aria-pressed='true'] { color: #c4b5fd; }
@media (max-width: 640px) {
  .shortcuts-body { grid-template-columns: 1fr; max-height: 62vh; }
  .shortcut-list > div { grid-template-columns: 112px minmax(0, 1fr); }
  .shortcuts-foot .hint { display: none; }
}
.confirm-backdrop { z-index: 9600; place-items: center; padding-top: 24px; }
.prompt-backdrop { z-index: 9550; place-items: center; padding-top: 24px; }
.confirm-dialog, .prompt-dialog { width: min(460px, 100%); }
.confirm-message { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; white-space: pre-line; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 9px 10px 9px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-close {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0;
  color: transparent; background: transparent; border: 1px solid transparent; border-radius: 9px; font-size: 0; line-height: 1; cursor: pointer;
  transition: background-color .15s, transform .2s var(--ease);
}
.modal-close::before, .modal-close::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: var(--text-2);
  transform: translate(-50%, -50%) rotate(45deg); transition: background-color .15s;
}
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-close:hover { background: rgba(255, 255, 255, .08); transform: rotate(90deg); }
.modal-close:hover::before, .modal-close:hover::after { background: var(--text); }
.modal-body { padding: 15px 18px; }
.modal-body label { margin: 0; color: var(--text-2); font-weight: 500; }
.modal-field { display: grid; gap: 7px; }
.modal-label { color: var(--text-2); font-weight: 600; font-size: 13px; }
.modal-body input[type=text], .modal-body input[type=file] { width: 100%; margin-top: 7px; }
.modal-help { min-height: 20px; margin: 9px 0 0; color: var(--text-3); font-size: 12.5px; overflow-wrap: anywhere; }
.modal-error { margin: 9px 0 0; color: #fca5a5; font-size: 13px; font-weight: 600; }
.modal-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 11px 18px 13px; border-top: 1px solid var(--line); }
.modal-form { margin: 0; }

/* Share-link dialog (shareLinkModal.ejs). */
.share-link-dialog { width: min(800px, 100%); }
.share-link-shell { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 320px; }
.share-link-tabs { display: grid; align-content: start; gap: 3px; padding: 12px 8px; border-right: 1px solid var(--line); background: rgba(0, 0, 0, .18); border-bottom-left-radius: 18px; }
.share-link-tabs button {
  display: block; width: 100%; min-height: 36px; padding: 8px 11px; cursor: pointer;
  color: var(--text-2); background: transparent; border: 1px solid transparent; border-radius: 10px; font-weight: 600; font-size: 13px; text-align: left;
  transition: background-color .15s, color .15s;
}
.share-link-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.share-link-tabs button.active { color: #fff; border-color: rgba(167, 139, 250, .3); background: linear-gradient(90deg, rgba(139, 92, 246, .3), rgba(139, 92, 246, .08)); }
.share-link-content { min-width: 0; padding: 18px 20px; }
.share-link-actions { display: grid; gap: 12px; padding: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: var(--r); }
.share-link-actions .hint { margin: 0; }
.share-link-actions form { display: grid; gap: 10px; }
.share-setting-row input { width: min(280px, 100%); }
.share-link-field + .share-link-field, .share-link-field + form { margin-top: 16px; }
.share-link-field label { margin-bottom: 6px; color: var(--text-3); font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.share-link-field .linkrow { margin: 0; }
.share-link-field .btn { min-width: 70px; }
.one-time-link-list { display: grid; gap: 12px; margin-top: 14px; }
.one-time-link-card { display: grid; gap: 9px; min-width: 0; padding: 13px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: var(--r); }
.one-time-link-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.one-time-link-head strong { min-width: 0; }
.one-time-link-card .hint, .one-time-link-card .linkrow { margin: 0; }
.share-user-section { margin-top: 16px; }
.share-user-list-label { display: block; margin-bottom: 8px; color: var(--text-3); font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.share-user-list { display: grid; gap: 8px; }
.share-user-list .hint { margin: 0; }
.share-user-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 12px; }
.share-user-row .user-chip { flex: 1 1 auto; min-width: 0; }
.share-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.share-user-row .badge.permission { flex: 0 0 auto; }
.share-user-row .share-user-revoke { flex: 0 0 auto; min-width: 0; min-height: 30px; padding: 0 12px; }
.share-user-error { margin: 0; color: #fca5a5; }
.share-expiration { margin: 0; color: var(--text); font-weight: 600; }
.share-qr-card, .qr-card {
  display: grid; justify-items: center; gap: 8px; width: max-content; max-width: 100%; padding: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: var(--r);
}
.share-qr-card { margin-top: 16px; }
.share-qr-card img, .qr-card img { width: 160px; height: 160px; border-radius: 10px; background: #fff; }
.share-qr-card p, .qr-card span { max-width: 190px; margin: 0; color: var(--text-3); font-size: 12px; text-align: center; }

/* Move / copy target picker. */
.transfer-body { display: grid; gap: 12px; }
.transfer-target-list { display: grid; gap: 4px; max-height: min(420px, 56vh); overflow: auto; padding: 6px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); border-radius: var(--r); }
.transfer-target {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 7px 9px; cursor: pointer;
  color: var(--text-2); background: transparent; border: 1px solid transparent; border-radius: 10px; text-align: left;
  transition: background-color .12s, border-color .12s, color .12s;
}
.transfer-target:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.transfer-target.selected { color: #fff; background: rgba(139, 92, 246, .18); border-color: rgba(139, 92, 246, .45); }
.transfer-indent { width: calc(var(--depth, 0) * 18px); height: 1px; }
.transfer-target-main { display: grid; min-width: 0; }
.transfer-target-main span, .transfer-target-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-target-main span { color: inherit; font-weight: 600; }
.transfer-target-main small { color: var(--text-3); font-size: 11.5px; }

/* --------------------------------------------------- selection, dropzone */
.selection-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 10px; color: var(--text);
  background: linear-gradient(120deg, rgba(34, 211, 238, .1), rgba(139, 92, 246, .16)); border: 1px solid rgba(139, 92, 246, .38); border-radius: var(--r);
  box-shadow: 0 14px 34px -18px rgba(139, 92, 246, .8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.selection-count { margin-right: 4px; color: #ddd6fe; font: 600 12.5px var(--mono); }

.dropzone {
  position: relative; z-index: 1; display: grid; gap: 4px; place-items: center; min-height: 88px; margin: 0 0 16px; padding: 18px;
  color: var(--text-2); text-align: center;
  background: linear-gradient(120deg, rgba(34, 211, 238, .05), rgba(139, 92, 246, .08) 55%, rgba(244, 114, 182, .05));
  border: 1.5px dashed rgba(167, 139, 250, .38); border-radius: var(--r-lg);
  transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--spring), box-shadow .25s;
}
.dropzone strong { color: var(--text); font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
.dropzone.dragover, body.drag-upload-active .dropzone {
  color: var(--text); border-color: rgba(34, 211, 238, .8); transform: scale(1.01);
  background: linear-gradient(120deg, rgba(34, 211, 238, .12), rgba(139, 92, 246, .18) 55%, rgba(244, 114, 182, .12));
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .1), 0 20px 50px -20px rgba(139, 92, 246, .9);
}
.dropzone-icon {
  width: 46px; height: 46px; margin-bottom: 4px; border-radius: 14px; display: grid; place-items: center;
  color: #c4b5fd; background: var(--grad-soft); border: 1px solid var(--line-2); transition: transform .3s var(--spring);
}
.dropzone.dragover .dropzone-icon, body.drag-upload-active .dropzone-icon { transform: translateY(-4px) scale(1.06); color: #a5f3fc; }
.drop-status { min-height: 20px; color: #c4b5fd; font-weight: 600; }

.upload-link-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 8px 6px 12px;
  background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .28); border-radius: var(--r);
}
.upload-link-label { color: var(--good); font-weight: 600; white-space: nowrap; }

/* -------------------------------------------------------- upload panel */
.upload-bar { flex: 1 1 auto; height: 6px; background: rgba(255, 255, 255, .08); border-radius: 99px; overflow: hidden; }
.upload-bar-fill {
  position: relative; height: 100%; width: 0; border-radius: 99px; overflow: hidden;
  background: var(--grad); background-size: 200% 100%;
  transition: width .2s var(--ease);
}
.upload-panel.is-active .upload-panel-bar .upload-bar-fill, .upload-row.is-uploading .upload-bar-fill { animation: flow 2s linear infinite; }
.upload-panel.is-active .upload-panel-bar .upload-bar-fill::after, .upload-row.is-uploading .upload-bar-fill::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: sheen 1.4s var(--ease) infinite;
}
/* Floating upload panel (bottom-right, like Seafile's): stays while the user browses. */
.upload-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 95; display: flex; flex-direction: column;
  width: min(410px, calc(100vw - 32px)); max-height: min(460px, calc(100vh - 96px)); color: var(--text);
  background: rgba(14, 16, 26, .95); border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(139, 92, 246, .14);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transform-origin: bottom right;
}
.upload-panel::before {
  content: ''; position: absolute; inset: 0 24px auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .6), transparent);
}
.upload-panel-head { display: flex; align-items: center; gap: 4px; padding: 12px 10px 10px 16px; }
.upload-panel-heading { display: grid; flex: 1 1 auto; min-width: 0; gap: 1px; }
.upload-panel-title { font: 600 14.5px var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.upload-panel.has-errors:not(.is-active) .upload-panel-title { color: #fca5a5; }
.upload-panel:not(.is-active):not(.has-errors) .upload-panel-title { color: #a7f3d0; }
.upload-panel-sub { overflow: hidden; color: var(--text-3); font: 500 11.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.upload-panel-bar { flex: 0 0 auto; height: 5px; margin: 0 16px 12px; }
.upload-panel:not(.is-active):not(.has-errors) .upload-panel-bar .upload-bar-fill { background: linear-gradient(90deg, var(--good), #22d3ee); }
.upload-panel-body { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--line); }
.upload-panel-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px 0; }
.upload-panel-actions .btn { min-height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.upload-panel [data-up-toggle], .upload-panel [data-up-close] { font-size: 0; color: var(--text-2); }
.upload-panel [data-up-toggle]::before {
  content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease);
}
.upload-panel [data-up-toggle][aria-expanded='false']::before { transform: translateY(2px) rotate(225deg); }
.upload-panel [data-up-close]::before, .upload-panel [data-up-close]::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; border-radius: 2px; background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.upload-panel [data-up-close]::after { transform: translate(-50%, -50%) rotate(-45deg); }
.upload-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 6px 8px 10px; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.upload-row { padding: 8px 9px; border-radius: 11px; transition: background-color .15s; }
.upload-row + .upload-row { margin-top: 2px; }
.upload-row:hover { background: rgba(255, 255, 255, .035); }
.upload-row-top, .upload-row-foot { display: flex; align-items: center; gap: 10px; min-width: 0; }
.upload-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.upload-row-size { flex: 0 0 auto; color: var(--text-3); font: 500 11px var(--mono); font-variant-numeric: tabular-nums; }
.upload-row-bar { height: 4px; margin: 6px 0 5px; }
.upload-row-status { flex: 1 1 auto; min-width: 0; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.upload-row-foot .link-btn { flex: 0 0 auto; padding: 2px 7px; font-size: 12px; }
.upload-row.is-done .upload-row-status { color: var(--good); }
.upload-row.is-done.is-unchanged .upload-row-status { color: var(--blue); }
.upload-row.is-done .upload-bar-fill { background: linear-gradient(90deg, var(--good), #22d3ee); }
.upload-row.is-done.is-unchanged .upload-bar-fill { background: var(--blue); }
.upload-row.is-error .upload-row-status { color: #fca5a5; }
.upload-row.is-error .upload-bar-fill { background: var(--bad); }
.upload-row.is-canceled .upload-row-status { color: var(--text-3); }
.upload-row.is-queued .upload-bar, .upload-row.is-canceled .upload-bar { opacity: .5; }

/* --------------------------------------------------------------- toasts */
.toast-stack {
  position: fixed; top: 16px; left: 50%; z-index: 9700; display: grid; gap: 8px;
  width: min(470px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none;
}
/* With the sidebar shown, toasts sit at the bottom-left of the content: at the top they covered the
   folder toolbar and selection bar (Move, Delete...) for seconds after every action, and the upload
   panel owns the bottom-right. Narrow screens keep them at the top. */
@media (min-width: 981px) {
  body.app-body .toast-stack { top: auto; bottom: 18px; left: calc(var(--side) + 24px); width: clamp(260px, calc(100vw - var(--side) - 470px), 420px); transform: none; }
  body.app-body .toast { animation: toastInUp .38s var(--spring) backwards, toastOutDown .3s var(--ease) 6.68s forwards; }
}
.toast {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 10px 12px 13px; color: var(--text); pointer-events: auto;
  background: rgba(18, 21, 34, .95); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(139, 92, 246, .12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-size: 13.5px; line-height: 1.45;
}
.toast::before {
  content: ''; flex: none; width: 26px; height: 26px; border-radius: 8px;
  background-color: rgba(139, 92, 246, .18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.toast > span { flex: 1 1 auto; min-width: 0; padding-top: 3px; overflow-wrap: anywhere; }
.toast-close {
  position: relative; flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  color: transparent; background: none; font-size: 0;
  transition: background-color .15s;
}
.toast-close::before, .toast-close::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--text-3);
  transform: translate(-50%, -50%) rotate(45deg);
}
.toast-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.toast-close:hover { background: rgba(255, 255, 255, .08); }
.toast-close:hover::before, .toast-close:hover::after { background: var(--text); }

/* ------------------------------------------------------ previews, media */
.preview-panel { padding: 16px; }
.preview-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.preview-title h2 { margin: 0; }
.preview-stage {
  display: flex; align-items: center; justify-content: center; min-height: 300px; overflow: auto;
  background: rgba(0, 0, 0, .45); border: 1px solid var(--line); border-radius: var(--r);
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 18px 18px;
}
.image-stage { padding: 16px; }
.image-preview { display: block; max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); }
.media-shell { display: grid; gap: 12px; width: min(100%, 1080px); margin-inline: auto; }
.media-stage { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9); }
.media-player { display: block; width: 100%; max-height: 74vh; background: #000; border-radius: var(--r); }
.audio-stage { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--grad-soft); border: 1px solid var(--line-2); border-radius: var(--r); }
.audio-art { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 16px; background: var(--grad); box-shadow: 0 14px 30px -12px rgba(139, 92, 246, .9); }
.audio-meta { flex: 1 1 auto; min-width: 0; display: grid; gap: 10px; }
.audio-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.audio-player { display: block; width: 100%; }
.media-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: var(--r); }
.media-control { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text-2); font-weight: 600; font-size: 12.5px; }
.media-toolbar .btn.media-btn { min-height: 32px; padding: 0 12px; }
.media-toolbar [data-media-loop][aria-pressed='true'] { --btn-bg: rgba(52, 211, 153, .18); --btn-bd: rgba(52, 211, 153, .5); --btn-fg: #fff; }
.media-toolbar .btn.media-btn[href] { margin-left: auto; }
.media-fallback { margin: 0; padding: 14px 16px; color: var(--text); background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .38); border-radius: var(--r); font-weight: 500; }
.media-fallback a { color: #c4b5fd; font-weight: 600; }
.text-editor {
  display: block; width: 100%; min-height: 440px; resize: vertical; padding: 14px; tab-size: 2;
  color: var(--text); background: rgba(0, 0, 0, .45); border: 1px solid var(--line); border-radius: var(--r);
  font: 13px/1.6 var(--mono);
}
.preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }

/* ----------------------------------------------------------- public pages */
.public-file-head, .public-file-preview, .public-link-meta, .public-folder-list,
.public-upload-crumbs, .public-upload-panel, .public-upload-dropzone, .upload-link-list, .public-wrap {
  width: min(calc(100% - 32px), 72rem); margin-inline: auto;
}
.public-file-head {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; margin-bottom: 16px; padding: 20px 22px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.public-file-head::after {
  content: ''; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%;
  background: var(--violet); filter: blur(70px); opacity: .22; pointer-events: none;
}
.public-file-head > * { position: relative; z-index: 1; }
.public-file-head h1 { font-size: clamp(20px, 2.4vw, 26px); overflow-wrap: anywhere; }
.public-head-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.public-head-icon {
  flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--line-2); box-shadow: 0 14px 34px -16px rgba(139, 92, 246, .9);
}
.public-head-icon .item-icon { width: 28px; height: 28px; }
.public-head-icon .ic { width: 24px; height: 24px; color: #c4b5fd; }
.public-file-card { margin-top: 56px; }
.public-file-preview { display: grid; justify-items: center; padding: 24px; }
.public-no-preview { display: grid; place-items: center; gap: 14px; min-height: 170px; color: var(--text-2); text-align: center; }
.public-no-preview p { margin: 0; font-weight: 600; }
.public-text-viewer {
  width: min(1080px, 100%); min-height: 360px; max-height: 66vh; overflow: auto; margin: 0 auto;
  color: #111827; background: #fff; border: 1px solid rgba(17, 24, 39, .22); border-radius: 10px; box-shadow: 0 12px 40px -16px rgba(0, 0, 0, .8);
  font: 12px/1.55 var(--mono);
}
.public-text-viewer ol { min-height: 240px; margin: 0; padding: 8px 0 8px 42px; background: linear-gradient(90deg, #f3f4f6 0, #f3f4f6 24px, #d1d5db 24px, #d1d5db 25px, #fff 25px); }
.public-text-viewer li { min-height: 18px; padding: 0 16px 0 10px; color: #6b7280; white-space: pre; }
.public-text-viewer li::marker { color: #6b7280; }
.public-text-viewer code { display: inline-block; min-width: 100%; padding: 0; color: #030712; background: transparent; border: 0; border-radius: 0; font: inherit; }
.public-link-meta { display: block; }
.public-link-settings { padding: 16px 20px; }
.public-link-settings h2 { margin-bottom: 8px; font-size: 15px; }
.public-link-settings .hint { margin: 4px 0; }
.public-qr-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.public-folder-list { margin-bottom: 18px; }
.public-upload-crumbs { margin-top: 6px; margin-bottom: 0; }
.public-upload-panel { margin-bottom: 14px; padding: 16px 18px; }
.public-upload-panel form { margin: 0; }
.public-upload-panel .file-select-row { flex-wrap: wrap; }
.public-upload-dropzone { min-height: 150px; margin-bottom: 18px; }
.upload-link-box { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line); }
.public-upload-card { margin-top: 56px; }
.state-card { display: grid; justify-items: center; gap: 10px; padding: 34px 26px 30px; text-align: center; }
.state-card h1 { font-size: 24px; }
.state-card .page-subtitle, .state-card .empty { margin: 0; padding: 0; color: var(--text-2); }
.state-card form { width: 100%; margin-top: 8px; text-align: left; }
.state-card .btn.primary { width: 100%; margin-top: 4px; }
.state-card .empty-icon { margin-bottom: 4px; }
.public-link-settings h2 .ic { color: #c4b5fd; }
.public-upload-panel { display: grid; gap: 12px; }
.public-upload-panel .alert { margin: 0; }
.public-upload-dropzone .hint { max-width: 520px; color: var(--text-3); }

/* ----------------------------------------------------------- auth, errors */
.auth-shell { position: relative; display: grid; place-items: center; min-height: calc(100vh - 140px); padding: 12px 0; }
.auth-card { width: min(410px, 100%); margin: 0; padding: 34px 32px 30px; border-radius: 26px; overflow: hidden; }
.auth-card::after {
  content: ''; position: absolute; left: 50%; top: -120px; width: 300px; height: 220px; transform: translateX(-50%);
  border-radius: 50%; background: var(--violet); filter: blur(80px); opacity: .22; pointer-events: none; z-index: -1;
}
.auth-brand { display: grid; justify-items: center; gap: 14px; }
.auth-logo {
  position: relative; width: 64px; height: 64px; border-radius: 19px; display: grid; place-items: center;
  box-shadow: 0 18px 44px -14px rgba(139, 92, 246, .95);
  animation: floaty 7s ease-in-out infinite;
}
.auth-logo img { display: block; width: 64px; height: 64px; }
.auth-logo::after { content: ''; position: absolute; inset: -7px; border-radius: 26px; border: 1px solid rgba(139, 92, 246, .22); }
.auth-card h1 { margin-top: 18px; text-align: center; font-size: 26px; }
.auth-sub { margin: 6px 0 24px; text-align: center; color: var(--text-3); }
.auth-form { display: grid; gap: 2px; }
.auth-form .btn.primary { width: 100%; min-height: 44px; margin-top: 8px; font-size: 14.5px; border-radius: 13px; }
.auth-form .btn.primary .ic { transition: transform .25s var(--spring); }
.auth-form .btn.primary:hover .ic { transform: translateX(3px); }
.auth-card .alert.error { animation: shake .45s both; }
.auth-foot { margin: 18px 0 0; text-align: center; color: var(--text-3); font: 500 11px var(--mono); letter-spacing: .04em; }
.captcha-field { margin: 4px 0 8px; padding: 12px; border-radius: var(--r); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.captcha-image { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.captcha-image img { display: block; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--line-2); }
.captcha-refresh {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px;
  color: var(--text-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); font-weight: 600; font-size: 12.5px;
}
.captcha-refresh:hover { color: var(--text); background: rgba(255, 255, 255, .09); }
.captcha-field label { margin: 0; }

.error-card { display: grid; justify-items: center; gap: 10px; width: min(540px, 100%); margin: 40px auto; padding: 32px 28px 26px; text-align: center; }
.error-code { font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.error-icon {
  width: 60px; height: 60px; border-radius: 19px; display: grid; place-items: center; margin-bottom: 4px;
  color: #fca5a5; background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .3);
  box-shadow: 0 16px 40px -18px rgba(248, 113, 113, .9);
}
.error-icon .ic { width: 28px; height: 28px; }
.error-card h1 { font-size: 26px; }
.error-message { margin: 0; color: var(--text); font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.error-help { max-width: 48ch; margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.55; text-wrap: balance; }
.error-card .detail { width: 100%; text-align: left; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }

/* Domains page. */
.links-use-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.links-use-main { display: grid; gap: 1px; flex: 1 1 320px; min-width: 0; }
.links-use-label { color: var(--text-3); font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.links-use-url { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; font-size: 13.5px; color: #a5f3fc; background: rgba(34, 211, 238, .08); border-color: rgba(34, 211, 238, .25); }
.links-use-main .hint { margin-top: 3px; }
.card.domain-guide { padding: 0; }
.domain-guide > summary {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px; cursor: pointer; list-style: none;
  color: var(--text); font-weight: 600; border-radius: inherit;
}
.domain-guide > summary::-webkit-details-marker { display: none; }
.domain-guide > summary .ic { color: #c4b5fd; }
.domain-guide > summary .guide-caret { margin-left: auto; color: var(--text-3); transition: transform .2s var(--ease); }
.domain-guide[open] > summary .guide-caret { transform: rotate(90deg); }
.domain-guide > summary:hover { background: rgba(255, 255, 255, .025); }
.guide-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0 16px 14px; list-style: none; counter-reset: step; }
.guide-steps li {
  position: relative; display: grid; gap: 3px; align-content: start; padding: 10px 12px 11px 42px; counter-increment: step;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line); border-radius: var(--r);
}
.guide-steps li::before {
  content: counter(step); position: absolute; left: 11px; top: 10px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  color: #fff; background: var(--grad); font: 700 11.5px var(--mono); box-shadow: 0 6px 16px -8px rgba(139, 92, 246, .9);
}
.guide-steps b { color: var(--text); font-size: 13px; }
.guide-steps span { color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.domain-add-form { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 1fr) auto; align-items: start; gap: 4px 12px; }
.domain-add-form .field { margin: 0; }
.domain-add-form input[type=text] { width: 100%; margin: 0; }
.domain-add-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 21px; }
.field-msg { min-height: 17px; color: var(--text-3); font-size: 12px; line-height: 1.4; }
.field-msg.is-error { color: #fca5a5; font-weight: 600; }
input[aria-invalid='true'] { border-color: rgba(248, 113, 113, .75); }
.domain-names { display: grid; min-width: 0; line-height: 1.25; }
.domain-names small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.domain-table .col-acts-lg { width: 330px; }
.domain-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.domain-actions form.inline { display: inline-flex; }
.link-btn.is-disabled { opacity: .45; cursor: not-allowed; }
.check-steps { display: grid; gap: 3px; margin: 7px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.check-steps li { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; color: var(--text); }
.check-steps .check-mark { flex: none; width: 16px; height: 16px; align-self: center; border-radius: 50%; background: rgba(52, 211, 153, .16) var(--bi-toast-ok) center / 11px no-repeat; }
.check-steps li.is-bad .check-mark { background-color: rgba(248, 113, 113, .16); background-image: var(--bi-toast-err); }
.check-steps b { font-weight: 600; }
.check-detail { color: var(--text-2); }
.domain-check-row td { height: auto !important; padding: 2px 14px 10px 54px !important; background: rgba(255, 255, 255, .015); }
.domain-check-row .check-steps { margin: 0; }
@media (max-width: 1100px) {
  .guide-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .domain-add-form { grid-template-columns: 1fr 1fr; }
  .domain-add-actions { grid-column: 1 / -1; padding-top: 4px; }
  .domain-check-row td { padding: 0 !important; }
}
@media (max-width: 640px) {
  .guide-steps, .domain-add-form { grid-template-columns: 1fr; }
  .links-use-card .section-icon { display: none; }
}

/* API keys. */
.apikey-fresh { border-color: rgba(52, 211, 153, .5); background: linear-gradient(120deg, rgba(52, 211, 153, .09), rgba(34, 211, 238, .06)), var(--panel); }
.apikey-fresh h2 { color: #a7f3d0; }
.apikey-fresh .linkbox { font-size: 13.5px; font-weight: 600; }
.apikey-warning { margin: 10px 0 4px; color: var(--orange); font-size: 13px; }
.apikey-warning strong { color: var(--amber); }
.apikey-revoked { color: #fca5a5; font-weight: 600; }
.apikey-row-actions { display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.apikey-row-actions .inline, .apikey-row-actions .link-btn { flex: 0 0 auto; }
.apikey-row-actions .usage-link { color: #c4b5fd; }
.apikey-row-actions .usage-link:hover { color: #ddd6fe; }
.apikey-row-actions .restore-btn { color: var(--blue); }
.apikey-row-actions .restore-btn:hover { color: #bae6fd; }
.apikey-table-scroll { width: 100%; overflow-x: auto; border-radius: var(--r-lg); }
.listing.apikey-table { min-width: 760px; table-layout: auto; }
.apikey-table .apikey-when { white-space: normal; min-width: 116px; }
.listing.apikey-table .apikey-row-actions { width: 304px; min-width: 304px; }
.apikey-name { color: var(--text); font-weight: 600; }
.tc-icon.key-icon { width: 28px; height: 28px; border-radius: 9px; }
.item-name code.clip-text { min-width: 0; }
.user-chip-lg { gap: 10px; color: var(--text); font-weight: 600; }
.user-chip-lg .avatar { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }
.create-user-form > input[type=text], .create-user-form > input[type=password] { flex: 1 1 180px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .access-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-loc { width: 170px; }
  .col-restore { width: 140px; }
}

@media (max-width: 980px) {
  body.app-body { padding-left: 0; }
  .sidebar {
    width: min(290px, 86vw); z-index: 120; transform: translateX(-104%); visibility: hidden;
    box-shadow: 30px 0 80px -20px rgba(0, 0, 0, .85);
    transition: transform .34s var(--ease), visibility 0s linear .34s;
  }
  body.nav-open .sidebar { transform: none; visibility: visible; transition: transform .34s var(--ease), visibility 0s; }
  .sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: 110; opacity: 0; pointer-events: none;
    background: rgba(2, 3, 6, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: opacity .3s var(--ease);
  }
  body.nav-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .menu-btn { display: inline-flex !important; }
  .topbar-brand { display: inline-flex !important; align-items: center; gap: 9px; }
  .topbar-brand .brand-logo { width: 30px; height: 30px; border-radius: 9px; }
  .topbar-inner { padding: 6px 16px; gap: 10px; }
  .top-context { display: none; }
  .top-search { flex: 1 1 auto; width: auto; max-width: 520px; }
  .content { padding: 14px 16px 56px; }
}

@media (max-width: 920px) {
  .page-head { align-items: flex-start; }
  .grid2 { grid-template-columns: 1fr; }
  .listing:not(.rtable) { display: block; overflow-x: auto; }
  .listing-shell > .listing { display: table; overflow: visible; }
  .linkrow { flex-wrap: wrap; }
  .linkbox.small, .linkbox { width: 100%; flex-basis: 100%; }
  .upload-link-bar { grid-template-columns: 1fr; }
  .share-link-shell { grid-template-columns: 1fr; }
  .share-link-tabs { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); border-bottom-left-radius: 0; }
  .share-link-tabs button { flex: 1; width: auto; text-align: center; white-space: nowrap; }
  .public-file-head, .public-link-meta { grid-template-columns: 1fr; }
  .public-file-head { display: grid; }
  .public-file-head .btn { width: 100%; }
  .public-qr-grid, .qr-card, .share-qr-card { width: 100%; }
  .upload-link-bar .btn, .upload-link-bar form.inline, .upload-link-bar form.inline .btn { width: 100%; }
  .property-list > div { grid-template-columns: 120px minmax(0, 1fr); }
}

/* The folder listing turns into cards (browse.ejs). */
@media (max-width: 960px) {
  .listing-shell { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .listing-shell > .listing { display: block; min-width: 0; background: transparent; border: 0; }
  .listing-shell colgroup, .listing-shell thead { display: none; }
  .listing-shell tbody { display: grid; gap: 8px; }
  /* Card: name on the first line, size / modified / sharing on the second, actions on the right. */
  .listing-shell tr {
    display: grid; grid-template-columns: 26px 24px max-content max-content minmax(0, 1fr) max-content;
    grid-template-areas: "select favorite name name name actions" "select favorite size modified sharing actions";
    column-gap: 8px; row-gap: 1px; align-items: center; min-width: 0; padding: 8px 10px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  }
  .listing-shell tr:hover { background: rgba(255, 255, 255, .05); }
  .listing-shell tr.empty-row { display: block; padding: 0; }
  .listing-shell tr.empty-row .empty { display: block; padding: 36px 20px; }
  .listing-shell td { display: block; height: auto; min-width: 0; padding: 0; border-bottom: 0; }
  .listing-shell .select-col { grid-area: select; align-self: start; width: auto; padding-top: 4px !important; }
  .listing-shell .favorite-col { grid-area: favorite; align-self: start; width: auto; padding-top: 1px !important; }
  .listing-shell .name-cell { grid-area: name; }
  .listing-shell .item-name { min-height: 26px; }
  .listing-shell .item-size { grid-area: size; color: var(--text-3); font-size: 12px; }
  .listing-shell .item-modified { grid-area: modified; color: var(--text-3); font-size: 12px; }
  .listing-shell .item-modified:not(:empty)::before { content: "\00b7"; margin-right: 6px; color: var(--text-3); }
  .listing-shell .item-sharing { grid-area: sharing; overflow: visible; white-space: normal; }
  .listing-shell .item-sharing .badge { height: 18px; padding: 0 6px; font-size: 9.5px; }
  .listing-shell td.actions { grid-area: actions; align-self: center; padding: 0; }
  .listing-shell .row-actions { width: auto; max-width: none; flex-wrap: nowrap; gap: 2px; }
  .listing-shell .icon-btn { width: 30px; height: 30px; }
  .listing-pagination { align-items: flex-start; flex-direction: column; }
  .pager-controls { justify-content: flex-start; }
}

/* Low-priority columns step aside on mid-size screens (shown again in card mode). */
@media (min-width: 1101px) and (max-width: 1360px) { .hide-md { display: none; } }

/* Owned tables (.rtable) become stacked cards with labels from data-label. */
@media (max-width: 1100px) {
  .listing.rtable { display: block; overflow: visible; table-layout: auto; }
  .rtable thead, .rtable colgroup { display: none; }
  .rtable tbody { display: block; }
  .rtable tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .rtable tr:last-child { border-bottom: 0; }
  .listing.rtable td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; height: auto; min-width: 0;
    padding: 3px 0; border: 0; text-align: right; white-space: normal;
  }
  .rtable td::before {
    content: attr(data-label); flex: none; text-align: left;
    color: var(--text-3); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  }
  .rtable td > * { min-width: 0; }
  .rtable td.cell-primary { display: block; padding: 2px 0 8px; text-align: left; }
  .rtable td.cell-primary::before, .rtable td.empty::before { content: none; }
  .rtable td.cell-primary .item-name { display: flex; }
  .rtable td.actions { justify-content: flex-end; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
  .rtable td.actions::before { margin-right: auto; }
  .rtable td.empty { display: block; text-align: center; padding: 40px 12px; }
  .rtable td.empty:not(.empty-rich)::before { content: ''; }
  .rtable tr.is-empty-row { padding: 0; }
  .rtable .trash-location, .rtable .restore-target { max-width: none; }
  .rtable time.when { justify-items: end; text-align: right; }
  .table-card > .listing.rtable { border-radius: 0; }
  .apikey-table-scroll .listing.apikey-table { min-width: 0; }
  .listing.apikey-table .apikey-row-actions { width: auto; min-width: 0; }
  .admin-log-table th, .admin-log-table td { white-space: normal; }
}
@media (min-width: 640px) and (max-width: 1100px) {
  .rtable tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .rtable td.cell-primary, .rtable td.actions, .rtable td.empty, .rtable td.wide { grid-column: 1 / -1; }
  .rtable tr.is-empty-row { display: block; }
}
@media (max-width: 760px) { .table-card-head { padding: 16px; } }

@media (max-width: 640px) {
  .topbar-inner { padding: 6px 12px; gap: 8px; }
  .topbar-brand .brand-name { display: none; }
  .top-search input[type=search] { height: 36px; padding-right: 12px; }
  .top-search kbd { display: none; }
  .content { padding: 12px 14px 56px; }
  .public-chip { display: none; }
  .panel, .card { padding: 14px; border-radius: 16px; }
  .page-head { margin-bottom: 12px; }
  .head-actions { width: 100%; }
  .segmented { width: 100%; }
  .segmented a { flex: 1; justify-content: center; }
  .modal-body { padding: 16px; }
  .modal-head { padding-left: 16px; }
  .modal-foot { padding: 12px 16px 16px; }
  .auth-card { padding: 28px 20px 24px; border-radius: 22px; }
  .container { padding-top: 24px; }
  .settings-actions .btn { width: 100%; }
  .property-list > div { grid-template-columns: 1fr; gap: 4px; }
  .public-file-head { padding: 16px; }
}

@media (max-width: 560px) {
  .access-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric-card strong { font-size: 24px; }
  .upload-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: min(360px, calc(100vh - 80px)); }
  .listing-shell tr {
    grid-template-columns: 26px 24px max-content max-content minmax(0, 1fr);
    grid-template-areas: "select favorite name name name" "select favorite size modified sharing" "actions actions actions actions actions";
  }
  .listing-shell td.actions { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--line); }
  .listing-shell .row-actions { max-width: none; justify-content: flex-end; }
  .file-select-row .btn { flex: 1 1 auto; }
  .file-select-row .modal-help { flex-basis: 100%; order: 5; text-align: center; }
  .inline-form > input, .inline-form > .custom-select, .inline-form > .btn { flex: 1 1 100%; width: 100%; }
}

/* --------------------------------------------------------------- density */
/* Comfortable (Settings or the sidebar button, saved per browser by ui.js): the roomier sizes.
   :where() keeps these at the base rules' weight, so page-specific rules still win. */
html[data-density="comfortable"] { --side: 248px; --top: 60px; --row: 48px; --row-head: 40px; --cell-x: 14px; }
:where(html[data-density="comfortable"]) .sidebar { padding-top: 14px; }
:where(html[data-density="comfortable"]) .nav-title { padding: 14px 10px 6px; font-size: 10.5px; }
:where(html[data-density="comfortable"]) .nav-link { min-height: 37px; padding: 7px 10px; font-size: 13.5px; }
:where(html[data-density="comfortable"]) .brand-logo { width: 38px; height: 38px; border-radius: 11px; }
:where(html[data-density="comfortable"]) h1 { font-size: clamp(22px, 2.2vw, 28px); }
:where(html[data-density="comfortable"]) .page-head { margin-bottom: 20px; }
:where(html[data-density="comfortable"]) .page-subtitle { margin-top: 6px; font-size: 14px; }
:where(html[data-density="comfortable"]) .eyebrow { margin-bottom: 8px; font-size: 11px; }
:where(html[data-density="comfortable"]) .btn { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
:where(html[data-density="comfortable"]) .btn.sm { min-height: 30px; padding: 0 11px; }
:where(html[data-density="comfortable"]) :is(input[type=text], input[type=password], input[type=number], input[type=email], input[type=url], input[type=search], input[type=date], input[type=datetime-local], select) { height: 38px; }
:where(html[data-density="comfortable"]) .custom-select-button { min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
:where(html[data-density="comfortable"]) .table-card-head { padding: 16px 18px 14px; }
:where(html[data-density="comfortable"]) .toolbar { padding: 11px 13px; margin-bottom: 14px; }
@media (min-width: 981px) {
  :where(html[data-density="comfortable"]) .content { padding: 24px 30px 64px; }
  :where(html[data-density="comfortable"]) .topbar-inner { padding: 10px 28px; }
  html[data-density="comfortable"] .top-search input[type=search] { height: 40px; }
  :where(html[data-density="comfortable"]) .access-summary { gap: 14px; margin-bottom: 16px; }
  :where(html[data-density="comfortable"]) .metric-card { gap: 8px; padding: 16px 18px 18px; }
  :where(html[data-density="comfortable"]) .metric-card strong { font-size: 28px; }
  :where(html[data-density="comfortable"]) .modal-body { padding: 18px 20px; }
  html[data-density="comfortable"] .browse-page > .page-head { min-height: 50px; margin-bottom: 14px; }
  html[data-density="comfortable"] .browse-toolbar, html[data-density="comfortable"] .browse-bar .selection-bar { min-height: 50px; padding: 6px; }
  html[data-density="comfortable"] .browse-bar { margin-bottom: 14px; }
  html[data-density="comfortable"] .dirent-list .row-op { width: 32px; height: 32px; }
  html[data-density="comfortable"] .dirent-list .item-visual { width: 24px; height: 24px; }
  html[data-density="comfortable"] .dirent-list .item-visual .item-icon { width: 22px; height: 22px; }
  html[data-density="comfortable"] .dirent-shell.view-grid tbody { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 14px; }
  html[data-density="comfortable"] .dirent-shell.view-grid tbody tr { padding: 10px 10px 12px; }
  html[data-density="comfortable"] .dirent-shell.view-grid .item-visual .item-icon { width: 54px; height: 54px; }
  html[data-density="comfortable"] .dirent-shell.view-grid .item-label { font-size: 13px; }
}

/* Short laptop screens: the whole sidebar still fits without scrolling. */
@media (min-width: 981px) and (max-height: 760px) {
  html:not([data-density="comfortable"]) .nav-link { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
  html:not([data-density="comfortable"]) .nav-title { padding: 8px 10px 4px; }
  html:not([data-density="comfortable"]) .sidebar > .brand { padding-bottom: 4px; }
  html:not([data-density="comfortable"]) .side-foot { padding-top: 6px; gap: 5px; }
}

/* Touch screens get bigger targets whatever the density. */
@media (pointer: coarse) {
  :root { --row: 44px; --row-head: 38px; }
  .nav-link { min-height: 40px; }
  .btn { min-height: 38px; }
  .btn.sm { min-height: 34px; }
  .icon-btn { width: 36px; height: 36px; }
  html .dirent-list .row-op, html .dirent-shell.view-grid .row-more { width: 36px; height: 36px; }
  .new-dropdown-menu button, .context-menu button, .custom-select-menu button { min-height: 40px; }
}

/* ---------------------------------------------------------------- motion */
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-12vmax, 14vmax) scale(.9); } }
@keyframes drift3 { to { transform: translate(-10vmax, -14vmax) scale(1.2); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flow { to { background-position: -200% 0; } }
@keyframes sheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes rowIn { from { opacity: 0; transform: translateY(5px); } }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes popUp { from { opacity: 0; transform: translateY(6px); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.965); } }
@keyframes panelUp { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes toastInUp { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toastOutDown { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes inkIn { from { transform: scaleY(0); opacity: 0; } }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes soft-nav-progress { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@keyframes drawerIn { from { opacity: 0; transform: translateX(-8px); } }

.spin { display: inline-block; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }

/* Page content enters on every load and soft-navigation swap. A quiet in-place refresh
   (ui.js adds .is-quiet to the swapped layout) skips it. Fill mode "backwards" so nothing
   keeps a transform afterwards (fixed modals inside .content stay fixed to the viewport). */
.app-layout:not(.is-quiet) > .content,
body > main.container:not(.is-quiet),
body > main.public-container:not(.is-quiet) { animation: pageIn .32s var(--ease) backwards; }
.app-layout:not(.is-quiet) .listing tbody tr,
main:not(.is-quiet) .listing tbody tr { animation: rowIn .34s var(--ease) backwards; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(1), main:not(.is-quiet) .listing tbody tr:nth-child(1) { animation-delay: 40ms; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(2), main:not(.is-quiet) .listing tbody tr:nth-child(2) { animation-delay: 66ms; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(3), main:not(.is-quiet) .listing tbody tr:nth-child(3) { animation-delay: 92ms; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(4), main:not(.is-quiet) .listing tbody tr:nth-child(4) { animation-delay: 118ms; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(5), main:not(.is-quiet) .listing tbody tr:nth-child(5) { animation-delay: 144ms; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(6), main:not(.is-quiet) .listing tbody tr:nth-child(6) { animation-delay: 170ms; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(7), main:not(.is-quiet) .listing tbody tr:nth-child(7) { animation-delay: 196ms; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(8), main:not(.is-quiet) .listing tbody tr:nth-child(8) { animation-delay: 222ms; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(9), main:not(.is-quiet) .listing tbody tr:nth-child(9) { animation-delay: 248ms; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(10), main:not(.is-quiet) .listing tbody tr:nth-child(10) { animation-delay: 274ms; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(11), main:not(.is-quiet) .listing tbody tr:nth-child(11) { animation-delay: 300ms; }
.app-layout:not(.is-quiet) .listing tbody tr:nth-child(12), main:not(.is-quiet) .listing tbody tr:nth-child(12) { animation-delay: 326ms; }
/* Cards and panels on the page rise in one after another. */
.app-layout:not(.is-quiet) .access-summary > .metric-card,
.app-layout:not(.is-quiet) .icon-settings-grid > .icon-setting-card { animation: fadeUp .45s var(--ease) backwards; }
.access-summary > .metric-card:nth-child(2), .icon-settings-grid > .icon-setting-card:nth-child(2) { animation-delay: 50ms; }
.access-summary > .metric-card:nth-child(3), .icon-settings-grid > .icon-setting-card:nth-child(3) { animation-delay: 100ms; }
.access-summary > .metric-card:nth-child(4), .icon-settings-grid > .icon-setting-card:nth-child(4) { animation-delay: 150ms; }
.icon-settings-grid > .icon-setting-card:nth-child(n+5) { animation-delay: 200ms; }

/* Pops: dropdowns, menus, modals, panels, toasts. They run each time the element is shown
   (display changes from none), so app.js only has to toggle [hidden]. Menus that app.js
   measures for positioning only translate (no scale), so their measured size is exact. */
.new-dropdown-menu, .autocomplete-menu { animation: pop .16s var(--ease) backwards; }
.context-menu, .custom-select-menu { animation: pop .14s var(--ease) backwards; }
.custom-select-menu.above { animation-name: popUp; }
.modal-backdrop { animation: fadeIn .2s var(--ease) backwards; }
.modal-backdrop > .modal-dialog { animation: modalIn .3s var(--spring) backwards; }
.upload-panel { animation: panelUp .38s var(--spring) backwards; }
.upload-row { animation: rowIn .3s var(--ease) backwards; }
.selection-bar { animation: pop .2s var(--ease) backwards; }
/* Toasts slide in, then fade away just before app.js removes them (after 7 s). */
.toast { animation: toastIn .38s var(--spring) backwards, toastOut .3s var(--ease) 6.68s forwards; }
.app-layout:not(.is-quiet) .alert, main:not(.is-quiet) .alert { animation: fadeUp .35s var(--ease) backwards; }
body.nav-open .sidebar .nav-link { animation: drawerIn .3s var(--ease) backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .aurora i, .auth-logo { animation: none !important; }
  .toast { animation: none !important; }
}