/* INOCULENS Tunnel app styles (split from index.html, APP_VERSION 20260914).
   Bump ?v= in index.html when editing this file. */
    :root {
      --primary: #e8eaed;
      --primary-hover: #ffffff;
      --primary-ink: #0f0f0f;
      --accent: #3ea6ff;
      --accent-secondary: #8ab4ff;
      --bg: #0f0f0f;
      --bg-2: #131314;
      --card-bg: rgba(33, 33, 36, 0.62);
      --card-solid: #212123;
      --text: #f1f1f1;
      --text-muted: #aaaaaa;
      --text-faint: #717171;
      --border: rgba(255, 255, 255, 0.09);
      --border-strong: rgba(255, 255, 255, 0.14);
      --success: #2ba640;
      --success-text: #6fcf7f;
      --danger: #f04141;
      --danger-hover: #d92d20;
      --danger-text: #f28b82;
      --warning: #f5a623;
      color-scheme: dark;
    }

    * {
      box-sizing: border-box;
    }

    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      background: #0f0f0f;
      scrollbar-color: #3d3d3d #0f0f0f;
    }

    body {
      font-family: 'DM Sans', 'Inter', 'Roboto', 'Mulish', sans-serif;
      background:
        radial-gradient(1100px 500px at 50% -180px, rgba(255, 255, 255, 0.055), transparent 60%),
        radial-gradient(800px 420px at 85% 10%, rgba(62, 166, 255, 0.05), transparent 60%),
        #0f0f0f;
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      /* No bottom padding: the docked footer runs straight out of the
         screen edge. */
      padding: 140px 20px 0;
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh;
      /* Dynamic Viewport Height for mobile browser UI changes */
      overflow-x: hidden;
      /* Prevent page-wide horizontal scroll */
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* Subtle matte grain, not gloss */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.5;
      background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
      background-size: 22px 22px;
      mask-image: linear-gradient(to bottom, black 0%, transparent 55%);
    }

    body.modal-open {
      overflow: hidden;
    }

    /* Prevent scrolling while initial loading screen is visible */
    body.initial-loading {
      overflow: hidden !important;
    }

    .container {
      width: 100%;
      max-width: 1000px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 1;
      /* Grow to fill the viewport so the docked footer (margin-top: auto)
         glues to the bottom even when the page content is short. */
      flex: 1 0 auto;
    }

    /* Minimum breathing room between the session controls and the
       docked footer (its margin-top: auto absorbs the rest). */
    .session-controls {
      margin-bottom: 3rem;
    }

    h1 {
      font-family: 'DM Sans', sans-serif;
      font-size: 2.6rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      background: linear-gradient(to bottom, #ffffff 30%, #b3b8c2 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 1rem;
    }

    h2, h3 {
      letter-spacing: -0.01em;
    }

    /* Hero title lines: each phrase never wraps internally, so the title
       renders either on one line (wide screens) or as exactly the two
       intended lines — never with an orphaned word on its own row.
       Mobile stacks them as blocks (see media query below). */
    .hero-copy h1 .h1-line {
      white-space: nowrap;
    }

    @media (max-width: 767px) {
      .hero-copy h1 .h1-line {
        display: block;
      }

      .hero-copy h1 .h1-sub {
        white-space: nowrap;
      }
    }

    a {
      color: var(--accent);
    }

    button, input, select {
      font-family: 'DM Sans', sans-serif;
    }

    ::selection {
      background: rgba(62, 166, 255, 0.35);
    }

    :focus-visible {
      outline: 2px solid rgba(62, 166, 255, 0.7);
      outline-offset: 2px;
    }

    ::-webkit-scrollbar {
      width: 10px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: #3d3d3d;
      border-radius: 8px;
      border: 2px solid #0f0f0f;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #4d4d4d;
    }

    .marquee-container {
      width: fit-content;
      max-width: 100%;
      overflow: hidden;
      margin-top: 0; /* Sits below the hero title */
      margin-bottom: 1.5rem;
      margin-left: auto;
      margin-right: auto;
      padding: 0.55rem 1.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      min-height: 0;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      border-radius: 999px;
      backdrop-filter: blur(16px) saturate(130%);
      -webkit-backdrop-filter: blur(16px) saturate(130%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      /* Width eased from JS (measured pixels) so the pill glides between
         texts instead of snapping — same feel as the expanding search. */
      transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .marquee-text {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: #d7d7d7;
      white-space: nowrap;
      position: static;
      width: auto;
      max-width: 100%;
      padding: 0;
      will-change: transform, opacity;
    }

    .marquee-text.racing-in {
      animation: matteFadeSlideIn 0.45s ease-out forwards;
    }

    .marquee-text.holding {
      opacity: 1;
    }

    .marquee-text.racing-out {
      animation: matteFadeSlideOut 0.45s ease-in forwards;
    }

    @keyframes matteFadeSlideIn {
      0% {
        opacity: 0;
        transform: translateY(-6px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes matteFadeSlideOut {
      0% {
        opacity: 1;
        transform: translateY(0);
      }
      100% {
        opacity: 0;
        transform: translateY(6px);
      }
    }

    @media (max-width: 500px) {
      .marquee-container {
        padding: 0.55rem 1.25rem;
        border-radius: 14px;
        width: 100%;
      }

      .marquee-text {
        font-size: 0.85rem;
        white-space: normal;
        text-wrap: balance;
        text-align: center;
        width: 100%;
        transform: none;
        line-height: 1.4;
      }

      .marquee-text.racing-in {
        animation: matteFadeSlideIn 0.45s ease-out forwards;
      }

      .marquee-text.racing-out {
        animation: matteFadeSlideOut 0.45s ease-in forwards;
      }
    }

    .shorter-box {
      background: rgba(33, 33, 36, 0.62);
      backdrop-filter: blur(28px) saturate(135%);
      -webkit-backdrop-filter: blur(28px) saturate(135%);
      padding: 1.5rem;
      border-radius: 18px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
      width: 100%;
      border: 1px solid var(--border);
      margin-bottom: 3rem;
      /* The backdrop blur traps the domain dropdown in this card's stacking
         context, so the whole card sits above the history section. */
      position: relative;
      z-index: 60;
    }

    .input-container {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    input {
      height: 48px;
      padding: 0 16px;
      font-size: 15px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      color: var(--text);
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
    }

    input::placeholder {
      color: #717171;
      font-weight: 400;
    }

    input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(62, 166, 255, 0.55), 0 0 0 4px rgba(62, 166, 255, 0.12);
    }

    .slug-wrapper {
      display: flex;
      align-items: center;
      background: transparent;
      border: none;
      border-radius: 12px;
      overflow: visible;
      transition: none;
      gap: 0;
    }

    .slug-prefix {
      display: flex;
      align-items: center;
      height: 48px;
      padding: 0 10px 0 12px;
      background: rgba(255, 255, 255, 0.05);
      color: #d7d7d7;
      font-family: 'DM Sans', 'Mulish', sans-serif;
      font-size: 0.85rem;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-right: none;
      border-radius: 12px 0 0 12px;
      white-space: nowrap;
      min-width: 0;
      transition: border-color 0.2s;
      box-sizing: border-box;
      cursor: pointer;
      position: relative;
      user-select: none;
      gap: 10px;
    }

    .domain-text-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      overflow: hidden;
    }

    /* Long custom domains truncate with … instead of forcing the row
       wider than the card. (Ellipsis lives on the text span — never on
       .slug-prefix itself, whose absolute dropdown must not be clipped.) */
    #currentDomain {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .domain-chevron {
      font-size: 10px;
      transition: transform 0.2s;
      color: #717171;
    }

    .slug-prefix.active .domain-chevron {
      transform: rotate(180deg);
    }

    .add-domain-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
      border: 1px solid transparent;
      transition: background 0.15s ease;
      margin-right: 2px;
      flex-shrink: 0;
    }

    .add-domain-btn:hover {
      background: rgba(255, 255, 255, 0.16);
      color: #fff;
    }

    .domain-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      width: max-content;
      min-width: 240px;
      max-width: min(480px, 90vw);
      /* Grow with content up to ~5 rows, then hold size and scroll inside. */
      max-height: 262px;
      background: rgba(30, 30, 33, 0.92);
      backdrop-filter: blur(28px) saturate(130%);
      -webkit-backdrop-filter: blur(28px) saturate(130%);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
      z-index: 1000;
      display: none;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: #3d3d3d transparent;
      animation: fadeInScale 0.2s ease-out;
    }

    .domain-dropdown::-webkit-scrollbar { width: 8px; }
    .domain-dropdown::-webkit-scrollbar-track { background: transparent; }
    .domain-dropdown::-webkit-scrollbar-thumb { background: #3d3d3d; border-radius: 8px; }

    @keyframes fadeInScale {
      from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
      }

      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .domain-dropdown.visible {
      display: flex;
    }

    .domain-option {
      padding: 12px 16px;
      font-size: 0.9rem;
      color: var(--text);
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      border-bottom: 1px solid var(--border);
    }

    .domain-actions-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      min-width: 140px; /* Reduced by 30% from 200px as per user request */
    }

    .domain-actions-group > * {
      text-align: center;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }

    .domain-actions-group > button {
      flex: none;
      width: 66px; /* Identical in every row (matches the original equal split) */
    }

    .domain-actions-group > span {
      flex-shrink: 0; /* Status pill always fits its text (ACTION NEEDED etc.) */
    }

    /* Domain name yields instead: it truncates with … so a wide status pill
       never pushes the row past the dropdown edge (which would clip the pill
       on narrow screens). Scoped to name spans following the actions group —
       never the wrapping twin-warning row. */
    .domain-option > div.domain-actions-group + span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .domain-option:last-child {
      border-bottom: none;
    }

    .domain-option:hover {
      background: rgba(255, 255, 255, 0.07);
      color: #fff;
    }

    .domain-option.selected {
      background: rgba(62, 166, 255, 0.12);
      color: var(--accent);
    }

    .domain-option.add-new {
      background: rgba(43, 166, 64, 0.08);
      color: var(--success-text);
      font-weight: 600;
      border-top: 1px solid var(--border);
    }

    .domain-status {
      font-size: 0.7rem;
      padding: 3px 9px;
      border-radius: 999px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .status-pending {
      background: rgba(245, 166, 35, 0.14);
      color: var(--warning);
    }

    .status-active {
      background: rgba(43, 166, 64, 0.14);
      color: var(--success-text);
    }

    .status-blocked {
      background: rgba(240, 65, 65, 0.14);
      color: var(--danger-text);
    }

    #slugInput {
      height: 48px;
      padding: 0 12px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      margin-left: -1px;
      flex-grow: 1;
      /* Allow shrinking below intrinsic input width in side-by-side mode —
         without this the field spills past the card to the screen edge. */
      min-width: 0;
      border-radius: 0 12px 12px 0;
      background: rgba(255, 255, 255, 0.05);
      color: var(--text);
      outline: none;
      box-shadow: none;
      position: relative;
      z-index: 1;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
    }

    #slugInput:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(62, 166, 255, 0.55), 0 0 0 4px rgba(62, 166, 255, 0.12);
      z-index: 2;
    }

    button.primary {
      font-family: 'DM Sans', sans-serif;
      background: var(--primary);
      color: var(--primary-ink);
      height: 48px;
      padding: 0 24px;
      font-weight: 600;
      font-size: 0.92rem;
      letter-spacing: 0.01em;
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.1s ease;
      margin-top: 0.85rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
    }

    button.primary:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    @media (hover: hover) {
      button.primary:hover:not(:disabled) {
        background: var(--primary-hover);
      }
    }

    button.primary:active:not(:disabled) {
      transform: scale(0.98);
      background: #d9d9d9;
    }

    #result {
      margin-top: 1.5rem;
      padding: 1rem;
      border-radius: 12px;
      background: rgba(43, 166, 64, 0.1);
      border: 1px solid rgba(43, 166, 64, 0.28);
      display: none;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      box-sizing: border-box;
    }

    .short-link-display {
      color: var(--success-text);
      font-weight: 600;
      text-decoration: none;
      word-break: break-all;
    }

    .copy-btn {
      background: rgba(255, 255, 255, 0.09);
      border: 1px solid transparent;
      color: var(--text);
      padding: 8px 16px;
      border-radius: 999px;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 0.78rem;
    }

    @media (hover: hover) {
      .copy-btn:hover {
        background: rgba(255, 255, 255, 0.16);
      }
    }

    .copy-btn:active {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(0.96);
    }

    #errorBox {
      margin-top: 1rem;
      padding: 0.75rem 1rem;
      border-radius: 12px;
      background: rgba(240, 65, 65, 0.09);
      border: 1px solid rgba(240, 65, 65, 0.3);
      color: var(--danger-text);
      font-size: 0.9rem;
      display: none;
      align-items: center;
      gap: 8px;
    }

    /* History Table */
    .history-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 1rem;
      gap: 1rem;
    }

    .purge-controls {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .purge-btn {
      background: transparent;
      border: 1px solid rgba(240, 65, 65, 0.4);
      color: var(--danger-text);
      padding: 0 16px;
      border-radius: 999px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 0.75rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s ease, transform 0.1s ease;
      height: 44px;
      min-height: 44px;
      white-space: nowrap;
      overflow: hidden;
    }

    /* Hide emoji-only state by default - emoji shows alongside text */
    .purge-btn .btn-emoji {
      display: inline;
      flex-shrink: 0;
    }

    .purge-btn .btn-text {
      display: inline;
    }

    @media (hover: hover) {
      .purge-btn:hover {
        background: rgba(240, 65, 65, 0.16);
        color: #fff;
      }
    }

    .purge-btn:active {
      background: rgba(240, 65, 65, 0.16);
      color: #fff;
      transform: scale(0.97);
    }

    .purge-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Export button: same pill geometry as .purge-btn (so the mobile
       flex-weight + search-active contraction rules apply), but neutral
       accent tint — it is non-destructive, unlike Delete All. */
    .purge-btn.export-btn {
      background: rgba(62, 166, 255, 0.12);
      border-color: rgba(62, 166, 255, 0.35);
      color: var(--accent);
    }

    @media (hover: hover) {
      .purge-btn.export-btn:hover:not(:disabled) {
        background: rgba(62, 166, 255, 0.22);
        color: #fff;
      }
    }

    .purge-btn.export-btn:active:not(:disabled) {
      background: rgba(62, 166, 255, 0.28);
      color: #fff;
      transform: scale(0.97);
    }

    /* Dimmed but still pressable when there is nothing to export —
       the click opens the "Nothing to export" explainer dialog. */
    .purge-btn.export-btn.is-empty {
      opacity: 0.65;
    }

    /* Hide purge controls when empty */
    .purge-controls.hidden {
      display: none;
    }

    /* Search functionality */
    .search-container {
      display: none;
      /* Hidden by default until links are loaded */
      align-items: center;
      gap: 0;
    }

    .search-container.visible {
      display: flex;
    }

    .search-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--text-muted);
      padding: 0 12px;
      border-radius: 999px;
      font-size: 0.85rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: border-radius 0.25s ease, background 0.15s ease;
      height: 44px;
      min-height: 44px;
      width: 44px;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    .search-btn svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    @media (hover: hover) {
      .search-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.12);
        color: #fff;
      }
    }

    .search-btn:active {
      background: rgba(255, 255, 255, 0.14);
      transform: scale(0.98);
    }

    /* Expanded: the button's right edge goes straight and fuses with the
       input's straight left edge — one continuous pill. Collapsed the
       button is fully round again. */
    .purge-controls.search-active .search-btn {
      border-radius: 999px 0 0 999px;
      border-right: none;
      margin-right: 0;
    }

    .search-input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
      width: 0;
      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 0 999px 999px 0;
    }

    .search-input-wrapper.active {
      width: 240px;
    }

    .purge-controls.search-active .search-input-wrapper {
      border-radius: 0;
    }

    .search-input {
      width: 100%;
      height: 44px;
      padding: 0 40px 0 16px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 0 999px 999px 0;
      color: var(--text);
      font-family: 'DM Sans', 'Mulish', sans-serif;
      font-size: 0.95rem;
      font-weight: 400;
      letter-spacing: 0.01em;
      outline: none;
      opacity: 0;
      transition: opacity 0.3s ease 0.1s, border-color 0.2s;
    }

    .search-input-wrapper.active .search-input {
      opacity: 1;
    }

    .search-input::placeholder {
      color: #717171;
      font-weight: 400;
    }

    .purge-controls.search-active .search-input {
      border-left: none;
    }

    /* No focus highlight on the links search: it stays fused with the
       search button pill while focused. */
    .purge-controls .search-input:focus {
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: none;
      outline: none;
    }

    .search-clear-btn {
      position: absolute;
      right: 12px;
      background: transparent;
      border: none;
      color: rgba(148, 163, 184, 0.7);
      cursor: pointer;
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s, color 0.2s, background 0.2s;
      border-radius: 4px;
    }

    .search-input-wrapper.active .search-clear-btn {
      opacity: 1;
    }

    .search-clear-btn:hover {
      color: var(--danger);
      background: rgba(239, 68, 68, 0.1);
    }

    .search-clear-btn svg {
      width: 16px;
      height: 16px;
    }

    .search-count {
      position: absolute;
      bottom: -26px;
      right: 4px;
      font-size: 0.75rem;
      color: var(--text-muted);
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.2s;
      font-family: 'DM Sans', 'Mulish', sans-serif;
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    .search-input-wrapper.active .search-count {
      opacity: 1;
    }

    /* Deep-link island: a compact pill docked under the URL field that
       drops out of it like a notification island when a supported app
       link is pasted. */
    .platform-detector {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: fit-content;
      max-width: 100%;
      margin: 10px auto 0;
      padding: 7px 8px 7px 9px;
      border-radius: 999px;
      background: rgba(24, 24, 27, 0.72);
      backdrop-filter: blur(20px) saturate(130%);
      -webkit-backdrop-filter: blur(20px) saturate(130%);
      border: 1px solid var(--border);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
      font-size: 0.82rem;
      font-weight: 500;
      color: #d7d7d7;
      animation: islandIn 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes islandIn {
      from {
        opacity: 0;
        transform: translateY(-10px) scale(0.92);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .platform-detector.visible {
      display: flex;
    }

    /* Faint brand tint per platform that has a logo; the rest stay neutral. */
    .platform-detector.youtube {
      border-color: rgba(255, 0, 0, 0.28);
    }

    .platform-detector.instagram {
      border-color: rgba(225, 48, 108, 0.32);
    }

    .platform-detector.facebook {
      border-color: rgba(24, 119, 242, 0.32);
    }

    .platform-detector.linkedin {
      border-color: rgba(0, 119, 181, 0.35);
    }

    .platform-icon {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      overflow: hidden;
      border-radius: 50%;
    }

    .platform-icon img {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      object-fit: cover;
      display: block;
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .platform-text {
      white-space: nowrap;
      color: #e6e6e6;
    }

    .platform-badge {
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: rgba(43, 166, 64, 0.14);
      color: var(--success-text);
      flex-shrink: 0;
    }

    @media (max-width: 480px) {
      .platform-detector {
        font-size: 0.76rem;
        gap: 8px;
        padding: 7px 12px;
        flex-wrap: wrap;
        row-gap: 4px;
        border-radius: 20px;
      }

      .platform-text {
        white-space: normal;
        text-align: center;
      }
    }

    .history-table-wrapper {
      margin-top: 1rem;
      border-radius: 18px;
      /* Internal scroll as a backstop: page content must never escape
         the viewport even if a row ever exceeds the card. */
      overflow-x: auto;
      border: 1px solid var(--border);
      background: rgba(33, 33, 36, 0.55);
      backdrop-filter: blur(24px) saturate(130%);
      -webkit-backdrop-filter: blur(24px) saturate(130%);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      -webkit-overflow-scrolling: touch;
    }

    .history-table-wrapper::-webkit-scrollbar {
      height: 6px;
    }

    .history-table-wrapper::-webkit-scrollbar-thumb {
      background: #3d3d3d;
      border-radius: 3px;
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      min-width: 600px;
      /* Force minimum width to trigger scroll */
    }

    th,
    td {
      padding: 14px 16px;
      text-align: left;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    tr:last-child td {
      border-bottom: none;
    }

    th {
      background: transparent;
      color: var(--text-faint);
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    tbody tr {
      transition: background 0.12s ease;
    }

    .history-original {
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text-faint);
      font-size: 0.83rem;
    }

    .label-cell {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      padding: 4px 8px;
      background: transparent;
      border: none;
      border-radius: 6px;
      width: auto;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .link-label {
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.92rem;
      font-weight: 500;
      max-width: none;
      overflow: visible;
      text-overflow: none;
      white-space: normal;
      flex-shrink: 1;
      cursor: default;
      line-height: 1.4;
    }

    .label-edit-btn {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 2px;
      margin-right: 0px;
      margin-left: -10px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, color 0.15s ease;
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      box-shadow: none;
    }

    .label-edit-btn svg {
      width: 20px;
      height: 20px;
    }

    .label-edit-btn:disabled,
    .label-edit-btn.saving {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }

    @media (hover: hover) {
      .label-edit-btn:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
      }
    }

    .label-edit-btn.save-mode {
      color: var(--success-text);
    }

    .label-edit-btn.save-mode:hover {
      background: rgba(43, 166, 64, 0.15);
      color: var(--success-text);
    }

    .label-input {
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-family: 'DM Sans', 'Mulish', sans-serif;
      font-size: 0.95rem;
      font-weight: 400;
      padding: 4px 8px;
      width: 100%;
      min-width: 200px;
      max-width: 400px;
      flex-shrink: 1;
      flex-grow: 1;
      outline: none;
      height: 32px;
      box-sizing: border-box;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .label-input::placeholder {
      color: #717171;
      opacity: 1;
      font-family: 'DM Sans', 'Mulish', sans-serif;
      font-size: 0.95rem;
      font-weight: 400;
    }

    .label-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px rgba(62, 166, 255, 0.5);
      outline: none;
    }

    /* Label row + data row behave as ONE card: flush together, and the
       .pair-hover class (set via mouse delegation) washes both rows at
       once — hovering either half highlights the whole thing. */
    .link-item-row td {
      border-bottom: none;
      padding: 14px 16px 2px;
      background: transparent;
    }

    .link-data-row td {
      border-top: none;
      border-bottom: 1px solid var(--border);
      padding: 0px 16px 10px;
      background: transparent;
    }

    .link-data-row:last-child td {
      border-bottom: none;
    }

    tr.link-item-row.pair-hover td,
    tr.link-data-row.pair-hover td {
      background: rgba(255, 255, 255, 0.05);
    }

    /* Hide mobile link cards on wide desktop — the table needs ~950px
       to fit, so cards stay until 1024px. */
    @media (min-width: 1024px) {
      .link-item-container {
        display: none !important;
      }
    }

    /* Mobile gradient adjustment */
    @media (max-width: 1023px) {
      .link-item-row td {
        background: transparent !important;
        padding: 8px 16px 4px;
      }

      .link-data-row td {
        padding: 8px 16px 10px;
      }
    }


    @media (max-width: 1023px) {
      .label-cell {
        width: auto;
        max-width: 100%;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 0 0 8px 0;
        margin-top: 0;
      }

      .label-edit-btn {
        margin-top: 0;
      }

      .label-input {
        width: 150px;
        min-width: 80px;
        max-width: 150px;
        flex-shrink: 1;
        flex-grow: 0;
        height: 24px;
        font-size: 0.95rem;
      }

      .link-label,
      .label-placeholder {
        max-width: none;
        flex-shrink: 1;
        flex-grow: 0;
        min-width: 0;
        font-size: 0.95rem;
        line-height: 1.4;
      }
    }

    .label-placeholder {
      color: rgba(148, 163, 184, 0.7);
      font-family: 'Mulish', sans-serif;
      font-size: 1rem;
      font-weight: 300;
      font-style: normal;
      cursor: default;
      flex-shrink: 1;
      opacity: 0.8;
      line-height: 1.4;
    }

    .label-placeholder:hover {
      color: rgba(148, 163, 184, 0.7);
    }

    /* Loading spinner for label saving */
    .label-loading {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 28px;
      min-height: 28px;
      color: rgba(241, 241, 241, 0.6);
      font-family: 'Mulish', sans-serif;
      font-size: 0.85rem;
      font-weight: 400;
    }

    .label-spinner {
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255, 255, 255, 0.15);
      border-top-color: var(--text-muted);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

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


    .loading-spinner {
      width: 54px;
      height: 54px;
      border: 4px solid rgba(255, 255, 255, 0.12);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    .spinner-small {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(0, 0, 0, 0.25);
      border-top-color: var(--primary-ink);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    .history-short {
      color: var(--accent);
      text-decoration: none;
      font-weight: 500;
    }

    .history-short:hover {
      text-decoration: underline;
    }

    .action-btns {
      display: flex;
      gap: 8px;
    }

    .click-count-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 80px;
    }

    .click-count-number {
      min-width: 80px;
      height: 34px;
      min-height: 34px;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 0 8px;
      background: rgba(255, 255, 255, 0.07);
      font-family: 'DM Sans', 'Mulish', sans-serif;
      font-weight: 600;
    }

    .btn-small {
      height: 34px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 0.72rem;
      letter-spacing: 0.01em;
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      text-align: center;
      white-space: nowrap;
      transition: background 0.15s ease, transform 0.1s ease;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 90px;
      padding: 0 8px;
      flex-shrink: 0;
    }

    .btn-copy-small {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      width: 90px;
    }

    @media (hover: hover) {
      .btn-copy-small:hover {
        background: rgba(255, 255, 255, 0.18);
      }
    }

    .btn-copy-small:active {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(0.98);
    }

    .btn-copy-original {
      background: rgba(62, 166, 255, 0.16);
      color: var(--accent);
      width: 90px;
    }

    @media (hover: hover) {
      .btn-copy-original:hover {
        background: rgba(62, 166, 255, 0.26);
      }
    }

    .btn-copy-original:active {
      background: rgba(62, 166, 255, 0.32);
      transform: scale(0.98);
    }

    .btn-delete-small {
      background: transparent;
      color: var(--danger-text);
      border-color: rgba(240, 65, 65, 0.35);
      width: 90px;
    }

    @media (hover: hover) {
      .btn-delete-small:hover {
        background: rgba(240, 65, 65, 0.16);
        color: #fff;
      }
    }

    .btn-delete-small:active {
      background: rgba(240, 65, 65, 0.22);
      color: #fff;
      transform: scale(0.98);
    }

    /* Session Control Buttons (Matching height with Session ID box) */
    .session-item {
      height: 36px;
      /* Explicit height for perfect alignment */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      /* Horizontal padding only, vertical handled by flex/height */
      font-family: 'DM Sans', sans-serif;
      font-size: 0.78rem;
      border-radius: 999px;
      font-weight: 600;
      box-sizing: border-box;
      /* Include border in height */
      line-height: normal;
      /* Reset line-height */
      white-space: nowrap;
    }

    .btn-session {
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid transparent;
      color: #e6e6e6;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.1s ease;
    }

    .btn-session-merge {
      border: 1px solid transparent;
      color: var(--text-muted);
    }

    @media (hover: hover) {
      .btn-session-merge:hover {
        background: rgba(255, 255, 255, 0.13);
        color: var(--text);
      }

      .btn-session:hover {
        background: rgba(255, 255, 255, 0.13);
      }
    }

    .btn-session-fresh {
      background: transparent;
      color: var(--danger-text);
      border: 1px solid rgba(240, 65, 65, 0.4);
    }

    @media (hover: hover) {
      .btn-session-fresh:hover {
        background: rgba(240, 65, 65, 0.14);
      }
    }

    .btn-session-report {
      background: transparent;
      color: var(--warning);
      border: 1px solid rgba(245, 166, 35, 0.4);
    }

    @media (hover: hover) {
      .btn-session-report:hover {
        background: rgba(245, 166, 35, 0.14);
      }
    }

    .btn-session:active {
      transform: scale(0.97);
    }

    .session-id-box {
      font-family: 'DM Sans', 'Mulish', sans-serif;
      background: rgba(255, 255, 255, 0.06);
      letter-spacing: 2px;
      color: #d7d7d7;
      border: 1px solid var(--border);
      border-radius: 999px;
      width: 160px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      /* Match button border width */
    }

    /* History Filter Dropdown (Custom styled to match Custom Domain dropdown) */
    .history-filter-container {
      position: relative;
      margin-top: 12px;
      z-index: 10;
    }

    .history-filter-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 9px 16px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--border);
      border-radius: 999px;
      cursor: pointer;
      color: #d7d7d7;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.83rem;
      transition: background 0.15s ease, color 0.15s ease;
      width: fit-content;
      min-width: 0;
      user-select: none;
    }

    .history-filter-trigger:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: var(--border);
      color: #fff;
    }

    .history-filter-trigger .arrow {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0.7;
    }

    .history-filter-container.active .history-filter-trigger .arrow {
      transform: rotate(180deg);
      opacity: 1;
    }

    .history-filter-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 220px;
      background: rgba(30, 30, 33, 0.94);
      backdrop-filter: blur(28px) saturate(130%);
      -webkit-backdrop-filter: blur(28px) saturate(130%);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-top: 8px;
      display: none;
      z-index: 1000;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
      /* Grow with content up to ~5 rows, then hold size and scroll inside. */
      max-height: 262px;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: #3d3d3d transparent;
    }

    .history-filter-dropdown::-webkit-scrollbar { width: 8px; }
    .history-filter-dropdown::-webkit-scrollbar-track { background: transparent; }
    .history-filter-dropdown::-webkit-scrollbar-thumb { background: #3d3d3d; border-radius: 8px; }

    .history-filter-container.active .history-filter-dropdown {
      display: block;
      animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .filter-option {
      padding: 12px 16px;
      cursor: pointer;
      color: var(--text-muted);
      transition: background 0.15s ease, color 0.15s ease;
      font-size: 0.85rem;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .filter-option:hover {
      background: rgba(255, 255, 255, 0.07);
      color: #fff;
    }

    .filter-option.selected {
      color: var(--accent);
      background: rgba(62, 166, 255, 0.13);
      font-weight: 600;
    }

    @keyframes dropdownFadeIn {
      from { opacity: 0; transform: translateY(-12px); }
      to { opacity: 1; transform: translateY(0); }
    }


    .empty-history {
      padding: 40px;
      text-align: center;
      color: var(--text-muted);
      width: 100%;
    }

    /* Session ID visibility toggle */
    .session-id-toggle {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background 0.15s ease, color 0.15s ease;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      outline: none;
      box-shadow: none;
    }

    .session-id-toggle:active,
    .session-id-toggle:focus,
    .session-id-toggle.active {
      background: transparent;
      color: var(--text-muted);
      outline: none;
      box-shadow: none;
    }

    .session-id-toggle:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.1);
    }

    @media (hover: hover) {
      .session-id-toggle:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.1);
      }
    }

    .session-id-toggle svg {
      width: 18px;
      height: 18px;
    }

    .session-id-toggle .eye-slash {
      display: block;
    }

    .session-id-toggle .eye-open {
      display: none;
    }

    .session-id-toggle.visible .eye-slash {
      display: none;
    }

    .session-id-toggle.visible .eye-open {
      display: block;
    }

    /* Session buttons row container */
    .session-buttons-row {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    /* Mobile layout for session controls */
    @media (max-width: 1023px) {
      .session-controls>div[style*="flex-wrap: wrap"] {
        row-gap: 10px;
      }

      .centered-state .session-buttons-row {
        width: 100% !important;
        flex-shrink: 0 !important;
        justify-content: center !important;
      }

      .centered-state #sessionFlexContainer {
        justify-content: center !important;
        align-items: center !important;
      }
    }

    /* Custom Modal */
    /* Verification Button Standardisation */
    .btn-verify {
      padding: 6px 14px;
      font-size: 0.75rem;
      background: rgba(62, 166, 255, 0.16);
      color: var(--accent);
      border: 1px solid rgba(62, 166, 255, 0.3);
      border-radius: 999px;
      cursor: pointer;
      font-weight: 600;
      transition: background 0.15s ease;
      white-space: nowrap;
    }

    .btn-verify:hover {
      background: rgba(62, 166, 255, 0.26);
    }

    .btn-load-session {
      font-family: 'DM Sans', sans-serif;
      background: var(--primary);
      color: var(--primary-ink);
      border: 1px solid transparent;
      padding: 10px 28px;
      font-size: 0.85rem;
      font-weight: 600;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.1s ease;
      letter-spacing: 0.025em;
      white-space: nowrap;
    }

    @media (hover: hover) {
      .btn-load-session:hover {
        background: var(--primary-hover);
        border-color: transparent;
      }
    }

    .btn-load-session:active {
      transform: scale(0.98);
      /* Subtle shrink for click feedback */
      filter: brightness(0.95);
    }


    #modalOverlay {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 60000;
      /* Topmost dialogue layer: confirm/loading/error must paint above every
         parent that can spawn them (admin + detail + stats overlays all sit
         at 50000 or below). Toasts (100000) stay above this by design. */
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      overscroll-behavior: contain;
    }

    .modal-card {
      background: rgba(32, 32, 35, 0.88);
      backdrop-filter: blur(32px) saturate(130%);
      -webkit-backdrop-filter: blur(32px) saturate(130%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      width: 100%;
      max-width: 450px;
      /* Tall content (e.g. DNS proof lists) scrolls inside the card instead
         of running off-screen — same safe space as the other popups, which
         cap at 90vh against the overlay's 20px padding. */
      max-height: 90vh;
      max-height: calc(100dvh - 40px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 24px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      animation: matteModalIn 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Wide variant: same width as the domain verification screen
       (550–600px card). Scoped class so no other dialog changes size;
       narrow screens still collapse to full width via width: 100%. */
    .modal-card.modal-card-wide {
      max-width: 600px;
    }

    @keyframes matteModalIn {
      from {
        transform: scale(0.96) translateY(8px);
        opacity: 0;
      }

      to {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
    }

    .modal-title {
      font-family: 'DM Sans', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin-bottom: 12px;
      color: var(--text);
    }

    .modal-message {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 24px;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }

    .modal-btn {
      padding: 10px 22px;
      border-radius: 8px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 0.82rem;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.1s ease;
      border: none;
      white-space: nowrap;
    }

    .modal-btn-cancel {
      background: rgba(255, 255, 255, 0.07);
      color: var(--text);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    @media (hover: hover) {
      .modal-btn-cancel:hover {
        background: rgba(255, 255, 255, 0.12);
      }
    }

    .modal-btn-cancel:active {
      background: rgba(255, 255, 255, 0.16);
    }

    .modal-btn-ok {
      background: var(--primary);
      color: var(--primary-ink);
      border: 1px solid transparent;
    }

    @media (hover: hover) {
      .modal-btn-ok:hover {
        background: var(--primary-hover);
      }
    }

    .modal-btn-ok:active {
      background: var(--primary-hover);
      transform: scale(0.98);
    }

    .modal-btn-danger {
      background: #c42b1c;
      color: white;
      border-radius: 8px;
    }

    @media (hover: hover) {
      .modal-btn-danger:hover {
        background: var(--danger-hover);
      }
    }

    .modal-btn-danger:active {
      background: var(--danger-hover);
      transform: scale(0.98);
    }

    /* Loading Spinner */
    .modal-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(255, 255, 255, 0.12);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 48px auto 16px;
    }

    .modal-spinner.danger {
      border-top-color: var(--danger);
    }

    /* @keyframes spin already defined above */

    .modal-loading-text {
      font-size: 1rem;
      color: var(--text-muted);
      text-align: center;
    }

    .modal-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* Disabled small action buttons (admin rows/modals): visibly locked
       while a server call is in flight, so rapid clicks can't double-fire. */
    .btn-small:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .modal-btn.loading {
      position: relative;
      color: transparent;
      pointer-events: none;
    }

    .ssl-badge {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 800;
      margin-bottom: 6px;
      display: inline-block;
      padding: 2px 6px;
      border-radius: 999px;
    }

    .ssl-badge.paid {
      background: rgba(245, 166, 35, 0.13);
      color: var(--warning);
    }

    .copy-btn:hover svg {
      color: white;
    }

    .copy-btn:active {
      transform: scale(0.9);
      transition: transform 0.1s;
    }

    .modal-btn.loading::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      top: 50%;
      left: 50%;
      margin-top: -9px;
      margin-left: -9px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 0.8s linear infinite;
    }

    @media (max-width: 1023px) {
      /* body padding already handled in header styles media query */

      .container {
        padding: 0 12px 0;
        width: 100%;
        max-width: 100%;
      }

      h1 {
        font-size: 2.2rem;
        margin-bottom: 1.5rem;
        text-align: center;
      }

      .shorter-box {
        padding: 1.1rem;
        border-radius: 16px;
        width: 100%;
        margin-bottom: 2rem;
        box-sizing: border-box;
      }

      .history-header {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
        align-items: flex-start;
      }

      .history-header h2 {
        font-size: 1.15rem;
        font-weight: 700;
      }

      .history-header p {
        color: var(--text-faint);
        font-size: 0.82rem;
      }

      /* Mobile-specific perfectly synchronized Flex-Weight overhaul */
      .purge-controls {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: 52px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
      }

      /* Unified Search Container - Holds the border and background */
      .search-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        height: 52px !important;
        overflow: hidden !important;
        background: transparent !important;
        position: relative !important;
        z-index: 2 !important;
        /* Flex-Weight Logic: Starts small (44px), grows to fill space */
        flex-basis: 44px !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        transition: flex-grow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }

      .purge-controls.search-active .search-container {
        flex-grow: 1 !important;
        /* Expands to take all available space */
      }

      /* The search button (magnifier) - Transparent, no border */
      .search-btn {
        width: 44px !important;
        height: 48px !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 999px !important;
        flex-shrink: 0 !important;
        background: rgba(255, 255, 255, 0.05) !important;
        box-sizing: border-box !important;
        margin-right: -1px !important;
        transition: border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 3 !important;
      }

      .purge-controls.search-active .search-btn {
        border-radius: 999px 0 0 999px !important;
        border-right: none !important;
      }

      .search-input-wrapper {
        flex: 1 !important;
        overflow: hidden !important;
        height: 48px !important;
        min-width: 0 !important;
        border-radius: 0 999px 999px 0 !important;
      }

      /* Search Input - Transparent left border when active to merge with magnifier */
      .search-input {
        width: 100% !important;
        height: 48px !important;
        font-size: 0.95rem !important;
        border-radius: 0 999px 999px 0 !important;
        padding: 0 40px 0 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: var(--text) !important;
        box-sizing: border-box !important;
        transition: border 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        min-width: 0 !important;
      }

      .purge-controls.search-active .search-input {
        border-left: none !important;
      }

      .search-input:focus {
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
      }

      .search-container:focus-within .search-btn {
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
      }

      /* Delete Button - Flex-Weight Logic */
      .purge-btn {
        height: 48px !important;
        padding: 0 16px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        /* Flex-Weight: Starts big (fills space), shrinks to 44px */
        flex-basis: 44px !important;
        flex-grow: 1 !important;
        flex-shrink: 0 !important;
        transition: flex-grow 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), gap 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        min-width: 0 !important;
        /* Essential for flex shrinking */
      }

      #historyDomainFilter {
        padding: 0 12px !important;
        height: 52px !important;
        border-radius: 0.5rem !important;
        border: 1px solid var(--border) !important;
        background: rgba(15, 23, 42, 0.8) !important;
        color: var(--text) !important;
        font-size: 0.85rem !important;
        width: 140px !important;
      }

      .purge-controls.search-active .purge-btn {
        flex-grow: 0 !important;
        /* Shrinks to base 44px */
        padding: 0 !important;
        gap: 0 !important;
      }

      .purge-btn .btn-text {
        opacity: 1 !important;
        max-width: 150px !important;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        white-space: nowrap !important;
      }

      .purge-controls.search-active .purge-btn .btn-text {
        opacity: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
      }

      .purge-btn .btn-emoji {
        font-size: 1.25rem !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
      }

      /* Card layout for table on mobile */
      #historyContainer {
        width: 100%;
      }

      /* The table wrapper is empty on mobile (rows hidden, cards render
         outside it) — keep it invisible or its collapsed borders draw a
         stray divider line above the first card. */
      .history-table-wrapper {
        border: none;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
        width: 100%;
      }

      table {
        min-width: 100%;
        width: 100%;
      }

      table,
      thead,
      tbody,
      th,
      td,
      tr {
        display: block;
      }

      /* Mobile dropdown link item */
      .link-item-container {
        display: block !important;
        background: rgba(33, 33, 36, 0.62);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid var(--border);
        border-radius: 16px;
        margin-bottom: 1rem;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      }

      .link-item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        cursor: pointer;
        background: transparent;
        transition: background 0.2s;
      }

      .link-item-header:active {
        background: rgba(255, 255, 255, 0.05);
      }

      .link-item-header .label-cell {
        flex: 1;
        padding: 0;
        margin: 0;
      }

      .dropdown-arrow {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        transition: transform 0.3s ease;
        flex-shrink: 0;
      }

      .dropdown-arrow svg {
        width: 20px;
        height: 20px;
      }

      .link-item-container.expanded .dropdown-arrow {
        transform: rotate(180deg);
      }

      .link-item-content {
        display: none;
        padding: 0 16px 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
      }

      .link-item-container.expanded .link-item-content {
        display: block;
      }

      .link-item-content .data-row {
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .link-item-content .data-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      .link-item-content .data-label {
        color: var(--text-faint);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-family: 'Mulish', sans-serif;
        font-weight: 700;
      }

      .link-item-content .data-value {
        color: var(--text);
        word-break: break-all;
      }

      /* Mobile click count styling */
      .link-item-content .click-count-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .link-item-content .click-count-number {
        min-width: 80px;
        height: 34px;
        min-height: 34px;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: 999px;
        padding: 0 8px;
        background: rgba(255, 255, 255, 0.07);
        font-weight: 700;
        font-size: 0.9rem;
      }

      .link-item-content .action-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
      }

      .link-item-content .btn-small {
        flex: 1 1 auto;
        padding: 10px 8px;
        text-align: center;
        font-size: 0.75rem;
        min-width: 0;
      }

      .link-item-content .btn-delete-small {
        flex: 1 1 100% !important;
      }

      /* Hide table-based rows on mobile */
      .link-item-row,
      .link-data-row {
        display: none !important;
      }

      /* Merge label row with data row on mobile */
      .link-item-row {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        box-shadow: none !important;
        border-radius: 1rem 1rem 0 0 !important;
      }

      .link-data-row {
        margin-bottom: 1.5rem !important;
        border-radius: 0 0 1rem 1rem !important;
      }

      .link-data-row:last-of-type {
        margin-bottom: 0 !important;
      }

      thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      tr {
        background: rgba(33, 33, 36, 0.62);
        border: 1px solid var(--border);
        border-radius: 16px;
        margin-bottom: 1.5rem;
        padding: 1rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        width: 100%;
      }

      td {
        border: none;
        padding: 12px 0 12px 40% !important;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        min-height: 44px;
        display: flex;
        align-items: center;
      }

      /* Label cell (colspan 4) - align content to top like other cells */
      td[data-label="Label"] {
        align-items: flex-start;
        padding-top: 12px !important;
      }

      td:last-child {
        border-bottom: none;
        padding-bottom: 0 !important;
      }

      td::before {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 35%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-label);
        color: var(--text-faint);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-family: 'Mulish', sans-serif;
        font-weight: 700;
      }

      .history-original {
        max-width: 100% !important;
        white-space: normal;
        word-break: break-all;
      }

      .action-btns {
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
        margin-top: 4px;
      }

      .btn-small {
        flex: 1 1 auto;
        padding: 12px 6px;
        text-align: center;
        justify-content: center;
        font-size: 0.8rem;
        min-width: 0;
      }

      /* Make delete button span full width of the two buttons above it */
      .btn-delete-small {
        flex: 1 1 100% !important;
      }

      .modal-card {
        padding: 20px;
      }

      .modal-actions {
        flex-direction: column;
      }

      .modal-btn {
        width: 100%;
      }
    }

    .modal-url-box {
      display: block;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      margin: 12px 0;
      font-family: inherit;
    }

    .font-bold {
      font-weight: 700;
    }

    /* Stats Dashboard */
    #statsOverlay {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      background: rgba(15, 15, 15, 0.92);
      backdrop-filter: blur(24px) saturate(125%);
      -webkit-backdrop-filter: blur(24px) saturate(125%);
      z-index: 10000;
      display: none;
      flex-direction: column;
      padding: 40px 20px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .stats-container {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
    }

    .stats-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.09);
      padding-bottom: 1rem;
    }

    .stats-close {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid transparent;
      color: var(--text);
      padding: 8px 16px;
      border-radius: 999px;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 0.8rem;
      white-space: nowrap;
    }

    .stats-close:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    .stats-table {
      width: 100%;
      background: rgba(33, 33, 36, 0.62);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      margin-top: 1rem;
    }

    .click-entry {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .click-entry:hover {
      background: rgba(255, 255, 255, 0.035);
    }

    .click-entry:last-child {
      border-bottom: none;
    }

    .click-time {
      font-size: 0.9rem;
      color: var(--text);
    }

    .click-ip {
      font-size: 0.8rem;
      color: var(--text-faint);
      font-family: 'DM Sans', 'Mulish', sans-serif;
    }

    .click-delete {
      color: var(--danger-text);
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1.2rem;
      padding: 4px 8px;
    }

    .click-delete:hover {
      background: rgba(240, 65, 65, 0.14);
    }

    .stats-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1.5rem;
      margin-bottom: 1rem;
    }

    .timezone-select {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--text);
      padding: 6px 12px;
      border-radius: 12px;
      font-size: 0.85rem;
      outline: none;
      font-family: 'DM Sans', 'Mulish', sans-serif;
    }

    .timezone-select option {
      background: #1c1c1f;
      color: var(--text);
    }

    .btn-purge-stats {
      background: transparent;
      border: 1px solid rgba(240, 65, 65, 0.4);
      color: var(--danger-text);
      padding: 6px 12px;
      border-radius: 999px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 0.75rem;
      white-space: nowrap;
    }

    @media (hover: hover) {
      .btn-purge-stats:hover {
        background: rgba(240, 65, 65, 0.16);
        color: #fff;
      }
    }

    .btn-purge-stats:active {
      transform: scale(0.97);
    }

    /* Pagination responsive styles */
    @media (min-width: 640px) {
      .pagination-controls {
        flex-direction: row !important;
        justify-content: space-between !important;
      }

      .pagination-info {
        text-align: left !important;
        font-size: 0.9rem !important;
      }

      .pagination-buttons {
        justify-content: flex-end !important;
      }
    }

    @media (max-width: 480px) {
      h1 {
        font-size: 2.2rem;
        margin-bottom: 1.5rem;
        text-align: center;
      }

      .shorter-box {
        padding: 1.5rem;
      }

      .history-header {
        flex-direction: column;
        gap: 1.25rem;
        align-items: flex-start;
      }

      .purge-controls {
        flex-direction: row !important;
        width: 100%;
        max-width: 100%;
        justify-content: stretch;
        gap: 6px;
        align-items: stretch;
        box-sizing: border-box;
        overflow: hidden;
      }

      .search-container {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        z-index: 1;
      }

      .search-btn {
        width: 40px;
        padding: 0 8px;
        min-height: 40px;
        border-radius: 999px 0 0 999px;
        flex-shrink: 0;
        z-index: 2;
      }

      .search-input-wrapper {
        overflow: hidden;
        width: 0;
        transition: width 0.4s ease-in-out;
        flex-shrink: 0;
      }

      .search-input-wrapper.active {
        width: 100%;
        flex-grow: 1;
        max-width: calc(100% - 46px);
      }

      .search-input {
        height: 48px;
        font-size: 0.85rem;
      }

      .purge-btn {
        flex-shrink: 0;
        width: auto;
        min-width: 40px;
        max-width: 100%;
        padding: 0 10px;
        justify-content: center;
        gap: 6px;
        transition: all 0.4s ease-in-out;
        transition-property: width, min-width, max-width, padding, flex-grow, gap;
        border-radius: 999px;
        overflow: hidden;
        white-space: nowrap;
        flex-grow: 1;
        z-index: 1;
      }

      /* When search is active, contract the delete button to show only emoji */
      .purge-controls.search-active .purge-btn {
        padding: 0 6px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        width: 36px !important;
        flex-grow: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
        transition: all 0.4s ease-in-out !important;
        transition-property: width, min-width, max-width, padding, flex-grow, gap !important;
      }

      .purge-controls.search-active .purge-btn .btn-text {
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, width 0.3s ease-in-out, margin 0.3s ease-in-out, padding 0.3s ease-in-out !important;
      }

      .purge-controls.search-active .purge-btn .btn-emoji {
        opacity: 1 !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
        text-align: center !important;
        font-size: 1.2rem !important;
        line-height: 1 !important;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
      }

      /* Default state: show both emoji and text */
      .purge-btn .btn-text {
        opacity: 1;
        visibility: visible;
        width: auto;
        margin: 0 !important;
        padding: 0 !important;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, width 0.3s ease-in-out, margin 0.3s ease-in-out, padding 0.3s ease-in-out !important;
      }

      .purge-btn .btn-emoji {
        opacity: 1;
        visibility: visible;
        flex-shrink: 0 !important;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
      }

      .modal-card {
        padding: 20px;
      }

      .modal-actions {
        flex-direction: column;
      }

      .modal-btn {
        width: 100%;
      }

      .history-original {
        max-width: 250px;
      }


      .slug-wrapper {
        flex-direction: column;
        align-items: stretch;
      }

      .slug-prefix {
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        font-size: 0.8rem;
        height: auto;
        padding: 10px 12px;
      }

      #slugInput {
        height: 48px;
        padding: 0 12px;
        margin-left: 0;
        margin-top: -1px;
        border-radius: 0 0 12px 12px;
      }
    }

    /* ---------- Promo expiry date field: stable box ---------- */
    #promoNewExpiry {
      flex: 1 1 0;
      min-width: 0;
      width: 100%;
      background: transparent;
      border: none;
      color: var(--text);
      color-scheme: dark;
    }
    #promoNewExpiry::-webkit-datetime-edit { background: transparent; padding: 0; }
    #promoNewExpiry::-webkit-datetime-edit-fields-wrapper { background: transparent; padding: 0; }
    #promoNewExpiry::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
    /* Keep the calendar glyph's box reserved in both states so toggling
       "Never expires" never reflows the row. */
    #promoNewExpiry:disabled { opacity: 0.55; }
    #promoNewExpiry:disabled::-webkit-calendar-picker-indicator { opacity: 0.25; }

    /* Dialogs must never exceed the viewport: the domain manager card
       carries an inline 380px minimum that would spill off small phones. */
    @media (max-width: 480px) {
      #domainManagerOverlay {
        padding: 12px;
      }
      #domainManagerOverlay .modal-card {
        min-width: 0 !important;
        width: 100% !important;
      }
    }

    #consentBanner {
      bottom: 112px;
    }
    @media (max-width: 520px) {
      #consentBanner {
        bottom: 140px;
      }
    }
  
    @keyframes pulse {
      0% { transform: scale(0.95); opacity: 0.4; }
      50% { transform: scale(1.05); opacity: 0.6; }
      100% { transform: scale(0.95); opacity: 0.4; }
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }