/* File Browser — refined iOS glass
   Keep overrides minimal so stock layout does not deform. */

:root {
  --fb-blue: #007aff;
  --fb-ink: #1c1c1e;
  --fb-muted: #8e8e93;
}

/* Soft page wash (does not touch component layout) */
html {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 122, 255, 0.12), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(175, 82, 222, 0.08), transparent 30%),
    linear-gradient(180deg, #eef2fb 0%, #f4f5f8 48%, #eef1f7 100%) !important;
  background-attachment: fixed;
}

body {
  color: var(--fb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "PingFang SC", "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif !important;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  background: transparent !important;
}

/* Theme tokens — colors only */
:root {
  --blue: #007aff !important;
  --primary: #007aff !important;
  --iconPrimary: #007aff !important;
  --border: rgba(60, 60, 67, 0.1) !important;
  --divider: rgba(60, 60, 67, 0.08) !important;
  --surfacePrimary: rgba(255, 255, 255, 0.86) !important;
  --surfaceSecondary: rgba(255, 255, 255, 0.72) !important;
  --background: transparent !important;
}

/* ---------- Boot spinner only (safe) ---------- */
@keyframes fb-spin {
  to { transform: rotate(360deg); }
}

#loading {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 122, 255, 0.14), transparent 40%),
    linear-gradient(180deg, #eef2fb 0%, #f4f5f8 100%) !important;
}

#loading .spinner {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: conic-gradient(from 0deg, rgba(0, 122, 255, 0.05), #007aff, rgba(0, 122, 255, 0.08), rgba(0, 122, 255, 0.05)) !important;
  box-shadow: 0 10px 24px rgba(0, 122, 255, 0.16) !important;
  position: relative !important;
  animation: fb-spin 0.85s linear infinite !important;
}

#loading .spinner::after {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border-radius: 50% !important;
  background: #fff !important;
}

#loading .spinner .bounce1,
#loading .spinner .bounce2,
#loading .spinner .bounce3,
.message .spinner .bounce1,
.message .spinner .bounce2,
.message .spinner .bounce3 {
  display: none !important;
}

.message .spinner {
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto 0.4em !important;
  border-radius: 50% !important;
  background: conic-gradient(from 0deg, rgba(0, 122, 255, 0.05), #007aff, rgba(0, 122, 255, 0.08), rgba(0, 122, 255, 0.05)) !important;
  position: relative !important;
  animation: fb-spin 0.85s linear infinite !important;
}

.message .spinner::after {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  border-radius: 50% !important;
  background: #fff !important;
}

/* ---------- Listing polish (no width/min-height overrides) ---------- */
#listing.mosaic .item {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
}

#listing.mosaic .item:hover {
  box-shadow: 0 12px 26px rgba(0, 122, 255, 0.1) !important;
}

#listing.mosaic .item i {
  color: #0a84ff !important;
}

#listing.mosaic .item .name {
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
}

#listing.mosaic .item .modified,
#listing.mosaic .item .size {
  color: var(--fb-muted) !important;
}

#listing.list .item:not(.header) {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

#listing.list .item:not(.header) i {
  color: #0a84ff !important;
}

#listing .item[aria-selected="true"] {
  background: rgba(0, 122, 255, 0.14) !important;
  color: var(--fb-ink) !important;
}

/* ---------- Buttons / inputs (shape only) ---------- */
.button,
button.button,
input[type="submit"] {
  border-radius: 999px !important;
}

.button--blue,
button.button--blue,
input[type="submit"] {
  background: linear-gradient(180deg, #3d9bff 0%, #007aff 100%) !important;
  border: 0 !important;
  box-shadow: 0 8px 16px rgba(0, 122, 255, 0.22) !important;
}

.input,
input.input,
textarea.input {
  border-radius: 12px !important;
  border-color: rgba(60, 60, 67, 0.12) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

/* Login card */
.card {
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
}

/* ---------- Sidebar: keep stock width/position, only soft surface ---------- */
nav {
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 8px 0 28px rgba(15, 23, 42, 0.1) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.65) !important;
}

nav .action {
  border-radius: 12px !important;
  margin: 4px 8px !important;
  width: calc(100% - 16px) !important;
  background: transparent !important;
  box-shadow: none !important;
}

nav .action:hover,
nav .action:active {
  background: rgba(0, 122, 255, 0.08) !important;
}

nav .action i {
  color: #0a84ff !important;
}

nav #logout,
nav #logout i {
  color: #ff3b30 !important;
}

.credits {
  color: var(--fb-muted) !important;
}

.progress,
.file-progress,
.credits .progress {
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(0, 122, 255, 0.12) !important;
}

.progress > *,
.file-progress > * {
  background: linear-gradient(90deg, #3d9bff, #007aff) !important;
}

/* Floating action menu: soft pills, no layout change */
#listing .action,
.action {
  border-radius: 14px !important;
}

/* Language options: keep zh-cn only */
select option[value="en"],
select option[value="ar"],
select option[value="de"],
select option[value="es"],
select option[value="fr"],
select option[value="it"],
select option[value="ja"],
select option[value="ko"],
select option[value="nl"],
select option[value="pl"],
select option[value="pt"],
select option[value="pt-br"],
select option[value="pt-pt"],
select option[value="ru"],
select option[value="tr"],
select option[value="uk"],
select option[value="vi"],
select option[value="zh-tw"],
select option[value="he"],
select option[value="hu"],
select option[value="id"],
select option[value="is"],
select option[value="nb"],
select option[value="no"],
select option[value="ro"],
select option[value="sk"],
select option[value="sv"],
select option[value="th"],
select option[value="cs"],
select option[value="da"],
select option[value="el"],
select option[value="hr"],
select option[value="lv"],
select option[value="ms"],
select option[value="bg"],
select option[value="ca"] {
  display: none !important;
}

/* cache-bust: 20260726-refined-safe-v5 */