/* app.css — FileDish web client. © Danny Mbanginu, Proprietary & Confidential. */

/* Aurora design tokens (v6) — light default + dark via html[data-theme=dark].
 * Every legacy token name (--bg/--panel/--accent/--main-*) is kept as a live
 * value here, so the 30KB of component styles below inherit the new palette
 * without modification. Theme preference persists in localStorage "fd-theme". */
:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface2: #f8fafc;
  --surface3: #eef3f9;
  --text: #172033;
  --muted: #708096;
  --line: #e3e8f0;
  --blue: #2563eb;
  --blue2: #1d4ed8;
  --blue-soft: #eaf1ff;
  --green: #0f9f6e;
  --green-soft: #e4f8f0;
  --orange: #e98228;
  --orange-soft: #fff1e5;
  --purple: #7c4ed8;
  --purple-soft: #f1eaff;
  --red: #dc4858;
  --red-soft: #ffeaed;
  --shadow: 0 10px 30px rgba(33,52,85,.08);
  --shadow-sm: 0 3px 12px rgba(33,52,85,.05);
  --radius: 16px;
  --side: 238px;
  --top: 60px;
  --sidebar-bg-top: #fcfdff;
  --sidebar-bg-bottom: #f7f9fc;
}
html[data-theme=dark] {
  --bg: #0d1422;
  --surface: #131d2d;
  --surface2: #172337;
  --surface3: #1e2b40;
  --text: #edf3fc;
  --muted: #9babc0;
  --line: #27364b;
  --blue: #4f83ff;
  --blue2: #7aa2ff;
  --blue-soft: #17294d;
  --green: #39c995;
  --green-soft: #11382f;
  --orange: #f3a15b;
  --orange-soft: #3c2a1c;
  --purple: #a887f3;
  --purple-soft: #2a2344;
  --red: #f06b78;
  --red-soft: #41232a;
  --shadow: 0 16px 38px rgba(0,0,0,.28);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.18);
  --sidebar-bg-top: #111b2b;
  --sidebar-bg-bottom: #101827;
}
:root, html[data-theme=dark] {
  /* Legacy aliases — the entire component layer consumes these. */
  --panel: var(--surface);
  --panel-2: var(--surface2);
  --accent: var(--blue);
  --accent-2: var(--blue2);
  --danger: var(--red);
  --ok: var(--green);
  --main-bg: var(--bg);
  --main-panel: var(--surface);
  --main-line: var(--line);
  --main-text: var(--text);
  --main-muted: var(--muted);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden; /* the app manages its own scroll regions */
}
#root { height: 100%; height: 100dvh; }
a { color: var(--accent); text-decoration: none; }
.muted { color: var(--muted); }
h2, h3, h4 { margin: 0 0 10px 0; }
label { display: block; margin: 10px 0 4px; color: var(--muted); font-size: 12.5px; }
input, select {
  width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--accent-2); outline-offset: 0; border-color: transparent; }
button {
  padding: 8px 14px; border: 0; border-radius: 8px; background: var(--accent); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}
button:hover { background: var(--accent-2); }
button:disabled { opacity: .55; cursor: default; }
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 500; }
button.ghost:hover { background: var(--panel-2); }
button.danger { background: var(--danger); }
button.ghost.danger { color: var(--danger); border-color: var(--danger); background: transparent; }

/* ------------------------------- auth ---------------------------------- */
.fd-auth { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fd-auth-card {
  width: 380px; max-width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px;
}
.fd-auth-card button { width: 100%; margin-top: 14px; }
.fd-auth-card p { margin: 12px 0 0; text-align: center; }
.fd-logo { font-weight: 800; font-size: 18px; margin-bottom: 14px; }
.fd-ferr { color: var(--danger); font-size: 12px; min-height: 16px; }

/* ------------------------------- shell --------------------------------- */
.fd-shell { display: flex; height: 100%; height: 100dvh; overflow: hidden; }
.fd-side {
  width: var(--side); flex: 0 0 auto;
  background: linear-gradient(180deg, var(--sidebar-bg-top) 0%, var(--sidebar-bg-bottom) 100%);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 12px 10px 10px; gap: 8px;
  overflow-y: auto;
}
.fd-brand {
  display: flex; align-items: center; gap: 10px; padding: 2px 8px 6px;
  font-weight: 800; font-size: 19px; color: var(--text);
}
.fd-brandmark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(145deg, #3978ff, #174acb); color: #fff; font-size: 15px;
  box-shadow: 0 7px 16px rgba(37,99,235,.25);
}
.fd-nav-label {
  display: flex; align-items: center; justify-content: space-between;
  height: 24px; padding: 0 8px; color: var(--muted);
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.fd-wsel { margin-top: 2px; }
.fd-side-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; }
.fd-side-head button { padding: 1px 9px; }
.fd-spaces { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.fd-space {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 32px; padding: 0 9px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--muted); font-weight: 600;
}
.fd-space:hover { background: var(--surface2); color: var(--text); }
.fd-space.active { background: var(--blue-soft); color: var(--blue); }
.fd-space.disabled .fd-space-name { color: var(--muted); }
.fd-space-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-gear { padding: 2px 7px; opacity: 0; }
.fd-space:hover .fd-gear { opacity: 1; }
.fd-side-foot { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.fd-usage-bar { height: 6px; border-radius: 4px; background: var(--panel-2); overflow: hidden; margin-bottom: 4px; }
.fd-usage-bar div { height: 100%; background: var(--accent); }
.fd-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--main-bg); color: var(--main-text); }
.fd-top {
  height: var(--top); flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 0 18px;
  border-bottom: 1px solid var(--main-line);
  background: color-mix(in srgb, var(--main-panel) 94%, transparent);
  backdrop-filter: blur(12px);
  color: var(--main-text);
}
.fd-top button.ghost { color: var(--main-text); border-color: var(--main-line); }
.fd-top button.ghost:hover { background: var(--main-bg); }
.fd-top .muted { color: var(--main-muted); }

/* search */
.fd-search { position: relative; flex: 0 1 320px; margin: 0 8px; }
.fd-search > input {
  width: 100%; padding: 7px 12px; border-radius: 20px; border: 1px solid var(--main-line);
  background: var(--main-bg); color: var(--main-text);
}
.fd-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
  background: var(--main-panel); border: 1px solid var(--main-line); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22); max-height: 60vh; overflow: auto; padding: 6px;
}
.fd-search-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.fd-search-row:hover { background: var(--main-bg); }
.fd-search-ic { font-size: 16px; }
.fd-search-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-search-loc { font-size: 12px; flex-shrink: 0; }
.fd-search-empty { padding: 14px; text-align: center; color: var(--main-muted); }

/* admin console */
.fd-admin { flex: 1; overflow: auto; padding: 20px; background: var(--main-bg); color: var(--main-text); }
.fd-admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.fd-admin-head button.ghost { color: var(--main-text); border-color: var(--main-line); }
.fd-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.fd-admin-card { background: var(--main-panel); border: 1px solid var(--main-line); border-radius: 12px; padding: 16px; }
.fd-admin-card h3 { margin: 0 0 12px; }
.fd-admin-wide { grid-column: 1 / -1; }
.fd-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--main-line); }
.fd-admin-row:last-child { border-bottom: none; }
.fd-admin-actions { margin-top: 12px; }
.fd-admin-actions button.ghost { color: var(--main-text); border-color: var(--main-line); }
.fd-admin-act { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--main-line); }
.fd-admin-act:last-child { border-bottom: none; }
.fd-act-ic { font-size: 15px; }
.fd-act-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-act-time { font-size: 12px; white-space: nowrap; }

/* nav buttons (sidebar) */
.fd-nav-btn {
  height: 32px; display: flex; align-items: center; gap: 9px;
  background: transparent; color: var(--muted); text-align: left;
  font-weight: 620; font-size: 13px;
  border: 0; padding: 0 9px; border-radius: 8px; width: 100%;
  position: relative;
}
.fd-nav-btn:hover { background: var(--surface2); color: var(--text); }
.fd-nav-btn.active { background: var(--blue-soft); color: var(--blue); }
.fd-nav-btn.active::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 4px; background: var(--blue);
}

/* share dialog tabs */
.fd-tabs { display: flex; gap: 4px; margin: 4px 0 12px; border-bottom: 1px solid var(--main-line); }
.fd-tab { background: transparent; color: var(--main-muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 12px; font-weight: 600; }
.fd-tab.active { color: var(--main-text); border-bottom-color: var(--accent); }
.fd-people-list { max-height: 240px; overflow: auto; border: 1px solid var(--main-line); border-radius: 8px; padding: 4px; margin-top: 4px; }
.fd-people-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.fd-people-row:hover { background: var(--main-bg); }
.fd-people-row input { width: auto; }

/* shared-with-me view */
.fd-shared { flex: 1; overflow: auto; padding: 20px; background: var(--main-bg); color: var(--main-text); }
.fd-shared-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.fd-shared-head button.ghost { color: var(--main-text); border-color: var(--main-line); }
.fd-shared-list { display: flex; flex-direction: column; gap: 2px; }
.fd-shared-row { display: grid; grid-template-columns: 30px 1fr auto auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 8px; }
.fd-shared-row:hover { background: var(--main-panel); }
.fd-shared-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-shared-by { font-size: 12.5px; }
.fd-shared-actions { display: flex; gap: 6px; }
.fd-shared-actions button.ghost { color: var(--main-text); border-color: var(--main-line); padding: 5px 10px; }
.fd-top-spacer { flex: 1; }
.fd-badge {
  background: var(--danger); color: #fff; border-radius: 9px; padding: 0 5px;
  font-size: 11px; position: relative; top: -8px; left: -6px;
}
#sh-content { flex: 1; min-height: 0; display: flex; position: relative; box-shadow: inset 7px 0 9px -7px rgba(33, 52, 85, 0.16); }

/* ------------------------------ browser --------------------------------- */
.fd-browser { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; background: var(--main-bg); color: var(--main-text); }
/* .fd-browser-body + .fd-listwrap geometry come from the appended Aurora CSS. */
.fd-tool-sep { width: 1px; align-self: stretch; background: var(--main-line); margin: 0 4px; }
#fd-view-toggle.active, #fd-panel-toggle.active { background: #e6eeff; border-color: var(--accent); color: var(--accent-2); }
.fd-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--main-line); flex-wrap: wrap; background: var(--main-panel);
}
.fd-toolbar button.ghost { color: var(--main-text); border-color: var(--main-line); white-space: nowrap; flex: 0 0 auto; height: 34px; display: inline-flex; align-items: center; gap: 6px; }
.fd-toolbar button.ghost:hover { background: var(--main-bg); }
.fd-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.fd-crumb { background: transparent; border: 0; color: var(--main-text); padding: 4px 6px; border-radius: 6px; font-weight: 600; }
.fd-crumb:hover { background: var(--main-bg); }
.fd-crumb.droptarget { outline: 2px dashed var(--accent); }
.fd-trashbadge { color: var(--danger); font-weight: 700; margin-left: 6px; }
.fd-tools { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.fd-tools .muted { color: var(--main-muted); }
/* New + Upload share one button spec so they're the same size and aligned. */
.fd-upl-btn, .fd-new-wrap > #fd-new {
  display: inline-flex; align-items: center; justify-content: center; align-self: center;
  height: 34px; padding: 0 14px; border-radius: 8px; background: var(--accent);
  color: #fff; font-weight: 650; font-size: 13px; line-height: 1; cursor: pointer; border: 1px solid var(--accent);
  white-space: nowrap; flex: 0 0 auto; box-sizing: border-box; vertical-align: middle;
}
/* Keep the upload button's icon on the same baseline as its label (the global
   .fd-svg-ic vertical nudge is for inline text, not this flex button). */
.fd-upl-btn .fd-svg-ic { vertical-align: middle; }
.fd-upl-btn:hover, .fd-new-wrap > #fd-new:hover { background: var(--accent-2); border-color: var(--accent-2); }

.fd-list { flex: 1; overflow: auto; padding: 0; outline: none; position: relative; }
.fd-empty { color: var(--main-muted); text-align: center; padding: 60px 20px; }
.fd-rename-in { padding: 2px 6px; font: inherit; width: 100%; border: 1px solid var(--accent); border-radius: 5px; background: #fff; color: var(--main-text); }

/* rubber-band selection marquee */
.fd-marquee {
  position: absolute; pointer-events: none;
  background: rgba(74, 111, 220, 0.10);
  border: 1px solid var(--accent);
  border-radius: 3px; z-index: 4;
}

/* text/markdown editor modal */
.fd-editor { display: flex; flex-direction: column; }
.fd-editor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fd-editor-head h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-ed-warn { font-size: 12px; margin: 6px 0; color: #b26a00; }
.fd-ed-area {
  width: 100%; min-height: 55vh; max-height: 65vh;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5;
  padding: 10px 12px; border: 1px solid var(--main-line); border-radius: 6px;
  background: #fbfbfd; color: #111; resize: vertical; outline: none;
  tab-size: 2;
}
.fd-ed-area:focus { border-color: var(--accent); background: #fff; }

/* "+ New" dropdown in the toolbar */
.fd-new-wrap { position: relative; display: inline-block; }
.fd-new-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
  background: var(--panel, #fff); border: 1px solid var(--line, #ddd);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  min-width: 220px; padding: 4px; flex-direction: column;
  display: flex;
}
/* HTML's [hidden] attribute equates to display:none in the UA sheet, but our
   explicit `display: flex` above overrides it. Restore the intended hide. */
.fd-new-menu[hidden] { display: none; }
.fd-new-menu button {
  background: transparent; border: none; text-align: left;
  padding: 8px 12px; cursor: pointer; border-radius: 4px;
  font-size: 13px; color: inherit;
}
.fd-new-menu button:hover { background: var(--panel-2, #f4f4f6); }
.fd-new-sep { height: 1px; background: var(--line, #e5e5e5); margin: 4px 0; }

/* tag chips */
.fd-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.fd-tag-chip {
  border: 1.5px solid #ccc; background: transparent; border-radius: 999px;
  padding: 3px 12px; font-size: 12.5px; cursor: pointer; color: inherit;
  transition: background .12s;
}
.fd-tag-chip.on { font-weight: 600; }
.fd-tag-chip:hover { filter: brightness(0.97); }

/* lock indicator on rows */
.fd-lock-badge { font-size: 12px; margin-left: 6px; opacity: 0.75; }

/* audit log filters in the admin console */
.fd-audit-filters { display: flex; gap: 6px; margin: 4px 0 10px; flex-wrap: wrap; }
.fd-audit-filters .fd-on { border-color: var(--accent); color: var(--accent); }

/* security modal: TOTP secret + recovery codes */
.fd-secret { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
.fd-secret code {
  flex: 1; padding: 8px 10px; border: 1px dashed var(--main-line); border-radius: 8px;
  background: var(--main-bg); font-size: 15px; letter-spacing: 1px; user-select: all;
  overflow-wrap: anywhere;
}
.fd-recovery {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 10px 0;
}
.fd-recovery code {
  padding: 6px 8px; border: 1px solid var(--main-line); border-radius: 6px;
  background: var(--main-bg); text-align: center; user-select: all;
}

/* toolbar search box — shrinkable when the toolbar gets crowded. Distinct from
   the header's .fd-search wrapper (shell.js): sharing the class made this box's
   border/background/flex leak onto the header search, adding a stray border and
   knocking the header out of alignment. */
.fd-toolbar-search {
  flex: 0 1 200px; min-width: 120px; max-width: 220px;
  height: 34px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--main-line); border-radius: 8px;
  background: var(--main-bg); color: var(--main-text);
}
.fd-toolbar-search:focus { border-color: var(--accent); outline: none; }

/* keep the tag filter compact so the toolbar doesn't wrap on medium screens */
#fd-tag-filter { flex: 0 0 auto; max-width: 120px; height: 34px; padding: 0 8px; font-size: 13px; }

/* inline tag chips on a row */
.fd-row-tags { display: inline-flex; gap: 4px; margin-left: 8px; }
.fd-row-tag {
  border: 1px solid #ccc; border-radius: 999px; padding: 1px 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
}
.fd-row-tag-more { font-size: 10.5px; color: var(--muted, #888); align-self: center; }

/* file-drop management */
.fd-drop-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.fd-drop-row { padding: 8px 10px; background: var(--panel-2, #f6f6f8); border-radius: 6px; }
.fd-drop-row .fd-inline { margin-top: 6px; }
.fd-drop-url { flex: 1; font-family: ui-monospace, monospace; font-size: 12px; }
.fd-inline { display: flex; gap: 6px; align-items: center; }
.fd-inline input { flex: 1; }

/* version history modal */
.fd-verlist { max-height: 50vh; overflow: auto; margin: 8px 0; }.fd-verrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 10px; border-radius: 6px;
}
.fd-verrow + .fd-verrow { border-top: 1px solid var(--main-line); }
.fd-verrow.active { background: #f4f8ff; }
.fd-verrow.purged { opacity: 0.55; }
.fd-vermeta { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden; }
.fd-vermeta > .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-verbadge {
  display: inline-block; padding: 1px 7px; font-size: 11px;
  background: var(--accent); color: #fff; border-radius: 10px;
}
.fd-verbadge.muted { background: var(--main-line); color: var(--main-muted); }
.fd-veractions { display: flex; gap: 6px; flex-shrink: 0; }
.fd-verhint { font-size: 12px; margin-top: 6px; }

/* header user (avatar + name) */
.fd-user { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fd-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  user-select: none; flex-shrink: 0;
}
.fd-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .fd-user-name { display: none; } }

/* preview panel — container geometry (.fd-panel, .panel-open) comes from the
 * appended Aurora explorer CSS at the end of this file. These rules style the
 * panel *contents*, which Aurora doesn't define. */
.fd-pp-empty { padding: 40px 20px; text-align: center; }
.fd-pp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--main-line); }
.fd-pp-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-pp-close { padding: 2px 8px; }
.fd-pp-body { padding: 14px; display: flex; align-items: center; justify-content: center; min-height: 180px; max-height: 46vh; overflow: auto; background: var(--main-bg); }
.fd-pp-media { max-width: 100%; max-height: 44vh; border-radius: 8px; display: block; }
.fd-pp-audio { width: 100%; }
.fd-pp-frame { width: 100%; height: 44vh; border: 1px solid var(--main-line); border-radius: 8px; background: #fff; }
.fd-pp-text { width: 100%; max-height: 44vh; overflow: auto; background: #fff; border: 1px solid var(--main-line); border-radius: 8px; padding: 10px; font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.fd-pp-noprev { text-align: center; color: var(--main-muted); }
.fd-pp-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--main-line); }
.fd-pp-info > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.fd-pp-info > div > span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62%; }
.fd-pp-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 14px; border-top: 1px solid var(--main-line); }
.fd-preview-media { display: flex; align-items: center; justify-content: center; }

.fd-drop {
  position: absolute; inset: 0; background: rgba(26, 33, 51, .72); z-index: 40;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.fd-drop[hidden] { display: none; }
.fd-drop div {
  border: 2px dashed var(--accent); border-radius: 16px; padding: 40px 60px;
  font-size: 18px; font-weight: 700; color: #fff; background: rgba(91, 140, 255, .18);
}

/* --------------------------- upload popup ------------------------------- */
.fd-upanel {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 380px; max-width: calc(100vw - 36px);
  background: var(--main-panel); color: var(--main-text); border: 1px solid var(--main-line);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); overflow: hidden;
}
.fd-upanel-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--main-line); background: var(--main-bg); }
.fd-upanel-head button.ghost { color: var(--main-text); border-color: var(--main-line); }
.fd-upause {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--main-bg); border-bottom: 1px solid var(--main-line); color: var(--main-text);
  padding: 8px 14px;
}
.fd-upause button { padding: 5px 10px; }
#fd-ulist { max-height: 260px; overflow: auto; padding: 6px 14px 10px; }
.fd-uitem { display: grid; grid-template-columns: 1fr 120px; gap: 4px 10px; padding: 5px 0; align-items: center; }
.fd-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.fd-ustatus { text-align: right; font-size: 12px; color: var(--main-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-ustatus.done { color: var(--ok); }
.fd-ustatus.failed, .fd-ustatus.blocked { color: var(--danger); }
.fd-ubar { grid-column: 1 / -1; height: 3px; background: var(--main-line); border-radius: 2px; overflow: hidden; }
.fd-ubar div { height: 100%; background: var(--accent); transition: width .2s; }

/* ------------------------------ modals ---------------------------------- */
.fd-backdrop {
  position: fixed; inset: 0; background: rgba(5, 8, 15, .66); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px;
}
.fd-modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; width: 480px; max-width: 100%; max-height: 82vh; overflow: auto;
}
.fd-modal.fd-modal-wide { width: 780px; }
.fd-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.fd-inline { display: flex; gap: 8px; align-items: flex-end; margin: 8px 0; }
.fd-inline label { margin: 0 0 4px; }
.fd-inline input, .fd-inline select { width: auto; flex: 1; }
.fd-mrow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.fd-mrow select { width: auto; }
.fd-pill {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 1px 8px; font-size: 11.5px; color: var(--muted);
}
.fd-ntlist { max-height: 50vh; overflow: auto; }
.fd-mvlist { max-height: 40vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; }
.fd-mvrow { padding: 8px 10px; cursor: pointer; }
.fd-mvrow:hover { background: var(--panel-2); }
.fd-sharebox { margin-top: 14px; background: var(--panel-2); border-radius: 8px; padding: 12px; }
.fd-sharebox input { margin: 8px 0; }

/* --------------------------- context menu ------------------------------- */
.fd-ctx {
  position: fixed; z-index: 200; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px; min-width: 170px; display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.fd-ctx button {
  background: transparent; color: var(--text); text-align: left; font-weight: 500;
  padding: 7px 10px; border-radius: 6px;
}
.fd-ctx button:hover { background: var(--panel-2); }
.fd-ctx button.danger-item { color: var(--danger); }

/* ------------------------------- toasts --------------------------------- */
#fd-toasts { position: fixed; bottom: 18px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.fd-toast {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 10px 14px; max-width: 380px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  animation: fd-in .18s ease-out;
}
.fd-toast.error { border-left-color: var(--danger); }
.fd-toast.out { opacity: 0; transition: opacity .3s; }
@keyframes fd-in { from { transform: translateY(8px); opacity: 0; } }

/* ------------------------------ previews (modal) ------------------------ */
.fd-preview-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.fd-preview-media { display: flex; align-items: center; justify-content: center; }
.fd-pp-media, .fd-preview-media .fd-pp-media { max-width: 100%; max-height: 58vh; border-radius: 8px; display: block; margin: 0 auto; }
.fd-preview-media .fd-pp-frame { width: 100%; height: 60vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.fd-preview-media .fd-pp-audio { width: 100%; }
.fd-preview-media .fd-pp-text {
  max-height: 55vh; overflow: auto; background: var(--panel-2); border-radius: 8px;
  padding: 12px; font: 12.5px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; width: 100%;
}
.fd-preview-media .fd-pp-noprev { text-align: center; padding: 30px; }

@media (max-width: 760px) {
  .fd-side {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; width: 82vw; max-width: 300px;
    transform: translateX(-100%); transition: transform .22s ease;
    height: 100%; height: 100dvh;
  }
  .fd-shell.side-open .fd-side { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.5); }
  .fd-main { width: 100%; min-width: 0; }
  .fd-menu-btn { display: inline-flex !important; }

  /* Top bar: keep it compact; hide the long username, keep icons + sign out. */
  .fd-top { gap: 8px; padding: 8px 12px; }
  #sh-user { display: none; }
  #sh-wsname { display: none; }
  .fd-search { flex: 1; margin: 0 4px; min-width: 0; }
  .fd-search-results { max-height: 70vh; }

  /* Toolbar: allow horizontal scroll rather than ugly wrapping. */
  .fd-toolbar { gap: 6px; padding: 8px 12px; flex-wrap: nowrap; overflow-x: auto; }
  .fd-tools { flex-wrap: nowrap; }
  .fd-crumbs { flex-wrap: nowrap; overflow-x: auto; max-width: 45vw; }

  /* The explorer's own responsive row/grid/panel geometry comes from the
   * appended Aurora CSS (@media 980/700/430). Here we keep only the app-level
   * mobile bits Aurora's static demo lacks. */
  .fd-upanel { width: calc(100vw - 24px); right: 12px; bottom: 12px; max-height: 50dvh; }
  .fd-modal { width: 100%; max-height: 88dvh; }

  /* MOBILE PREVIEW FIX: Aurora's ≤700px panel is a fixed right-drawer shown via
   * .panel-open. But an empty "Select a file…" state must never cover the list
   * (the reported blocking bug), so we additionally require body.has-preview —
   * the drawer only slides in once a file is actually selected. */
  .fd-browser-body.panel-open:not(.has-preview) > .fd-panel { transform: translateX(100%); visibility: hidden; }
  .fd-pp-body { max-height: none; flex: 1; }
  .fd-pp-close { padding: 6px 12px; font-size: 16px; }
}

.fd-menu-btn { display: none; align-items: center; }
.fd-side-scrim { display: none; }
@media (max-width: 760px) {
  .fd-shell.side-open .fd-side-scrim {
    display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.4);
  }
}

/* instance announcement banner (SA-1) */
.fd-banner { padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--main-line); }
.fd-banner-info { background: color-mix(in srgb, var(--accent) 12%, var(--main-bg)); }
.fd-banner-warn { background: #6b5900; color: #ffe28a; }
.fd-banner-critical { background: #6b1f1f; color: #ffb3b3; }

/* Groups & custom-roles capability picker (ADR-0046) */
.fd-caps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 12px; }
.fd-cap { display: flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }
.fd-cap input { width: auto; margin: 0; }
.fd-mrow.fd-mrow-col { flex-direction: column; align-items: flex-start; gap: 4px; }

/* API token one-time reveal (ADR-0047) */
.fd-token-reveal { background: #1c2230; border: 1px solid #33405a; border-radius: 6px; padding: 10px; margin: 8px 0; font-size: 13px; }
.fd-token-reveal code { word-break: break-all; color: #9ecbff; }

/* Account & settings hub (user-facing feature discoverability) */
.fd-settings section { margin: 0 0 16px; }
.fd-settings section h4 { margin: 0 0 6px; }
.fd-settings label { display: block; margin: 6px 0 2px; font-size: 12px; }
.fd-settings input { width: 100%; margin-bottom: 6px; }
.fd-settings .fd-inline { flex-wrap: wrap; }

/* Presence indicator (item 6) */
.fd-presence { font-size: 13px; opacity: 0.85; margin-right: 4px; user-select: none; }

/* GDPR (item 8): the "delete my account" button should look distinct. */
button.fd-danger { color: var(--fd-danger, #c33); }
button.fd-danger:hover { background: rgba(204,51,51,0.08); }

/* Super-admin session 3: customers/plans/roles/metrics/settings sub-views (ADR-0053) */
.fd-cust-filters { display: flex; gap: 8px; margin: 10px 0 12px; flex-wrap: wrap; }
.fd-cust-filters > * { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--main-line); background: var(--main-bg); color: var(--main-text); }
.fd-cust-filters > input { flex: 1 1 260px; min-width: 200px; }
.fd-cust-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fd-cust-table th, .fd-cust-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--main-line); vertical-align: middle; }
.fd-cust-table th { color: var(--main-muted); font-weight: 600; }
.fd-cust-table tr[data-id]:hover { background: color-mix(in srgb, var(--accent) 6%, var(--main-bg)); cursor: pointer; }
.fd-cust-info { margin: 8px 0 16px; }
.fd-cust-info-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--main-line); }
.fd-cust-list { margin: 4px 0 12px; padding-left: 18px; font-size: 13px; }
.fd-cust-list li { padding: 2px 0; }

.fd-metric-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 6px 0 6px; }
.fd-metric-card { background: var(--main-bg); border: 1px solid var(--main-line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.fd-metric-card strong { font-size: 22px; }
.fd-chart { margin-top: 4px; }

.fd-roles-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 16px; }
@media (max-width: 760px) { .fd-roles-layout { grid-template-columns: 1fr; } }
.fd-role-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--main-line); border-radius: 8px; background: var(--main-bg); color: var(--main-text); margin-bottom: 6px; cursor: pointer; }
.fd-role-item.active { border-color: var(--accent); }
.fd-role-item.archived { opacity: 0.6; }
.fd-role-item strong { display: block; }
.fd-role-caps { max-height: 300px; overflow: auto; border: 1px solid var(--main-line); border-radius: 8px; padding: 8px 10px; }
.fd-role-caparea { margin-bottom: 8px; }
.fd-role-caparea strong { display: block; color: var(--main-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; margin: 4px 0; }
.fd-form { display: flex; flex-direction: column; gap: 8px; }
.fd-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--main-muted); }
.fd-form input, .fd-form textarea, .fd-form select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--main-line); background: var(--main-bg); color: var(--main-text); font-size: 14px; }

/* Phase-3 (scale-out) readiness banner + headroom bar (ADR-0054 phase 3) */
.fd-banner { border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--main-line); }
.fd-banner strong { font-size: 15px; }
.fd-banner p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; }
.fd-banner-cta { font-weight: 600; }
.fd-banner-ok { background: color-mix(in srgb, var(--accent) 5%, var(--main-bg)); }
.fd-banner-warn { background: color-mix(in srgb, #d98a00 14%, var(--main-bg)); border-color: color-mix(in srgb, #d98a00 45%, var(--main-line)); }
.fd-banner-critical { background: color-mix(in srgb, #d0342c 16%, var(--main-bg)); border-color: color-mix(in srgb, #d0342c 55%, var(--main-line)); }
.fd-headroom-bar { position: relative; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--main-text) 10%, var(--main-bg)); margin: 10px 0 4px; overflow: visible; }
.fd-headroom-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent); }
.fd-headroom-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #d98a00; }
.fd-headroom-mark.crit { background: #d0342c; }

/* ============================ Aurora shell extras ========================= */
.fd-wsel-wrap {
  display: flex; align-items: center; gap: 8px; height: 40px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface2);
  padding: 0 10px; margin: 0 2px 2px;
}
.fd-wsel-wrap .fd-wsel {
  border: 0; outline: 0; background: transparent; padding: 0; margin: 0;
  font-size: 12.5px; font-weight: 650; width: 100%; min-width: 0; color: var(--text);
}
.fd-side-foot button.ghost {
  height: 32px; display: flex; align-items: center; gap: 9px;
  border: 0; padding: 0 9px; font-size: 13px; font-weight: 620;
  color: var(--muted); text-align: left; width: 100%;
}
/* [hidden] must beat the display:flex above (UA display:none is otherwise
 * overridden), or role-gated buttons like System admin leak into view. */
.fd-side-foot button.ghost[hidden] { display: none; }
.fd-side-foot button.ghost:hover { background: var(--surface2); color: var(--text); }
.fd-user {
  display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 13px;
}
.fd-avatar {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 800;
}
#sh-theme { font-size: 15px; }

/* Sidebar storage card */
.fd-usage {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-sm); padding: 11px 12px; font-size: 11.5px;
}
.fd-usage .fd-usage-title { display: flex; justify-content: space-between; font-weight: 750; margin-bottom: 6px; }
.fd-usage small { color: var(--muted); }
.fd-usage-bar { height: 6px; border-radius: 999px; background: var(--surface3); overflow: hidden; margin-bottom: 5px; }
.fd-usage-bar div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #62a4ff); }

/* ============================ Aurora dashboard ============================ */
.fd-home { flex: 1; overflow: auto; padding: 22px 24px; background: var(--main-bg); color: var(--main-text); }
.fd-home-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.fd-home-head h1 { margin: 0 0 2px; font-size: 23px; }
.fd-home-head p { margin: 0; color: var(--muted); font-size: 13.5px; }
.fd-home-actions { display: flex; gap: 8px; }

.fd-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.fd-stat-card {
  display: flex; gap: 13px; align-items: center; min-height: 96px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-sm); padding: 16px;
}
.fd-stat-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 18px;
}
.fd-stat-card.blue .fd-stat-icon { background: var(--blue-soft); color: var(--blue); }
.fd-stat-card.green .fd-stat-icon { background: var(--green-soft); color: var(--green); }
.fd-stat-card.purple .fd-stat-icon { background: var(--purple-soft); color: var(--purple); }
.fd-stat-card h3 { margin: 0; font-size: 12px; color: var(--muted); font-weight: 650; }
.fd-stat-card strong { font-size: 21px; display: block; margin: 1px 0; }
.fd-stat-card p { margin: 0; font-size: 11.5px; color: var(--muted); }

.fd-home-grid { display: grid; grid-template-columns: .9fr 1.3fr; gap: 14px; align-items: start; }
.fd-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-sm); padding: 16px 18px;
}
.fd-card-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fd-card-heading h2 { margin: 0; font-size: 15.5px; }
.fd-eyebrow { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.fd-card-link { color: var(--blue); font-size: 12.5px; font-weight: 650; }
.fd-card-link:hover { text-decoration: underline; }

.fd-recent-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; align-items: center;
  padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 6px;
}
.fd-recent-row:last-child { border-bottom: 0; }
.fd-recent-row:hover { background: var(--surface2); }
.fd-recent-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fd-recent-main b { display: block; font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-recent-main small { color: var(--muted); font-size: 11px; }
.fd-file-ic {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  font-size: 10px; font-weight: 800; flex: 0 0 auto;
  background: var(--blue-soft); color: var(--blue);
}
.fd-file-ic.folder { background: var(--orange-soft); color: var(--orange); }
.fd-file-ic.image  { background: var(--green-soft); color: var(--green); }
.fd-file-ic.video  { background: var(--purple-soft); color: var(--purple); }
.fd-recent-meta { color: var(--muted); font-size: 11.5px; white-space: nowrap; }

.fd-activity-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.fd-activity-row:last-child { border-bottom: 0; }
.fd-activity-row .fd-avatar { width: 26px; height: 26px; font-size: 10.5px; flex: 0 0 auto; }
.fd-activity-row small { display: block; color: var(--muted); font-size: 11px; }

.fd-storage-card .fd-ring-wrap { display: flex; gap: 16px; align-items: center; }
/* Signal-strength storage meter — the "dish" reception metaphor. */
.fd-signal { display: flex; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.fd-sig-svg { width: 81px; height: 60px; }
.fd-sig-bar { fill: var(--surface3); transition: fill .35s ease; }
.fd-signal.ok   .fd-sig-bar.on { fill: var(--blue); }
.fd-signal.warn .fd-sig-bar.on { fill: var(--orange); }
.fd-signal.full .fd-sig-bar.on { fill: var(--red); }
.fd-sig-read { display: flex; flex-direction: column; line-height: 1.05; }
.fd-sig-read b { font-size: 20px; font-weight: 800; }
.fd-sig-read small { color: var(--muted); font-size: 11px; }
.fd-storage-lines { font-size: 12.5px; min-width: 0; }
.fd-storage-lines b { font-size: 15px; }
.fd-storage-lines small { color: var(--muted); display: block; }
.fd-empty-mini { color: var(--muted); font-size: 12.5px; padding: 12px 0; }

@media (max-width: 900px) {
  .fd-stat-grid { grid-template-columns: 1fr; }
  .fd-home-grid { grid-template-columns: 1fr; }
}

/* ================= Segment-aware accent theming (§7) =====================
 * The workspace archetype tints the accent. Only the accent family shifts —
 * surfaces, text and lines stay put — so the app stays coherent while a
 * family space feels warmer than a business one. Applies in both themes;
 * -soft values are recomputed via color-mix so the pill/active states track.
 * Individual keeps the default blue (no override needed). */
html[data-segment=family] {
  --blue: #e8663b; --blue2: #c74e28;
  --blue-soft: color-mix(in srgb, #e8663b 14%, var(--surface));
}
html[data-segment=business] {
  --blue: #2f4bd8; --blue2: #1f37b0;
  --blue-soft: color-mix(in srgb, #2f4bd8 13%, var(--surface));
}
html[data-segment=community] {
  --blue: #0f9f6e; --blue2: #0b7d55;
  --blue-soft: color-mix(in srgb, #0f9f6e 14%, var(--surface));
}
/* Dark theme wants slightly lighter accents for contrast. */
html[data-theme=dark][data-segment=family]    { --blue: #f3855f; --blue2: #e8663b; }
html[data-theme=dark][data-segment=business]  { --blue: #6d84ff; --blue2: #4f6bff; }
html[data-theme=dark][data-segment=community] { --blue: #39c995; --blue2: #22b381; }

/* ===================== Density (comfortable | compact) ==================== *
 * Corporates want data-dense; families want roomy. Compact tightens the
 * rhythm-defining measures without changing the layout. Comfortable is the
 * default and needs no rules. */
html[data-density=compact] .fd-nav-btn,
html[data-density=compact] .fd-space,
html[data-density=compact] .fd-side-foot button.ghost { height: 28px; }
html[data-density=compact] .fd-side { gap: 5px; padding: 8px 8px 8px; }
html[data-density=compact] .fd-home { padding: 14px 16px; }
html[data-density=compact] .fd-stat-grid,
html[data-density=compact] .fd-home-grid { gap: 10px; margin-bottom: 10px; }
html[data-density=compact] .fd-stat-card { min-height: 76px; padding: 12px; }
html[data-density=compact] .fd-card { padding: 12px 14px; }
html[data-density=compact] .fd-recent-row { padding: 6px 4px; }
html[data-density=compact] .fd-row { padding-top: 5px; padding-bottom: 5px; }
html[data-density=compact] .fd-shared-row { padding: 6px 10px; }
html[data-density=compact] .fd-top { height: 52px; }

/* ================ Storage that teaches (breakdown + reclaim) ============== */
.fd-breakdown { margin-top: 14px; }
.fd-bd-bar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--surface3); margin-bottom: 10px;
}
.fd-bd-bar span { display: block; height: 100%; }
.fd-bd-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; }
.fd-bd-item { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.fd-bd-item b { color: var(--text); font-weight: 700; }
.fd-bd-item i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.fd-reclaim { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.fd-reclaim-head { font-size: 12px; font-weight: 750; margin-bottom: 4px; }
.fd-reclaim-head small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.fd-reclaim-row {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 6px 4px; border-radius: 6px; cursor: pointer; font-size: 12.5px;
}
.fd-reclaim-row:hover { background: var(--surface2); }
.fd-reclaim-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-reclaim-size { color: var(--muted); white-space: nowrap; }

/* ============================ Photos gallery ============================= */
.fd-gallery { flex: 1; overflow: auto; padding: 22px 24px; background: var(--main-bg); color: var(--main-text); }
.fd-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.fd-gallery-head h1 { margin: 0 0 2px; font-size: 22px; }
.fd-gallery-head p { margin: 0; color: var(--muted); font-size: 13px; }
.fd-photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.fd-photo {
  position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: var(--surface2); border: 1px solid var(--line); cursor: pointer;
}
.fd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.fd-photo:hover img { transform: scale(1.05); }
.fd-photo .fd-photo-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px;
  font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-photo-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); font-size: 22px; }
html[data-density=compact] .fd-photo-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }

/* ============================ Settings page =============================== */
.fd-settings-page { flex: 1; overflow: auto; padding: 22px 24px; background: var(--main-bg); color: var(--main-text); }
.fd-set-pagehead { margin-bottom: 16px; }
.fd-set-pagehead h1 { margin: 0 0 2px; font-size: 22px; }
.fd-set-pagehead p { margin: 0; color: var(--muted); font-size: 13px; }
.fd-set-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
.fd-set-menu { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.fd-set-menu button {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted);
  font-size: 13.5px; font-weight: 620; text-align: left; width: 100%;
}
.fd-set-menu button:hover { background: var(--surface2); color: var(--text); }
.fd-set-menu button.active { background: var(--blue-soft); color: var(--blue); }
.fd-set-ic { width: 18px; text-align: center; }
.fd-set-panel { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fd-set-head { margin-bottom: 2px; }
.fd-set-head h2 { margin: 0 0 2px; font-size: 18px; }
.fd-set-head p { margin: 0; color: var(--muted); font-size: 13px; }
.fd-set-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-sm); padding: 16px 18px;
}
.fd-set-card h3 { margin: 0 0 10px; font-size: 14px; }
.fd-set-card + .fd-set-card { margin-top: 0; }
.fd-set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.fd-set-row:last-child { border-bottom: 0; }
.fd-set-row-label { min-width: 0; }
.fd-set-row-label b { display: block; font-size: 13.5px; font-weight: 650; }
.fd-set-row-label small { color: var(--muted); font-size: 12px; }
.fd-set-row-control { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.fd-input {
  height: 36px; min-width: 240px; padding: 0 11px; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface2); color: var(--text);
}
.fd-input:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue); }
.fd-input:disabled { color: var(--muted); }
.fd-set-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.fd-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.fd-seg button {
  border: 0; background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 620;
  padding: 7px 14px;
}
.fd-seg button + button { border-left: 1px solid var(--line); }
.fd-seg button.on { background: var(--blue-soft); color: var(--blue); }
.fd-set-note { color: var(--muted); font-size: 13px; margin: 0 0 4px; }
.fd-set-notif { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.fd-set-notif:last-child { border-bottom: 0; }
.fd-set-notif b { display: block; }
.fd-set-notif small { color: var(--muted); }
.fd-set-session {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.fd-set-session:last-child { border-bottom: 0; }
.fd-set-session em { color: var(--blue); font-style: normal; font-size: 11px; }
html[data-density=compact] .fd-set-menu button { height: 30px; }
html[data-density=compact] .fd-settings-page { padding: 14px 16px; }
html[data-density=compact] .fd-set-card { padding: 12px 14px; }
@media (max-width: 760px) {
  .fd-set-layout { grid-template-columns: 1fr; }
  .fd-set-menu { flex-direction: row; overflow-x: auto; position: static; }
  .fd-input { min-width: 0; width: 100%; }
}

/* ============================ Line icons ================================== */
.fd-svg-ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.18em; }
.fd-nav-btn .fd-svg-ic, .fd-side-foot button .fd-svg-ic { width: 18px; height: 18px; }

/* ============ Explorer supplements (extends the appended Aurora CSS) ======
 * Aurora's real .fd-row / .fileicon / .fd-list-head / .fd-panel rules live in
 * the "Aurora explorer" block appended at the very end of this file — that is
 * the source of truth, matched byte-for-byte to the reference. These rules only
 * ADD what Aurora doesn't ship: extra file-type colours, an image-thumb variant,
 * the owner chip, and the standalone list-view (Recent/Starred) column set. */

/* Aurora ships folder/doc/pdf/image; add the rest of our categories. */
.fileicon.video  { background: var(--purple-soft); color: var(--purple); }
.fileicon.audio  { background: color-mix(in srgb, var(--orange) 14%, var(--surface)); color: var(--orange); }
.fileicon.sheet  { background: var(--green-soft);  color: var(--green); }
.fileicon.slide  { background: var(--orange-soft); color: var(--orange); }
.fileicon.text   { background: var(--purple-soft); color: var(--purple); }
.fileicon.archive{ background: color-mix(in srgb, #b0669a 16%, var(--surface)); color: #b0669a; }
.fileicon.other  { background: var(--surface3); color: var(--muted); }
/* Classic yellow folder: no tinted square — the emoji is the icon. Sized up
 * so it reads clearly at the 34x36 (list) and 72x78 (grid) icon boxes. */
.fileicon.folder { background: transparent !important; font-size: 24px; font-weight: 400; }
.fd-browser-body[data-view="grid"] .fileicon.folder { font-size: 46px; }
/* File type letters: bold and centered on BOTH axes (Aurora sets weight 900 +
 * grid place-items:center; reinforced here, and line-height normalised so the
 * glyph sits dead-centre vertically, not riding high). */
.fd-ic.fileicon { font-weight: 900; text-align: center; line-height: 1; display: grid; place-items: center; }
/* When a real image thumbnail loads, the square becomes the image. */
.fd-ic.fileicon.has-thumb { background: var(--surface3); padding: 0; overflow: hidden; }
.fd-ic.fileicon .fd-thumb-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.fd-browser-body[data-view="grid"] .fd-ic.fileicon .fd-thumb-img { border-radius: 12px; }

.fd-owner-chip {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 800;
}

/* The in-space browser has no Owner column (our node DTO exposes a user id, not
 * a display name). So its list header + rows use a 4-track template: the first
 * track holds the icon+name together (.fd-file wrapper), then Modified, Size,
 * menu. This overrides Aurora's default 5-col explorer template for #fd-list. */
#fd-list-head,
.fd-browser-body[data-view="list"] #fd-list .fd-row {
  grid-template-columns: minmax(220px,1.9fr) minmax(100px,.8fr) minmax(70px,.55fr) 30px 32px;
}
/* Star toggle: dim/empty by default, gold when on, appears on row hover. */
.fd-star {
  width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 15px; line-height: 1;
  opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.fd-row:hover .fd-star, .fd-star.on { opacity: 1; }
.fd-star.on { color: #f5b301; }
.fd-star:hover { background: var(--surface3); color: #f5b301; }
.fd-file { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Aurora's .fd-panel is the grid-child container (opacity/visibility toggled);
 * these lay out OUR preview content inside it (head, scrollable body, info,
 * actions) as a flex column. */
.fd-panel { display: flex; flex-direction: column; }
.panel-open > .fd-panel { overflow: auto; }
/* Aurora's demo gave .fd-browser-body a fixed min-height (it lived inside a
 * card). In the full-height app it must fill the remaining space so the list
 * and the preview panel both stretch to the bottom of the window. */
.fd-browser-body { flex: 1 1 auto; min-height: 0 !important; height: auto; }
.fd-listwrap { min-height: 0; display: flex; flex-direction: column; }
#fd-list { flex: 1 1 auto; min-height: 0; }
.fd-list { scroll-behavior: smooth; }
/* In grid (card) view the icon+name wrapper unwraps so Aurora's card layout
 * (icon on top, name below) applies to the inner pieces. */
.fd-browser-body[data-view="grid"] .fd-file {
  display: contents;
}
.fd-browser-body[data-view="grid"] .fd-row-tags { display: none; }
/* In grid view the star floats in the card's top-right corner (over the icon),
 * always visible when starred, on hover otherwise. */
.fd-browser-body[data-view="grid"] .fd-star {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(2px);
}
html[data-theme="dark"] .fd-browser-body[data-view="grid"] .fd-star { background: rgba(20, 28, 42, 0.72); }
.fd-browser-body[data-view="grid"] .fd-row { position: relative; }
/* Grid cards keep their natural height and pack from the top — without this
 * the grid container (which flexes to fill height for list view) stretches the
 * card rows down to the bottom. */
.fd-browser-body[data-view="grid"] #fd-list { align-content: start; }
.fd-browser-body[data-view="grid"] .fd-row { align-self: start; }

/* Standalone list views (Recent, Starred) reuse Aurora's row look via
 * .fd-aurora-list, with the full Name/Owner/Modified/Size column set. */
.fd-aurora-list .fd-list-head,
.fd-aurora-list .fd-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: minmax(200px,1.7fr) minmax(90px,.65fr) minmax(100px,.75fr) minmax(70px,.5fr) 32px;
}
.fd-aurora-list .fd-list-head {
  height: 36px; padding: 0 16px; background: var(--surface2); color: var(--muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
}
.fd-aurora-list .fd-row {
  min-height: 60px; padding: 9px 16px; border-top: 1px solid var(--line); cursor: pointer;
}
.fd-aurora-list .fd-row:hover { background: var(--surface2); }
.fd-aurora-list .fd-row .fd-file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fd-aurora-list .fd-row .fd-name { display: flex; flex-direction: column; min-width: 0; }
.fd-aurora-list .fd-row .fd-name b,
.fd-aurora-list .fd-row .fd-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-aurora-list .fd-row .fd-name small { color: var(--muted); margin-top: 2px; }
.fd-aurora-list .fd-row .fd-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ============================ Empty state ================================= */
.fd-empty-state { text-align: center; max-width: 420px; margin: 60px auto; color: var(--muted); }
.fd-empty-ic { font-size: 34px; color: var(--blue); margin-bottom: 8px; }
.fd-empty-ic .fd-svg-ic { width: 40px; height: 40px; }
.fd-empty-state h2 { margin: 6px 0 6px; font-size: 18px; color: var(--main-text); }
.fd-empty-state p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; }
/* Aurora empty-state illustration (90px soft-blue rounded square with glyph),
 * matching the reference trash / empty pages. */
.fd-empty-state .empty-illustration {
  width: 90px; height: 90px; border-radius: 28px; display: grid; place-items: center;
  margin: 0 auto 18px; background: var(--blue-soft); color: var(--blue); font-size: 38px;
}
.fd-empty-state .primary {
  height: 40px; border-radius: 10px; border: 1px solid var(--blue); background: var(--blue);
  color: #fff; padding: 0 16px; font-weight: 720; font-size: 12px; cursor: pointer;
}
.fd-empty-state .primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ============================ Trash toolbar =============================== */


/* ======================================================================
 * AURORA EXPLORER CSS (authoritative) — verbatim from the reference
 * package assets/css/app.css (v5.1/v5.2/v6 layers). This is the source of
 * truth for .fd-browser-body, .fd-listwrap, .fd-panel, .fd-list-head,
 * .fd-row, .fileicon, grid mode, and the explorer's responsive behaviour.
 * Appended last so it wins the cascade over any earlier app rules.
 * ==================================================================== */
/* Aurora v5.1 compatibility and explorer controls ------------------------- */
:root{
  /* Original FileDish variable names remain valid aliases. */
  --panel:var(--surface);--panel-2:var(--surface2);--accent:var(--blue);--accent-2:var(--blue2);
  --ok:var(--green);--danger:var(--red);--fd-danger:var(--red);
  --main-bg:var(--bg);--main-panel:var(--surface);--main-text:var(--text);
  --main-muted:var(--muted);--main-line:var(--line);
}

.ghost{border-color:transparent;background:transparent;color:var(--muted)}

.storage-label{display:inline-flex;align-items:center;gap:6px}
.storage-cloud{color:var(--blue);font-size:14px;line-height:1}

.storage-overview-icon{width:34px;height:34px;margin-right:9px;border-radius:11px;display:inline-grid;place-items:center;background:var(--blue);color:#fff;vertical-align:middle;box-shadow:0 8px 18px color-mix(in srgb,var(--blue) 25%,transparent)}

.storage-copy h2{display:flex;align-items:center}

.fd-toolbar{gap:16px}
.fd-crumbs{display:flex;align-items:center;gap:6px;min-width:0}
.fd-crumb{border:0;background:transparent;color:var(--text);font-weight:730;cursor:pointer;padding:5px 3px}
.fd-crumb:hover{color:var(--blue)}

.file-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.fd-toolbar-search{width:190px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);color:var(--text);padding:0 10px;outline:0}
.fd-toolbar-search:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}

.fd-browser-body{display:grid;grid-template-columns:minmax(0,1fr) 0;min-height:470px;transition:grid-template-columns .2s ease}
.fd-browser-body.panel-open{grid-template-columns:minmax(0,1fr) 310px}
.fd-listwrap{min-width:0;position:relative;overflow:auto}
.fd-panel{min-width:0;border-left:1px solid var(--line);background:var(--surface2);overflow:hidden;opacity:0;visibility:hidden;transition:opacity .15s ease}
.panel-open>.fd-panel{opacity:1;visibility:visible}
.fd-pp-empty{height:100%;min-height:420px;display:grid;align-content:center;justify-items:center;text-align:center;padding:28px}
.fd-pp-empty h3{margin:12px 0 3px}
.preview-empty-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-size:28px}
.fd-preview{padding:22px}
.fd-preview-art{height:170px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,var(--blue-soft),var(--purple-soft));font-size:48px}
.fd-preview h3{margin:18px 0 4px}
.fd-preview-type{color:var(--muted);font-size:12px}
.fd-preview dl{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;margin:22px 0 0;font-size:12px}
.fd-preview dt{color:var(--muted)}
.fd-preview dd{margin:0;text-align:right;font-weight:650}

.fd-list-head,.fd-row{display:grid;grid-template-columns:minmax(240px,1.7fr) minmax(90px,.65fr) minmax(100px,.75fr) minmax(70px,.5fr) 32px;align-items:center;gap:10px}
.fd-list-head{height:36px;padding:0 16px;background:var(--surface2);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.fd-row{min-height:60px;padding:9px 16px;border-top:1px solid var(--line);cursor:pointer;outline:0}
.fd-row:hover,.fd-row:focus-visible{background:var(--surface2)}
.fd-row.selected{background:var(--blue-soft);box-shadow:inset 3px 0 var(--blue)}
.fd-row .fd-name{display:flex;flex-direction:column;min-width:0}
.fd-row .fd-name b,.fd-row .fd-name small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-row .fd-name small{color:var(--muted);margin-top:2px}
.fd-row .fd-ic{float:none}
.fd-row .row-menu{width:30px;height:30px;border:0;border-radius:8px;cursor:pointer}
.fd-row .row-menu:hover{background:var(--surface3);color:var(--text)}

/* The same original #fd-list and .fd-row nodes become cards in grid mode. */
.fd-browser-body[data-view="grid"] .fd-list-head{display:none}
.fd-browser-body[data-view="grid"] #fd-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px;padding:16px}
.fd-browser-body[data-view="grid"] .fd-row{display:grid;grid-template-columns:1fr 30px;grid-template-rows:118px auto auto;gap:6px 8px;min-height:210px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}
.fd-browser-body[data-view="grid"] .fd-row:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.fd-browser-body[data-view="grid"] .fd-row.selected{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.fd-browser-body[data-view="grid"] .fd-ic{grid-column:1/-1;grid-row:1;width:100%;height:118px;border-radius:12px;font-size:24px}
.fd-browser-body[data-view="grid"] .fd-name{grid-column:1;grid-row:2}
.fd-browser-body[data-view="grid"] .fd-meta{display:none}
.fd-browser-body[data-view="grid"] .row-menu{grid-column:2;grid-row:2}
.fd-browser-body[data-view="grid"] .fd-row:after{content:attr(data-size) " · " attr(data-modified);grid-column:1/-1;grid-row:3;color:var(--muted);font-size:10px}

#fd-view-toggle.active,#fd-panel-toggle.active{background:var(--blue-soft);color:var(--blue)}

.fd-upanel,.fd-drop{position:absolute}
.fd-badge{display:inline-grid;place-items:center;min-width:16px;height:16px;border-radius:999px;background:var(--red);color:#fff;font-size:9px}

@media(max-width:980px){.fd-browser-body.panel-open{grid-template-columns:minmax(0,1fr) 270px}
.fd-list-head,.fd-row{grid-template-columns:minmax(220px,1.6fr) 90px 90px 32px}
.fd-list-head span:nth-child(4),.fd-row .fd-meta:nth-of-type(4){display:none}
.fd-toolbar-search{display:none}
}

@media(max-width:700px){.fd-browser-body,.fd-browser-body.panel-open{grid-template-columns:1fr}
.fd-panel{position:fixed;z-index:130;right:0;top:0;bottom:0;width:min(88vw,340px);transform:translateX(100%);visibility:hidden;opacity:1;box-shadow:-18px 0 40px rgba(0,0,0,.22)}
.panel-open>.fd-panel{transform:none;visibility:visible}
.fd-list-head{display:none}
.fd-row{grid-template-columns:44px minmax(0,1fr) 30px;padding:10px 12px}
.fd-row .fd-ic{grid-column:1}
.fd-row .fd-name{grid-column:2}
.fd-row .fd-meta{display:none}
.fd-row .row-menu{grid-column:3}
.file-toolbar{flex-wrap:wrap}
.fd-crumbs{width:100%}
.fd-browser-body[data-view="grid"] #fd-list{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:10px}
}

@media(max-width:430px){.fd-browser-body[data-view="grid"] #fd-list{grid-template-columns:1fr}
}



/* Aurora v5.2 signature cloud art and softened navigation ---------------- */
.fd-cloud-art{position:absolute;z-index:0;right:118px;bottom:-22px;width:190px;height:132px;pointer-events:none;opacity:.105;color:var(--blue);filter:drop-shadow(0 14px 24px color-mix(in srgb,var(--blue) 18%,transparent));transform:rotate(-3deg)}

.fd-cloud-art svg{display:block;width:100%;height:100%;overflow:visible}

.fd-cloud-art .fd-cloud-main{fill:currentColor}

.fd-cloud-art .fd-cloud-line{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

.fd-cloud-art .fd-cloud-file{fill:var(--surface);stroke:currentColor;stroke-width:4}

.fd-cloud-art .fd-cloud-dot{fill:currentColor}

html[data-theme=dark] .fd-cloud-art{opacity:.14;color:#74a2ff;filter:drop-shadow(0 14px 28px rgba(35,91,205,.22))}

.sidebar .workspace,.sidebar .storage-mini{background:color-mix(in srgb,var(--surface) 72%,transparent)}

.sidebar .nav a:hover{background:color-mix(in srgb,var(--surface3) 72%,transparent)}

@media(max-width:520px){.fd-cloud-art{right:54px;width:150px;opacity:.08}
}



/* Aurora v6 hybrid: v5.2 foundation with v4 card system ------------------- */
.fd-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:26px}

.fd-stat-card{min-height:150px;border:1px solid var(--line);border-radius:15px;padding:21px;display:flex;align-items:flex-start;gap:16px;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}

.fd-stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

.fd-stat-card.blue{background:linear-gradient(135deg,var(--blue-soft),var(--surface) 68%);border-color:color-mix(in srgb,var(--blue) 24%,var(--line))}

.fd-stat-card.green{background:linear-gradient(135deg,var(--green-soft),var(--surface) 68%);border-color:color-mix(in srgb,var(--green) 24%,var(--line))}

.fd-stat-card.orange{background:linear-gradient(135deg,var(--orange-soft),var(--surface) 68%);border-color:color-mix(in srgb,var(--orange) 24%,var(--line))}

.fd-stat-card.purple{background:linear-gradient(135deg,var(--purple-soft),var(--surface) 68%);border-color:color-mix(in srgb,var(--purple) 24%,var(--line))}

.fd-stat-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;font-size:20px;background:var(--surface);box-shadow:0 4px 12px color-mix(in srgb,var(--text) 7%,transparent)}

.fd-stat-card h3{margin:5px 0 12px;font-size:13px}
.fd-stat-card strong{font-size:28px;line-height:1}
.fd-stat-card p{margin:11px 0 0;color:var(--muted);font-size:12px}

.fd-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}

.fd-dashboard-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:20px;margin-bottom:26px}

.fd-storage-overview{min-height:220px;padding:28px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative;isolation:isolate;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--blue-soft) 72%,var(--surface)))}

.fd-storage-copy{position:relative;z-index:2}
.fd-storage-copy h2{margin:0 0 20px;font-size:18px}
.fd-storage-copy strong{font-size:28px}
.fd-storage-copy p{color:var(--muted)}

.fd-progress{width:250px;max-width:100%;height:10px;background:var(--line);border-radius:999px;overflow:hidden;margin:14px 0}
.fd-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#62a4ff);border-radius:inherit}

.fd-card-link,.fd-activity-card a{color:var(--blue);text-decoration:none;font-weight:700;font-size:12px}

.fd-storage-ring-large{position:relative;z-index:2;width:128px;height:128px;flex:0 0 128px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) 0 63%,var(--surface3) 63%)}

.fd-storage-ring-large:before{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:var(--surface)}

.fd-storage-ring-large div{z-index:1;display:flex;flex-direction:column;align-items:center}
.fd-storage-ring-large strong{font-size:20px}
.fd-storage-ring-large small{font-size:10px;color:var(--muted)}

.fd-storage-overview .fd-cloud-art{right:112px;bottom:-18px;width:190px;height:132px}

.fd-activity-card{padding:25px 26px}
.fd-card-heading,.fd-files-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.fd-card-heading{margin-bottom:8px}
.fd-card-heading h2,.fd-files-head h2{margin:2px 0 0;font-size:18px}
.fd-eyebrow{display:block;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}

.fd-activity{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.fd-activity:last-child{border-bottom:0}
.fd-activity p{margin:0}
.fd-activity time{font-size:11px;color:var(--muted)}

.fd-mini-avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:11px}
.fd-mini-avatar.orange{background:#ff9860}
.fd-mini-avatar.purple{background:#8856d8}

.fd-files-card{overflow:hidden}
.fd-files-head{padding:21px 24px 16px;border-bottom:1px solid var(--line)}

.fd-recent-table{width:100%}
.fd-recent-head,.fd-recent-row{display:grid;grid-template-columns:minmax(260px,1.6fr) .55fr .75fr .5fr 30px;gap:14px;align-items:center}
.fd-recent-head{padding:10px 20px;background:var(--surface2);color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.fd-recent-row{min-height:64px;padding:9px 20px;border-top:1px solid var(--line);text-decoration:none;font-size:12px}
.fd-recent-row:hover{background:var(--surface2)}
.fd-recent-row>span:not(:first-child){color:var(--muted)}

.fd-file-main{display:flex;align-items:center;gap:12px;min-width:0}
.fd-file-main>span:last-child{min-width:0}
.fd-file-main b,.fd-file-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-file-main small{color:var(--muted);font-size:11px}
.fd-file-icon{width:34px;height:36px;display:grid;place-items:center;border-radius:8px;font-size:9px;font-style:normal;font-weight:900}
.fd-file-icon.folder{background:var(--orange-soft);color:var(--orange);font-size:20px}
.fd-file-icon.doc{background:var(--blue-soft);color:var(--blue)}
.fd-file-icon.pdf{background:var(--red-soft);color:var(--red)}
.fd-file-icon.image{background:var(--purple-soft);color:var(--purple)}

@media(max-width:1180px){.fd-stat-grid{grid-template-columns:repeat(2,1fr)}
.fd-recent-head,.fd-recent-row{grid-template-columns:minmax(220px,1.5fr) .6fr .7fr 30px}
.fd-recent-head span:nth-child(4),.fd-recent-row>span:nth-child(4){display:none}
}

@media(max-width:820px){.fd-stat-grid{grid-template-columns:1fr 1fr;gap:12px}
.fd-stat-card{min-height:125px;padding:16px;gap:10px}
.fd-stat-card strong{font-size:23px}
.fd-dashboard-grid{grid-template-columns:1fr}
.fd-storage-overview .fd-cloud-art{display:none}
.fd-storage-overview{min-height:190px}
.fd-recent-head,.fd-recent-row{grid-template-columns:minmax(180px,1fr) .7fr 30px}
.fd-recent-head span:nth-child(2),.fd-recent-row>span:nth-child(2),.fd-recent-head span:nth-child(4),.fd-recent-row>span:nth-child(4){display:none}
}

@media(max-width:520px){.fd-stat-grid{grid-template-columns:1fr}
.fd-stat-card{min-height:110px}
.fd-storage-overview{align-items:flex-start;padding:22px}
.fd-storage-ring-large{width:92px;height:92px;flex-basis:92px}
.fd-storage-ring-large:before{width:64px;height:64px}
.fd-progress{width:180px}
.fd-recent-head{display:none}
.fd-recent-row{grid-template-columns:minmax(0,1fr) 30px;padding:10px 14px}
.fd-recent-row>span:nth-child(2),.fd-recent-row>span:nth-child(3),.fd-recent-row>span:nth-child(4){display:none}
.fd-files-head{align-items:flex-start}
}



/* Aurora v6.0.1 — attached storage visuals ------------------------------- */
/* Sidebar metric follows the attached FileDish-modern circular treatment. */
.sidebar-storage-card{border:1px solid var(--line);border-radius:14px;padding:15px 14px 14px;text-align:center;background:var(--surface);box-shadow:var(--shadow-sm);margin:4px 2px 10px}

.sidebar-storage-card .fd-storage-title{display:block;font-size:12px;font-weight:750;color:var(--text)}

.fd-storage-ring{--usage:0;width:82px;height:82px;margin:11px auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) calc(var(--usage)*1%),var(--line) 0);position:relative}

.fd-storage-ring:before{content:"";position:absolute;inset:7px;background:var(--surface);border-radius:50%}

.fd-storage-ring>div{position:relative;z-index:1;display:flex;flex-direction:column;line-height:1.2}

.fd-storage-ring strong{font-size:18px;color:var(--text)}

.fd-storage-ring small{font-size:9px;color:var(--muted);margin-top:2px}

.sidebar-storage-card p{margin:0 0 11px;color:var(--muted);font-size:10px}

.fd-storage-upgrade{border:0;background:var(--blue-soft);color:var(--blue);border-radius:9px;padding:8px 10px;width:100%;font-weight:750;font-size:11px;display:flex;align-items:center;justify-content:space-between;text-decoration:none}

.fd-storage-upgrade:hover{background:color-mix(in srgb,var(--blue-soft) 76%,var(--blue) 24%)}


/* Storage overview restores the original three-shape cloud sculpture. */
.fd-storage-overview{background:var(--surface)}

.fd-storage-overview .fd-storage-copy{max-width:55%}

.fd-storage-overview .fd-cloud-art{position:relative;right:auto;bottom:auto;width:170px;height:110px;flex:0 0 170px;opacity:1;color:inherit;filter:drop-shadow(0 18px 18px rgba(56,103,182,.22));transform:none;z-index:1}

.fd-storage-overview .fd-cloud-art span{position:absolute;display:block;border-radius:50%;background:linear-gradient(145deg,#eaf3ff,#bdd5fa)}

.fd-storage-overview .fd-cloud-art span:nth-child(1){width:75px;height:75px;left:13px;top:28px}

.fd-storage-overview .fd-cloud-art span:nth-child(2){width:88px;height:88px;left:55px;top:16px}

.fd-storage-overview .fd-cloud-art span:nth-child(3){width:105px;height:49px;left:27px;top:59px;border-radius:50px}

html[data-theme=dark] .fd-storage-overview .fd-cloud-art{opacity:1;filter:drop-shadow(0 18px 20px rgba(0,0,0,.28))}

html[data-theme=dark] .fd-storage-overview .fd-cloud-art span{background:linear-gradient(145deg,#315281,#1e3d68)}

@media(max-width:820px){.fd-storage-overview .fd-cloud-art{display:block;width:145px;height:96px;flex-basis:145px;transform:scale(.88);transform-origin:right center}
.fd-storage-overview .fd-storage-copy{max-width:62%}
}

@media(max-width:620px){.fd-storage-overview .fd-cloud-art{display:none}
.fd-storage-overview .fd-storage-copy{max-width:none}
}



/* Aurora v6.0.2 shared sidebar storage metric */
.sidebar-bottom .sidebar-storage-card{margin:0 0 12px;width:100%;box-sizing:border-box}

.sidebar-storage-card .fd-storage-ring{margin:10px auto 8px}

.sidebar-storage-card .fd-storage-upgrade{display:flex;align-items:center;justify-content:space-between;text-decoration:none}

@media (max-height:780px){.sidebar-storage-card .fd-storage-ring{width:76px;height:76px}
.sidebar-storage-card{padding:12px}
.sidebar-storage-card p{margin:6px 0}
}


/* ===================== Sidebar density adjustments =======================
 * Tighter nav rhythm + a shorter storage card so more menu items and spaces
 * are visible without scrolling. Appended last to win over earlier rules. */
.fd-side { gap: 3px; }
.fd-nav-label { height: 20px; margin-top: 4px; }
.fd-nav-btn { height: 30px; }
.fd-side-head { margin-top: 6px; margin-bottom: 2px; }
.fd-side-foot { gap: 4px; padding-top: 8px; }
.fd-side-foot button.ghost { height: 30px; }

/* Spaces list: give it real room and let it scroll when there are many. */
.fd-spaces { flex: 1 1 auto; min-height: 96px; gap: 1px; }
.fd-space { height: 30px; }

/* Shorter storage card — smaller ring, tighter padding, reclaim vertical room. */
.fd-side .sidebar-storage-card { padding: 10px 12px 11px; margin: 2px 2px 6px; }
.fd-side .sidebar-storage-card .fd-storage-ring { width: 56px; height: 56px; margin: 7px auto 8px; }
.fd-side .sidebar-storage-card .fd-storage-ring strong { font-size: 13px; }
.fd-side .sidebar-storage-card .fd-storage-ring small { font-size: 8px; }
.fd-side .sidebar-storage-card p { margin: 0 0 8px; }
.fd-side .sidebar-storage-card .fd-storage-upgrade { padding: 6px 10px; }

/* ================= Toolbar sizing (wins over Aurora's appended rule) ====== */
.fd-toolbar .fd-tools .fd-toolbar-search { flex: 0 1 200px; max-width: 220px; height: 34px; width: auto; }
.fd-toolbar .fd-tools #fd-tag-filter { max-width: 120px; height: 34px; }
.fd-toolbar .fd-tools { flex-wrap: nowrap; overflow: visible; }
/* Let the crumbs area shrink so the tools row always fits on one line. */
.fd-toolbar { gap: 12px; flex-wrap: nowrap; }
.fd-toolbar .fd-crumbs { min-width: 0; flex: 0 1 auto; overflow: hidden; }

/* ===================== Loading dots (list loading state) ================== */
.fd-loading-dots { display: inline-flex; gap: 6px; margin-bottom: 10px; }
.fd-loading-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue);
  opacity: .35; animation: fd-dot 1s infinite ease-in-out;
}
.fd-loading-dots span:nth-child(2) { animation-delay: .15s; }
.fd-loading-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes fd-dot { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Sort select — compact, matches the tag filter. */
.fd-toolbar #fd-sort { flex: 0 0 auto; max-width: 150px; height: 34px; padding: 0 8px; font-size: 13px; }

/* ===================== Folder icon (emoji) picker ======================== */
.fd-icon-search {
  width: 100%; height: 38px; padding: 0 12px; margin: 4px 0 12px;
  border: 1px solid var(--main-line); border-radius: 9px;
  background: var(--main-bg); color: var(--main-text); font-size: 14px;
}
.fd-icon-search:focus { border-color: var(--accent); outline: none; }
.fd-icon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px; max-height: 300px; overflow-y: auto; padding: 2px;
}
.fd-icon-cell {
  height: 46px; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  background: var(--surface2); font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all .1s ease;
}
.fd-icon-cell:hover { background: var(--blue-soft); transform: scale(1.08); }
.fd-icon-cell.on { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 2px var(--blue-soft); }

/* ===================== Folder Navigator (left tree) ====================== */
/* The browser body is Aurora's 2-col grid [list][panel]. The navigator is a
 * third column inserted BEFORE them; it collapses to 0 width when closed. */
.fd-navigator {
  width: 0; overflow: hidden; border-right: 0;
  background: var(--surface2); transition: width .2s ease; min-height: 0;
  display: flex; flex-direction: column;
}
.fd-browser-body.nav-open .fd-navigator { border-right: 1px solid var(--main-line); }
.fd-browser-body.nav-open { grid-template-columns: 232px minmax(0, 1fr) 0; }
.fd-browser-body.nav-open.panel-open { grid-template-columns: 232px minmax(0, 1fr) minmax(280px, 340px); }
.fd-browser-body.nav-open .fd-navigator { width: 232px; overflow: auto; }

/* CRITICAL: the browser body now has THREE children (navigator, list, panel).
 * Aurora's base grid only declared two columns, so with the navigator closed
 * the third child (panel) wrapped to a new row and the list was squeezed. Force
 * a three-column track in every state; the navigator and panel collapse to 0
 * when not shown. These win via later cascade position + higher specificity. */
.fd-browser-body { grid-template-columns: 0 minmax(0, 1fr) 0 !important; }
.fd-browser-body.panel-open { grid-template-columns: 0 minmax(0, 1fr) 310px !important; }
.fd-browser-body.nav-open { grid-template-columns: 232px minmax(0, 1fr) 0 !important; }
.fd-browser-body.nav-open.panel-open { grid-template-columns: 232px minmax(0, 1fr) minmax(280px, 340px) !important; }
.fd-nav-head {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--main-muted); padding: 12px 12px 6px;
}
/* Space-root button at the top of the navigator — click to return to the top. */
.fd-nav-root {
  display: flex; align-items: center; gap: 7px; width: calc(100% - 8px); margin: 8px 4px 4px;
  padding: 7px 8px; border: 0; border-radius: 8px; cursor: pointer; background: transparent;
  color: var(--main-text); font-size: 13.5px; font-weight: 600; text-align: left;
}
.fd-nav-root:hover { background: var(--blue-soft); }
.fd-nav-root.active { background: var(--blue-soft); box-shadow: inset 2px 0 var(--blue); }
.fd-nav-root-ic { flex: 0 0 auto; font-size: 15px; }
.fd-nav-root-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-nav-tree { padding: 0 4px 12px; }
.fd-nav-empty { color: var(--main-muted); font-size: 13px; padding: 8px 12px; }
.fd-nav-row {
  display: flex; align-items: center; gap: 4px; height: 30px; padding-right: 8px;
  border-radius: 8px; cursor: pointer; color: var(--main-text); font-size: 13.5px;
  white-space: nowrap; overflow: hidden;
}
.fd-nav-row:hover { background: var(--blue-soft); }
.fd-nav-row.active { background: var(--blue-soft); font-weight: 600; box-shadow: inset 2px 0 var(--blue); }
.fd-nav-chev {
  border: 0; background: transparent; color: var(--main-muted); cursor: pointer;
  width: 18px; height: 18px; flex: 0 0 auto; font-size: 10px; line-height: 1;
  transition: transform .12s ease; display: inline-flex; align-items: center; justify-content: center;
}
.fd-nav-chev.open { transform: rotate(90deg); }
.fd-nav-ic { flex: 0 0 auto; font-size: 14px; }
.fd-nav-name { overflow: hidden; text-overflow: ellipsis; }
#fd-nav-toggle.active { background: var(--blue-soft); border-color: var(--blue); }
@media (max-width: 720px) {
  /* On narrow screens the navigator overlays as a slide-in rather than a column;
   * the grid stays a single main column (nav floats above it). */
  .fd-browser-body { grid-template-columns: 0 minmax(0, 1fr) 0 !important; }
  .fd-browser-body.panel-open { grid-template-columns: 0 minmax(0, 1fr) 0 !important; }
  .fd-browser-body.nav-open { grid-template-columns: 0 minmax(0, 1fr) 0 !important; }
  .fd-browser-body.nav-open .fd-navigator {
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 20; width: 250px;
    box-shadow: 4px 0 18px rgba(0, 0, 0, .18);
  }
}

/* ===================== Billing: cycle toggle + provider chooser ========== */
.bl-cycle { display: inline-flex; border: 1px solid var(--main-line); border-radius: 9px; overflow: hidden; margin: 4px 0 14px; }
.bl-cyc { border: 0; background: transparent; padding: 7px 16px; cursor: pointer; font-size: 13px; color: var(--main-text); }
.bl-cyc.active { background: var(--blue); color: #fff; font-weight: 600; }
.bl-providers { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.bl-prov {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px;
  border: 1px solid var(--main-line); border-radius: 11px; background: var(--surface2);
  cursor: pointer; font-size: 15px; font-weight: 600; color: var(--main-text); text-align: left;
  transition: all .12s ease;
}
.bl-prov:hover { border-color: var(--blue); background: var(--blue-soft); }
.bl-prov-ic { font-size: 20px; }

/* Navigator drop target (drag a file/folder onto a tree folder or the root). */
.fd-nav-row.nav-droptarget, .fd-nav-root.nav-droptarget {
  background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); border-radius: 8px;
}

/* ===================== Home: activity that teaches ======================= */
.fd-act-summary { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0 10px; }
.fd-act-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--main-text); }
.fd-act-chip i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.fd-act-trend { height: 40px; margin: 0 0 12px; }
.fd-spark { width: 100%; height: 40px; display: block; }
.fd-activity-row .fd-act-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; margin-top: 6px; }
.fd-activity-row.clickable { cursor: pointer; border-radius: 8px; }
.fd-activity-row.clickable:hover { background: var(--blue-soft); }

/* Admin transactions/ledger table (shares the customer-table look). */
.fd-admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fd-admin-table th, .fd-admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--main-line); vertical-align: middle; }
.fd-admin-table th { color: var(--main-muted); font-weight: 600; }

/* Profit-vs-cost banner */
.fd-profit-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; margin: 4px 0 12px; font-size: 14px; }
.fd-profit-banner.ok { background: var(--green-soft); color: var(--green); }
.fd-profit-banner.bad { background: var(--orange-soft); color: var(--orange); }
.fd-profit-verdict { font-weight: 600; }
.fd-profit-figure { font-variant-numeric: tabular-nums; }

/* Navigator keyboard focus */
.fd-nav-row:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.fd-nav-row:focus-visible { outline: 2px solid var(--accent); }

/* Toolbar icon buttons (Move / Trash / Upload) */
.fd-btn-ic { display: inline-flex; align-items: center; gap: 6px; }
.fd-btn-ic .fd-svg-ic { width: 16px; height: 16px; flex: 0 0 auto; }

/* Context-menu items with leading icons */
.fd-ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; }
.fd-ctx-item .fd-svg-ic { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.75; }
.fd-ctx-item.danger-item .fd-svg-ic { opacity: 0.9; }
.fd-ctx-ic-sp { width: 16px; height: 16px; flex: 0 0 auto; display: inline-block; }

/* Navigator drag source feedback */
.fd-nav-row.nav-dragging { opacity: 0.45; }

/* Icon-only toolbar buttons (SVG line icons instead of emoji glyphs, which
   render inconsistently across platforms/Chrome). */
.fd-icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.fd-icon-btn .fd-svg-ic { width: 18px; height: 18px; }
.fd-nav-root-ic .fd-svg-ic { width: 17px; height: 17px; vertical-align: -3px; }

/* Inline link-style button used in admin/sysadmin page heads. */
.linklike { background: none; border: none; color: var(--accent, #4a7cff); cursor: pointer; padding: 0; font: inherit; }
.linklike:hover { text-decoration: underline; }

/* File-browser pagination footer */
.fd-pager {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-top: 1px solid var(--main-line); background: var(--main-panel);
  font-size: 13px; flex-wrap: wrap;
}
.fd-pager-spacer { flex: 1 1 auto; }
.fd-pager-info { white-space: nowrap; }
.fd-pager-size { display: inline-flex; align-items: center; gap: 6px; }
.fd-pager-size select { height: 30px; border-radius: 7px; border: 1px solid var(--main-line); background: var(--main-bg); color: var(--main-text); padding: 0 6px; }
.fd-pager button.ghost { height: 30px; }
.fd-pager button.ghost:disabled { opacity: 0.45; cursor: default; }

/* Profit-trend mini chart */
.fd-tr-chart { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 8px 4px 0; margin-bottom: 12px; }
.fd-tr-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.fd-tr-bar-wrap { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.fd-tr-bar { width: 60%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--accent); transition: height .25s; }
.fd-tr-bar.neg { background: var(--danger); }
.fd-tr-x { font-size: 11px; }
.fd-tr-table td.fd-pos, .fd-tr-table .fd-pos { color: var(--ok); }
.fd-tr-table td.fd-neg, .fd-tr-table .fd-neg { color: var(--danger); }
.fd-tr-total td { border-top: 2px solid var(--main-line); }

/* File-request instructions shown to uploaders on the public drop page */
.fd-drop-instructions {
  background: var(--main-bg); border: 1px solid var(--main-line); border-radius: 8px;
  padding: 10px 12px; margin: 8px 0 12px; white-space: pre-wrap; color: var(--main-text);
}

/* File-request: inline checkbox row + instructions preview in Drops list */
.fd-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; cursor: pointer; }
.fd-check input { width: auto; margin: 0; }
.fd-drop-instr-row { margin-top: 4px; font-size: 12.5px; white-space: pre-wrap; }

/* Custom uploaded folder icon image (fills the icon square) */
.fd-folder-img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.fd-nav-ic .fd-folder-img { width: 1.1em; height: 1.1em; border-radius: 3px; }
.fd-icon-upload { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.fd-icon-upload .fic-hint { font-size: 12px; }

/* Sysadmin card header with an action button aligned to the right */
.fd-admin-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fd-admin-cardhead h3 { margin: 0; }