/* ===== Blaron Theme System: Dark/Light with system sync ===== */

:root {
  /* Core */
  --bg-dark: #05070a;
  --bg-card: #0f1115;
  --bg-card-hover: rgba(48, 92, 222, 0.05);
  --text-main: #ffffff;
  --text-muted: #9ca3af;
  --border-color: rgba(255, 255, 255, 0.08);

  /* Primary */
  --primary: #305cde;
  --primary-hover: #406efa;
  --primary-glow: rgba(48, 92, 222, 0.3);

  /* Gradients */
  --gradient-start: #ffffff;
  --gradient-end: #a0aabf;

  /* Surfaces */
  --bg-nav: rgba(5, 7, 10, 0.8);
  --bg-section: #0a0a0a;
  --bg-input: rgba(0, 0, 0, 0.2);
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --shadow-color: rgba(0, 0, 0, 0.5);

  /* Derived: replace hardcoded rgba patterns */
  --hover-bg: rgba(255, 255, 255, 0.05);
  --hover-bg-strong: rgba(255, 255, 255, 0.1);
  --subtle-border: rgba(255, 255, 255, 0.03);
  --card-bg-alt: #111524;
  --card-bg-alt-hover: #151a2d;
  --card-bg-deep: #0d1120;
  --card-bg-panel: #0e1324;
  --dropdown-bg: #141821;
  --modal-overlay: rgba(0, 0, 0, 0.6);
  --drop-border: #2a3246;
  --drop-bg: #121624;
  --drop-hover-border: #3f4c6b;
  --drop-hover-bg: #121a2a;
  --badge-cancel-border: rgba(239, 68, 68, 0.35);
  --badge-cancel-text: #fecaca;
  --badge-cancel-bg: rgba(239, 68, 68, 0.08);
  --placeholder: #6b7280;
  --accent-checkbox: #305cde;

  /* Status (same in both themes) */
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;

  /* Typography */
  --font-heading: "Outfit", sans-serif;
  --font-body: "Inter", sans-serif;
  --transition: all 0.3s ease;

  /* Motion tokens (Part 7.2). Apply to transform / opacity transitions only.
     --dur-fast is for hover and press, --dur-base for modals and drawers,
     --dur-slow for the FAB and other large surfaces. */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Z-index tiers (Part 7.2). New work uses these instead of ad-hoc values.
     Existing high-magnitude values further down the file are kept for now;
     this token system is the target for opportunistic cleanup. */
  --z-base: 0;
  --z-card-hover: 1;
  --z-sticky-header: 100;
  --z-drawer: 200;
  --z-fab: 300;
  --z-modal-backdrop: 400;
  --z-modal: 401;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* System preference: light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-dark: #f9fafb;
    --bg-card: #ffffff;
    --bg-card-hover: rgba(48, 92, 222, 0.08);
    --text-main: #111827;
    --text-muted: #4b5563;
    --border-color: rgba(0, 0, 0, 0.1);
    --primary: #305cde;
    --primary-hover: #2242a3;
    --primary-glow: rgba(48, 92, 222, 0.15);
    --gradient-start: #111827;
    --gradient-end: #4b5563;
    --bg-nav: rgba(249, 250, 251, 0.8);
    --bg-section: #f3f4f6;
    --bg-input: rgba(0, 0, 0, 0.03);
    --bg-overlay: rgba(255, 255, 255, 0.8);
    --shadow-color: rgba(0, 0, 0, 0.05);
    --hover-bg: rgba(0, 0, 0, 0.05);
    --hover-bg-strong: rgba(0, 0, 0, 0.08);
    --subtle-border: rgba(0, 0, 0, 0.05);
    --card-bg-alt: #f3f4f6;
    --card-bg-alt-hover: #e8eaef;
    --card-bg-deep: #ebedf2;
    --card-bg-panel: #f0f1f5;
    --dropdown-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.4);
    --drop-border: rgba(0, 0, 0, 0.15);
    --drop-bg: #f5f6fa;
    --drop-hover-border: rgba(48, 92, 222, 0.3);
    --drop-hover-bg: #eef0f8;
    --badge-cancel-text: #dc2626;
    --placeholder: #9ca3af;
  }
}

/* Explicit light */
:root[data-theme="light"] {
  --bg-dark: #f9fafb;
  --bg-card: #ffffff;
  --bg-card-hover: rgba(48, 92, 222, 0.08);
  --text-main: #111827;
  --text-muted: #4b5563;
  --border-color: rgba(0, 0, 0, 0.1);
  --primary: #305cde;
  --primary-hover: #2242a3;
  --primary-glow: rgba(48, 92, 222, 0.15);
  --gradient-start: #111827;
  --gradient-end: #4b5563;
  --bg-nav: rgba(249, 250, 251, 0.8);
  --bg-section: #f3f4f6;
  --bg-input: rgba(0, 0, 0, 0.03);
  --bg-overlay: rgba(255, 255, 255, 0.8);
  --shadow-color: rgba(0, 0, 0, 0.05);
  --hover-bg: rgba(0, 0, 0, 0.05);
  --hover-bg-strong: rgba(0, 0, 0, 0.08);
  --subtle-border: rgba(0, 0, 0, 0.05);
  --card-bg-alt: #f3f4f6;
  --card-bg-alt-hover: #e8eaef;
  --card-bg-deep: #ebedf2;
  --card-bg-panel: #f0f1f5;
  --dropdown-bg: #ffffff;
  --modal-overlay: rgba(0, 0, 0, 0.4);
  --drop-border: rgba(0, 0, 0, 0.15);
  --drop-bg: #f5f6fa;
  --drop-hover-border: rgba(48, 92, 222, 0.3);
  --drop-hover-bg: #eef0f8;
  --badge-cancel-text: #dc2626;
  --placeholder: #9ca3af;
}

/* Explicit dark (override system light) */
:root[data-theme="dark"] {
  --bg-dark: #05070a;
  --bg-card: #0f1115;
  --bg-card-hover: rgba(48, 92, 222, 0.05);
  --text-main: #ffffff;
  --text-muted: #9ca3af;
  --border-color: rgba(255, 255, 255, 0.08);
  --primary: #305cde;
  --primary-hover: #406efa;
  --primary-glow: rgba(48, 92, 222, 0.3);
  --gradient-start: #ffffff;
  --gradient-end: #a0aabf;
  --bg-nav: rgba(5, 7, 10, 0.8);
  --bg-section: #0a0a0a;
  --bg-input: rgba(0, 0, 0, 0.2);
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --hover-bg: rgba(255, 255, 255, 0.05);
  --hover-bg-strong: rgba(255, 255, 255, 0.1);
  --subtle-border: rgba(255, 255, 255, 0.03);
  --card-bg-alt: #111524;
  --card-bg-alt-hover: #151a2d;
  --card-bg-deep: #0d1120;
  --card-bg-panel: #0e1324;
  --dropdown-bg: #141821;
  --modal-overlay: rgba(0, 0, 0, 0.6);
  --drop-border: #2a3246;
  --drop-bg: #121624;
  --drop-hover-border: #3f4c6b;
  --drop-hover-bg: #121a2a;
  --badge-cancel-text: #fecaca;
  --placeholder: #6b7280;
}

* {
  box-sizing: border-box;
}

/* ========================================
   UX polish (Part 7.2)

   Page-wide smoothness rules: smooth scrolling, manipulation touch-action
   to remove the legacy 300ms tap delay on iOS, and a global reduced-motion
   override. The motion / z-index / duration tokens live up in :root.
   ======================================== */

html {
  scroll-behavior: smooth;
}

/* Interactive elements get touch-action: manipulation so iOS / older Safari
   skip the 300ms tap delay and the double-tap-zoom gesture. Form inputs
   stay alone (they need the default to permit text selection). */
button,
a,
.nav-link,
.nav-item,
.file-item,
.btn,
.fab,
[role="button"] {
  touch-action: manipulation;
}

/* Inputs on mobile must use at least 16px to prevent iOS auto-zoom on focus.
   Smaller font-size triggers a viewport zoom and the typing flow feels janky. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* Respect prefers-reduced-motion globally. The user has explicitly asked the
   OS not to animate, so we cut every transition and animation to 1ms.
   The original tiny block further down (scoped only to .shake) is now
   subsumed by this one. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Make the HTML5 `hidden` attribute an unconditional kill-switch. The UA
   stylesheet ships `[hidden] { display: none }`, but any project rule with
   the same specificity (e.g. `.credits-hub-loading { display: flex }`) wins
   on source order and leaves the element visible. This `!important` makes
   `hidden` win against any other rule, matching the HTML5 spec intent. */
[hidden] { display: none !important; }

/* Floating action button (Part 7.3). Single entry point for new uploads
   and folder creation on browse_page. Replaces the top-header "+" button.
   Hides via .fab-hidden (translateY off-screen). Shifts up via .fab-shifted
   when the upload manager is docked at the same corner. */
.fab {
  position: fixed;
  /* More breathing room from the viewport corner than the original 24px.
     env(safe-area-inset-*) lets the FAB sit clear of the iOS home indicator
     and any rounded-corner cutouts on modern phones. The 0px fallback keeps
     the rule sane on browsers that don't expose those env vars. */
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  right: calc(32px + env(safe-area-inset-right, 0px));
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-fab);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  /* Transition only `transform` and `opacity` per the Part 7.2 motion rule.
     `bottom` is set instantly when `.fab-shifted` flips — the upload-manager
     dock state changes rarely enough that an instant snap is acceptable, and
     animating layout-affecting properties violates the polish rule. */
  transition:
    transform var(--dur-base) var(--ease-out-soft),
    box-shadow var(--dur-fast) var(--ease-out-soft),
    opacity var(--dur-base) var(--ease-out-soft);
  /* Opacity-only entry animation. The original version animated scale too,
     which left the FAB stuck at scale(0.6) when the tab was backgrounded
     during page load (Chrome pauses CSS animations on hidden tabs and they
     don't always resume cleanly). Scale animations also block CDP-driven
     click tests because the element's bounds never settle. Opacity is
     compositor-only and degrades gracefully. */
  animation: fab-enter var(--dur-slow) var(--ease-out-soft) forwards;
}
.fab i {
  font-size: 24px;
  line-height: 1;
}
.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}
.fab:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.fab:focus-visible {
  outline: 2px solid var(--primary-hover);
  outline-offset: 3px;
}
/* Hidden state: slide down off-screen. Used for modals, drawers, scroll-down,
   on-screen keyboard, system folders, and Recycle Bin. */
.fab.fab-hidden {
  /* translateY(120%) was only 67px on a 56px FAB, leaving the top ~21px
     still inside the viewport (anchored 32px from bottom). Use a calc that
     guarantees the FAB clears its bottom anchor plus a small buffer plus
     the iOS safe-area inset, so it fully tucks away on every device. */
  transform: translateY(calc(100% + 40px + env(safe-area-inset-bottom, 0px)));
  opacity: 0;
  pointer-events: none;
}
/* Shifted state: when the upload manager strip is visible, lift the FAB so
   it sits above the strip instead of overlapping it. Maintains the same
   ~72px upward delta from the base position. */
.fab.fab-shifted {
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}
@keyframes fab-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 768px) {
  .fab {
    width: 64px;
    height: 64px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    right: calc(20px + env(safe-area-inset-right, 0px));
  }
  .fab i {
    font-size: 28px;
  }
  .fab.fab-shifted {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .fab {
    animation: none;
  }
}

/* Offline banner (Part 7.2). Anchored to the top of the viewport, slides in
   from above when navigator.onLine flips to false. Above modals so users see
   it even with a dialog open. */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  background: var(--danger);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-out-soft);
  pointer-events: none;
}
.offline-banner.visible {
  transform: translateY(0);
  pointer-events: auto;
}

/* ========================================
   Native UI replacement (Part 7.1)

   Replaces browser-default scrollbars, selects, checkboxes, range sliders,
   number-input spinners, and search-input clear buttons with theme-matched
   versions. Rules sit near the top of the file so every nested element
   inherits them; element-specific overrides further down still win where
   they are intentional (e.g. .torrent-select-name hides its scrollbar).
   ======================================== */

/* Thin themed scrollbars on fine-pointer devices (desktop / laptop).
   Touch devices use the OS-native auto-hiding scrollbar so we leave them
   alone via `@media (pointer: fine)`. */
@media (pointer: fine) {
  html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }

  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
    background-clip: padding-box;
    border: 2px solid transparent;
  }

  *::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* Native number-input spinners and search clear "x" are unstyleable across
   browsers; hide them globally so our inputs read as one consistent style. */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Shared <select> styling. Existing `.pp-sort` predates this and stays as
   its own selector; new code should apply `.select` (and wrap in
   `.select-wrap` if a custom chevron position is needed). */
.select-wrap {
  position: relative;
  display: inline-block;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--card-bg-alt);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 36px 10px 14px;
  min-height: 42px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.select:hover {
  border-color: var(--drop-hover-border);
}

.select:focus-visible {
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Shared checkbox styling. Apply `.checkbox` to any user-facing checkbox.
   Wrap with a `<label class="checkbox-label">` to get a 44 by 44 px hit
   area on touch widths via padding on the label. */
.checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-input);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background 0.15s, border-color 0.15s;
}

.checkbox:hover {
  border-color: var(--drop-hover-border);
}

.checkbox:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
}

/* Tick glyph - a small rectangle with right+bottom borders, rotated 45deg
   so the two borders form the checkmark. Centered via translate, then
   nudged up 1px so the optical center lines up with the box center. */
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, calc(-50% - 1px)) rotate(45deg);
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
  .checkbox-label {
    min-height: 44px;
    padding: 4px 2px;
  }
}

/* Shared <input type="range"> slider. The `.range` class makes a slider
   theme-compliant across Chromium and Firefox. Track and thumb both
   styled per-browser because the pseudo-elements differ. */
.range {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--border-color);
  outline: none;
  cursor: pointer;
}

.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border-color);
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--text-main);
  cursor: pointer;
  margin-top: -6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border-color);
}

.range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--text-main);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--primary-glow);
}


body {
  margin: 0;
  padding: 40px 16px 0;
  /* Removing bottom padding, footer handles it */
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.card {
  width: 100%;
  max-width: 760px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

h2 {
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text-main);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
}

/* Icon Alignment Helper */
i.ph {
  vertical-align: middle;
  font-size: 1.25em;
  /* Scale relative to text */
}

/* Specific alignments */
.btn i.ph {
  font-size: 18px;
}

.nav-link i.ph {
  font-size: 20px;
  color: var(--text-muted);
  transition: color .2s;
}

.nav-link:hover i.ph,
.nav-link.active i.ph {
  color: var(--primary);
  /* Highlight icon on active/hover */
}

p.sub {
  margin: 0 0 24px;
  color: var(--text-muted);
}

/* ===== Drop Zone ===== */
.drop {
  border: 2px dashed var(--drop-border);
  border-radius: 16px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color .2s ease, background .2s ease;
  cursor: pointer;
  padding: 16px;
  background: var(--drop-bg);
}

.drop.hover {
  border-color: var(--drop-hover-border);
  background: var(--drop-hover-bg);
}

.drop small {
  color: var(--text-muted);
}

input[type="file"] {
  display: none;
}

/* ===== Input Panel (Save from Link) ===== */
.panel {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  background: var(--card-bg-alt);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label {
  font-size: 13px;
  color: var(--text-muted);
}

.input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--card-bg-deep);
  color: var(--text-main);
  outline: none;
}

.input::placeholder {
  color: var(--placeholder);
}

/* ===== Buttons & Layout ===== */
.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 16px;
}

/* Adjust row margin for the input panel version if needed, but 16px is standard across both pages mostly. 
   save_from_link had margin-top:4px, upload_page had 16px. We'll default to 16px. 
   We can add a specific class if needed, but spacing consistency is good. */

.btn {
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.btn:active {
  transform: scale(0.96);
}

.btn-grad {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: white;
  box-shadow: 0 4px 15px var(--primary-glow);
  /* Indigo shadow */
}

.btn-grad:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  font-weight: 500;
}
.btn-primary:hover {
  background: var(--primary-hover);
}
.btn-secondary {
  background: var(--card-bg-alt);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  font-weight: 500;
}
.btn-secondary:hover {
  background: var(--card-bg-alt-hover);
  border-color: var(--primary);
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
}
.btn-ghost:hover {
  background: var(--hover-bg-strong);
}

.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.btn-cancel {
  background: transparent;
  border: 1px solid var(--badge-cancel-border);
  color: var(--badge-cancel-text);
}

.btn-cancel:hover {
  filter: brightness(1.05);
}

.btn-telegram {
  background-color: #0088cc;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== Metadata & Progress ===== */
.meta {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg-alt);
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.progress {
  height: 12px;
  background: var(--card-bg-deep);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
}

.bar {
  height: 100%;
  width: 0%;
  background-image: linear-gradient(135deg, var(--primary), var(--primary-hover));
  transition: width .25s ease;
}

.stats {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.stats .pct {
  color: var(--text-main);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 2px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--card-bg-deep);
}

.stats .sep {
  opacity: .45;
}

.stats .item {
  white-space: nowrap;
}

.stats .badge-cancelled {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--badge-cancel-border);
  color: var(--badge-cancel-text);
  background: var(--badge-cancel-bg);
  font-weight: 700;
}

/* ===== Result Card ===== */
.result-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--card-bg-panel);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result-title {
  font-weight: 700;
  letter-spacing: .2px;
}

.link-line {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  word-break: break-all;
}

.stream-link {
  text-decoration: none;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== Navbar ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: var(--bg-nav);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000;
  box-shadow: 0 4px 20px var(--shadow-color);
}

.nav-brand {
  font-weight: 700;
  font-size: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-item {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  /* Ensure icon and text align */
  align-items: center;
  gap: 10px;
}

.nav-item:hover,
.nav-item.active {
  color: var(--text-main);
  background: var(--hover-bg);
  transform: translateX(4px);
  /* Subtle nudge */
}

/* Nav Item Icons specific alignment */
.nav-item i.ph {
  font-size: 20px;
  color: var(--text-muted);
  transition: color 0.2s;
}

.nav-item:hover i.ph,
.nav-item.active i.ph {
  color: var(--primary);
}

/* Page padding adjustment for fixed navbar */
body {
  padding-top: 80px;
  /* 60px navbar + 20px space */
}

/* Hide old menu styles if any remain referenced, but mostly replaced above */

/* ===== Auth & Forms ===== */
.auth-card {
  max-width: 400px;
  text-align: center;
}

.auth-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.btn-google {
  background: white;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .2s;
}

.btn-google:hover {
  background: #f1f1f1;
}

.btn-google img {
  width: 18px;
  height: 18px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 12px;
  margin: 8px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.auth-footer {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 16px;
}

.auth-footer a {
  color: var(--primary-hover);
  text-decoration: none;
  font-weight: 600;
}

.full-width {
  width: 100%;
}

.checkbox-field {
  flex-direction: row;
  align-items: center;
  font-size: 13px;
}

.status-text {
  font-size: 12px;
  margin-top: 2px;
  display: block;
}

.status-text.success {
  color: var(--ok);
}

.status-text.error {
  color: var(--danger);
}

.status-text.muted {
  color: var(--text-muted);
}

/* ===== Browsing UI (Grid/List) ===== */
.breadcrumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.breadcrumbs a {
  text-decoration: none;
  color: var(--text-main);
  font-weight: 500;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs .sep {
  opacity: 0.5;
}

.file-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-bottom: 120px;
}

.file-item {
  background: var(--card-bg-alt);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.file-item.selected {
  background: var(--bg-card-hover);
  border-color: var(--primary);
}

.file-item:hover {
  border-color: var(--primary-hover);
  background: var(--card-bg-alt-hover);
}

.file-item:active {
  transform: scale(0.98);
  background: var(--card-bg-alt-hover);
}

.file-icon {
  font-size: 24px;
  margin-bottom: 0;
  display: block;
  flex-shrink: 0;
}

.file-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  text-align: left;
}

.folder-item .file-icon {
  color: var(--warn);
}

/* Action Menu for Files */
.item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all .2s;
}

.action-btn:hover {
  background: var(--hover-bg-strong);
  color: var(--text-main);
}

/* V2S "Analyze with AI" action: brand-gradient sparkle so it reads as special
   next to the plain action icons. The gradient is painted on the icon glyph. */
.ai-action-btn i {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ai-action-btn:disabled { cursor: default; }

/* Context Menu */
/* Context Menu */
.context-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

.context-menu {
  position: fixed;
  /* Fixed to viewport to avoid scroll issues */
  background: var(--dropdown-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 40px var(--shadow-color), 0 0 0 1px var(--subtle-border);
  z-index: 9999;
  /* Top z-index */
  min-width: 200px;
  padding: 6px;
  display: none;
  flex-direction: column;

  /* Animation */
  opacity: 0;
  transform: scale(0.95);
  transform-origin: top left;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.2, 0, 0.13, 1.5);
  pointer-events: none;
  /* Ignore clicks when hidden/animating out */
}

.context-menu.show {
  display: flex;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.context-item {
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-main);
  border-radius: 8px;
  transition: background .1s;
}

.context-item i.ph {
  font-size: 18px;
  color: var(--text-muted);
}

.context-item:hover i.ph {
  color: var(--text-main);
}

.context-item:hover {
  background: var(--hover-bg);
  /* More visible hover */
}

.context-item.delete {
  color: var(--danger);
}

/* Folder Navigator in Modal */
.folder-nav-container {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg-deep);
  max-height: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.folder-nav-header {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.folder-nav-list {
  overflow-y: auto;
  flex-grow: 1;
}

.folder-nav-item {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--subtle-border);
  font-size: 14px;
}

.folder-nav-item:hover {
  background: var(--hover-bg);
}

.folder-nav-item:last-child {
  border-bottom: none;
}


/* ===== Profile Menu Styles ===== */
.profile-menu-container {
  position: relative;
  display: inline-block;
}

.profile-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.profile-btn img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--hover-bg-strong);
  transition: border-color 0.2s;
}

.profile-btn:hover img {
  border-color: var(--primary);
}

.profile-avatar-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.profile-avatar-btn:hover {
  transform: scale(1.05);
}

.profile-avatar-btn img {
  transition: border-color 0.2s;
}

.profile-avatar-btn:hover img {
  border-color: var(--primary);
}

/* Profile Dropdown - Fixed positioning relative to parent button usually, 
   but for "floating" feel we use absolute/fixed with JS positioning. */
.profile-dropdown {
  position: fixed;
  /* Use fixed to stay on top and simple positioning */
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 260px;
  /* Fixed width */
  box-shadow: 0 10px 40px var(--shadow-color);
  display: none;
  flex-direction: column;
  z-index: 9999;
  padding: 8px;

  /* Animation */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
  pointer-events: none;
}

.profile-dropdown.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Defensive cap: any profile-style dropdown must fit within the viewport.
   The positioning JS measures actual content height and applies a tighter
   max-height when needed; this rule is the floor so even an un-measured
   dropdown can't extend off-screen. */
.profile-dropdown {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.profile-header {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-input);
}

.profile-header img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
}

.profile-info {
  display: flex;
  flex-direction: column;
}

.profile-name {
  font-weight: 700;
  color: var(--text-main);
  font-size: 16px;
}

.profile-email {
  color: var(--text-muted);
  font-size: 13px;
  word-break: break-all;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0;
}

.dropdown-section-heading {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dropdown-section-heading + .dropdown-section-heading,
.dropdown-section-heading:first-child {
  padding-top: 8px;
}

.dropdown-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.2s;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
}

.dropdown-item:hover {
  background: var(--hover-bg);
  /* Consistent hover */
}

.dropdown-item.text-danger {
  color: var(--danger);
}

.dropdown-item.text-danger:hover {
  background: var(--badge-cancel-bg);
}

/* ===== Dialog/Modal ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--modal-overlay);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.modal-overlay.open {
  display: flex;
}

.modal {
  background: var(--dropdown-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 50px var(--shadow-color);
}

/* On narrow phones, force any modal (including those with larger inline
   max-width: 550/600px overrides) to fit the viewport with breathing room. */
@media (max-width: 480px) {
  .modal {
    max-width: 92vw !important;
    padding: clamp(14px, 4vw, 24px);
  }
}

.modal h3 {
  margin: 0 0 16px;
  font-size: 18px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ===== Footer ===== */
.main-footer {
  background: var(--bg-section);
  border-top: 1px solid var(--border-color);
  padding: 40px 20px 20px;
  margin-top: 60px;
  width: 100%;
}

.footer-content {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

.footer-section {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

@media (min-width: 600px) {
  .footer-section {
    text-align: left;
    justify-content: flex-start;
  }

  .footer-content {
    justify-content: space-between;
  }
}

.footer-section h3 {
  font-size: 16px;
  color: var(--text-main);
  margin: 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
  justify-content: center;
}

@media (min-width: 600px) {
  .footer-links a {
    justify-content: flex-start;
  }
}

.footer-links a:hover {
  color: var(--primary-hover);
}

.bot-link {
  color: var(--primary-hover) !important;
  font-weight: 500;
}

.footer-bottom {
  max-width: 900px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  font-size: 13px;
  color: #52525b;
}

/* ===== Landing Page ===== */
.landing-hero {
  text-align: center;
  padding: 60px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.landing-hero h1 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--text-main), #9aa3b2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}

.landing-hero p {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 30px;
}

.landing-section {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

.landing-section h2 {
  font-size: 32px;
  margin-bottom: 30px;
  text-align: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing-section p {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 16px;
}

.landing-section ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}

.landing-section li {
  position: relative;
  padding-left: 24px;
  color: var(--text-main);
  line-height: 1.5;
}

.landing-section li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: bold;
}

.btn-cta {
  display: inline-block;
  background-image: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: white;
  padding: 16px 32px;
  border-radius: 99px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, filter 0.2s;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

.btn-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* ===== Redesigned Landing Elements ===== */
.landing-hero-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px 40px;
  text-align: left;
}

@media (min-width: 850px) {
  .landing-hero-split {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .landing-hero-split .hero-content {
    flex: 1;
    max-width: 550px;
  }

  .landing-hero-split .hero-auth {
    flex: 0 0 400px;
  }
}

.landing-hero-split h1 {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--text-main), #9aa3b2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.2;
}

.landing-hero-split p {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  border-color: var(--primary);
}

.feature-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.feature-card h3 {
  font-size: 20px;
  margin: 0;
  color: var(--text-main);
}

.feature-card p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* ===== Google-like Auth Card ===== */
.google-auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 40px 32px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.google-auth-card h2 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 8px;
  color: var(--text-main);
}

.google-auth-card p.sub {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.google-auth-card .field {
  margin-bottom: 16px;
  text-align: left;
}

.google-input {
  width: 100%;
  padding: 13px 15px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-main);
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.google-input:focus {
  border-color: var(--primary);
  border-width: 2px;
  padding: 12px 14px;
  /* Compensate for thicker border */
  background: rgba(0, 0, 0, 0.1);
}

.google-input::placeholder {
  color: var(--text-muted);
}

.google-btn-primary {
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, filter 0.2s;
  width: 100%;
  margin-top: 8px;
}

.google-btn-primary:hover {
  filter: brightness(1.1);
}

.google-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: none;
}

.google-separator {
  position: relative;
  text-align: center;
  margin: 24px 0;
  color: var(--text-muted);
  font-size: 14px;
}

.google-separator::before,
.google-separator::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 20px);
  height: 1px;
  background: var(--border-color);
}

.google-separator::before {
  left: 0;
}

.google-separator::after {
  right: 0;
}

.google-btn-google {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 4px;
  padding: 10px 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s;
}

.google-btn-google:hover {
  background: rgba(255, 255, 255, 0.05);
}

.google-btn-google img {
  width: 20px;
  height: 20px;
}

/* Legal Pages */
.legal-container {
  max-width: 800px;
  margin: 40px auto;
  width: 100%;
  padding: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
}

.legal-container h1 {
  font-size: 32px;
  margin-bottom: 40px;
  text-align: center;
  color: var(--text-main);
}

.legal-container h3 {
  color: var(--text-main);
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 20px;
}

.legal-container p,
.legal-container ul {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 16px;
}

.legal-container ul {
  list-style: disc;
  padding-left: 20px;
  margin-top: 10px;
}

.legal-container li {
  margin-bottom: 8px;
}

.legal-container a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: rgba(48, 92, 222, 0.4);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.legal-container a:hover {
  color: var(--primary-hover);
  text-decoration-color: var(--primary-hover);
}

.legal-container a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Credit grant popup. One-time celebratory modal shown when the user has a
   pending bulk grant in /api/me. Reuses .modal-overlay / .modal layout so
   the standard open/close transitions apply; the inner extras here just
   give it a friendlier feel than a plain confirm dialog. */
.credit-grant-modal { max-width: 420px; text-align: center; padding-top: 24px; }
.credit-grant-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  box-shadow: 0 8px 24px var(--primary-glow);
}
.credit-grant-icon i {
  font-size: 38px;
  color: #fff;
}
.credit-grant-headline {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}
.credit-grant-reason {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.45;
}
.credit-grant-balance {
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 15px;
}
.credit-grant-balance strong {
  margin: 0 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 18px;
  color: var(--primary);
}
.credit-grant-balance .muted { color: var(--text-muted); }
.credit-grant-breakdown {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: left;
}
.credit-grant-breakdown ul {
  margin: 6px 0 0;
  padding-left: 18px;
  list-style: disc;
}
.credit-grant-breakdown li { margin-bottom: 2px; }

.legal-container code {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Mobile Optimization (GDrive Style) */
@media (max-width: 768px) {
  body {
    padding-top: 0;
    padding-bottom: 70px;
  }

  /* Show Toggle Button on Mobile */
  .toggle-btn {
    display: block !important;
  }

  /* Drawer Sidebar */
  .sidebar {
    display: flex !important;
    /* Force flex for drawer */
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 10501 !important;
    /* High z-index */
    transform: translateX(-100%);
    /* Hidden by default */
    width: 280px;
    /* Slightly wider drawer */
    background: var(--bg-dark);
    /* Ensure solid bg */
    /* box-shadow is applied only when open; the 50px blur would otherwise
       bleed past the off-screen drawer and darken the left viewport edge. */
  }

  .sidebar.collapsed {
    transform: translateX(-100%);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
  }



  /* Reset Mobile Nav Display */
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    height: 60px;
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 10px;
    gap: 4px;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .mobile-nav-item i {
    font-size: 22px;
    margin-bottom: 0;
  }

  .mobile-nav-item.active,
  .mobile-nav-item:active {
    color: var(--primary);
  }

  /* Header Overrides */
  .top-bar {
    padding: 0 12px;
    height: 56px;
    background: rgba(15, 23, 42, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    justify-content: space-between;
  }



  .desktop-only-text {
    display: none;
  }

  .brand-logo h2 {
    display: none !important;
    /* hide text on mobile to give search bar more room */
  }

  /* Compact List View for Mobile */
  .file-grid {
    display: flex;
    /* Flex column instead of grid */
    flex-direction: column;
    gap: 0;
    /* Remove gap, use border */
  }

  .file-item {
    flex-direction: row;
    /* Row layout */
    align-items: center;
    text-align: left;
    padding: 12px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    /* No radius for list items */
    background: transparent;
    /* No card bg */
    width: 100%;
    justify-content: flex-start;
  }

  .file-item:last-child {
    border-bottom: none;
  }

  .file-icon {
    font-size: 28px;
    /* Smaller icon */
    min-width: 32px;
    text-align: center;
  }

  .file-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: left;
    flex: 1;
    margin: 0;
  }

  .item-actions {
    display: flex !important;
    position: relative;
    top: auto;
    right: auto;
    background: transparent;
    padding: 0;
    min-width: 24px;
    margin-left: auto;
  }

  .item-actions .action-btn {
    display: none;
    /* Hide default action buttons unles it's the last one */
  }

  .item-actions .action-btn:last-child {
    display: flex;
    color: var(--text-main);
  }

  /* Mobile check box layout override (visuals inherited from global css) */
  .item-checkbox {
    position: static;
    margin-right: 12px;
  }

  .profile-dropdown,
  .context-menu,
  .bulk-toolbar {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
    max-height: 80vh;
    overflow-y: auto;
    border-bottom: none;
    z-index: 2000;
    /* Respect notch / home indicator on iPhones in bottom-sheet mode. */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* Make sure bulk-toolbar is fully visible when active on mobile */
  .bulk-toolbar.visible {
    transform: translateY(0) !important;
    padding: 16px;
    flex-wrap: wrap;
    /* allow wrapping if many buttons */
    justify-content: center;
    gap: 12px;
  }

  .profile-dropdown.show,
  .context-menu.show {
    transform: translateY(0);
    opacity: 1;
    display: flex !important;
  }
}

.mobile-nav {
  display: none;
}

/* Search Box Container */
.search-box-container {
  flex: 1;
  max-width: 600px;
  margin: 0 20px;
  min-width: 150px;
  position: relative;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .search-box-container {
    margin: 0 10px;
    min-width: 100px;
  }
}

/* Enhanced New Button */
.btn-icon {
  padding: 0 !important;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon i {
  font-size: 24px !important;
  margin: 0;
}

/* Desktop New Button Styles */
/* Global Profile Drawer Styles */
.profile-drawer {
  display: flex !important;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  max-height: 100dvh;          /* mobile: cap to the visible viewport (address-bar aware) */
  overflow-y: auto;            /* scroll when items exceed the height (reach Logout on small screens) */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 10501 !important;
  transform: translateX(100%);
  width: 280px;
  background: var(--bg-dark);
  flex-direction: column;
  padding: 20px;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
  /* box-shadow is applied only when open; the 50px blur would otherwise
     bleed past the off-screen drawer and darken the right viewport edge. */
}

.profile-drawer.open {
  transform: translateX(0);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
}

/* Global Overlay Styles */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.sidebar-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

body.drawer-open {
  overflow: hidden;
}

/* ===== Upload Manager (GDrive Style) ===== */
.upload-manager {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease, height 0.3s ease;
}

@media (max-width: 400px) {
  .upload-manager {
    width: 90%;
    right: 5%;
    bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* Keep the upload manager above the iPhone home indicator when there's a
   bottom safe area (notched devices), regardless of viewport width. */
@supports (padding: env(safe-area-inset-bottom)) {
  .upload-manager {
    bottom: max(24px, env(safe-area-inset-bottom));
  }
}

.upload-manager.minimized .upload-manager-body {
  display: none;
}

.upload-manager.minimized {
  height: 48px !important;
}

.upload-manager-header {
  padding: 12px 16px;
  background: var(--card-bg-alt);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-main);
}

.upload-manager-actions {
  display: flex;
  gap: 8px;
}

.upload-manager-body {
  max-height: 350px;
  overflow-y: auto;
  background: var(--bg-dark);
  padding: 0;
}

/* ===== Upload Progress Card (matches torrent card style) ===== */

.upload-card {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(99, 102, 241, 0.04);
}

.upload-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.upload-card-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  flex: 1;
}

.upload-card-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.upload-stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.upload-stat-label {
  font-weight: 500;
  color: var(--text-main);
  min-width: 55px;
}

.upload-stat-speed {
  color: var(--text-main);
  font-weight: 500;
}

.upload-stat-sep {
  color: var(--text-muted);
  opacity: 0.4;
}

.upload-progress-wrap {
  height: 6px;
  background: #1a2035;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin: 4px 0;
}

.upload-progress-buffer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  opacity: 0.3;
  transition: width 0.5s ease;
  border-radius: 3px;
}

.upload-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  transition: width 0.5s ease;
  border-radius: 3px;
}

.upload-card-info {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.upload-card-message {
  font-size: 12px;
  padding: 4px 0;
}

.upload-card-message.success {
  color: var(--ok);
}

.upload-card-message.error {
  color: var(--danger);
}

.btn-ghost-sm {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-ghost-sm:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

/* Global Drop Zone */
.global-drop-zone {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(15, 23, 42, 0.9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  border: 4px dashed var(--primary);
}

.global-drop-zone.active {
  display: flex;
}

/* Selection Box */
.selection-box {
  position: absolute;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.8);
  pointer-events: none;
  z-index: 1000;
  display: none;
}

/* ========================================
   Driver.js Tour - Dark Theme Overrides
   ======================================== */

.driver-overlay {
  z-index: 10001 !important;
}

.driver-active-element {
  z-index: 10002 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.4) !important;
}

.driver-popover {
  z-index: 10003 !important;
}

.driver-popover.cloudstore-tour {
  background: var(--dropdown-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
  max-width: 340px;
}

.driver-popover.cloudstore-tour .driver-popover-title {
  color: var(--text-main) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.driver-popover.cloudstore-tour .driver-popover-description {
  color: var(--text-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.driver-popover.cloudstore-tour .driver-popover-progress-text {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

.driver-popover.cloudstore-tour .driver-popover-navigation-btns {
  gap: 8px;
}

.driver-popover.cloudstore-tour .driver-popover-next-btn {
  background: linear-gradient(135deg, var(--grad-a, #6366f1), var(--grad-b, #ec4899)) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.driver-popover.cloudstore-tour .driver-popover-prev-btn {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  text-shadow: none !important;
}

.driver-popover.cloudstore-tour .driver-popover-close-btn {
  color: var(--text-muted) !important;
}

.driver-popover.cloudstore-tour .driver-popover-arrow-side-left.driver-popover-arrow,
.driver-popover.cloudstore-tour .driver-popover-arrow-side-right.driver-popover-arrow,
.driver-popover.cloudstore-tour .driver-popover-arrow-side-top.driver-popover-arrow,
.driver-popover.cloudstore-tour .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-color: var(--dropdown-bg) !important;
}

/* ========================================
   Info (i) Tooltips
   ======================================== */

.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--hover-bg);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  flex-shrink: 0;
  transition: all 0.2s;
  vertical-align: middle;
  font-size: 12px;
  line-height: 1;
}

.info-tip:hover {
  background: var(--primary-glow);
  border-color: var(--primary);
  color: var(--text-main);
}

.info-tip-popover {
  position: fixed;
  background: var(--dropdown-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  max-width: min(280px, 90vw);
  box-shadow: 0 10px 30px var(--shadow-color);
  z-index: 11000;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  /* Avoid sitting under the iPhone home indicator if positioned at the bottom. */
  margin-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.info-tip-popover.visible {
  opacity: 1;
  pointer-events: auto;
}

.info-tip-popover .tip-text {
  flex: 1;
  min-width: 0;
}

.info-tip-popover .tip-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  margin-top: -2px;
  margin-right: -4px;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.info-tip-popover .tip-close:hover {
  background: var(--hover-bg);
  color: var(--text-main);
}

.info-tip-popover .tip-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* ========================================
   Shareable Folder Banner
   ======================================== */

.shareable-banner {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #c7d2fe;
  padding: 12px 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
}

.shareable-banner i {
  margin-right: 6px;
}

.shareable-url {
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-main);
  user-select: all;
  word-break: break-all;
}

@media (max-width: 768px) {
  .driver-popover.cloudstore-tour {
    max-width: 280px !important;
    margin: 0 8px;
  }

  .info-tip-popover {
    max-width: 220px;
  }

  .shareable-banner {
    flex-direction: column;
    align-items: flex-start;
    font-size: 13px;
  }
}


/* ===== Torrent Progress Card (in Upload Manager) ===== */

.torrent-card {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(99, 102, 241, 0.04);
}

.torrent-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.torrent-card-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  flex: 1;
}

.torrent-card-count {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 12px;
  white-space: nowrap;
}

.torrent-card-chevron {
  transition: transform 0.2s ease;
  display: flex;
}

.torrent-card-chevron.collapsed {
  transform: rotate(-90deg);
}

.torrent-card-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.torrent-stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.torrent-stat-label {
  font-weight: 500;
  color: var(--text-main);
  min-width: 65px;
}

.torrent-stat-speed {
  color: var(--text-main);
  font-weight: 500;
}

.torrent-stat-sep {
  color: var(--text-muted);
  opacity: 0.4;
}

/* Dual-layer progress bar (video buffer style) */
.torrent-progress-wrap {
  height: 6px;
  background: #1a2035;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin: 4px 0;
}

.torrent-progress-downloaded {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  opacity: 0.3;
  transition: width 0.5s ease;
  border-radius: 3px;
}

.torrent-progress-uploaded {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  transition: width 0.5s ease;
  border-radius: 3px;
}

.torrent-card-info {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Collapsible file list */
.torrent-file-list {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 6px;
}

.torrent-file-list.collapsed {
  display: none;
}

.torrent-file-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
}

.torrent-file-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.torrent-file-size {
  color: var(--text-muted);
  font-size: 11px;
  min-width: 55px;
  text-align: right;
}

.torrent-file-status {
  font-size: 11px;
  min-width: 80px;
  text-align: right;
}

.torrent-file-done .torrent-file-status {
  color: var(--ok);
}

.torrent-file-active .torrent-file-status {
  color: var(--primary-hover);
}

.torrent-file-pending .torrent-file-status {
  color: var(--text-muted);
}

.torrent-file-error .torrent-file-status {
  color: var(--danger);
}

/* Torrent completed/error/seeding states */
.torrent-card-message {
  font-size: 12px;
  padding: 4px 0;
}

.torrent-card-message.success {
  color: var(--ok);
}

.torrent-card-message.error {
  color: var(--danger);
}

.torrent-card-message.seeding {
  color: var(--text-muted);
}

/* Torrent modal file selection */
.torrent-select-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-dark);
}

.torrent-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  cursor: pointer;
}

.torrent-select-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.torrent-select-item:last-child {
  border-bottom: none;
}

.torrent-select-item input[type="checkbox"] {
  accent-color: var(--primary);
}

.torrent-select-name {
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
  min-width: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.torrent-select-name::-webkit-scrollbar {
  display: none;
}

.torrent-select-size {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.torrent-select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px 8px 0 0;
}

.torrent-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Manual refresh button in the breadcrumb row */
.refresh-folder-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.refresh-folder-btn:hover {
  background: var(--hover-bg, rgba(255, 255, 255, 0.06));
  color: var(--text-main);
}
.refresh-folder-btn:active {
  transform: scale(0.94);
}
.refresh-folder-btn i {
  font-size: 18px;
  line-height: 1;
}

/* Mobile: hit the 44x44 touch target via padding without changing visual size */
@media (max-width: 768px) {
  .refresh-folder-btn {
    width: 44px;
    height: 44px;
  }
  .refresh-folder-btn i {
    font-size: 20px;
  }
}

/* Refresh icon spin (manual breadcrumb refresh button) */
.refresh-spinning {
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

/* ===== Gradient Text ===== */
.gradient-text {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Section Heading ===== */
.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  text-align: center;
  margin: 0 auto 40px;
  max-width: 1100px;
  padding: 0 20px;
  color: var(--text-main);
}

/* ===== Hero Tagline ===== */
.hero-tagline {
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 16px !important;
}

/* ===== CTA Button ===== */
.btn-cta {
  display: inline-block;
  padding: 14px 32px;
  background: var(--primary);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 4px 15px var(--primary-glow);
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px var(--primary-glow);
  background: var(--primary-hover);
}
.btn-cta-light {
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.btn-cta-light:hover {
  background: #f0f0f0;
  color: var(--primary-hover);
}

/* ===== Trust Bar ===== */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 24px 20px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.trust-bar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
}
.trust-bar-item svg {
  flex-shrink: 0;
}

/* ===== How It Works ===== */
.how-it-works {
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 20px;
}
.steps-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .steps-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px var(--shadow-color);
}
.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.step-card h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--text-main);
  margin: 0 0 12px;
}
.step-card p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

/* ===== CTA Banner ===== */
.cta-banner {
  background: var(--primary);
  padding: 80px 20px;
  text-align: center;
  margin: 60px 0 0;
}
.cta-banner h2 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 4vw, 36px);
  color: #ffffff;
  margin: 0 0 12px;
}
.cta-banner p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  margin: 0 0 28px;
}

/* ===== Scroll Reveal Animations ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }

/* ===== Page Fade In ===== */
body {
  animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== Smooth Scroll ===== */
html {
  scroll-behavior: smooth;
}

/* ===== Toast Notifications ===== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--dropdown-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 30px var(--shadow-color);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 14px;
  max-width: 400px;
  transform: translateX(120%);
  animation: toastSlideIn 0.3s ease-out forwards;
}
.toast.toast-out {
  animation: toastSlideOut 0.3s ease-in forwards;
}
.toast-success { border-left: 4px solid var(--ok); }
.toast-error { border-left: 4px solid var(--danger); }
.toast-info { border-left: 4px solid var(--primary); }
.toast-warning { border-left: 4px solid var(--warn); }

.toast-message {
  flex: 1;
}
.toast-action {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.toast-action:hover {
  text-decoration: underline;
}
.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
  line-height: 1;
}
.toast-close:hover {
  color: var(--text-main);
}
@keyframes toastSlideIn {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(120%); opacity: 0; }
}

/* ===== Skeleton Loading ===== */
.skeleton {
  background: linear-gradient(90deg, var(--card-bg-alt) 25%, var(--card-bg-alt-hover) 50%, var(--card-bg-alt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.skeleton-card {
  height: 120px;
  border-radius: 12px;
}
.skeleton-text {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.skeleton-text.short {
  width: 60%;
}

/* ===== Styled Empty States ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.4;
}
.empty-state h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--text-main);
  margin: 0 0 8px;
  opacity: 0.7;
}
.empty-state p {
  font-size: 15px;
  max-width: 400px;
  line-height: 1.5;
}
.empty-state-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: 16px;
  margin: 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
body.is-dragging .empty-state-dropzone {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.06);
}
.empty-state-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ===== Focus Visible (Keyboard Accessibility) ===== */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===== Global Image Safety ===== */
img, video {
  max-width: 100%;
  height: auto;
}

/* ===== Tablet (600-767px) ===== */
@media (min-width: 600px) and (max-width: 767px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Ultra-wide (1600px+) ===== */
@media (min-width: 1600px) {
  .landing-hero-split,
  .features-grid,
  .how-it-works,
  .trust-bar {
    max-width: 1400px;
  }
}

/* ===== rclone Cloud Drives Drawer ===== */
.cloud-drawer {
  display: flex !important;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 10501 !important;
  transform: translateX(100%);
  width: 420px;
  max-width: 100%;
  background: var(--bg-dark);
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
  border-left: 1px solid var(--border-color);
  /* box-shadow is applied only when open; the 50px blur would otherwise
     bleed past the off-screen drawer and darken the right viewport edge. */
}

.cloud-drawer.open {
  transform: translateX(0);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
}

.cloud-drawer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
}

.cloud-drawer-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloud-drawer-header h3 i {
  color: var(--primary);
  font-size: 18px;
}

.cloud-drawer-back {
  background: transparent;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.cloud-drawer-back:hover {
  background: rgba(255, 255, 255, 0.08);
}

.cloud-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Hide upload manager while cloud drawer is open (less visual clutter) */
body:has(.cloud-drawer.open) .upload-manager {
  display: none !important;
}

/* Drive list */
.cloud-drive-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}

.cloud-drive-empty i {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.5;
}

.cloud-connect-btn {
  width: 100%;
  margin-bottom: 16px;
}

.drive-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.drive-card:hover {
  border-color: var(--primary);
  background: rgba(48, 92, 222, 0.06);
}

.drive-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(48, 92, 222, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 20px;
  flex-shrink: 0;
}

.drive-card-info {
  flex: 1;
  min-width: 0;
}

.drive-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-card-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.drive-card-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.drive-card:hover .drive-card-actions {
  opacity: 1;
}

.drive-card-action {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  font-size: 16px;
}

.drive-card-action:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--danger);
}

/* Remote file browser */
.remote-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  flex-wrap: wrap;
}

.remote-breadcrumb-item {
  color: var(--primary);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.remote-breadcrumb-item:hover {
  background: rgba(48, 92, 222, 0.12);
}

.remote-breadcrumb-sep {
  color: var(--text-muted);
}

.remote-breadcrumb-current {
  color: var(--text-main);
  font-weight: 600;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.remote-folder-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.remote-folder-actions .btn {
  flex: 1;
  font-size: 13px;
  padding: 8px 12px;
}

.remote-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}

.remote-file-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-color);
}

.remote-file-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.remote-file-icon.folder {
  color: #f59e0b;
}

.remote-file-icon.file {
  color: var(--text-muted);
}

.remote-file-info {
  flex: 1;
  min-width: 0;
}

.remote-file-name {
  font-size: 13px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.remote-file-size {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.remote-file-action {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--primary);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.remote-file-action:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.remote-file-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 13px;
}

.remote-file-loading {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
}

.remote-file-loading i {
  display: inline-block;
  animation: spin 1s linear infinite;
  margin-right: 6px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Provider grid (connect modal) */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.provider-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.provider-card:hover {
  border-color: var(--primary);
  background: rgba(48, 92, 222, 0.06);
}

.provider-card i {
  font-size: 24px;
  color: var(--primary);
  flex-shrink: 0;
}

.provider-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.provider-card-badge {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Disabled (admin-disabled provider) */
.provider-card-disabled,
.drive-card-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.provider-card-disabled:hover,
.drive-card-disabled:hover {
  border-color: var(--border-color);
  background: var(--bg-card);
}

/* Empty-input nudge: brief horizontal wiggle so Enter on an empty search registers visibly. */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.shake {
  animation: shake 220ms ease-in-out;
}
/* prefers-reduced-motion: .shake is covered by the global override near the
   top of this file (Part 7.2). No local rule needed. */

/* Advanced-options disclosure (Connect Drive modal) */
.advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 6px 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.advanced-toggle:hover {
  color: var(--text-main);
}
.advanced-toggle-chevron {
  transition: transform 150ms ease;
  font-size: 14px;
}
.advanced-toggle.expanded .advanced-toggle-chevron {
  transform: rotate(90deg);
}
.advanced-panel {
  padding-top: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .cloud-drawer {
    width: 100%;
  }
  .provider-grid {
    grid-template-columns: 1fr;
  }
}

/* Neutralize :hover styles on touch-only devices to prevent sticky-hover after tap. */
@media (hover: none) {
  .file-item:hover,
  .file-row:hover {
    border-color: var(--border-color);
    background: var(--bg-card);
  }
  .btn:hover,
  .btn-grad:hover,
  .btn-icon:hover,
  .btn-primary:hover,
  .btn-secondary:hover {
    transform: none;
    filter: none;
  }
  .action-btn:hover,
  .icon-btn:hover {
    background: transparent;
    color: var(--text-muted);
  }
  .dropdown-item:hover {
    background: transparent;
  }
  .nav-item:hover,
  .mobile-nav-item:hover {
    background: transparent;
  }
}

/* ===== Credits balance pill (profile drawer) ===== */
.drawer-credits {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--card-bg-alt);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.drawer-credits > i {
  font-size: 22px;
  color: var(--primary);
  flex-shrink: 0;
}
.drawer-credits-text {
  flex: 1;
  min-width: 0;
}
.drawer-credits-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.drawer-credits-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
.drawer-credits-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Standalone plan row (shown when the credit system is off): a button styled to
   match the credits pill, so Pro status + upgrade stay reachable without credits. */
.drawer-plan {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.drawer-plan:hover {
  background: var(--card-bg-hover, var(--card-bg-alt));
  border-color: var(--primary);
}

/* ===== Header credits chip ===== */
.header-credits-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--card-bg-alt);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.header-credits-chip > i {
  color: var(--primary);
  font-size: 16px;
}
.header-credits-chip:hover {
  background: var(--card-bg-alt-hover);
  border-color: var(--primary);
}
.header-credits-chip:active {
  transform: scale(0.96);
}

@keyframes credit-chip-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(48, 92, 222, 0.55); transform: scale(1.0); }
  50%  { box-shadow: 0 0 0 8px rgba(48, 92, 222, 0); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 rgba(48, 92, 222, 0); transform: scale(1.0); }
}
.header-credits-chip.pulse-idle {
  animation: credit-chip-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.header-credits-chip.pulse-once {
  animation: credit-chip-pulse 500ms cubic-bezier(0.4, 0, 0.2, 1) 1;
}

/* First-visit tooltip pointing at the chip */
.header-credits-chip-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 30;
}
.header-credits-chip-tooltip::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 14px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--primary);
}

@media (max-width: 768px) {
  .header-credits-chip {
    height: 36px;
    min-width: 44px;     /* 44x44 hit target per CLAUDE.md */
    padding: 0 10px;
    font-size: 13px;
  }
  .header-credits-chip > i {
    font-size: 15px;
  }
}
@media (max-width: 360px) {
  .header-credits-chip {
    padding: 0 8px;
    gap: 4px;
  }
}

/* ===== Credits Hub Modal ===== */
.credits-hub-modal {
  max-width: 480px;
  width: 92vw;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.credits-hub-sheet-handle {
  display: none;   /* visible only on mobile via media query */
}
.credits-hub-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border-color);
}
.credits-hub-title {
  margin: 0;
  font-size: 18px;
}
.credits-hub-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
.credits-hub-balance {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: var(--card-bg-alt);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.credits-hub-balance > i { color: var(--primary); font-size: 15px; }

.credits-hub-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  max-height: 70vh;
}

.credits-hub-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--card-bg-alt);
  overflow: hidden;
  /* Parent .credits-hub-body is a flex column with max-height + overflow-y:auto.
     Without flex-shrink:0 the cards compress when their combined height exceeds
     the body's max-height, and the card's overflow:hidden then clips the bottom
     of inner content (cooldown rows showed half-cut text on mobile). */
  flex-shrink: 0;
}
.credits-hub-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
}
.credits-hub-card-head > i {
  font-size: 24px;
  color: var(--primary);
}
.credits-hub-card-title {
  font-size: 15px;
  font-weight: 700;
}
.credits-hub-card-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.credits-hub-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* State-wrapper divs (e.g. #creditsHubBonusStateCooldown, #creditsHubAdStateWatching)
   contain status / watching / spinner rows plus optional buttons. Without an
   explicit layout the children stack with no gap, so the bonus "Claimed today."
   + "Next claim in..." pair collided into one cramped block on mobile. Target
   only wrappers whose children are hub rows to avoid stomping on the refer-url
   flex row. */
.credits-hub-card-body > div:has(> .credits-hub-status-row),
.credits-hub-card-body > div:has(> .credits-hub-watching-row),
.credits-hub-card-body > div:has(> .credits-hub-spinner-row) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.credits-hub-spinner-row,
.credits-hub-watching-row,
.credits-hub-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.credits-hub-status-row--warn {
  color: var(--warning, #d97706);
}
.credits-hub-status-row .muted,
.credits-hub-watching-row .muted {
  color: var(--text-muted);
  font-size: 12px;
}

.credits-hub-refer-url {
  display: flex;
  gap: 6px;
}
.credits-hub-refer-url input {
  flex: 1;
  font-size: 13px;
  height: 38px;
  padding: 0 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-main);
}
.credits-hub-refer-stats {
  font-size: 12px;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.loading-spinner-sm {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spinner-rotate 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* Skeleton placeholders while earn-status fetches */
.credits-hub-loading {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.credits-hub-skeleton {
  height: 130px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--card-bg-alt) 0%, var(--card-bg-alt-hover) 50%, var(--card-bg-alt) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.credits-hub-error {
  text-align: center;
  padding: 30px 16px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.credits-hub-error > i { font-size: 32px; }

/* Mobile bottom-sheet: full-width, slide up from bottom, drag-handle */
@media (max-width: 768px) {
  #creditsHubModal.modal-overlay.open { align-items: flex-end; }
  .credits-hub-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheet-up 0.3s cubic-bezier(0.2, 0, 0.2, 1);
  }
  .credits-hub-sheet-handle {
    display: block;
    width: 44px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin: 10px auto 0;
    border: none;
    padding: 0;
  }
  .credits-hub-body { max-height: 65vh; }
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ===== Premium card + perks modal ===== */
.credits-hub-card--premium {
  border-color: var(--warn);
  background: rgba(245, 158, 11, 0.04);
}
.credits-hub-card--premium .credits-hub-card-head {
  border-bottom-color: rgba(245, 158, 11, 0.3);
}
.credits-hub-card--premium .credits-hub-card-head > i {
  color: var(--warn);
}

.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.btn-premium:hover { opacity: 0.9; }

.credits-hub-perks-link {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
  height: 34px;
}

.premium-perks-modal {
  width: 100%;
  max-width: 400px;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}

/* Offerwall iframe modal (AdGem, TheoremReach) - renders the network's
   wall inline. Sized to be roomy on desktop and fullscreen on mobile so
   surveys/offers have enough vertical space to render. */
.offerwall-iframe-modal {
  width: 100%;
  max-width: 960px;
  height: 86vh;
  max-height: 800px;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.offerwall-iframe-body {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg-dark);
}
.offerwall-iframe-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.offerwall-iframe-footer {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  text-align: center;
  background: var(--card-bg-alt, transparent);
}
@media (max-width: 768px) {
  .offerwall-iframe-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .offerwall-iframe-footer { padding: 12px 16px; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.premium-perks-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.premium-crown-icon {
  color: var(--warn);
  vertical-align: -2px;
}
.premium-perk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.premium-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.premium-perk-icon {
  font-size: 22px;
  color: var(--warn);
  flex-shrink: 0;
  margin-top: 1px;
}
.premium-perk-title {
  font-size: 14px;
  font-weight: 700;
}
.premium-perk-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ===== Credits toast (small, top-right) ===== */
.credits-toast {
  position: fixed;
  top: 80px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg-alt);
  border: 1px solid var(--primary);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 11000;
  font-variant-numeric: tabular-nums;
}
.credits-toast > i { color: var(--primary); font-size: 18px; }
.credits-toast.credits-toast-in  { animation: toast-in  300ms cubic-bezier(0.2, 0, 0.2, 1); }
.credits-toast.credits-toast-out { animation: toast-out 300ms cubic-bezier(0.4, 0, 1, 1); }
@keyframes toast-in  { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { to   { transform: translateX(40px); opacity: 0; } }

@media (max-width: 768px) {
  .credits-toast {
    top: auto;
    bottom: max(80px, calc(env(safe-area-inset-bottom) + 70px));
    right: 50%;
    transform: translateX(50%);
  }
  .credits-toast.credits-toast-in  { animation: toast-in-mobile  300ms cubic-bezier(0.2, 0, 0.2, 1); }
  .credits-toast.credits-toast-out { animation: toast-out-mobile 300ms cubic-bezier(0.4, 0, 1, 1); }
}
@keyframes toast-in-mobile  { from { transform: translate(50%, 30px); opacity: 0; } to { transform: translate(50%, 0); opacity: 1; } }

/* --- API Keys modal --- */
.api-keys-modal { max-width: 560px; }
.api-keys-intro { font-size: 13px; color: var(--text-muted); margin: -4px 0 14px; line-height: 1.5; }
.api-keys-intro code, .api-usage-pre code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.api-key-reveal {
  border: 1px solid var(--primary);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
  background: var(--primary-glow, rgba(99, 102, 241, 0.08));
}
.api-key-reveal-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.api-key-reveal-row { display: flex; gap: 8px; align-items: center; }
.api-key-reveal-value {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.18);
}
.api-key-copy { flex: 0 0 auto; min-height: 44px; }
.api-key-create { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 6px; }
.api-key-create-field { flex: 1 1 180px; }
.api-key-create-expiry { flex: 0 1 140px; }
.api-key-create-btn { min-height: 44px; flex: 0 0 auto; }
.api-key-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  padding-right: 30px;
}
.api-key-scopes { flex: 1 1 220px; }
.api-scope-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.api-scope-chip {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  min-height: 36px; padding: 6px 12px; font-size: 13px;
  border: 1px solid var(--border-color); border-radius: 999px;
  background: transparent; color: var(--text-muted);
}
.api-scope-chip.active {
  border-color: var(--primary); color: var(--text-main);
  background: var(--primary-glow, rgba(99, 102, 241, 0.12));
}
.api-key-pro-notice { font-size: 13px; color: var(--text-muted); padding: 10px 0; }
.api-keys-list-label { margin-top: 14px; display: block; }
.api-keys-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; margin-top: 6px; }
.api-keys-empty { font-size: 13px; color: var(--text-muted); padding: 8px 0; }
.api-key-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 1px solid var(--border-color); border-radius: 10px;
}
.api-key-row-main { flex: 1; min-width: 0; }
.api-key-row-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.api-key-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; word-break: break-word; }
.api-key-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px;
}
.api-key-badge-revoked { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.api-key-badge-expired { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.api-key-revoke {
  flex: 0 0 auto; min-height: 36px; padding: 6px 10px; font-size: 12px;
  border: 1px solid var(--border-color); border-radius: 8px;
  background: transparent; color: var(--danger); cursor: pointer;
}
.api-key-revoke.confirm { background: var(--danger); color: #fff; border-color: var(--danger); }
.api-usage { margin-top: 14px; }
.api-usage summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.api-usage-pre {
  margin-top: 8px; padding: 10px; border-radius: 8px; overflow-x: auto;
  border: 1px solid var(--border-color); background: rgba(0, 0, 0, 0.18);
  font-size: 12px; line-height: 1.5;
}
@media (max-width: 768px) {
  .api-key-create-field, .api-key-create-expiry { flex: 1 1 100%; }
  .api-key-create-btn { width: 100%; }
  .api-key-revoke { min-height: 44px; }
  .api-scope-chip { min-height: 44px; }
}

/* --- yt-dlp import modal --- */
.ytdlp-modal { max-width: 580px; }
.ytdlp-intro { font-size: 13px; color: var(--text-muted); margin: -4px 0 14px; line-height: 1.5; }
.ytdlp-cookies { margin-top: 8px; }
.ytdlp-cookies summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.ytdlp-hint { font-size: 12px; color: var(--text-muted); margin: 8px 0; }
.ytdlp-formats { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; margin: 6px 0 12px; }
.ytdlp-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 8px 0 2px; }
.ytdlp-fmt-row {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer;
}
.ytdlp-fmt-row:hover { border-color: var(--primary); }
.ytdlp-fmt-row.selected { border-color: var(--primary); background: var(--primary-glow, rgba(99, 102, 241, 0.08)); }
.ytdlp-fmt-row.disabled { opacity: 0.45; cursor: not-allowed; }
.ytdlp-fmt-row.disabled:hover { border-color: var(--border-color); }
.ytdlp-fmt-main { flex: 1; min-width: 0; }
.ytdlp-fmt-title { font-weight: 600; font-size: 14px; }
.ytdlp-fmt-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ytdlp-fmt-size { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; }
.ytdlp-extras { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.ytdlp-chip {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border-color); background: transparent; color: inherit;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; min-height: 40px;
  display: inline-flex; align-items: center; gap: 6px;
}
.ytdlp-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ytdlp-quality { margin: 10px 0; }
.ytdlp-quality select { width: 100%; }
@media (max-width: 768px) {
  .ytdlp-fmt-row { min-height: 44px; }
  .ytdlp-chip { min-height: 44px; }
}
/* Indeterminate progress bar for yt-dlp phases without a measurable percentage
   (merging, embedding, converting). */
.torrent-progress-uploaded.ytdlp-indeterminate {
  animation: ytdlp-pulse 1.1s ease-in-out infinite;
}
@keyframes ytdlp-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* --- My Cookies modal --- */
.cookies-modal { max-width: 560px; }
.cookies-intro { font-size: 13px; color: var(--text-muted); margin: -4px 0 14px; line-height: 1.5; }
.cookies-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; margin-bottom: 12px; }
.cookies-empty { font-size: 13px; color: var(--text-muted); padding: 8px 0; }
.cookie-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border-color); border-radius: 10px; }
.cookie-row-main { flex: 1; min-width: 0; }
.cookie-row-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cookie-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cookie-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; }
.cookie-badge-set { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.cookie-badge-unset { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); }
.cookie-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.cookie-action { min-height: 36px; padding: 6px 10px; font-size: 12px; border: 1px solid var(--border-color); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.cookie-action.danger { color: var(--danger); }
.cookie-action.danger.confirm { background: var(--danger); color: #fff; border-color: var(--danger); }
.cookies-add { margin-top: 6px; }
.cookies-add summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.cookies-form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.cookies-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cookies-site-field, .cookies-domain-field { flex: 1 1 180px; }
.cookies-guide { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.cookies-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.cookies-form-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.cookie-upload-btn { min-height: 44px; cursor: pointer; }
.cookies-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); border: 1px solid var(--primary); border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; background: var(--primary-glow, rgba(99, 102, 241, 0.08)); }
.cookies-hint .btn { min-height: 36px; padding: 6px 10px; font-size: 12px; flex: 0 0 auto; }
@media (max-width: 768px) {
  .cookies-site-field, .cookies-domain-field { flex: 1 1 100%; }
  .cookie-action { min-height: 44px; }
}
@keyframes toast-out-mobile { to   { transform: translate(50%, 30px); opacity: 0; } }