@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* =====================================================================
   LOADI THEME  —  drop-in skin for XFileSharingPro public pages
   Loaded LAST (after style.css / rtl.css) and only on public, non-admin
   pages. Hooks the engine's existing Bootstrap markup classes; uses CSS
   logical properties so it works in both LTR and RTL (dir="rtl").
   Tweak the tokens in :root to rebrand.
   ===================================================================== */

:root {
  --loadi-ink: #1c1330;
  --loadi-ink-soft: #5a5270;
  --loadi-ink-faint: #8a82a0;
  --loadi-line: #ece8f4;
  --loadi-page: #f6f4fb;
  --loadi-card: #ffffff;
  --loadi-p-500: #7c3aed;
  --loadi-p-600: #5b1ca8;
  --loadi-p-700: #4a149a;
  --loadi-p-300: #b794f6;
  --loadi-pill-bg: #ffffff;          /* active segmented-tab pill bg  */
  --loadi-pill-ink: var(--loadi-p-600);
  --loadi-pink: #ff4f8b;
  --loadi-pink-2: #ff84b8;
  --loadi-cyan: #1fc8f0;
  --loadi-hero:
      radial-gradient(120% 120% at 82% 8%, #c026d3 0%, rgba(192,38,211,0) 42%),
      radial-gradient(120% 120% at 6% 96%, #4f1fae 0%, rgba(79,31,174,0) 50%),
      linear-gradient(150deg, #2b0a52 0%, #441394 45%, #6b25c9 100%);
  --loadi-pink-grad: linear-gradient(135deg, #ff4f8b 0%, #ff84b8 100%);
  --loadi-shadow: 0 30px 70px -28px rgba(40,8,80,.5), 0 8px 24px -12px rgba(40,8,80,.28);
  --loadi-shadow-pink: 0 14px 30px -10px rgba(255,79,139,.6);
  --loadi-radius: 22px;
}

/* ---------- base ---------- */
html { background-color: #1b0a3e; }
body:not(.admin) {
  font-family: "Cairo", system-ui, "Segoe UI", sans-serif !important;
  color: var(--loadi-ink);
  /* Deep near-black canvas; the colour comes from two drifting gradient-orb
     layers (::before / ::after) fixed behind the content, so white cards
     float over a soft aurora. html holds the solid base so the orbs (z:-1)
     show through the transparent body. */
  background: transparent !important;
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
/* aurora orb layers */
body:not(.admin)::before,
body:not(.admin)::after {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
body:not(.admin)::before {
  background:
      radial-gradient(50% 48% at 80% 6%, rgba(224,52,196,.62) 0%, transparent 70%),
      radial-gradient(52% 52% at 8% 2%, rgba(132,64,248,.66) 0%, transparent 72%);
  animation: loadiDriftA 26s ease-in-out infinite alternate;
}
body:not(.admin)::after {
  background:
      radial-gradient(56% 54% at 92% 88%, rgba(86,52,224,.5) 0%, transparent 74%),
      radial-gradient(54% 52% at 4% 96%, rgba(190,46,224,.42) 0%, transparent 74%),
      radial-gradient(60% 60% at 50% 50%, rgba(60,22,120,.34) 0%, transparent 78%);
  animation: loadiDriftB 32s ease-in-out infinite alternate;
}
@keyframes loadiDriftA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 3%, 0) scale(1.09); }
}
@keyframes loadiDriftB {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(4%, -3%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.admin)::before, body:not(.admin)::after { animation: none; }
}
body:not(.admin) main { display: block; }
body:not(.admin) .container,
body:not(.admin) .container-fluid { max-width: 1140px; }
body:not(.admin) .page { padding-block: clamp(20px, 4vw, 48px); }
body:not(.admin) a { color: var(--loadi-p-500); }
body:not(.admin) .text-dark,
body:not(.admin) .text-body-emphasis { color: var(--loadi-ink) !important; }
body:not(.admin) .text-muted { color: var(--loadi-ink-faint) !important; }
body:not(.admin) .link-primary { color: var(--loadi-p-500) !important; font-weight: 700; }
body:not(.admin) .link-secondary { color: var(--loadi-ink-soft) !important; }

/* ---------- header / nav ---------- */
body:not(.admin) .header { background: transparent; border: 0; padding-block: 10px; }
body:not(.admin) .header .nav-link,
body:not(.admin) .header .link-body-emphasis { color: rgba(255,255,255,.82) !important; font-weight: 600; }
body:not(.admin) .header .nav-link:hover { color: #fff !important; }
/* new glossy Loadi mark is already light — show it in full colour on the
   purple gradient instead of flattening it to a white silhouette */
body:not(.admin) .header .logo img { height: 36px; width: auto; }
body:not(.admin) .header .icon-btn,
body:not(.admin) .header .icon-btn.text-dark {
  color: #fff !important;
  background: rgba(255,255,255,.08);
}
body:not(.admin) .header .icon-btn:hover,
body:not(.admin) .header .icon-btn:focus-visible {
  background: rgba(255,255,255,.16);
}
body:not(.admin) .header .lang-chip,
body:not(.admin) .header-lang .btn { background: transparent; border: 0; color: #fff; }
body:not(.admin) .login-btn { color: #fff !important; border-radius: 12px; }
body:not(.admin) .login-btn:hover { background: rgba(255,255,255,.12); }
body:not(.admin) .reg-btn,
body:not(.admin) .login-btn,
body:not(.admin) .header .nav-link { white-space: nowrap; }

/* ---------- buttons ---------- */
body:not(.admin) .btn-primary,
body:not(.admin) .reg-btn,
body:not(.admin) .submit-btn,
body:not(.admin) .download-btn,
body:not(.admin) .downloadbtn {
  background: var(--loadi-pink-grad) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: var(--loadi-shadow-pink);
}
body:not(.admin) .btn-primary:hover,
body:not(.admin) .reg-btn:hover,
body:not(.admin) .submit-btn:hover,
body:not(.admin) .downloadbtn:hover { filter: brightness(1.05); }
body:not(.admin) .reg-btn { border-radius: 12px; }
body:not(.admin) .submit-btn { padding: 12px 26px; font-size: 16px; }
body:not(.admin) .download-btn,
body:not(.admin) .downloadbtn { padding: 16px 28px; border-radius: 16px; }
body:not(.admin) .download-btn {
  height: 64px;
  padding: 10px 20px;
}
body:not(.admin) .download-btn > .download-btn-content {
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0;
}
body:not(.admin) .download-btn > .download-btn-content > .col-auto {
  min-width: 0;
}
body:not(.admin) .btn-outline-light { border-radius: 11px; border-color: var(--loadi-line); color: var(--loadi-ink-soft); }
body:not(.admin) .btn-outline-light:hover { background: var(--loadi-page); color: var(--loadi-ink); }
body:not(.admin) .icon-btn { border-radius: 10px; }

/* ---------- cards / blocks ---------- */
body:not(.admin) .block {
  background: var(--loadi-card);
  border: 0;
  border-radius: var(--loadi-radius);
  box-shadow: var(--loadi-shadow);
}
body:not(.admin) .preview-image,
body:not(.admin) .preview .block { overflow: hidden; }

/* block tabs (segmented look) */
body:not(.admin) .block-tabs {
  position: relative;
  display: flex;
  direction: ltr !important;
  flex-direction: row !important;
  width: 100%;
  background: var(--loadi-page);
  border-radius: 13px;
  padding: 4px;
  gap: 0;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
body.rtl:not(.admin) .block-tabs,
body[style*="direction:rtl"]:not(.admin) .block-tabs {
  direction: rtl !important;
  flex-direction: row !important;
}
body:not(.admin) .block-tabs .nav-link {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  white-space: normal;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 10px !important;
  color: var(--loadi-ink-soft);
  font-weight: 700;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .2s ease;
}
body:not(.admin) .block-tabs .nav-link.active {
  color: var(--loadi-pill-ink);
}
body:not(.admin) .block-tabs.loadi-seg-ready::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: var(--loadi-pill-left, 4px);
  width: var(--loadi-pill-width, calc(100% - 8px));
  background: var(--loadi-pill-bg);
  border-radius: 10px;
  box-shadow: 0 3px 10px -4px rgba(40,8,80,.25);
  transition: left .26s cubic-bezier(.5, 1.4, .5, 1), width .26s cubic-bezier(.5, 1.4, .5, 1);
  pointer-events: none;
}
body:not(.admin) .block-tabs.loadi-seg-resizing::before {
  transition: none !important;
}
body:not(.admin) .block-tabs:not(.loadi-seg-ready) .nav-link.active {
  background: var(--loadi-pill-bg) !important;
  box-shadow: 0 3px 10px -4px rgba(40,8,80,.25) !important;
}
body:not(.admin) .block-tabs .nav-link:focus-visible {
  outline: 2px solid rgba(124,58,237,.45);
  outline-offset: -3px;
}

/* ---------- dropzone (upload) ---------- */
body:not(.admin) .dropbox {
  border: 2px dashed var(--loadi-p-300);
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfaff, #f7f4fe);
  padding: 40px 20px;
  text-align: center;
  transition: border-color .18s, background .18s;
}
body:not(.admin) .dropbox:hover { border-color: var(--loadi-p-500); background: #f3edff; }
body:not(.admin) .dropbox svg path { fill: var(--loadi-p-500); }
body:not(.admin) .dropbox .link-primary { text-decoration: underline; text-underline-offset: 2px; }

/* upload-results card icon recolor */
body:not(.admin) .uploadItem svg path[fill="#3586FF"] { fill: var(--loadi-p-500); }

/* =====================================================================
   UPLOAD RESULTS  —  the result/code panel that appears INSIDE the
   upload card after a file uploads (.upload-form .uploadItem) plus the
   per-file progress rows. These are NESTED inside the upload card, so
   they must read as inset surfaces — not floating cards. All spacing
   uses logical properties so it mirrors correctly in LTR and RTL.
   (The standalone upload_results page keeps its card look — only the
   panels nested inside .upload-form are flattened.)
   ===================================================================== */

/* nested panel → drop the card shadow, use a soft inset surface, and
   reset the .block padding (and the :has() top padding) to one even box */
body:not(.admin) .upload-form .uploadItem {
  box-shadow: none !important;
  border: 1px solid var(--loadi-line);
  background: #faf9fe;
  border-radius: 16px;
  padding: clamp(14px, 2.5vw, 20px) !important;
  margin-block: 18px 0;
}
body:not(.admin) .upload-form .upload-actions {
  margin-block-start: 16px;
}
/* the heading row, tab bar and panes carry their own px-3/px-md-4 inset —
   strip it so everything aligns to the panel's own padding (no double gap) */
body:not(.admin) .upload-form .uploadItem > .d-flex,
body:not(.admin) .upload-form .uploadItem > .tab-content > .tab-pane,
body:not(.admin) .upload-form .uploadItem > [class*="px-"] {
  padding-inline: 0 !important;
}

/* heading: file/results icon + label.
   The engine sets an inline margin-RIGHT on the result icon, which is the
   wrong side in RTL (it shoves the icon away from the text, so the label
   ends up touching the icon while dead space opens on the far edge).
   Force a logical gap that is always BETWEEN the icon and the text. */
body:not(.admin) .uploadItem > .d-flex > svg {
  flex: none;
  margin-inline: 0 8px !important;
  margin-block: 0 !important;
}
body:not(.admin) .uploadItem > .d-flex {
  font-weight: 700;
  color: var(--loadi-ink);
  margin-bottom: 14px !important;
}
/* the results heading (.uploadItem.pb-0) is a short fixed label, not a
   filename — never let it clip/ellipsis; only the per-file rows truncate */
body:not(.admin) .uploadItem.pb-0 > .d-flex > .text-truncate {
  overflow: visible;
  flex: 0 1 auto;
}

/* second tab bar (Download link / Forum / HTML / Delete) → make it clearly
   SECONDARY to the primary upload tabs: smaller, lighter, no big inset, so
   it never reads as a duplicate of the main navigation */
body:not(.admin) .upload-form .uploadItem .block-tabs {
  margin: 0 0 2px !important;
  background: #fff;
  border: 1px solid var(--loadi-line);
}
body:not(.admin) .upload-form .uploadItem .block-tabs .nav-link {
  font-size: 13px;
  padding: 8px 12px;
}

/* code/link field → clean rounded box with a subtle, thin scrollbar.
   (The chunky native scrollbar previously collided with the copy button,
   which sits on the same edge as the scrollbar in RTL.) */
body:not(.admin) .codes-textarea { margin-top: 12px; position: relative; }
body:not(.admin) .codes-textarea textarea.form-control {
  border: 1px solid var(--loadi-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  resize: none;
  overflow-y: auto;
  line-height: 1.7;
  text-align: start;
  padding: 13px 16px;
  padding-inline-start: 50px;            /* room for the copy icon at the START (in front of the link) */
  padding-inline-end: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--loadi-p-300) transparent;
  color: var(--loadi-ink);
}
body:not(.admin) .codes-textarea textarea.form-control::-webkit-scrollbar { width: 8px; height: 8px; }
body:not(.admin) .codes-textarea textarea.form-control::-webkit-scrollbar-thumb { background: var(--loadi-p-300); border-radius: 99px; }
body:not(.admin) .codes-textarea textarea.form-control::-webkit-scrollbar-track { background: transparent; }

/* copy button → a quiet grey icon pinned to the START edge, sitting in
   front of the link (reads far cleaner than a chip hanging off the bottom).
   Physical offsets + !important so it always beats the engine's style.css
   `.codes-textarea .btn { right; bottom }`; RTL flip handled explicitly. */
body:not(.admin) .codes-textarea .btn.icon-btn {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  left: 10px !important;
  right: auto !important;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border: 0 !important;
  border-radius: 9px;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--loadi-ink-faint) !important;
  display: grid; place-items: center;
  margin: 0;
  padding: 0;
}
body:not(.admin) .codes-textarea .btn.icon-btn:hover,
body:not(.admin) .codes-textarea .btn.icon-btn:focus,
body:not(.admin) .codes-textarea .btn.icon-btn:active {
  background: var(--loadi-page) !important;
  color: var(--loadi-ink-soft) !important;
  box-shadow: none !important;
  outline: 0 !important;
}
body:not(.admin) .codes-textarea .btn.icon-btn svg { width: 17px; height: 17px; }
/* RTL: the link is right-aligned, so the icon goes in front of it on the right */
body.rtl .codes-textarea .btn.icon-btn,
body[style*="direction:rtl"] .codes-textarea .btn.icon-btn {
  left: auto !important;
  right: 10px !important;
}

/* ---------- code/result textareas + copy ---------- */
body:not(.admin) .codes-textarea textarea,
body:not(.admin) .form-control {
  border: 1.6px solid var(--loadi-line);
  border-radius: 12px;
  color: var(--loadi-ink);
}
body:not(.admin) .form-control:focus {
  border-color: var(--loadi-p-500);
  box-shadow: 0 0 0 3px rgba(124,58,237,.14);
}

/* ---------- download landing ---------- */
body:not(.admin) .download-title { font-weight: 800; color: var(--loadi-ink); }
body:not(.admin) .download-meta { color: var(--loadi-ink-faint); }
body:not(.admin) .download .block svg path[fill="#3586FF"],
body:not(.admin) .download2 svg path[fill="#3586FF"] { fill: var(--loadi-p-500); }
body:not(.admin) #direct_link.alert-primary,
body:not(.admin) .alert-primary {
  background: #f3edff;
  border: 1px solid #e3d6fb;
  border-radius: 14px;
  color: var(--loadi-p-700);
}
body:not(.admin) .spinner-border { color: #fff; }

/* ---------- alerts ---------- */
body:not(.admin) .alert { border-radius: 14px; border: 0; }
body:not(.admin) .alert-success { background: #e4f8ee; color: #138a52; }
body:not(.admin) .alert-danger { background: #fdeaea; color: #c0392b; }

/* ---------- login / register ---------- */
body:not(.admin) .login {
  background: var(--loadi-card);
  border-radius: var(--loadi-radius);
  box-shadow: var(--loadi-shadow);
  padding: clamp(24px, 4vw, 40px);
  max-width: 460px;
  margin: clamp(20px,5vw,56px) auto;
}
body:not(.admin) .login h1 { font-weight: 800; }
body:not(.admin) .form-floating > label { color: var(--loadi-ink-faint); }
body:not(.admin) .divider-text { position: relative; }
body:not(.admin) .login-social a img { transition: transform .15s; }
body:not(.admin) .login-social a:hover img { transform: translateY(-2px); }

/* ---------- pricing / comparison ---------- */
body:not(.admin) .premiumTable {
  background: var(--loadi-card);
  border: 0;
  border-radius: var(--loadi-radius);
  box-shadow: var(--loadi-shadow);
  padding: clamp(8px, 2vw, 16px);
  overflow: hidden;
}
body:not(.admin) .premiumTable .border-bottom { border-bottom: 0 !important; }
/* every VALUE cell becomes an evenly-spaced rounded pill.
   a uniform white border = equal horizontal & vertical gaps on the white card */
body:not(.admin) .premiumTable .col {
  text-align: center;
  font-weight: 700;
  color: var(--loadi-ink);
  background-color: var(--loadi-page) !important;
  border: 4px solid #fff !important;
  border-radius: 12px;
  padding: 16px 14px;
}
body:not(.admin) .premiumTable .col.premium {
  background-color: #f3edff !important;
}
/* the first column (feature labels) stays flush, no pill */
body:not(.admin) .premiumTable .col:first-child,
body:not(.admin) .premiumTable .col.text-end {
  text-align: start !important;
  font-weight: 600;
  color: var(--loadi-ink-soft);
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0;
}
body:not(.admin) .premiumTable-heading .col { font-weight: 800; color: var(--loadi-ink); }
body:not(.admin) .premiumTable-heading .col.premium .text-dark { color: var(--loadi-p-600) !important; }
body:not(.admin) .premiumTable svg[name="icon_yes"] path { fill: #1e9754 !important; }
body:not(.admin) .premiumTable svg[name="icon_no"] path { fill: #c9bfe0 !important; }

/* ---------- footer on gradient ---------- */
body:not(.admin) footer,
body:not(.admin) .footer { color: rgba(255,255,255,.7); }
body:not(.admin) footer a,
body:not(.admin) .footer a { color: rgba(255,255,255,.9); }

/* minimal design: hide the footer entirely on all public pages */
body:not(.admin) .footer { display: none; }

/* ---------- upload page (Loadi Upload design) ---------- */
body:not(.admin) .upload-form {
  max-width: 660px;
}
body:not(.admin) .upload-form > .block {
  padding: 22px !important;
}
body:not(.admin) .upload-form > .block > .block-tabs {
  margin-bottom: 16px;
}
body:not(.admin) .upload-form > .block > .p-3 {
  padding: 0 !important;
}
body:not(.admin) .upload-form > .block > .p-lg-5 {
  padding: 0 !important;
}
body:not(.admin) .upload-form > .block > .block-tabs .nav-link {
  padding: 10px;
  font-size: 14.5px;
  line-height: 1.45;
}

/* pink-gradient rounded icon box inside the dropzone */
body:not(.admin) .dropbox .dz-icon {
  width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--loadi-pink-grad);
  box-shadow: var(--loadi-shadow-pink);
}
body:not(.admin) .dropbox .dz-icon svg { width: 28px; height: 28px; }
body:not(.admin) .dropbox .dz-icon svg path { fill: #fff; }
body:not(.admin) .upload-form .dropbox {
  border-color: #d9d2ec;
  padding: 36px 20px;
}
body:not(.admin) .dropbox {
  color: var(--loadi-ink-soft);
  font-weight: 600;
  font-size: 15px;
}
body:not(.admin) .dropbox .dz-title {
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--loadi-ink);
}
body:not(.admin) .dropbox .dz-sub {
  margin-top: 4px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--loadi-ink-soft);
}
body:not(.admin) .dropbox .dz-note {
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--loadi-ink-faint);
}
body:not(.admin) .dropbox .link-primary { font-weight: 700; }

/* trust badge under the upload card */
body:not(.admin) .loadi-trust { margin-top: 8px; }
body:not(.admin) .loadi-trust .servinfo {
  color: #fff !important;
  font-weight: 400;
  font-size: 11px !important;
  opacity: .4;
}

html[data-loadi-theme="dark"] body:not(.admin) .loadi-trust .servinfo {
  color: var(--loadi-ink-soft) !important;
}

/* ---------- optional hero header for the upload page ---------- */
.loadi-hero {
  text-align: center;
  color: #fff;
  padding: clamp(20px, 4vw, 40px) 16px clamp(8px, 2vw, 20px);
}
.loadi-hero h1 {
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  font-size: 42px;
  margin: 0;
}
.loadi-hero p {
  color: rgba(255,255,255,.78);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  margin: 12px auto 0;
  max-width: 560px;
}

@media (max-width: 767.98px) {
  .loadi-hero h1 { font-size: 34px; margin-bottom: 12px;}
  .loadi-hero p { font-size: 12px; display: none; }
}

@media (max-width: 479.98px) {
  .loadi-hero h1 { font-size: 30px; }
}

/* =====================================================================
   CATALOGUE  —  public "latest files" browser (catalogue.html)
   ===================================================================== */
/* page heading on the gradient reads white */
body:not(.admin) .page > .row h1.text-dark,
body:not(.admin) section.page > h1.text-dark { color: #fff !important; }

/* search bar */
body:not(.admin) .search { display: flex; align-items: stretch; gap: 8px; }
body:not(.admin) .search .search-field {
  border: 0;
  border-radius: 12px;
  min-width: 240px;
  background: var(--loadi-card);
  box-shadow: var(--loadi-shadow);
  padding-inline: 16px;
}
body:not(.admin) .search .search-submit {
  background: var(--loadi-pink-grad) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: var(--loadi-shadow-pink);
  order: 2;
}
body:not(.admin) .search .dropdown-menu { border: 0; border-radius: 16px; box-shadow: var(--loadi-shadow); }
body:not(.admin) .btn-outline-secondary { border-color: var(--loadi-line); color: var(--loadi-ink-soft); border-radius: 10px; }
body:not(.admin) .btn-check:checked + .btn-outline-secondary { background: var(--loadi-p-500); border-color: var(--loadi-p-500); color: #fff; }
body.rtl:not(.admin) .search label[name="fsize_logic_gt"],
body[style*="direction:rtl"]:not(.admin) .search label[name="fsize_logic_gt"] {
  border-radius: 0 10px 10px 0 !important;
}
body.rtl:not(.admin) .search label[name="fsize_logic_lt"],
body[style*="direction:rtl"]:not(.admin) .search label[name="fsize_logic_lt"] {
  border-radius: 10px 0 0 10px !important;
}

/* file cards — legacy grid, still used by user_public_files.html /
   user_public_folders.html / user_public.html (catalogue.html moved to the
   .fileList/.fileRow row layout below). Keep for those other pages. */
body:not(.admin) .fileItem {
  background: var(--loadi-card);
  border-radius: 16px;
  box-shadow: var(--loadi-shadow);
  padding: 12px;
  height: 100%;
  transition: transform .16s, box-shadow .16s;
}
body:not(.admin) .fileItem:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -26px rgba(40,8,80,.5); }
body:not(.admin) .fileItem-cover {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg,#f3eefc,#e9e0fa);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
body:not(.admin) .fileItem-cover .thumb { width: 100%; height: 100%; object-fit: cover; }
body:not(.admin) .fileItem-cover .icon { width: 48px; height: 48px; opacity: .8; }
body:not(.admin) .fileItem-addto {
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px;
  width: 34px; height: 34px; border-radius: 10px; padding: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92) !important; color: var(--loadi-p-600) !important;
  box-shadow: 0 4px 12px -4px rgba(40,8,80,.4); border: 0;
}
body:not(.admin) .fileItem-addto:hover { background: #fff !important; color: var(--loadi-p-700) !important; }
body:not(.admin) .fileItem-added {
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px;
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: #1e9754 !important;
}
body:not(.admin) .fileItem-title a { font-weight: 700; font-size: 14.5px; color: var(--loadi-ink) !important; }
body:not(.admin) .fileItem-title a:hover { color: var(--loadi-p-600) !important; }
body:not(.admin) .fileItem-date { font-size: 12px; color: var(--loadi-ink-faint); font-weight: 500; }
body:not(.admin) .fileItem-info { font-size: 12.5px; color: var(--loadi-ink-soft); font-weight: 600; }
body:not(.admin) .fileItem-info svg path { fill: var(--loadi-p-300); }

/* file rows (detailed list) — catalogue.html's updated listing style */
body:not(.admin) .fileList { display: flex; flex-direction: column; gap: 10px; }
body:not(.admin) .fileRow {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--loadi-card);
  border-radius: 14px;
  box-shadow: var(--loadi-shadow);
  padding: 12px 16px;
  transition: transform .16s, box-shadow .16s;
}
body:not(.admin) .fileRow:hover { transform: translateY(-2px); box-shadow: 0 26px 60px -26px rgba(40,8,80,.5); }
body:not(.admin) .fileRow-cover {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg,#f3eefc,#e9e0fa);
  display: grid;
  place-items: center;
}
body:not(.admin) .fileRow-cover .thumb { width: 100%; height: 100%; object-fit: cover; }
body:not(.admin) .fileRow-cover .icon { width: 30px; height: 30px; opacity: .8; }
body:not(.admin) .fileRow-main { flex: 1 1 auto; min-width: 0; }
body:not(.admin) .fileRow-title { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
body:not(.admin) .fileRow-title a {
  font-weight: 700; font-size: 15px; color: var(--loadi-ink) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body:not(.admin) .fileRow-title a:hover { color: var(--loadi-p-600) !important; }
body:not(.admin) .fileRow-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--loadi-p-600);
  background: #f3eefc;
  border-radius: 6px;
  padding: 2px 7px;
}
/* Persian (IRANYekan) renders Latin ink HIGH in the line box (font box is
   asymmetric — ascent 10 / descent 5, the big descent reserved for Persian
   descenders that "JPG" doesn't use). This affects BOTH the badge text AND
   the filename beside it, so two separate corrections are needed, and only
   in RTL (LTR/Cairo already looks centred):
     1. raise the whole pill 2px so its centre meets the filename's optical
        (cap-height) centre — otherwise, being flex-centred on the filename's
        BOX, the pill reads lower than the filename's high-sitting ink;
     2. push the inner glyphs +1.5px back down so they sit centred within the
        (now-raised) pill, not high in it.
   Measured on-page: with both applied, filename caps / pill centre / badge
   caps all coincide (verified 244.63 == 244.63 == 244.63). LTR untouched. */
body.rtl:not(.admin) .fileRow-badge,
body[style*="direction:rtl"]:not(.admin) .fileRow-badge {
  transform: translateY(-2px);
}
body.rtl:not(.admin) .fileRow-badge > span,
body[style*="direction:rtl"]:not(.admin) .fileRow-badge > span {
  transform: translateY(1.5px);
}
body:not(.admin) .fileRow-date { font-size: 12.5px; color: var(--loadi-ink-faint); font-weight: 500; }
body:not(.admin) .fileRow-meta {
  flex: 0 0 auto;
  display: flex;
  gap: 22px;
  font-size: 13px; color: var(--loadi-ink-soft); font-weight: 600;
}
body:not(.admin) .fileRow-stat { display: inline-flex; align-items: center; gap: 6px; }
body:not(.admin) .fileRow-stat svg path { fill: var(--loadi-p-300); }
/* Persian (IRANYekan) digits/text have taller line-height + different
   ascent/descent than the Latin font, so their optical center sits higher
   than the geometric center flexbox uses — the fixed-size stat icon (already
   correctly box-centered) ends up looking shifted down next to Persian text
   even though nothing moved. Nudge the icon up slightly to match, RTL only. */
body.rtl:not(.admin) .fileRow-stat svg,
body[style*="direction:rtl"]:not(.admin) .fileRow-stat svg {
  transform: translateY(-1.5px);
}
body:not(.admin) .fileRow-addto {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0 !important; border-radius: 10px;
  font-weight: 700; font-size: 13px;
  padding: 9px 14px;
  background: #f3eefc !important; color: var(--loadi-p-600) !important;
}
body:not(.admin) .fileRow-addto:hover { background: #e9e0fa !important; color: var(--loadi-p-700) !important; }
body:not(.admin) .fileRow-addto.is-added { background: #e4f5ea !important; color: #1e9754 !important; }
@media (max-width: 575px) {
  body:not(.admin) .fileRow { flex-wrap: wrap; gap: 10px 14px; }
  body:not(.admin) .fileRow-main { flex-basis: calc(100% - 72px); }
  body:not(.admin) .fileRow-meta { margin-inline-start: 72px; }
  body:not(.admin) .fileRow-addto { margin-inline-start: auto; }
}

/* pagination */
body:not(.admin) .paging-centered { display: flex; justify-content: center; margin-top: 8px; }
body:not(.admin) .paging-centered a, body:not(.admin) .paging-centered span {
  color: rgba(255,255,255,.85);
}
body:not(.admin) .paging-centered .current,
body:not(.admin) .paging-centered a:hover { color: #fff; font-weight: 800; }

/* =====================================================================
   MAKE MONEY  —  earnings rate table (make_money.html)
   ===================================================================== */
body:not(.admin) #tier_tbl,
body:not(.admin) .table-rounded {
  background: var(--loadi-card);
  border-radius: var(--loadi-radius);
  box-shadow: var(--loadi-shadow);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
body:not(.admin) .table-rounded thead th { background: var(--loadi-page); border: 0; padding-block: 14px; }
body:not(.admin) .table-rounded tbody td { border-color: var(--loadi-line); border-top: 1px solid var(--loadi-line); }
body:not(.admin) .table-rounded .fs-5 { font-weight: 700; color: var(--loadi-ink); }
/* tier accent labels (kept distinct but on-palette) */
body:not(.admin) #tier_tbl .text-primary { color: var(--loadi-p-500) !important; }
body:not(.admin) #tier_tbl .text-success { color: #1e9754 !important; }
body:not(.admin) #tier_tbl .text-danger  { color: var(--loadi-pink) !important; }
body:not(.admin) #tier_tbl .text-warning { color: #d98a00 !important; }
/* the page sits on the gradient → put the table + rules in a white card feel */
body:not(.admin) section.page > h1.text-dark,
body:not(.admin) section.page > .col-xl-9 > h4.text-dark { color: #fff !important; }
/* rules card — no theme bullet; the engine's green checkmark (style.css
   .text-list li background) carries the list. Inline padding leaves room
   for that checkmark and mirrors automatically for RTL. */
body:not(.admin) .text-list { list-style: none; background: var(--loadi-card); border-radius: var(--loadi-radius); box-shadow: var(--loadi-shadow); padding-block: 18px; padding-inline: 44px 24px; }
body:not(.admin) .text-list li { color: var(--loadi-ink-soft); font-weight: 500; }

/* =====================================================================
   PREMIUM PACKAGES  —  buy section (payment_buy_with.html)
   ===================================================================== */
/* "Choose a package" heading sits on the gradient → white */
body:not(.admin) h2.text-dark.text-center { color: #fff !important; }

/* tab bar (Premium Plans / Pro Plans / Traffic Plans) → segmented pill,
   centered, matching the rest of the site */
body:not(.admin) .tab-buttons {
  position: relative;
  display: inline-flex;
  direction: ltr !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 4px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 5px;
  box-shadow: none;
  overflow: hidden;
}
body.rtl:not(.admin) .tab-buttons,
body[style*="direction:rtl"]:not(.admin) .tab-buttons {
  direction: rtl !important;
  flex-direction: row !important;
}
body:not(.admin) .tab-buttons .nav-link {
  position: relative;
  z-index: 1;
  border: 0 !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.82);
  font-weight: 700;
  font-size: 14.5px;
  padding: 9px 18px;
  white-space: nowrap;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .2s ease, background .2s ease;
}
body:not(.admin) .tab-buttons .nav-link:hover { color: #fff; }
body:not(.admin) .tab-buttons .nav-link.active {
  color: var(--loadi-p-700) !important;
}
body:not(.admin) .tab-buttons.loadi-seg-ready::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: var(--loadi-pill-left, 5px);
  width: var(--loadi-pill-width, calc(100% - 10px));
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.3);
  transition: left .26s cubic-bezier(.5, 1.4, .5, 1), width .26s cubic-bezier(.5, 1.4, .5, 1);
  pointer-events: none;
}
body:not(.admin) .tab-buttons.loadi-seg-resizing::before {
  transition: none !important;
}
body:not(.admin) .tab-buttons:not(.loadi-seg-ready) .nav-link.active {
  background: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.3) !important;
}
/* mobile: keep the segmented plan tabs from overflowing the page (horizontal
   scroll). The labels are short ("Premium" / "Premium Pro" / "Premium Traffic"),
   so we don't shrink the font — we just switch the control to a full-width,
   equal-width layout so the cells share the row evenly. The sliding pill keeps
   working — its width/left are recomputed by the ResizeObserver in app.js. */
@media (max-width: 575.98px) {
  body:not(.admin) .tab-buttons {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 2px;
    padding: 4px;
  }
  body:not(.admin) .tab-buttons .nav-link {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 6px;
    white-space: normal;
    text-align: center;
  }
}

/* plan cards */
body:not(.admin) .premiumPlan {
  background: var(--loadi-card);
  border-radius: var(--loadi-radius);
  box-shadow: var(--loadi-shadow);
  padding: 24px 18px;
  text-align: center;
  height: 100%;
  transition: transform .16s, box-shadow .16s;
}
body:not(.admin) .premiumPlan:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -26px rgba(40,8,80,.5); }
body:not(.admin) .premiumPlan .text-primary-emphasis { color: var(--loadi-p-600) !important; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
body:not(.admin) .premiumPlan .fs-1 { font-weight: 800; letter-spacing: -.02em; }
body:not(.admin) .premiumPlan .btn-primary { width: 100%; padding: 11px; }
body:not(.admin) .paybox { row-gap: 4px; }

/* =====================================================================
   RTL DROPDOWNS — the site loads the LTR Bootstrap build, so dropdown
   "boxes" (language / user / catalogue menus) anchor with a physical
   left edge and appear shifted to the LEFT of their trigger in Persian.
   Re-anchor them to the END (right) edge and mirror item internals.
   Popper sets inline left/transform on toggled menus, so we win with
   !important; menus that ARE already .dropdown-menu-end stay correct.
   ===================================================================== */
body.rtl .dropdown-menu,
body[style*="direction:rtl"] .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  text-align: right;
}
body.rtl .dropdown-menu[data-popper-placement] {
  /* Popper-positioned (JS) menus: neutralise its physical x-translate so
     the menu sits under its trigger instead of jumping left */
  inset-inline-start: auto !important;
}
body.rtl .dropdown-item { text-align: right; }
body.rtl .dropdown-item img,
body.rtl .dropdown-item svg { margin-left: 8px; margin-right: 0; }

/* payment modal */
body:not(.admin) .modal-content { border: 0; border-radius: var(--loadi-radius); box-shadow: var(--loadi-shadow); }
body:not(.admin) .modal-header { border-bottom: 1px solid var(--loadi-line); }
body:not(.admin) .paysys img { border-radius: 10px; }

/* =====================================================================
   DARK-MODE TOGGLE BUTTON (sun/moon) — header widget, theme-independent.
   The button itself inherits the header's .icon-btn colour; we only swap
   which glyph shows based on the active theme.
   ===================================================================== */
.loadi-theme-toggle svg { width: 20px; height: 20px; display: block; }
.loadi-theme-toggle .loadi-ic-sun { display: none; }
html[data-loadi-theme="dark"] .loadi-theme-toggle .loadi-ic-moon { display: none; }
html[data-loadi-theme="dark"] .loadi-theme-toggle .loadi-ic-sun { display: block; }

/* =====================================================================
   DARK MODE  —  activated by  <html data-loadi-theme="dark">
   Re-maps the design tokens to a Telegram-style blue-black slate and
   overrides the handful of hardcoded light surfaces (white cards,
   #f3edff insets, #fff pill borders, etc.). Same brand: Cairo type,
   blue accents on the slate. Toggle/persist via the script in main.html.
   Admin area is untouched (every rule guarded by body:not(.admin)).
   ===================================================================== */
html[data-loadi-theme="dark"] {
  color-scheme: dark; /* native checkboxes/radios/selects/scrollbars render dark */
  /* tokens — Telegram-style desaturated blue-black slate. */
  --loadi-ink: #dfe5ec; /* soft off-white — pure #fff is harsh on a dark page */
  --loadi-ink-soft: #aebac7;
  --loadi-ink-faint: #708499;
  --loadi-line: rgba(255,255,255,.08);
  --loadi-page: #232e3c;
  --loadi-card: #17212b;
  --loadi-p-500: #6ab2f2;
  --loadi-p-600: #84c0f6;
  --loadi-p-700: #a6d3f9;
  --loadi-p-300: #4a90d9;
  --loadi-pill-bg: #2b3947;
  --loadi-pill-ink: var(--loadi-p-700);
  --loadi-pink: #50a8eb;
  --loadi-pink-2: #6ab2f2;
  --loadi-pink-grad: linear-gradient(135deg, #4ea4f5 0%, #2f8de0 100%);
  --loadi-shadow-pink: 0 14px 30px -10px rgba(46,127,222,.55);
  --loadi-shadow: 0 24px 60px -30px rgba(0,0,0,.7), 0 6px 18px -12px rgba(0,0,0,.55);
}

/* page background → Telegram blue-black slate with a calm, dim aurora
   (cooler + lower-opacity than the default theme so it stays restful). */
html[data-loadi-theme="dark"] { background-color: #0b121b; }
html[data-loadi-theme="dark"] body:not(.admin) {
  background-color: transparent !important;
  background-image: none !important;
}
html[data-loadi-theme="dark"] body:not(.admin)::before {
  background:
      radial-gradient(38% 36% at 80% 10%, rgba(52,132,228,.30) 0%, transparent 72%),
      radial-gradient(40% 40% at 12% 4%, rgba(96,80,224,.26) 0%, transparent 72%);
}
html[data-loadi-theme="dark"] body:not(.admin)::after {
  background:
      radial-gradient(46% 44% at 90% 84%, rgba(40,116,200,.24) 0%, transparent 74%),
      radial-gradient(44% 42% at 6% 94%, rgba(80,72,180,.20) 0%, transparent 74%);
}

/* cards lose their shadow definition on dark → add a hairline border */
html[data-loadi-theme="dark"] body:not(.admin) .block,
html[data-loadi-theme="dark"] body:not(.admin) .login,
html[data-loadi-theme="dark"] body:not(.admin) .premiumTable,
html[data-loadi-theme="dark"] body:not(.admin) .premiumPlan,
html[data-loadi-theme="dark"] body:not(.admin) .fileItem,
html[data-loadi-theme="dark"] body:not(.admin) .fileRow,
html[data-loadi-theme="dark"] body:not(.admin) #tier_tbl,
html[data-loadi-theme="dark"] body:not(.admin) .table-rounded,
html[data-loadi-theme="dark"] body:not(.admin) .text-list,
html[data-loadi-theme="dark"] body:not(.admin) .modal-content {
  border: 1px solid var(--loadi-line);
}

/* segmented tabs — active pill + hover on dark surfaces */
html[data-loadi-theme="dark"] body:not(.admin) .block-tabs .nav-link.active {
  background: #2b3947 !important;
  color: var(--loadi-p-700);
}
html[data-loadi-theme="dark"] body:not(.admin) .block-tabs .nav-link:hover { background: rgba(255,255,255,.06); }

/* dropzone */
html[data-loadi-theme="dark"] body:not(.admin) .dropbox {
  border-color: rgba(255,255,255,.16);
  background: #1c2733;
}
html[data-loadi-theme="dark"] body:not(.admin) .dropbox:hover { border-color: var(--loadi-p-300); }
html[data-loadi-theme="dark"] body:not(.admin) .dropbox.dragover,
html[data-loadi-theme="dark"] body:not(.admin) .dropbox.dz-drag-hover { border-color: var(--loadi-p-500); background: #222f3d; }

/* nested upload-results panel + its inner tab bar + code field */
html[data-loadi-theme="dark"] body:not(.admin) .upload-form .uploadItem { background: #1c2733; }
html[data-loadi-theme="dark"] body:not(.admin) .upload-form .uploadItem .block-tabs { background: #0e1621; }
html[data-loadi-theme="dark"] body:not(.admin) .codes-textarea textarea.form-control,
html[data-loadi-theme="dark"] body:not(.admin) .codes-textarea textarea,
html[data-loadi-theme="dark"] body:not(.admin) .form-control {
  background: #0e1621 !important;
  color: var(--loadi-ink);
}
html[data-loadi-theme="dark"] body:not(.admin) .form-control::placeholder { color: var(--loadi-ink-faint); }
html[data-loadi-theme="dark"] body:not(.admin) .form-control:focus {
  border-color: var(--loadi-p-500);
  box-shadow: 0 0 0 3px rgba(106,178,242,.22);
}

/* "ready" / primary alert */
html[data-loadi-theme="dark"] body:not(.admin) #direct_link.alert-primary,
html[data-loadi-theme="dark"] body:not(.admin) .alert-primary {
  background: #222f3d;
  border: 1px solid rgba(106,178,242,.34);
  color: var(--loadi-p-700);
}
html[data-loadi-theme="dark"] body:not(.admin) .alert-success { background: #14331f; color: #5fd699; }
html[data-loadi-theme="dark"] body:not(.admin) .alert-danger { background: #3a1717; color: #f3878a; }

/* pricing table pills — border is the gap on the card, so match card colour */
html[data-loadi-theme="dark"] body:not(.admin) .premiumTable .col { border-color: var(--loadi-card) !important; }
html[data-loadi-theme="dark"] body:not(.admin) .premiumTable .col.premium { background-color: #232e3c !important; }
html[data-loadi-theme="dark"] body:not(.admin) .premiumTable svg[name="icon_no"] path { fill: #5c5277 !important; }

/* catalogue file cards */
html[data-loadi-theme="dark"] body:not(.admin) .fileItem-cover {
  background: linear-gradient(160deg, #232e3c, #1c2733);
}
html[data-loadi-theme="dark"] body:not(.admin) .fileItem:hover { box-shadow: 0 26px 60px -28px rgba(0,0,0,.75); }
html[data-loadi-theme="dark"] body:not(.admin) .fileItem-addto {
  background: rgba(43,57,71,.92) !important;
  color: var(--loadi-p-700) !important;
}
html[data-loadi-theme="dark"] body:not(.admin) .fileItem-addto:hover { background: #2b3947 !important; }

/* file rows (catalogue.html) — the design's dark section didn't cover these
   new classes, so map them onto the same dark surfaces used elsewhere
   (fileItem-cover gradient, fileItem-addto pill, tab-pill/ext-badge slate,
   alert-success green) rather than leaving the light lavender/green hardcoded
   colours to render too-bright on the dark page. */
html[data-loadi-theme="dark"] body:not(.admin) .fileRow-cover {
  background: linear-gradient(160deg, #232e3c, #1c2733);
}
html[data-loadi-theme="dark"] body:not(.admin) .fileRow:hover { box-shadow: 0 26px 60px -28px rgba(0,0,0,.75); }
html[data-loadi-theme="dark"] body:not(.admin) .fileRow-badge {
  background: #2b3947 !important;
  color: var(--loadi-p-700) !important;
}
html[data-loadi-theme="dark"] body:not(.admin) .fileRow-addto {
  background: rgba(43,57,71,.92) !important;
  color: var(--loadi-p-700) !important;
}
html[data-loadi-theme="dark"] body:not(.admin) .fileRow-addto:hover { background: #2b3947 !important; }
html[data-loadi-theme="dark"] body:not(.admin) .fileRow-addto.is-added {
  background: #14331f !important;
  color: #5fd699 !important;
}

/* search field + earnings table head */
html[data-loadi-theme="dark"] body:not(.admin) .table-rounded thead th { background: #232e3c; }
html[data-loadi-theme="dark"] body:not(.admin) .modal-header { border-bottom: 1px solid var(--loadi-line); }

/* make_money earnings table — Bootstrap .table forces a white cell bg via
   --bs-table-bg, and style.css draws #C9CED5 grid lines; both read as a pure
   white table on dark. Kill the white fill and repaint the grid lines. */
html[data-loadi-theme="dark"] body:not(.admin) .table { --bs-table-bg: transparent; --bs-table-color: var(--loadi-ink); color: var(--loadi-ink); }
html[data-loadi-theme="dark"] body:not(.admin) .table-rounded,
html[data-loadi-theme="dark"] body:not(.admin) .table-rounded th + th,
html[data-loadi-theme="dark"] body:not(.admin) .table-rounded td + td,
html[data-loadi-theme="dark"] body:not(.admin) .table-rounded tbody td { border-color: var(--loadi-line) !important; }
html[data-loadi-theme="dark"] body:not(.admin) .table-rounded .fs-5,
html[data-loadi-theme="dark"] body:not(.admin) #tier_tbl td { color: var(--loadi-ink); }
html[data-loadi-theme="dark"] body:not(.admin) #tier_tbl .text-warning { color: #e0a23a !important; }

/* "Choose a package" segmented tab bar + active pill */
html[data-loadi-theme="dark"] body:not(.admin) .tab-buttons {
  background: rgba(255,255,255,.06);
  border-color: var(--loadi-line);
}
html[data-loadi-theme="dark"] body:not(.admin) .tab-buttons .nav-link { color: var(--loadi-ink-soft); }
html[data-loadi-theme="dark"] body:not(.admin) .tab-buttons .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
html[data-loadi-theme="dark"] body:not(.admin) .tab-buttons .nav-link.active {
  background: #2b3947 !important;
  color: var(--loadi-p-700) !important;
  box-shadow: none;
}
html[data-loadi-theme="dark"] body:not(.admin) .premiumPlan .text-primary-emphasis,
html[data-loadi-theme="dark"] body:not(.admin) .premiumTable-heading .col.premium .text-dark { color: var(--loadi-p-600) !important; }

/* ---- dark patches for Loadi's local (non-design) public divergences ----
   `.upload-form .dropbox` (border) and `.dropbox:hover` (background) are more
   specific local rules that hardcode light surfaces, so the base dark .dropbox
   rule doesn't reach them. */
html[data-loadi-theme="dark"] body:not(.admin) .upload-form .dropbox { border-color: rgba(255,255,255,.16); }
html[data-loadi-theme="dark"] body:not(.admin) .dropbox:hover { background: #222f3d; }

/* segmented tab pill (.block-tabs + premium .tab-buttons): the sliding active
   indicator (::before) and the no-JS fallback are hardcoded WHITE with a purple
   shadow — on dark that shows a white button sliding underneath and a light edge
   around the active tab. Repaint the pill to slate and drop the shadow. */
html[data-loadi-theme="dark"] body:not(.admin) .block-tabs.loadi-seg-ready::before,
html[data-loadi-theme="dark"] body:not(.admin) .tab-buttons.loadi-seg-ready::before {
  background: #2b3947 !important;
  box-shadow: none !important;
}
html[data-loadi-theme="dark"] body:not(.admin) .block-tabs:not(.loadi-seg-ready) .nav-link.active,
html[data-loadi-theme="dark"] body:not(.admin) .tab-buttons:not(.loadi-seg-ready) .nav-link.active {
  background: #2b3947 !important;
  box-shadow: none !important;
}

/* dropdown menus (language / user / catalogue) are white by default → slate card */
html[data-loadi-theme="dark"] body:not(.admin) .dropdown-menu {
  background: var(--loadi-card);
  border: 1px solid var(--loadi-line);
}
html[data-loadi-theme="dark"] body:not(.admin) .dropdown-item { color: var(--loadi-ink-soft); }
html[data-loadi-theme="dark"] body:not(.admin) .dropdown-item:hover,
html[data-loadi-theme="dark"] body:not(.admin) .dropdown-item:focus { background: rgba(255,255,255,.06); color: var(--loadi-ink); }
html[data-loadi-theme="dark"] body:not(.admin) .dropdown-divider { border-color: var(--loadi-line); }

/* tables on public pages (make_money tiers): hover must lighten, never go white */
html[data-loadi-theme="dark"] body:not(.admin) .table-hover > tbody > tr:hover > *,
html[data-loadi-theme="dark"] body:not(.admin) .table > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  box-shadow: none !important;
  background-color: rgba(255,255,255,.05) !important;
}

/* Bootstrap .link-dark (#182137) file-name links → readable light ink on dark */
html[data-loadi-theme="dark"] body:not(.admin) .link-dark { color: var(--loadi-ink) !important; }
html[data-loadi-theme="dark"] body:not(.admin) .link-dark:hover { color: var(--loadi-p-700) !important; }