/* UpHub 1.4.0 — Dropbox DIG-inspired visual system.
   The application remains an original UpHub implementation; this layer
   adopts the supplied neutral surfaces, state colors and restrained density. */

:root,
html[data-theme="light"] {
  --dig-color__selection__base: #0061fe;
  --dig-color__selection__base--state-1: #004dc7;
  --dig-color__selection__base--state-2: #003a97;
  --dig-color__selection__on-base: #f2f7ff;
  --dig-color__selection__surface: #f2f7ff;
  --dig-color__selection__surface--state-1: #deebff;
  --dig-color__selection__surface--state-2: #b4d1ff;
  --dig-color__selection__on-surface: #00183e;
  --dig-color__identity__yellow: #fad24b;
  --dig-color__identity__on-yellow: #684505;
  --dig-color__identity__green: #b4dc19;
  --dig-color__identity__on-green: #175641;
  --dig-color__identity__purple: #c8aff0;
  --dig-color__identity__on-purple: #682760;
  --dig-color__identity__red: #fa551e;
  --dig-color__identity__on-red: #4e0119;
  --dig-color__identity__cyan: #3dd3ee;
  --dig-color__identity__on-cyan: #055463;
  --dig-color__identity__magenta: #ffafa5;
  --dig-color__identity__on-magenta: #892055;
  --dig-color__identity__blue: #b4c8e1;
  --dig-color__identity__on-blue: #283750;
  --dig-color__identity__orange: #f9a34b;
  --dig-color__identity__on-orange: #6d2e09;
  --dig-color__folder__closed: #b4d1ff;
  --dig-color__folder__outside: #b4d1ff;
  --dig-color__folder__inside: #75aaff;
  --dig-color__primary-cta__base: #1a1918;
  --dig-color__primary-cta__base--state-1: #393633;
  --dig-color__primary-cta__base--state-2: #44403d;
  --dig-color__primary-cta__on-base: #f7f5f2;
  --dig-color__background__base: #fff;
  --dig-color__background__subtle: #f6f6f7;
  --dig-color__background__raised: #fff;
  --dig-color__background__sunken: #f1f2f4;
  --dig-color__text__base: #1a1918;
  --dig-color__text__subtle: #736c64;
  --dig-color__border__base: #bbb5ae;
  --dig-color__border__subtle: #00000024;
  --dig-color__border__bold: #8c8279;
  --dig-color__border__subtle--on-base: #dbdbdb;
  --dig-color__disabled__base: #bbb5ae;
  --dig-color__disabled__surface: #d3cec9;
  --dig-color__disabled__on-base: #f7f5f2;
  --dig-color__disabled__on-surface: #8c8279;
  --dig-color__icon__accent: #0061fe;
  --dig-color__primary__base: #0061fe;
  --dig-color__primary__base--state-1: #004dc7;
  --dig-color__primary__base--state-2: #0044af;
  --dig-color__primary__on-base: #f2f7ff;
  --dig-color__primary__surface: #deebff;
  --dig-color__primary__surface--state-1: #c9ddff;
  --dig-color__primary__surface--state-2: #b4d1ff;
  --dig-color__primary__on-surface: #0057e0;
  --dig-color__secondary__base: #1a1918;
  --dig-color__secondary__base--state-1: #393633;
  --dig-color__secondary__base--state-2: #44403d;
  --dig-color__secondary__on-base: #f7f5f2;
  --dig-color__secondary__surface: #ebe9e6;
  --dig-color__secondary__surface--state-1: #dfdcd8;
  --dig-color__secondary__surface--state-2: #d3cec9;
  --dig-color__secondary__on-surface: #242321;
  --dig-color__warning__base: #845909;
  --dig-color__warning__base--state-1: #764f07;
  --dig-color__warning__base--state-2: #684505;
  --dig-color__warning__on-base: #f9f6f0;
  --dig-color__warning__surface: #fbe8ae;
  --dig-color__warning__surface--state-1: #f5db84;
  --dig-color__warning__surface--state-2: #eecc5d;
  --dig-color__warning__on-surface: #755f1a;
  --dig-color__success__base: #0f503c;
  --dig-color__success__base--state-1: #206f54;
  --dig-color__success__base--state-2: #267b5e;
  --dig-color__success__on-base: #e2ece8;
  --dig-color__success__surface: #e2ece8;
  --dig-color__success__surface--state-1: #cfe0da;
  --dig-color__success__surface--state-2: #b8d6cc;
  --dig-color__success__on-surface: #206f54;
  --dig-color__alert__base: #9b0032;
  --dig-color__alert__base--state-1: #c0154c;
  --dig-color__alert__base--state-2: #d21c57;
  --dig-color__alert__on-base: #f5e5eb;
  --dig-color__alert__surface: #f5e5eb;
  --dig-color__alert__surface--state-1: #f1d6de;
  --dig-color__alert__surface--state-2: #ecc5d2;
  --dig-color__alert__on-surface: #c0154c;
  --dig-color__opacity__surface: #b3b4c41f;
  --dig-color__opacity__surface--state-1: #b3b4c42e;
  --dig-color__opacity__surface--state-2: #b3b4c43d;
  --dig-color__shadow__elevated: #0000000a;
  --dig-color__utility__focus-ring: #3080ff;
  --dig-color__utility__overlay: #0000008c;
  --dig-color__utility__overlay-blur: #fffc;
  --dig-color__accent__cyan: #007891;
  --dig-color__accent__red: #9b0032;
  --dig-color__accent__orange: #be4b0a;
  --dig-color__accent__green: #0f503c;
  --dig-color__accent__blue: #283750;
  --dig-color__accent__purple: #78286e;
  --dig-color__accent__magenta: #cd2f7b;
  --dig-color__accent__yellow: #9b6400;
  --dig-color__accent__on-accent: #fff;
  --dig-color__fileicon__container: #f7f5f2;
  --dig-color__fileicon__shadow: #c7c1bb;
  --dig-color__fileicon__icon: #7f776f;
  --dig-color__fileicon__icon-shadow: #736c64;
  --dig-color__foldericon__container: #a0c4ff;
  --dig-color__foldericon__shadow: #75aaff;
  --dig-color__foldericon__icon: #488eff;
  --dig-color__foldericon__icon-shadow: #0061fa;
  --dig-color__glyph__primary: #1e1919;
  --dig-color__glyph__accent: #0061fe;
  --dig-color__glyph__monochrome: #1e1919;

  --bg: var(--dig-color__background__base);
  --surface: var(--dig-color__background__base);
  --surface-soft: var(--dig-color__background__subtle);
  --surface-raised: var(--dig-color__background__raised);
  --text: var(--dig-color__text__base);
  --muted: var(--dig-color__text__subtle);
  --line: var(--dig-color__border__subtle);
  --line-strong: var(--dig-color__border__base);
  --primary: var(--dig-color__primary__base);
  --primary-strong: var(--dig-color__primary__base--state-1);
  --primary-soft: var(--dig-color__primary__surface);
  --primary-faint: var(--dig-color__selection__surface);
  --danger: var(--dig-color__alert__base);
  --danger-soft: var(--dig-color__alert__surface);
  --success: var(--dig-color__success__base);
  --success-soft: var(--dig-color__success__surface);
  --warning: var(--dig-color__warning__base);
  --warning-soft: var(--dig-color__warning__surface);
  --folder-outside: var(--dig-color__folder__outside);
  --folder-inside: var(--dig-color__folder__inside);
  --overlay: var(--dig-color__utility__overlay);
  --focus-ring: var(--dig-color__utility__focus-ring);
  --shadow-sm: 0 1px 2px var(--dig-color__shadow__elevated);
  --shadow: 0 8px 24px #00000014;
  --shadow-lg: 0 16px 48px #00000024;
  --sidebar-width: 240px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --dig-color__selection__base: #5f9dff;
  --dig-color__selection__base--state-1: #3080ff;
  --dig-color__selection__base--state-2: #0061fa;
  --dig-color__selection__on-base: #00183e;
  --dig-color__selection__surface: #002969;
  --dig-color__selection__surface--state-1: #003280;
  --dig-color__selection__surface--state-2: #003a97;
  --dig-color__selection__on-surface: #f2f7ff;
  --dig-color__identity__yellow: #684505;
  --dig-color__identity__on-yellow: #fad24b;
  --dig-color__identity__green: #175641;
  --dig-color__identity__on-green: #b4dc19;
  --dig-color__identity__purple: #682760;
  --dig-color__identity__on-purple: #c8aff0;
  --dig-color__identity__red: #4e0119;
  --dig-color__identity__on-red: #fa551e;
  --dig-color__identity__cyan: #055463;
  --dig-color__identity__on-cyan: #3dd3ee;
  --dig-color__identity__magenta: #892055;
  --dig-color__identity__on-magenta: #ffafa5;
  --dig-color__identity__blue: #283750;
  --dig-color__identity__on-blue: #b4c8e1;
  --dig-color__identity__orange: #6d2e09;
  --dig-color__identity__on-orange: #f9a34b;
  --dig-color__folder__closed: #b4d1ff;
  --dig-color__folder__outside: #b4d1ff;
  --dig-color__folder__inside: #75aaff;
  --dig-color__primary-cta__base: #f7f5f2;
  --dig-color__primary-cta__base--state-1: #ebe9e6;
  --dig-color__primary-cta__base--state-2: #d3cec9;
  --dig-color__primary-cta__on-base: #1e1919;
  --dig-color__background__base: #1a1918;
  --dig-color__background__subtle: #2d2b29;
  --dig-color__background__raised: #242321;
  --dig-color__background__sunken: #0b0a0a;
  --dig-color__text__base: #fff;
  --dig-color__text__subtle: #bbb5ae;
  --dig-color__border__base: #5b5650;
  --dig-color__border__subtle: #ffffff24;
  --dig-color__border__bold: #7f776f;
  --dig-color__border__subtle--on-base: #3a3938;
  --dig-color__disabled__base: #5b5650;
  --dig-color__disabled__surface: #44403d;
  --dig-color__disabled__on-base: #1e1919;
  --dig-color__disabled__on-surface: #8c8279;
  --dig-color__icon__accent: #3080ff;
  --dig-color__primary__base: #488eff;
  --dig-color__primary__base--state-1: #1770ff;
  --dig-color__primary__base--state-2: #0057e0;
  --dig-color__primary__on-base: #00183e;
  --dig-color__primary__surface: #002969;
  --dig-color__primary__surface--state-1: #003280;
  --dig-color__primary__surface--state-2: #003a97;
  --dig-color__primary__on-surface: #5f9dff;
  --dig-color__secondary__base: #f7f5f2;
  --dig-color__secondary__base--state-1: #ebe9e6;
  --dig-color__secondary__base--state-2: #d3cec9;
  --dig-color__secondary__on-base: #1e1919;
  --dig-color__secondary__surface: #2d2b29;
  --dig-color__secondary__surface--state-1: #44403d;
  --dig-color__secondary__surface--state-2: #5b5650;
  --dig-color__secondary__on-surface: #ebe9e6;
  --dig-color__warning__base: #fad24b;
  --dig-color__warning__base--state-1: #dcaf21;
  --dig-color__warning__base--state-2: #ae8c1f;
  --dig-color__warning__on-base: #3e2801;
  --dig-color__warning__surface: #4d3f14;
  --dig-color__warning__surface--state-1: #5a4a16;
  --dig-color__warning__surface--state-2: #675418;
  --dig-color__warning__on-surface: #fad24b;
  --dig-color__success__base: #b4dc19;
  --dig-color__success__base--state-1: #89a914;
  --dig-color__success__base--state-2: #748e11;
  --dig-color__success__on-base: #283105;
  --dig-color__success__surface: #3a4608;
  --dig-color__success__surface--state-1: #435109;
  --dig-color__success__surface--state-2: #4c5d0b;
  --dig-color__success__on-surface: #b4dc19;
  --dig-color__alert__base: #f98a6b;
  --dig-color__alert__base--state-1: #f77751;
  --dig-color__alert__base--state-2: #f46135;
  --dig-color__alert__on-base: #2f1006;
  --dig-color__alert__surface: #63200b;
  --dig-color__alert__surface--state-1: #76260c;
  --dig-color__alert__surface--state-2: #892b0d;
  --dig-color__alert__on-surface: #fb9d83;
  --dig-color__opacity__surface: #ffffff1a;
  --dig-color__opacity__surface--state-1: #ffffff26;
  --dig-color__opacity__surface--state-2: #fff3;
  --dig-color__shadow__elevated: #0000000a;
  --dig-color__utility__focus-ring: #5f9dff;
  --dig-color__utility__overlay: #000c;
  --dig-color__utility__overlay-blur: #000c;
  --dig-color__accent__cyan: #14c8eb;
  --dig-color__accent__red: #fa551e;
  --dig-color__accent__orange: #ff8c19;
  --dig-color__accent__green: #b4dc19;
  --dig-color__accent__blue: #b4c8e1;
  --dig-color__accent__purple: #c8aff0;
  --dig-color__accent__magenta: #ffafa5;
  --dig-color__accent__yellow: #fad24b;
  --dig-color__accent__on-accent: #242321;
  --dig-color__fileicon__container: #2d2b29;
  --dig-color__fileicon__shadow: #000;
  --dig-color__fileicon__icon: #978f86;
  --dig-color__fileicon__icon-shadow: #67615a;
  --dig-color__foldericon__container: #a0c4ff;
  --dig-color__foldericon__shadow: #75aaff;
  --dig-color__foldericon__icon: #488eff;
  --dig-color__foldericon__icon-shadow: #0061fa;
  --dig-color__glyph__primary: #696663;
  --dig-color__glyph__accent: #3984ff;
  --dig-color__glyph__monochrome: #f7f5f2;

  --bg: var(--dig-color__background__base);
  --surface: var(--dig-color__background__base);
  --surface-soft: var(--dig-color__background__subtle);
  --surface-raised: var(--dig-color__background__raised);
  --text: var(--dig-color__text__base);
  --muted: var(--dig-color__text__subtle);
  --line: var(--dig-color__border__subtle);
  --line-strong: var(--dig-color__border__base);
  --primary: var(--dig-color__primary__base);
  --primary-strong: var(--dig-color__primary__base--state-1);
  --primary-soft: var(--dig-color__primary__surface);
  --primary-faint: var(--dig-color__primary__surface--state-1);
  --danger: var(--dig-color__alert__base);
  --danger-soft: var(--dig-color__alert__surface);
  --success: var(--dig-color__success__base);
  --success-soft: var(--dig-color__success__surface);
  --warning: var(--dig-color__warning__base);
  --warning-soft: var(--dig-color__warning__surface);
  --folder-outside: var(--dig-color__folder__outside);
  --folder-inside: var(--dig-color__folder__inside);
  --overlay: var(--dig-color__utility__overlay);
  --focus-ring: var(--dig-color__utility__focus-ring);
  --shadow-sm: 0 1px 2px #0005;
  --shadow: 0 8px 24px #0008;
  --shadow-lg: 0 18px 56px #000b;
  color-scheme: dark;
}

/* Layout surfaces: neutral, flat and deliberately restrained. */
body { background: var(--dig-color__background__base); }
.app-shell { background: var(--dig-color__background__base); }
.sidebar {
  width: var(--sidebar-width);
  padding: 20px 16px 16px;
  border-inline-start: 0;
  background: var(--dig-color__background__subtle);
  box-shadow: none;
}
.sidebar__head { min-height: 48px; padding: 0 8px 16px; }
.brand img { width: 132px; }
html[data-theme="dark"] .brand img,
html[data-theme="dark"] .mobile-brand img,
html[data-theme="dark"] .auth-brand img { filter: none; }
.main-area { margin-inline-end: var(--sidebar-width); background: var(--dig-color__background__base); }
.topbar {
  min-height: 72px;
  padding-inline: 32px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__base);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.content-wrap { padding: 32px 40px 64px; }
.browser { max-width: none; }

/* Primary actions follow the supplied primary-CTA tokens, not accent blue. */
.new-button,
.primary-btn {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--dig-color__primary-cta__base);
  color: var(--dig-color__primary-cta__on-base);
  box-shadow: none;
  font-weight: 700;
}
.new-button:hover,
.primary-btn:hover {
  background: var(--dig-color__primary-cta__base--state-1);
  color: var(--dig-color__primary-cta__on-base);
  box-shadow: none;
  transform: none;
  filter: none;
}
.new-button:active,
.primary-btn:active { background: var(--dig-color__primary-cta__base--state-2); }
.new-button__icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--dig-color__primary-cta__on-base) 12%, transparent);
}

/* Sidebar navigation mirrors the quiet subtle/selected surface model. */
.nav-label {
  margin: 24px 12px 8px;
  color: var(--dig-color__text__subtle);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}
.side-nav { gap: 2px; }
.side-nav a {
  min-height: 42px;
  gap: 12px;
  padding-inline: 12px;
  border-radius: 6px;
  color: var(--dig-color__text__base);
  font-weight: 500;
  transition: background-color 120ms ease, color 120ms ease;
}
.side-nav a:hover {
  color: var(--dig-color__text__base);
  background: var(--dig-color__opacity__surface--state-1);
  transform: none;
}
.side-nav a.is-active {
  color: var(--dig-color__text__base);
  background: var(--dig-color__secondary__surface);
}
.side-nav a.is-active::before { display: none; }
.side-nav .hgi { color: var(--dig-color__glyph__primary); }
.side-nav a.is-active .hgi { color: var(--dig-color__glyph__accent); }

.storage-card {
  margin-top: auto;
  padding: 14px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}
.storage-card:hover { background: var(--dig-color__opacity__surface); }
.storage-card__icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 6px;
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.storage-bar { height: 4px; background: var(--dig-color__opacity__surface--state-2); }
.storage-bar span { background: var(--dig-color__primary__base); }
.sidebar__footer { margin-top: 4px; border-top: 1px solid var(--dig-color__border__subtle); padding-top: 10px; }
.sidebar__footer > a { border-radius: 6px; }
.sidebar__footer > a:hover { background: var(--dig-color__opacity__surface--state-1); }
.avatar {
  border-radius: 50%;
  background: var(--dig-color__identity__cyan);
  color: var(--dig-color__identity__on-cyan);
  box-shadow: none;
}

/* Search and utility controls. */
.search-box {
  width: min(640px, 100%);
  min-height: 44px;
  padding-inline: 14px;
  border: 1px solid var(--dig-color__border__base);
  border-radius: 0;
  background: var(--dig-color__background__base);
  box-shadow: none;
}
.search-box:hover { border-color: var(--dig-color__border__bold); }
.search-box:focus-within {
  border-color: var(--dig-color__text__base);
  box-shadow: 0 0 0 3px var(--dig-color__utility__focus-ring);
}
.search-box kbd {
  border-color: var(--dig-color__border__subtle);
  border-radius: 3px;
  background: var(--dig-color__background__subtle);
}
.icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--dig-color__text__base);
}
.icon-btn:hover {
  border-color: transparent;
  background: var(--dig-color__opacity__surface--state-1);
  color: var(--dig-color__text__base);
  transform: none;
}

/* Page title and actions are flatter and closer to a desktop file manager. */
.breadcrumbs { margin-bottom: 14px; color: var(--dig-color__text__subtle); }
.browser-head { align-items: center; margin-bottom: 24px; }
.browser-title__icon,
.page-head__icon {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border: 0;
  border-radius: 6px;
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
  box-shadow: none;
}
.eyebrow { color: var(--dig-color__text__subtle); font-weight: 600; letter-spacing: 0; }
.browser-title h1,
.page-head h1 { font-size: 28px; font-weight: 700; letter-spacing: 0; }
.ghost-btn,
.secondary-btn {
  min-height: 44px;
  padding-inline: 16px;
  border: 1px solid var(--dig-color__border__base);
  border-radius: 0;
  background: var(--dig-color__background__base);
  color: var(--dig-color__text__base);
  font-weight: 600;
}
.ghost-btn:hover,
.secondary-btn:hover {
  border-color: var(--dig-color__text__base);
  background: var(--dig-color__background__subtle);
  color: var(--dig-color__text__base);
  transform: none;
}
.view-switch {
  gap: 0;
  padding: 0;
  border: 1px solid var(--dig-color__border__base);
  border-radius: 0;
  background: var(--dig-color__background__base);
}
.view-switch button { border-radius: 0; }
.view-switch button + button { border-inline-start: 1px solid var(--dig-color__border__subtle); }
.view-switch button.is-active {
  color: var(--dig-color__text__base);
  background: var(--dig-color__secondary__surface);
  box-shadow: none;
}
.info-banner {
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 4px;
  background: var(--dig-color__primary__surface);
}
.info-banner__icon { border-radius: 4px; background: transparent; color: var(--dig-color__primary__on-surface); }

/* File cards: neutral containers, subtle hover, no floating/glossy treatment. */
.items-grid { gap: 16px; }
.item-card {
  min-height: 160px;
  padding: 12px 12px 52px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 8px;
  background: var(--dig-color__background__base);
  box-shadow: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.item-card:hover {
  border-color: var(--dig-color__border__base);
  background: var(--dig-color__background__subtle);
  box-shadow: none;
  transform: none;
}
.item-card::after { display: none; }
.file-icon {
  width: 58px;
  height: 58px;
  border-radius: 6px;
  background: var(--dig-color__fileicon__container);
  color: var(--dig-color__fileicon__icon);
  box-shadow: 0 1px 2px var(--dig-color__fileicon__shadow);
}
.file-icon--folder {
  background: var(--dig-color__foldericon__container);
  color: var(--dig-color__foldericon__icon);
  box-shadow: 0 1px 2px var(--dig-color__foldericon__shadow);
}
.file-icon--image { background: var(--dig-color__success__surface); color: var(--dig-color__success__on-surface); }
.file-icon--video,
.file-icon--pdf { background: var(--dig-color__alert__surface); color: var(--dig-color__alert__on-surface); }
.file-icon--audio { background: var(--dig-color__identity__purple); color: var(--dig-color__identity__on-purple); }
.file-icon--archive { background: var(--dig-color__warning__surface); color: var(--dig-color__warning__on-surface); }
.file-icon--sheet { background: var(--dig-color__success__surface); color: var(--dig-color__success__on-surface); }
.file-icon--slide { background: var(--dig-color__identity__orange); color: var(--dig-color__identity__on-orange); }
.file-icon--document,
.file-icon--text { background: var(--dig-color__primary__surface); color: var(--dig-color__primary__on-surface); }
html[data-theme="dark"] .file-icon { filter: none; }
.item-name { color: var(--dig-color__text__base); font-weight: 600; }
.item-meta,
.item-type,
.item-size,
.item-card > time { color: var(--dig-color__text__subtle); }
.item-star-badge {
  color: var(--dig-color__accent__yellow);
  background: transparent;
  border: 0;
}
.item-menu summary { border-radius: 4px; }
.item-menu summary:hover { background: var(--dig-color__opacity__surface--state-1); }

/* List mode uses row separators and the same 64px rhythm as the reference file table. */
.items-grid.is-list {
  gap: 0;
  border-top: 1px solid var(--dig-color__border__subtle);
}
.items-grid.is-list .item-card {
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  border-radius: 0;
  background: transparent;
}
.items-grid.is-list .item-card:hover { background: var(--dig-color__background__subtle); }
.items-grid.is-list .file-icon { width: 40px; height: 40px; border-radius: 4px; }
.items-table-head {
  color: var(--dig-color__text__subtle);
  border-bottom-color: var(--dig-color__border__subtle);
}

/* Menus, forms, dialogs and feedback surfaces. */
.menu-popover {
  padding: 6px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 8px;
  background: var(--dig-color__background__raised);
  box-shadow: var(--shadow);
}
.menu-popover a,
.menu-popover button { border-radius: 4px; }
.menu-popover a:hover,
.menu-popover button:hover { background: var(--dig-color__opacity__surface--state-1); }
.form-control,
.field input,
.field select,
.field textarea,
.auth-box input,
.auth-box select,
.auth-box textarea {
  border-color: var(--dig-color__border__base);
  border-radius: 0;
  background: var(--dig-color__background__base);
  color: var(--dig-color__text__base);
}
.form-control:hover,
.field input:hover,
.field select:hover,
.field textarea:hover,
.auth-box input:hover { border-color: var(--dig-color__text__base); }
.form-control:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.auth-box input:focus {
  border-color: var(--dig-color__text__base);
  box-shadow: 0 0 0 3px var(--dig-color__utility__focus-ring);
}
.dialog-overlay { background: var(--dig-color__utility__overlay); }
.dialog-content {
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 12px;
  background: var(--dig-color__background__raised);
  box-shadow: var(--shadow-lg);
}
.dialog__accent { display: none; }
.dialog__title-icon { border-radius: 6px; box-shadow: none; }
.drop-zone {
  border-color: var(--dig-color__border__base);
  border-radius: 8px;
  background: var(--dig-color__background__subtle);
}
.drop-zone:hover,
.drop-zone.is-dragging {
  border-color: var(--dig-color__primary__base);
  background: var(--dig-color__primary__surface);
}
.toast {
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 8px;
  background: var(--dig-color__background__raised);
  box-shadow: var(--shadow);
}
.empty-state {
  border-color: var(--dig-color__border__subtle);
  border-radius: 8px;
  background: var(--dig-color__background__subtle);
  box-shadow: none;
}
.settings-card {
  border-color: var(--dig-color__border__subtle);
  border-radius: 8px;
  background: var(--dig-color__background__base);
  box-shadow: none;
}

/* Image viewer uses the supplied full-screen preview surface hierarchy. */
.dialog-content--image-preview {
  border-radius: 0;
  background: var(--dig-color__background__subtle);
}
.image-preview__head,
.image-preview__footer {
  border-color: var(--dig-color__border__subtle);
  background: var(--dig-color__background__base);
}
.image-preview__stage { background: var(--dig-color__background__subtle); }
.image-preview__canvas { background: var(--dig-color__background__subtle); }
.image-preview__nav,
.preview-zoom-value {
  border-color: var(--dig-color__border__subtle);
  border-radius: 4px;
  background: var(--dig-color__background__raised);
}
.image-preview__thumb {
  border-radius: 4px;
  border-color: transparent;
  background: var(--dig-color__background__raised);
}
.image-preview__thumb.is-active { border-color: var(--dig-color__primary__base); }

/* Authentication follows the same neutral surfaces instead of decorative gradients. */
.auth-layout,
.auth-layout--single { background: var(--dig-color__background__base); }
.auth-visual { background: var(--dig-color__background__subtle); }
.auth-panel { background: var(--dig-color__background__base); }
.auth-box--card {
  border-color: var(--dig-color__border__subtle);
  border-radius: 12px;
  background: var(--dig-color__background__raised);
  box-shadow: var(--shadow);
}
.auth-icon,
.success-mark,
.danger-mark { border-radius: 8px; }
.security-note { border-radius: 4px; background: var(--dig-color__background__subtle); }

/* Keep mobile controls exclusively mobile and preserve the flat visual language. */
@media (max-width: 840px) {
  .sidebar { width: min(300px, 88vw); }
  .main-area { margin-inline-end: 0; }
  .topbar { min-height: 64px; padding-inline: 12px; }
  .content-wrap { padding: 24px 16px 48px; }
  .sidebar-backdrop { background: var(--dig-color__utility__overlay); }
}

@media (max-width: 640px) {
  .dialog-content { border-radius: 12px 12px 0 0; }
  .dialog-content--image-preview { border-radius: 0; }
  .item-card { border-radius: 6px; }
}

/* Directional corrections for the RTL shell. */
.sidebar { border-left: 0; }
.main-area { margin-right: var(--sidebar-width); margin-left: 0; }

/* Make the authentication illustration use the same neutral DIG surfaces. */
.auth-visual {
  border-inline-end: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__subtle);
}
.auth-grid {
  opacity: .55;
  background-image:
    linear-gradient(var(--dig-color__border__subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--dig-color__border__subtle) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
}
.auth-orb { background: var(--dig-color__opacity__surface--state-1); filter: none; }
.visual-card { color: var(--dig-color__text__base); }
.visual-cloud {
  border-color: var(--dig-color__border__subtle);
  border-radius: 12px;
  background: var(--dig-color__background__raised);
  color: var(--dig-color__primary__base);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.visual-cloud__badge {
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 6px;
  background: var(--dig-color__primary-cta__base);
  color: var(--dig-color__primary-cta__on-base);
  box-shadow: none;
}
.visual-kicker,
.visual-pills span {
  border-color: var(--dig-color__border__subtle);
  border-radius: 4px;
  background: var(--dig-color__background__raised);
  color: var(--dig-color__text__subtle);
}
.visual-card h2 { color: var(--dig-color__text__base); letter-spacing: 0; }
.visual-card p { color: var(--dig-color__text__subtle); }

@media (max-width: 840px) {
  .main-area { margin-right: 0; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   UpHub 1.4.1 precision pass
   Removes the remaining decorative rules from app.css and aligns every
   surface with the supplied Dropbox DIG reference hierarchy.
   -------------------------------------------------------------------------- */

:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --sidebar-width: 260px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-card: 8px;
  --layout-max: 1440px;
}

html,
body { min-height: 100%; }
body {
  color: var(--dig-color__text__base);
  background: var(--dig-color__background__base);
}
button,
input,
select,
textarea { letter-spacing: 0; }

/* App shell and navigation ------------------------------------------------- */
.app-shell { min-height: 100dvh; }
.sidebar {
  width: var(--sidebar-width);
  padding: 16px 12px 14px;
  border-left: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__subtle);
}
.sidebar__head {
  min-height: 46px;
  padding: 0 8px 12px;
}
.brand { min-width: 0; }
.brand img {
  width: 124px;
  max-height: 34px;
  object-fit: contain;
  object-position: right center;
}
.new-button {
  min-height: 44px;
  margin-bottom: 18px;
  padding-inline: 12px;
  border-radius: var(--radius-control);
  font-size: 12px;
}
.new-button__icon {
  width: 26px;
  height: 26px;
  border-radius: 4px;
}
.nav-label {
  margin: 14px 12px 6px;
  font-size: 10px;
}
.side-nav a {
  min-height: 40px;
  padding-inline: 12px;
  border-radius: var(--radius-control);
  font-size: 12px;
}
.side-nav a.is-active {
  background: var(--dig-color__secondary__surface);
  box-shadow: inset -2px 0 0 var(--dig-color__primary__base);
}
html[data-theme="dark"] .side-nav a.is-active {
  background: var(--dig-color__opacity__surface--state-1);
}
.storage-card {
  margin-top: auto;
  padding: 12px;
  border-radius: var(--radius-control);
}
.storage-card__top { gap: 10px; }
.storage-card__icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 4px;
  box-shadow: none;
}
.storage-card strong { font-size: 11px; }
.storage-card small,
.storage-card__meta { font-size: 9px; }
.storage-bar { margin-block: 11px 7px; }
.sidebar__footer { padding-top: 8px; }
.sidebar__footer > a {
  min-height: 52px;
  padding: 7px 8px;
  border-radius: var(--radius-control);
}
.avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  font-size: 11px;
}
.user-copy strong { font-size: 11px; }
.user-copy small { font-size: 9px; }

/* Main header -------------------------------------------------------------- */
.main-area {
  min-width: 0;
  margin-right: var(--sidebar-width);
  background: var(--dig-color__background__base);
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 64px;
  padding-inline: 28px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__base);
}
.search-box {
  width: min(560px, 100%);
  min-height: 40px;
  padding-inline: 12px;
  border-color: var(--dig-color__border__base);
  border-radius: var(--radius-control);
  background: var(--dig-color__background__base);
}
.search-box:focus-within {
  border-color: var(--dig-color__primary__base);
  box-shadow: 0 0 0 2px var(--dig-color__utility__focus-ring);
}
.search-box input { font-size: 11px; }
.search-box kbd {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
}
.topbar__actions { gap: 2px; }
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-control);
}
.icon-btn:hover,
.icon-btn:active {
  background: var(--dig-color__opacity__surface--state-1);
  transform: none;
}

/* Page header and action bar ---------------------------------------------- */
.content-wrap {
  width: 100%;
  padding: 28px 36px 64px;
}
.browser,
.settings-page,
.page-shell {
  width: min(100%, var(--layout-max));
  margin-inline: auto;
}
.breadcrumbs {
  min-height: 24px;
  margin-bottom: 10px;
  font-size: 10px;
}
.browser-head {
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
}
.browser-title { gap: 0; }
.browser-title__icon { display: none; }
.browser-title h1,
.page-head h1 {
  margin-top: 1px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.45;
}
.browser-title p,
.page-head p { margin-top: 2px; font-size: 10px; }
.eyebrow {
  margin-bottom: 0;
  font-size: 9px;
  font-weight: 500;
}
.browser-actions { gap: 8px; }
.primary-btn,
.ghost-btn,
.secondary-btn,
.danger-btn {
  min-height: 40px;
  border-radius: var(--radius-control);
  box-shadow: none;
  font-size: 11px;
}
.primary-btn,
.new-button {
  background: var(--dig-color__primary-cta__base);
  color: var(--dig-color__primary-cta__on-base);
}
.primary-btn:hover,
.new-button:hover {
  background: var(--dig-color__primary-cta__base--state-1);
}
.ghost-btn,
.secondary-btn {
  border-color: var(--dig-color__border__base);
  background: var(--dig-color__background__base);
}
.ghost-btn:hover,
.secondary-btn:hover {
  border-color: var(--dig-color__border__bold);
  background: var(--dig-color__background__subtle);
}
.danger-btn {
  border: 0;
  background: var(--dig-color__alert__base);
  color: var(--dig-color__alert__on-base);
  filter: none;
}
.danger-btn:hover {
  background: var(--dig-color__alert__base--state-1);
  box-shadow: none;
  transform: none;
  filter: none;
}
.view-switch {
  height: 40px;
  border-radius: var(--radius-control);
  overflow: hidden;
}
.view-switch button {
  width: 38px;
  height: 38px;
}
.info-banner {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: var(--dig-color__primary__surface);
}
.info-banner__icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

/* Grid mode: a real file-manager tile, with the preview as the main surface. */
.items-grid:not(.is-list) {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 22px 14px;
}
.items-grid:not(.is-list) .item-card {
  min-height: 214px;
  padding: 7px 7px 48px;
  border-color: transparent;
  border-radius: var(--radius-card);
  background: transparent;
  overflow: visible;
}
.items-grid:not(.is-list) .item-card:hover,
.items-grid:not(.is-list) .item-card:focus-within {
  border-color: transparent;
  background: var(--dig-color__background__subtle);
}
.items-grid:not(.is-list) .item-card--starred {
  border-color: transparent;
}
.items-grid:not(.is-list) .item-main {
  width: 100%;
  gap: 0;
}
.items-grid:not(.is-list) .file-icon {
  width: 100%;
  height: 136px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 6px;
  box-shadow: none;
}
.items-grid:not(.is-list) .file-icon .hgi { font-size: 40px; }
.items-grid:not(.is-list) .file-icon--thumbnail {
  background: var(--dig-color__background__sunken);
}
.items-grid:not(.is-list) .file-thumbnail {
  transform: none;
  transition: opacity 120ms ease;
}
.items-grid:not(.is-list) .item-card:hover .file-thumbnail { transform: none; }
.items-grid:not(.is-list) .item-copy {
  padding: 10px 4px 0;
}
.items-grid:not(.is-list) .item-copy strong { font-size: 12px; }
.items-grid:not(.is-list) .item-copy small { font-size: 9px; }
.item-star-badge {
  left: 48px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  box-shadow: none;
}
.item-star-badge:hover { background: var(--dig-color__warning__surface); }
.item-menu { left: 8px; bottom: 8px; }
.item-menu summary {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
}
.menu-popover {
  width: 196px;
  padding: 6px;
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__raised);
  box-shadow: 0 8px 24px #0000002e;
}
html[data-theme="dark"] .menu-popover { box-shadow: 0 10px 28px #000a; }
.menu-popover a,
.menu-popover button {
  min-height: 38px;
  border-radius: 4px;
  font-size: 10px;
}

/* List mode --------------------------------------------------------------- */
.items-table-head {
  min-height: 34px;
  align-items: center;
  padding-inline: 12px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
}
.items-grid.is-list { border-top: 0; }
.items-grid.is-list .item-card {
  min-height: 60px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
}
.items-grid.is-list .item-card:hover,
.items-grid.is-list .item-card:focus-within {
  background: var(--dig-color__background__subtle);
}
.items-grid.is-list .file-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border: 0;
  border-radius: 4px;
}
.items-grid.is-list .item-copy strong { font-size: 11px; }
.items-grid.is-list .item-star-badge {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

/* Empty state ------------------------------------------------------------- */
.empty-state {
  min-height: 460px;
  padding: 40px 24px;
  border: 1px dashed var(--dig-color__border__base);
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
}
.empty-illustration { width: 96px; height: 96px; margin-bottom: 14px; }
.empty-illustration__glow { display: none; }
.empty-illustration__icon {
  width: 72px;
  height: 72px;
  border-color: var(--dig-color__border__subtle);
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__subtle);
  box-shadow: none;
}
.empty-state h2 { font-size: 18px; }
.empty-state p { font-size: 11px; }

/* Forms and dialogs ------------------------------------------------------- */
.dialog-overlay {
  background: var(--dig-color__utility__overlay);
  backdrop-filter: none;
}
.dialog-content:not(.dialog-content--image-preview) {
  width: min(520px, calc(100vw - 32px));
  padding: 24px;
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__raised);
  box-shadow: 0 16px 48px #00000038;
}
html[data-theme="dark"] .dialog-content:not(.dialog-content--image-preview) {
  box-shadow: 0 18px 56px #000b;
}
.dialog__accent,
.dialog__eyebrow { display: none; }
.dialog__head {
  align-items: flex-start;
  margin-bottom: 20px;
}
.dialog__title-wrap { gap: 0; }
.dialog__title-icon { display: none; }
.dialog__head h2 { font-size: 18px; }
.dialog__head p { margin-top: 4px; font-size: 10px; }
.dialog__close {
  width: 34px;
  height: 34px;
}
.dialog__message { font-size: 11px; }
.dialog__notice,
.form-alert {
  border-radius: var(--radius-control);
  box-shadow: none;
}
.dialog__actions {
  gap: 8px;
  margin-top: 22px;
}
.form-stack { gap: 14px; }
.form-stack label,
.settings-form > label { font-size: 10px; }
.form-stack input,
.form-stack select,
.form-control,
.field input,
.field select,
.field textarea,
.auth-box input,
.auth-box select,
.auth-box textarea {
  min-height: 44px;
  border-radius: var(--radius-control);
  background: var(--dig-color__background__base);
}
.form-stack input:focus,
.form-stack select:focus,
.form-control:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.auth-box input:focus {
  border-color: var(--dig-color__primary__base);
  box-shadow: 0 0 0 2px var(--dig-color__utility__focus-ring);
}
.drop-zone {
  min-height: 220px;
  padding: 26px;
  border-color: var(--dig-color__border__base);
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
  transform: none;
}
.drop-zone:hover,
.drop-zone.is-dragging {
  border-color: var(--dig-color__primary__base);
  background: var(--dig-color__primary__surface);
  transform: none;
}
.drop-zone__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__subtle);
  box-shadow: none;
}
.drop-zone strong { font-size: 13px; }
.drop-zone small { font-size: 10px; }

/* Toasts and settings ----------------------------------------------------- */
.toast {
  min-height: 48px;
  border-radius: var(--radius-control);
  background: var(--dig-color__background__raised);
  box-shadow: 0 8px 24px #00000024;
}
.settings-card {
  padding: 22px;
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
}
.settings-card__icon,
.auth-icon,
.success-mark,
.danger-mark {
  border-radius: var(--radius-control);
  box-shadow: none;
}

/* Viewer ------------------------------------------------------------------ */
.dialog-content--image-preview {
  background: var(--dig-color__background__subtle);
}
.image-preview__head {
  min-height: 68px;
  padding: 10px 16px;
  background: var(--dig-color__background__base);
}
.image-preview__icon { display: none; }
.image-preview__identity { gap: 0; }
.image-preview__head .dialog__eyebrow { display: none; }
.image-preview__head h2 { font-size: 13px; }
.image-preview__counter { font-size: 9px; }
.image-preview__viewer {
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  background: var(--dig-color__background__sunken);
}
.image-preview__stage,
.image-preview__canvas {
  background: var(--dig-color__background__sunken);
}
.image-preview__nav,
.preview-zoom-value {
  border-radius: var(--radius-control);
  background: var(--dig-color__background__raised);
}
.image-preview__footer {
  min-height: 96px;
  padding: 10px 16px;
  background: var(--dig-color__background__base);
}
.image-preview__thumb {
  width: 66px;
  height: 54px;
  flex-basis: 66px;
  border-radius: 4px;
}
.image-preview__thumb img { border-radius: 2px; }
.image-preview__loader,
.image-preview__error {
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__raised);
  box-shadow: 0 8px 24px #0000002e;
}

/* Authentication --------------------------------------------------------- */
.auth-layout,
.auth-layout--single,
.auth-panel {
  background: var(--dig-color__background__base);
}
.auth-visual {
  border-left: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__subtle);
}
.auth-grid,
.auth-orb { display: none; }
.auth-box--card {
  padding: 28px;
  border-radius: var(--radius-panel);
  box-shadow: none;
}
.visual-cloud {
  width: 128px;
  height: 128px;
  border-radius: var(--radius-panel);
}
.visual-kicker,
.visual-pills span { border-radius: var(--radius-control); }
.security-note { border-radius: var(--radius-control); }

/* Focus, selection and reduced visual noise ------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--dig-color__utility__focus-ring);
  outline-offset: 2px;
}
.item-card,
.item-card *,
.primary-btn,
.ghost-btn,
.secondary-btn,
.danger-btn,
.new-button,
.icon-btn,
.side-nav a {
  filter: none;
}

@media (max-width: 1100px) {
  :root,
  html[data-theme="light"],
  html[data-theme="dark"] { --sidebar-width: 240px; }
  .content-wrap { padding-inline: 24px; }
  .items-grid:not(.is-list) { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
}

@media (max-width: 840px) {
  .sidebar {
    width: min(300px, 88vw);
    border-left: 0;
  }
  .main-area { margin-right: 0; }
  .topbar { min-height: 60px; padding-inline: 12px; }
  .content-wrap { padding: 22px 14px 44px; }
  .browser-head {
    align-items: flex-start;
    padding-bottom: 14px;
  }
  .items-grid:not(.is-list) { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
}

@media (max-width: 640px) {
  .browser-head { gap: 14px; }
  .browser-title h1,
  .page-head h1 { font-size: 22px; }
  .browser-actions { width: 100%; }
  .items-grid:not(.is-list) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 8px;
  }
  .items-grid:not(.is-list) .item-card { min-height: 188px; }
  .items-grid:not(.is-list) .file-icon { height: 112px; }
  .dialog-content:not(.dialog-content--image-preview) {
    width: 100%;
    padding: 20px;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  }
  .image-preview__viewer { grid-template-columns: 38px minmax(0, 1fr) 38px; }
  .image-preview__footer { grid-template-columns: 1fr; }
}

/* Multi-selection and internal move --------------------------------------- */
.selection-toolbar[hidden] { display: none !important; }
.selection-toolbar {
  position: sticky;
  top: 76px;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  margin: -6px 0 18px;
  padding: 9px 12px;
  border: 1px solid var(--dig-color__selection__base);
  border-radius: 8px;
  background: var(--dig-color__selection__surface);
  color: var(--dig-color__selection__on-surface);
  box-shadow: 0 8px 24px var(--dig-color__shadow__elevated);
}
.selection-toolbar__summary,
.selection-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.selection-toolbar__summary strong { font-size: 12px; white-space: nowrap; }
.selection-toolbar__hint {
  overflow: hidden;
  color: var(--dig-color__text__subtle);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selection-toolbar__check {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--dig-color__selection__base);
  color: var(--dig-color__selection__on-base);
}
.selection-toolbar__check .hgi { font-size: 17px; }
.selection-toolbar__actions form { margin: 0; }
.selection-action {
  min-height: 36px;
  padding-inline: 12px;
  font-size: 10px;
}
.selection-toolbar__clear { width: 36px; height: 36px; flex: 0 0 36px; }

.item-card[data-selectable-item] {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.item-card[data-selectable-item] .item-main { touch-action: manipulation; }
.item-select-control {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--dig-color__border__base);
  border-radius: 6px;
  background: var(--dig-color__background__raised);
  color: transparent;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 2px 8px var(--dig-color__shadow__elevated);
  transition: opacity 120ms ease, border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.item-select-control span,
.item-select-control .hgi { pointer-events: none; }
.item-select-control .hgi { font-size: 15px; }
.item-card:hover .item-select-control,
.item-card:focus-within .item-select-control,
.item-card.is-selected .item-select-control,
.has-item-selection .item-select-control { opacity: 1; }
.item-card.is-selected .item-select-control {
  border-color: var(--dig-color__selection__base);
  background: var(--dig-color__selection__base);
  color: var(--dig-color__selection__on-base);
}
.item-card.is-selected {
  border-color: var(--dig-color__selection__base) !important;
  background: var(--dig-color__selection__surface) !important;
  box-shadow: inset 0 0 0 1px var(--dig-color__selection__base);
}
.item-card.is-selected .item-copy strong { color: var(--dig-color__selection__on-surface); }
.item-card.is-drag-source { opacity: .48; }
.item-card--folder.is-drop-target {
  border-color: var(--dig-color__primary__base) !important;
  background: var(--dig-color__primary__surface) !important;
  box-shadow: inset 0 0 0 2px var(--dig-color__primary__base);
}
.item-card--folder.is-drop-target .file-icon {
  border-color: var(--dig-color__primary__base);
  background: var(--dig-color__folder__inside);
}
.item-card--folder.is-drop-invalid {
  border-color: var(--dig-color__alert__base) !important;
  background: var(--dig-color__alert__surface) !important;
  cursor: not-allowed;
}
.is-dragging-items .item-card--folder:not(.is-selected) { cursor: copy; }
.items-grid.is-moving-items { opacity: .62; pointer-events: none; }
.drag-count-badge {
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 9999;
  min-width: 82px;
  padding: 8px 12px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 8px;
  background: var(--dig-color__background__raised);
  color: var(--dig-color__text__base);
  box-shadow: 0 8px 24px #0003;
  font: 600 11px/1.4 Vazirmatn, sans-serif;
  text-align: center;
}
.move-dialog__notice {
  margin: -4px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 8px;
  background: var(--dig-color__background__subtle);
  color: var(--dig-color__text__subtle);
  font-size: 10px;
  line-height: 1.8;
}

.items-grid.is-list .item-card[data-selectable-item] { padding-right: 50px; }
.items-grid.is-list .item-select-control {
  top: 50%;
  right: 10px;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
}
.items-grid.is-list .item-card.is-selected {
  border-bottom-color: var(--dig-color__selection__base);
  box-shadow: inset 3px 0 0 var(--dig-color__selection__base);
}

@media (pointer: coarse) {
  .item-card[data-selectable-item] { -webkit-touch-callout: none; }
  .has-item-selection .item-select-control,
  .item-card.is-selected .item-select-control { opacity: 1; }
}

@media (max-width: 640px) {
  .selection-toolbar {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    z-index: 80;
    min-height: 62px;
    margin: 0;
    padding: 9px 10px;
    box-shadow: 0 12px 36px #0004;
  }
  .selection-toolbar__hint { display: none; }
  .selection-toolbar__summary strong { font-size: 10px; }
  .selection-toolbar__actions { gap: 5px; }
  .selection-action { min-height: 38px; padding-inline: 9px; }
  .selection-action span { display: none; }
  .selection-action .hgi { font-size: 18px; }
  .item-select-control { top: 8px; right: 8px; opacity: 0; }
  .items-grid.is-list .item-card[data-selectable-item] { padding-right: 46px; }
}


/* Selection interaction refinement (v1.6.1) ------------------------------- */
.item-select-control,
.selection-toolbar__check {
  display: none !important;
}

.items-grid.is-list .item-card[data-selectable-item] {
  padding-right: 14px;
}

.selection-toolbar .danger-btn {
  border: 1px solid var(--dig-color__alert__base);
  background: var(--dig-color__alert__surface);
  color: var(--dig-color__alert__on-surface);
}

.selection-toolbar .danger-btn:hover,
.selection-toolbar .danger-btn:focus-visible {
  border-color: var(--dig-color__alert__base--state-1);
  background: var(--dig-color__alert__surface--state-1);
  color: var(--dig-color__alert__on-surface);
}

.selection-marquee {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  border: 1px solid var(--dig-color__selection__base);
  border-radius: 2px;
  background: color-mix(in srgb, var(--dig-color__selection__base) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dig-color__selection__base) 12%, transparent);
}

.selection-marquee[hidden] { display: none !important; }

body.is-marquee-selecting,
body.is-marquee-selecting * {
  cursor: crosshair !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.menu-popover [data-item-menu-select][aria-pressed="true"] {
  background: var(--dig-color__selection__surface);
  color: var(--dig-color__selection__on-surface);
}

.menu-popover [data-item-menu-select][aria-pressed="true"] .hgi {
  color: var(--dig-color__selection__base);
}

@media (max-width: 640px) {
  .items-grid.is-list .item-card[data-selectable-item] {
    padding-right: 12px;
  }
}

/* Public sharing, full-height browser and unified alert actions (v1.7.0) ---- */
.main-area {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.topbar { flex: 0 0 auto; }
.content-wrap {
  flex: 1 1 auto;
  display: flex;
  min-height: calc(100dvh - 72px);
}
.content-wrap > [data-browser-fragment] {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.browser {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 100%;
}
.items-grid {
  flex: 1 1 auto;
  align-content: start;
  min-height: max(260px, calc(100dvh - 330px));
}

/* The image viewer is a dialog too: keep the same visible panel radius. */
.dialog-container--preview { padding: 16px; }
.dialog-content--image-preview {
  width: min(1380px, calc(100vw - 32px));
  height: min(92dvh, 920px);
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel, 12px);
  overflow: hidden;
  box-shadow: 0 18px 56px #00000038;
}

/* One alert treatment for confirm dialogs, bulk actions and destructive CTAs. */
.danger-btn,
.selection-toolbar .danger-btn,
.dialog-content--confirm .danger-btn {
  border: 1px solid var(--dig-color__alert__base);
  background: var(--dig-color__alert__surface);
  color: var(--dig-color__alert__on-surface);
  box-shadow: none;
  filter: none;
  transform: none;
}
.danger-btn:hover,
.danger-btn:focus-visible,
.selection-toolbar .danger-btn:hover,
.selection-toolbar .danger-btn:focus-visible,
.dialog-content--confirm .danger-btn:hover,
.dialog-content--confirm .danger-btn:focus-visible {
  border-color: var(--dig-color__alert__base--state-1);
  background: var(--dig-color__alert__surface--state-1);
  color: var(--dig-color__alert__on-surface);
  box-shadow: none;
  filter: none;
  transform: none;
}
.danger-btn:active,
.dialog-content--confirm .danger-btn:active {
  border-color: var(--dig-color__alert__base--state-2);
  background: var(--dig-color__alert__surface--state-2);
}
.menu-popover .danger-action {
  color: var(--dig-color__alert__on-surface);
}
.menu-popover .danger-action:hover,
.menu-popover .danger-action:focus-visible {
  background: var(--dig-color__alert__surface);
  color: var(--dig-color__alert__on-surface);
}
.dialog__title-icon--danger {
  border-color: color-mix(in srgb, var(--dig-color__alert__base) 45%, var(--dig-color__border__subtle));
  background: var(--dig-color__alert__surface);
  color: var(--dig-color__alert__on-surface);
}
.dialog__eyebrow--danger { color: var(--dig-color__alert__on-surface); }

.info-banner--public {
  border-color: color-mix(in srgb, var(--dig-color__primary__base) 34%, var(--dig-color__border__subtle));
  background: var(--dig-color__primary__surface);
}
.info-banner--public .info-banner__icon { color: var(--dig-color__primary__on-surface); }
.item-status-badges {
  position: absolute;
  left: 51px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 4;
}
.item-status-badges .item-star-badge,
.item-status-badges .item-public-badge {
  position: static;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: var(--radius-control, 8px);
  box-shadow: none;
}
.item-public-badge {
  border: 1px solid color-mix(in srgb, var(--dig-color__primary__base) 36%, var(--dig-color__border__subtle));
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.item-public-badge .hgi { font-size: 14px; }
.items-grid.is-list .item-status-badges {
  position: static;
  grid-column: 5;
  display: flex;
  justify-content: flex-end;
}
.items-grid.is-list .item-status-badges .item-star-badge,
.items-grid.is-list .item-status-badges .item-public-badge {
  width: 24px;
  height: 24px;
}

/* Public link landing page. */
.public-share-page { background: var(--dig-color__background__subtle); }
.public-share-shell {
  width: min(1120px, calc(100% - 32px));
  min-height: 100dvh;
  margin: 0 auto;
  padding: 24px 0 44px;
}
.public-share-topbar {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.public-share-brand img { display: block; width: 132px; }
.public-share-card {
  overflow: hidden;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel, 12px);
  background: var(--dig-color__background__base);
  box-shadow: 0 14px 44px #00000012;
}
.public-share-card__meta {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
}
.public-share-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
  font-size: 10px;
  font-weight: 700;
}
.public-share-card__meta h1 {
  margin: 10px 0 2px;
  overflow-wrap: anywhere;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.45;
}
.public-share-card__meta p { margin: 0; color: var(--dig-color__text__subtle); font-size: 11px; }
.public-share-preview {
  min-height: 440px;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--dig-color__background__sunken);
}
.public-share-preview img,
.public-share-preview video {
  max-width: 100%;
  max-height: 70dvh;
  border-radius: var(--radius-control, 8px);
  object-fit: contain;
}
.public-share-preview iframe {
  width: 100%;
  height: 70dvh;
  border: 0;
  border-radius: var(--radius-control, 8px);
  background: #fff;
}
.public-share-audio,
.public-share-file-icon {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 34px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel, 12px);
  background: var(--dig-color__background__raised);
  text-align: center;
}
.public-share-audio > .hgi,
.public-share-file-icon > .hgi { font-size: 64px; color: var(--dig-color__primary__base); }
.public-share-audio audio { width: 100%; }
.public-share-file-icon strong { max-width: 100%; overflow-wrap: anywhere; }
.public-share-file-icon span { color: var(--dig-color__text__subtle); font-size: 11px; }
.public-share-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--dig-color__border__subtle);
}
.public-share-note { margin: 14px 2px 0; color: var(--dig-color__text__subtle); font-size: 10px; text-align: center; }

@media (max-width: 840px) {
  .content-wrap { min-height: calc(100dvh - 60px); }
  .items-grid { min-height: max(240px, calc(100dvh - 300px)); }
}
@media (max-width: 640px) {
  .dialog-container--preview { padding: 12px 0 0; align-items: flex-end; }
  .dialog-content--image-preview {
    width: 100%;
    height: 94dvh;
    max-height: 94dvh;
    border-radius: var(--radius-panel, 12px) var(--radius-panel, 12px) 0 0;
  }
  .public-share-shell { width: min(100% - 20px, 1120px); padding-top: 10px; }
  .public-share-topbar { min-height: 54px; margin-bottom: 10px; }
  .public-share-topbar .ghost-btn span { display: none; }
  .public-share-preview { min-height: 340px; padding: 12px; }
  .public-share-preview iframe { height: 62dvh; }
  .public-share-card__meta { padding: 18px 16px 14px; }
  .public-share-card__actions { padding: 12px 16px; }
  .items-grid.is-list .item-status-badges { grid-column: 2; }
}

/* UpHub 1.7.1: public header, account security and status alignment -------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.public-share-page {
  min-height: 100dvh;
  background: var(--dig-color__background__subtle);
}
.public-share-header {
  position: relative;
  z-index: 20;
  width: 100%;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__base);
}
.public-share-header__inner {
  width: min(1120px, calc(100% - 32px));
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-inline: auto;
}
.public-share-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.public-share-brand img {
  display: block;
  width: 128px;
  height: auto;
}
.public-share-topbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.public-share-back {
  min-height: 40px;
  padding-inline: 13px;
}
.public-share-theme-toggle {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}
.public-share-shell {
  width: min(1120px, calc(100% - 32px));
  min-height: calc(100dvh - 69px);
  margin-inline: auto;
  padding: 28px 0 44px;
}

/* The public/star indicators share the exact same 32px action baseline. */
.item-status-badges {
  left: 44px;
  bottom: 8px;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 0;
}
.item-status-badges .item-star-badge,
.item-status-badges .item-public-badge {
  position: static;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.item-status-badges .item-star-badge {
  color: var(--dig-color__accent__yellow);
}
.item-status-badges .item-public-badge {
  color: var(--dig-color__primary__base);
}
.item-status-badges .item-star-badge:hover {
  background: var(--dig-color__warning__surface);
  color: var(--dig-color__warning__on-surface);
}
.item-status-badges .item-public-badge:hover {
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.item-status-badges .hgi {
  display: block;
  width: 16px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}
.item-menu {
  left: 8px;
  bottom: 8px;
}
.item-menu summary {
  width: 32px;
  height: 32px;
}
.browser:has(.items-grid.is-list) .items-table-head,
.items-grid.is-list .item-card {
  grid-template-columns: minmax(260px, 1.7fr) .55fr .55fr .85fr 64px 40px;
}
.items-grid.is-list .item-status-badges {
  position: static;
  grid-column: 5;
  min-height: 28px;
  justify-content: flex-end;
  align-self: center;
}
.items-grid.is-list .item-status-badges .item-star-badge,
.items-grid.is-list .item-status-badges .item-public-badge {
  width: 28px;
  height: 28px;
}
.menu-popover .public-share-revoke-action,
.menu-popover .public-share-revoke-action .hgi {
  color: var(--dig-color__alert__on-surface);
}
.menu-popover .public-share-revoke-action:hover,
.menu-popover .public-share-revoke-action:focus-visible {
  background: var(--dig-color__alert__surface);
  color: var(--dig-color__alert__on-surface);
}

/* Security page: isolate it from browser-card legacy selectors. */
.settings-page {
  width: min(1120px, 100%);
  margin-inline: auto;
}
.settings-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
}
.settings-page__header h1 {
  margin: 1px 0 0;
  color: var(--dig-color__text__base);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.45;
}
.settings-page__header p {
  margin: 3px 0 0;
  color: var(--dig-color__text__subtle);
  font-size: 11px;
  line-height: 1.8;
}
.settings-grid {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
  margin: 0;
}
.settings-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
  box-shadow: none;
}
.settings-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.settings-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-control);
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.settings-icon .hgi { font-size: 21px; }
.settings-card__head h2 {
  margin: 0;
  color: var(--dig-color__text__base);
  font-size: 15px;
  line-height: 1.5;
}
.settings-card__head p {
  margin: 2px 0 0;
  color: var(--dig-color__text__subtle);
  font-size: 10px;
  line-height: 1.75;
}
.settings-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: 0;
}
.settings-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.radio-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.radio-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 11px 12px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-control);
  background: var(--dig-color__background__base);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.radio-card:hover {
  border-color: var(--dig-color__border__base);
  background: var(--dig-color__background__subtle);
}
.radio-card:has(input:focus-visible) {
  outline: 3px solid var(--dig-color__utility__focus-ring);
  outline-offset: 1px;
}
.radio-card:has(input:checked) {
  border-color: var(--dig-color__primary__base);
  background: var(--dig-color__primary__surface);
}
.radio-card input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--dig-color__primary__base);
}
.radio-card__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.settings-page .radio-card strong {
  color: var(--dig-color__text__base);
  font-size: 11px;
  line-height: 1.6;
}
.settings-page .radio-card small {
  color: var(--dig-color__text__subtle);
  font-size: 9px;
  line-height: 1.7;
}
.radio-card__mark {
  width: 8px;
  height: 8px;
  justify-self: end;
  border-radius: 50%;
  background: var(--dig-color__border__base);
}
.radio-card:has(input:checked) .radio-card__mark {
  background: var(--dig-color__primary__base);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dig-color__primary__base) 16%, transparent);
}
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--dig-color__text__base);
  font-size: 10px;
  font-weight: 600;
}
.settings-field + .settings-field { margin-top: 13px; }
.settings-field input {
  width: 100%;
  min-height: 44px;
  padding-inline: 12px;
  border: 1px solid var(--dig-color__border__base);
  border-radius: var(--radius-control);
  background: var(--dig-color__background__base);
  color: var(--dig-color__text__base);
  font: inherit;
  font-size: 12px;
  outline: 0;
}
.settings-field input:hover { border-color: var(--dig-color__border__bold); }
.settings-field input:focus {
  border-color: var(--dig-color__primary__base);
  box-shadow: 0 0 0 3px var(--dig-color__utility__focus-ring);
}
.field-help,
.settings-field .helptext {
  color: var(--dig-color__text__subtle);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.7;
}
.field-help ul,
.settings-field .helptext ul {
  margin: 0;
  padding-inline-start: 16px;
}
.settings-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 18px;
}

@media (max-width: 840px) {
  .settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .public-share-header__inner {
    width: min(100% - 20px, 1120px);
    min-height: 58px;
    gap: 10px;
  }
  .public-share-brand img { width: 108px; }
  .public-share-topbar__actions { gap: 5px; }
  .public-share-back {
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
  }
  .public-share-back span { display: none; }
  .public-share-shell {
    width: min(100% - 20px, 1120px);
    min-height: calc(100dvh - 59px);
    padding-top: 12px;
  }
  .settings-page__header {
    margin-bottom: 16px;
    padding-bottom: 14px;
  }
  .settings-page__header h1 { font-size: 22px; }
  .settings-card { padding: 17px; }
  .settings-card__head { align-items: flex-start; }
  .browser:has(.items-grid.is-list) .items-table-head { display: none; }
  .items-grid.is-list .item-card {
    grid-template-columns: minmax(0, 1fr) 60px 38px;
  }
  .items-grid.is-list .item-status-badges { grid-column: 2; }
  .items-grid.is-list .item-menu { grid-column: 3; }
}

/* --------------------------------------------------------------------------
   UpHub 1.7.4 — Authentication alignment and localized registration form
   -------------------------------------------------------------------------- */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.auth-brand img {
  display: block;
  width: min(190px, 74%);
  height: auto;
  margin-inline: auto;
}
.auth-brand p {
  width: 100%;
  text-align: center;
}
.auth-secondary-action {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 22px;
}
.registration-form .field-label {
  display: block;
  color: var(--dig-color__text__base);
  text-align: right;
}
.registration-form .help-text,
.registration-form .field-error {
  display: block;
  text-align: right;
}
.auth-layout--single .auth-box,
.auth-layout--single .auth-heading {
  text-align: center;
}
.auth-layout--single .registration-form {
  text-align: right;
}

@media (max-width: 640px) {
  .auth-brand img { width: min(174px, 72%); }
}

/* --------------------------------------------------------------------------
   UpHub 1.7.6 — Theme-specific file and folder card surfaces
   -------------------------------------------------------------------------- */
.item-card,
.item-card:hover:not(.is-drop-target):not(.is-drop-invalid),
.item-card:focus:not(.is-drop-target):not(.is-drop-invalid),
.item-card:focus-visible:not(.is-drop-target):not(.is-drop-invalid),
.item-card:focus-within:not(.is-drop-target):not(.is-drop-invalid),
.item-card.is-selected:not(.is-drop-target):not(.is-drop-invalid),
.items-grid:not(.is-list) .item-card,
.items-grid:not(.is-list) .item-card:hover:not(.is-drop-target):not(.is-drop-invalid),
.items-grid:not(.is-list) .item-card:focus-within:not(.is-drop-target):not(.is-drop-invalid),
.items-grid:not(.is-list) .item-card.is-selected:not(.is-drop-target):not(.is-drop-invalid),
.items-grid.is-list .item-card,
.items-grid.is-list .item-card:hover:not(.is-drop-target):not(.is-drop-invalid),
.items-grid.is-list .item-card:focus-within:not(.is-drop-target):not(.is-drop-invalid),
.items-grid.is-list .item-card.is-selected:not(.is-drop-target):not(.is-drop-invalid) {
  background: #f6f6f7 !important;
}

html[data-theme="dark"] .item-card:not(.is-drop-target):not(.is-drop-invalid),
html[data-theme="dark"] .item-card:hover:not(.is-drop-target):not(.is-drop-invalid),
html[data-theme="dark"] .item-card:focus:not(.is-drop-target):not(.is-drop-invalid),
html[data-theme="dark"] .item-card:focus-visible:not(.is-drop-target):not(.is-drop-invalid),
html[data-theme="dark"] .item-card:focus-within:not(.is-drop-target):not(.is-drop-invalid),
html[data-theme="dark"] .item-card.is-selected:not(.is-drop-target):not(.is-drop-invalid),
html[data-theme="dark"] .items-grid:not(.is-list) .item-card:not(.is-drop-target):not(.is-drop-invalid),
html[data-theme="dark"] .items-grid.is-list .item-card:not(.is-drop-target):not(.is-drop-invalid) {
  background: #2d2b29 !important;
}

/* --------------------------------------------------------------------------
   UpHub 1.7.7 — Video thumbnails, video preview and UTF-8 text editor
   -------------------------------------------------------------------------- */
.file-icon--video-thumbnail {
  position: relative;
  overflow: hidden;
  background: #111;
}
.file-icon--video-thumbnail .video-thumbnail {
  background: #111;
  object-fit: cover;
}
.video-thumbnail__play {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 3;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #ffffff80;
  border-radius: 999px;
  background: #111111b8;
  color: #fff;
  box-shadow: 0 5px 18px #00000045;
  translate: -50% -50%;
  pointer-events: none;
  backdrop-filter: blur(5px);
}
.video-thumbnail__play .hgi { font-size: 18px !important; }
.file-icon--video-thumbnail.is-broken .video-thumbnail__play { display: none; }
.items-grid.is-list .file-icon--video-thumbnail .video-thumbnail__play {
  width: 26px;
  height: 26px;
}
.items-grid.is-list .file-icon--video-thumbnail .video-thumbnail__play .hgi {
  font-size: 13px !important;
}

.dialog-container--media-preview,
.dialog-container--text-editor {
  padding: 16px;
}
.dialog-content.dialog-content--video-preview,
.dialog-content.dialog-content--text-editor {
  max-height: none;
  overflow: hidden;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel, 12px);
  background: var(--dig-color__background__base);
  box-shadow: 0 18px 56px #00000038;
}
.dialog-content.dialog-content--video-preview {
  width: min(1120px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
}
.video-preview__head,
.text-editor__head {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__raised);
}
.video-preview__identity,
.text-editor__identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.video-preview__icon,
.text-editor__icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: var(--radius-control, 8px);
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.video-preview__identity h2,
.text-editor__identity h2 {
  max-width: min(66vw, 760px);
  margin: 1px 0 0;
  overflow: hidden;
  color: var(--dig-color__text__base);
  font-size: 14px;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-preview__meta,
.text-editor__meta {
  display: block;
  color: var(--dig-color__text__subtle);
  font-size: 9px;
}
.video-preview__toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
}
.video-preview__stage {
  position: relative;
  min-height: min(62dvh, 620px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #111;
}
.video-preview__stage video {
  display: block;
  width: 100%;
  max-height: min(76dvh, 720px);
  background: #111;
  object-fit: contain;
}
.video-preview__loader,
.video-preview__error {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: #111;
  color: #fff;
  text-align: center;
}
.video-preview__error .hgi { font-size: 38px; }
.video-preview__error span { color: #ffffffb8; font-size: 10px; }
.video-preview__stage.is-ready .video-preview__loader,
.video-preview__stage.is-ready .video-preview__error { display: none; }

.dialog-content.dialog-content--text-editor {
  width: min(1220px, calc(100vw - 32px));
  height: min(90dvh, 900px);
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.text-editor__form {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--dig-color__background__base);
}
.text-editor__workspace {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  direction: ltr;
  overflow: hidden;
  background: var(--dig-color__background__base);
}
.text-editor__line-numbers {
  min-height: 0;
  overflow: hidden;
  padding: 18px 10px 18px 8px;
  border-inline-end: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__subtle);
  color: var(--dig-color__text__subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.85;
  text-align: end;
  white-space: pre;
  user-select: none;
  pointer-events: none;
  scrollbar-width: none;
}
.text-editor__line-numbers::-webkit-scrollbar { display: none; }
.text-editor__form textarea {
  width: 100%;
  min-width: 0;
  min-height: 0;
  resize: none;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: var(--dig-color__background__base);
  color: var(--dig-color__text__base);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.85;
  tab-size: 2;
  unicode-bidi: plaintext;
  caret-color: var(--dig-color__primary__base);
  white-space: pre;
  overflow: auto;
}
.text-editor__form textarea:focus,
.text-editor__form textarea:focus-visible {
  outline: 0;
  box-shadow: none;
}
.text-editor__form textarea:disabled { opacity: 0; }
.text-editor__loading {
  position: absolute;
  inset: 0 0 54px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--dig-color__background__base);
  color: var(--dig-color__text__subtle);
  font-size: 11px;
}
.text-editor__status {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 16px;
  border-top: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__subtle);
  color: var(--dig-color__text__subtle);
  font-size: 9px;
}
.text-editor__actions {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 9px 16px;
  border-top: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__raised);
}

@media (max-width: 640px) {
  .dialog-container--media-preview,
  .dialog-container--text-editor {
    padding: 10px 0 0;
    align-items: flex-end;
  }
  .dialog-content.dialog-content--video-preview,
  .dialog-content.dialog-content--text-editor {
    width: 100%;
    max-width: none;
    max-height: 94dvh;
    border-radius: var(--radius-panel, 12px) var(--radius-panel, 12px) 0 0;
  }
  .dialog-content.dialog-content--text-editor { height: 94dvh; }
  .video-preview__head,
  .text-editor__head { min-height: 62px; padding: 9px 11px; }
  .video-preview__icon,
  .text-editor__icon { display: none; }
  .video-preview__identity h2,
  .text-editor__identity h2 { max-width: 62vw; font-size: 12px; }
  .video-preview__stage { min-height: 45dvh; }
  .text-editor__workspace { grid-template-columns: 44px minmax(0, 1fr); }
  .text-editor__line-numbers { padding: 14px 8px 14px 6px; font-size: 12px; }
  .text-editor__form textarea { padding: 14px 12px; font-size: 12px; }
  .text-editor__actions { padding-inline: 11px; }
}

/* --------------------------------------------------------------------------
   UpHub 1.7.8 — unified image preview, reliable text loading and account menu
   -------------------------------------------------------------------------- */

/* The image viewer now follows the same panel/header language as video/text. */
.dialog-container--preview {
  padding: 16px;
}
.dialog-content.dialog-content--image-preview {
  width: min(1220px, calc(100vw - 32px));
  height: min(90dvh, 900px);
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel, 12px);
  background: var(--dig-color__background__base);
  box-shadow: 0 18px 56px #00000038;
}
.image-preview__head {
  min-height: 70px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__raised);
}
.image-preview__identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.image-preview__identity > div { min-width: 0; }
.image-preview__icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: var(--radius-control, 8px);
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.image-preview__icon .hgi { font-size: 20px; }
.image-preview__head .dialog__eyebrow {
  display: block;
  margin: 0;
  color: var(--dig-color__text__subtle);
  font-size: 9px;
  line-height: 1.4;
}
.image-preview__identity h2 {
  max-width: min(58vw, 690px);
  margin: 1px 0 0;
  overflow: hidden;
  color: var(--dig-color__text__base);
  font-size: 14px;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-preview__counter.image-preview__meta {
  display: block;
  margin: 0;
  color: var(--dig-color__text__subtle);
  font-size: 9px;
}
.image-preview__toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}
.image-preview__toolbar .icon-btn,
.image-preview__toolbar .preview-zoom-value {
  height: 36px;
  border-radius: var(--radius-control, 8px);
}
.image-preview__toolbar .icon-btn { width: 36px; }
.image-preview__toolbar .preview-zoom-value { min-width: 60px; }
.image-preview__viewer {
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  background: var(--dig-color__background__sunken);
}
.image-preview__stage {
  min-height: 0;
  padding: 18px;
  background: var(--dig-color__background__sunken);
}
.image-preview__canvas { background: var(--dig-color__background__sunken); }
.image-preview__canvas img { max-height: calc(90dvh - 238px); }
.image-preview__footer {
  min-height: 88px;
  flex: 0 0 auto;
  grid-template-columns: minmax(200px, .55fr) minmax(0, 1.45fr);
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__raised);
}

/* Author display declarations must never override the native hidden state. */
.text-editor__loading[hidden],
.video-preview__loader[hidden],
.video-preview__error[hidden],
.image-preview__error[hidden] {
  display: none !important;
}
.text-editor__loading.is-error {
  color: var(--dig-color__alert__on-surface);
  background: var(--dig-color__alert__surface);
}
.text-editor__loading.is-error .image-preview__spinner {
  background: var(--dig-color__alert__base);
  animation: none;
}

/* Account popover opens above the footer trigger and mirrors item menus. */
.sidebar__footer {
  position: relative;
  z-index: 55;
}
.account-menu {
  position: relative;
  width: 100%;
  margin: 0;
}
.account-menu > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-control, 8px);
  color: var(--dig-color__text__base);
  cursor: pointer;
  list-style: none;
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover,
.account-menu[open] > summary {
  background: var(--dig-color__opacity__surface--state-1);
}
.account-menu > summary .user-copy { flex: 1 1 auto; }
.account-menu__chevron {
  flex: 0 0 auto;
  color: var(--dig-color__text__subtle);
  font-size: 17px !important;
}
.account-menu[open] .account-menu__chevron { color: var(--dig-color__text__base); }
.account-menu__popover.menu-popover {
  top: auto;
  right: 0;
  bottom: calc(100% + 9px);
  left: 0;
  width: 100%;
  min-width: 206px;
  padding: 7px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel, 12px);
  background: var(--dig-color__background__raised);
  box-shadow: 0 14px 38px #0000002e;
}
html[data-theme="dark"] .account-menu__popover.menu-popover {
  box-shadow: 0 16px 42px #000b;
}
.account-menu__profile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px 8px;
}
.account-menu__profile .user-copy { flex: 1 1 auto; }
.account-menu__divider {
  height: 1px;
  margin: 4px 5px;
  background: var(--dig-color__border__subtle);
}
.account-menu__popover form { margin: 0; }
.account-menu__popover .account-menu__logout,
.account-menu__popover .account-menu__logout .hgi {
  color: var(--dig-color__alert__on-surface);
}
.account-menu__popover .account-menu__logout:hover,
.account-menu__popover .account-menu__logout:focus-visible {
  background: var(--dig-color__alert__surface);
}

@media (max-width: 640px) {
  .dialog-container--preview {
    align-items: flex-end;
    padding: 10px 0 0;
  }
  .dialog-content.dialog-content--image-preview {
    width: 100%;
    height: 94dvh;
    border-radius: var(--radius-panel, 12px) var(--radius-panel, 12px) 0 0;
  }
  .image-preview__head {
    min-height: 62px;
    gap: 8px;
    padding: 9px 10px;
  }
  .image-preview__icon { display: none; }
  .image-preview__identity h2 { max-width: 42vw; font-size: 12px; }
  .image-preview__toolbar { gap: 2px; }
  .image-preview__toolbar .icon-btn { width: 32px; height: 32px; }
  .image-preview__toolbar .preview-zoom-value { min-width: 49px; height: 32px; padding-inline: 6px; font-size: 9px; }
  .image-preview__viewer { grid-template-columns: 36px minmax(0, 1fr) 36px; }
  .image-preview__nav { width: 32px; height: 54px; }
  .image-preview__stage { padding: 10px; }
  .image-preview__canvas img { max-height: calc(94dvh - 215px); }
  .image-preview__footer {
    min-height: 78px;
    grid-template-columns: 1fr;
    padding: 8px 10px;
  }
  .image-preview__footer .image-preview__meta { display: none; }
  .image-preview__thumb { width: 58px; height: 48px; flex-basis: 58px; }
  .account-menu__popover.menu-popover { min-width: 220px; }
}


/* --------------------------------------------------------------------------
   UpHub 1.7.9 — neutral text focus and synchronized line-number gutter
   -------------------------------------------------------------------------- */
.text-editor__workspace:focus-within {
  outline: 0;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   UpHub 1.8.0 — profile management, private avatars and help center
   -------------------------------------------------------------------------- */
.avatar {
  width: var(--avatar-size, 34px);
  height: var(--avatar-size, 34px);
  flex: 0 0 var(--avatar-size, 34px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.avatar > span { line-height: 1; }
.avatar--image {
  background: var(--dig-color__background__subtle);
  color: transparent;
}
.avatar--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.account-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
}
.account-page-head h1 {
  margin: 2px 0 0;
  color: var(--dig-color__text__base);
  font-size: 27px;
  font-weight: 760;
  line-height: 1.45;
}
.account-page-head p {
  max-width: 680px;
  margin: 4px 0 0;
  color: var(--dig-color__text__subtle);
  font-size: 11px;
  line-height: 1.9;
}

.profile-page { width: min(1120px, 100%); }
.profile-layout {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.65fr);
  align-items: start;
  gap: 20px;
}
.profile-summary-card,
.profile-form-card {
  min-width: 0;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel, 12px);
  background: var(--dig-color__background__raised);
  box-shadow: none;
}
.profile-summary-card {
  position: sticky;
  top: 88px;
  overflow: hidden;
}
.profile-summary-card__cover {
  position: relative;
  height: 118px;
  overflow: hidden;
  background: linear-gradient(135deg, #b4d1ff 0%, #75aaff 58%, #3dd3ee 100%);
}
.profile-summary-card__cover span {
  position: absolute;
  border: 1px solid #ffffff7a;
  border-radius: 50%;
}
.profile-summary-card__cover span:nth-child(1) { width: 92px; height: 92px; top: -24px; left: -12px; }
.profile-summary-card__cover span:nth-child(2) { width: 52px; height: 52px; right: 24px; bottom: -18px; }
.profile-summary-card__cover span:nth-child(3) { width: 20px; height: 20px; right: 34%; top: 20px; background: #ffffff38; }
.profile-summary-card__body {
  position: relative;
  padding: 0 20px 22px;
  text-align: center;
}
.profile-avatar-preview {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  margin: -53px auto 13px;
  overflow: hidden;
  border: 5px solid var(--dig-color__background__raised);
  border-radius: 50%;
  background: var(--dig-color__identity__cyan);
  color: var(--dig-color__identity__on-cyan);
  font-size: 29px;
  font-weight: 800;
  box-shadow: 0 8px 24px #0000001f;
}
.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.profile-summary-card h2 {
  margin: 0;
  color: var(--dig-color__text__base);
  font-size: 18px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.profile-summary-card__body > p {
  margin: 2px 0 18px;
  color: var(--dig-color__text__subtle);
  font-size: 10px;
}
.profile-facts {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--dig-color__border__subtle);
  text-align: start;
}
.profile-facts > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.profile-facts dt {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dig-color__text__subtle);
  font-size: 9px;
}
.profile-facts dt .hgi { font-size: 15px; }
.profile-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--dig-color__text__base);
  font-size: 9px;
  font-weight: 650;
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-form-card {
  padding: 24px;
}
.profile-form-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.profile-form-card__head h2 {
  margin: 0;
  color: var(--dig-color__text__base);
  font-size: 16px;
}
.profile-form-card__head p {
  margin: 3px 0 0;
  color: var(--dig-color__text__subtle);
  font-size: 10px;
  line-height: 1.75;
}
.profile-photo-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-control, 8px);
  background: var(--dig-color__background__subtle);
}
.profile-photo-field__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.profile-photo-field__copy strong {
  color: var(--dig-color__text__base);
  font-size: 11px;
}
.profile-photo-field__copy span {
  margin-top: 3px;
  color: var(--dig-color__text__subtle);
  font-size: 9px;
}
.profile-upload-button {
  position: relative;
  max-width: 230px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  overflow: hidden;
  border: 1px solid var(--dig-color__border__base);
  border-radius: var(--radius-control, 8px);
  background: var(--dig-color__background__raised);
  color: var(--dig-color__text__base);
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}
.profile-upload-button:hover { background: var(--dig-color__opacity__surface--state-1); }
.profile-upload-button .hgi { flex: 0 0 auto; font-size: 17px; }
.profile-upload-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-upload-button input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.profile-upload-button:has(input:focus-visible) {
  outline: 3px solid var(--dig-color__utility__focus-ring);
  outline-offset: 2px;
}
.profile-photo-field__error { grid-column: 1 / -1; }
.profile-remove-option {
  grid-column: 1 / -1;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--dig-color__alert__on-surface);
  font-size: 9px;
  cursor: pointer;
}
.profile-remove-option input { accent-color: var(--dig-color__alert__base); }
.profile-remove-option span { display: inline-flex; align-items: center; gap: 5px; }
.profile-remove-option .hgi { font-size: 14px; }
.profile-fields-grid,
.profile-readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.profile-readonly-grid {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--dig-color__border__subtle);
}
.profile-readonly-grid > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 13px 14px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-control, 8px);
  background: var(--dig-color__background__subtle);
}
.profile-readonly-grid span {
  color: var(--dig-color__text__subtle);
  font-size: 9px;
}
.profile-readonly-grid strong {
  margin-top: 4px;
  color: var(--dig-color__text__base);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.profile-readonly-grid small {
  margin-top: 5px;
  color: var(--dig-color__text__subtle);
  font-size: 8px;
  line-height: 1.7;
}
.profile-form-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--dig-color__border__subtle);
}

.help-page { width: min(1180px, 100%); }
.help-hero {
  position: relative;
  min-height: 310px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr);
  align-items: center;
  gap: 30px;
  overflow: hidden;
  padding: 42px 46px;
  border: 1px solid #75aaff75;
  border-radius: 18px;
  background: linear-gradient(135deg, #f2f7ff 0%, #deebff 55%, #d8f7fb 100%);
  color: #00183e;
}
html[data-theme="dark"] .help-hero {
  border-color: #3080ff66;
  background: linear-gradient(135deg, #142238 0%, #102d52 56%, #123944 100%);
  color: #f2f7ff;
}
.help-hero__content { position: relative; z-index: 2; min-width: 0; }
.help-hero__badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 6px 10px;
  border: 1px solid #0061fe38;
  border-radius: 999px;
  background: #ffffff8f;
  color: #0057e0;
  font-size: 9px;
  font-weight: 700;
}
html[data-theme="dark"] .help-hero__badge { background: #00183e8c; color: #b4d1ff; border-color: #75aaff52; }
.help-hero h1 {
  max-width: 720px;
  margin: 0;
  color: inherit;
  font-size: clamp(28px, 4vw, 43px);
  font-weight: 850;
  line-height: 1.45;
  letter-spacing: -.45px;
}
.help-hero__content > p {
  max-width: 720px;
  margin: 12px 0 0;
  color: #283750;
  font-size: 12px;
  line-height: 2;
}
html[data-theme="dark"] .help-hero__content > p { color: #c9ddff; }
.help-search {
  width: min(650px, 100%);
  min-height: 52px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-inline: 15px;
  border: 1px solid #00183e29;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px #0057e014;
  color: #00183e;
}
.help-search:focus-within { border-color: #0061fe; box-shadow: 0 0 0 3px #3080ff3d, 0 10px 30px #0057e014; }
.help-search .hgi { font-size: 20px; color: #0057e0; }
.help-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1a1918;
  font: inherit;
  font-size: 11px;
}
.help-search input::placeholder { color: #736c64; }
.help-search kbd { border-color: #0000001c; background: #f6f6f7; color: #736c64; }
.help-hero__visual { position: relative; min-height: 230px; }
.help-orbit {
  position: absolute;
  border: 1px solid #0061fe3d;
  border-radius: 50%;
}
.help-orbit--one { width: 210px; height: 210px; inset: 10px auto auto 50%; margin-left: -105px; }
.help-orbit--two { width: 150px; height: 150px; inset: 40px auto auto 50%; margin-left: -75px; border-style: dashed; }
.help-visual-folder {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 118px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: #75aaff;
  color: #00183e;
  box-shadow: 0 22px 50px #0057e02b;
  translate: -50% -50%;
}
.help-visual-folder .hgi { font-size: 55px; }
.help-visual-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #ffffffa8;
  border-radius: 999px;
  background: #fffffff0;
  color: #00183e;
  box-shadow: 0 8px 22px #00183e14;
  font-size: 9px;
  font-weight: 700;
}
.help-visual-chip--upload { top: 14px; right: 8px; }
.help-visual-chip--share { left: 0; top: 88px; }
.help-visual-chip--safe { right: 12px; bottom: 12px; }
html[data-theme="dark"] .help-visual-chip { background: #00183ee8; color: #f2f7ff; border-color: #75aaff5c; }

.help-quick-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 28px;
}
.help-quick-grid a {
  min-width: 0;
  min-height: 126px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel, 12px);
  background: var(--dig-color__background__raised);
  color: var(--dig-color__text__base);
}
.help-quick-grid a:hover { border-color: var(--dig-color__primary__base); background: var(--dig-color__primary__surface); }
.help-quick-grid a > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  border-radius: 8px;
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.help-quick-grid a:hover > span { background: var(--dig-color__primary__base); color: var(--dig-color__primary__on-base); }
.help-quick-grid strong { margin-top: 12px; font-size: 11px; }
.help-quick-grid small { margin-top: 3px; color: var(--dig-color__text__subtle); font-size: 8px; line-height: 1.6; }
.help-layout {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
.help-toc {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel, 12px);
  background: var(--dig-color__background__raised);
}
.help-toc__title {
  margin-bottom: 5px;
  padding: 5px 8px 9px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  color: var(--dig-color__text__base);
  font-size: 10px;
  font-weight: 750;
}
.help-toc > a {
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--dig-color__text__subtle);
  font-size: 9px;
  line-height: 1.55;
}
.help-toc > a:hover { background: var(--dig-color__opacity__surface--state-1); color: var(--dig-color__text__base); }
.help-toc__support {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  padding: 12px;
  border-radius: 8px;
  background: var(--dig-color__background__subtle);
}
.help-toc__support .hgi { margin-bottom: 7px; color: var(--dig-color__primary__base); font-size: 18px; }
.help-toc__support strong { color: var(--dig-color__text__base); font-size: 9px; }
.help-toc__support span { margin-top: 4px; color: var(--dig-color__text__subtle); font-size: 8px; line-height: 1.7; }
.help-content { min-width: 0; }
.help-section {
  scroll-margin-top: 84px;
  margin-bottom: 18px;
  padding: 26px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel, 12px);
  background: var(--dig-color__background__raised);
}
.help-section[hidden],
.help-no-results[hidden] { display: none !important; }
.help-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.help-section__head > span {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
  font-size: 12px;
  font-weight: 800;
}
.help-section__head small { color: var(--dig-color__primary__base); font-size: 8px; font-weight: 700; }
.help-section__head h2 {
  margin: 1px 0 0;
  color: var(--dig-color__text__base);
  font-size: 19px;
  line-height: 1.55;
}
.help-section > p,
.help-section section > p,
.help-section .help-split p {
  color: var(--dig-color__text__subtle);
  font-size: 10px;
  line-height: 2;
}
.help-section h3 { margin: 0; color: var(--dig-color__text__base); font-size: 12px; }
.help-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.help-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 14px;
  border-radius: 9px;
  background: var(--dig-color__background__subtle);
}
.help-steps li > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dig-color__primary__base);
  color: var(--dig-color__primary__on-base);
  font-size: 9px;
  font-weight: 800;
}
.help-steps strong { color: var(--dig-color__text__base); font-size: 10px; }
.help-steps p { margin: 3px 0 0; color: var(--dig-color__text__subtle); font-size: 9px; line-height: 1.8; }
.help-feature-grid,
.help-media-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.help-feature-grid section,
.help-media-cards section {
  padding: 16px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 9px;
  background: var(--dig-color__background__base);
}
.help-feature-grid section > span,
.help-media-cards__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  border-radius: 9px;
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.help-feature-grid .hgi,
.help-media-cards__icon .hgi { font-size: 19px; }
.help-feature-grid section p,
.help-media-cards section p { margin: 6px 0 0; font-size: 9px; line-height: 1.85; }
.help-callout {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--dig-color__primary__base) 25%, transparent);
  border-radius: 9px;
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.help-callout > .hgi { margin-top: 1px; font-size: 20px; }
.help-callout strong { font-size: 10px; }
.help-callout p { margin: 3px 0 0; color: inherit; font-size: 9px; line-height: 1.8; }
.help-callout--warning {
  border-color: color-mix(in srgb, var(--dig-color__warning__base) 28%, transparent);
  background: var(--dig-color__warning__surface);
  color: var(--dig-color__warning__on-surface);
}
.help-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 12px;
}
.help-split > div {
  padding: 17px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 9px;
  background: var(--dig-color__background__base);
}
.help-split > div > p { margin: 8px 0 0; }
.help-check-list { display: flex; flex-direction: column; gap: 10px; margin: 13px 0 0; padding: 0; list-style: none; }
.help-check-list li { display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: start; gap: 9px; color: var(--dig-color__text__subtle); font-size: 9px; line-height: 1.75; }
.help-check-list i { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--dig-color__success__base); }
.help-check-list kbd { font-size: 8px; }
.help-flow {
  display: grid;
  grid-template-columns: repeat(7, auto);
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 10px;
  background: var(--dig-color__background__subtle);
}
.help-flow > div { min-width: 0; display: flex; flex-direction: column; text-align: center; }
.help-flow > div > span { width: 30px; height: 30px; display: grid; place-items: center; margin: 0 auto 7px; border-radius: 50%; background: var(--dig-color__primary__base); color: var(--dig-color__primary__on-base); font-size: 9px; font-weight: 800; }
.help-flow strong { color: var(--dig-color__text__base); font-size: 9px; }
.help-flow small { margin-top: 3px; color: var(--dig-color__text__subtle); font-size: 7px; }
.help-flow > i { width: 36px; height: 1px; background: var(--dig-color__border__base); }
.help-actions-row { display: flex; gap: 8px; margin-top: 16px; }
.shortcut-table { overflow: hidden; margin-top: 14px; border: 1px solid var(--dig-color__border__subtle); border-radius: 9px; }
.shortcut-table > div { display: grid; grid-template-columns: minmax(200px, .75fr) minmax(0, 1fr); align-items: center; gap: 16px; min-height: 48px; padding: 9px 14px; }
.shortcut-table > div + div { border-top: 1px solid var(--dig-color__border__subtle); }
.shortcut-table > div:nth-child(even) { background: var(--dig-color__background__subtle); }
.shortcut-table span { direction: ltr; text-align: right; }
.shortcut-table strong { color: var(--dig-color__text__base); font-size: 9px; font-weight: 550; }
.help-faq,
.troubleshoot-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.help-faq details,
.troubleshoot-list details { overflow: hidden; border: 1px solid var(--dig-color__border__subtle); border-radius: 9px; background: var(--dig-color__background__base); }
.help-faq summary,
.troubleshoot-list summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; color: var(--dig-color__text__base); font-size: 10px; font-weight: 650; cursor: pointer; list-style: none; }
.help-faq summary::-webkit-details-marker,
.troubleshoot-list summary::-webkit-details-marker { display: none; }
.help-faq summary:hover,
.troubleshoot-list summary:hover { background: var(--dig-color__opacity__surface--state-1); }
.help-faq summary .hgi,
.troubleshoot-list summary .hgi { flex: 0 0 auto; color: var(--dig-color__text__subtle); font-size: 15px; }
.help-faq details[open] summary,
.troubleshoot-list details[open] summary { border-bottom: 1px solid var(--dig-color__border__subtle); background: var(--dig-color__background__subtle); }
.help-faq details p,
.troubleshoot-list details p { margin: 0; padding: 13px 14px 15px; color: var(--dig-color__text__subtle); font-size: 9px; line-height: 1.9; }
.help-faq code,
.troubleshoot-list code { direction: ltr; display: inline-block; padding: 1px 5px; border-radius: 4px; background: var(--dig-color__background__sunken); color: var(--dig-color__text__base); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.help-no-results {
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 30px;
  border: 1px dashed var(--dig-color__border__base);
  border-radius: var(--radius-panel, 12px);
  text-align: center;
}
.help-no-results .hgi { color: var(--dig-color__primary__base); font-size: 34px; }
.help-no-results h2 { margin: 12px 0 0; color: var(--dig-color__text__base); font-size: 17px; }
.help-no-results p { margin: 5px 0 0; color: var(--dig-color__text__subtle); font-size: 10px; }

@media (max-width: 1080px) {
  .help-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .help-quick-grid a { min-height: 112px; }
  .help-hero { grid-template-columns: minmax(0, 1.45fr) minmax(210px, .65fr); padding: 36px; }
}
@media (max-width: 840px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-summary-card { position: static; }
  .profile-summary-card__body { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; text-align: start; }
  .profile-avatar-preview { grid-row: 1 / 4; margin: -53px 0 0; }
  .profile-summary-card h2 { align-self: end; margin-top: 14px; }
  .profile-summary-card__body > p { margin-bottom: 8px; }
  .profile-facts { grid-column: 1 / -1; margin-top: 14px; }
  .help-hero { grid-template-columns: 1fr; min-height: 0; }
  .help-hero__visual { display: none; }
  .help-layout { grid-template-columns: 1fr; }
  .help-toc { position: static; display: none; }
}
@media (max-width: 640px) {
  .account-page-head { align-items: flex-start; flex-direction: column; margin-bottom: 16px; padding-bottom: 14px; }
  .account-page-head h1 { font-size: 22px; }
  .profile-form-card { padding: 16px; }
  .profile-photo-field { grid-template-columns: 1fr; }
  .profile-upload-button { max-width: none; width: 100%; }
  .profile-fields-grid,
  .profile-readonly-grid { grid-template-columns: 1fr; gap: 12px; }
  .profile-form-card__actions { flex-direction: column-reverse; }
  .profile-form-card__actions .primary-btn,
  .profile-form-card__actions .ghost-btn { width: 100%; justify-content: center; }
  .profile-summary-card__body { display: block; text-align: center; }
  .profile-avatar-preview { margin: -53px auto 13px; }
  .profile-summary-card h2 { margin-top: 0; }
  .help-hero { padding: 25px 18px; border-radius: 12px; }
  .help-hero h1 { font-size: 27px; }
  .help-hero__content > p { font-size: 10px; }
  .help-search { grid-template-columns: 20px minmax(0, 1fr); min-height: 48px; padding-inline: 12px; }
  .help-search kbd { display: none; }
  .help-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .help-quick-grid a { min-height: 118px; padding: 12px; }
  .help-section { padding: 17px; }
  .help-section__head { align-items: flex-start; }
  .help-section__head h2 { font-size: 16px; }
  .help-steps,
  .help-feature-grid,
  .help-media-cards,
  .help-split { grid-template-columns: 1fr; }
  .help-flow { grid-template-columns: 1fr; gap: 10px; }
  .help-flow > i { width: 1px; height: 16px; margin-inline: auto; }
  .help-actions-row { flex-direction: column; }
  .help-actions-row a { width: 100%; justify-content: center; }
  .shortcut-table > div { grid-template-columns: 1fr; gap: 5px; padding: 11px; }
  .shortcut-table span { text-align: start; }
}

/* --------------------------------------------------------------------------
   UpHub 1.8.1 — end-user help center and security-aligned profile surfaces
   -------------------------------------------------------------------------- */
.profile-summary-card,
.profile-form-card {
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
  box-shadow: none;
}
.profile-summary-card__cover {
  position: relative;
  height: 132px;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.profile-summary-card__cover::before {
  content: "";
  position: absolute;
  inset: 18px 20px;
  z-index: -1;
  border: 1px dashed color-mix(in srgb, var(--dig-color__primary__base) 25%, transparent);
  border-radius: 18px;
}
.profile-cover__cloud,
.profile-cover__folder,
.profile-cover__file {
  position: absolute;
  display: grid;
  place-items: center;
}
.profile-cover__cloud {
  width: 94px;
  height: 68px;
  top: 26px;
  right: 50%;
  margin-right: -47px;
  color: color-mix(in srgb, var(--dig-color__primary__on-surface) 70%, transparent);
}
.profile-cover__cloud .hgi { font-size: 70px; }
.profile-cover__folder {
  width: 64px;
  height: 50px;
  right: 50%;
  bottom: 12px;
  margin-right: -32px;
  border: 1px solid color-mix(in srgb, var(--dig-color__primary__base) 22%, transparent);
  border-radius: 12px;
  background: var(--dig-color__background__base);
  color: var(--dig-color__primary__base);
  box-shadow: 0 8px 20px #0000000d;
}
.profile-cover__folder .hgi { font-size: 29px; }
.profile-cover__file {
  width: 34px;
  height: 34px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 9px;
  background: var(--dig-color__background__base);
  color: var(--dig-color__text__subtle);
  box-shadow: 0 6px 16px #0000000a;
}
.profile-cover__file .hgi { font-size: 17px; }
.profile-cover__file--image { top: 20px; right: 24px; }
.profile-cover__file--video { top: 47px; left: 24px; }
.profile-cover__file--text { right: 31px; bottom: 15px; }
.profile-avatar-preview {
  border-color: var(--dig-color__background__base);
}
.profile-photo-field,
.profile-readonly-grid > div {
  border: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__base);
}
.profile-upload-button {
  background: var(--dig-color__background__base);
}

.help-page {
  width: min(1160px, 100%);
}
.help-hero {
  min-height: 272px;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
  gap: 26px;
  padding: 34px 38px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
  color: var(--dig-color__text__base);
}
html[data-theme="dark"] .help-hero {
  border-color: var(--dig-color__border__subtle);
  background: var(--dig-color__background__base);
  color: var(--dig-color__text__base);
}
.help-hero__content > p,
html[data-theme="dark"] .help-hero__content > p {
  max-width: 700px;
  color: var(--dig-color__text__subtle);
  font-size: 14px;
  line-height: 2;
}
.help-hero__badge,
html[data-theme="dark"] .help-hero__badge {
  margin-bottom: 14px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--dig-color__primary__base) 24%, transparent);
  border-radius: var(--radius-control);
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
  font-size: 12px;
}
.help-hero h1 {
  max-width: 720px;
  font-size: clamp(29px, 3.3vw, 41px);
  font-weight: 780;
  letter-spacing: 0;
}
.help-search {
  width: min(660px, 100%);
  min-height: 50px;
  margin-top: 22px;
  border: 1px solid var(--dig-color__border__base);
  border-radius: var(--radius-control);
  background: var(--dig-color__background__base);
  box-shadow: none;
  color: var(--dig-color__text__base);
}
.help-search:focus-within {
  border-color: var(--dig-color__primary__base);
  box-shadow: 0 0 0 3px var(--dig-color__utility__focus-ring);
}
.help-search .hgi { color: var(--dig-color__text__subtle); }
.help-search input {
  color: var(--dig-color__text__base);
  font-size: 13px;
}
.help-search input::placeholder { color: var(--dig-color__text__subtle); }
.help-search kbd {
  border-color: var(--dig-color__border__subtle);
  background: var(--dig-color__background__subtle);
  color: var(--dig-color__text__subtle);
}
.help-hero__visual {
  position: relative;
  min-height: 208px;
  overflow: hidden;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 18px;
  background: var(--dig-color__primary__surface);
}
.help-visual-cloud,
.help-visual-folder,
.help-visual-file {
  position: absolute;
  display: grid;
  place-items: center;
}
.help-visual-cloud {
  top: 25px;
  right: 50%;
  width: 126px;
  height: 82px;
  margin-right: -63px;
  color: color-mix(in srgb, var(--dig-color__primary__on-surface) 68%, transparent);
}
.help-visual-cloud .hgi { font-size: 88px; }
.help-visual-folder {
  top: auto;
  left: auto;
  right: 50%;
  bottom: 24px;
  width: 94px;
  height: 70px;
  margin-right: -47px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 16px;
  background: var(--dig-color__background__base);
  color: var(--dig-color__primary__base);
  box-shadow: 0 12px 30px #00000012;
  translate: none;
}
.help-visual-folder .hgi { font-size: 43px; }
.help-visual-file {
  width: 39px;
  height: 39px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 10px;
  background: var(--dig-color__background__base);
  color: var(--dig-color__text__subtle);
  box-shadow: 0 8px 20px #0000000f;
}
.help-visual-file .hgi { font-size: 20px; }
.help-visual-file--one { top: 23px; right: 21px; }
.help-visual-file--two { top: 72px; left: 20px; }
.help-visual-file--three { right: 24px; bottom: 22px; }

.help-quick-grid {
  gap: 12px;
  margin: 18px 0 24px;
}
.help-quick-grid a {
  min-height: 136px;
  padding: 16px;
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
}
.help-quick-grid a:hover {
  border-color: var(--dig-color__border__base);
  background: var(--dig-color__background__subtle);
}
.help-quick-grid a > span {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-control);
}
.help-quick-grid strong {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
}
.help-quick-grid small {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.7;
}
.help-layout {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
}
.help-toc {
  top: 82px;
  gap: 3px;
  padding: 15px;
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
}
.help-toc__title {
  margin-bottom: 7px;
  padding: 6px 8px 12px;
  font-size: 15px;
  font-weight: 750;
}
.help-toc > a {
  min-height: 39px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  color: var(--dig-color__text__subtle);
  font-size: 13px;
  line-height: 1.65;
}
.help-toc > a:hover,
.help-toc > a:focus-visible {
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.help-toc__support {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__subtle);
}
.help-toc__support .hgi { font-size: 21px; }
.help-toc__support strong { font-size: 12px; line-height: 1.7; }
.help-toc__support span { font-size: 11px; line-height: 1.85; }
.help-section {
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
}
.help-section__head { margin-bottom: 15px; }
.help-section__head > span {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: var(--radius-control);
  font-size: 14px;
}
.help-section__head small { font-size: 11px; }
.help-section__head h2 { font-size: 21px; }
.help-section > p,
.help-section section > p,
.help-section .help-split p {
  font-size: 13px;
  line-height: 2;
}
.help-section h3 { font-size: 15px; }
.help-steps li,
.help-split > div,
.help-feature-grid section,
.help-media-cards section,
.help-faq details,
.troubleshoot-list details {
  background: var(--dig-color__background__base);
}
.help-steps li,
.help-split > div,
.help-feature-grid section,
.help-media-cards section {
  border: 1px solid var(--dig-color__border__subtle);
}
.help-steps strong { font-size: 13px; }
.help-steps p,
.help-feature-grid section p,
.help-media-cards section p {
  font-size: 12px;
  line-height: 1.9;
}
.help-feature-grid section,
.help-media-cards section { padding: 17px; }
.help-feature-grid section > span,
.help-media-cards__icon {
  width: 42px;
  height: 42px;
}
.help-callout { padding: 15px; }
.help-callout strong { font-size: 13px; }
.help-callout p { font-size: 12px; line-height: 1.9; }
.help-check-list li {
  grid-template-columns: 8px minmax(0, 1fr);
  font-size: 12px;
  line-height: 1.85;
}
.help-check-list i { width: 8px; height: 8px; margin-top: 7px; }
.help-check-list kbd { font-size: 11px; }
.help-flow {
  padding: 19px;
  border: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__subtle);
}
.help-flow strong { font-size: 12px; }
.help-flow small { font-size: 10px; line-height: 1.7; }
.shortcut-table > div { min-height: 54px; }
.shortcut-table strong { font-size: 12px; }
.help-faq summary,
.troubleshoot-list summary {
  min-height: 54px;
  padding: 13px 15px;
  font-size: 13px;
}
.help-faq details p,
.troubleshoot-list details p {
  padding: 14px 15px 16px;
  font-size: 12px;
  line-height: 2;
}
.help-no-results p { font-size: 12px; }

@media (max-width: 1080px) {
  .help-layout { grid-template-columns: 235px minmax(0, 1fr); }
}
@media (max-width: 840px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-toc {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 16px;
  }
  .help-toc__title,
  .help-toc__support { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .profile-summary-card__cover { height: 120px; }
  .help-hero { padding: 22px 18px; }
  .help-hero h1 { font-size: 27px; }
  .help-hero__content > p { font-size: 13px; }
  .help-quick-grid a { min-height: 130px; padding: 14px; }
  .help-quick-grid strong { font-size: 13px; }
  .help-quick-grid small { font-size: 10px; }
  .help-toc { grid-template-columns: 1fr; padding: 12px; }
  .help-toc__title,
  .help-toc__support { grid-column: auto; }
  .help-toc > a { min-height: 42px; font-size: 13px; }
  .help-section { padding: 18px; }
  .help-section__head h2 { font-size: 18px; }
  .help-section > p,
  .help-section section > p,
  .help-section .help-split p { font-size: 12px; }
}

/* Keep the new UpHub cover files independent from the retired circle artwork. */
.profile-summary-card__cover span.profile-cover__file {
  width: 34px;
  height: 34px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 9px;
  background: var(--dig-color__background__base);
}
.profile-summary-card__cover span.profile-cover__file--image {
  top: 20px;
  right: 24px;
  bottom: auto;
  left: auto;
}
.profile-summary-card__cover span.profile-cover__file--video {
  top: 47px;
  right: auto;
  bottom: auto;
  left: 24px;
}
.profile-summary-card__cover span.profile-cover__file--text {
  top: auto;
  right: 31px;
  bottom: 15px;
  left: auto;
}

/* --------------------------------------------------------------------------
   UpHub 1.8.1 — path-aware folder tree picker for bulk move
   -------------------------------------------------------------------------- */
.dialog-content--move {
  width: min(760px, calc(100vw - 32px));
  max-height: min(92dvh, 840px);
  overflow: auto;
}
.dialog-content--move .form-stack {
  gap: 14px;
}
.move-picker {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.move-picker__path-label {
  display: block;
  margin: 0;
  color: var(--dig-color__text__base);
  font-size: 12px;
  font-weight: 700;
}
.move-picker__path-bar {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 8px;
  border: 1px solid var(--dig-color__border__base);
  border-radius: var(--radius-control);
  background: var(--dig-color__background__base);
}
.move-picker__path-bar:focus-within {
  border-color: var(--dig-color__primary__base);
  box-shadow: 0 0 0 3px var(--dig-color__utility__focus-ring);
}
.move-picker__path-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.move-picker__path-icon .hgi { font-size: 17px; }
.move-picker__path-bar input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 4px;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--dig-color__text__base);
  font-family: Vazirmatn, sans-serif;
  font-size: 12px;
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: start;
}
.move-picker__path-bar input:focus,
.move-picker__path-bar input:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.move-picker__path-bar input[aria-invalid="true"] { color: var(--dig-color__alert__base); }
.move-picker__go {
  min-height: 34px;
  padding: 0 10px;
  white-space: nowrap;
}
.move-picker__path-help,
.move-picker__path-error {
  margin: 0;
  font-size: 10px;
  line-height: 1.75;
}
.move-picker__path-help { color: var(--dig-color__text__subtle); }
.move-picker__path-error { color: var(--dig-color__alert__base); }
.move-picker__path-error[hidden] { display: none !important; }
.move-picker__tree-shell {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
}
.move-picker__tree-head {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  background: var(--dig-color__background__subtle);
}
.move-picker__tree-head > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dig-color__text__base);
  font-size: 12px;
}
.move-picker__tree-head > span .hgi {
  color: var(--dig-color__primary__base);
  font-size: 18px;
}
.move-picker__tree-head small {
  color: var(--dig-color__text__subtle);
  font-size: 9px;
}
.move-picker__tree {
  max-height: 330px;
  overflow: auto;
  padding: 7px;
  scrollbar-gutter: stable;
}
.move-tree__item {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding-inline-start: calc(var(--move-tree-depth, 0) * 22px);
}
.move-tree__item[hidden] { display: none !important; }
.move-tree__toggle {
  width: 28px;
  min-width: 28px;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--dig-color__text__subtle);
  cursor: pointer;
}
.move-tree__toggle:hover,
.move-tree__toggle:focus-visible {
  background: var(--dig-color__background__subtle);
  color: var(--dig-color__text__base);
  outline: 0;
}
.move-tree__toggle .hgi { font-size: 14px; }
.move-tree__toggle.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}
.move-tree__select {
  min-width: 0;
  min-height: 42px;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--dig-color__text__base);
  text-align: start;
  cursor: pointer;
}
.move-tree__select:hover,
.move-tree__select:focus-visible {
  border-color: var(--dig-color__border__subtle);
  background: var(--dig-color__background__subtle);
  outline: 0;
}
.move-tree__folder-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: 8px;
  background: var(--dig-color__folder__outside);
  color: var(--dig-color__folder__inside);
}
.move-tree__folder-icon .hgi { font-size: 17px; }
.move-tree__copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.move-tree__copy strong,
.move-tree__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.move-tree__copy strong {
  color: inherit;
  font-size: 11px;
  font-weight: 650;
}
.move-tree__copy small {
  color: var(--dig-color__text__subtle);
  font-size: 8px;
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: start;
}
.move-tree__check {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  opacity: 0;
  color: var(--dig-color__selection__base);
}
.move-tree__check .hgi { font-size: 18px; }
.move-tree__item.is-selected .move-tree__select {
  border-color: var(--dig-color__selection__base);
  background: var(--dig-color__selection__surface);
  color: var(--dig-color__selection__on-surface);
}
.move-tree__item.is-selected .move-tree__check { opacity: 1; }
.move-tree__item.is-selected .move-tree__copy small { color: var(--dig-color__selection__on-surface); opacity: .72; }
.move-tree__item.is-disabled .move-tree__select {
  opacity: .45;
  cursor: not-allowed;
}
.move-tree__item.is-disabled .move-tree__select:hover {
  border-color: transparent;
  background: transparent;
}
.move-tree__empty {
  padding: 22px 14px;
  color: var(--dig-color__text__subtle);
  font-size: 10px;
  line-height: 1.9;
  text-align: center;
}
.move-picker__selected {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--dig-color__primary__base) 24%, var(--dig-color__border__subtle));
  border-radius: var(--radius-control);
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.move-picker__selected > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--dig-color__background__base);
  color: var(--dig-color__primary__base);
}
.move-picker__selected > span .hgi { font-size: 17px; }
.move-picker__selected > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1px 8px;
}
.move-picker__selected small {
  grid-column: 1 / -1;
  font-size: 8px;
  opacity: .72;
}
.move-picker__selected strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.move-picker__selected code {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-family: Vazirmatn, sans-serif;
  font-size: 9px;
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialog-content--move .dialog__actions [type="submit"]:disabled {
  opacity: .48;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .dialog-content--move {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
  }
  .move-picker__path-bar {
    grid-template-columns: 30px minmax(0, 1fr) 38px;
  }
  .move-picker__go {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }
  .move-picker__go span { display: none; }
  .move-picker__tree-head { align-items: flex-start; }
  .move-picker__tree-head small { max-width: 130px; line-height: 1.65; }
  .move-picker__tree { max-height: 300px; padding: 5px; }
  .move-tree__item { padding-inline-start: calc(var(--move-tree-depth, 0) * 16px); }
  .move-tree__copy small { display: none; }
  .move-picker__selected > div { grid-template-columns: 1fr; }
  .move-picker__selected code { text-align: start; }
}

/* --------------------------------------------------------------------------
   UpHub 1.8.5 — restore dark palette; keep only profile cover light blue
   -------------------------------------------------------------------------- */
.profile-fields-grid {
  align-items: start;
}

.profile-fields-grid .settings-field,
.profile-fields-grid .settings-field + .settings-field {
  align-self: start;
  margin-top: 0;
}

.profile-summary-card__cover,
html[data-theme="dark"] .profile-summary-card__cover {
  height: 112px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  background-color: #deebff !important;
  color: #00183e;
}

.profile-summary-card__cover::before {
  content: none;
}

.profile-summary-card__cover-logo {
  width: 72px;
  height: 72px;
  display: block;
  object-fit: contain;
}

.profile-cover__cloud,
.profile-cover__folder,
.profile-cover__file {
  display: none !important;
}

@media (max-width: 640px) {
  .profile-summary-card__cover,
  html[data-theme="dark"] .profile-summary-card__cover {
    height: 104px;
  }

  .profile-summary-card__cover-logo {
    width: 66px;
    height: 66px;
  }
}

/* --------------------------------------------------------------------------
   UpHub 1.8.5 — Help polish and readable form controls
   -------------------------------------------------------------------------- */
.help-search .help-search__shortcut {
  direction: ltr;
  min-width: 42px;
  padding: 2px 7px;
  border: 1px solid var(--dig-color__border__subtle);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--dig-color__background__subtle);
  color: var(--dig-color__text__subtle);
  font-family: inherit;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
}

.help-flow {
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: stretch;
  justify-content: stretch;
}

.help-flow > div {
  display: grid;
  place-items: center;
  align-content: center;
  justify-items: center;
  min-height: 112px;
  text-align: center;
}

.help-flow > div > strong,
.help-flow > div > small {
  width: 100%;
  text-align: center;
}

.help-flow > i {
  align-self: center;
  justify-self: center;
}

.help-section {
  scroll-margin-top: 88px;
}

.help-toc a[aria-current="location"],
.help-quick-grid a[aria-current="location"] {
  border-color: var(--dig-color__primary__base);
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}

.help-disclosure__chevron {
  transform-origin: center;
  transition: transform 180ms ease, color 180ms ease;
}

.help-faq details[open] .help-disclosure__chevron,
.troubleshoot-list details[open] .help-disclosure__chevron {
  transform: rotate(-90deg);
  color: var(--dig-color__text__base);
}

:where(
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea
) {
  font-size: 15px !important;
}

@media (max-width: 720px) {
  .help-flow {
    grid-template-columns: 1fr;
    align-items: center;
  }

  .help-flow > div {
    width: 100%;
    min-height: 96px;
  }

  .help-flow > i {
    width: 1px;
    height: 16px;
  }

  :where(
    input:not([type]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea
  ) {
    font-size: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   UpHub 1.9.0 — sorting, item dates and superuser account management
   -------------------------------------------------------------------------- */
.sort-menu {
  position: relative;
  z-index: 28;
}
.sort-menu > summary {
  list-style: none;
}
.sort-menu > summary::-webkit-details-marker { display: none; }
.sort-menu__summary {
  min-width: 146px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.sort-menu__summary small {
  color: var(--dig-color__text__subtle);
  font-size: 10px;
  font-weight: 400;
}
.sort-menu__chevron {
  font-size: 15px;
  transition: color 180ms ease;
}
.sort-menu[open] .sort-menu__chevron { color: var(--dig-color__primary__base); }
.sort-menu__popover {
  top: calc(100% + 8px);
  right: 0;
  bottom: auto;
  left: auto;
  width: 220px;
}
.sort-menu__label {
  display: block;
  padding: 7px 10px 5px;
  color: var(--dig-color__text__subtle);
  font-size: 10px;
}
.sort-menu__popover > a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
}
.sort-menu__popover > a > .hgi:last-child { justify-self: end; }
.sort-menu__popover > a.is-active {
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.sort-menu__divider {
  height: 1px;
  margin: 5px 4px;
  background: var(--dig-color__border__subtle);
}

.browser:has(.items-grid.is-list) .items-table-head,
.items-grid.is-list .item-card {
  grid-template-columns: minmax(250px, 1.65fr) .48fr .58fr .82fr .82fr 64px 40px;
}
.items-grid.is-list .item-status-badges { grid-column: 6; }
.items-grid.is-list .item-menu { grid-column: 7; }
.items-grid.is-list .item-created,
.items-grid.is-list .item-modified {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.items-grid:not(.is-list) .item-created,
.items-grid:not(.is-list) .item-modified { display: none; }

.account-menu__admin-link {
  color: var(--dig-color__primary__on-surface) !important;
}
.account-menu__admin-link.is-active,
.account-menu__admin-link:hover {
  background: var(--dig-color__primary__surface) !important;
}

.admin-users-page,
.admin-user-edit-page {
  width: min(1220px, 100%);
  margin-inline: auto;
}
.admin-page-head { margin-bottom: 20px; }
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.admin-stat-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
}
.admin-stat-card > span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
}
.admin-stat-card > span .hgi { font-size: 20px; }
.admin-stat-card div { min-width: 0; display: flex; flex-direction: column; }
.admin-stat-card small { color: var(--dig-color__text__subtle); font-size: 11px; }
.admin-stat-card strong { margin-top: 2px; color: var(--dig-color__text__base); font-size: 22px; }
.admin-users-card {
  overflow: hidden;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-panel);
  background: var(--dig-color__background__base);
}
.admin-users-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
}
.admin-user-search {
  min-width: 220px;
  flex: 1 1 420px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-inline: 12px;
  border: 1px solid var(--dig-color__border__base);
  border-radius: var(--radius-control);
  background: var(--dig-color__background__base);
}
.admin-user-search:focus-within { border-color: var(--dig-color__primary__base); }
.admin-user-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--dig-color__text__base);
}
.admin-user-filter { min-width: 180px; display: flex; flex-direction: column; gap: 5px; }
.admin-user-filter > span { color: var(--dig-color__text__subtle); font-size: 10px; }
.admin-user-filter select {
  height: 42px;
  padding-inline: 10px;
  border: 1px solid var(--dig-color__border__base);
  border-radius: var(--radius-control);
  background: var(--dig-color__background__base);
  color: var(--dig-color__text__base);
}
.admin-users-table__head,
.admin-user-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(150px, .72fr) minmax(190px, .82fr) 100px 42px;
  align-items: center;
  gap: 14px;
}
.admin-users-table__head {
  min-height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  color: var(--dig-color__text__subtle);
  font-size: 10px;
}
.admin-user-row {
  min-height: 76px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--dig-color__border__subtle);
}
.admin-user-row:last-child { border-bottom: 0; }
.admin-user-row:hover { background: var(--dig-color__background__subtle); }
.admin-user-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.avatar--admin {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  font-size: 14px;
}
.admin-user-identity > div { min-width: 0; display: flex; flex-direction: column; }
.admin-user-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dig-color__text__base); font-size: 12px; }
.admin-user-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dig-color__text__subtle); font-size: 10px; direction: ltr; text-align: right; }
.admin-user-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--dig-color__secondary__surface);
  color: var(--dig-color__secondary__on-surface);
  font-size: 9px;
}
.status-badge--success { background: var(--dig-color__success__surface); color: var(--dig-color__success__on-surface); }
.status-badge--pending { background: var(--dig-color__warning__surface); color: var(--dig-color__warning__on-surface); }
.status-badge--admin { background: var(--dig-color__primary__surface); color: var(--dig-color__primary__on-surface); }
.admin-user-storage { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-user-storage strong { color: var(--dig-color__text__base); font-size: 11px; }
.admin-user-storage small { color: var(--dig-color__text__subtle); font-size: 9px; }
.admin-storage-bar {
  height: 4px;
  overflow: hidden;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--dig-color__background__subtle);
}
.admin-storage-bar i { height: 100%; display: block; max-width: 100%; border-radius: inherit; background: var(--dig-color__primary__base); }
.admin-user-row > time { color: var(--dig-color__text__subtle); font-size: 10px; }
.admin-user-edit-link { justify-self: end; }
.admin-users-empty { display: grid; place-items: center; padding: 54px 20px; text-align: center; }
.admin-users-empty > .hgi { color: var(--dig-color__text__subtle); font-size: 38px; }
.admin-users-empty h2 { margin: 10px 0 3px; color: var(--dig-color__text__base); font-size: 17px; }
.admin-users-empty p { margin: 0; color: var(--dig-color__text__subtle); font-size: 11px; }
.admin-pagination {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 14px;
  border-top: 1px solid var(--dig-color__border__subtle);
}
.admin-pagination a { display: inline-flex; align-items: center; gap: 5px; color: var(--dig-color__primary__base); font-size: 11px; }
.admin-pagination > span { color: var(--dig-color__text__subtle); font-size: 10px; }

.admin-user-edit-layout {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 18px;
}
.admin-user-summary { position: sticky; top: 88px; }
.admin-user-summary__identity { display: flex; align-items: center; gap: 13px; padding-bottom: 16px; border-bottom: 1px solid var(--dig-color__border__subtle); }
.avatar--admin-large { width: 58px; height: 58px; flex: 0 0 58px; font-size: 20px; }
.admin-user-summary__identity h2 { margin: 0; color: var(--dig-color__text__base); font-size: 17px; }
.admin-user-summary__identity p { margin: 3px 0 0; color: var(--dig-color__text__subtle); font-size: 10px; }
.admin-user-facts { display: grid; gap: 0; margin: 12px 0; }
.admin-user-facts > div { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--dig-color__border__subtle); }
.admin-user-facts dt { color: var(--dig-color__text__subtle); font-size: 9px; }
.admin-user-facts dd { margin: 0; overflow-wrap: anywhere; color: var(--dig-color__text__base); font-size: 11px; }
.admin-user-quota-summary { display: grid; gap: 7px; margin-top: 14px; }
.admin-user-quota-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-user-quota-summary span,
.admin-user-quota-summary small { color: var(--dig-color__text__subtle); font-size: 9px; }
.admin-user-quota-summary strong { color: var(--dig-color__text__base); font-size: 10px; }
.admin-user-quota-summary .storage-bar { height: 7px; }
.admin-user-quota-summary .storage-bar i { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--dig-color__primary__base); }
.admin-user-edit-form { min-width: 0; }
.admin-user-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-user-fields-grid .settings-field + .settings-field { margin-top: 0; }
.admin-user-fields-grid .settings-field--wide { grid-column: 1 / -1; }
.admin-user-fields-grid select { width: 100%; }
.admin-access-fieldset { margin: 20px 0 0; padding: 0; border: 0; }
.admin-access-fieldset legend { margin-bottom: 9px; color: var(--dig-color__text__base); font-size: 12px; font-weight: 600; }
.admin-access-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-access-card {
  position: relative;
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--dig-color__border__subtle);
  border-radius: var(--radius-control);
  background: var(--dig-color__background__base);
  cursor: pointer;
}
.admin-access-card:hover { border-color: var(--dig-color__border__base); background: var(--dig-color__background__subtle); }
.admin-access-card input { position: absolute; opacity: 0; pointer-events: none; }
.admin-access-card:has(input:checked) { border-color: var(--dig-color__primary__base); background: var(--dig-color__primary__surface); }
.admin-access-card__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--dig-color__secondary__surface); color: var(--dig-color__text__base); }
.admin-access-card:has(input:checked) .admin-access-card__icon { background: var(--dig-color__primary__base); color: var(--dig-color__primary__on-base); }
.admin-access-card > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.admin-access-card strong { color: var(--dig-color__text__base); font-size: 11px; }
.admin-access-card small { margin-top: 3px; color: var(--dig-color__text__subtle); font-size: 9px; line-height: 1.7; }
.admin-access-error { grid-column: 1 / -1; }
.admin-activation-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-control); background: var(--dig-color__warning__surface); color: var(--dig-color__warning__on-surface); font-size: 10px; line-height: 1.8; }
.admin-user-edit-actions { margin-top: 20px; }

@media (max-width: 1100px) {
  .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-users-table__head,
  .admin-user-row { grid-template-columns: minmax(220px, 1.3fr) minmax(130px, .7fr) minmax(170px, .8fr) 90px 38px; gap: 10px; }
  .admin-access-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .browser:has(.items-grid.is-list) .items-table-head { display: none; }
  .items-grid.is-list .item-card { grid-template-columns: minmax(0, 1fr) 60px 38px; }
  .items-grid.is-list .item-status-badges { grid-column: 2; }
  .items-grid.is-list .item-menu { grid-column: 3; }
  .items-grid.is-list .item-created,
  .items-grid.is-list .item-modified { display: none; }
  .admin-users-toolbar { flex-wrap: wrap; align-items: stretch; }
  .admin-user-search { flex-basis: 100%; }
  .admin-user-filter { flex: 1 1 180px; }
  .admin-users-table__head { display: none; }
  .admin-user-row { grid-template-columns: minmax(0, 1fr) 40px; gap: 10px; padding: 13px; }
  .admin-user-identity { grid-column: 1; }
  .admin-user-edit-link { grid-column: 2; grid-row: 1; }
  .admin-user-badges,
  .admin-user-storage,
  .admin-user-row > time { grid-column: 1 / -1; }
  .admin-user-row > time::before { content: 'عضویت: '; }
  .admin-user-edit-layout { grid-template-columns: 1fr; }
  .admin-user-summary { position: static; }
}
@media (max-width: 620px) {
  .browser-actions { flex-wrap: wrap; }
  .sort-menu { flex: 1 1 auto; }
  .sort-menu__summary { width: 100%; min-width: 0; }
  .sort-menu__popover { right: auto; left: 0; }
  .admin-stat-grid { grid-template-columns: 1fr; }
  .admin-users-toolbar > .primary-btn,
  .admin-users-toolbar > .ghost-btn { flex: 1 1 140px; justify-content: center; }
  .admin-user-fields-grid { grid-template-columns: 1fr; }
  .admin-user-fields-grid .settings-field--wide { grid-column: auto; }
  .admin-user-edit-actions { flex-direction: column-reverse; }
  .admin-user-edit-actions > * { width: 100%; justify-content: center; }
}
.registration-approval-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: var(--dig-color__primary__surface);
  color: var(--dig-color__primary__on-surface);
  font-size: 10px;
  line-height: 1.8;
}
.registration-approval-note .hgi { margin-top: 2px; flex: 0 0 auto; }
.item-card-dates {
  display: grid;
  gap: 1px;
  margin-top: 4px;
  color: var(--dig-color__text__subtle);
  font-size: 9px;
  line-height: 1.55;
}
.item-card-dates time { display: block; }
.items-grid.is-list .item-card-dates { display: none; }
.items-grid:not(.is-list) .item-card { min-height: 236px; }


/* --------------------------------------------------------------------------
   UpHub 1.9.1 — Admin form polish and profile storage pattern
   -------------------------------------------------------------------------- */
.admin-user-fields-grid .settings-field select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px 0 42px;
  border: 1px solid var(--dig-color__border__base);
  border-radius: var(--radius-control);
  background-color: var(--dig-color__background__base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m7 10 5 5 5-5' stroke='%23636b74' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 13px center;
  background-size: 18px 18px;
  color: var(--dig-color__text__base);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
  cursor: pointer;
}
.admin-user-fields-grid .settings-field select:hover {
  border-color: var(--dig-color__border__bold);
}
.admin-user-fields-grid .settings-field select:focus,
.admin-user-fields-grid .settings-field select:focus-visible {
  border-color: var(--dig-color__primary__base);
  box-shadow: 0 0 0 3px var(--dig-color__utility__focus-ring);
}
.admin-user-fields-grid .settings-field select:disabled {
  opacity: .62;
  cursor: not-allowed;
}
.admin-user-fields-grid .settings-field select option {
  background: var(--dig-color__background__base);
  color: var(--dig-color__text__base);
  font-size: 14px;
}

.admin-user-edit-actions {
  gap: 10px;
}

.profile-summary-card__cover.profile-summary-card__cover--pattern,
html[data-theme="dark"] .profile-summary-card__cover.profile-summary-card__cover--pattern {
  position: relative;
  height: 112px;
  overflow: hidden;
  border-bottom: 1px solid var(--dig-color__border__subtle);
  background-color: #deebff !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .06)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='112' viewBox='0 0 252 112' fill='none'%3E%3Cg stroke='%230057e0' stroke-opacity='.13' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 40.5A5.5 5.5 0 0 1 21.5 35H37l5.5 6H62A5.5 5.5 0 0 1 67.5 46.5v25A5.5 5.5 0 0 1 62 77H21.5A5.5 5.5 0 0 1 16 71.5v-31Z'/%3E%3Cpath d='M108 27h24l10 10v40h-34z'/%3E%3Cpath d='M132 27v11h10M115 49h20M115 58h16'/%3E%3Cpath d='M181 76h42c7.2 0 12-4.5 12-10.5S230.5 55 224 55c-2-9-9-14-18-14-10 0-17 6-19 15-7 .5-12 4.5-12 10.5S174 76 181 76Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat-x;
  background-position: center, center;
  background-size: cover, 252px 112px;
  color: #00183e;
}
.profile-summary-card__cover.profile-summary-card__cover--pattern::before,
.profile-summary-card__cover.profile-summary-card__cover--pattern::after {
  content: none;
}
.profile-summary-card__cover--pattern .profile-summary-card__cover-logo {
  display: none !important;
}

@media (max-width: 640px) {
  .profile-summary-card__cover.profile-summary-card__cover--pattern,
  html[data-theme="dark"] .profile-summary-card__cover.profile-summary-card__cover--pattern {
    height: 104px;
    background-size: cover, 140px 83px;
  }
  .admin-user-edit-actions {
    gap: 8px;
  }
}

/* --------------------------------------------------------------------------
   UpHub 1.9.2 — Larger account typography for security and profile pages
   -------------------------------------------------------------------------- */
.settings-page .eyebrow,
.profile-page .eyebrow {
  font-size: 12px;
  line-height: 1.7;
}

.settings-page__header h1,
.profile-page .account-page-head h1 {
  font-size: 29px;
}
.settings-page__header p,
.profile-page .account-page-head p {
  font-size: 13px;
  line-height: 1.95;
}

.settings-page .settings-card__head h2,
.profile-page .profile-form-card__head h2 {
  font-size: 18px;
  line-height: 1.55;
}
.settings-page .settings-card__head p,
.profile-page .profile-form-card__head p {
  font-size: 13px;
  line-height: 1.85;
}

.settings-page .radio-card strong {
  font-size: 14px;
  line-height: 1.65;
}
.settings-page .radio-card small {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.8;
}

.settings-page .settings-field,
.profile-page .settings-field {
  font-size: 13px;
}
.settings-page .settings-field input,
.profile-page .settings-field input {
  font-size: 15px;
}
.settings-page .field-help,
.settings-page .settings-field .helptext,
.profile-page .field-help,
.profile-page .settings-field .helptext {
  font-size: 12px;
  line-height: 1.8;
}

.settings-page .primary-btn,
.settings-page .ghost-btn,
.profile-page .primary-btn,
.profile-page .ghost-btn,
.profile-page .profile-upload-button {
  font-size: 13px;
}

.profile-summary-card h2 {
  font-size: 20px;
}
.profile-summary-card__body > p {
  font-size: 12px;
}
.profile-facts dt,
.profile-facts dd {
  font-size: 12px;
  line-height: 1.7;
}
.profile-facts dt .hgi {
  font-size: 17px;
}

.profile-photo-field__copy strong {
  font-size: 14px;
}
.profile-photo-field__copy span,
.profile-remove-option {
  font-size: 12px;
  line-height: 1.8;
}
.profile-readonly-grid span {
  font-size: 12px;
}
.profile-readonly-grid strong {
  font-size: 14px;
}
.profile-readonly-grid small {
  font-size: 11px;
  line-height: 1.8;
}

@media (max-width: 640px) {
  .settings-page__header h1,
  .profile-page .account-page-head h1 {
    font-size: 27px;
  }
  .settings-page .settings-card__head h2,
  .profile-page .profile-form-card__head h2 {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   UpHub 1.9.3 — Larger typography for the admin users list
   -------------------------------------------------------------------------- */
.admin-users-page .eyebrow {
  font-size: 12px;
  line-height: 1.7;
}

.admin-users-page .account-page-head h1 {
  font-size: 29px;
  line-height: 1.45;
}

.admin-users-page .account-page-head p {
  font-size: 13px;
  line-height: 1.95;
}

.admin-users-page .account-page-head .ghost-btn,
.admin-users-page .admin-users-toolbar .primary-btn,
.admin-users-page .admin-users-toolbar .ghost-btn {
  font-size: 13px;
}

.admin-users-page .admin-stat-card small {
  font-size: 13px;
  line-height: 1.7;
}

.admin-users-page .admin-stat-card strong {
  font-size: 24px;
  line-height: 1.4;
}

.admin-users-page .admin-user-search input,
.admin-users-page .admin-user-filter select {
  font-size: 15px;
}

.admin-users-page .admin-user-filter > span {
  font-size: 12px;
  line-height: 1.7;
}

.admin-users-page .admin-users-table__head {
  font-size: 12px;
}

.admin-users-page .admin-user-identity strong {
  font-size: 14px;
  line-height: 1.65;
}

.admin-users-page .admin-user-identity small {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.7;
}

.admin-users-page .status-badge {
  min-height: 26px;
  padding-inline: 9px;
  font-size: 11px;
}

.admin-users-page .admin-user-storage strong {
  font-size: 13px;
  line-height: 1.6;
}

.admin-users-page .admin-user-storage small,
.admin-users-page .admin-user-row > time {
  font-size: 11px;
  line-height: 1.7;
}

.admin-users-page .admin-users-empty h2 {
  font-size: 19px;
}

.admin-users-page .admin-users-empty p {
  font-size: 13px;
  line-height: 1.8;
}

.admin-users-page .admin-pagination a,
.admin-users-page .admin-pagination > span {
  font-size: 12px;
}

@media (max-width: 620px) {
  .admin-users-page .account-page-head h1 {
    font-size: 27px;
  }

  .admin-users-page .admin-users-table__head {
    font-size: 11px;
  }

  .admin-users-page .admin-user-identity strong {
    font-size: 14px;
  }

  .admin-users-page .admin-user-identity small,
  .admin-users-page .admin-user-storage small,
  .admin-users-page .admin-user-row > time {
    font-size: 12px;
  }
}


/* --------------------------------------------------------------------------
   UpHub 1.9.4 — Larger admin user edit typography and spaced profile pattern
   -------------------------------------------------------------------------- */
.admin-user-edit-page .eyebrow {
  font-size: 12px;
  line-height: 1.7;
}

.admin-user-edit-page .account-page-head h1 {
  font-size: 29px;
  line-height: 1.45;
}

.admin-user-edit-page .account-page-head p {
  font-size: 13px;
  line-height: 1.95;
}

.admin-user-edit-page .account-page-head .ghost-btn,
.admin-user-edit-page .settings-card__actions .primary-btn,
.admin-user-edit-page .settings-card__actions .ghost-btn {
  font-size: 13px;
}

.admin-user-edit-page .admin-user-summary__identity h2 {
  font-size: 20px;
  line-height: 1.55;
}

.admin-user-edit-page .admin-user-summary__identity p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.7;
}

.admin-user-edit-page .admin-user-facts dt,
.admin-user-edit-page .admin-user-facts dd {
  font-size: 12px;
  line-height: 1.75;
}

.admin-user-edit-page .admin-user-quota-summary span,
.admin-user-edit-page .admin-user-quota-summary small {
  font-size: 12px;
  line-height: 1.7;
}

.admin-user-edit-page .admin-user-quota-summary strong {
  font-size: 13px;
  line-height: 1.6;
}

.admin-user-edit-page .settings-card__head h2 {
  font-size: 18px;
  line-height: 1.55;
}

.admin-user-edit-page .settings-card__head p {
  font-size: 13px;
  line-height: 1.85;
}

.admin-user-edit-page .settings-field {
  font-size: 13px;
  line-height: 1.7;
}

.admin-user-edit-page .settings-field input,
.admin-user-edit-page .settings-field select {
  font-size: 15px;
}

.admin-user-edit-page .settings-field .field-error,
.admin-user-edit-page .form-alert {
  font-size: 12px;
  line-height: 1.8;
}

.admin-user-edit-page .admin-access-fieldset legend {
  font-size: 14px;
  line-height: 1.7;
}

.admin-user-edit-page .admin-access-card strong {
  font-size: 14px;
  line-height: 1.65;
}

.admin-user-edit-page .admin-access-card small {
  font-size: 12px;
  line-height: 1.8;
}

.admin-user-edit-page .admin-activation-note {
  font-size: 12px;
  line-height: 1.85;
}

@media (max-width: 640px) {
  .admin-user-edit-page .account-page-head h1 {
    font-size: 27px;
  }

  .admin-user-edit-page .settings-card__head h2 {
    font-size: 17px;
  }

  .profile-summary-card__cover.profile-summary-card__cover--pattern,
  html[data-theme="dark"] .profile-summary-card__cover.profile-summary-card__cover--pattern {
    background-size: cover, 224px 100px;
  }
}