/* ==========================================================================
   Glassra Theme — Redesign
   Design system: tokens, base, layout, components
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root, html[data-theme="dark"] {
  /* Color — Navy Corporate Glass (default) */
  --paper: #0B1220;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-solid: #121B2E;
  --ink: #F1F4F9;
  --ink-soft: #C9D2E0;
  --muted: #8B96AB;
  --muted-light: #64708A;
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);
  --accent: #2E5EEA;
  --accent-hover: #4C74F0;
  --accent-tint: rgba(46, 94, 234, 0.16);
  --signal: #10B981;
  --signal-tint: rgba(16, 185, 129, 0.14);
  --danger: #EF4444;
  --danger-tint: rgba(239, 68, 68, 0.14);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.05);
  --nav-bg: rgba(11, 18, 32, 0.75);
  --blob-1: rgba(46, 94, 234, 0.22);
  --blob-2: rgba(16, 185, 129, 0.10);
  --blob-3: rgba(46, 94, 234, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  --select-scheme: dark;
}

html[data-theme="light"] {
  /* Color — Navy Corporate Light */
  --paper: #F7F9FC;
  --surface: rgba(255, 255, 255, 0.65);
  --surface-solid: #FFFFFF;
  --ink: #0F1A2E;
  --ink-soft: #33415C;
  --muted: #64748B;
  --muted-light: #94A3B8;
  --line: rgba(15, 23, 42, 0.10);
  --line-soft: rgba(15, 23, 42, 0.05);
  --accent: #1D4ED8;
  --accent-hover: #2E5EEA;
  --accent-tint: rgba(29, 78, 216, 0.10);
  --signal: #059669;
  --signal-tint: rgba(5, 150, 105, 0.10);
  --danger: #DC2626;
  --danger-tint: rgba(220, 38, 38, 0.10);
  --glass-border: rgba(15, 23, 42, 0.10);
  --glass-highlight: rgba(255, 255, 255, 0.75);
  --nav-bg: rgba(247, 249, 252, 0.85);
  --blob-1: rgba(29, 78, 216, 0.10);
  --blob-2: rgba(5, 150, 105, 0.08);
  --blob-3: rgba(29, 78, 216, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --select-scheme: light;
}

:root {
  /* Glass (shared) */
  --glass-blur: 18px;

  /* Type */
  --font-display: 'Manrope', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* Scale */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  /* Signature notch-card shape: three corners soft, one corner cut sharp */
  --radius-card: 26px 26px 26px 6px;
  --radius-card-sm: 18px 18px 18px 5px;
  --container: 1160px;
}

* { box-sizing: border-box; }

/* NOTE: we previously replaced native <select> rendering here with
   "appearance: none" + a custom arrow, to fix a pill-shaped native select
   on some browsers/OSes. That traded one bug for a worse one — a Chromium
   quirk where a single-select's closed-box text ignored "color" entirely
   and rendered washed-out regardless of theme, in a way "-webkit-text-
   fill-color"/"color-scheme" overrides couldn't reliably beat. Text you
   can't read is worse than a shape that's slightly off, so this reverts
   back to each browser's native select appearance + arrow; the existing
   border/background/color styling below still applies on top of that.
   (native select rendering respects border-radius fine on Windows/Linux —
   the pill shape was mainly a macOS Safari/Chrome quirk.) */
select::-ms-expand { display: none; }
/* Defensive: make sure text-selection highlight (if that's ever what's
   being seen, e.g. from a stray click-drag) uses our own accent color
   instead of a browser default that can look like a stray white/blue
   badge sitting on top of a field's text. */
::selection { background: var(--accent); color: #fff; }
html { scroll-behavior: smooth; }
html, body { transition: background-color 0.25s ease, color 0.25s ease; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(700px 500px at 8% -5%, var(--blob-1), transparent 60%),
    radial-gradient(600px 500px at 100% 0%, var(--blob-2), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, var(--blob-3), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Theme toggle button ---- */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.theme-toggle-btn:hover { color: var(--ink); transform: translateY(-1px); }
.theme-toggle-btn svg { width: 16px; height: 16px; }
.theme-toggle-btn .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle-btn .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle-btn .icon-moon { display: inline-block; }

/* Mobile-only theme toggle next to the hamburger button — same box shape
   as .nav-toggle (rounded square, not the circular desktop version) so
   the two sit together as a matched pair. */
.theme-toggle-btn.nav-icon-btn {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
}
.theme-toggle-btn.nav-icon-btn svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .theme-toggle-btn.nav-icon-btn { display: inline-flex; }
}

/* ---- Theme switch reveal animation (View Transitions API) ---- */
@supports (view-transition-name: root) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  ::view-transition-old(root) { z-index: 1; }
  ::view-transition-new(root) { z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ==========================================================================
   Preloader
   ========================================================================== */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark {
  display: flex;
  align-items: center;
  gap: 3px;
}
.preloader-mark span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: preloader-bounce 0.9s ease-in-out infinite;
}
.preloader-mark span:nth-child(2) { animation-delay: 0.12s; }
.preloader-mark span:nth-child(3) { animation-delay: 0.24s; }
.preloader-mark span:nth-child(4) { animation-delay: 0.36s; }
@keyframes preloader-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #preloader { display: none; }
}

/* ==========================================================================
   Scroll-reveal animation
   ========================================================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].is-visible { opacity: 1; transform: translateY(0); }
[data-animate-delay="1"] { transition-delay: 0.1s; }
[data-animate-delay="2"] { transition-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* Subtle lift on interactive cards */
.feature, .testimonial-card, .step {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature:hover { transform: translateY(-2px); }
.testimonial-card:hover, .shorten-card:hover { box-shadow: var(--shadow-md); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 12px;
  color: var(--ink);
}
h1 { font-size: clamp(2.25rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 16px; color: var(--ink-soft); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  background: var(--accent-tint);
  border-radius: var(--radius-pill);
  padding: 6px 14px 6px 10px;
}
.lede { font-size: 1.1rem; color: var(--muted); max-width: 46ch; }

/* Signature bracket-mark — divider / section marker echoing the link-compression motif */
.mark-zip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent);
}
.mark-zip svg { display: block; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* .btn-success and .btn-default aren't styled anywhere else in the theme, so they
   were falling back to Bootstrap's raw green/grey buttons — the odd-looking buttons
   out next to the "+ New Link" pill. They're used for primary actions (Create
   Campaign, Pay Invoice, Access Dashboard) and neutral actions respectively, so map
   them onto the same look as .btn-primary / .btn-ghost instead of a separate color. */
.btn-success { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); border-color: transparent; }
.btn-success:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); transform: translateY(-2px); color: #fff; }
.btn-default { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-default:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-lg { padding: 13px 26px; font-size: 14.5px; }
.btn-block { width: 100%; }

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  padding: 16px 24px 0;
}
.site-nav .nav-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  height: 62px;
  max-width: calc(var(--container) - 40px);
  margin: 0 auto;
  padding: 0 26px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}
.brand.logo-image img { height: 32px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.navbar-collapse { display: flex; align-items: center; gap: 26px; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav-toggle:hover { color: var(--ink); }
/* Fixed box above + same icon size below = only the icon swaps on
   click, the button itself never resizes. */
.nav-toggle .icon-burger,
.nav-toggle .icon-close {
  width: 18px;
  height: 18px;
}
@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }
  .navbar-collapse { display: none; }
  /* On mobile the row only has: brand ... theme-toggle, nav-toggle.
     The 32px .nav-row gap (meant for desktop nav links) left too much
     space between these two adjacent icon buttons, so tighten it here
     without touching the desktop gap. */
  .nav-row { gap: 2px; }
}

/* Hamburger \u2194 X icon morph: both icons sit in the same button, only one
   shown at a time based on whether the dropdown is open. */
.nav-toggle .icon-close { display: none; }
.nav-toggle.is-open .icon-burger { display: none; }
.nav-toggle.is-open .icon-close { display: block; }

/* Mobile menu dropdown — opens directly below the nav pill. Positioned
   relative to .site-nav (a sibling of .nav-row, not nested inside its flex
   children), with a plain solid background and no backdrop-filter, so it
   can't inherit or interact with the nav bar's own flex layout or repaint
   quirks. */
.mobile-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 24px;
  right: 24px;
  z-index: 60;
  background: var(--surface-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 8px 22px 20px;
  overflow: hidden;
}
.mobile-menu-dropdown.is-open { display: flex; flex-direction: column; }
.mobile-menu-dropdown .nav-links {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}
.mobile-menu-dropdown .nav-links a {
  display: block;
  padding: 13px 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 861px) {
  .mobile-menu-dropdown { display: none !important; }
}

/* Telegram join button */
.nav-telegram-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 8px;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.nav-telegram-btn:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.nav-telegram-btn .icon-badge {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
html[data-theme="dark"] .nav-telegram-btn .icon-badge { background: rgba(255,255,255,0.14); }
.nav-telegram-btn .icon-badge svg { width: 13px; height: 13px; }
.nav-telegram-btn:hover .icon-badge { background: rgba(255,255,255,0.25); }

/* ==========================================================================
   Hero + shorten widget
   ========================================================================== */
.hero {
  padding: 76px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -10%;
  width: 620px;
  height: 620px;
  background-image: radial-gradient(var(--line) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  top: 10%;
  right: 4%;
  width: 260px;
  height: 260px;
  border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  background: linear-gradient(135deg, var(--accent-tint), transparent 70%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-copy h1 { margin-bottom: 18px; }
.hero-stats {
  display: flex;
  gap: 0;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero-stat {
  padding: 0 28px;
  border-left: 1px solid var(--line);
}
.hero-stat:first-child { padding-left: 0; border-left: none; }
.hero-stat .num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
}
.hero-stat .label { font-size: 13px; color: var(--muted); }
@media (max-width: 520px) {
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 12px;
    row-gap: 20px;
  }
  .hero-stat,
  .hero-stat:first-child {
    padding: 0;
    border-left: none;
  }
}

/* Shorten widget: the signature "compression" element */
.shorten-card {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px;
  box-shadow: var(--shadow-lg);
  min-width: 0;
}
.shorten-card .card-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.compress-visual {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  min-width: 0;
}
.compress-visual .url-long {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted-light);
  background: var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: line-through;
  text-decoration-color: var(--line);
}
.compress-visual .zip-arrow { color: var(--accent); flex-shrink: 0; }
.compress-visual .url-short {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .compress-visual {
    flex-direction: column;
    align-items: stretch;
  }
  .compress-visual .url-long,
  .compress-visual .url-short {
    width: 100%;
  }
  .compress-visual .zip-arrow { transform: rotate(90deg); align-self: center; }
}
.shorten-form { display: flex; gap: 10px; }
.shorten-form input[type="text"],
.shorten-form input[type="url"] {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
}
.shorten-form input:focus { outline: none; border-color: var(--accent); background: var(--surface);
 backdrop-filter: blur(var(--glass-blur));
 -webkit-backdrop-filter: blur(var(--glass-blur));
 border: 1px solid var(--glass-border); }
@media (max-width: 520px) {
  .shorten-form { flex-direction: column; }
}
.shorten-note { font-size: 12.5px; color: var(--muted-light); margin-top: 12px; }
.shorten-result {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--signal-tint);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--signal);
}

/* Result markup injected by core app.js (Bootstrap-shaped classes, no Bootstrap loaded) */
.add-link-result:not(:empty) { margin-top: 16px; }
.add-link-result .form-group { margin: 0; }
.add-link-result .input-group {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  max-width: 100%;
}
.add-link-result .form-control {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13.5px;
  padding: 12px 14px;
  color: var(--accent);
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Combining border-radius + overflow:hidden + backdrop-filter on the parent
     is enough in Chrome/Firefox, but several WebKit/Safari builds don't clip
     children to the radius when a backdrop-filter is present on the same
     stacking context — the last button's square corner pokes out past the
     rounded pill. Setting the corner radius explicitly on the first/last
     children below removes the dependency on that clipping working at all. */
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.add-link-result .input-group-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Bootstrap's ".input-group-addon{width:1%}" (loaded before this file) is never
     overridden by us elsewhere, so with flex-basis:auto it was being picked up as
     the item's flex-basis. That made the button's true size fight with its 1%
     basis on every repaint (e.g. the hover color/background transition below),
     which is what looked like the Copy/Reshorten buttons jumping left and right
     on hover. Pinning width explicitly here removes that conflict. */
  width: auto;
  min-width: max-content;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 0 16px;
  background: var(--line-soft);
  color: var(--muted);
  cursor: pointer;
  border-left: 1px solid var(--line);
  font-size: 13px;
  transition: color 0.15s ease, background 0.15s ease;
}
.add-link-result .input-group-addon:hover { color: var(--accent); background: var(--accent-tint); }
.add-link-result .input-group-addon .fa { display: none; }
.add-link-result .input-group-addon.copy-it::after { content: "Copy"; font-size: 11px; }
.add-link-result .input-group-addon.reshort::after { content: "Reshorten"; font-size: 11px; }
.add-link-result .input-group-addon:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
@media (max-width: 520px) {
  .add-link-result .input-group { flex-wrap: wrap; }
  .add-link-result .form-control {
    flex: 1 1 100%;
    width: 100%;
    border-bottom: 1px solid var(--line);
    /* now the full-width top row: round both top corners, neither bottom one */
    border-top-right-radius: var(--radius-md);
    border-bottom-left-radius: 0;
  }
  .add-link-result .input-group-addon {
    flex: 1 1 auto;
    border-left: none;
    border-right: 1px solid var(--line);
    padding: 10px 12px;
    border-radius: 0;
  }
  .add-link-result .input-group-addon:first-child { border-bottom-left-radius: var(--radius-md); }
  .add-link-result .input-group-addon:last-child {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: var(--radius-md);
  }
}
.add-link-result .alert {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13.5px;
}
.add-link-result .alert-danger { background: var(--danger-tint); color: var(--danger); }

/* Bootstrap's tooltip JS plugin (app.js calls $('[data-toggle="tooltip"]').tooltip())
   runs on every front page, but front pages never load bootstrap.min.css — only its
   JS. Without ".tooltip{position:absolute}" the tooltip <div> that gets inserted right
   after the Copy/Reshorten button on hover renders as a normal static in-flow element,
   which shoves the buttons sideways every time you hover one (and back when you leave).
   That is the "buttons move left and right on hover" bug. Styling .tooltip here so it
   is taken out of the normal flow fixes it wherever tooltips are used, not just here. */
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
}
.tooltip.in { opacity: 0.9; }
.tooltip.top { padding: 5px 0; margin-top: -3px; }
.tooltip.right { padding: 0 5px; margin-left: 3px; }
.tooltip.bottom { padding: 5px 0; margin-top: 3px; }
.tooltip.left { padding: 0 5px; margin-left: -3px; }
.tooltip-inner {
  max-width: 200px;
  padding: 4px 8px;
  color: var(--paper);
  text-align: center;
  background-color: var(--ink);
  border-radius: 4px;
  font-family: var(--font-sans, inherit);
  white-space: nowrap;
}
.tooltip-arrow { display: none; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: 72px 0; }
.section-head { max-width: 640px; margin: 0 0 44px; }
.section-alt { background: var(--surface);
 backdrop-filter: blur(var(--glass-blur));
 -webkit-backdrop-filter: blur(var(--glass-blur));
 border: 1px solid var(--glass-border); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* How it works — numbered, since it is a real ordered sequence */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  /* .step has padding-top: 8px, which pushes the step-num circle (42px tall)
     down by 8px from the top of the grid row. This line's top wasn't
     accounting for that offset, so it sat 8px too high — crossing above the
     circles' centers instead of through the middle of "01/02/03". */
  top: 29px;
  /* The step-num badges are left-aligned at the start of their grid column
     (not centered within it), so the line's endpoints must line up with the
     badge centers, not with the column centers at 100%/6 and 5*(100%/6).
     Each badge is 42px wide (21px to its center) and .steps has a 32px gap
     between its 3 equal columns, so: column-width = (100% - 2*32px) / 3.
     Left endpoint = badge 1's center = 21px from the left edge.
     Right endpoint = badge 3's center = 21px from the start of column 3,
     i.e. column-width - 21px from the right edge. */
  left: 21px;
  right: calc((100% - 64px) / 3 - 21px);
  height: 1px;
  background: repeating-linear-gradient(to right, var(--line) 0, var(--line) 6px, transparent 6px, transparent 12px);
  z-index: 0;
}
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: 36px; } .steps::before { display: none; } }
.step { position: relative; padding-top: 8px; }
.step .step-num {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--glass-border);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  width: 42px; height: 42px;
  border-radius: var(--radius-card-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: 14.5px; }

/* Feature grid */
.features {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
@media (max-width: 800px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feature {
  grid-column: span 2;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
/* First card in the set reads as the anchor feature — wider */
.feature:first-child { grid-column: span 3; }
.feature:nth-child(5) { grid-column: span 3; }
@media (max-width: 800px) {
  .feature, .feature:first-child, .feature:nth-child(5) { grid-column: span 1; }
}
.feature .icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-card-sm);
  background: var(--accent-tint);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.feature h3 { font-size: 16.5px; margin-bottom: 6px; }
.feature p { font-size: 14px; margin-bottom: 0; }

/* Stats strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 40px 0;
}
@media (max-width: 700px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }
.stat-card { text-align: left; }
.stat-card .num {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink);
}
.stat-card .label { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* Testimonials */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 800px) { .testimonials { grid-template-columns: 1fr; } }
.testimonial-card {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-card-sm);
  padding: 26px;
}
.testimonial-card p { font-size: 14.5px; color: var(--ink-soft); }
.testimonial-person { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.testimonial-person img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.testimonial-person .name { font-size: 13.5px; font-weight: 600; }
.testimonial-person .role { font-size: 12.5px; color: var(--muted); }

/* Trust strip */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
@media (max-width: 800px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-strip { grid-template-columns: 1fr; } }
.trust-item {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 26px 24px;
}
.trust-item .icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-card-sm);
  background: var(--accent-tint);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.trust-item h4 { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.trust-item p { font-size: 13px; color: var(--muted); margin: 0; }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card-sm);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.faq-q .plus {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.faq-q .plus .v { transition: transform 0.2s ease, opacity 0.2s ease; transform-origin: center; }
.faq-item.is-open .faq-q .plus .v { transform: rotate(90deg); opacity: 0; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-item.is-open .faq-a { max-height: 260px; }
.faq-a-inner {
  padding: 0 22px 20px;
  font-size: 14px;
  color: var(--muted);
}

/* Payment methods strip */
.methods-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  padding: 32px 0;
  opacity: 0.75;
}
.methods-strip img { height: 24px; width: auto; filter: grayscale(1); }
.method-badge {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}

/* Traffic analysis */
.analysis-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .analysis-grid { grid-template-columns: 1fr; } }
.analysis-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.analysis-points li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-soft); }
.analysis-points .check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--signal-tint);
  color: var(--signal);
  display: flex; align-items: center; justify-content: center;
}
.analysis-card {
  background: var(--surface-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 22px;
}
.analysis-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.analysis-card-head .card-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.analysis-total {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--signal);
  background: var(--signal-tint);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}
.analysis-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
  padding: 0 2px;
}
.analysis-chart span {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, var(--accent), var(--accent-hover));
  border-radius: 7px 7px 3px 3px;
  opacity: 0.9;
}
.analysis-chart span:last-child { background: linear-gradient(180deg, var(--signal), var(--accent)); opacity: 1; }
.analysis-legend {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  margin-top: 8px;
}
.analysis-legend span { flex: 1; text-align: center; font-size: 11px; color: var(--muted-light); font-family: var(--font-mono); }
.analysis-breakdown { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.breakdown-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.breakdown-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-accent { background: var(--accent); }
.dot-signal { background: var(--signal); }
.dot-muted { background: var(--muted-light); }
.breakdown-label { color: var(--ink-soft); width: 64px; flex-shrink: 0; }
.breakdown-bar { flex: 1; height: 6px; background: var(--line-soft); border-radius: var(--radius-pill); overflow: hidden; }
.breakdown-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.breakdown-row:nth-child(2) .breakdown-bar i { background: var(--signal); }
.breakdown-row:nth-child(3) .breakdown-bar i { background: var(--muted-light); }
.breakdown-pct { font-family: var(--font-mono); font-size: 12px; color: var(--muted); width: 30px; text-align: right; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--accent) 0%, rgba(46, 94, 234, 0.75) 45%, rgba(16, 185, 129, 0.35) 100%), var(--surface-solid);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 60px 56px;
  text-align: center;
  color: #fff;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.65); margin: 0 auto 24px; max-width: 46ch; }
.cta-band .btn-ghost { border-color: rgba(255,255,255,0.25); color: #fff; }
.cta-band .btn-ghost:hover { border-color: #fff; }

/* ==========================================================================
   Generic page content (.page-body) — headings, lists, and the
   Bootstrap-shaped markup injected by core shortcode elements
   ([payout_rates], [advertising_rates], [payment_proof]). These ship classes
   like .nav-tabs/.table/.pagination assuming Bootstrap is loaded; we don't
   load Bootstrap, so we style them to match the design system directly.
   ========================================================================== */
.page-body { font-size: 15px; color: var(--ink-soft); }
.page-body h1, .page-body h2, .page-body h3, .page-body h4 { margin-top: 32px; }
.page-body ul, .page-body ol { padding-left: 22px; }
.page-body li { margin-bottom: 6px; }
.page-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.page-body .table-responsive { overflow-x: auto; margin: 20px 0; }
.page-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.page-body table th,
.page-body table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}
.page-body table th {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--line-soft);
}
.page-body table.table-striped tr:nth-child(even) td { background: var(--paper); }

/* Bootstrap's default .table-striped hardcodes a light gray stripe that
   ignores our theme. This overrides it everywhere (not just inside
   .page-body) so any admin-authored table — e.g. a Plan's description —
   stays readable in both themes. Same specificity as Bootstrap's rule,
   and this file loads after bootstrap.min.css, so no !important needed. */
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--surface-solid);
  color: var(--ink);
}
.page-body table.table-hover tr:hover td { background: var(--accent-tint); }
.page-body table tr:last-child td { border-bottom: none; }
.page-body .flag-icon { margin-right: 6px; }

.page-body ul.nav-tabs {
  list-style: none;
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 24px 0 0;
  border-bottom: 1px solid var(--line);
}
.page-body ul.nav-tabs li { margin: 0; }
.page-body ul.nav-tabs a {
  display: inline-block;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.page-body ul.nav-tabs li.active a,
.page-body ul.nav-tabs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.page-body .tab-content .tab-pane { display: none; }
.page-body .tab-content .tab-pane.active { display: block; }

/* Publisher/advertising rate cards ([payout_rates] shortcode) — a row per
   country instead of a plain table, each with icon chips for the two rates. */
.payout-rates .tab-content { margin-top: 18px; }
.rate-list { display: flex; flex-direction: column; gap: 10px; }
.rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.rate-row:hover { border-color: var(--accent); transform: translateY(-1px); }
.rate-row-country {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}
.rate-row-flag { flex: 0 0 auto; margin-right: 0; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.rate-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rate-row-metrics { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.rate-metric { display: flex; align-items: center; gap: 10px; }
.rate-metric-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: var(--radius-card-sm);
  background: var(--accent-tint);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.rate-metric-icon svg { width: 17px; height: 17px; }
.rate-metric-text { display: flex; flex-direction: column; line-height: 1.3; }
.rate-metric-value { font-family: var(--font-mono); font-weight: 700; font-size: 14.5px; color: var(--ink); }
.rate-metric-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .rate-row { flex-direction: column; align-items: flex-start; }
  .rate-row-metrics { gap: 20px; width: 100%; justify-content: space-between; }
}

.page-body ul.pagination {
  list-style: none;
  display: flex;
  gap: 6px;
  padding: 0;
  margin: 20px 0 0;
}
.page-body ul.pagination li a,
.page-body ul.pagination li.active a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  text-decoration: none;
}
.page-body ul.pagination li.active a { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-body ul.pagination li a:hover { border-color: var(--accent); color: var(--accent); }
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 32px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col { min-width: 0; }
.footer-brand p { font-size: 14px; max-width: 32ch; }
.footer-social {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  gap: 16px;
}
.footer-social a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
}
.footer-social a:hover { color: var(--accent); }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--ink-soft); }
.footer-col a:hover { color: var(--accent); }

/* Bigger two-tone column titles with a short accent underline, used for the
   "Get in Touch" / "Contact Us" / "Create your account !!" footer columns. */
.footer-col h4.footer-col-title {
  position: relative;
  font-size: 19px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  margin-bottom: 22px;
  padding-bottom: 12px;
}
.footer-col h4.footer-col-title .accent { color: var(--accent); }
.footer-col h4.footer-col-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.footer-contact-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
}
.footer-contact-list a:hover { color: var(--accent); }
.footer-contact-icon {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.footer-contact-icon svg { width: 15px; height: 15px; }
.footer-cta-btn { margin-top: 4px; max-width: 100%; }
@media (max-width: 760px) {
  .footer-cta-btn { width: 100%; white-space: normal; text-align: center; }
}

/* Every form across member/admin wraps its submit button in the same
   `<div style="margin-top:20px;">...</div>` at the bottom of a card — this
   adds a divider line above that button row wherever it appears, without
   having to touch the 30+ templates that use this exact pattern. Matching
   on the inline style + :has(.btn) keeps it from touching any other div
   that happens to share that margin but isn't a button row. */
div[style*="margin-top:20px"]:has(> .btn),
div[style*="margin-top: 20px"]:has(> .btn) {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
/* Same idea for the rarer case where the button sits bare as the last
   thing in a card body, with no wrapper div at all (e.g. the Withdraw
   request button). */
.dash-card-body > .btn:last-child,
.dash-card-body > a.btn:last-child,
.dash-card-body > button.btn:last-child {
  position: relative;
  margin-top: 20px;
}
.dash-card-body > .btn:last-child::before,
.dash-card-body > a.btn:last-child::before,
.dash-card-body > button.btn:last-child::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 1px;
  background: var(--line);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--muted-light);
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   Link view / monetization flow (page.ctp, banner, interstitial)
   ========================================================================== */
.linkflow {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.linkflow-nav {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.linkflow-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.linkflow-nav .nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
}
.linkflow-nav .nav-links a { color: var(--muted); }
.linkflow-nav .nav-links a:hover { color: var(--ink); }

/* Banner-ad flow: #countdown/#timer and .get-link are core JS hooks — do not rename */
.countdown-box {
  margin: 20px 0;
  text-align: center;
}
.countdown-box .timer {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--accent);
  display: block;
}
.countdown-box .timer-label {
  font-size: 12.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
a.get-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  transition: background 0.15s ease, opacity 0.15s ease;
}
a.get-link.disabled { background: var(--muted-light); cursor: not-allowed; pointer-events: none; }
a.get-link:not(.disabled):hover { background: var(--accent-hover); }
.hidden { display: none !important; }

/* Interstitial flow: .skip-ad is populated/replaced by core JS — layout only */
.skip-ad { font-size: 13px; color: var(--muted); text-align: center; }
.skip-ad .counter { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.skip-ad a.btn { margin-top: 6px; }
#frame { display: block; width: 100%; min-height: calc(100vh - 130px); border: none; }
body.interstitial-page #go-submit:not(.hidden) {
  display: block;
  margin: 16px auto;
}
.linkflow-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.link-card {
  width: 100%;
  max-width: 620px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 36px;
  text-align: center;
}
.link-card .eyebrow { justify-content: center; }
.link-card .destination-url {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  background: var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 0 0 24px;
  word-break: break-all;
}
.countdown-ring {
  width: 88px; height: 88px;
  margin: 0 auto 24px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.countdown-ring svg { transform: rotate(-90deg); width: 88px; height: 88px; }
.countdown-ring circle { fill: none; stroke-width: 5; }
.countdown-ring .ring-bg { stroke: var(--line); }
.countdown-ring .ring-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.countdown-ring .ring-num {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.ad-slot {
  background: var(--line-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 24px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.link-card .btn { margin-top: 8px; }
.link-card .skip-note { font-size: 12.5px; color: var(--muted-light); margin-top: 14px; }

/* Captcha */
.captcha-card {
  max-width: 420px;
}
.captcha-image-wrap {
  background: var(--line-soft);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.captcha-image-wrap img { border-radius: var(--radius-sm); }
.captcha-tools { display: flex; gap: 6px; }
.captcha-tools button {
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  width: 34px; height: 34px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.captcha-tools button:hover { color: var(--accent); border-color: var(--accent); }
.form-field { text-align: left; margin-bottom: 16px; }
.form-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ink-soft); }
.form-field input[type="text"],
.form-field textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface);
 backdrop-filter: blur(var(--glass-blur));
 -webkit-backdrop-filter: blur(var(--glass-blur));
 border: 1px solid var(--glass-border); }

/* Bulk actions (Manage Links) — floating action bar + row checkboxes */
.link-item-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.link-item-checkbox input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}
.bulk-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
}
.bulk-select-all input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.bulk-action-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-lg);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 13.5px;
  font-weight: 600;
}
.bulk-action-bar.is-visible { transform: translateX(-50%) translateY(0); }
.bulk-action-bar .btn { padding: 8px 16px; font-size: 12.5px; border-radius: var(--radius-pill) !important; }
.bulk-action-bar .btn-ghost { background: transparent; color: var(--paper); border: 1px solid rgba(128, 128, 128, 0.35); }
.bulk-action-bar .btn-ghost:hover { border-color: var(--paper); }

/* Empty state illustration */
.empty-state { text-align: center; padding: 56px 24px; }
.empty-state svg { width: 56px; height: 56px; color: var(--muted-light); margin-bottom: 16px; }
.empty-state p { color: var(--muted); font-size: 14px; margin-bottom: 18px; }

/* Skeleton loaders */
@keyframes skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.skeleton {
  background: var(--line-soft);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.skeleton-text { height: 12px; margin-bottom: 8px; }
.skeleton-card { height: 96px; border-radius: var(--radius-card-sm); margin-bottom: 12px; }

/* QR code popup (Manage Links page) */
.qr-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(6, 10, 20, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 20px;
}
.qr-modal-overlay.is-visible { opacity: 1; }
.qr-modal {
  width: 100%;
  max-width: 300px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 28px 24px 24px;
  text-align: center;
  position: relative;
  transform: scale(0.92) translateY(8px);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.qr-modal-overlay.is-visible .qr-modal { transform: scale(1) translateY(0); }
.qr-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--line-soft);
  color: var(--muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.qr-modal-close:hover { color: var(--ink); background: var(--line); }
.qr-modal-canvas-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 14px;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-modal-canvas img,
.qr-modal-canvas canvas { display: block; max-width: 100%; height: auto; }
.qr-modal-spinner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(15, 26, 46, 0.15);
  border-top-color: var(--accent);
  animation: qr-spin 0.7s linear infinite;
}
@keyframes qr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qr-modal-spinner { animation-duration: 1.4s; } }
.qr-modal-error { font-size: 12.5px; color: var(--danger); margin: 0 0 4px; }
.qr-modal-title { font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
.qr-modal-url { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); word-break: break-all; margin-bottom: 18px; }

/* Toast notifications (Flash messages) — fixed top-right stack instead of
   pushing page content down; auto-dismiss + manual close handled in app.js */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  width: calc(100% - 40px);
  pointer-events: none;
}
.toast-container .alert {
  position: relative;
  border-radius: var(--radius-md) !important;
  padding: 13px 40px 13px 16px !important;
  font-size: 13.5px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.toast-container .alert.is-leaving { animation: toast-out 0.25s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) {
  .toast-container .alert, .toast-container .alert.is-leaving { animation: none; }
}
.toast-container .alert-success { background: var(--signal-tint); color: var(--signal); border-color: transparent; }
.toast-container .alert-error, .toast-container .alert-danger { background: var(--danger-tint); color: var(--danger); border-color: transparent; }
.toast-container .alert-warning { background: #FEF3C7; color: #B45309; border-color: transparent; }
.toast-container .alert-info { background: var(--accent-tint); color: var(--accent); border-color: transparent; }
.toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.toast-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
@media (max-width: 480px) {
  .toast-container { left: 12px; right: 12px; top: 12px; max-width: none; width: auto; }
}

/* ==========================================================================
   .auth-card (front-layout usage)
   The .auth-card component/markup (icon badge, input-icon-field, pw-toggle)
   is defined in auth.css for the sign in/up pages, but a few Front-layout
   pages — e.g. the password-protected link gate (link_password.ctp) — reuse
   the same markup while rendering under the Front layout, which only loads
   theme.css and never loads auth.css. Without these rules the SVG icons
   have no size constraint and render at their raw intrinsic size. This
   block mirrors just what's needed so .auth-card works wherever it's used,
   regardless of which layout/CSS bundle the page is on.
   ========================================================================== */
.auth-card {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px;
  text-align: center;
}
.auth-box-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: var(--radius-card-sm);
  background: var(--accent-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-box-icon svg { width: 24px; height: 24px; }
.auth-box-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  margin-bottom: 22px;
}
.auth-card .form-group { margin-bottom: 14px; text-align: left; }
.auth-card .form-control,
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  height: auto;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.auth-card .form-control:focus,
.auth-card input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: none;
}
.auth-card .form-control::placeholder { color: var(--muted-light); }
.auth-card .help-block { color: var(--danger); font-size: 12.5px; text-align: left; margin-top: 4px; }
.auth-card .has-error .form-control { border-color: var(--danger); }
.auth-card .input-icon-field { position: relative; }
.auth-card .input-icon-field .form-control { padding-left: 42px; }
.auth-card .input-icon-field .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: flex;
  pointer-events: none;
  transition: color 0.15s ease;
}
.auth-card .input-icon-field .input-icon svg { width: 17px; height: 17px; }
.auth-card .input-icon-field .form-control:focus ~ .input-icon,
.auth-card .input-icon-field .input-icon { z-index: 1; }
.auth-card .input-icon-field:focus-within .input-icon { color: var(--accent); }
.auth-card .input-icon-field.has-toggle .form-control { padding-right: 42px; }
.auth-card .pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}
.auth-card .pw-toggle:hover { color: var(--accent); }
.auth-card .pw-toggle svg { width: 17px; height: 17px; }
.auth-card .pw-toggle .icon-eye-off { display: none; }
.auth-card .pw-toggle.is-visible .icon-eye { display: none; }
.auth-card .pw-toggle.is-visible .icon-eye-off { display: block; }

/* ==========================================================================
   Cookie notice (#cookie-pop is injected by the core's /js/app.js — this
   theme doesn't load the old app.css or Bootstrap CSS, so it needs its
   own styling here to match the glass-card design instead of appearing
   as raw unstyled/stacked text over the footer).
   ========================================================================== */
#cookie-pop {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface-solid);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 18px 22px;
}
#cookie-pop .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
#cookie-pop .container-fluid > [class*="col-"] {
  width: auto;
  max-width: none;
  padding: 0;
  float: none;
}
#cookie-pop .cookie-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
#cookie-pop .cookie-message a { color: var(--accent); font-weight: 600; }
#cookie-pop .cookie-confirm { flex: 0 0 auto; }
#cookie-pop #got-cookie {
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
#cookie-pop #got-cookie:hover { background: var(--accent-hover); transform: translateY(-1px); }
@media (max-width: 560px) {
  #cookie-pop { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
  #cookie-pop .container-fluid { flex-direction: column; align-items: stretch; text-align: left; }
  #cookie-pop .cookie-confirm { text-align: right; }
}