/* ==========================================================================
   Web Disk — FileBrowser UI refresh
   Injected by nginx after FileBrowser's own stylesheet. Works in light + dark.
   ========================================================================== */

/* ---------- design tokens ------------------------------------------------ */
:root {
  --wd-header-h: 60px;
  --wd-sidebar-w: 244px;
  --wd-accent: #2563eb;
  --wd-accent-strong: #1d4ed8;
  --wd-accent-soft: rgba(37, 99, 235, 0.10);
  --wd-bg: #f3f6fb;
  --wd-surface: #ffffff;
  --wd-surface-2: #f7f9fc;
  --wd-border: #e3e8f0;
  --wd-border-strong: #cfd8e6;
  --wd-text: #172033;
  --wd-text-dim: #667085;
  --wd-hover: rgba(37, 99, 235, 0.06);
  --wd-row-hover: #f5f8ff;
  --wd-radius: 12px;
  --wd-radius-lg: 16px;
  --wd-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
  --wd-shadow-md: 0 6px 20px rgba(16, 24, 40, .10);
  --wd-shadow-lg: 0 24px 64px rgba(16, 24, 40, .22);
  --wd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  /* file-type colours (icons + optional badges) */
  --wd-c-folder: #2563eb;
  --wd-c-image: #ea580c;
  --wd-c-video: #7c3aed;
  --wd-c-audio: #b45309;
  --wd-c-pdf: #dc2626;
  --wd-c-archive: #0369a1;
  --wd-c-doc: #2563eb;
  --wd-c-sheet: #15803d;
  --wd-c-slide: #c2410c;
  --wd-c-code: #0f766e;
  --wd-c-ebook: #9333ea;
  --wd-c-text: #475467;
  --wd-c-other: #667085;

  /* remap FileBrowser's palette onto the new one */
  --blue: var(--wd-accent);
  --dark-blue: var(--wd-accent-strong);
  --red: #dc2626;
  --dark-red: #b91c1c;
  --action: #475467;
  --background: var(--wd-bg);
  --surfacePrimary: var(--wd-surface);
  --surfaceSecondary: var(--wd-surface-2);
  --textPrimary: var(--wd-text);
  --textSecondary: var(--wd-text-dim);
  --divider: var(--wd-border);
  --borderPrimary: var(--wd-border);
  --borderSecondary: var(--wd-border-strong);
  --hover: var(--wd-hover);
  --iconPrimary: #475467;
  --iconSecondary: #ffffff;
  --iconTertiary: #7c8aa0;
  --item-selected: #ffffff;
}

:root.dark {
  --wd-accent: #5b9dff;
  --wd-accent-strong: #7db4ff;
  --wd-accent-soft: rgba(91, 157, 255, 0.16);
  --wd-bg: #0d1319;
  --wd-surface: #151d26;
  --wd-surface-2: #1a2531;
  --wd-border: #26323f;
  --wd-border-strong: #354455;
  --wd-text: #e8eef6;
  --wd-text-dim: #95a4b6;
  --wd-hover: rgba(120, 170, 255, 0.10);
  --wd-row-hover: rgba(91, 157, 255, 0.07);
  --wd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --wd-shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --wd-shadow-lg: 0 28px 70px rgba(0, 0, 0, .6);
  --action: #c3d0df;
  --iconPrimary: #c3d0df;
  --iconTertiary: #93a3b8;

  --wd-c-folder: #7db4ff;
  --wd-c-image: #fb923c;
  --wd-c-video: #b49bff;
  --wd-c-audio: #facc15;
  --wd-c-pdf: #f87171;
  --wd-c-archive: #38bdf8;
  --wd-c-doc: #7db4ff;
  --wd-c-sheet: #4ade80;
  --wd-c-slide: #fb923c;
  --wd-c-code: #2dd4bf;
  --wd-c-ebook: #c084fc;
  --wd-c-text: #a8b6c8;
  --wd-c-other: #95a4b6;
}

/* ---------- base --------------------------------------------------------- */
html { scrollbar-color: var(--wd-border-strong) transparent; }

body {
  padding-top: var(--wd-header-h);
  background: var(--wd-bg);
  color: var(--wd-text);
  font-family: var(--wd-font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--wd-accent-soft); color: var(--wd-text); }

* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--wd-border-strong);
  border: 3px solid transparent;
  border-radius: 99px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--wd-text-dim); background-clip: content-box; }

:focus-visible {
  outline: 2px solid var(--wd-accent);
  outline-offset: 2px;
}

/* boot overlay: avoid a white flash in dark mode */
html.dark #loading { background: var(--wd-bg); }
#loading .spinner > div { background: var(--wd-accent); }

/* ---------- header ------------------------------------------------------- */
header {
  height: var(--wd-header-h);
  padding: 0 14px;
  /* Keep this opaque: backdrop-filter/filter on <header> would become the
     containing block for the fixed-position search overlay and clip it to
     the header height (search results would be invisible). */
  background: var(--wd-surface);
  border-bottom: 1px solid var(--wd-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

header title {
  padding: 0 8px 0 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wd-text);
}

header img { height: 34px; margin-right: 10px; border-radius: 9px; }

header .action,
header #more,
header .menu-button,
header .search-button {
  width: 40px;
  height: 40px;
  margin: 0 2px;
  border-radius: 10px;
  color: var(--wd-text-dim);
}

/* desktop action row lives directly in the header */
header > #dropdown .action,
header #dropdown .action,
header #more,
header .menu-button,
header .search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* keep the mobile-only buttons hidden on desktop */
@media (min-width: 737px) {
  header .menu-button,
  header .search-button { display: none; }
}

header .action i {
  padding: 0;
  font-size: 22px;
  border-radius: 0;
  color: inherit;
}

header .action:hover {
  background: var(--wd-hover);
  color: var(--wd-accent);
}
header .action:active { transform: scale(.94); }
header .action span { display: none; }

/* ---------- search ------------------------------------------------------- */
/* Keep the field 40px tall so the header's align-items:center puts it on the
   same baseline as the action icons (FileBrowser's 100% height left it 10px
   too high). The active overlay re-asserts height:100%. */
#search { height: 40px; max-width: 460px; }
#search #input {
  height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--wd-surface-2);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#search #input:hover { background: var(--wd-hover); }
#search #input:focus-within {
  background: var(--wd-surface);
  border-color: var(--wd-accent);
  box-shadow: 0 0 0 3px var(--wd-accent-soft);
}
#search input { font-size: 14px; }
#search input:focus,
#search input:focus-visible { outline: none; }
#search #input > i { color: var(--wd-text-dim); font-size: 20px; }

/* keyboard hint in the idle field */
@media (hover: hover) and (pointer: fine) {
  #search #input::after {
    content: "Ctrl K";
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px solid var(--wd-border);
    border-radius: 6px;
    color: var(--wd-text-dim);
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    opacity: .85;
  }
  #search.active #input::after { display: none; }
}

/* result counter next to the field */
#search #input > span {
  margin-top: 0 !important;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--wd-accent-soft);
  color: var(--wd-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

/* ---------- search overlay (expanded) ------------------------------------ */
#search.active {
  padding: 0 18px;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#search.active > #input {
  width: 100%;
  max-width: 720px;
  height: 56px;
  margin: 64px auto 0;
  padding: 0 12px 0 16px;
  border: 1px solid var(--wd-border);
  border-radius: 14px !important;
  background: var(--wd-surface);
  box-shadow: 0 18px 50px rgba(16, 24, 40, .28);
}
#search.active > #input:focus-within {
  border-color: var(--wd-accent);
  box-shadow: 0 18px 50px rgba(16, 24, 40, .28), 0 0 0 3px var(--wd-accent-soft);
}
#search.active #input input { font-size: 16px; }
#search.active #input > i.material-icons:first-child { color: var(--wd-accent); font-size: 22px; }
#search.active #input > button.action {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--wd-text-dim);
}
#search.active #input > button.action:hover { background: var(--wd-hover); color: var(--wd-text); }
#search.active #input i.spin { margin-left: 6px; color: var(--wd-accent); }

#search.active > #result {
  width: 100%;
  max-width: 720px;
  height: auto;
  min-height: 96px;
  max-height: calc(100% - 154px);
  margin: 10px auto 24px;
  padding: 8px;
  border-radius: 16px !important;
  background: var(--wd-surface);
  box-shadow: 0 24px 64px rgba(16, 24, 40, .30);
  overscroll-behavior: contain;
}

/* the results column */
#search #result > div { max-width: none; }
#search #result > div > p {
  margin: 28px 12px;
  color: var(--wd-text-dim);
  font-size: 14px;
  text-align: center;
}
#search #result ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#search #result ul li { margin: 0; }
#search #result ul li a {
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--wd-text);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  transition: background .12s, color .12s;
}
#search #result ul li a:hover,
#search #result ul li a:focus-visible {
  background: var(--wd-row-hover);
  color: var(--wd-accent);
  outline: none;
}
#search #result ul li a i {
  flex: 0 0 auto;
  color: var(--wd-accent);
  font-size: 20px;
}
/* beat the component's `#search.active #result i { color: ... }` */
#search.active #result ul li a i { color: var(--wd-accent); }
#search #result ul li a span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the component's "searching" row (#renew) */
#search #result #renew { padding: 10px 0; color: var(--wd-text-dim); font-size: 13px; }

/* empty state after a finished search (class set by ui.js) */
#search.wd-empty #result > div > p { display: none; }
#search.wd-empty #result > div::before {
  content: "search_off";
  display: block;
  margin: 26px auto 0;
  color: var(--wd-border-strong);
  font-family: "Material Icons";
  font-size: 32px;
  line-height: 1;
  text-align: center;
}
#search.wd-empty #result > div::after {
  content: "没有找到匹配的文件";
  display: block;
  margin: 10px 12px 24px;
  color: var(--wd-text-dim);
  font-size: 14px;
  text-align: center;
}

/* type shortcuts shown before typing */
#search .boxes {
  margin: 10px 4px 6px;
  padding: 12px;
  border: 1px solid var(--wd-border);
  border-radius: 14px;
  background: var(--wd-surface-2);
}
#search .boxes h3 {
  margin: 0 0 10px;
  color: var(--wd-text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#search .boxes > div { gap: 8px; margin: 0 !important; }
#search .boxes > div > div {
  flex: 1 1 0;
  width: auto;
  margin: 0 !important;
  padding: 12px 8px;
  border: 1px solid var(--wd-border);
  border-radius: 12px;
  background: var(--wd-surface);
  color: var(--wd-text);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
#search .boxes > div > div:hover {
  border-color: var(--wd-accent);
  box-shadow: var(--wd-shadow-sm);
}
#search .boxes > div > div:active { transform: scale(.97); }
#search .boxes i { color: var(--wd-accent) !important; font-size: 26px; }
#search .boxes p { margin: 6px 0 0; font-size: 12px; color: var(--wd-text-dim); }

/* scrollbar */
#search #result::-webkit-scrollbar { width: 10px; }
#search #result::-webkit-scrollbar-thumb {
  background: var(--wd-border-strong);
  border: 3px solid var(--wd-surface);
  border-radius: 8px;
}

@media (max-width: 736px) {
  #search.active { padding: 0 10px; }
  #search.active > #input {
    height: 50px;
    margin-top: 10px;
    border-radius: 12px !important;
  }
  #search.active > #result {
    max-height: calc(100% - 84px);
    margin: 8px auto 12px;
    border-radius: 14px !important;
  }
  #search .boxes > div { flex-wrap: wrap; }
  #search .boxes > div > div { flex: 1 1 40%; }
}

/* dropdown menu is only a popover on small screens */
@media (max-width: 736px) {
  #dropdown {
    top: 68px;
    right: 10px;
    left: auto;
    width: calc(100% - 20px);
    max-width: 300px;
    padding: 6px;
    border: 1px solid var(--wd-border);
    border-radius: 14px;
    background: var(--wd-surface);
    box-shadow: var(--wd-shadow-md);
    overflow: hidden;
  }
  header #dropdown .action {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    height: 40px;
    border-radius: 9px;
    padding: 0 10px;
    gap: 10px;
  }
  #dropdown .action span { display: inline-block; }
}

/* ---------- sidebar ------------------------------------------------------ */
nav {
  top: var(--wd-header-h);
  width: 244px;
  height: calc(100vh - var(--wd-header-h));
  padding: 10px 10px 24px;
  background: var(--wd-surface);
  border-right: 1px solid var(--wd-border);
  box-shadow: none;
}

nav > div { border-top: 1px solid var(--wd-border); margin: 8px 4px; padding-top: 8px; }

nav .action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  margin: 2px 0;
  border-radius: 10px;
  color: var(--wd-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  transition: background .13s, color .13s, transform .08s;
}
nav .action i {
  width: 24px;
  margin: 0;
  padding: 0;
  font-size: 21px;
  text-align: center;
  color: var(--wd-text-dim);
  transition: color .13s;
}
nav .action:hover { background: var(--wd-hover); color: var(--wd-accent); }
nav .action:hover i { color: var(--wd-accent); }
nav .action:active { transform: scale(.985); }
/* the first entry is the signed-in user: give it a soft avatar */
nav > button:first-child { margin-bottom: 6px; }
nav > button:first-child i {
  width: 30px;
  height: 30px;
  margin-left: -3px;
  padding: 6px;
  border-radius: 50%;
  background: var(--wd-accent-soft);
  color: var(--wd-accent);
}
nav > button:first-child:hover i { background: var(--wd-accent); color: #fff; }

/* current location */
nav .action.wd-active {
  background: var(--wd-accent-soft);
  color: var(--wd-accent);
  font-weight: 600;
}
nav .action.wd-active i { color: var(--wd-accent); }

nav .action#logout { color: var(--wd-text-dim); }
nav .action#logout:hover { color: #dc2626; background: rgba(220, 38, 38, .08); }
nav .action#logout:hover i { color: #dc2626; }

nav .credits {
  width: auto !important;
  margin: 18px 8px 6px !important;
  padding-top: 12px;
  border-top: 1px solid var(--wd-border);
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--wd-text-dim);
  opacity: .9;
}
nav .credits a { color: var(--wd-accent); }

/* disk usage */
nav .progress,
nav .vue-simple-progress { border-radius: 99px; overflow: hidden; }

/* mobile drawer */
.overlay { background: rgba(12, 18, 28, .45); backdrop-filter: blur(2px); }

/* ---------- main / breadcrumbs ------------------------------------------ */
main {
  width: auto;
  max-width: 1500px;
  margin: 0 26px 40px 270px;
  padding-top: 6px;
}

.breadcrumbs {
  height: 46px;
  margin: 10px 0 12px;
  padding: 0 8px;
  top: calc(var(--wd-header-h) + 8px);
  background: var(--wd-surface);
  border: 1px solid var(--wd-border);
  border-radius: 12px;
  box-shadow: var(--wd-shadow-sm);
  font-size: 13.5px;
  color: var(--wd-text-dim);
}
.breadcrumbs a { border-radius: 8px; padding: 5px 8px; transition: background .12s, color .12s; }
.breadcrumbs a:hover { background: var(--wd-hover); color: var(--wd-accent); }
.breadcrumbs a:last-child { color: var(--wd-text); font-weight: 600; }
.breadcrumbs .chevron i { font-size: 18px; color: var(--wd-text-dim); opacity: .7; }
.breadcrumbs span a { padding: 5px 8px; }

/* ---------- file listing (list mode) ------------------------------------ */
#listing.file-icons { margin-top: 2px; }

#listing.list {
  background: var(--wd-surface);
  border: 1px solid var(--wd-border);
  border-radius: 14px;
  box-shadow: var(--wd-shadow-sm);
  overflow: visible;
  margin: 0;
  min-height: 0;
}

#listing.list .item {
  padding: 0 18px !important;
  min-height: 54px;
  border: 0 !important;
  border-top: 1px solid var(--wd-border) !important;
  background: transparent;
  transition: background-color .12s ease, box-shadow .12s ease;
}
#listing.list .item:first-child { border-top: 0 !important; }

#listing.list .item:not(.header):hover {
  background: var(--wd-row-hover);
  box-shadow: inset 3px 0 0 var(--wd-accent);
}
#listing.list .item:not(.header):active { background: var(--wd-accent-soft); }

#listing.list .item[aria-selected="true"] {
  background: var(--wd-accent) !important;
  color: #fff !important;
  box-shadow: none;
}
#listing.list .item[aria-selected="true"] .name,
#listing.list .item[aria-selected="true"] .size,
#listing.list .item[aria-selected="true"] .modified,
#listing.list .item[aria-selected="true"] time { color: #fff !important; }
#listing .item[aria-selected="true"] .wd-row-meta { color: rgba(255, 255, 255, .82) !important; }
#listing.list .item[aria-selected="true"] i { color: #fff !important; }
#listing.list .item[aria-selected="true"] img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }

#listing.list .item > div:first-of-type { width: 42px !important; flex: 0 0 42px; }
#listing.list .item > div:last-of-type { width: calc(100% - 42px) !important; min-width: 0; }
#listing.list .item .name {
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 20px;
  font-weight: 500 !important;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  color: var(--wd-text);
}
#listing.list .item .size {
  width: 108px !important;
  flex: 0 0 108px;
  text-align: right;
  font-size: 12.5px !important;
  font-variant-numeric: tabular-nums;
  color: var(--wd-text-dim);
}
#listing.list .item .modified {
  width: 172px !important;
  flex: 0 0 172px;
  text-align: right;
  font-size: 12.5px !important;
  color: var(--wd-text-dim);
}
#listing.list .item .modified time { color: inherit; }

#listing .item i { font-size: 23px; }
#listing.list .item > div:first-of-type i { font-size: 23px; }
#listing.list .item > div:first-of-type img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: cover;
}
#listing .item[data-dir="true"] i { color: var(--wd-accent); }
#listing .item[data-dir="true"] .size { display: none; }

/* sticky column header */
#listing.list .item.header {
  position: sticky;
  top: calc(var(--wd-header-h) + 68px);
  z-index: 40;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 18px !important;
  background: var(--wd-surface-2) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wd-border) !important;
  border-radius: 14px 14px 0 0;
}
#listing.list .item.header p {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wd-text-dim);
}
#listing.list .item.header .name {
  width: auto !important;
  flex: 1 1 auto;
  margin-right: 0 !important;
  padding-right: 20px;
}
#listing.list .item.header .size { width: 108px !important; flex: 0 0 108px; text-align: right; }
#listing.list .item.header .modified { width: 172px !important; flex: 0 0 172px; text-align: right; }
#listing.list .item.header i { font-size: 17px; opacity: .55; }

#listing.list h2 { display: none; }

/* "folders" group label */
#listing > div > h2,
#listing h2 {
  margin: 6px 2px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wd-text-dim);
}

/* ---------- file listing (mosaic / gallery) ----------------------------- */
#listing.mosaic {
  margin: 0 -7px;
  padding-top: 0;
  gap: 0;
}
#listing.mosaic .item {
  width: calc(33.333% - 14px);
  margin: 7px;
  padding: 12px;
  border: 1px solid var(--wd-border);
  border-radius: 14px;
  background: var(--wd-surface);
  box-shadow: var(--wd-shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background-color .12s ease;
}
#listing.mosaic .item:hover {
  transform: translateY(-2px);
  border-color: var(--wd-border-strong);
  box-shadow: var(--wd-shadow-md);
}
#listing.mosaic .item:active { transform: translateY(0) scale(.992); }
#listing.mosaic .item[aria-selected="true"] {
  background: var(--wd-accent) !important;
  border-color: transparent;
  color: #fff !important;
}
#listing.mosaic .item[aria-selected="true"] .name,
#listing.mosaic .item[aria-selected="true"] .size,
#listing.mosaic .item[aria-selected="true"] .modified,
#listing.mosaic .item[aria-selected="true"] time { color: #fff !important; }
#listing.mosaic .item[aria-selected="true"] i { color: #fff !important; }

#listing.mosaic .item > div:first-of-type { width: 46px; }
#listing.mosaic .item > div:first-of-type i { font-size: 36px; }
#listing.mosaic .item > div:last-of-type { width: calc(100% - 52px); }
#listing.mosaic .item .name { font-weight: 600; font-size: 14px; }

#listing.mosaic.gallery .item > div:first-of-type {
  width: 100%;
  height: 156px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--wd-surface-2);
}
#listing.mosaic.gallery .item img { width: 100%; height: 100%; object-fit: cover; }
#listing.mosaic.gallery .item > div:last-of-type { bottom: 10px; }
#listing.mosaic.gallery .item[data-type="image"] > div:last-of-type {
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62));
  border-radius: 0 0 12px 12px;
}

/* ---------- actions / buttons ------------------------------------------- */
.action {
  border-radius: 10px;
  color: var(--action);
  transition: background-color .13s, color .13s, transform .08s;
}
.action i { padding: 6px; transition: none; }
.action:hover { background: var(--wd-hover); }
.action:active { transform: scale(.94); }

.button {
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--wd-accent);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background-color .13s, transform .08s, box-shadow .13s;
}
.button:hover { background: var(--wd-accent-strong); }
.button:active { transform: scale(.98); }
.button--flat { background: transparent; color: var(--wd-accent); }
.button--flat:hover { background: var(--wd-accent-soft); }
.button--flat.button--red { color: #dc2626; }
.button--flat.button--red:hover { background: rgba(220, 38, 38, .1); }
.button--flat.button--grey { color: var(--wd-text-dim); }
.button--flat.button--grey:hover { background: var(--wd-surface-2); }

.input {
  padding: 9px 12px;
  border: 1px solid var(--wd-border);
  border-radius: 10px;
  background: var(--wd-surface);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .13s, box-shadow .13s;
}
.input:hover { border-color: var(--wd-border-strong); }
.input:focus {
  border-color: var(--wd-accent);
  box-shadow: 0 0 0 3px var(--wd-accent-soft);
  outline: 0;
}

/* ---------- cards / dialogs --------------------------------------------- */
.card {
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius-lg);
  background: var(--wd-surface);
  color: var(--wd-text);
  box-shadow: var(--wd-shadow-lg);
}
.card .card-title { padding: 22px 24px 6px; }
.card .card-title h2 { font-size: 17px; font-weight: 600; }
.card > div { padding: 12px 24px; }
.card > div:first-child { padding-top: 22px; }
.card > div:last-child { padding-bottom: 22px; }
.card .card-action { padding-top: 6px; }
.card .card-content.full { overflow: auto; }
.card.floating { max-width: 30em; }

/* ---------- upload panel ------------------------------------------------ */
.upload-files .card.floating {
  right: 22px !important;
  bottom: 22px !important;
  width: 380px !important;
  max-width: calc(100vw - 34px) !important;
  min-width: 0 !important;
  border-radius: 14px;
  box-shadow: var(--wd-shadow-md);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.upload-files .card .card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 14px 10px;
  font-size: 13px;
  font-weight: 600;
  justify-content: flex-start;
  gap: 4px 8px;
  border-bottom: 1px solid var(--wd-border);
}
.upload-files .card .card-title h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-files .upload-info {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wd-text-dim);
  font-variant-numeric: tabular-nums;
}
.upload-files .upload-info > div { margin: 0 !important; }
.upload-files .progress { border-radius: 99px; overflow: hidden; }
.upload-files .card-content.file-icons { padding: 8px 10px 12px; }
.upload-files .file { padding: 6px 4px; border-radius: 8px; }
.upload-files .file:hover { background: var(--wd-hover); }
.upload-files .file-name { font-size: 12.5px; }
.upload-files .file-progress {
  height: 4px;
  margin-top: 5px;
  border-radius: 99px;
  background: var(--wd-surface-2);
  overflow: hidden;
}
.upload-files .file-progress > div {
  height: 100%;
  border-radius: 99px;
  background: var(--wd-accent);
  transition: width .18s linear;
}
.upload-files .card .card-title .action { width: 30px; height: 30px; }
.upload-files .card .card-title .action i { font-size: 18px; padding: 6px; }

/* global upload progress bar */
.progress { height: 3px; background: transparent; }
.progress div {
  background: linear-gradient(90deg, var(--wd-accent), #60a5fa);
  box-shadow: 0 0 8px var(--wd-accent);
}

/* ---------- selection bar ---------------------------------------------- */
#listing #multiple-selection {
  background: var(--wd-accent);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 28px rgba(16, 24, 40, .16);
}
#multiple-selection p { font-weight: 600; }
#listing #multiple-selection:not(.active) { visibility: hidden; pointer-events: none; }
#multiple-selection .action { color: #fff; }
#multiple-selection .action:hover { background: rgba(255, 255, 255, .16); }

/* ---------- context menu ------------------------------------------------ */
.context-menu {
  padding: 6px;
  border: 1px solid var(--wd-border);
  border-radius: 12px;
  background: var(--wd-surface);
  box-shadow: var(--wd-shadow-md);
}
.context-menu .action { border-radius: 8px; padding: 3px 6px; }
.context-menu .action:hover { background: var(--wd-hover); }

/* ---------- preview overlay -------------------------------------------- */
#previewer { background: #080b10; }
#previewer header {
  background: linear-gradient(rgba(0, 0, 0, .55), transparent);
  border-bottom: 0;
  backdrop-filter: none;
}
#previewer header title { font-size: 15px; font-weight: 500; color: #fff; }
#previewer > button {
  width: 46px;
  height: 46px;
  background: rgba(20, 26, 34, .62);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
}
#previewer > button:hover { background: rgba(37, 99, 235, .75); }
#previewer .preview img { border-radius: 6px; }

/* ---------- login ------------------------------------------------------- */
#login {
  background:
    radial-gradient(900px 500px at 15% -10%, var(--wd-accent-soft), transparent 60%),
    radial-gradient(800px 500px at 95% 110%, rgba(96, 165, 250, .12), transparent 60%),
    var(--wd-bg);
}
#login form {
  width: calc(100% - 40px);
  max-width: 380px;
  padding: 34px 32px 30px;
  background: var(--wd-surface);
  border: 1px solid var(--wd-border);
  border-radius: 20px;
  box-shadow: var(--wd-shadow-lg);
}
#login img { width: 52px; height: 52px; border-radius: 14px; }
#login h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; margin: 14px 0 22px; }
#login .input { background: var(--wd-surface-2); margin-bottom: 10px; }
#login .button {
  width: 100%;
  margin-top: 4px;
  padding: 11px 18px;
}
#login p { font-size: 13px; }
#login .wrong,
#login .logout-message { border-radius: 10px; font-size: 13px; }

/* ---------- toast notifications ---------------------------------------- */
.Vue-Toastification__toast {
  min-height: 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: var(--wd-font);
  font-size: 13.5px;
  box-shadow: var(--wd-shadow-md);
}
.Vue-Toastification__toast--default { background: var(--wd-surface); color: var(--wd-text); }
.Vue-Toastification__toast-body { font-weight: 500; }

/* ---------- misc -------------------------------------------------------- */
.message { font-size: 15px; font-weight: 500; color: var(--wd-text-dim); }
.message i { font-size: 40px; opacity: .6; }
.message.delayed { display: flex !important; align-items: center; justify-content: center; gap: 10px; }
.message .spinner > div { background: var(--wd-accent); }

/* settings tabs */
.dashboard #nav .wrapper { border-bottom: 1px solid var(--wd-border); }
.dashboard #nav ul { font-size: 13px; font-weight: 500; }
.dashboard #nav ul li { padding: 14px 18px; border-radius: 8px 8px 0 0; }
.dashboard #nav ul li:hover { background: var(--wd-hover); }
.dashboard #nav ul li.active { border-color: var(--wd-accent); color: var(--wd-accent); }

/* share page */
.share__box { border-radius: 14px; }

table { border-collapse: collapse; }
table tr > * { padding: 10px 14px; }
table thead { color: var(--wd-text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* our injected reader button (kept in sync with enhance.js) */
.enh-read-btn { border-radius: 8px !important; }

/* breadcrumb counters */
.breadcrumbs .wd-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  padding-right: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--wd-text-dim);
}
.breadcrumbs .wd-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--wd-surface-2);
}
.breadcrumbs .wd-meta i { font-size: 15px; color: var(--wd-text-dim); }

/* instant-feedback helpers */
header::after {
  content: "";
  position: fixed;
  top: var(--wd-header-h);
  left: 0;
  z-index: 99998;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--wd-accent), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .1s ease .12s;
  pointer-events: none;
}
html.wd-navigating header::after {
  opacity: 1;
  animation: wd-sweep .9s linear infinite;
}
@keyframes wd-sweep {
  0% { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

/* feedback toast */
.wd-toast {
  position: fixed;
  left: 50%;
  top: calc(var(--wd-header-h) + 16px);
  z-index: 100001;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 460px);
  padding: 11px 18px;
  border: 1px solid var(--wd-border);
  border-radius: 999px;
  background: var(--wd-surface);
  color: var(--wd-text);
  font-family: var(--wd-font);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--wd-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -12px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wd-toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.wd-toast__spin {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid var(--wd-accent-soft);
  border-top-color: var(--wd-accent);
  border-radius: 50%;
  animation: wd-spin .7s linear infinite;
}
@keyframes wd-spin { to { transform: rotate(360deg); } }

@media (max-width: 736px) {
  .breadcrumbs .wd-meta { display: none; }
  .wd-toast { top: calc(var(--wd-header-h) + 10px); font-size: 13px; }
}

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 1240px) {
  main { margin-right: 22px; margin-left: 258px; }
  nav { width: 232px; }
}

@media (max-width: 1024px) {
  #listing.list .item .modified,
  #listing.list .item.header .modified { display: none !important; }
  #listing.list .item .name { width: auto !important; }
  #listing.mosaic .item { width: calc(50% - 14px); }
}

@media (max-width: 900px) {
  main { margin: 0 16px 32px 240px; }
}

@media (max-width: 736px) {
  main { margin: 0 10px 90px; }
  .breadcrumbs {
    margin: 8px 0 10px;
    top: calc(var(--wd-header-h) + 6px);
    border-radius: 10px;
  }
  #listing.list .item { padding: 0 12px !important; min-height: 50px; }
  #listing.list .item.header { padding: 0 12px !important; top: calc(var(--wd-header-h) + 62px); }
  #listing.list .item .name { font-size: 14px; padding-right: 8px; }
  #listing.list .item .size { display: none !important; }
  #listing.list .item .name { width: 100% !important; }
  #listing.mosaic .item { width: calc(50% - 12px); margin: 6px; }
  #listing.mosaic.gallery .item > div:first-of-type { height: 120px; }
  .upload-files .card.floating { right: 12px !important; bottom: 12px !important; }
}

@media (max-width: 480px) {
  #listing.mosaic .item { width: calc(50% - 12px); }
  #listing.mosaic.gallery .item > div:first-of-type { height: 104px; }
  #login form { padding: 26px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   2026-11 icon + layout pass
   - one consistent icon tile per row/card, colour-coded by file type
   - real two-line metadata on phones instead of hiding size/date
   - fluid mosaic grid + compact, scrollable breadcrumbs
   - safe-area / large-touch-target treatment for iOS & Android
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

button,
.action,
.item,
a {
  touch-action: manipulation;
}

nav { width: var(--wd-sidebar-w); }
main {
  max-width: 1600px;
  margin-left: calc(var(--wd-sidebar-w) + 26px);
  padding-bottom: env(safe-area-inset-bottom);
}

/* keep the sidebar usable when mobile browser chrome collapses */
@supports (height: 100dvh) {
  nav { height: calc(100dvh - var(--wd-header-h)); }
}

/* ---------- icon tiles --------------------------------------------------- */
#listing .item > div:first-of-type {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
}

#listing .item > div:first-of-type > i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border-radius: 11px;
  font-size: 21px;
  line-height: 1;
  text-align: center;
  color: var(--wd-icon-fg, var(--wd-c-other));
  background: var(--wd-surface-2);
  background: color-mix(in srgb, var(--wd-icon-fg, var(--wd-c-other)) 13%, transparent);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

#listing .item:hover > div:first-of-type > i {
  background: color-mix(in srgb, var(--wd-icon-fg, var(--wd-c-other)) 22%, transparent);
  transform: translateY(-1px);
}

#listing .item[aria-selected="true"] > div:first-of-type > i {
  color: #fff !important;
  background: rgba(255, 255, 255, .2) !important;
}

/* categories ------------------------------------------------------------- */
#listing .item[data-dir="true"] { --wd-icon-fg: var(--wd-c-folder) !important; }
#listing .item[data-type="image"] { --wd-icon-fg: var(--wd-c-image); }
#listing .item[data-type="video"] { --wd-icon-fg: var(--wd-c-video); }
#listing .item[data-type="audio"] { --wd-icon-fg: var(--wd-c-audio); }
#listing .item[data-type="pdf"] { --wd-icon-fg: var(--wd-c-pdf); }
#listing .item[data-type="text"] { --wd-icon-fg: var(--wd-c-text); }
#listing .item[data-type="blob"],
#listing .item[data-type="invalid_link"] { --wd-icon-fg: var(--wd-c-other); }

#listing .item:is(
  [data-ext=".zip"], [data-ext=".rar"], [data-ext=".7z"], [data-ext=".tar"],
  [data-ext=".gz"], [data-ext=".tgz"], [data-ext=".bz2"], [data-ext=".xz"],
  [data-ext=".zst"], [data-ext=".cab"], [data-ext=".iso"], [data-ext=".deb"],
  [data-ext=".rpm"], [data-ext=".msi"], [data-ext=".pkg"]
) { --wd-icon-fg: var(--wd-c-archive); }

#listing .item:is(
  [data-ext=".doc"], [data-ext=".docx"], [data-ext=".odt"], [data-ext=".rtf"],
  [data-ext=".md"], [data-ext=".markdown"], [data-ext=".epub"], [data-ext=".mobi"],
  [data-ext=".azw3"], [data-ext=".cbz"], [data-ext=".cbr"]
) { --wd-icon-fg: var(--wd-c-doc); }

#listing .item:is([data-ext=".epub"], [data-ext=".mobi"], [data-ext=".azw3"],
  [data-ext=".cbz"], [data-ext=".cbr"]) { --wd-icon-fg: var(--wd-c-ebook); }

#listing .item:is(
  [data-ext=".xls"], [data-ext=".xlsx"], [data-ext=".ods"], [data-ext=".csv"],
  [data-ext=".db"]
) { --wd-icon-fg: var(--wd-c-sheet); }

#listing .item:is([data-ext=".ppt"], [data-ext=".pptx"], [data-ext=".odp"]) {
  --wd-icon-fg: var(--wd-c-slide);
}

#listing .item:is(
  [data-ext=".py"], [data-ext=".js"], [data-ext=".mjs"], [data-ext=".ts"],
  [data-ext=".tsx"], [data-ext=".jsx"], [data-ext=".go"], [data-ext=".rs"],
  [data-ext=".c"], [data-ext=".h"], [data-ext=".cpp"], [data-ext=".hpp"],
  [data-ext=".java"], [data-ext=".kt"], [data-ext=".rb"], [data-ext=".php"],
  [data-ext=".sh"], [data-ext=".bash"], [data-ext=".sql"], [data-ext=".html"],
  [data-ext=".htm"], [data-ext=".css"], [data-ext=".json"], [data-ext=".xml"],
  [data-ext=".yaml"], [data-ext=".yml"], [data-ext=".toml"], [data-ext=".ini"],
  [data-ext=".conf"]
) { --wd-icon-fg: var(--wd-c-code); }

#listing .item:is([data-ext=".pdf"]) { --wd-icon-fg: var(--wd-c-pdf); }

/* keep folder icons consistent with the tile treatment */
#listing .item[data-dir="true"] i::before { content: "folder"; }
#listing .item[data-dir="true"]:hover i::before { content: "folder_open"; }

/* more specific glyphs for formats FileBrowser renders generically */
#listing.file-icons .item:is([data-ext=".epub"], [data-ext=".mobi"],
  [data-ext=".azw3"], [data-ext=".cbz"], [data-ext=".cbr"]) i::before {
  content: "menu_book";
}
#listing.file-icons .item[data-ext=".pdf"] i::before { content: "picture_as_pdf"; }
#listing.file-icons .item:is([data-ext=".md"], [data-ext=".markdown"]) i::before {
  content: "article";
}
#listing.file-icons .item:is([data-ext=".xlsx"], [data-ext=".xls"], [data-ext=".ods"],
  [data-ext=".csv"]) i::before { content: "table_chart"; }
#listing.file-icons .item:is([data-ext=".pptx"], [data-ext=".ppt"], [data-ext=".odp"]) i::before {
  content: "slideshow";
}
#listing.file-icons .item:is([data-ext=".sql"]) i::before { content: "storage"; }
#listing.file-icons .item:is([data-ext=".sh"], [data-ext=".bash"]) i::before {
  content: "terminal";
}
#listing.file-icons .item[data-ext=".html"] i::before,
#listing.file-icons .item[data-ext=".htm"] i::before { content: "html"; }
#listing.file-icons .item[data-ext=".css"] i::before { content: "css"; }
#listing.file-icons .item[data-ext=".js"] i::before { content: "javascript"; }
#listing.file-icons .item:is([data-ext=".svg"], [data-ext=".avif"], [data-ext=".webp"]) i::before {
  content: "image";
}

/* gallery cards: centre the icon in the preview area */
#listing.mosaic.gallery .item > div:first-of-type {
  justify-content: center;
}
#listing.mosaic.gallery .item > div:first-of-type > i {
  flex-basis: 52px;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  font-size: 27px;
}

/* ---------- list rows ---------------------------------------------------- */
#listing.list .item {
  min-height: 58px;
}

#listing.list .item[data-reader="1"] {
  padding-right: 52px !important;
}

/* mosaic cards without a thumbnail still need room for the reader button */
#listing.mosaic:not(.gallery) .item[data-reader="1"] {
  padding-right: 44px;
}

#listing.list .item > div:last-of-type {
  min-width: 0;
}

#listing .item .name {
  min-width: 0;
}

/* extra metadata line injected by ui.js; hidden unless the phone layout
   below replaces the native size/date columns with it */
#listing .item .wd-row-meta { display: none; }

/* ---------- mosaic: fluid instead of hard 33% columns ------------------- */
#listing.mosaic .item {
  flex: 1 1 200px;
  width: auto;
  min-width: 0;
  max-width: 300px;
}

#listing.mosaic.gallery .item > div:first-of-type {
  height: clamp(108px, 16vw, 156px);
}

/* ---------- breadcrumbs: stay on one scrollable line -------------------- */
.breadcrumbs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  white-space: nowrap;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs > * { flex: 0 0 auto; }
.breadcrumbs .wd-meta { margin-left: auto; }

/* ---------- responsive layout ------------------------------------------ */
@media (max-width: 1240px) {
  :root { --wd-sidebar-w: 232px; }
  main { margin-left: 258px; margin-right: 22px; }
}

@media (max-width: 1024px) {
  #listing.mosaic .item { flex-basis: 176px; }
}

@media (max-width: 900px) {
  main { margin-left: 240px; margin-right: 16px; }
}

@media (max-width: 736px) {
  :root { --wd-header-h: calc(56px + env(safe-area-inset-top)); --wd-sidebar-w: min(84vw, 300px); }

  body { font-size: 14.5px; }

  header {
    padding-top: env(safe-area-inset-top);
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  header title {
    min-width: 0;
    padding: 0 6px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  header .action,
  header #more,
  header .menu-button,
  header .search-button {
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 12px;
  }
  header .action i { font-size: 23px; line-height: 1; }

  #dropdown {
    top: calc(var(--wd-header-h) + 8px);
    right: max(10px, env(safe-area-inset-right));
    width: min(320px, calc(100vw - 20px));
    max-width: none;
    max-height: calc(100dvh - var(--wd-header-h) - 24px);
    overflow-y: auto;
  }
  #dropdown .action { min-height: 44px; }
  #dropdown .action i { line-height: 1; }

  /* sidebar drawer: bigger, scrollable, clear close area */
  nav {
    left: calc(-1 * var(--wd-sidebar-w) - 2px);
    padding: 10px 10px calc(28px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    transition: left .18s ease;
  }
  nav.active { left: 0; }
  nav .action {
    min-height: 46px;
    font-size: 15px;
  }
  nav .action i { font-size: 22px; line-height: 1; }

  main {
    margin: 0 10px calc(80px + env(safe-area-inset-bottom));
  }

  .breadcrumbs {
    height: 42px;
    margin: 6px 0 10px;
    padding: 0 4px;
    font-size: 13px;
    border-radius: 10px;
  }
  .breadcrumbs a,
  .breadcrumbs span a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 7px;
    line-height: 1.2;
  }
  .breadcrumbs a .material-icons,
  .breadcrumbs span a .material-icons { line-height: 1; }
  .breadcrumbs > a[aria-label]::after {
    content: attr(aria-label);
    margin-left: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
  }
  .breadcrumbs .chevron i { font-size: 16px; }

  /* list rows become name + compact metadata line */
  #listing.list .item {
    min-height: 62px;
    padding: 7px 12px !important;
    align-items: center;
  }
  #listing.list .item[data-reader="1"] {
    padding-right: 50px !important;
  }
  #listing.list .item > div:first-of-type {
    width: 46px !important;
    flex: 0 0 46px !important;
  }
  #listing.list .item > div:first-of-type > i {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 22px;
  }
  #listing.list .item > div:last-of-type {
    display: block !important;
    width: calc(100% - 46px) !important;
    padding-left: 2px;
    min-width: 0;
  }
  #listing.list .item .name {
    display: -webkit-box;
    width: 100% !important;
    padding-right: 0 !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #listing.list .item .size,
  #listing.list .item .modified {
    display: none !important;
  }
  #listing.list .item .wd-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin-top: 2px;
    color: var(--wd-text-dim);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
  }
  #listing.list .item .wd-row-meta > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #listing.list .item .wd-row-meta .wd-dot { opacity: .55; }

  /* on phones the header only offers the name sort */
  #listing.list .item.header {
    top: calc(var(--wd-header-h) + 58px);
    height: 38px;
    min-height: 38px;
    padding: 0 12px !important;
  }
  #listing.list .item.header .name { width: 100% !important; }
  #listing.list .item.header i { font-size: 16px !important; line-height: 1; position: relative; top: 1px; }
  #listing.list .item.header .size,
  #listing.list .item.header .modified { display: none !important; }

  /* mosaic: two comfortable columns, icon on top, name + one meta line */
  #listing.mosaic {
    margin-left: -5px;
    margin-right: -5px;
  }
  #listing.mosaic .item {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    max-width: none;
    width: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin: 5px;
    padding: 12px 11px 11px;
    border-radius: 14px;
  }
  #listing.mosaic .item > div:first-of-type {
    width: 100% !important;
    margin: 0;
  }
  #listing.mosaic .item > div:first-of-type > i {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 23px;
  }
  #listing.mosaic .item > div:first-of-type > img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }
  #listing.mosaic .item > div:last-of-type {
    display: block !important;
    width: 100% !important;
    min-width: 0;
  }
  #listing.mosaic .item .name {
    display: -webkit-box;
    width: 100% !important;
    padding: 0 !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #listing.mosaic .item .size,
  #listing.mosaic .item .modified { display: none !important; }
  #listing.mosaic .item .wd-row-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 3px;
    color: var(--wd-text-dim);
    font-size: 11px;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
  }
  #listing.mosaic .item .wd-row-meta > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #listing.mosaic .item .wd-row-meta .wd-dot { opacity: .55; }
  /* a 2-column card only has room for one value: size for files, date for folders */
  #listing.mosaic .item .wd-row-meta[data-mode="size"] .wd-dot,
  #listing.mosaic .item .wd-row-meta[data-mode="size"] .wd-mtime { display: none; }
  /* ...but a lone full-width card has room for both */
  #listing.mosaic .item:not(.wd-multi) .wd-row-meta[data-mode="size"] .wd-dot,
  #listing.mosaic .item:not(.wd-multi) .wd-row-meta[data-mode="size"] .wd-mtime { display: inline; }
  #listing.mosaic .item[data-reader="1"] { padding-right: 10px !important; }
  #listing.mosaic .item.wd-multi { flex-grow: 0; }
  #listing.mosaic.gallery .item > div:first-of-type { height: clamp(102px, 32vw, 132px); }
  #listing.mosaic.gallery .item > div:first-of-type > i {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 24px;
  }

  /* search overlay respects the notch and the on-screen keyboard */
  #search.active {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  #search.active > #input {
    height: 48px;
    margin-top: max(10px, env(safe-area-inset-top));
  }
  #search.active > #result {
    max-height: calc(100dvh - 78px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  #search .boxes > div > div { flex: 1 1 42%; }

  /* dialogs & popovers become phone sheets */
  .card.floating {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - var(--wd-header-h) - 24px);
    overflow: auto;
  }
  .card .card-title { padding: 18px 18px 4px; }
  .card > div { padding: 10px 18px; }
  .context-menu { max-width: calc(100vw - 16px); }
  .context-menu .action { min-height: 42px; padding: 6px 10px; font-size: 14px; }
  .upload-files .card.floating {
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
  #listing #multiple-selection {
    min-height: 4em;
    height: auto;
    padding-bottom: calc(.5em + env(safe-area-inset-bottom));
  }
  .wd-toast {
    top: calc(var(--wd-header-h) + 10px);
    max-width: calc(100vw - 24px);
    font-size: 13px;
  }
  #login form {
    padding: 28px 22px 24px;
    margin-bottom: env(safe-area-inset-bottom);
  }

  /* prevent iOS Safari from zooming into small inputs */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .input {
    font-size: 16px !important;
  }
}

@media (max-width: 420px) {
  #listing.mosaic .item { margin: 4px; padding: 11px 10px 10px; }
  #listing.mosaic.gallery .item > div:first-of-type { height: clamp(96px, 31vw, 120px); }
}

@media (max-width: 360px) {
  #listing.mosaic .item { flex-basis: calc(50% - 8px); margin: 4px; }
  #listing .item .name { font-size: 12.5px; }
}