.cc-tools-pill {
    --pill-width: auto;
    font-size: 0.85rem;
    font-weight: 700;
  }

  /* ===============================
    ConvertCraft — Premium UI Skin
    Single source of truth for styles
    Works with data-theme="light|dark"
    =============================== */

  /* ---------- Theme tokens (UPDATED) ---------- */
  :root {
    --radius-2: 10px;
    --radius-3: 16px;
    --radius-4: 22px;

    --gap-1: 8px;
    --gap-2: 12px;
    --gap-3: 16px;
    --gap-4: 24px;
    --gap-5: 32px;

    --pill-width: auto;
    --pill-height: 1.8rem;

    --shadow-sm: 0 6px 12px rgba(0, 0, 0, .14);
    --shadow-md: 0 12px 28px rgba(0, 0, 0, .18);
    --shadow-lg: 0 18px 46px rgba(0, 0, 0, .24);

    /* Modern Deep Space Theme */
    --bg: #030712;
    --bg-elev: #0f172a;
    --panel: #0b1221;
    --panel-2: #1e293b;

    --prim: #3b82f6;
    --prim-2: #2563eb;
    --accent: #f59e0b;

    --glass: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);

    --hero-gradient: linear-gradient(135deg, var(--prim-2) 0%, var(--prim) 100%);
    --hero-gradient-soft: linear-gradient(135deg, var(--prim-2) 0%, var(--prim) 100%);
    --hero-shadow: 0 20px 42px rgba(5, 12, 32, 0.42);
    --hero-pill-bg: rgba(255, 255, 255, 0.08);
    --hero-pill-border: rgba(255, 255, 255, 0.22);

    --good: #29d391;
    --warn: #ffcf5a;
    --bad: #ff6b6b;

    --chip-bg: rgba(21, 35, 66, .85);
    --chip-stroke: rgba(123, 195, 255, .4);

    --focus: 0 0 0 3px rgba(77, 141, 255, .28);

    --file-btn-bg: #67b5ff;
    --file-btn-bg-h: #7ac3ff;
    --file-btn-txt: #051022;
    --file-chip-bg: rgba(13, 21, 34, .9);
    --file-border: rgba(130, 170, 210, .32);
    --file-ring: rgba(94, 195, 255, .32);
    --file-text: var(--muted);

    /* Shared CTA look (matches the modern upload control) */
    --cc-cta-gradient: linear-gradient(120deg, #8b7bff, #5ec3ff 55%, #2ca3ff);
    --cc-cta-fg: #051120;
    --cc-cta-border: rgba(255, 255, 255, .22);
    --cc-cta-shadow: 0 14px 32px rgba(94, 195, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .35);

    --fs-xs: 0.78rem;
    --fs-sm: 0.88rem;
    --fs-base: 16px;
    --fs-md: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    --fs-lg: clamp(1.15rem, 1rem + 0.45vw, 1.45rem);
    --fs-xl: clamp(2.15rem, 1.6rem + 1.4vw, 3.05rem);

    --lh-tight: 1.25;
    --lh-relaxed: 1.6;
    --cc-header-height: clamp(140px, 12vw, 260px);

    --font: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  }

  /* DIM-LIGHT (non-blinding, matches glass background) */

  /* ---------- Reset / base ---------- */
  * {
    box-sizing: border-box;
  }

  html,
  body {
    height: 100%;
  }

  body {
    margin: 0;
    font-family: var(--font);
    color: var(--fg);
    background: var(--bg);
    line-height: var(--lh-relaxed);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: var(--fs-base);
    overflow-x: hidden;
  }

  /* HIDE UGLY FILE INPUTS FOREVER */
  input[type="file"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.cc-preload {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
  }

  body.cc-ready {
    opacity: 1;
    visibility: visible;
  }

  body.cc-preload #siteHeader,
  body.cc-preload .hero-landing,
  body.cc-preload #drop,
  body.cc-preload .hero-content,
  body.cc-preload .hero-actions {
    opacity: 0;
    visibility: hidden;
  }

  body.cc-ready #siteHeader,
  body.cc-ready .hero-landing,
  body.cc-ready #drop,
  body.cc-ready .hero-content,
  body.cc-ready .hero-actions {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    body.cc-preload {
      transition: none;
    }
  }

  /* Animated background with subtle lightning vibe */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(94, 195, 255, .16), transparent 70%),
      radial-gradient(900px 500px at 85% -20%, rgba(123, 255, 239, .08), transparent 60%),
      radial-gradient(700px 500px at 70% 120%, rgba(60, 110, 255, .08), transparent 60%),
      linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 40%),
      var(--bg);
    filter: saturate(1.02);
  }

  body::after {
    /* diagonal energy streaks */
    content: "";
    position: fixed;
    inset: -20%;
    background:
      repeating-linear-gradient(115deg,
        rgba(94, 195, 255, .04) 0 8px,
        transparent 8px 32px);
    mix-blend-mode: screen;
    animation: travel 22s linear infinite;
    z-index: -1;
    pointer-events: none;
  }

  @keyframes travel {
    to {
      transform: translate3d(-8%, -8%, 0);
    }
  }

  /* --- FORCE tool header/title/subtitle visible (aggressive but reversible) --- */
  /* Remove decorative overlays and pseudo-elements that may mask header text */
  .tool-card::before,
  .tool-card::after,
  .tool-card .tool-card-header::before,
  .tool-card .tool-card-header::after,
  .tool-card .overlay,
  .tool-card .header-overlay,
  .tool-card .tool-card-header .overlay,
  .tool-card .tool-card-header .header-overlay {
    display: none !important;
    content: none !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Strong override to keep tool card headers visible and prevent transient JS hiding */
  .tool-card-header,
  .tool-card .tool-row,
  .tool-card-header * {
    /* make sure header area is not collapsed by parent rules */
    min-height: 36px !important;
    height: auto !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Ensure title text is visible regardless of inline style toggles */
  .tool-card-title,
  .tool-title,
  .tool-card .tool-card-title,
  .tool-card h2,
  .tool-card h3 {
    display: block !important;
    position: relative !important;
    z-index: 999999 !important;
    /* ensure text sits above decorative overlays */
    color: var(--text, #ffffff) !important;
    /* fallback white */
    -webkit-text-fill-color: unset !important;
    font-size: 1.02rem !important;
    line-height: 1.2 !important;
    max-height: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-indent: 0 !important;
    text-overflow: clip !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Subtitle: make sure subtitle wraps and is visible */
  .tool-card-subtitle,
  .tool-subtitle,
  .tool-card .subtitle {
    display: block !important;
    color: var(--muted-text, rgba(255, 255, 255, 0.82)) !important;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    max-height: none !important;
    white-space: normal !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .tool-panel {
    width: 100%;
    max-width: none;
    margin: 24px 0;
  }

  .tool-panel .tool-workspace {
    width: 100%;
  }

  .tool-panel-details {
    margin-top: 32px;
    padding: 28px;
    border-radius: var(--radius-4);
    background: linear-gradient(145deg, rgba(94, 195, 255, .10), rgba(10, 16, 33, .65) 24%, rgba(14, 20, 42, .7) 70%);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow-lg);
  }

  @media (max-width:768px) {
    .tool-panel-details {
      margin-top: 20px;
      padding: 20px;
    }
  }

  .tool-workspace {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
  }

  .tool-landing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 28px;
    align-items: start;
  }

  .tool-pages {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
  }

  .tool-page {
    display: block;
  }

  .tool-page[hidden] {
    display: none !important;
  }

  .landing-hint {
    padding: 20px 24px;
    border-radius: 18px;
    background: rgba(8, 14, 32, 0.72);
    border: 1px solid var(--stroke);
    color: var(--fg-2);
    font-size: 0.92rem;
  }

  @media (min-width:960px) {
    .tool-landing {
      grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    }
  }

  .tool-sidebar,
  .lang-sidebar {
    position: fixed;
    top: var(--cc-header-height, 70px);
    bottom: 0;
    width: min(320px, 82vw);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    background: rgba(3, 7, 18, 0.85);
    /* Deep glass background */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--glass-border);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    transform: translateX(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.18s ease;
    z-index: 60;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  .tool-sidebar {
    left: 0;
    border-radius: 0 20px 20px 0;
    /* Use the sidebar itself as the scroll container.
       This avoids nested scroll/lock edge-cases on some browsers and ensures
       the full tool list is always reachable. */
    overflow-y: auto;
  }

  .lang-sidebar {
    right: 0;
    border-radius: 20px 0 0 20px;
    transform: translateX(110%);
  }

  @keyframes sidebarPulse {
    0% {
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
    }

    40% {
      box-shadow: 0 34px 72px rgba(0, 0, 0, 0.65), 0 0 32px rgba(98, 187, 255, 0.45);
    }

    100% {
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
    }
  }

  .tool-sidebar:focus-visible,
  .lang-sidebar:focus-visible {
    outline: 2px solid rgba(104, 189, 255, 0.65);
    outline-offset: 4px;
  }

  .tool-sidebar-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .lang-sidebar-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .tool-sidebar-title,
  .lang-sidebar-title {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-2);
  }

  .lang-sidebar-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 0.25rem;
  }

  .lang-sidebar-close {
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--fg);
    border-radius: 999px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .lang-sidebar-close:hover,
  .lang-sidebar-close:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }

  .tool-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 0.25rem;
  }

  /* When the tools sidebar is open, keep only one vertical scroller.
     The sidebar scrolls; the nav just lays out content. */
  .tool-sidebar .tool-sidebar-nav {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }

  .tool-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .tool-sidebar-heading {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .tool-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    text-decoration: none;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Subtle border */
    background: transparent;
    /* Remove heavy background */
    color: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    text-align: left;
    appearance: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }

  .tool-nav-item:hover,
  .tool-nav-item:focus-visible {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
  }

  .tool-nav-item.is-active {
    border-color: var(--prim-2);
    background: rgba(59, 130, 246, 0.15);
    /* Soft blue tint */
    color: var(--prim);
    box-shadow: none;
  }

  /* Tool markers
     - Green: new tools
     - Yellow: "come back later" / needs improvement
     - Red: known-broken
     Tested tools: no marker
  */

  .tool-nav-item.is-new,
  .tool-nav-item.is-attn,
  .tool-nav-item.is-broken {
    position: relative;
    padding-left: 0.95rem;
  }

  .tool-nav-item.is-new::before,
  .tool-nav-item.is-attn::before,
  .tool-nav-item.is-broken::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .tool-nav-item.is-new::before {
    background: var(--good);
    box-shadow: 0 0 0 3px rgba(41, 211, 145, 0.16);
  }

  .tool-nav-item.is-attn::before {
    background: var(--warn);
    box-shadow: 0 0 0 3px rgba(255, 207, 90, 0.16);
  }

  .tool-nav-item.is-broken::before {
    background: var(--bad);
    box-shadow: 0 0 0 3px rgba(255, 86, 86, 0.16);
  }

  .tool-sidebar-section--solo .tool-nav-item {
    justify-content: flex-start;
  }

  .tool-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 8, 20, 0.6);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 55;
  }

  .tool-sidebar.tools-sidebar--open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .cc-toolcats-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cc-main-toolcard,
  .main-converter-card {
    /* Keep Main converter at top of the list, but don't pin it while scrolling. */
    position: relative;
    margin-top: 0 !important;
    border: 1px solid rgba(255, 255, 255, .12);
    background: var(--hero-gradient) !important;
    background-image: var(--hero-gradient) !important;
    border-radius: 16px;
    overflow: visible;
    box-shadow: var(--shadow-md) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
  }

  .cc-main-toolcard::before,
  .main-converter-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: var(--hero-gradient);
    filter: blur(14px);
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    pointer-events: none;
  }

  .cc-main-toolcard:hover,
  .cc-main-toolcard:focus-within,
  .main-converter-card:hover,
  .main-converter-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg) !important;
  }

  .cc-main-toolcard:hover::before,
  .cc-main-toolcard:focus-within::before,
  .main-converter-card:hover::before,
  .main-converter-card:focus-within::before {
    opacity: 0.55;
  }

  .cc-main-toolcard__btn,
  .main-converter-link {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    min-height: 46px;
    padding: 10px 10px;
    border: none;
    background: transparent;
    color: var(--fg);
    cursor: pointer;
    text-align: left;
    font-weight: 900;
    border-radius: 16px;
  }

  /* Active state: don't tint it fully blue on top of the gradient. */
  .cc-main-toolcard__btn.is-active,
  .main-converter-link.is-active {
    background: rgba(255, 255, 255, .08);
    color: var(--fg);
    transform: none;
  }

  .cc-main-toolcard__btn:hover,
  .main-converter-link:hover {
    background: rgba(255, 255, 255, .06);
  }

  @media (prefers-reduced-motion: reduce) {
    .cc-main-toolcard__btn:hover {
      transform: none;
    }
  }

  .cc-main-toolcard__btn:focus-visible {
    outline: 2px solid var(--prim);
    outline-offset: 2px;
  }

  .cc-main-toolcard__icon,
  .main-converter-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: var(--shadow-sm);
    opacity: .98;
  }

  .cc-main-toolcard__text,
  .main-converter-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding-top: 1px;
    min-width: 0;
  }

  .cc-main-toolcard__title,
  .main-title {
    font-size: 1.02rem;
    line-height: 1.1;
  }

  .cc-main-toolcard__subtitle,
  .main-subtitle {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .86);
    line-height: 1.2;
  }

  @media (max-width: 480px) {
    .cc-main-toolcard__btn {
      padding: 11px 11px;
      gap: 12px;
    }

    .cc-main-toolcard__icon {
      width: 40px;
      height: 40px;
      font-size: 18px;
      border-radius: 11px;
    }

    .cc-main-toolcard__title {
      font-size: 0.98rem;
    }

    .cc-main-toolcard__subtitle {
      font-size: 0.80rem;
    }
  }

  .cc-toolcat {
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    border-radius: 16px;
    overflow: hidden;
  }

  .cc-toolcat__header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: none;
    background: transparent;
    color: var(--fg);
    cursor: pointer;
    text-align: left;
    font-weight: 800;
  }

  .cc-toolcat__header:hover {
    background: rgba(255, 255, 255, .06);
  }

  .cc-toolcat__header:focus-visible {
    outline: 2px solid var(--prim);
    outline-offset: 2px;
  }

  .cc-toolcat__icon {
    width: 24px;
    display: inline-flex;
    justify-content: center;
    opacity: .95;
  }

  .cc-toolcat__label {
    flex: 1;
  }

  .cc-toolcat__count {
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .10);
    opacity: .9;
  }

  .cc-toolcat__arrow {
    transition: transform .22s ease;
    opacity: .85;
  }

  .cc-toolcat.is-open .cc-toolcat__arrow {
    transform: rotate(180deg);
  }

  .cc-toolcat__body {
    overflow: hidden;
    transition: height .22s ease;
    will-change: height;
  }

  .cc-toolcat__inner {
    padding: 8px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .lang-sidebar.lang-sidebar--open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .tool-sidebar-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  body.tools-sidebar-lock {
    overflow: hidden;
    /* Allow scrolling inside the open sidebar on touch devices. */
    touch-action: pan-y;
  }

  .workspace-column {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: calc(100vh - var(--cc-header-height, 70px) - 32px);
    position: sticky;
    top: calc(var(--cc-header-height, 70px) + 16px);
    overflow-y: auto;
    padding-right: 4px;
  }

  .workspace-column>.panel {
    position: relative;
  }

  .tool-pages .panel,
  .tool-pages .tool-card,
  .tool-pages article {
    margin: 0;
  }

  @media (max-width:1200px) {
    .tool-landing {
      grid-template-columns: minmax(0, 1fr);
    }

    .workspace-column {
      position: static;
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }
  }

  @media (max-width:960px) {
    .tool-workspace {
      gap: 20px;
    }

    .tool-landing {
      gap: 24px;
    }

    .landing-hint {
      border-radius: 16px;
    }

    .workspace-column {
      position: static;
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }
  }

  @media (max-width:640px) {
    .tool-nav-item {
      font-size: 0.92rem;
    }
  }

  .container {
    width: 100%;
    min-width: 0;
  }

  main.container>*+* {
    margin-top: clamp(20px, 3vw, 36px);
  }

  .ad-column {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .ad-slot {
    min-height: 280px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(8, 12, 24, .6);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .ad-slot ins {
    display: block;
    width: 100%;
    min-height: 250px;
  }

  /* Hard gate: never show any ad UI until ads consent is granted.
     (Prevents the left/right ad templates from appearing before the user accepts.) */
  html:not(.cc-ads-consented) .ad-column,
  html:not(.cc-ads-consented) .ad-block,
  html:not(.cc-ads-consented) .ad-slot {
    display: none !important;
  }

  /* Enforce exactly two visible ad placements (left + right columns). */
  ins.adsbygoogle {
    display: none !important;
  }

  .ad-column--left ins.adsbygoogle,
  .ad-column--right ins.adsbygoogle {
    display: block !important;
  }

  .ad-slot--sidebar {
    min-height: clamp(320px, 44vh, 460px);
  }

  .ad-placeholder {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    pointer-events: none;
  }

  .ad-slot.is-muted ins {
    display: none !important;
  }

  .ad-slot.is-muted .ad-placeholder {
    opacity: 0.8;
  }

  .ad-slot--secondary {
    opacity: .95;
  }

  body.is-pro .ad-column,
  body.is-pro #ad-incontent,
  body.is-pro #ad-footer,
  body.is-pro .ad-slot {
    display: none !important;
  }

  @media (max-width:1100px) {
    .ad-column {
      position: static;
    }

    .ad-slot--sidebar {
      min-height: auto;
    }
  }

  .cc-header {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    margin: 0 auto clamp(32px, 4vw, 56px);
    padding: 0;
    z-index: 32;
  }

  .cc-header-rail {
    position: relative;
    width: 100%;
    min-height: clamp(118px, 10vw, 180px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1.55rem;
    padding: clamp(18px, 3vw, 42px) clamp(26px, 4vw, 58px);
    border-radius: 0 0 clamp(36px, 5vw, 72px) clamp(36px, 5vw, 72px);
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid var(--glass-border);
    border-top: 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    isolation: isolate;
    overflow: hidden;
  }

  .cc-header-rail::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Restored depth with a subtle "light line" highlight AND mixed color gradient */
    /* Stronger mixed color background & Inset Line (Guaranteed Visibility) */
    background:
      radial-gradient(circle at 50% 0%, rgba(120, 190, 255, 0.25), transparent 70%),
      rgba(3, 7, 18, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* The "Tiny Line" is now an INSET shadow to ensure it renders inside the box */
    box-shadow:
      inset 0 1px 0 0 rgba(120, 190, 255, 0.6),
      inset 0 0 20px rgba(120, 190, 255, 0.05),
      0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: -1;
  }

  /* The "Tiny Line" with NEON GLOW */
  .cc-header-rail::after {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    /* Fade in from sides */
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(120, 190, 255, 0) 10%,
        rgba(120, 190, 255, 1) 50%,
        rgba(120, 190, 255, 0) 90%,
        transparent 100%);
    box-shadow: 0 0 8px rgba(120, 190, 255, 0.8), 0 0 16px rgba(120, 190, 255, 0.4);
    z-index: 10;
    pointer-events: none;
    opacity: 0.9;
  }

  .cc-header-rail>* {
    position: relative;
    z-index: 1;
  }

  .cc-header-left,
  .cc-header-right {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: nowrap;
    min-width: 0;
    width: 100%;
  }

  .cc-header-left {
    justify-content: flex-start;
    justify-self: stretch;
    gap: 0.75rem;
  }

  .cc-header-right {
    justify-content: flex-end;
    justify-self: stretch;
  }

  /* Header sizing adjustments (desktop): room for brand + right CTAs */
  .cc-header-left .cc-tools-pill {
    min-height: 3.15rem;
    min-width: 12.25rem;
    padding: 0.52rem 1.05rem;
    font-size: 1rem;
  }

  .cc-header-right .cc-lang-pill,
  .cc-header-right .cc-coffee-pill,
  .cc-header-right .cc-gopro-pill {
    min-height: 3.15rem;
    padding: 0.52rem 0.95rem;
  }

  .cc-header-right .cc-lang-pill {
    min-width: 10.5rem;
  }

  .cc-header-right .cc-coffee-pill {
    min-width: 12rem;
  }

  .cc-header-right .cc-gopro-pill {
    min-width: 15.25rem;
  }

  /* Discord moved next to the mode switch (left group) */
  .cc-header-left .cc-discord-pill {
    min-height: 3.15rem;
    min-width: 12rem;
    padding: 0.52rem 0.9rem;
  }

  /* Larger header icons (flag / discord / coffee / bolt) */
  .cc-header .btn-pill-icon {
    width: 30px;
    height: 30px;
    font-size: 1.25rem;
  }

  /* Shared Glass Style for Header Pills */
  /* Shared Glass Style for Header Pills - Restored to use btn-pill gradient */
  .cc-header .cc-tools-pill,
  .cc-header .cc-lang-pill,
  .cc-header .cc-coffee-pill,
  .cc-header .cc-gopro-pill,
  .cc-header .cc-discord-pill {
    /* We remove the flat background/border to let .btn-pill styles show through */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.2s ease;
  }

  /* Specific Glow for PRO button */
  .cc-header .cc-gopro-pill {
    border-color: rgba(245, 158, 11, 0.3) !important;
    background: rgba(245, 158, 11, 0.1) !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
  }

  .cc-header .cc-tools-pill:hover,
  .cc-header .cc-lang-pill:hover,
  .cc-header .cc-coffee-pill:hover,
  .cc-header .cc-discord-pill:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    color: #fff !important;
  }

  .cc-header .cc-gopro-pill:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
    transform: translateY(-2px);
    color: #fff !important;
  }

  /* Specific Glow for PRO button */
  .cc-header .cc-gopro-pill {
    border-color: rgba(245, 158, 11, 0.3) !important;
    background: rgba(245, 158, 11, 0.1) !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
  }

  .cc-header .cc-tools-pill:hover,
  .cc-header .cc-lang-pill:hover,
  .cc-header .cc-coffee-pill:hover,
  .cc-header .cc-discord-pill:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    color: #fff !important;
  }

  .cc-header .cc-gopro-pill:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
    transform: translateY(-2px);
    color: #fff !important;
  }

  .cc-header .btn-pill-icon svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }

  /* Pro users should not see "Go Pro" in header. */
  body.cc-pro-active #proCtaHeader {
    display: none !important;
  }

  /* Header Sign out should be compact (do not inherit the big Go Pro sizing). */
  #signOutHeaderBtn {
    min-width: 0 !important;
    min-height: 2.6rem !important;
    padding: 0.42rem 0.7rem !important;
    gap: 0.45rem !important;
  }

  /* Ensure hidden works even if button styles set display. */
  #signOutHeaderBtn[hidden] {
    display: none !important;
  }

  #signOutHeaderBtn .btn-pill-icon {
    width: 24px;
    height: 24px;
    font-size: 1.05rem;
  }

  #signOutHeaderBtn > span:last-child {
    font-size: 0.95rem;
    font-weight: 800;
  }

  .pro-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #ffc857, #ff8a00);
    color: #091018;
    box-shadow: 0 4px 12px rgba(255, 183, 74, 0.35);
  }

  .pro-status-badge[hidden] {
    display: none !important;
  }

  .cc-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    justify-self: center;
  }

  .cc-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    white-space: nowrap;
  }

  .btn-pill {
    --pill-border-color: rgba(120, 190, 255, 0.25);
    --pill-hover-border: rgba(170, 230, 255, 0.9);
    --pill-shadow: rgba(5, 8, 20, 0.85);
    --pill-glow: rgba(89, 208, 255, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    min-width: 0;
    min-height: 2.05rem;
    position: relative;
    border-radius: 999px;
    border: 1px solid var(--pill-border-color);
    background:
      radial-gradient(circle at 22% 24%, rgba(123, 217, 255, 0.25), transparent 56%),
      linear-gradient(155deg, rgba(9, 15, 37, 0.95), rgba(5, 9, 25, 0.9));
    color: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.012em;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    transition: transform .16s ease, box-shadow .18s ease, border-color .16s ease;
    isolation: isolate;
    box-shadow:
      0 16px 38px rgba(0, 0, 0, .65),
      0 0 20px rgba(105, 200, 255, .3),
      inset 0 0 10px rgba(255, 255, 255, .12);
    animation: pillPulse 7s ease-in-out infinite, neonSpark 8s ease-in-out infinite;
  }

  .btn-pill::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    background: radial-gradient(130% 130% at 50% 40%, var(--pill-glow), rgba(10, 16, 34, 0) 70%);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity .2s ease, transform .2s ease;
    z-index: -1;
  }

  .btn-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(65% 120% at 50% 0%, rgba(255, 255, 255, 0.2), transparent 72%);
    opacity: 0.45;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .btn-pill:hover {
    transform: translateY(-2px);
    border-color: var(--pill-hover-border);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .55), 0 0 35px var(--pill-glow);
    color: #f5f8ff;
  }

  .btn-pill:focus-visible {
    outline: 2px solid rgba(125, 188, 255, 0.6);
    outline-offset: 3px;
  }

  .btn-pill:hover::before,
  .btn-pill:focus-visible::before {
    opacity: 1;
    transform: scale(1);
  }

  .btn-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 18px rgba(118, 200, 255, 0.55));
  }

  .btn-pill-icon svg {
    width: 16px;
    height: 16px;
  }

  .btn-pill-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    line-height: 1.05;
  }

  .btn-pill-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .btn-pill-sub {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.85;
    white-space: nowrap;
  }

  .cc-theme-block {
    --theme-toggle-width: 84px;
    --theme-toggle-height: 30px;
    --theme-toggle-knob: 18px;
    --theme-toggle-padding: 6px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(120, 205, 255, 0.35);
    background:
      radial-gradient(circle at 20% 24%, rgba(125, 230, 255, 0.3), transparent 50%),
      linear-gradient(180deg, rgba(3, 9, 29, .85), rgba(5, 15, 41, .92));
    box-shadow:
      0 12px 30px rgba(0, 0, 0, .55),
      0 0 22px rgba(86, 200, 255, 0.35),
      inset 0 0 12px rgba(255, 255, 255, 0.12);
    min-height: 3.15rem;
    flex: 0 0 auto;
  }

  .cc-theme-block .theme-switch {
    display: flex;
    justify-content: center;
    width: var(--theme-toggle-width);
  }

  .cc-theme-modes {
    display: flex;
    justify-content: center;
    width: auto;
    flex: 0 0 auto;
    gap: 0.55rem;
    white-space: nowrap;
  }

  .cc-theme-mode-label {
    font-size: 0.62rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.8;
  }

  /* Keep the left Discord CTA compact so it never collides with the brand */
  .cc-header-left .cc-discord-pill {
    min-width: 10.75rem;
  }

  .cc-header-left .cc-discord-pill .btn-pill-sub {
    display: none;
  }

  .cc-lang-pill {
    --pill-width: 10rem;
  }

  .cc-lang-flag {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    overflow: hidden;
  }

  .cc-lang-flag .flag {
    width: 100%;
    height: 100%;
    display: block;
  }

  .cc-lang-text {
    font-size: 1rem;
    font-weight: 750;
  }

  .cc-tools-pill {
    --pill-width: 10rem;
    font-size: 0.95rem;
    font-weight: 700;
  }

  .cc-coffee-pill,
  .cc-discord-pill,
  .cc-gopro-pill {
    --pill-width: 10rem;
    line-height: 1;
  }

  .cc-header .cc-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    position: relative;
    font-size: clamp(1.6rem, 1.2rem + 0.8vw, 2.2rem);
    font-weight: 800;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    text-shadow:
      0 0 30px rgba(94, 184, 255, 0.8),
      0 4px 18px rgba(0, 0, 0, 0.65);
  }

  .cc-header .cc-brand-icon {
    width: 64px;
    height: 64px;
    transition: transform .6s ease, filter .6s ease;
    filter: drop-shadow(0 0 26px rgba(120, 200, 255, 0.85));
  }

  .cc-header .flash-glow {
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(89, 205, 255, 0.4), rgba(6, 15, 42, 0));
    opacity: 0.55;
    pointer-events: none;
    animation: neonWave 5.5s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .flash-glow {
      animation: none;
    }
  }

  .cc-brand {
    justify-content: flex-start;
  }

  @media (max-width:1400px) {
    .cc-header-right .btn-pill-sub {
      display: none;
    }

    .cc-header-right .btn-pill {
      padding: 0.46rem 0.78rem;
      font-size: 0.8rem;
    }

    .cc-header-right .btn-pill-text {
      gap: 0;
    }

    .cc-header-right .btn-pill-title {
      font-size: 0.78rem;
    }

    /* Keep Go Pro copy inside at mid widths */
    .cc-header-right .cc-gopro-pill {
      min-width: 15.5rem;
    }

    /* Give left group breathing room */
    .cc-header-left .btn-pill-sub {
      display: none;
    }

    .cc-header-left .cc-discord-pill {
      min-width: 11.25rem;
    }

    .cc-theme-mode-label {
      font-size: 0.7rem;
      letter-spacing: 0.12em;
    }
  }

  @media (max-width:720px) {
    .cc-header-rail {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 1.25rem;
      padding: 24px clamp(16px, 6vw, 32px);
      border-radius: 0 0 32px 32px;
    }

    .cc-header-center {
      order: -1;
      justify-content: center;
    }

    .cc-header-left,
    .cc-header-right {
      flex: 1 1 auto;
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.65rem;
    }

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

    .cc-theme-modes {
      width: 100%;
      flex-wrap: wrap;
    }
  }

  @media (max-width:720px) {
    :root {
      --cc-header-height: clamp(200px, 52vw, 420px);
    }

    .cc-header-right .btn-pill {
      width: 100%;
      min-width: 0;
      justify-content: center;
      text-align: center;
    }
  }

  @media (max-width:640px) {
    .cc-header {
      padding: 0;
    }

    .cc-header-rail {
      padding: 20px clamp(12px, 7vw, 24px);
      border-radius: 0 0 24px 24px;
    }

    #curLang {
      max-width: 100%;
    }

    .cc-header-left {
      justify-content: space-between;
    }
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 6, 16, .6);
    backdrop-filter: blur(6px);
    z-index: 38;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .sidebar-overlay[hidden] {
    display: none !important;
  }

  .tools-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(360px, 85vw);
    background: linear-gradient(180deg, rgba(6, 9, 18, .97), rgba(4, 5, 12, .98));
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    z-index: 39;
    transform: translateX(-105%);
    transition: transform .25s ease;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .tools-sidebar[hidden] {
    display: none !important;
  }

  body.has-sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  body.has-sidebar-open {
    overflow: hidden;
  }

  body.has-sidebar-open .tools-sidebar {
    transform: translateX(0);
  }

  .tools-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .tools-sidebar__header h2 {
    margin: 0;
    font-size: 1.1rem;
  }

  .sidebar-close {
    border: none;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 1.1rem;
  }

  .tools-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .sidebar-link {
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: var(--fg);
    padding: 10px 14px;
    border-radius: 12px;
    text-align: left;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
  }

  .sidebar-link:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
  }

  @media (min-width: 1100px) {
    .tools-sidebar {
      width: 320px;
    }
  }

  .tools-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 20px 0 18px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .tools-nav::-webkit-scrollbar {
    display: none;
  }

  .tools-nav button {
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    background: var(--chip-bg);
    color: var(--fg);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, transform .16s ease, box-shadow .2s ease;
  }

  .tools-nav button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .tools-nav button:focus-visible {
    outline: 2px solid var(--prim);
    outline-offset: 2px;
  }

  @media (max-width: 720px) {
    .tools-nav {
      margin-top: 16px;
      margin-bottom: 14px;
    }
  }

  .tools-section {
    margin-top: 28px;
    scroll-margin-top: 120px;
  }

  .tools-section+.tools-section {
    margin-top: 40px;
  }

  .tools-section-header {
    margin-bottom: 16px;
  }

  .tools-section-header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .2px;
  }

  .tools-section-header p {
    margin: 4px 0 0;
    font-size: 0.95rem;
    color: var(--fg-2);
    line-height: 1.5;
  }

  .tools-section-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .tools-section-body>* {
    margin: 0;
  }

  .tools-section-body .panel,
  .tools-section-body .tool-card {
    margin: 0;
  }

  .pro-card {
    border: 1px solid var(--stroke-2);
    background:
      radial-gradient(circle at 15% 10%, rgba(120, 190, 255, .18), transparent 52%),
      radial-gradient(circle at 85% 80%, rgba(180, 120, 255, .16), transparent 55%),
      var(--panel-2);
    box-shadow: var(--shadow-md);
  }

  .pro-card h2 {
    margin-top: 0;
    margin-bottom: 8px;
  }

  .pro-subtitle {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--fg-2);
  }

  .pro-list {
    margin: 0 0 16px 18px;
    padding: 0;
    font-size: 0.9rem;
    color: var(--fg-2);
    line-height: 1.5;
  }

  .pro-button {
    border: none;
    border-radius: 999px;
    padding: 10px 22px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    font-weight: 600;
    cursor: not-allowed;
  }


  /* Brand flash */
  .cc-brand {
    font-weight: 800;
    letter-spacing: .24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: auto;
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--fg);
    text-shadow: 0 2px 7px rgba(0, 0, 0, .55);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem);
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(120, 200, 255, 0.12), transparent 70%),
      rgba(255, 255, 255, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 44px rgba(8, 18, 44, .55), 0 0 55px rgba(118, 198, 255, 0.35);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .cc-brand::before,
  .cc-brand::after {
    content: "";
    position: absolute;
    inset: -8% -6%;
    border-radius: 999px;
    background: url('/app_deploy/img/flash-icon.svg') center / 100% 100% no-repeat;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
    filter:
      drop-shadow(0 0 14px rgba(94, 195, 255, .35)) drop-shadow(0 0 28px rgba(255, 255, 255, .18));
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .cc-brand::before {
    transform: rotate(-2deg) scale(1.02);
    animation: cc-brand-arcs 2.9s ease-in-out infinite;
  }

  .cc-brand::after {
    transform: rotate(2deg) scale(0.985);
    animation: cc-brand-arcs 3.35s ease-in-out infinite;
    animation-delay: 0.55s;
  }

  .cc-header .cc-brand .alpha-badge {
    margin-left: 6px;
    padding: 2px 6px 3px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(90, 168, 255, .28), rgba(63, 139, 255, .35));
    border: 1px solid rgba(123, 195, 255, .45);
    color: var(--prim);
    box-shadow: 0 6px 18px rgba(47, 121, 255, .28);
    white-space: nowrap;
  }

  .cc-header .cc-brand-text {
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
    letter-spacing: .05em;
    display: inline-flex;
    align-items: center;
    position: relative;
    isolation: isolate;
    text-shadow: 0 2px 7px rgba(0, 0, 0, .55);
    filter: brightness(1);
    z-index: 2;
    will-change: filter, text-shadow;
    animation: cc-brand-electric-glow 1.35s ease-in-out infinite;
  }

  /* Keep text readable and stable (no moving gradient colors) */
  .cc-header .cc-brand-text {
    color: var(--fg);
    -webkit-text-fill-color: unset;
  }

  /* Occasional “zap” line across the word */
  .cc-header .cc-brand-text::before {
    content: none;
  }

  .cc-header .cc-brand-text::after {
    content: none;
    animation: none;
    opacity: 0;
  }

  .cc-brand-energy {
    position: absolute;
    inset: -32% -12%;
    pointer-events: none;
    mix-blend-mode: screen;
    display: block;
    z-index: 1;
  }

  /* Keep the brand effect simple: no extra bolt overlays */
  .cc-brand-energy {
    display: none !important;
  }

  .cc-brand-energy::before,
  .cc-brand-energy::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    opacity: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.12), #ffffcc 35%, #ffffff 62%, rgba(170, 204, 255, 0.4));
    clip-path: polygon(6% 8%, 18% 0%, 28% 12%, 38% 4%, 50% 18%, 60% 6%, 74% 24%, 86% 10%, 96% 30%, 82% 44%, 92% 60%, 70% 68%, 78% 86%, 58% 74%, 44% 94%, 30% 80%, 16% 92%, 20% 58%, 4% 66%, 10% 36%);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, .55)) drop-shadow(0 0 24px rgba(170, 204, 255, .45));
  }

  .cc-brand-energy--primary::before {
    animation: lightning-bolt-alpha 1.1s cubic-bezier(0.37, 0.01, 0.26, 1) infinite;
    animation-delay: 0.1s;
  }

  .cc-brand-energy--primary::after {
    animation: lightning-bolt-beta 1.45s cubic-bezier(0.28, 0.12, 0.32, 1) infinite;
    animation-delay: 0.55s;
  }

  .cc-brand-energy--secondary::before {
    clip-path: polygon(4% 18%, 14% 4%, 30% 14%, 40% 2%, 46% 18%, 58% 4%, 70% 16%, 84% 6%, 94% 24%, 86% 38%, 98% 50%, 82% 62%, 92% 78%, 70% 70%, 62% 92%, 42% 74%, 32% 94%, 18% 78%, 14% 92%, 8% 60%, 2% 66%, 6% 34%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), #fff9c4 30%, #aaccff 65%, rgba(255, 255, 255, 0.25));
    animation: lightning-bolt-gamma 1.35s cubic-bezier(0.45, 0.02, 0.3, 1) infinite;
    animation-delay: 0.32s;
  }

  .cc-brand-energy--secondary::after {
    clip-path: polygon(8% 12%, 22% 0%, 32% 16%, 48% 4%, 58% 22%, 66% 10%, 78% 26%, 90% 12%, 100% 34%, 82% 46%, 96% 60%, 72% 70%, 80% 88%, 54% 76%, 46% 94%, 34% 82%, 14% 92%, 12% 68%, 0% 76%, 6% 42%);
    background: linear-gradient(105deg, rgba(255, 255, 255, 0.2), #ffffff 40%, #dff0ff 70%);
    animation: lightning-bolt-delta 1.65s cubic-bezier(0.38, 0.02, 0.24, 1) infinite;
    animation-delay: 0.78s;
  }

  html[data-theme="vintage"] .cc-brand-icon {
    filter: sepia(.85) saturate(.6) drop-shadow(0 6px 14px rgba(255, 206, 140, .4));
  }

  .cc-brand .sparkle {
    display: none !important;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Animations are handled directly on .cc-brand-text now */
  }

  @media (prefers-reduced-motion: reduce) {

    .cc-header .cc-brand-icon,
    .cc-watermark {
      animation: none !important;
    }

    .cc-brand::before,
    .cc-brand::after,
    .cc-brand-energy::before,
    .cc-brand-energy::after,
    .cc-brand-text::before,
    .cc-brand-text::after {
      animation: none !important;
      opacity: 0;
    }
  }

  @keyframes pillPulse {

    0%,
    100% {
      box-shadow: 0 16px 38px rgba(0, 0, 0, .65), 0 0 22px rgba(94, 205, 255, .18);
    }

    45% {
      box-shadow: 0 22px 48px rgba(0, 0, 0, .55), 0 0 35px rgba(94, 205, 255, .45);
    }

    70% {
      box-shadow: 0 18px 42px rgba(0, 0, 0, .6), 0 0 28px rgba(94, 205, 255, .32);
    }
  }

  @keyframes neonWave {

    0%,
    100% {
      opacity: 0.28;
      transform: scale(0.95);
    }

    45% {
      opacity: 0.52;
      transform: scale(1.05);
    }

    70% {
      opacity: 0.35;
      transform: scale(1);
    }
  }

  @keyframes neonSpark {

    0%,
    100% {
      box-shadow: 0 16px 38px rgba(0, 0, 0, .62), 0 0 20px rgba(94, 205, 255, .25);
    }

    45% {
      box-shadow: 0 26px 52px rgba(0, 0, 0, .55), 0 0 48px rgba(94, 205, 255, .5);
    }

    70% {
      box-shadow: 0 20px 40px rgba(0, 0, 0, .58), 0 0 34px rgba(94, 205, 255, .3);
    }
  }

  @keyframes lightningDashForward {
    0% {
      transform: translate(-150%, -52%) skewX(-18deg) scaleX(0.5);
      opacity: 0;
    }

    4% {
      opacity: 0.25;
    }

    10% {
      transform: translate(15%, -54%) skewX(-10deg) scaleX(1);
      opacity: 0.9;
    }

    16% {
      transform: translate(90%, -50%) skewX(-6deg) scaleX(1.1);
      opacity: 0.35;
    }

    18% {
      transform: translate(140%, -50%) skewX(-6deg) scaleX(0.8);
      opacity: 0;
    }

    100% {
      transform: translate(-150%, -52%) skewX(-18deg) scaleX(0.5);
      opacity: 0;
    }
  }

  @keyframes lightningDashReturn {

    0%,
    18% {
      transform: translate(150%, -48%) skewX(-10deg) scaleX(0.5);
      opacity: 0;
    }

    22% {
      opacity: 0.2;
    }

    28% {
      transform: translate(-5%, -52%) skewX(-4deg) scaleX(1.05);
      opacity: 0.95;
    }

    34% {
      transform: translate(-130%, -48%) skewX(-2deg) scaleX(0.85);
      opacity: 0.3;
    }

    36% {
      transform: translate(-160%, -48%) skewX(-2deg) scaleX(0.7);
      opacity: 0;
    }

    100% {
      transform: translate(150%, -48%) skewX(-10deg) scaleX(0.5);
      opacity: 0;
    }
  }

  @keyframes lightningBurst {

    0%,
    30% {
      opacity: 0;
      transform: scaleX(0.45);
    }

    32% {
      opacity: 0.25;
    }

    36% {
      opacity: 0.8;
      transform: scaleX(1.05);
    }

    42% {
      opacity: 0.55;
      transform: scaleX(1.45);
    }

    48% {
      opacity: 0;
      transform: scaleX(1.1);
    }

    100% {
      opacity: 0;
      transform: scaleX(0.45);
    }
  }

  @keyframes lightningIconFlash {
    0% {
      transform: rotate(-4deg) scale(1);
      filter: drop-shadow(0 0 14px rgba(94, 205, 255, .7));
    }

    8% {
      transform: rotate(2deg) scale(1.08);
      filter: drop-shadow(0 0 30px rgba(126, 214, 255, .9));
    }

    14% {
      transform: rotate(-1deg) scale(0.96);
      filter: drop-shadow(0 0 12px rgba(94, 205, 255, .6));
    }

    22% {
      transform: rotate(5deg) scale(1.12);
      filter: drop-shadow(0 0 32px rgba(255, 214, 150, .85));
    }

    30% {
      transform: rotate(-6deg) scale(0.95);
    }

    60% {
      transform: rotate(-2deg) scale(1);
      filter: drop-shadow(0 0 16px rgba(94, 205, 255, .65));
    }

    100% {
      transform: rotate(-4deg) scale(1);
      filter: drop-shadow(0 0 14px rgba(94, 205, 255, .7));
    }
  }

  @keyframes lightningTextFlow {

    0%,
    100% {
      text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
      letter-spacing: .05em;
    }

    8% {
      text-shadow: -12px 0 24px rgba(118, 205, 255, .6), 0 0 16px rgba(255, 255, 255, .25);
    }

    16% {
      text-shadow: 12px 0 28px rgba(255, 214, 170, .65), 0 0 18px rgba(133, 212, 255, .45);
    }

    28% {
      text-shadow: 0 0 30px rgba(132, 210, 255, .65), 0 0 48px rgba(255, 255, 255, .35);
      letter-spacing: .08em;
    }

    44% {
      text-shadow: 0 0 18px rgba(104, 180, 255, .35);
    }
  }

  @keyframes text-glow-pulse {

    0%,
    100% {
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55);
      filter: brightness(1);
    }

    30% {
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55), 0 0 14px rgba(255, 255, 255, .35);
      filter: brightness(1.05);
    }

    55% {
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55), 0 0 24px rgba(255, 255, 255, .55), 0 0 32px rgba(170, 204, 255, .45);
      filter: brightness(1.12);
    }

    70% {
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 255, 255, .4);
      filter: brightness(1.04);
    }
  }

  @keyframes cc-brand-electric-glow {

    0%,
    100% {
      filter: brightness(1) saturate(1.05);
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55), 0 0 7px rgba(94, 195, 255, .14);
    }

    50% {
      filter: brightness(1.04) saturate(1.10);
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55), 0 0 12px rgba(94, 195, 255, .24), 0 0 10px rgba(255, 255, 255, .12);
    }
  }

  @keyframes cc-brand-electric-zap {

    0%,
    86% {
      opacity: 0;
      transform: translateX(-35%) scaleX(0.15);
    }

    88% {
      opacity: .35;
    }

    90% {
      opacity: 1;
      transform: translateX(0%) scaleX(1);
    }

    92% {
      opacity: .0;
      transform: translateX(30%) scaleX(0.2);
    }

    100% {
      opacity: 0;
      transform: translateX(30%) scaleX(0.2);
    }
  }

  @keyframes cc-brand-arcs {

    0%,
    56% {
      opacity: 0;
      filter: drop-shadow(0 0 10px rgba(94, 195, 255, .22)) drop-shadow(0 0 22px rgba(255, 255, 255, .12));
    }

    60% {
      opacity: .18;
    }

    62% {
      opacity: .75;
      filter: drop-shadow(0 0 18px rgba(94, 195, 255, .48)) drop-shadow(0 0 34px rgba(255, 255, 255, .22));
    }

    64% {
      opacity: .25;
    }

    70% {
      opacity: .55;
      filter: drop-shadow(0 0 16px rgba(94, 195, 255, .42)) drop-shadow(0 0 30px rgba(255, 255, 255, .18));
    }

    72% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes cc-electric-flicker {

    0%,
    100% {
      filter: brightness(1) saturate(1.05);
      transform: translate3d(0, 0, 0);
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55);
    }

    25% {
      filter: brightness(1.14) saturate(1.18);
      transform: translate3d(0.5px, -0.5px, 0);
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55), 0 0 16px rgba(255, 255, 255, .35);
    }

    50% {
      filter: brightness(0.97) saturate(1.1);
      transform: translate3d(-0.5px, 0.25px, 0);
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55), 0 0 10px rgba(170, 204, 255, .22);
    }

    75% {
      filter: brightness(1.22) saturate(1.25);
      transform: translate3d(0.75px, 0, 0);
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 255, 255, .55), 0 0 34px rgba(170, 204, 255, .42);
    }
  }

  @keyframes lightning-bolt-alpha {
    0% {
      opacity: 0;
      transform: translate(-12%, 8%) scale(0.4) skewX(-10deg);
    }

    18% {
      opacity: 1;
      transform: translate(6%, -6%) scale(1.05) skewX(-4deg);
    }

    38% {
      opacity: 0.95;
      transform: translate(24%, 10%) scale(0.85) skewX(2deg);
    }

    58% {
      opacity: 0.65;
      transform: translate(46%, -14%) scale(1.1) skewX(-6deg);
    }

    78% {
      opacity: 0.4;
      transform: translate(68%, 8%) scale(0.7);
    }

    100% {
      opacity: 0;
      transform: translate(90%, 2%) scale(0.3);
    }
  }

  @keyframes lightning-bolt-beta {
    0% {
      opacity: 0;
      transform: translate(-6%, 0) scale(0.5) skewX(6deg);
    }

    12% {
      opacity: 0.9;
      transform: translate(10%, -18%) scale(1.15) skewX(-4deg);
    }

    28% {
      opacity: 0.95;
      transform: translate(36%, 6%) scale(0.95) skewX(8deg);
    }

    46% {
      opacity: 0.75;
      transform: translate(62%, -10%) scale(1.05);
    }

    66% {
      opacity: 0.45;
      transform: translate(82%, 12%) scale(0.8);
    }

    100% {
      opacity: 0;
      transform: translate(100%, -4%) scale(0.35);
    }
  }

  @keyframes lightning-bolt-gamma {
    0% {
      opacity: 0;
      transform: translate(6%, 4%) scale(0.45) skewX(-6deg);
    }

    20% {
      opacity: 0.95;
      transform: translate(-4%, -12%) scale(1.15);
    }

    38% {
      opacity: 0.8;
      transform: translate(-14%, 10%) scale(0.95);
    }

    58% {
      opacity: 0.6;
      transform: translate(8%, -16%) scale(1.05);
    }

    82% {
      opacity: 0.35;
      transform: translate(24%, 6%) scale(0.7);
    }

    100% {
      opacity: 0;
      transform: translate(40%, -8%) scale(0.35);
    }
  }

  @keyframes lightning-bolt-delta {
    0% {
      opacity: 0;
      transform: translate(4%, -6%) scale(0.5) skewX(4deg);
    }

    16% {
      opacity: 1;
      transform: translate(-6%, 12%) scale(1.2) skewX(-6deg);
    }

    32% {
      opacity: 0.85;
      transform: translate(12%, -18%) scale(0.9);
    }

    52% {
      opacity: 0.65;
      transform: translate(30%, 6%) scale(1.05);
    }

    76% {
      opacity: 0.35;
      transform: translate(8%, -8%) scale(0.6);
    }

    100% {
      opacity: 0;
      transform: translate(-10%, 10%) scale(0.3);
    }
  }

  /* High-specificity overrides to ensure lightning energy renders above global fades */
  .cc-header .cc-brand .cc-brand-energy {
    position: absolute;
    inset: -32% -12%;
    pointer-events: none;
    mix-blend-mode: screen;
    display: block;
    z-index: 1;
  }

  .cc-header .cc-brand .cc-brand-energy--primary::before,
  .cc-header .cc-brand .cc-brand-energy--primary::after,
  .cc-header .cc-brand .cc-brand-energy--secondary::before,
  .cc-header .cc-brand .cc-brand-energy--secondary::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    opacity: 0;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, .55)) drop-shadow(0 0 24px rgba(170, 204, 255, .45));
  }

  .cc-header .cc-brand .cc-brand-energy--primary::before {
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.12), #ffffcc 35%, #ffffff 62%, rgba(170, 204, 255, 0.4));
    clip-path: polygon(6% 8%, 18% 0%, 28% 12%, 38% 4%, 50% 18%, 60% 6%, 74% 24%, 86% 10%, 96% 30%, 82% 44%, 92% 60%, 70% 68%, 78% 86%, 58% 74%, 44% 94%, 30% 80%, 16% 92%, 20% 58%, 4% 66%, 10% 36%);
    animation: lightning-bolt-alpha 1.1s cubic-bezier(0.37, 0.01, 0.26, 1) infinite;
    animation-delay: 0.1s;
  }

  .cc-header .cc-brand .cc-brand-energy--primary::after {
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.12), #ffffcc 35%, #ffffff 62%, rgba(170, 204, 255, 0.4));
    clip-path: polygon(6% 8%, 18% 0%, 28% 12%, 38% 4%, 50% 18%, 60% 6%, 74% 24%, 86% 10%, 96% 30%, 82% 44%, 92% 60%, 70% 68%, 78% 86%, 58% 74%, 44% 94%, 30% 80%, 16% 92%, 20% 58%, 4% 66%, 10% 36%);
    animation: lightning-bolt-beta 1.45s cubic-bezier(0.28, 0.12, 0.32, 1) infinite;
    animation-delay: 0.55s;
  }

  .cc-header .cc-brand .cc-brand-energy--secondary::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), #fff9c4 30%, #aaccff 65%, rgba(255, 255, 255, 0.25));
    clip-path: polygon(4% 18%, 14% 4%, 30% 14%, 40% 2%, 46% 18%, 58% 4%, 70% 16%, 84% 6%, 94% 24%, 86% 38%, 98% 50%, 82% 62%, 92% 78%, 70% 70%, 62% 92%, 42% 74%, 32% 94%, 18% 78%, 14% 92%, 8% 60%, 2% 66%, 6% 34%);
    animation: lightning-bolt-gamma 1.35s cubic-bezier(0.45, 0.02, 0.3, 1) infinite;
    animation-delay: 0.32s;
  }

  .cc-header .cc-brand .cc-brand-energy--secondary::after {
    background: linear-gradient(105deg, rgba(255, 255, 255, 0.2), #ffffff 40%, #dff0ff 70%);
    clip-path: polygon(8% 12%, 22% 0%, 32% 16%, 48% 4%, 58% 22%, 66% 10%, 78% 26%, 90% 12%, 100% 34%, 82% 46%, 96% 60%, 72% 70%, 80% 88%, 54% 76%, 46% 94%, 34% 82%, 14% 92%, 12% 68%, 0% 76%, 6% 42%);
    animation: lightning-bolt-delta 1.65s cubic-bezier(0.38, 0.02, 0.24, 1) infinite;
    animation-delay: 0.78s;
  }

  @keyframes lightning-traverse {
    0% {
      transform: translateX(-30%) translateY(-50%) scaleX(0.15);
      opacity: 0;
    }

    8% {
      opacity: 1;
    }

    40% {
      transform: translateX(95%) translateY(-50%) scaleX(1);
      opacity: 1;
    }

    50% {
      opacity: 0.95;
    }

    60% {
      transform: translateX(95%) translateY(-50%) scaleX(1);
      opacity: 0.9;
    }

    85% {
      transform: translateX(-25%) translateY(-50%) scaleX(1);
      opacity: 0.7;
    }

    100% {
      transform: translateX(-30%) translateY(-50%) scaleX(0.15);
      opacity: 0;
    }
  }

  @keyframes lightning-burst {

    0%,
    75% {
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55);
      filter: brightness(1);
    }

    78% {
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 255, 255, .6);
      filter: brightness(1.08);
    }

    82% {
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55), 0 0 28px rgba(255, 255, 255, .85), 0 0 52px rgba(170, 204, 255, .7);
      filter: brightness(1.2);
    }

    86% {
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 255, 255, .5), 0 0 34px rgba(255, 255, 204, .45);
      filter: brightness(1.08);
    }

    100% {
      text-shadow: 0 2px 7px rgba(0, 0, 0, .55);
      filter: brightness(1);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

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

  /* ---------- Chips (small pills) ---------- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--chip-stroke);
    background: var(--chip-bg);
    color: var(--fg);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13.5px;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    backdrop-filter: blur(6px);
  }

  .chip:hover {
    transform: translateY(-1px);
    border-color: var(--stroke-2);
    box-shadow: var(--shadow-sm);
  }

  .chip--lang {
    padding: 8px 10px;
  }

  .flag {
    width: 20px;
    height: 14px;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: rgba(255, 255, 255, .2);
  }

  .flag .flag-emoji {
    font-size: 14px;
    line-height: 1;
    /* Ensure flag emoji render as emoji (Windows needs Segoe UI Emoji explicitly). */
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif;
    font-variant-emoji: emoji;
  }

  .chip--discord {
    background: linear-gradient(135deg, #9aa8ff, #5865f2);
    color: #fff;
    box-shadow: 0 12px 30px rgba(88, 101, 242, .45);
    border: 1px solid rgba(255, 255, 255, .28);
  }

  .chip--coffee {
    background: linear-gradient(135deg, #ffe2b8, #ffae4b);
    color: #2c1400;
    box-shadow: 0 12px 26px rgba(255, 174, 75, .45);
    border: 1px solid rgba(255, 255, 255, .35);
  }

  .chip--coffee .ico-wrap,
  .chip--discord .ico-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6);
  }

  .chip--coffee .ico-coffee {
    background: radial-gradient(circle at 30% 30%, #fff, #ffe2b8);
  }

  .chip--discord .ico-discord {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35), #8896ff);
  }

  .top-chip {
    padding: 8px 16px;
    font-size: 14px;
  }

  .flag--lg {
    width: 36px;
    height: 22px;
  }

  .chip--nav {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: var(--fg);
    min-width: 150px;
    justify-content: flex-start;
  }

  .chip--nav .ico-wrap {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .ico-coffee {
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
  }

  .chip--discord .ico-discord svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  }

  .chip {
    gap: 8px;
  }

  /* Theme toggle (left) */
  .theme-switch {
    display: flex;
    justify-content: center;
  }

  .theme-toggle {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .theme-toggle .toggle-pill {
    display: flex;
    align-items: center;
    width: var(--theme-toggle-width);
    height: var(--theme-toggle-height);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(80, 140, 255, .35), rgba(20, 26, 46, .85));
    border: 1px solid rgba(255, 255, 255, .15);
    padding: 0 var(--theme-toggle-padding);
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px rgba(0, 0, 0, .38);
    transition: background .3s ease, border-color .3s ease;
  }

  .theme-toggle .toggle-track {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .theme-toggle .toggle-knob {
    width: var(--theme-toggle-knob);
    height: var(--theme-toggle-knob);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, #7dd0ff 60%, #3a99ff);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: transform .3s ease, background .3s ease;
  }

  .theme-toggle[aria-pressed="true"] .toggle-pill {
    background: linear-gradient(135deg, rgba(118, 76, 40, .95), rgba(36, 19, 11, .95));
    border-color: rgba(255, 206, 160, .45);
  }

  .theme-toggle[aria-pressed="true"] .toggle-knob {
    transform: translateX(calc(var(--theme-toggle-width) - (var(--theme-toggle-padding) * 2) - var(--theme-toggle-knob)));
    background: radial-gradient(circle at 35% 35%, #fff5e1, #f7b36a 60%, #d37528);
  }

  .theme-toggle:focus-visible .toggle-pill {
    box-shadow: 0 0 0 3px rgba(90, 168, 255, .35);
  }

  .theme-label {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .2px;
  }

  .theme-note {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 4px;
    letter-spacing: .2px;
  }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    padding: 28px;
    border-radius: var(--radius-4);
    background: linear-gradient(145deg, rgba(94, 195, 255, .10), rgba(10, 16, 33, .65) 24%, rgba(14, 20, 42, .7) 70%);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
      radial-gradient(600px 180px at 20% 0%, rgba(94, 195, 255, .20), transparent 60%),
      radial-gradient(500px 150px at 80% 10%, rgba(123, 255, 239, .14), transparent 60%);
    filter: blur(10px);
    pointer-events: none;
  }

  .hero .hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--chip-bg);
    color: var(--fg);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--chip-stroke);
    font-weight: 700;
    font-size: 12.5px;
  }

  .hero h1 {
    margin: 12px 0 10px;
    font-size: clamp(2.1rem, 1.4rem + 1.4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.2;
    word-break: break-word;
  }

  .hero__text p {
    line-height: 1.55;
    max-width: 60ch;
  }

  .hero .muted {
    color: var(--muted);
  }

  .waves {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(18px, 3vw, 32px);
  }

  .hero__text,
  #drop {
    min-width: 0;
  }

  .hero-below {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  @media (max-width: 1200px) {
    .waves {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 768px) {
    .hero {
      padding: 20px;
    }
  }

  /* Dropzone */
  .dropzone {
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    border: 1.5px dashed rgba(255, 255, 255, .22);
    border-radius: var(--radius-3);
    min-height: 160px;
    display: grid;
    place-items: center;
    color: var(--fg-2);
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
    backdrop-filter: blur(16px) saturate(1.1);
  }

  .dropzone.hero-styled {
    background: var(--hero-gradient);
    border: 3px dashed rgba(255, 255, 255, .28);
    border-radius: 24px;
    box-shadow: var(--hero-shadow);
    color: #fff;
    backdrop-filter: blur(18px) saturate(1.2);
    padding: clamp(16px, 3vw, 28px);
  }

  .dropzone.hero-styled .dz-status {
    color: rgba(255, 255, 255, .9);
  }

  .dropzone.hero-styled .dz-txt span {
    color: rgba(255, 255, 255, .85);
  }

  .dropzone.hero-styled .dz-ico {
    font-size: 28px;
  }

  .dropzone.hero-styled.is-hover,
  .dropzone.hero-styled.hover,
  .dropzone.hero-styled.dragover {
    border-color: #fff;
    background: var(--hero-gradient-soft);
    transform: translateY(-2px);
    box-shadow: 0 30px 60px rgba(6, 8, 22, .65);
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    text-align: center;
  }

  .hero-drop-copy {
    gap: 10px;
  }

  .hero-drop-title {
    font-size: 1.4rem;
    letter-spacing: .2px;
  }

  .hero-drop-sub {
    display: block;
    margin-top: 4px;
    font-size: 1rem;
    opacity: .95;
  }

  .hero-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .btn-pill.hero-pill {
    border-radius: var(--pill-radius, 999px);
    border: 2px solid var(--hero-pill-border);
    background: var(--hero-pill-bg);
    color: #fff;
    padding: 0.75rem 1.6rem;
    font-weight: 600;
    letter-spacing: .15px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .btn-pill.hero-pill.primary {
    background: #fff;
    color: var(--prim-2);
    border-color: #fff;
  }

  .btn-pill.hero-pill:hover,
  .btn-pill.hero-pill:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .65);
    box-shadow: 0 15px 30px rgba(5, 10, 24, .35);
  }

  .btn-pill.hero-pill.primary:hover,
  .btn-pill.hero-pill.primary:focus-visible {
    box-shadow: 0 18px 35px rgba(90, 110, 255, .35);
  }

  .hero-title {
    font-size: clamp(2.4rem, 1.9rem + 1.8vw, 3.3rem);
    font-weight: 800;
    background: linear-gradient(120deg, #fff, #dfe6ff 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 12px 0;
  }

  .hero-subtitle {
    font-size: 1.22rem;
    font-weight: 650;
    line-height: 1.45;
    color: var(--fg-2);
    opacity: 1;
  }

  .hero-subtext {
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--fg-2);
    opacity: 1;
  }

  .hero-copy {
    gap: 10px;
  }

  .hero-stats {
    margin-top: 18px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    width: 100%;
  }

  .action-pill {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 1rem;
    font-size: 0.95rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 12px 25px rgba(6, 10, 26, 0.25);
  }

  .action-pill:hover,
  .action-pill:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 16px 34px rgba(6, 10, 26, 0.32);
  }

  .stat-pill {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .file-card {
    background: #fff;
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 12px 24px rgba(5, 6, 18, 0.12);
    border-left: 4px solid #667eea;
  }

  .floating {
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-5px);
    }
  }

  .dropzone:hover {
    border-color: rgba(94, 195, 255, .6);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .dropzone.is-hover {
    border-color: var(--prim);
    box-shadow: var(--shadow-md);
  }

  .dropzone:focus-visible {
    outline: none;
    box-shadow: var(--focus);
  }

  .dz-in {
    text-align: center;
    padding: 20px;
  }

  .dz-ico {
    font-size: 22px;
    opacity: .9;
  }

  .dz-txt strong {
    font-size: 16px;
  }

  .dz-status {
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
  }

  /* Presets */
  .quick-actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .pill {
    border-radius: 999px;
    padding: 8px 12px;
    border: 1px solid var(--stroke-2);
    background: var(--chip-bg);
    color: var(--fg);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .pill:hover {
    transform: translateY(-1px);
    border-color: var(--prim);
    box-shadow: 0 6px 16px rgba(94, 195, 255, .18);
  }

  .pill.is-suggested {
    border-color: var(--prim);
    color: var(--fg);
    box-shadow: 0 10px 22px rgba(94, 195, 255, .28);
  }

  .pill[disabled] {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
    border-style: dashed;
  }

  .quick-output {
    margin-top: 14px;
    min-height: 24px;
    font-weight: 600;
    color: var(--fg-2);
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  }

  #out:empty {
    display: none;
  }

  .trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }

  .trust-badge {
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .15px;
    color: #06111b;
    background: linear-gradient(135deg, rgba(123, 255, 239, .95), rgba(120, 182, 255, .95));
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 8px 20px rgba(15, 20, 40, .45);
    text-align: center;
    white-space: normal;
  }

  .trust-badge:nth-child(2) {
    background: linear-gradient(135deg, rgba(255, 215, 154, .95), rgba(255, 140, 42, .9));
  }

  .trust-badge:nth-child(3) {
    background: linear-gradient(135deg, rgba(179, 168, 255, .95), rgba(122, 193, 255, .95));
  }

  /* RTL helpers */
  html[dir="rtl"] body {
    direction: rtl;
  }

  html[dir="rtl"] .nav {
    direction: rtl;
  }

  html[dir="rtl"] .nav__right {
    flex-direction: row-reverse;
  }

  html[dir="rtl"] .chip {
    flex-direction: row-reverse;
    text-align: right;
  }

  html[dir="rtl"] .hero__text,
  html[dir="rtl"] .panel-title,
  html[dir="rtl"] .card-title {
    text-align: right;
  }

  html[dir="rtl"] .quick-actions {
    justify-content: flex-end;
  }

  html[dir="rtl"] .url-row {
    flex-direction: row-reverse;
  }

  html[dir="rtl"] .url-row input {
    text-align: right;
  }

  html[dir="rtl"] .dz-ico {
    transform: scaleX(-1);
  }

  html[dir="rtl"] .theme-switch {
    flex-direction: row-reverse;
  }

  html[dir="rtl"] .trust-badges {
    justify-content: flex-end;
  }

  .trust-note {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(90, 168, 255, .12);
    border: 1px solid rgba(90, 168, 255, .3);
    font-weight: 600;
    color: var(--fg);
  }

  .pro-cta {
    margin-top: 12px;
  }

  .pro-btn {
    min-width: 170px;
  }

  .chip--pro-cta {
    background: linear-gradient(135deg, rgba(122, 44, 240, .85), rgba(255, 200, 128, .85));
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .chip--pro-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
  }

  .pro-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 14px;
    border-radius: 999px;
    background: rgba(122, 44, 240, .15);
    border: 1px solid rgba(122, 44, 240, .4);
    color: #d9c6ff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, color .2s ease;
  }

  .pro-chip:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .6);
    outline-offset: 2px;
  }

  .pro-chip__status {
    font-size: 0.6rem;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .65);
  }

  .pro-chip.is-active {
    background: linear-gradient(120deg, rgba(122, 44, 240, .85), rgba(255, 205, 160, .85));
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }

  .pro-chip.is-active .pro-chip__status {
    color: #ffe5ba;
  }

  body.pro-modal-open {
    overflow: hidden;
  }

  .pro-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
  }

  .pro-modal[hidden] {
    display: none !important;
  }

  .pro-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 12, .85);
    backdrop-filter: blur(14px);
  }

  .pro-modal-panel {
    position: relative;
    width: min(620px, 92vw);
    max-height: 90vh;
    overflow: auto;
    padding: 32px;
    border-radius: 30px;
    background: radial-gradient(circle at top, rgba(34, 24, 58, .9), rgba(7, 9, 16, .95));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 40px 80px rgba(2, 2, 8, .65);
    color: #f8f4ff;
  }

  .pro-modal-close {
    position: absolute;
    top: 14px;

    .lang-sidebar-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(3, 8, 20, 0.6);
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
      z-index: 55;
    }

    .lang-sidebar-backdrop.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    right:18px;
    background:transparent;
    border:0;
    color:rgba(255, 255, 255, .7);
    font-size:1.3rem;

    body.lang-sidebar-lock {
      overflow: hidden;
      touch-action: none;
    }

    cursor:pointer;
  }

  .pro-step {
    animation: fadeIn .3s ease;
  }

  .pro-step[hidden] {
    display: none !important;
  }

  .pro-step-eyebrow {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: .2em;
    color: #c8b9ff;
    margin-bottom: .25rem;
  }

  .pro-step-subtext {
    color: rgba(255, 255, 255, .75);
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .pro-step-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
  }

  .pro-step-list li {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 14px 18px;
    font-size: .95rem;
    line-height: 1.4;
  }

  .pro-step-note {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, .8);
    border-left: 2px solid rgba(255, 206, 160, .7);
    padding-left: 12px;
  }

  .pro-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
    align-items: center;
  }

  .pro-modal-message {
    margin-top: 14px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, .82);
  }

  .pro-modal-message.is-error {
    color: #ffb8b0;
  }

  .pro-nav-back.is-hidden {
    visibility: hidden;
    pointer-events: none;
  }

  .pro-nav-later {
    background: none;
    border: 0;
    color: #f4c2ff;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .pro-nav-later:hover {
    color: #ffe5ba;
  }

  .pro-pricing {
    margin-top: 16px;
    display: grid;
    gap: 10px;
  }

  .pro-pricing-card {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
  }

  .pro-pricing-card strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 4px;
  }

  .pro-checkout-preview-note {
    margin-top: 16px;
    padding: 12px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .04);
    color: #ffe9bf;
  }

  .auth-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .auth-modal[hidden] {
    display: none !important;
  }

  .auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 9, 18, 0.82);
    backdrop-filter: blur(12px);
  }

  .auth-modal__panel {
    position: relative;
    z-index: 1;
    width: min(420px, 92vw);
    padding: 28px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(14, 20, 42, .95), rgba(6, 9, 18, .97));
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 30px 60px rgba(2, 4, 12, .6);
    color: #f7f8ff;
  }

  .auth-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .6);
    font-size: 1.2rem;
    cursor: pointer;
  }

  .auth-modal__note {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, .75);
  }

  .auth-modal__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .auth-modal__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
  }

  .auth-modal__field input {
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(3, 7, 18, .85);
    color: inherit;
  }

  /* Pro page auth fields: slightly larger, 2025-feel (sizes only) */
  .cc-pro-auth-card .auth-modal__field {
    gap: 0.45rem;
    font-size: 0.95rem;
  }

  .cc-pro-auth-card .auth-modal__field input {
    padding: 0.75rem 0.95rem;
    border-radius: 12px;
    font-size: 1rem;
  }

  /* ---------- Pro page layout (scoped) ---------- */
  body.cc-pro-page {
    background: var(--bg);
  }

  body.cc-pro-page::before {
    /* Pro page: strong purple wash across the whole viewport */
    background:
      radial-gradient(1100px 620px at 50% -10%, rgba(59, 22, 116, 0.34), transparent 70%),
      radial-gradient(900px 520px at 15% 0%, rgba(35, 17, 61, 0.22), transparent 68%),
      radial-gradient(900px 520px at 85% 10%, rgba(252, 191, 139, 0.1), transparent 72%),
      radial-gradient(900px 520px at 60% 120%, rgba(68, 38, 112, 0.18), transparent 70%),
      linear-gradient(180deg, rgba(114, 75, 173, 0.1), transparent 55%),
      var(--bg);
    filter: saturate(1.08);
  }

  body.cc-pro-page::after {
    /* purple-tinted streaks (keeps motion but matches Pro vibe) */
    background:
      repeating-linear-gradient(115deg,
        rgba(122, 44, 240, .05) 0 8px,
        transparent 8px 28px);
    opacity: 0.7;
  }

  .cc-pro-shell {
    min-height: 100vh;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 40px) clamp(16px, 2.5vw, 28px);
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.2vw, 26px);
  }

  .cc-pro-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 18px;
    border-radius: var(--radius-4);
    background: radial-gradient(circle at top, rgba(39, 18, 87, 0.9), rgba(8, 10, 17, 0.95));
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow-lg);
  }

  .cc-pro-title {
    margin: 0;
    font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
  }

  .cc-pro-subtitle {
    margin: 10px 0 0;
    color: var(--fg-2);
    font-size: var(--fs-md);
  }

  .cc-pro-h2 {
    margin: 0 0 10px;
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem);
    line-height: var(--lh-tight);
  }

  .cc-pro-section {
    padding: 18px 18px;
    border-radius: var(--radius-4);
    background: radial-gradient(circle at top, rgba(21, 12, 43, 0.75), rgba(7, 9, 15, 0.92));
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow-md);
  }

  .cc-pro-page .pro-pricing-card {
    background: color-mix(in srgb, var(--bg-elev) 72%, transparent);
    border-color: var(--stroke-2);
  }

  @media (max-width:720px) {
    .cc-pro-header {
      flex-direction: column;
      align-items: stretch;
    }

    .cc-pro-header .btn {
      align-self: flex-start;
    }
  }

  .auth-modal__field input:focus-visible {
    outline: 2px solid rgba(125, 188, 255, .55);
    outline-offset: 2px;
  }

  .auth-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .auth-modal__error {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #ffb3b3;
  }

  .auth-modal__error.is-info {
    color: #d8ecff;
  }

  .ad-slot--inline {
    margin: 28px auto;
    border-radius: var(--radius-4);
    border: 1px dashed rgba(255, 255, 255, .2);
    background: rgba(9, 14, 22, .65);
  }

  .privacy-faq {
    /* Let the FAQ stretch with the surrounding panels */
    width: 100%;
    margin: 32px 0;
  }

  .privacy-faq h3 {
    margin: 0 0 18px;
    font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.9rem);
    font-weight: 800;
  }

  .faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
  }

  .faq-grid details {
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(6, 10, 18, .6);
    transition: border-color .2s ease, background .2s ease;
  }

  .faq-grid details:hover {
    border-color: rgba(94, 195, 255, .3);
    background: rgba(10, 18, 36, .7);
  }

  .faq-grid summary {
    font-weight: 600;
    cursor: pointer;
  }

  .faq-grid p {
    margin: 10px 0 0;
    color: var(--muted);
  }

  .consent-banner {
    position: fixed;
    right: 24px;
    bottom: 24px;
    left: auto;
    top: auto;
    z-index: 60;
    max-width: min(420px, calc(100% - 32px));
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(5, 9, 18, .95);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Ensure hidden banners are actually hidden (author CSS overrides UA [hidden]). */
  .consent-banner[hidden] {
    display: none !important;
  }

  .consent-banner p {
    margin: 0;
    word-break: break-word;
  }

  .consent-banner .consent-feel {
    font-size: 0.9rem;
    color: var(--fg-2);
  }

  .consent-banner .consent-more {
    font-size: 0.85rem;
  }

  .consent-banner .consent-more a {
    color: var(--prim);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .consent-banner .consent-more a:hover {
    color: var(--prim-2);
  }

  .cc-cmp button {
    pointer-events: auto;
  }

  .consent-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .consent-banner__actions button {
    flex: 1 1 140px;
  }

  .consent-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding-top: 10px;
  }

  .consent-options label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.3;
  }

  .consent-save {
    width: 100%;
  }

  @media (max-width: 640px) {
    .consent-banner {
      right: 12px;
      left: 12px;
      bottom: 12px;

      /* --- GIF/IMG + Audio → MP4 tool --------------------------------------- */
      .media-tool-card {
        position: relative;
        overflow: visible;
        padding: 2.5rem;
        border-radius: 32px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: radial-gradient(circle at 18% 18%, rgba(98, 146, 255, 0.35), transparent 55%),
          radial-gradient(circle at 80% 0%, rgba(74, 222, 255, 0.2), transparent 45%),
          linear-gradient(135deg, rgba(3, 7, 18, 0.95), rgba(5, 12, 28, 0.85));
        box-shadow: 0 35px 65px rgba(5, 10, 25, 0.55);
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
      }

      .media-tool-card>.media-mode-bar {
        order: -1;
        width: 100%;
      }

      .media-tool-card::before,
      .media-tool-card::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        opacity: 0.45;
        pointer-events: none;
      }

      .media-tool-card::before {
        width: 320px;
        height: 320px;
        top: -160px;
        left: -80px;
        background: #2d6fea;
      }

      .media-tool-card::after {
        width: 260px;
        height: 260px;
        bottom: -150px;
        right: -60px;
        background: #22d3ee;
      }

      .media-tool-card>* {
        position: relative;
        z-index: 1;
      }

      .media-tool-header {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        margin-bottom: 1.5rem;
      }

      .media-tool-eyebrow {
        font-size: 0.8rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.75);
      }

      .media-tool-heading h2 {
        margin: 0;
        font-size: clamp(1.8rem, 2.5vw, 2.2rem);
      }

      .media-tool-heading p {
        margin: 0.3rem 0 0;
        color: rgba(255, 255, 255, 0.8);
      }

      .media-tool-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .media-chip {
        padding: 0.35rem 0.9rem;
        border-radius: 999px;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: rgba(255, 255, 255, 0.8);
        background: rgba(255, 255, 255, 0.05);
      }

      .media-chip--accent {
        border-color: rgba(45, 111, 234, 0.6);
        color: #dff6ff;
        background: linear-gradient(120deg, rgba(45, 111, 234, 0.6), rgba(79, 209, 197, 0.4));
      }

      .media-converter-tool {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
      }

      .media-mode-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.1rem;
        padding: 1.75rem 1.8rem;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 13, 26, 0.85);
        backdrop-filter: blur(18px);
        box-shadow: 0 35px 80px rgba(4, 8, 16, 0.55);
        text-align: center;
        position: relative;
        z-index: 200;
        /* ensure select + menu rise above overlays */
      }

      .media-mode-bar__copy {
        width: 100%;
      }

      .media-mode-bar__label {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
      }

      .media-mode-bar__hint {
        margin: 0.25rem 0 0;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
      }

      .media-mode-bar__select {
        position: relative;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 0.35rem 0.55rem;
        border: 1px solid rgba(122, 231, 255, 0.45);
        background: linear-gradient(125deg, rgba(107, 186, 255, 0.25), rgba(68, 255, 209, 0.18)) border-box;
        box-shadow: 0 22px 45px rgba(3, 8, 20, 0.62), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
        transition: border 0.2s ease, box-shadow 0.2s ease;
        z-index: 400;
        /* lift the control and its menu */
      }

      /* Raise any select dropdown inside the GIF/MP4 workflow bar */
      #tool-gif-mp4 .media-mode-bar select,
      #tool-gif-mp4 .media-mode-bar option,
      #tool-gif-mp4 .media-mode-bar__select::after {
        position: relative;
        z-index: 500;
      }

      /* If the native dropdown is clipped by card ancestors, force it to overlay */
      #tool-gif-mp4 .media-mode-bar select {
        background-color: rgba(8, 13, 26, 0.98);
      }

      .media-mode-bar__select::after {
        content: 'v';
        position: absolute;
        right: 0.75rem;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: linear-gradient(135deg, #7ef5ff, #5ac2ff 60%, #69ffdd);
        color: #051024;
        font-weight: 700;
        display: grid;
        place-items: center;
        box-shadow: 0 16px 34px rgba(3, 8, 18, 0.65);
        pointer-events: none;
      }

      .media-mode-bar__select:focus-within {
        border-color: rgba(139, 255, 240, 0.95);
        box-shadow: 0 25px 55px rgba(2, 10, 26, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
      }

      .media-mode-bar__select select {
        min-width: 0;
        width: min(420px, 70vw);
        border: none;
        background: transparent;
        background-image: none;
        color: #f5fbff;
        padding: 0.75rem 3.6rem 0.75rem 1rem;
        font-size: 1rem;
        font-weight: 600;
        appearance: none;
      }

      .media-mode-bar__select select:focus-visible {
        outline: none;
      }

      .media-classic-tool {
        margin-top: 1.25rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 26px;
        padding: 1.65rem;
        background: rgba(6, 11, 22, 0.85);
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        box-shadow: 0 25px 60px rgba(2, 6, 16, 0.55);
        backdrop-filter: blur(12px);
      }

      #gifModeGifAudio {
        max-width: 760px;
        margin: 2rem auto 0;
        text-align: center;
        align-self: center;
        background: linear-gradient(160deg, rgba(18, 40, 86, 0.95), rgba(7, 19, 41, 0.92));
        border-color: rgba(110, 193, 255, 0.4);
        box-shadow: 0 40px 120px rgba(4, 10, 24, 0.65);
      }

      #gifModeGifAudio .media-classic-row {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
      }

      #gifModeGifAudio .media-classic-grid {
        justify-items: center;
        text-align: center;
      }

      #gifModeGifAudio .media-classic-field {
        align-items: center;
      }

      #gifModeGifAudio .media-classic-field select {
        text-align: center;
        font-size: 1.05rem;
      }

      #gifModeGifAudio .media-step-title {
        font-size: clamp(1.5rem, 2vw + 1rem, 2.6rem);
        letter-spacing: 0.12em;
      }

      #gifModeGifAudio .media-step-hint {
        font-size: 1.05rem;
        color: rgba(215, 231, 255, 0.95);
      }

      #gifModeGifAudio .media-file-picker,
      #gifModeGifAudio .media-file-picker--full {
        width: 100%;
        align-items: center;
      }

      #gifModeGifAudio .media-file-picker .btn,
      #gifModeGifAudio .media-file-actions .btn {
        width: min(420px, 100%);
        font-size: 1.15rem;
        padding: 1.05rem 1.5rem;
        letter-spacing: 0.08em;
      }

      #gifModeGifAudio .media-file-label,
      #gifModeGifAudio .media-file-status {
        text-align: center;
      }

      #gifModeGifAudio .media-actions {
        flex-direction: column;
        align-items: center;
      }

      #gifModeGifAudio .media-actions .btn {
        width: min(420px, 100%);
        font-size: 1.1rem;
        padding: 1rem 1.25rem;
      }

      #gifModeGifAudio .media-progress,
      #gifModeGifAudio .tool-status,
      #gifModeGifAudio .results-section {
        text-align: center;
      }

      .media-classic-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      .media-classic-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
      }

      .media-classic-field {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.75);
      }

      .media-step-title {
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #7dd3ff;
      }

      .media-step-hint {
        font-size: 0.98rem;
        color: rgba(173, 207, 255, 0.9);
      }

      .media-tool-card select,
      .media-tool-card input[type="number"],
      .media-tool-card input[type="text"] {
        width: 100%;
        border-radius: 16px;
        border: 1px solid rgba(124, 211, 255, 0.4);
        padding: 0.75rem 1rem;
        background-color: rgba(5, 10, 22, 0.92);
        color: #f2f8ff;
        font-weight: 600;
        font-size: 0.95rem;
        letter-spacing: 0.02em;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 18px 34px rgba(2, 8, 18, 0.55);
        transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        appearance: none;
      }

      .media-tool-card select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath fill='%23b9f7ff' d='M0 0l4 6 4-6z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 12px;
        padding-right: 2.85rem;
      }

      .media-tool-card select:focus-visible,
      .media-tool-card input[type="number"]:focus-visible,
      .media-tool-card input[type="text"]:focus-visible {
        outline: none;
        border-color: rgba(139, 255, 240, 0.9);
        box-shadow: 0 0 0 1px rgba(139, 255, 240, 0.4), 0 24px 55px rgba(2, 10, 26, 0.75);
        background-color: rgba(10, 18, 38, 0.95);
      }

      .media-tool-card select:disabled,
      .media-tool-card input[type="number"]:disabled,
      .media-tool-card input[type="text"]:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
        border-color: rgba(255, 255, 255, 0.15);
      }

      .media-tool-card input::placeholder {
        color: rgba(255, 255, 255, 0.55);
      }

      .media-tool-card input[type="checkbox"] {
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 2px solid rgba(129, 223, 255, 0.55);
        background: rgba(6, 12, 24, 0.9);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: border 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      }

      .media-tool-card input[type="checkbox"]::after {
        content: '';
        width: 10px;
        height: 6px;
        display: block;
        border-left: 2px solid transparent;
        border-bottom: 2px solid transparent;
        transform: rotate(-45deg) scale(0.95);
        opacity: 0;
        transition: opacity 0.15s ease;
      }

      .media-tool-card input[type="checkbox"]:checked {
        background: linear-gradient(135deg, #76ffe0, #5ab3ff);
        border-color: transparent;
        box-shadow: 0 12px 26px rgba(3, 8, 20, 0.55);
      }

      .media-tool-card input[type="checkbox"]:checked::after {
        border-color: #031022;
        opacity: 1;
      }

      .media-tool-card input[type="checkbox"]:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(139, 255, 240, 0.4), 0 12px 26px rgba(3, 8, 20, 0.6);
      }

      .media-tool-card input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(90deg, #3fd4ff, #7c6bff);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
        outline: none;
      }

      .media-tool-card input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 3px solid #5cf5ff;
        background: #fff;
        box-shadow: 0 12px 24px rgba(3, 8, 20, 0.65);
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }

      .media-tool-card input[type="range"]::-webkit-slider-thumb:hover {
        transform: scale(1.08);
        box-shadow: 0 18px 30px rgba(3, 8, 20, 0.7);
      }

      .media-tool-card input[type="range"]::-moz-range-track {
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(90deg, #3fd4ff, #7c6bff);
      }

      .media-tool-card input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 3px solid #5cf5ff;
        background: #fff;
        box-shadow: 0 12px 24px rgba(3, 8, 20, 0.65);
        cursor: pointer;
      }

      .media-tool-card input[type="range"]:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(139, 255, 240, 0.35);
      }

      .media-classic-field--full {
        width: 100%;
      }

      .media-file-picker {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        align-items: flex-start;
        position: relative;
      }

      .media-file-picker--center {
        align-items: center;
        text-align: center;
      }

      .media-input-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        border: 0;
        white-space: nowrap;
      }

      .media-file-picker--full {
        width: 100%;
      }

      .media-file-actions {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
      }

      .media-file-picker .btn {
        min-width: 220px;
        justify-content: center;
      }

      /* Hide native file inputs inside GIF/MP4 workflows; we trigger them via custom buttons. */
      #tool-gif-mp4 .media-classic-tool input[type="file"],
      #tool-gif-mp4 .media-converter-tool input[type="file"],
      #tool-gif-mp4 .media-file-picker input[type="file"] {
        display: none !important;
      }

      .media-file-status {
        margin: 0;
        font-size: 0.92rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: rgba(168, 216, 255, 0.9);
        flex: 1 1 auto;
        background: rgba(12, 18, 36, 0.8);
        border-radius: 14px;
        padding: 0.85rem 1rem;
      }

      .media-file-label {
        margin: 0;
        font-size: 0.98rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        color: rgba(229, 239, 255, 0.9);
      }

      .media-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
      }

      .media-actions .btn {
        flex: 1 1 200px;
        justify-content: center;
      }

      .media-classic-tool .btn {
        min-width: 0;
      }

      .media-classic-tool .btn.btn--ghost {
        border-color: rgba(255, 255, 255, 0.25);
      }

      .upload-section {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
      }

      .upload-zone {
        flex: 1 1 320px;
        border: 1px dashed rgba(112, 185, 255, 0.6);
        border-radius: 22px;
        padding: 1.65rem;
        background: rgba(255, 255, 255, 0.02);
        min-height: 220px;
        transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
      }

      .upload-zone.drag-active {
        border-color: #5c7cfa;
        background: rgba(92, 124, 250, 0.08);
        transform: translateY(-2px);
      }

      .upload-zone__title {
        font-weight: 600;
        font-size: 1rem;
        margin: 0 0 0.3rem;
      }

      .upload-zone__hint {
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.9rem;
        margin: 0 0 0.75rem;
      }

      .file-list {
        list-style: none;
        margin: 1rem 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .file-list__empty {
        margin: 0;
        padding: 1.25rem;
        border: 1px dashed rgba(255, 255, 255, 0.25);
        border-radius: 14px;
        text-align: center;
        font-size: 0.92rem;
        color: rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.04);
      }

      .file-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        align-items: center;
        padding: 0.9rem 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        background: rgba(2, 6, 23, 0.9);
        cursor: grab;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
      }

      .file-row__info {
        flex: 1 1 220px;
        min-width: 200px;
      }

      .file-row__title {
        margin: 0;
        font-weight: 600;
        color: #fff;
      }

      .file-row__meta {
        margin: 0;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.65);
      }

      .file-row__actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .file-row button {
        border: 0;
        background: none;
        font-weight: 600;
        color: #ef4444;
        cursor: pointer;
      }

      .file-row__actions button {
        padding: 0.35rem 0.6rem;
        border-radius: 8px;
        border: 1px solid transparent;
        transition: color 0.2s ease, border-color 0.2s ease;
      }

      .file-row__actions button:hover {
        color: #b91c1c;
        border-color: rgba(239, 68, 68, 0.35);
      }

      .duration-control {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        min-width: 160px;
      }

      .duration-control label {
        font-size: 0.85rem;
        color: #475467;
      }

      .duration-control__value {
        font-size: 0.85rem;
        font-weight: 600;
        color: #111827;
      }

      .timeline-section {
        border: 1px solid #e4e7ec;
        border-radius: 16px;
        padding: 1.25rem;
        background: #fff;
      }

      .timeline-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .timeline-visual {
        margin-top: 0.75rem;
        padding: 1rem;
        border-radius: 12px;
        min-height: 90px;
        background: linear-gradient(90deg, #eef2ff, #f9fafb);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        overflow-x: auto;
      }

      .timeline-empty {
        margin: 0;
        color: #667085;
        font-size: 0.9rem;
      }

      .timeline-chip {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        min-width: 68px;
        padding: 0.65rem 0.8rem;
        border-radius: 10px;
        background: #fff;
        box-shadow: inset 0 0 0 1px rgba(45, 111, 234, 0.16);
        text-align: center;
      }

      .timeline-chip span {
        font-weight: 700;
        color: #111827;
      }

      .timeline-chip small {
        font-size: 0.75rem;
        color: #6b7280;
      }

      .timeline-hint {
        margin: 0.75rem 0 0;
        font-size: 0.85rem;
        color: #667085;
      }

      .output-settings {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
      }

      .output-field {
        flex: 1 1 180px;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }

      .output-field select,
      .audio-trim input {
        border: 1px solid #d0d5dd;
        border-radius: 10px;
        padding: 0.6rem 0.75rem;
        font-size: 0.95rem;
        background: #fff;
      }

      .audio-trim {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin: 1rem 0;
      }

      .audio-trim label {
        flex: 1 1 120px;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        font-size: 0.85rem;
        color: #475467;
      }

      .audio-volume {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-weight: 600;
        margin-bottom: 0.6rem;
      }

      .audio-volume input[type="range"] {
        flex: 1;
      }

      .audio-loop {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.9rem;
      }

      .audio-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.75rem 0.9rem;
        border-radius: 10px;
        border: 1px solid #d0d5dd;
        background: #fff;
        font-size: 0.88rem;
        color: #334155;
      }

      .audio-info button {
        color: #ef4444;
        font-weight: 600;
      }

      .audio-info span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .media-progress {
        border: 1px solid #e4e7ec;
        border-radius: 14px;
        padding: 1rem;
        background: #f8fafc;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .media-progress__bar {
        width: 100%;
        height: 6px;
        border-radius: 999px;
        background: #d0d5dd;
        overflow: hidden;
      }

      .media-progress__bar span {
        display: block;
        height: 100%;
        width: 0;
        border-radius: inherit;
        background: linear-gradient(90deg, #2d6fea, #7c3aed);
        transition: width 0.2s ease;
      }

      .media-progress__label {
        font-size: 0.85rem;
        color: #475467;
        margin: 0;
      }

      .results-section {
        border: 1px solid #e4e7ec;
        border-radius: 14px;
        padding: 1rem;
        background: #f9fffb;
      }

      .results-section h3 {
        margin-top: 0;
      }

      @media (max-width: 720px) {
        .upload-zone {
          flex: 1 1 100%;
        }

        .output-settings {
          flex-direction: column;
        }

        .file-row {
          cursor: default;
        }
      }

      max-width:calc(100% - 24px);
    }

    .consent-banner__actions {
      flex-direction: column;
    }
  }

  .status-line {
    margin-top: 12px;
    font-weight: 600;
    color: var(--fg);
  }

  .link-btn {
    margin-top: 8px;
    background: none;
    border: none;
    color: var(--fg-2);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.9rem;
  }

  .link-btn:hover {
    color: var(--fg);
  }

  /* ---------- Panels / Cards ---------- */
  .panel {
    margin-top: 18px;
    border-radius: var(--radius-4);
    background: linear-gradient(135deg, rgba(22, 32, 52, .92), rgba(8, 12, 26, .72));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(18px) saturate(1.25);
    padding: 18px;
  }

  .panel--wide {
    padding: 18px 18px 6px;
  }

  .wide-75 {
    width: min(900px, 100%);
  }

  .grid {
    display: grid;
    gap: var(--gap-3);
    grid-template-columns: 1fr 1fr;
  }

  @media (max-width: 900px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }

  .card {
    border-radius: var(--radius-3);
    background: linear-gradient(145deg, rgba(19, 26, 44, .92), rgba(19, 26, 44, .55));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(14px) saturate(1.1);
    padding: 14px;
  }

  .card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .panel-title {
    margin: 0 0 10px;
  }

  .card-title {
    font-weight: 600;
    margin: 0 0 8px;
  }

  .grid--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .grid--stack {
    grid-template-columns: 1fr;
  }

  @media (max-width: 960px) {
    .grid--split {
      grid-template-columns: 1fr;
    }
  }

  .actions--compact {
    margin-top: 10px;
  }

  .zip-results {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .zip-results .btn {
    inline-size: 100%;
    justify-content: flex-start;
  }

  /* ---------- Buttons ---------- */
  .btn,
  .btn-primary {
    --btn-bg: linear-gradient(120deg, #606dff, #35c9ff 55%, #26ffd3);
    --btn-fg: #f3f7ff;
    --btn-shadow: 0 22px 45px rgba(3, 8, 20, 0.55);
    --btn-letter: 0.06em;
    --btn-case: uppercase;
    --btn-radius: 999px;
    --btn-padding: 1rem 2.1rem;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    min-width: 0;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 700;
    font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.12rem);
    letter-spacing: var(--btn-letter);
    text-transform: var(--btn-case);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--btn-shadow);
    text-shadow: 0 0 18px rgba(37, 210, 255, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    overflow: hidden;
    z-index: 0;
  }

  .btn--xl {
    --btn-padding: 1.15rem 2.8rem;
    font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
    letter-spacing: 0.08em;
  }

  .btn--gif {
    --btn-bg: #238636;
    --btn-shadow: 0 25px 50px rgba(35, 134, 54, 0.45);
  }

  .btn--gif:hover:not(:disabled),
  .btn--gif:focus-visible:not(:disabled) {
    --btn-bg: #2ea043;
  }

  .btn--audio {
    --btn-bg: #1f6feb;
    --btn-shadow: 0 25px 50px rgba(31, 111, 235, 0.4);
  }

  .btn--audio:hover:not(:disabled),
  .btn--audio:focus-visible:not(:disabled) {
    --btn-bg: #388bfd;
  }

  .btn--convert {
    --btn-bg: linear-gradient(135deg, #ff6a00, #ee0979);
    --btn-shadow: 0 28px 55px rgba(238, 9, 121, 0.45);
    letter-spacing: 0.12em;
  }

  #gifModeGifAudio .media-actions {
    flex-direction: column;
    align-items: center;
  }

  #gifModeGifAudio .media-actions .btn {
    width: min(420px, 100%);
  }

  #gifModeGifAudio .media-actions .btn.btn--ghost {
    width: auto;
    align-self: center;
    margin-top: 0.5rem;
  }

  #gifModeMp4Gif .media-actions {
    flex-direction: column;
    align-items: center;
  }

  #gifModeMp4Gif .media-actions .btn {
    width: min(420px, 100%);
  }

  #gifModeMp4Gif .media-actions .btn.btn--ghost {
    width: auto;
    align-self: center;
    margin-top: 0.5rem;
  }

  /* Hide native file input for MP4 → GIF; use styled trigger instead */
  #gifModeMp4Gif input[type='file'] {
    display: none !important;
  }

  #gifImgAudioTool .media-actions {
    flex-direction: column;
    align-items: center;
  }

  #gifImgAudioTool .media-actions .btn {
    width: min(420px, 100%);
  }

  #gifImgAudioTool .media-actions .btn.btn--ghost {
    width: auto;
    align-self: center;
    margin-top: 0.5rem;
  }

  .btn::before,
  .btn-primary::before {
    content: '';
    position: absolute;
    inset: -40% auto auto -25%;
    width: 65%;
    height: 180%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.45), transparent 60%);
    opacity: 0;
    transform: translate3d(-10%, 0, 0) rotate(20deg);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }

  .btn:disabled,
  .btn-primary:disabled {
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
  }

  .btn:not(:disabled):hover,
  .btn-primary:not(:disabled):hover,
  .btn:not(:disabled):focus-visible,
  .btn-primary:not(:disabled):focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 32px 65px rgba(3, 8, 18, 0.65);
  }

  .btn:not(:disabled):hover::before,
  .btn-primary:not(:disabled):hover::before,
  .btn:not(:disabled):focus-visible::before,
  .btn-primary:not(:disabled):focus-visible::before {
    opacity: 0.35;
    transform: translate3d(35%, 0, 0) rotate(10deg);
  }

  .btn:focus-visible,
  .btn-primary:focus-visible {
    outline: none;
  }

  .btn.btn--ghost,
  .btn-primary.btn--ghost {
    --btn-bg: rgba(255, 255, 255, 0.03);
    --btn-fg: rgba(255, 255, 255, 0.78);
    --btn-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    --btn-letter: 0.04em;
    --btn-case: none;
    border: 1px solid rgba(255, 255, 255, 0.24);
  }

  .btn.btn--accent,
  .btn-primary.btn--accent {
    --btn-bg: linear-gradient(118deg, #ffe173, #ff8c7d 60%, #ff4db8);
    --btn-fg: #230b16;
  }

  .btn-text {
    background: none;
    border: none;
    color: var(--prim);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
    padding: 0.25rem 0.35rem;
    cursor: pointer;
  }

  .btn-text:hover {
    color: var(--fg);
  }

  .btn-text:focus-visible {
    outline: none;
    color: var(--fg);
    text-decoration: underline;
  }

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

  /* Contextual button themes */
  .media-tool-card .btn,
  .media-tool-card .btn-primary {
    --btn-radius: 999px;
    --btn-padding: 0.95rem 2rem;
    --btn-letter: 0.08em;
    --btn-bg: linear-gradient(120deg, #606dff, #35c9ff 55%, #26ffd3);
  }

  .media-tool-card .btn.btn--ghost,
  .media-tool-card .btn-primary.btn--ghost {
    --btn-bg: rgba(255, 255, 255, 0.03);
    --btn-fg: rgba(255, 255, 255, 0.78);
    --btn-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.24);
  }

  .media-tool-card .btn-primary,
  .media-tool-card .download-btn,
  .media-tool-card .btn.btn--accent {
    --btn-bg: linear-gradient(118deg, #ffe173, #ff8c7d 60%, #ff4db8);
    --btn-fg: #230b16;
  }

  .media-tool-card .convert-btn,
  .media-tool-card #gifMp4GifConvert,
  .media-tool-card #gifGifAudioConvert,
  .media-tool-card #gifMediaConvertBtn {
    --btn-bg: linear-gradient(120deg, #7c6dff, #56e6ff 60%, #44ffbf);
    --btn-fg: #040f20;
  }

  #tool-gif-mp4 .gifmp4-btn {
    width: 100%;
    --btn-padding: 0.95rem 2.1rem;
    --btn-bg: linear-gradient(120deg, #8b7bff, #5ec3ff 55%, #2ca3ff);
  }

  #tool-gif-mp4 .gifmp4-btn:disabled {
    opacity: 0.55;
    box-shadow: none;
    --btn-bg: linear-gradient(120deg, #4c5a7a, #3a445f);
  }

  #tool-gif-mp4 .workflow {
    text-align: center;
  }

  #tool-gif-mp4 .workflow .media-classic-tool,
  #tool-gif-mp4 .workflow .media-converter-tool {
    margin-left: auto;
    margin-right: auto;
  }

  #tool-gif-mp4 .workflow .media-classic-row,
  #tool-gif-mp4 .workflow .media-file-actions,
  #tool-gif-mp4 .workflow .media-actions {
    justify-content: center;
  }

  #tool-gif-mp4 .workflow .media-file-picker,
  #tool-gif-mp4 .workflow .media-file-actions {
    align-items: center;
    text-align: center;
  }

  #tool-gif-mp4 .energy-flow {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
    position: relative;
  }

  @media (min-width: 900px) {
    #tool-gif-mp4 .energy-flow {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1400px) {
    #tool-gif-mp4 .energy-flow {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  #tool-gif-mp4 .phase-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 1.25rem;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.06), rgba(5, 10, 28, 0.85));
    box-shadow: 0 25px 60px rgba(5, 10, 28, 0.55);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #tool-gif-mp4 .phase-card[data-phase-state="locked"] {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.25);
  }

  #tool-gif-mp4 .phase-card[data-phase-state="active"] {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 25px 60px rgba(0, 247, 255, 0.25);
    transform: translateY(-4px);
  }

  #tool-gif-mp4 .phase-card[data-phase-state="complete"] {
    border-color: rgba(0, 255, 136, 0.55);
    box-shadow: 0 30px 70px rgba(0, 255, 136, 0.25);
  }

  #tool-gif-mp4 .phase-card__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  #tool-gif-mp4 .phase-card__eyebrow {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
  }

  #tool-gif-mp4 .phase-card__title {
    margin: 0;
    font-size: 1.3rem;
  }

  #tool-gif-mp4 .phase-card__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
  }

  #tool-gif-mp4 .phase-card__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #tool-gif-mp4 .phase-node {
    position: relative;
    border-radius: 20px;
    padding: 1rem 1.25rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
  }

  #tool-gif-mp4 .phase-node__glow {
    position: absolute;
    inset: -40% -10% auto;
    height: 180%;
    filter: blur(48px);
    opacity: 0.8;
    animation: phaseGlow 3.5s ease-in-out infinite alternate;
  }

  #tool-gif-mp4 .phase-node__copy {
    position: relative;
    z-index: 1;
    font-size: 0.95rem;
    line-height: 1.35;
  }

  #tool-gif-mp4 .phase-node--blue {
    --phase-color: #00f7ff;
  }

  #tool-gif-mp4 .phase-node--purple {
    --phase-color: #b967ff;
  }

  #tool-gif-mp4 .phase-node--green {
    --phase-color: #00ff88;
  }

  #tool-gif-mp4 .phase-node--orange {
    --phase-color: #ff6600;
  }

  #tool-gif-mp4 .phase-node--blue .phase-node__glow {
    background: radial-gradient(circle, rgba(0, 247, 255, 0.9), transparent 70%);
  }

  #tool-gif-mp4 .phase-node--purple .phase-node__glow {
    background: radial-gradient(circle, rgba(185, 103, 255, 0.95), transparent 70%);
  }

  #tool-gif-mp4 .phase-node--green .phase-node__glow {
    background: radial-gradient(circle, rgba(0, 255, 136, 0.9), transparent 70%);
  }

  #tool-gif-mp4 .phase-node--orange .phase-node__glow {
    background: radial-gradient(circle, rgba(255, 102, 0, 0.95), transparent 70%);
  }

  #tool-gif-mp4 .phase-dropzone {
    border: 1px dashed rgba(255, 255, 255, 0.28);
    border-radius: 22px;
    padding: 1.25rem;
    text-align: center;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 14, 30, 0.65);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
  }

  #tool-gif-mp4 .phase-dropzone__inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  #tool-gif-mp4 .phase-dropzone__inner p {
    margin: 0;
  }

  #tool-gif-mp4 .phase-dropzone__hint {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(229, 239, 255, 0.92);
  }

  #tool-gif-mp4 .phase-dropzone.drag-active {
    transform: translateY(-2px) scale(1.01);
  }

  #tool-gif-mp4 .blue-glow {
    box-shadow: inset 0 0 25px rgba(0, 247, 255, 0.35);
    border-color: rgba(0, 247, 255, 0.65);
  }

  #tool-gif-mp4 .purple-glow {
    box-shadow: inset 0 0 25px rgba(185, 103, 255, 0.35);
    border-color: rgba(185, 103, 255, 0.65);
  }

  #tool-gif-mp4 .phase-readout {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  #tool-gif-mp4 .phase-readout p {
    margin: 0;
  }

  #tool-gif-mp4 .file-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  #tool-gif-mp4 .audio-wave {
    display: flex;
    gap: 0.4rem;
    align-items: flex-end;
    height: 48px;
  }

  #tool-gif-mp4 .audio-wave__bar {
    flex: 1;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(185, 103, 255, 0.95), rgba(66, 21, 86, 0));
    animation: wavePulse 1.2s ease-in-out infinite;
  }

  #tool-gif-mp4 .audio-wave__bar:nth-child(2) {
    animation-delay: 0.2s;
  }

  #tool-gif-mp4 .audio-wave__bar:nth-child(3) {
    animation-delay: 0.35s;
  }

  #tool-gif-mp4 .audio-wave__bar:nth-child(4) {
    animation-delay: 0.5s;
  }

  #tool-gif-mp4 .phase-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #tool-gif-mp4 .phase-actions p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
  }

  #tool-gif-mp4 .volume-track {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
  }

  #tool-gif-mp4 .volume-track__readout {
    font-weight: 600;
  }

  #tool-gif-mp4 .timeline-visual {
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 18px;
    padding: 1rem;
    min-height: 140px;
  }

  #tool-gif-mp4 .phase-divider {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    margin: 2rem 0;
    overflow: hidden;
  }

  #tool-gif-mp4 .phase-link {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #00f7ff, #b967ff, #00ff88, #ff6600);
    background-size: 300% 100%;
    animation: connectionFlow 5s linear infinite;
  }

  #tool-gif-mp4 .phase-create-btn {
    font-size: 1.15rem;
    padding: 1.5rem;
    width: 100%;
    justify-content: center;
  }

  #tool-gif-mp4 .advanced-toggle {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: #fff;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }

  #tool-gif-mp4 .advanced-toggle:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
  }

  #tool-gif-mp4 .advanced-panel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    padding: 1.5rem;
    background: rgba(6, 14, 30, 0.92);
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.65);
    margin-top: 1.5rem;
    animation: slideDown 0.35s ease;
  }

  #tool-gif-mp4 .advanced-panel__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
  }

  #tool-gif-mp4 .advanced-panel__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
  }

  #tool-gif-mp4 .advanced-panel__header h4 {
    margin: 0.1rem 0 0;
  }

  #tool-gif-mp4 .advanced-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
    cursor: pointer;
  }

  #tool-gif-mp4 .advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
  }

  #tool-gif-mp4 .advanced-audio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
  }

  #tool-gif-mp4 .flow-status {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #tool-gif-mp4 .phase-card[data-phase-state="locked"] .phase-dropzone,
  #tool-gif-mp4 .phase-card[data-phase-state="locked"] .phase-node {
    opacity: 0.6;
  }

  #tool-gif-mp4 .phase-card[data-phase-state="locked"] .phase-node__glow {
    opacity: 0.35;
  }

  #tool-gif-mp4 .phase-card[data-phase-state="active"] .phase-node__glow {
    animation-duration: 2.2s;
  }

  #tool-gif-mp4 .phase-card[data-phase-state="complete"] .phase-node__glow {
    animation-duration: 4s;
  }

  #tool-gif-mp4 .phase-card[data-phase-state="complete"] .phase-readout {
    color: rgba(0, 255, 136, 0.95);
  }

  #tool-gif-mp4 .phase-card ul.file-list::after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  }

  #tool-gif-mp4 .phase-card ul.file-list:empty::after {
    display: none;
  }

  #tool-gif-mp4 .phase-card .btn-text {
    font-size: 0.85rem;
  }

  @keyframes wavePulse {
    0% {
      height: 20%;
      opacity: 0.45;
    }

    50% {
      height: 100%;
      opacity: 1;
    }

    100% {
      height: 35%;
      opacity: 0.6;
    }
  }

  @keyframes phaseGlow {
    from {
      transform: scale(0.95);
      opacity: 0.7;
    }

    to {
      transform: scale(1.05);
      opacity: 1;
    }
  }

  @keyframes connectionFlow {
    0% {
      background-position: 0% 50%;
    }

    100% {
      background-position: 200% 50%;
    }
  }

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

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

  #tool-pdf-split-merge .tool-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  #tool-pdf-split-merge .tool-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #tool-pdf-split-merge .inline-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
  }

  #tool-pdf-split-merge .small-list {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.8rem;
    max-height: 120px;
    overflow: auto;
    color: var(--fg-2);
  }

  #tool-pdf-split-merge .tool-divider {
    border: none;
    border-top: 1px solid var(--stroke-2);
    margin: 0.5rem 0;
  }

  #tool-pdf-split-merge .tool-status {
    min-height: 1.25rem;
    font-size: 0.85rem;
    color: var(--muted);
  }

  #tool-pdf-split-merge input[type="text"] {
    border-radius: 10px;
    border: 1px solid var(--stroke-2);
    background: rgba(10, 18, 36, .72);
    color: var(--fg);
    padding: 0.55rem 0.75rem;
  }

  .short-maker {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
  }

  .short-maker__group {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-3);
    padding: 14px;
    background: rgba(9, 15, 29, .78);
  }

  .short-maker__group-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
  }

  .short-maker__group-title {
    margin: 0;
    font-weight: 600;
    font-size: 1.05rem;
  }

  .short-maker__picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .short-maker__duration-default {
    margin-left: auto;
    min-width: 200px;
  }

  .short-maker__duration-default input {
    width: 100%;
  }

  .short-maker__list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .short-maker__empty {
    padding: 14px;
    text-align: center;
    border-radius: var(--radius-2);
    border: 1px dashed var(--stroke-2);
    color: var(--muted);
    font-size: 0.9rem;
  }

  .short-maker__item {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: var(--radius-2);
    background: rgba(17, 28, 52, .65);
    border: 1px solid rgba(123, 195, 255, .2);
  }

  .short-maker__item-main {
    flex: 1 1 220px;
  }

  .short-maker__file-name {
    margin: 0;
    font-weight: 600;
    font-size: 0.98rem;
  }

  .short-maker__file-meta {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--muted);
  }

  .short-maker__item-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .short-maker__duration-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
  }

  .short-maker__duration-field input {
    min-width: 120px;
  }

  .short-maker__item-btns {
    display: flex;
    gap: 4px;
  }

  .short-maker__file-label {
    margin: 8px 0 0;
  }

  .short-maker__timing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 12px;
  }

  .short-maker__quality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }

  .short-maker__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .short-maker__progress,
  .short-maker__download {
    margin-top: 8px;
  }

  .short-maker__file-label--active {
    color: var(--fg);
    font-weight: 600;
  }

  @media (max-width: 720px) {
    .short-maker__duration-default {
      width: 100%;
      margin-left: 0;
    }

    .short-maker__actions {
      flex-direction: column;
      align-items: stretch;
    }

    .short-maker__item {
      flex-direction: column;
    }
  }

  /* Row helpers */
  .row {
    display: flex;
    align-items: center;
  }

  .row.gap {
    gap: 10px;
  }

  /* ---------- Format grid ---------- */
  .format-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .format {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--chip-bg);
    border: 1px solid var(--stroke-2);
    color: var(--fg-2);
    font-weight: 800;
    letter-spacing: .2px;
    transition: transform .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease;
  }

  .format:hover {
    transform: translateY(-1px);
    color: var(--fg);
    border-color: var(--prim);
    box-shadow: 0 8px 20px rgba(94, 195, 255, .18);
  }

  .format.is-active {
    color: #061222;
    background: linear-gradient(180deg, #7bffef, #5ec3ff);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 10px 28px rgba(123, 255, 239, .28);
  }

  /* ---------- Template area (controls) ---------- */
  .template .field {
    margin-bottom: 12px;
  }

  .template label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .template input[type="number"],
  .template input[type="range"],
  .template select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
    color: var(--fg);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .template input:focus,
  .template select:focus {
    border-color: var(--prim);
    box-shadow: var(--focus);
  }

  .template .hint {
    color: var(--muted);
    font-size: 12.8px;
    margin-top: 4px;
  }

  .template .value {
    color: var(--fg-2);
    font-weight: 700;
    margin-top: 4px;
  }

  /* ---------- Files list ---------- */
  .files {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .file {
    display: grid;
    grid-template-columns: minmax(64px, 84px) 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  }

  .file__ext {
    font-weight: 900;
    color: #061222;
    background: linear-gradient(180deg, #7bffef, #5ec3ff);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(94, 195, 255, .25);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .file .chip {
    padding: 8px 10px;
  }

  @media (max-width: 640px) {
    .file {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
      text-align: left;
    }

    .file>* {
      width: 100%;
    }

    .file__ext {
      justify-self: flex-start;
      margin-bottom: 6px;
    }
  }

  /* ---------- Actions & progress ---------- */
  .actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .actions .btn {
    flex: 1 1 180px;
  }

  .progress {
    margin-top: 10px;
  }

  .progress__bar {
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    border: 1px solid var(--stroke);
  }

  .progress__bar>span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #7bffef, #5ec3ff 45%, #2ca3ff);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, .35);
    width: 0%;
    transition: width .2s ease;
  }

  .progress__txt {
    font-weight: 700;
    color: var(--fg-2);
    margin-top: 6px;
  }

  .progress--gifmp4 {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(11, 15, 28, .65);
  }

  .progress--gifmp4 .progress__bar {
    height: 12px;
    border-color: rgba(94, 195, 255, .4);
    background: rgba(255, 255, 255, .05);
  }

  .progress--gifmp4 .progress__bar>span {
    background: linear-gradient(90deg, #7efff5, #5ec3ff 45%, #2ca3ff, #ff86f3);
    box-shadow: 0 0 18px rgba(94, 195, 255, .45);
  }

  .progress--gifmp4 .progress__txt {
    font-size: 0.9rem;
    letter-spacing: .35px;
    color: #e0f6ff;
    text-transform: uppercase;
  }

  .quick-output {
    margin-top: 12px;
    min-height: 20px;
    font-weight: 650;
    color: var(--fg);
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  }

  .action-cancel {
    margin-top: 12px;
  }

  .conversion-card {
    margin-top: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-3);
    padding: 14px;
    background: rgba(10, 16, 28, .55);
    backdrop-filter: blur(12px);
  }

  .conversion-card h3 {
    margin: 0 0 10px;
    font-size: 15px;
    letter-spacing: .2px;
    color: var(--fg);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .conversion-card h3::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--prim);
    box-shadow: 0 0 0 3px rgba(94, 195, 255, .18);
    flex: 0 0 auto;
  }

  .conversion-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .conversion-btn {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
    color: var(--fg);
    font-weight: 600;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
    position: relative;
    overflow: hidden;
  }

  .conversion-btn::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: var(--conv-accent, var(--stroke-2));
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
  }

  .conversion-btn {
    padding-left: 34px;
  }

  .conversion-btn[data-kind="image"] {
    --conv-accent: var(--prim);
  }

  .conversion-btn[data-kind="audio"] {
    --conv-accent: var(--accent);
  }

  .conversion-btn[data-kind="video"] {
    --conv-accent: var(--prim-2);
  }

  .conversion-btn[data-kind="pdf"] {
    --conv-accent: var(--warn);
  }

  .conversion-btn strong {
    font-size: 14px;
    letter-spacing: .2px;
  }

  .conversion-btn span {
    font-size: 12px;
    color: var(--fg-2);
    opacity: .9;
  }

  .conversion-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    border-style: dashed;
  }

  .conversion-btn:not(:disabled):hover {
    transform: translateY(-1px);
    border-color: var(--prim);
    background: linear-gradient(135deg, rgba(123, 255, 239, .18), rgba(94, 195, 255, .08));
  }

  .ad-block {
    margin: 32px 0;
    padding: 0;
    text-align: center;
    border-radius: 18px;
    border: 1px solid var(--stroke-2);
    background: rgba(255, 255, 255, .02);
    box-shadow: var(--shadow-sm);
  }

  .ad-block[hidden] {
    display: none !important;
  }

  .ad-block ins {
    display: block;
    min-height: 90px;
  }

  .ads-disabled .ad-block {
    display: none !important;
  }

  .tool-card {
    padding: 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(6px);
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
    box-shadow: var(--shadow-sm);
  }

  .tool-card--stub {
    border-style: dashed;
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .015);
  }

  .tool-card header h3 {
    margin: 0 0 8px;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
    line-height: 1.3;
    word-break: break-word;
  }

  .tool-card-header,
  .tool-card__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--gap-2);
  }

  /* Restore tool card header/title/subtitle visibility */
  .tool-card-header,
  .tool-card-header * {
    min-height: 28px !important;
    height: auto !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .tool-card-header .card-title,
  .tool-card__header h2,
  .tool-card__header h3 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--fg);
    word-break: break-word;
  }

  .tool-card-title,
  .tool-card-header .tool-card-title,
  .tool-title,
  .tool-card h2,
  .tool-card h3 {
    display: block !important;
    color: var(--text, #ffffff) !important;
    -webkit-text-fill-color: unset !important;
    font-size: 1.02rem !important;
    line-height: 1.2 !important;
    max-height: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-indent: 0 !important;
    text-overflow: clip !important;
    z-index: 3 !important;
  }

  .tool-card-header .card-subtitle,
  .tool-card__subtitle,
  .tool-card-subtitle,
  .tool-subtitle,
  .tool-card .subtitle {
    display: block !important;
    color: var(--muted-text, rgba(255, 255, 255, 0.72)) !important;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
  }

  .tool-card .tool-row,
  .tool-card-header {
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 8px !important;
  }

  .tool-card-body,
  .tool-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    flex: 1;
  }

  .download-slot {
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(9, 12, 22, .7);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }

  /* Larger result boxes across tools (exclude the compact hero slot) */
  .tool-page .download-slot:not(.download-slot--hero) {
    min-height: 240px;
  }

  /* Output textareas used by some tools (QR decode, SSL check, etc.) */
  .tool-page textarea[readonly]:not(.code-editor-area) {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
    background: rgba(255, 255, 255, .04);
    color: var(--fg);
    padding: 12px 12px;
    line-height: 1.35;
    resize: vertical;
    min-height: 220px;
  }

  .download-slot__label {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: var(--muted);
  }

  .download-slot--active {
    border-color: rgba(255, 255, 255, .35);
    background: linear-gradient(135deg, rgba(14, 18, 32, .9), rgba(18, 24, 44, .9));
    box-shadow: 0 18px 35px rgba(0, 0, 0, .55);
  }

  .download-slot--ready {
    border-color: rgba(93, 255, 201, .8);
    box-shadow: 0 18px 40px rgba(20, 159, 120, .4);
  }

  .download-slot--active .download-slot__label {
    display: none;
  }

  .download-ready {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, .15);
  }

  .download-slot--ready .download-ready {
    border-bottom-color: rgba(93, 255, 201, .5);
  }

  .download-ready__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fg);
  }

  .download-ready__copy {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
  }

  .download-ready__file {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.8rem;
    color: var(--muted);
  }

  .download-ready__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg);
  }

  .download-ready__meta {
    font-size: 0.78rem;
    color: var(--muted);
  }

  .download-slot .btn {
    inline-size: 100%;
  }

  .download-slot--hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .download-slot--hero .download-slot__label {
    margin: 0;
    flex: 1;
    min-width: 0;
  }

  .download-slot--hero .btn {
    inline-size: auto;
    min-inline-size: 0;
    flex: 0 0 auto;
    --btn-padding: 0.55rem 1.05rem;
    font-size: 0.95rem;
    min-height: 38px;
    letter-spacing: 0.01em;
  }

  @media (max-width: 640px) {
    .download-slot--hero {
      flex-direction: column;
      align-items: stretch;
    }

    .download-slot--hero .btn {
      inline-size: 100%;
      min-inline-size: 0;
    }
  }

  .hero .download-slot {
    margin-top: 18px;
  }

  .tool-card .row,
  .tool-row {
    display: flex;
    gap: var(--gap-2);
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .tool-card .row label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 180px;
  }

  .tool-field {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .tool-field .tool-label {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .tool-label {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--fg);
    letter-spacing: .1px;
  }

  .tool-card .row input,
  .tool-card .row select,
  .tool-row input,
  .tool-row select {
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
    padding: 10px 12px;
    background: rgba(255, 255, 255, .04);
    color: var(--fg);
  }

  .filepick {
    --filebtn-text: "Choose file";
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    inline-size: min(320px, 100%);
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--file-border);
    background: var(--file-chip-bg);
    color: var(--file-text);
    font-weight: 600;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .filepick input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .filepick::before {
    content: var(--filebtn-text, "Choose file");
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 12px;
    color: var(--cc-cta-fg);
    background: var(--cc-cta-gradient);
    box-shadow: var(--cc-cta-shadow);
  }

  .filepick::after {
    content: attr(data-file);
    color: var(--file-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 55%;
  }

  .filepick:focus-within {
    border-color: var(--file-ring);
    box-shadow: 0 0 0 2px var(--file-ring);
  }

  .filepick[data-file=""],
  .filepick[data-file][data-file*="No file"] {
    color: var(--file-text);
  }


  /* Modern upload control for the local image converter */
  .imgc-upload {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
    border: 1px dashed var(--stroke-2);
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .imgc-upload:focus-within {
    border-color: var(--prim);
    box-shadow: 0 0 0 3px rgba(94, 195, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
    background: rgba(94, 195, 255, .06);
  }

  .imgc-upload__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.95rem 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--cc-cta-border);
    background: var(--cc-cta-gradient);
    color: var(--cc-cta-fg);
    font-weight: 800;
    letter-spacing: .18px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--cc-cta-shadow);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    user-select: none;
  }

  .imgc-upload__cta:hover {
    filter: saturate(1.05);
    transform: translateY(-1px);
  }

  .imgc-upload__cta:active {
    transform: translateY(0);
    box-shadow: 0 10px 22px rgba(94, 195, 255, .25) inset;
  }

  .imgc-upload__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
    color: #0b1a2f;
    font-weight: 900;
    font-size: 0.8rem;
    box-shadow: 0 8px 18px rgba(255, 255, 255, .3);
  }

  .imgc-upload__hint {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .imgc-upload__summary {
    font-weight: 700;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
  }

  .imgc-upload__note {
    font-size: 0.85rem;
    color: var(--muted);
    letter-spacing: .05em;
  }

  @media (max-width:640px) {
    .imgc-upload {
      flex-direction: column;
      align-items: flex-start;
    }

    .imgc-upload__summary {
      max-width: 100%;
    }
  }

  .tool-row input[type="range"],
  .tool-field input[type="range"] {
    padding: 0;
  }

  .tool-card .primary {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--prim);
    background: linear-gradient(135deg, rgba(123, 255, 239, .24), rgba(94, 195, 255, .12));
    color: var(--fg);
    cursor: pointer;
    flex: 0 0 auto;
    height: fit-content;
  }

  #pdf-to-images-status {
    min-height: 18px;
    margin-top: 8px;
  }

  #tool-video-trim input[type="text"] {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }

  #tool-video-frames input[type="number"] {
    max-width: 160px;
  }

  /* Images→PDF & PDF→Text small adjustments */
  #tool-img-to-pdf input[type="number"],
  #tool-img-to-pdf select,
  #tool-img-to-pdf input[type="file"] {
    max-width: 320px;
  }

  #tool-img-to-pdf .tool-field {
    min-width: 160px;
  }

  #tool-pdf-to-text input[type="text"],
  #tool-pdf-to-text input[type="file"] {
    max-width: 420px;
  }

  /* PDF → Images (client) picker */
  #tool-pdf-images-client .field__label {
    margin: 0 0 6px;
    font-weight: 600;
  }

  #tool-pdf-images-client .file-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* PDF client file trigger (label styled as button) */
  .pc-file-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }

  .pc-file-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, #5ec3ff, #3a8fd9);
    color: #0b1728;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: filter .15s ease;
  }

  .pc-file-btn:hover {
    filter: brightness(1.08);
  }

  .pc-file-name {
    color: var(--muted);
    font-size: 0.92rem;
  }

  #pc-input-real,
  #tool-pdf-images-client #pc-input-real,
  input#pc-input-real[type="file"] {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  #tool-pdf-images-client #pc-file-label {
    color: var(--muted);
    font-size: 0.95rem;
  }

  /* Ensure the idle download button stays hidden until a file is ready */
  #pc-download[hidden] {
    display: none !important;
  }

  .tool-row--inline {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .tool-row--inline>button,
  .tool-row--inline>.btn,
  .tool-row--inline>.primary {
    margin-left: 0;
    flex: 1 1 160px;
  }

  .tool-field {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .tool-field input,
  .tool-field select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
    background: rgba(255, 255, 255, .04);
    color: var(--fg);
    padding: 10px 12px;
  }

  .tool-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2l5 4 5-4' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
  }

  .tool-field select option,
  .tool-row select option {
    background: var(--bg-elev);
    color: var(--fg);
  }

  /* Crypto tools — larger/nicer input + output boxes */
  .tool-page[data-tool-slug^="crypto-"] .tool-field textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
    background: rgba(255, 255, 255, .04);
    color: var(--fg);
    padding: 12px 12px;
    line-height: 1.35;
    resize: vertical;
    min-height: 140px;
  }

  /* Results boxes in crypto tools must not shrink (tool-row is flex). */
  .tool-page[data-tool-slug^="crypto-"] .tool-row .download-slot {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }

  .tool-page[data-tool-slug="crypto-mnemonic-keystore-validator"] #ct-mk-mnemonic {
    min-height: 170px;
  }

  .tool-page[data-tool-slug="crypto-tx-formatter"] #ct-tx-input {
    min-height: 190px;
  }

  .tool-page[data-tool-slug^="crypto-"] .download-slot pre[id^="ct-"] {
    display: block;
    margin: 0;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
    background: rgba(255, 255, 255, .04);
    color: var(--fg);
    min-height: 190px;
    overflow: auto;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
  }

  .tool-page[data-tool-slug="crypto-mnemonic-keystore-validator"] .download-slot pre#ct-mk-out {
    min-height: 240px;
  }

  .tool-page[data-tool-slug="crypto-tx-formatter"] .download-slot pre#ct-tx-out {
    min-height: 240px;
  }

  /* Tool buttons — match the upload CTA everywhere (except the media combo tool)
     Only for primary buttons (ghost buttons keep their ghost style). */
  .tool-page:not(#tool-gif-mp4) .tool-card .btn:not(.btn--ghost),
  .tool-page:not(#tool-gif-mp4) .tool-card .btn-primary:not(.btn--ghost),
  .tool-page:not(#tool-gif-mp4) .tool-card .download-btn:not(.btn--ghost) {
    --btn-radius: 16px;
    --btn-padding: 0.95rem 1.5rem;
    --btn-letter: 0.18px;
    --btn-case: uppercase;
    --btn-bg: var(--cc-cta-gradient);
    --btn-fg: var(--cc-cta-fg);
    --btn-shadow: var(--cc-cta-shadow);
    border: 1px solid var(--cc-cta-border);
    text-shadow: none;
  }

  .tool-page:not(#tool-gif-mp4) .tool-card .btn:not(:disabled):hover,
  .tool-page:not(#tool-gif-mp4) .tool-card .btn-primary:not(:disabled):hover,
  .tool-page:not(#tool-gif-mp4) .tool-card .download-btn:not(:disabled):hover,
  .tool-page:not(#tool-gif-mp4) .tool-card .btn:not(:disabled):focus-visible,
  .tool-page:not(#tool-gif-mp4) .tool-card .btn-primary:not(:disabled):focus-visible,
  .tool-page:not(#tool-gif-mp4) .tool-card .download-btn:not(:disabled):focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(94, 195, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
  }

  .tool-page:not(#tool-gif-mp4) .tool-card .btn:disabled,
  .tool-page:not(#tool-gif-mp4) .tool-card .btn-primary:disabled,
  .tool-page:not(#tool-gif-mp4) .tool-card .download-btn:disabled {
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
  }

  .tool-field.is-disabled {
    opacity: .55;
  }

  .tool-field.is-disabled select {
    pointer-events: none;
  }

  .tool-range {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .tool-subtitle {
    margin: 0 0 12px;
    color: var(--fg-2);
    font-size: 0.98rem;
    line-height: 1.5;
  }

  #tool-image-batch-resize .tool-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  #tool-image-batch-resize .tool-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
  }

  #tool-image-batch-resize .file-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px dashed var(--stroke-2);
    background: rgba(255, 255, 255, .04);
    color: var(--fg);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: border-color .2s ease, background .2s ease;
  }

  #tool-image-batch-resize .file-input:hover {
    border-color: var(--prim);
    background: rgba(123, 255, 239, .08);
  }

  #tool-image-batch-resize .file-input input {
    display: none;
  }

  #tool-image-batch-resize .inline-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.95rem;
  }

  #tool-image-batch-resize select,
  #tool-image-batch-resize input[type="number"],
  #tool-image-batch-resize input[type="range"] {
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
    padding: 10px 12px;
    background: rgba(255, 255, 255, .04);
    color: var(--fg);
    font-family: inherit;
    font-size: 0.95rem;
  }

  #tool-image-batch-resize input[type="range"] {
    accent-color: var(--prim);
    padding: 0;
  }

  #tool-image-batch-resize small {
    font-size: 0.85rem;
    color: var(--fg-2);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
  }

  .tool-status {
    min-height: 20px;
    font-size: 0.92rem;
    color: var(--fg-2);
  }

  #tool-gif-mp4 .tool-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #tool-gif-mp4 .file-input {
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 0.35rem;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
  }

  /* PDF → Images upload trigger */
  #tool-pdf-to-images input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  #tool-pdf-to-images .file-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 1.4rem;
    border-radius: 14px;
    background: linear-gradient(120deg, #8b7bff, #5ec3ff 55%, #2ca3ff);
    color: #0b1728;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .25px;
    box-shadow: 0 12px 26px rgba(94, 195, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .42);
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
  }

  #tool-pdf-to-images .file-trigger:hover {
    filter: saturate(1.05);
    transform: translateY(-1px);
  }

  #tool-pdf-to-images .file-trigger:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(94, 195, 255, .24) inset;
  }

  #tool-gif-mp4 .file-input input {
    display: none;
  }

  /* Keep the raw input offscreen so only the styled trigger shows */
  #gifMp4Input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  #tool-gif-mp4 .file-input span {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.8rem;
    border-radius: 16px;
    background: linear-gradient(120deg, #8b7bff, #5ec3ff 55%, #2ca3ff);
    color: #051120;
    font-weight: 700;
    letter-spacing: .25px;
    box-shadow: 0 14px 32px rgba(94, 195, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .42);
    text-align: center;
    transition: transform .15s ease, filter .15s ease;
  }

  #tool-gif-mp4 .file-input:hover span {
    filter: saturate(1.1);
    transform: translateY(-1px);
  }

  #tool-gif-mp4 .file-input:active span {
    transform: translateY(0);
    box-shadow: 0 8px 20px rgba(94, 195, 255, .28) inset;
  }

  #tool-gif-mp4 .inline-label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
  }

  #tool-gif-mp4 select,
  #tool-gif-mp4 input[type="number"] {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    color: var(--fg);
    padding: 0.6rem 0.9rem;
    font-weight: 600;
    letter-spacing: .15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  }

  #tool-gif-mp4 select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2l5 4 5-4' stroke='%23e9f5ff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 2.5rem;
  }

  #tool-gif-mp4 select option {
    background: #0a1324;
    color: #f4fbff;
  }

  #tool-gif-mp4 select option:checked {
    background: #15263f;
  }

  #tool-gif-mp4 input[type="number"] {
    max-width: none;
  }

  #tool-gif-mp4 select:focus,
  #tool-gif-mp4 input[type="number"]:focus {
    outline: none;
    border-color: #7efff5;
    box-shadow: 0 0 0 2px rgba(126, 255, 245, .35);
  }

  #tool-gif-mp4 .download-slot button {
    width: 100%;
    border-radius: 16px;
    padding: 0.85rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, .18);
    background: linear-gradient(120deg, #161f38, #0c1528 45%, #0a111f);
    color: #e5efff;
    font-weight: 700;
    letter-spacing: .2px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }

  #tool-gif-mp4 .download-slot button:not([hidden]):hover {
    transform: translateY(-1px);
    border-color: #5ec3ff;
    box-shadow: 0 14px 30px rgba(94, 195, 255, .25);
  }

  #tool-gif-mp4 .download-slot button:not([hidden]):active {
    transform: translateY(0);
    box-shadow: inset 0 6px 20px rgba(94, 195, 255, .2);
  }

  #tool-gif-mp4 .tool-log {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, .02);
    color: var(--fg-2);
    font-size: 0.85rem;
  }

  #tool-gif-mp4 .tool-log summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--fg);
  }

  #tool-gif-mp4 .tool-log pre {
    margin: 0.5rem 0 0;
    max-height: 180px;
    overflow: auto;
    background: rgba(5, 10, 25, .65);
    border-radius: 8px;
    padding: 0.65rem;
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--fg-2);
    border: 1px solid rgba(255, 255, 255, .08);
  }

  #tool-gif-mp4 .tool-log__hint {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
  }

  #tool-epub .tool-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #tool-epub .epub-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
  }

  #tool-epub .epub-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 120px;
    width: 100%;
    min-width: 120px;
    min-height: 160px;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, .03);
    border: 1px dashed rgba(255, 255, 255, .08);
    color: var(--fg-2);
    text-align: center;
    font-size: 0.85rem;
  }

  #tool-epub .epub-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
  }

  #tool-epub .epub-meta {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    font-size: 0.9rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    min-width: 220px;
    color: var(--fg-2);
  }

  #tool-epub .epub-meta dt {
    font-weight: 600;
    color: var(--fg);
  }

  #tool-epub .epub-meta dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
  }

  #tool-epub .epub-chapters__list {
    max-height: 220px;
    overflow: auto;
    padding-left: 1.25rem;
    margin: 0;
    display: grid;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--fg-2);
  }

  #tool-epub .epub-chapters__list li {
    line-height: 1.35;
  }

  @media (max-width: 720px) {
    #tool-epub .epub-preview {
      flex-direction: column;
    }

    #tool-epub .epub-cover {
      max-width: 160px;
    }
  }

  .epub-file-button {
    position: relative;
    overflow: hidden;
  }

  .epub-file-button .epub-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .epub-file-meta {
    font-size: 0.9rem;
    color: var(--fg-2);
    min-width: 180px;
  }

  .epub-preview {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 18px;
    border: 1px solid var(--stroke-2);
    border-radius: var(--radius-3);
    background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(12, 18, 30, .28));
    padding: 18px;
  }

  @media (max-width: 920px) {
    .epub-preview {
      grid-template-columns: 1fr;
    }
  }

  .epub-cover {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-3);
    background:
      linear-gradient(140deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01)),
      var(--panel-2);
    color: var(--fg-2);
    font-weight: 600;
    text-align: center;
    padding: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  }

  .epub-cover img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-sm);
  }

  .epub-preview-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .epub-meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .epub-meta-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
    margin-bottom: 4px;
  }

  .epub-meta-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg);
    word-break: break-word;
  }

  .epub-chapters {
    border: 1px solid var(--stroke-2);
    border-radius: var(--radius-3);
    background: linear-gradient(160deg, rgba(12, 18, 28, .75), rgba(6, 10, 20, .55));
    padding: 18px;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .epub-chapters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .epub-chapter-count {
    font-size: 0.85rem;
    color: var(--fg-2);
  }

  .epub-chapters__list {
    margin: 0;
    padding-left: 18px;
    list-style: decimal;
    overflow: auto;
    flex: 1 1 auto;
    display: grid;
    gap: 6px;
    font-size: 0.92rem;
    color: var(--fg-2);
  }

  .epub-chapters__list li {
    line-height: 1.4;
  }

  .epub-actions {
    gap: 12px;
  }

  @media (max-width: 640px) {
    .epub-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .epub-actions .btn {
      width: 100%;
    }
  }

  .url-import {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .url-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .url-row input {
    flex: 1 1 240px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke-2);
    background: rgba(255, 255, 255, .04);
    color: var(--fg);
  }

  .url-rights {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .url-rights input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: #5ab3ff;
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid #5ab3ff;
    border-radius: 4px;
    background: #0b1627;
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  }

  .url-rights input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(139, 255, 240, .6);
    outline-offset: 2px;
  }

  .url-status {
    font-size: 13px;
    color: var(--fg-2);
    min-height: 18px;
  }

  .url-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* ---------- Results grid ---------- */
  .result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  @media (max-width: 900px) {
    .result-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- Footer ---------- */
  .foot {
    margin: 40px auto;
    text-align: center;
    color: var(--muted);
  }

  .alpha-notice {
    margin: 14px auto 0;
    max-width: 560px;
    font-size: 0.82rem;
    color: var(--fg-2);
    line-height: 1.5;
  }

  .alpha-notice a {
    color: var(--prim);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .alpha-notice a:hover {
    color: var(--prim-2);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.8;
    vertical-align: middle;
    border: 1px solid transparent;
  }

  .chip--pro {
    background: rgba(122, 44, 240, 0.12);
    border-color: rgba(122, 44, 240, 0.25);
    color: #7a2cf0;
    margin-left: 8px;
  }

  .cc-watermark {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: clamp(52px, 11vw, 140px);
    font-weight: 900;
    letter-spacing: .5rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .085);
    pointer-events: none;
    mix-blend-mode: normal;
    z-index: 0;
    transform-origin: center;
    transform: rotate(-18deg) translate3d(0, 7vh, 0);
    text-shadow: 0 18px 70px rgba(0, 0, 0, .6);
    filter: blur(0.15px);
    opacity: .19;
  }

  .cc-watermark::before {
    content: "⚡";
    margin-right: 16px;
    font-size: .5em;
    color: rgba(94, 195, 255, .25);
  }

  @keyframes watermarkPulse {
    0% {
      opacity: .12;
    }

    50% {
      opacity: .05;
    }

    100% {
      opacity: .12;
    }
  }

  /* ---------- Unified Panel System ---------- */
  .unified-panel {
    position: relative;
    padding: 28px;
    margin: 24px 0;
    border-radius: var(--radius-4);
    background: linear-gradient(145deg, rgba(94, 195, 255, .10), rgba(10, 16, 33, .65) 24%, rgba(14, 20, 42, .7) 70%);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow-lg);
    overflow: visible;
  }

  @media (max-width: 768px) {
    .unified-panel {
      padding: 20px;
      margin: 16px 0;
    }
  }

  .unified-panel::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
      radial-gradient(600px 180px at 20% 0%, rgba(94, 195, 255, .20), transparent 60%),
      radial-gradient(500px 150px at 80% 10%, rgba(123, 255, 239, .14), transparent 60%);
    filter: blur(10px);
    pointer-events: none;
  }

  .unified-panel-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .unified-panel-header h2 {
    margin: 0;
    font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.9rem);
    font-weight: 800;
  }

  .unified-panel-content {
    position: relative;
  }

  .panel-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--stroke-2);
    background: var(--chip-bg);
    color: var(--fg);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .panel-toggle-btn:hover {
    transform: translateY(-1px);
    border-color: var(--prim);
    box-shadow: 0 6px 16px rgba(94, 195, 255, .18);
  }

  .panel-toggle-btn .toggle-icon {
    transition: transform .2s ease;
  }

  .panel-toggle-btn[aria-expanded=\"true\"] .toggle-icon {
    transform: rotate(180deg);
  }

  /* Tool workspace layout is handled by .tool-layout class above */

  /* Tools Panel Grid */
  .tools-grid {
    display: grid;
    gap: 24px;
  }

  .tool-category {
    position: relative;
  }

  .tool-category-heading {
    margin: 0 0 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--prim);
  }

  .tool-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
  }

  @media (max-width: 768px) {
    .tool-buttons {
      grid-template-columns: 1fr;
    }
  }

  .tool-card-btn {
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid var(--stroke-2);
    background: var(--chip-bg);
    color: var(--fg);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    text-align: left;
  }

  .tool-card-btn:hover {
    transform: translateY(-2px);
    border-color: var(--prim);
    background: rgba(21, 35, 66, .95);
    box-shadow: 0 8px 20px rgba(94, 195, 255, .2);
  }

  .tool-card-btn:active {
    transform: translateY(0);
  }

  .alpha-performance {
    line-height: 1.55;
  }

  .alpha-performance h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.9rem);
    font-weight: 800;
  }

  .alpha-performance p {
    margin-bottom: .75rem;
    color: var(--fg-2);
  }

  .why-convertcraft {
    /* Styling from unified-panel class */
  }

  .why-convertcraft h2 {
    margin-top: 0;
    font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.9rem);
    font-weight: 800;
  }

  .why-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  @media (min-width: 900px) {
    .why-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .why-card {
    border-radius: 22px;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    min-height: 180px;
  }

  .why-card h3 {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
  }

  .why-card p {
    margin: 0;
    color: var(--fg-2);
    line-height: 1.5;
  }

  /* ---------- Language popover ---------- */
  .lang-popover,
  .lang-menu {
    padding: 10px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid var(--stroke-2);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .lang-sidebar .lang-menu {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    min-width: unset;
  }

  .lang-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
  }

  .lang-row .flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 14px;
  }

  .lang-row .flag img {
    width: 20px;
    height: 14px;
    display: block;
  }

  .lang-row__labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .lang-row__native {
    font-weight: 600;
    color: var(--fg);
  }

  .lang-row__name {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .lang-row:hover {
    background: rgba(255, 255, 255, .06);
  }

  .lang-row .lang-check {
    opacity: 0;
    font-weight: 700;
    color: var(--prim);
  }

  .lang-row.is-active {
    background: rgba(123, 255, 239, .12);
    border: 1px solid rgba(123, 255, 239, .35);
  }

  .lang-row.is-active .lang-check {
    opacity: 1;
  }

  .language-flag {
    width: 20px;
    height: 14px;
    display: block;
    object-fit: cover;
  }

  /* ---------- Utility ---------- */
  .muted {
    color: var(--muted);
  }

  .is-hidden {
    display: none !important;
  }

  /* Remove any stray small “status ball” in header if present */
  .nav .dot,
  .nav .status,
  .cc-brand .dot {
    display: none !important;
  }

  /* Accessibility */
  :focus-visible {
    outline: none;
    box-shadow: var(--focus);
  }

  /* Smooth entrance */
  @media (prefers-reduced-motion: no-preference) {

    .panel,
    .card,
    .chip,
    .btn,
    .format,
    .pill,
    .file,
    .dropzone {
      animation: pop .28s ease both;
    }

    @keyframes pop {
      from {
        transform: translateY(4px);
        opacity: .0;
      }

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

  /* =======================
   Feature panels in rows
   ======================= */

  /* Turn the page content area into a responsive grid */
  .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(420px, 1fr));
    gap: 24px;
    align-items: start;
  }

  /* Hero always spans full width */
  .hero {
    grid-column: 1 / -1;
  }

  /* Make the first “wide” panel (ZIP/Unzip) span full width.
   If you already use .panel--wide, this keeps working; the nth-of-type is a fallback. */
  .panel--wide,
  .container>.panel:nth-of-type(1) {
    grid-column: 1 / -1;
  }

  /* Tool workspace + its detail blurbs should span the full width like the hero */
  .container>.tool-panel {
    grid-column: 1 / -1;
  }

  /* Keep follow-up info cards aligned with the main tool panel width */
  .container>.tool-panel-details {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* Keep Privacy FAQ centered between the two ad columns */
  .container>#privacy-faq {
    grid-column: 1 / -1;
    justify-self: stretch;
    align-self: start;
    width: 100%;
    max-width: none;
  }

  /* Every feature panel fills height so rows look even */
  .panel {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Inside each panel, force the same two-column split and spacing */
  .panel .grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    /* left controls | right “Tip/Why” */
    gap: 16px;
  }

  /* On narrow screens, collapse cleanly */
  @media (max-width: 1100px) {
    .container {
      grid-template-columns: 1fr;
    }

    .panel .grid {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- Premium chip suite (matches logo) ---------- */
  :root {
    /* neon glass */
    --pill-bg: linear-gradient(180deg, rgba(24, 38, 74, .94), rgba(8, 14, 32, .9));
    --pill-stroke: rgba(123, 195, 255, .42);
    --pill-shadow: 0 12px 30px rgba(2, 4, 12, .72), inset 0 1px 0 rgba(255, 255, 255, .08);
    --pill-shadow-hover: 0 18px 42px rgba(2, 4, 12, .82), inset 0 1px 0 rgba(255, 255, 255, .12);

    /* brand blues (tile/bolt feel) */
    --brand-1: #bfe4ff;
    --brand-2: #6fb5ff;
    --brand-3: #2a6bff;

    /* accents */
    --accent-blue: linear-gradient(135deg, #9dd4ff 0%, #5aaeff 45%, #2a6bff 100%);
    --accent-amber: linear-gradient(135deg, #ffd79a 0%, #ffb84a 50%, #ff8c2a 100%);

    /* text */
    --chip-fg: var(--fg, #eaf3ff);
    --chip-muted: color-mix(in oklab, var(--chip-fg), transparent 45%);
  }

  /* Base chip */
  .chip,
  .chip:where(a) {
    all: unset;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .56rem .9rem;
    border-radius: 999px;
    background: var(--pill-bg);
    border: 1px solid var(--pill-stroke);
    box-shadow: var(--pill-shadow);
    color: var(--chip-fg);
    font: 600 14px/1.1 ui-sans-serif, system-ui, "Segoe UI", Inter, Arial;
    letter-spacing: .1px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s, background .18s, border-color .18s;
  }

  .chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--pill-shadow-hover);
  }

  .chip:active {
    transform: translateY(0);
  }

  .chip:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--brand-2), white 15%);
    outline-offset: 2px;
  }

  /* Internal text layout (Discord button uses it) */
  .chip .text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
  }

  .chip .label {
    font-weight: 700;
    word-break: break-word;
  }

  .chip .sub {
    font-weight: 600;
    opacity: .7;
    color: var(--chip-muted);
    margin-top: .15rem;
    word-break: break-word;
  }

  /* Icons */
  .chip .ico-wrap {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
  }

  .chip .flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
  }

  /* Variants */
  .chip--primary {
    background: linear-gradient(180deg, rgba(157, 212, 255, .28), rgba(42, 107, 255, .18));
    border-color: color-mix(in oklab, var(--brand-2), #0a1631 60%);
    box-shadow:
      0 10px 26px rgba(42, 107, 255, .25),
      inset 0 1px 0 rgba(255, 255, 255, .12);
  }

  .chip--primary:hover {
    background: linear-gradient(180deg, rgba(157, 212, 255, .34), rgba(42, 107, 255, .24));
  }

  .chip--accent {
    background: linear-gradient(180deg, rgba(255, 184, 74, .28), rgba(255, 140, 42, .20));
    border-color: color-mix(in oklab, #ffb84a, #3b1d00 60%);
    box-shadow:
      0 10px 26px rgba(255, 140, 42, .25),
      inset 0 1px 0 rgba(255, 255, 255, .12);
  }

  .chip--accent:hover {
    background: linear-gradient(180deg, rgba(255, 184, 74, .34), rgba(255, 140, 42, .26));
  }

  /* Discord special: pulsating bolt dot to echo logo */
  .chip--discord .ico-wrap {
    background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, .12) 70%, transparent 71%);
    position: relative;
  }

  .chip--discord .ico-wrap::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    background: radial-gradient(closest-side, rgba(157, 212, 255, .45), transparent 70%);
    opacity: .0;
    transform: scale(.6);
    transition: opacity .25s ease, transform .25s ease;
  }

  .chip--discord:hover .ico-wrap::after {
    opacity: .8;
    transform: scale(1);
  }

  /* Language pill tightens content */
  .chip--lang {
    padding: .48rem .7rem;
  }

  /* Remove link underlines inside the chips */
  .chip a,
  .chip .label,
  .chip .sub {
    text-decoration: none !important;
  }

  /* Make the three chips compose nicely as a group */
  .nav__right {
    display: flex;
    align-items: center;
    gap: .9rem;
  }

  .nav__right .chip {
    backdrop-filter: blur(6px);
  }

  /* Small screens */
  @media (max-width:700px) {
    .nav__right {
      gap: .6rem;
    }

    .chip {
      padding: .5rem .75rem;
      font-size: 13px;
    }

    .chip .sub {
      display: none;
    }

    /* keep pills compact */
  }

  /* ===== Static footer: readable, not pinned ===== */
  :root {
    --foot-bg: rgba(10, 16, 25, .55);
    --foot-border: rgba(255, 255, 255, .10);
    --foot-text: #e9f2ff;
  }

  .foot {
    position: static;
    /* not pinned */
    margin-top: 28px;
    /* space from last section */
    padding: 18px 22px;
    background:
      radial-gradient(60% 120% at 50% 100%, rgba(95, 155, 255, .10), transparent 60%),
      var(--foot-bg);
    border-top: 1px solid var(--foot-border);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .15) inset;
  }

  .foot p {
    margin: 0 auto;
    max-width: 980px;
    color: var(--foot-text);
    font-weight: 600;
    font-size: clamp(15px, 0.95rem + 0.15vw, 18px);
    letter-spacing: .2px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
    opacity: .95;
  }

  .foot p::before {
    content: "🔒";
    margin-right: .5rem;
  }

  /* remove padding-bottom added for pinned version if present */
  main {
    padding-bottom: 0;
  }

  /* print-friendly */
  @media print {
    .foot {
      background: none;
      border: 0;
      box-shadow: none;
    }
  }

  /* =========================
   HEADER OPTIMIZATION + BIGGER BRAND
   ========================= */

  /* Bar: tighter blur, softer border, comfortable height */
  .nav {
    padding: 12px clamp(16px, 4vw, 32px);
    backdrop-filter: saturate(1.05) blur(8px);
    -webkit-backdrop-filter: saturate(1.05) blur(8px);
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--panel), transparent 40%), transparent 70%);
    border-bottom: 1px solid color-mix(in oklab, var(--stroke), transparent 30%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  }

  /* Center column (brand) bigger and bolder */
  .cc-brand {
    gap: 8px;
    font-weight: 900;
    letter-spacing: .18px;
    line-height: 1;
    font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.45rem);
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .25);
  }

  .cc-brand-icon {
    width: clamp(40px, 2.7rem + 0.35vw, 52px);
    height: clamp(40px, 2.7rem + 0.35vw, 52px);
    border-radius: 14px;
    box-shadow:
      0 12px 30px rgba(0, 0, 0, .28),
      inset 0 1px 0 rgba(255, 255, 255, .25);
  }

  .cc-brand-text {
    font-size: clamp(1.6rem, 1.15rem + 1.2vw, 2.5rem);
  }

  /* Keep only the left bolt (you already removed the extra one) */
  .cc-brand .sparkle {
    display: none !important;
  }

  /* Layout breathing on the right group */
  .nav__right {
    gap: 12px;
  }

  /* =========================
   UNIFIED CHIP / BUTTON HEIGHT + ACTION
   ========================= */

  /* Make chips and primary .btn share the same visual height */
  .chip {
    min-height: 42px;
    padding: .55rem .9rem;
    border-radius: 999px;
    font-size: 14.2px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    will-change: transform, box-shadow;
  }

  .chip--lang {
    padding: .58rem 1rem;
  }

  /* Language chip bigger (flag + label) */
  #langBtn.chip.chip--lang {
    min-height: 44px;
    font-size: 15px;
  }

  #langBtn .flag {
    width: 24px;
    height: 16px;
    border-radius: 3px;
  }

  /* Primary button height aligns with chips */
  .btn {
    min-height: 42px;
    min-width: 112px;
    border-radius: 12px;
    font-size: 14.2px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }

  /* Micro-interactions: hover lift, active press */
  .chip:hover,
  .btn:hover {
    transform: translateY(-1px);
  }

  .chip:active,
  .btn:active {
    transform: translateY(0);
  }

  /* Focus ring consistent and soft */
  .chip:focus-visible,
  .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--prim-2), white 20%);
  }

  /* Subtle underline slide on chip text for affordance */
  .chip .label {
    position: relative;
  }

  .chip .label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: color-mix(in oklab, var(--prim-2), white 20%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
    opacity: .75;
  }

  .chip:hover .label::after {
    transform: scaleX(1);
  }

  /* Accent variants slightly brighter on hover */
  .chip--primary:hover {
    filter: saturate(1.06);
    box-shadow: 0 12px 28px rgba(42, 107, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
  }

  .chip--accent:hover {
    filter: saturate(1.06);
    box-shadow: 0 12px 28px rgba(255, 140, 42, .26), inset 0 1px 0 rgba(255, 255, 255, .14);
  }

  /* =========================
   RESPONSIVE TWEAKS
   ========================= */
  @media (max-width: 860px) {
    .cc-brand {
      font-size: clamp(18px, 1.2rem + 0.4vw, 24px);
    }

    .cc-brand-icon {
      width: clamp(40px, 2.6rem + 0.4vw, 50px);
      height: clamp(40px, 2.6rem + 0.4vw, 50px);
    }

    .chip {
      min-height: 40px;
      padding: .5rem .8rem;
      font-size: 13.6px;
    }

    #langBtn.chip.chip--lang {
      min-height: 42px;
      font-size: 14px;
    }

    .btn {
      height: 40px;
    }
  }

  /* Optional: a tiny scroll shadow so the bar feels anchored */
  @media (prefers-reduced-motion: no-preference) {
    .nav {
      transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
    }
  }

  /* ===== ConvertCraft Cat Mascot ====================================== */
  #cc-cat {
    position: fixed;
    left: clamp(48px, 10vw, 220px);
    top: clamp(140px, 24vh, 320px);
    max-inline-size: min(280px, 24vw);
    z-index: 30;
    /* under nav, above content */
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: filter .2s ease, opacity .2s ease;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .28));
  }

  #cc-cat:active {
    cursor: grabbing;
  }

  /* size tweak on small screens */
  @media (max-width: 800px) {
    #cc-cat svg {
      width: 72px;
      height: 54px;
    }
  }

  /* Theme-aware colors */
  :root {
    --cat-fill: #f5f7ff;
    --cat-line: #20304d;
    --cat-accent: #2ca3ff;
    --cat-tag: #ffd470;
  }

  :root[data-theme="dark"] {
    --cat-fill: #ecf3ff;
    --cat-line: #0d1a2b;
    --cat-accent: #7bffef;
    --cat-tag: #ffcf5a;
  }

  /* ===== Pro button variant (reuses existing theme tokens) ============== */
  .btn--pro {
    background: var(--cc-cta-gradient);
    color: var(--cc-cta-fg);
    border: 1px solid var(--cc-cta-border);
    box-shadow: var(--cc-cta-shadow);
    font-weight: 800;
  }

  .btn--ghost.btn--pro {
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--cc-cta-border);
    box-shadow: none;
  }

  /* SVG parts */
  .cat-body,
  .cat-head {
    fill: var(--cat-fill);
    stroke: var(--cat-line);
    stroke-width: 2;
  }

  .ear {
    fill: none;
    stroke: var(--cat-line);
    stroke-width: 2.5;
    stroke-linecap: round;
  }

  .eye {
    fill: var(--cat-line);
  }

  .nose {
    fill: var(--cat-accent);
  }

  .mouth {
    fill: none;
    stroke: var(--cat-line);
    stroke-width: 2;
    stroke-linecap: round;
  }

  .tail {
    fill: none;
    stroke: var(--cat-fill);
    stroke-width: 12;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .1));
  }

  .tag {
    fill: var(--cat-tag);
  }

  .zap {
    fill: var(--cat-accent);
  }

  /* Idle animations (respect reduced motion) */
  @media (prefers-reduced-motion: no-preference) {
    #cc-cat .head {
      animation: cc-bob 2.2s ease-in-out infinite;
      transform-origin: 35px 48px;
    }

    #cc-cat .tail {
      animation: cc-wag 1.8s ease-in-out infinite;
      transform-origin: 92px 56px;
    }

    #cc-cat .eye {
      animation: cc-blink 5s linear infinite;
      transform-origin: center;
    }
  }

  @keyframes cc-bob {

    0%,
    100% {
      transform: translateY(0)
    }

    50% {
      transform: translateY(-2.5px)
    }
  }

  @keyframes cc-wag {

    0%,
    100% {
      transform: rotate(6deg)
    }

    50% {
      transform: rotate(-10deg)
    }
  }

  @keyframes cc-blink {

    0%,
    92%,
    100% {
      transform: scaleY(1)
    }

    94%,
    96% {
      transform: scaleY(.08)
    }

    98% {
      transform: scaleY(1)
    }
  }

  /* Hide if the user opens an input/file dialog (optional, less visual noise) */
  input[type="file"]:focus-within~#cc-cat {
    opacity: .6
  }

  /* Animated background with curved dual-arc blend (top & bottom) */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    /* brandable arc colors */
    --arc-top: #9dc9ff;
    /* bluish glow from the top */
    --arc-bot: #9ff3e6;
    /* aqua glow from the bottom */

    /* two big ellipses (top & bottom) + subtle vertical wash + base */
    background:
      /* top arc */
      radial-gradient(120% 62% at 50% -10%,
        color-mix(in oklab, var(--arc-top) 56%, transparent) 0%,
        color-mix(in oklab, var(--arc-top) 28%, transparent) 32%,
        transparent 70%),
      /* bottom arc */
      radial-gradient(120% 62% at 50% 110%,
        color-mix(in oklab, var(--arc-bot) 50%, transparent) 0%,
        color-mix(in oklab, var(--arc-bot) 24%, transparent) 34%,
        transparent 72%),
      /* faint center wash to “carve” the middle */
      radial-gradient(60% 140% at 50% 50%,
        rgba(255, 255, 255, .06) 0%,
        transparent 65%),
      /* base */
      var(--bg);
    filter: saturate(1.06);
  }

  /* diagonal energy streaks (kept, but softened so arcs are visible) */
  body::after {
    content: "";
    position: fixed;
    inset: -18%;
    background:
      repeating-linear-gradient(115deg,
        rgba(94, 195, 255, .045) 0 8px,
        transparent 8px 28px);
    mix-blend-mode: screen;
    animation: travel 18s linear infinite;
    opacity: .8;
    /* slightly less than before so arcs read well */
    z-index: -1;
    pointer-events: none;
  }

  @keyframes travel {
    to {
      transform: translate3d(-8%, -8%, 0);
    }
  }

  /* Optional: side vignettes to make the “carve” stronger (very subtle) */
  @media (min-width: 900px) {
    body::before {
      background:
        radial-gradient(120% 62% at 50% -10%,
          color-mix(in oklab, var(--arc-top) 56%, transparent) 0%,
          color-mix(in oklab, var(--arc-top) 28%, transparent) 32%,
          transparent 70%),
        radial-gradient(120% 62% at 50% 110%,
          color-mix(in oklab, var(--arc-bot) 50%, transparent) 0%,
          color-mix(in oklab, var(--arc-bot) 24%, transparent) 34%,
          transparent 72%),
        radial-gradient(120% 100% at -10% 50%, rgba(0, 0, 0, .16), transparent 60%),
        radial-gradient(120% 100% at 110% 50%, rgba(0, 0, 0, .14), transparent 60%),
        radial-gradient(60% 140% at 50% 50%, rgba(255, 255, 255, .06) 0%, transparent 65%),
        var(--bg);
    }
  }

  /* keep panels/cards above background art */
  .panel,
  .card,
  .dropzone,
  .hero,
  .nav,
  .foot {
    position: relative;
    z-index: 2;
  }

  /* background cat layer stays behind */
  .cat-bg {
    position: fixed;
    right: 28px;
    /* move horizontally */
    top: 210px;
    /* move vertically (down a bit) */
    width: 420px;
    /* make it a bit larger */
    opacity: .14;
    /* slightly subtler */
    z-index: 1;
    /* BELOW everything interactive */
    pointer-events: none;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35));
    transform: rotate(-2deg);
  }

  @media (max-width: 1100px) {
    .cat-bg {
      display: none;
    }
  }

  /* --- FINAL DARK VINTAGE THEME --- */
  html[data-theme="vintage"] {
    background-color: #0b0b0e;
    color: #ffffff;
    min-height: 100%;
    --bg: #0b0b0e;
    --bg-elev: #141419;
    --bg-soft: #101014;
    --panel: #18181f;
    --panel-2: #20202a;
    --glass: rgba(255, 255, 255, .06);
    --fg: #ffffff;
    --fg-2: #e8e2d6;
    --muted: #c9c2b6;
    --stroke: rgba(232, 226, 214, 0.18);
    --stroke-2: rgba(232, 226, 214, 0.28);
    --prim: #7a5cff;
    --prim-2: #9a8bff;
    --accent: #b8b0d9;
    --chip-bg: rgba(24, 24, 31, 0.86);
    --chip-stroke: rgba(232, 226, 214, 0.20);
    --file-btn-bg: #2a2933;
    --file-btn-bg-h: #353346;
    --file-btn-txt: #ffffff;
    --file-chip-bg: rgba(232, 226, 214, 0.08);
    --file-border: rgba(232, 226, 214, 0.22);
    --file-ring: rgba(122, 92, 255, 0.35);
    --file-text: #e8e2d6;
    --foot-bg: rgba(11, 11, 14, 0.9);
    --foot-border: rgba(232, 226, 214, 0.18);
    --foot-text: #e8e2d6;

    --hero-gradient: linear-gradient(135deg, var(--panel) 0%, var(--file-btn-bg) 100%);
    --hero-gradient-soft: linear-gradient(135deg, var(--panel-2) 0%, var(--file-btn-bg) 100%);
    --hero-pill-bg: rgba(255, 255, 255, 0.04);
    --hero-pill-border: rgba(232, 226, 214, 0.22);
    --hero-shadow: 0 20px 42px rgba(0, 0, 0, 0.55);

    /* Ensure all primary CTAs inherit the Vintage palette */
    --cc-cta-gradient: linear-gradient(135deg,
        color-mix(in oklab, var(--prim) 86%, #000) 0%,
        var(--prim-2) 100%);
    --cc-cta-fg: var(--fg);
    --cc-cta-border: color-mix(in oklab, var(--prim) 26%, var(--stroke));
    --cc-cta-shadow: 0 16px 34px rgba(0, 0, 0, .62), 0 0 22px rgba(122, 92, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .12);

    --focus: 0 0 0 3px rgba(122, 92, 255, .28);

    /* Used by some decorative accents (avoid old blue) */
    --cat-accent: var(--prim);
  }

  html[data-theme="vintage"] body {
    background: transparent !important;
  }

  html[data-theme="vintage"] body::before,
  html[data-theme="vintage"] body::after {
    content: none !important;
  }

  html[data-theme="vintage"]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background:
      radial-gradient(circle at 12% -12%, rgba(122, 92, 255, .18), transparent 58%),
      radial-gradient(circle at 88% 118%, rgba(232, 226, 214, .08), transparent 62%),
      linear-gradient(160deg, rgba(0, 0, 0, .96), rgba(11, 11, 14, .94));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 130% 130%, 130% 130%, 100% 100%;
    background-position: 0% 0%, 80% 120%, 0 0;
    opacity: .95;
    /* Avoid shifting/striping overlays that create visible edge bands */
    animation: none;
  }

  html[data-theme="vintage"]::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: url('/app_deploy/img/vintage-watermark.svg');
    background-repeat: no-repeat;
    background-size: 60vmin auto;
    background-position: bottom right;
    filter: grayscale(1) brightness(1.15);
    opacity: .12;
  }

  html[data-theme="vintage"] .cc-watermark {
    color: rgba(232, 226, 214, .12);
    text-shadow: 0 12px 40px rgba(5, 3, 1, .65);
  }

  html[data-theme="vintage"] #cc-cat {
    filter: grayscale(.35) saturate(.9) drop-shadow(0 8px 22px rgba(0, 0, 0, .75));
  }

  html[data-theme="vintage"] #cc-cat svg {
    opacity: .95;
  }

  @keyframes cc-vintage-flash {
    0% {
      filter: brightness(1);
      transform: translate3d(0, 0, 0);
    }

    50% {
      filter: brightness(1.04);
      transform: translate3d(0, 0, 0);
    }

    100% {
      filter: brightness(1);
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes vintage-stripe-shift {
    0% {
      background-position: 0% 0%, 80% 120%, 0 0, 0 0;
    }

    45% {
      background-position: -4% 4%, 84% 124%, 120px 80px, 0 0;
    }

    100% {
      background-position: 0% 0%, 80% 120%, 240px 160px, 0 0;
    }
  }

  html[data-theme="vintage"] .theme-note {
    color: var(--fg-2);
    font-size: .9rem;
  }

  html[data-theme="vintage"] .cc-header,
  html[data-theme="vintage"] .cc-header-rail {
    background: var(--panel);
    border: 1px solid var(--stroke);
    color: var(--fg);
    box-shadow: 0 18px 32px rgba(0, 0, 0, .4);
  }

  html[data-theme="vintage"] .cc-header-rail {
    border-top: 1px solid var(--stroke);
    backdrop-filter: none;
  }

  html[data-theme="vintage"] .cc-header-rail::before {
    background:
      radial-gradient(280px 160px at 12% 14%, rgba(122, 92, 255, .18), transparent 70%),
      radial-gradient(220px 120px at 78% 0%, rgba(154, 139, 255, .18), transparent 70%);
  }

  html[data-theme="vintage"] .cc-header .btn-pill {
    background: var(--chip-bg);
    border-color: var(--chip-stroke);
    color: var(--fg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  }

  html[data-theme="vintage"] .cc-header .btn-pill:hover,
  html[data-theme="vintage"] .cc-header .btn-pill:focus-visible {
    border-color: var(--prim);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
  }

  html[data-theme="vintage"] .pro-status-badge {
    background: linear-gradient(90deg, var(--prim), var(--prim-2));
    color: var(--bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  }

  html[data-theme="vintage"] .hero,
  html[data-theme="vintage"] .panel,
  html[data-theme="vintage"] .panel--wide,
  html[data-theme="vintage"] .card,
  html[data-theme="vintage"] .tool-card,
  html[data-theme="vintage"] .template {
    background: linear-gradient(145deg, rgba(62, 52, 40, .98), rgba(31, 25, 18, .94));
    border: 1px solid var(--stroke);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    color: var(--fg);
  }

  html[data-theme="vintage"] .hero {
    border-color: var(--stroke-2);
  }

  html[data-theme="vintage"] .hero::before {
    display: none;
  }

  html[data-theme="vintage"] .hero .hero-chip {
    background: rgba(46, 38, 28, .85);
    border: 1px solid var(--chip-stroke);
    color: var(--fg-2);
  }

  html[data-theme="vintage"] .panel,
  html[data-theme="vintage"] .panel--wide,
  html[data-theme="vintage"] .tool-card,
  html[data-theme="vintage"] .card,
  html[data-theme="vintage"] .hero,
  html[data-theme="vintage"] .template,
  html[data-theme="vintage"] .unified-panel {
    background: var(--panel) !important;
    color: var(--fg) !important;
    border-color: var(--stroke) !important;
  }

  html[data-theme="vintage"] .tools-section,
  html[data-theme="vintage"] .tools-section-header,
  html[data-theme="vintage"] .tools-section-body,
  html[data-theme="vintage"] .tool-card-body,
  html[data-theme="vintage"] .tool-card-header {
    background: transparent;
  }

  html[data-theme="vintage"] .ad-slot,
  html[data-theme="vintage"] .ad-slot--sidebar,
  html[data-theme="vintage"] .ad-slot--inline {
    background: var(--panel);
    border: 1px solid var(--stroke);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    color: var(--fg-2);
  }

  html[data-theme="vintage"] .ad-placeholder {
    color: var(--muted);
  }

  html[data-theme="vintage"] .tool-sidebar {
    background: var(--panel);
    border-color: var(--stroke);
  }

  html[data-theme="vintage"] .tool-nav-item {
    background: var(--chip-bg) !important;
    border-color: var(--chip-stroke) !important;
    color: var(--fg) !important;
  }

  html[data-theme="vintage"] .tool-nav-item:hover,
  html[data-theme="vintage"] .tool-nav-item.is-active {
    background: var(--prim) !important;
    color: var(--bg) !important;
    border-color: var(--prim-2) !important;
  }

  html[data-theme="vintage"] .tool-sidebar-title,
  html[data-theme="vintage"] .tool-sidebar-heading {
    color: var(--fg-2);
  }

  html[data-theme="vintage"] .cc-theme-block {
    background: var(--chip-bg);
    border-color: var(--chip-stroke);
  }

  html[data-theme="vintage"] .theme-toggle .toggle-pill {
    background: var(--bg-elev);
    border-color: var(--stroke);
  }

  html[data-theme="vintage"] .theme-toggle .toggle-knob {
    background: linear-gradient(135deg, var(--prim), var(--prim-2));
  }

  html[data-theme="vintage"] .cc-header .cc-brand .alpha-badge {
    background: linear-gradient(125deg, var(--prim), var(--prim-2)) !important;
    border-color: color-mix(in oklab, var(--prim) 35%, var(--stroke)) !important;
    color: var(--bg) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  }

  html[data-theme="vintage"] .btn-pill {
    background: var(--chip-bg) !important;
    border-color: var(--chip-stroke) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    color: var(--fg) !important;
    --pill-glow: rgba(122, 92, 255, 0.35);
  }

  html[data-theme="vintage"] .btn-pill::before,
  html[data-theme="vintage"] .btn-pill::after {
    background: linear-gradient(145deg, rgba(122, 92, 255, 0.30), rgba(154, 139, 255, 0.12)) !important;
    filter: drop-shadow(0 0 12px rgba(122, 92, 255, 0.25)) !important;
    opacity: 0.6 !important;
  }

  html[data-theme="vintage"] .btn-pill:hover,
  html[data-theme="vintage"] .btn-pill:focus-visible {
    box-shadow: 0 16px 34px rgba(0, 0, 0, .6), 0 0 24px rgba(122, 92, 255, 0.22) !important;
    border-color: var(--prim) !important;
  }

  /* Main tool buttons (e.g. ZIP/Unzip) were using the global neon gradients; force token-based Vintage here */
  html[data-theme="vintage"] .btn,
  html[data-theme="vintage"] .btn-primary {
    --btn-bg: var(--cc-cta-gradient);
    --btn-fg: var(--cc-cta-fg);
    --btn-shadow: var(--cc-cta-shadow);
    text-shadow: 0 0 14px rgba(122, 92, 255, .18);
  }

  html[data-theme="vintage"] .btn.btn--ghost,
  html[data-theme="vintage"] .btn-primary.btn--ghost {
    --btn-bg: var(--chip-bg);
    --btn-fg: var(--fg);
    --btn-shadow: inset 0 0 0 1px var(--chip-stroke);
    border-color: var(--chip-stroke) !important;
    text-shadow: none;
  }

  /* Template format chips (active/hover) should not stay aqua/blue in Vintage */
  html[data-theme="vintage"] .format:hover {
    box-shadow: 0 8px 20px rgba(122, 92, 255, .14) !important;
  }

  html[data-theme="vintage"] .format.is-active {
    color: var(--bg) !important;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--prim) 84%, #000) 0%,
        var(--prim-2) 100%) !important;
    border-color: color-mix(in oklab, var(--prim) 26%, var(--stroke)) !important;
    box-shadow: 0 10px 28px rgba(122, 92, 255, .18) !important;
  }

  html[data-theme="vintage"] .consent-banner {
    background: var(--panel);
    border: 1px solid var(--stroke);
    color: var(--fg);
  }

  html[data-theme="vintage"] .consent-banner p {
    color: var(--fg);
  }

  html[data-theme="vintage"] .cc-brand-icon {
    filter: drop-shadow(0 0 16px rgba(122, 92, 255, 0.45));
  }

  html[data-theme="vintage"] .cc-brand-text {
    text-shadow: 0 0 10px rgba(122, 92, 255, 0.35);
  }

  html[data-theme="vintage"] .cc-header .cc-brand::before,
  html[data-theme="vintage"] .cc-header .cc-brand::after {
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--prim) 65%, transparent) 0%,
        color-mix(in srgb, var(--prim-2) 80%, transparent) 45%,
        rgba(232, 226, 214, 0.10) 100%);
    filter: drop-shadow(0 0 12px rgba(122, 92, 255, 0.28));
  }

  html[data-theme="vintage"] .cc-header .cc-brand .cc-brand-energy--primary::before,
  html[data-theme="vintage"] .cc-header .cc-brand .cc-brand-energy--primary::after,
  html[data-theme="vintage"] .cc-header .cc-brand .cc-brand-energy--secondary::before,
  html[data-theme="vintage"] .cc-header .cc-brand .cc-brand-energy--secondary::after {
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--prim) 70%, transparent) 0%,
        color-mix(in srgb, var(--prim-2) 90%, transparent) 50%,
        rgba(232, 226, 214, 0.12) 100%);
    filter: drop-shadow(0 0 10px rgba(122, 92, 255, 0.25));
  }

  html[data-theme="vintage"] .tool-panel-details,
  html[data-theme="vintage"] .tool-panel-details.tool-panel-details,
  html[data-theme="vintage"] #alpha-performance,
  html[data-theme="vintage"] .alpha-performance,
  html[data-theme="vintage"] #why-convertcraft,
  html[data-theme="vintage"] .why-convertcraft {
    background: var(--panel) !important;
    border: 1px solid var(--stroke) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55) !important;
    color: var(--fg) !important;
  }

  html[data-theme="vintage"] .why-card {
    background: color-mix(in oklab, var(--panel) 92%, #000) !important;
    border: 1px solid var(--stroke) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5) !important;
  }

  html[data-theme="vintage"] .why-card p {
    color: var(--fg-2) !important;
  }

  html[data-theme="vintage"] .tool-card-btn {
    background: var(--chip-bg) !important;
    border-color: var(--stroke) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5) !important;
    color: var(--fg) !important;
  }

  html[data-theme="vintage"] .tool-card-btn:hover,
  html[data-theme="vintage"] .tool-card-btn:focus-visible {
    background: var(--prim) !important;
    color: var(--bg) !important;
    border-color: var(--prim-2) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(122, 92, 255, 0.22) !important;
  }

  /* Progress bars (e.g., PDF → Images client) should not stay aqua/blue in Vintage */
  html[data-theme="vintage"] .progress__bar {
    border-color: var(--stroke-2) !important;
    background: rgba(232, 226, 214, .08) !important;
  }

  html[data-theme="vintage"] .progress__bar>span {
    background: linear-gradient(90deg, var(--prim), var(--prim-2)) !important;
    box-shadow: inset 0 0 12px rgba(122, 92, 255, .22) !important;
  }

  /* Dropzones should not keep neon hover colors in Vintage */
  html[data-theme="vintage"] .dropzone {
    background: var(--panel) !important;
    border-color: var(--stroke-2) !important;
    color: var(--fg-2) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important;
    backdrop-filter: none;
  }

  html[data-theme="vintage"] .dropzone:hover,
  html[data-theme="vintage"] .dropzone.is-hover,
  html[data-theme="vintage"] .dropzone.hero-styled.is-hover,
  html[data-theme="vintage"] .dropzone.hero-styled.hover,
  html[data-theme="vintage"] .dropzone.hero-styled.dragover {
    border-color: var(--prim) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .62), 0 0 22px rgba(122, 92, 255, .16) !important;
  }

  /* Generic label-based file pickers (Split/Join, ZIP/Unzip, etc.) */
  html[data-theme="vintage"] .file-input {
    border-color: var(--stroke-2) !important;
    background: color-mix(in oklab, var(--panel) 86%, #000) !important;
    color: var(--fg) !important;
  }

  html[data-theme="vintage"] .file-input:hover {
    border-color: var(--prim) !important;
    background: color-mix(in oklab, var(--panel) 78%, var(--prim) 10%) !important;
  }

  /* Special file triggers that bypass .btn and keep neon gradients */
  html[data-theme="vintage"] #tool-pdf-to-images .file-trigger,
  html[data-theme="vintage"] .pc-file-btn,
  html[data-theme="vintage"] .tool-card .primary {
    background: var(--cc-cta-gradient) !important;
    color: var(--cc-cta-fg) !important;
    border-color: var(--cc-cta-border) !important;
    box-shadow: var(--cc-cta-shadow) !important;
  }

  /* Hard-coded blue checkbox accents should use Vintage primary */
  html[data-theme="vintage"] .url-rights input[type="checkbox"] {
    accent-color: var(--prim) !important;
    border-color: var(--prim) !important;
    background: var(--bg-elev) !important;
  }

  html[data-theme="vintage"] .url-rights input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(122, 92, 255, .55) !important;
  }

  /* GIF/IMG + Audio → MP4 tool: neutralize neon styling under Vintage */
  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-card {
    background: var(--panel) !important;
    border-color: var(--stroke) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .62) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-card::before,
  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-card::after {
    opacity: 0 !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-mode-bar {
    background: color-mix(in oklab, var(--panel) 92%, #000) !important;
    border-color: var(--stroke) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .6) !important;
    backdrop-filter: none;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-mode-bar__hint,
  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-heading p,
  html[data-theme="vintage"] #tool-gif-mp4 .media-step-hint,
  html[data-theme="vintage"] #tool-gif-mp4 .media-classic-field {
    color: var(--fg-2) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-step-title {
    color: var(--prim) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-chip {
    border-color: var(--chip-stroke) !important;
    background: var(--chip-bg) !important;
    color: var(--fg-2) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-chip--accent {
    border-color: color-mix(in oklab, var(--prim) 40%, var(--stroke)) !important;
    background: color-mix(in oklab, var(--prim) 22%, var(--panel)) !important;
    color: var(--fg) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-mode-bar__select {
    border-color: var(--stroke-2) !important;
    background: var(--chip-bg) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
    backdrop-filter: none;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-mode-bar__select:focus-within {
    border-color: var(--prim) !important;
    box-shadow: 0 0 0 2px rgba(122, 92, 255, .25), 0 16px 42px rgba(0, 0, 0, .65) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-mode-bar__select::after {
    background: var(--cc-cta-gradient) !important;
    color: var(--cc-cta-fg) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-mode-bar__select select {
    color: var(--fg) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-classic-tool {
    background: color-mix(in oklab, var(--panel) 92%, #000) !important;
    border-color: var(--stroke) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6) !important;
    backdrop-filter: none;
  }

  html[data-theme="vintage"] #tool-gif-mp4 #gifModeGifAudio {
    background: var(--panel) !important;
    border-color: var(--stroke) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .65) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 select,
  html[data-theme="vintage"] #tool-gif-mp4 input[type="number"],
  html[data-theme="vintage"] #tool-gif-mp4 input[type="text"] {
    border-color: var(--stroke-2) !important;
    background: var(--bg-elev) !important;
    color: var(--fg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath fill='%23e8e2d6' d='M0 0l4 6 4-6z'/%3E%3C/svg%3E") !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 select option {
    background: var(--bg-elev) !important;
    color: var(--fg) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 select:focus,
  html[data-theme="vintage"] #tool-gif-mp4 input[type="number"]:focus,
  html[data-theme="vintage"] #tool-gif-mp4 input[type="text"]:focus {
    border-color: var(--prim) !important;
    box-shadow: 0 0 0 2px rgba(122, 92, 255, .25) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-card input[type="range"] {
    background: linear-gradient(90deg, var(--prim), var(--prim-2)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-card input[type="range"]::-webkit-slider-thumb {
    border-color: var(--prim) !important;
    background: var(--fg) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-card input[type="range"]::-moz-range-track {
    background: linear-gradient(90deg, var(--prim), var(--prim-2)) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-card input[type="range"]::-moz-range-thumb {
    border-color: var(--prim) !important;
    background: var(--fg) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-card input[type="range"]:focus-visible {
    box-shadow: 0 0 0 2px rgba(122, 92, 255, .25) !important;
  }

  /* File-pick buttons inside GIF/MP4 workflows should follow Vintage tokens */
  html[data-theme="vintage"] #tool-gif-mp4 .btn--gif,
  html[data-theme="vintage"] #tool-gif-mp4 .btn--audio {
    --btn-bg: var(--chip-bg) !important;
    --btn-fg: var(--fg) !important;
    --btn-shadow: inset 0 0 0 1px var(--chip-stroke) !important;
    border: 1px solid var(--chip-stroke) !important;
    text-shadow: none !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .btn--gif:hover:not(:disabled),
  html[data-theme="vintage"] #tool-gif-mp4 .btn--audio:hover:not(:disabled),
  html[data-theme="vintage"] #tool-gif-mp4 .btn--gif:focus-visible:not(:disabled),
  html[data-theme="vintage"] #tool-gif-mp4 .btn--audio:focus-visible:not(:disabled) {
    border-color: var(--prim) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .62), 0 0 18px rgba(122, 92, 255, .16) !important;
  }

  html[data-theme="vintage"] #tool-gif-mp4 .btn--convert,
  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-card #gifGifAudioConvert,
  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-card #gifImgAudioConvert,
  html[data-theme="vintage"] #tool-gif-mp4 .media-tool-card #gifMp4Run {
    --btn-bg: var(--cc-cta-gradient) !important;
    --btn-fg: var(--cc-cta-fg) !important;
    --btn-shadow: var(--cc-cta-shadow) !important;
    border: 1px solid var(--cc-cta-border) !important;
    text-shadow: 0 0 14px rgba(122, 92, 255, .18) !important;
  }

  /* Universal Image Converter (local): remove default blue accents under Vintage */
  html[data-theme="vintage"] .imgc-upload {
    background: color-mix(in oklab, var(--panel) 92%, #000) !important;
    border-color: var(--stroke-2) !important;
  }

  html[data-theme="vintage"] .imgc-upload:focus-within {
    border-color: var(--prim) !important;
    box-shadow: 0 0 0 2px var(--file-ring), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
    background: color-mix(in oklab, var(--panel) 86%, var(--prim) 6%) !important;
  }

  html[data-theme="vintage"] .imgc-upload__cta:active {
    box-shadow: 0 10px 22px rgba(122, 92, 255, .18) inset !important;
  }

  html[data-theme="vintage"] .tool-page:not(#tool-gif-mp4) .tool-card .btn:not(:disabled):hover,
  html[data-theme="vintage"] .tool-page:not(#tool-gif-mp4) .tool-card .btn-primary:not(:disabled):hover,
  html[data-theme="vintage"] .tool-page:not(#tool-gif-mp4) .tool-card .download-btn:not(:disabled):hover,
  html[data-theme="vintage"] .tool-page:not(#tool-gif-mp4) .tool-card .btn:not(:disabled):focus-visible,
  html[data-theme="vintage"] .tool-page:not(#tool-gif-mp4) .tool-card .btn-primary:not(:disabled):focus-visible,
  html[data-theme="vintage"] .tool-page:not(#tool-gif-mp4) .tool-card .download-btn:not(:disabled):focus-visible {
    box-shadow: var(--cc-cta-shadow) !important;
  }

  /* Range slider: use Vintage primary instead of browser/default blue */
  html[data-theme="vintage"] .tool-range input[type="range"] {
    accent-color: var(--prim);
  }

  html[data-theme="vintage"] .tool-range input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: var(--stroke-2);
  }

  html[data-theme="vintage"] .tool-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--prim);
    border: 2px solid color-mix(in oklab, var(--prim) 55%, var(--stroke));
    box-shadow: 0 10px 20px rgba(0, 0, 0, .55);
    margin-top: -5px;
  }

  html[data-theme="vintage"] .tool-range input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--stroke-2);
  }

  html[data-theme="vintage"] .tool-range input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--prim);
    border: 2px solid color-mix(in oklab, var(--prim) 55%, var(--stroke));
    box-shadow: 0 10px 20px rgba(0, 0, 0, .55);
  }


  /* Page Frame Layout for Side Ads */
  .page-frame {
    /* Increased min-width from 120px to 220px to accommodate standard ads + buffer */
    --ad-track: clamp(220px, 15vw, 300px);
    --ads-gap: max(24px, calc((100vw - (2 * var(--ad-track))) / 22));
    width: 100%;
    margin: 0 auto 80px;
    padding: 0;
    display: grid;
    grid-template-columns:
      minmax(0, var(--ad-track)) minmax(var(--ads-gap), var(--ads-gap)) minmax(0, 1fr) minmax(var(--ads-gap), var(--ads-gap)) minmax(0, var(--ad-track));
    column-gap: 0;
    row-gap: clamp(16px, 2vw, 32px);
    align-items: flex-start;
  }

  .page-frame>.page-main {
    grid-column: 3;
    width: 100%;
  }

  .ad-column--left {
    grid-column: 1;
  }

  .ad-column--right {
    grid-column: 5;
  }

  /* =========================================
     ADSTERRA (SAFE BANNERS ONLY) - Added 2025-12-29
     - NO popunder
     - Ads are loaded inside sandboxed iframes (prevents top-level redirects/clickjacking)
     ========================================= */

  .cc-ad {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--gap-3, 16px) 0;
  }

  .ad-column .cc-ad {
    margin: 0;
  }

  .cc-ad-frame {
    border: 0;
    display: block;
    overflow: hidden;
  }

  .cc-ad--728 .cc-ad-frame {
    width: 728px;
    height: 90px;
    max-width: 100%;
  }

  .page-frame > .cc-ad--sitewide {
    grid-column: 1 / -1;
    margin: 0 0 var(--gap-3, 16px) 0;
  }

  .cc-ad--300 {
    margin: 0;
  }

  .cc-ad--300 .cc-ad-frame {
    width: 300px;
    height: 250px;
  }

  .cc-ad--native .cc-ad-frame {
    width: 100%;
    max-width: 728px;
    height: 280px;
  }

  .cc-ad--mobile {
    display: none;
    margin-top: var(--gap-4, 24px);
  }

  .cc-ad--320 .cc-ad-frame {
    width: 320px;
    height: 50px;
  }

  /* Place the 300×250 to the right of the drop zone on desktop */
  .cc-hero-right {
    display: flex;
    align-items: stretch;
    gap: var(--gap-3, 16px);
  }

  .cc-hero-right #drop {
    flex: 1 1 auto;
    min-width: 280px;
  }

  .cc-hero-right .cc-ad--300 {
    flex: 0 0 300px;
  }

  @media (max-width: 768px) {
    .cc-hero-right {
      flex-direction: column;
    }

    /* Hide the 300×250 on mobile */
    .cc-ad--300 {
      display: none !important;
    }

    /* Show the 320×50 only on mobile */
    #mobile-ad,
    .cc-ad--mobile {
      display: flex !important;
    }
  }

  @media (max-width: 1100px) {
    .page-frame {
      grid-template-columns: minmax(0, 1fr);
      column-gap: 0;
      row-gap: clamp(20px, 4vw, 40px);
      margin: 0 auto 48px;
      padding: 0 clamp(16px, 6vw, 32px);
    }

    .page-frame>.page-main {
      grid-column: 1;
    }

    .ad-column--left,
    .ad-column--right {
      display: none !important;
      /* User request: "KEEP ONLY ON SIDE" - if no side, hide them. Prevents "Footer Ad" appearance. */
    }

    .ad-column {
      position: static;
    }
  }

  /* =========================================
     VINTAGE MODE IMPLEMENTATION (Refined)
     ========================================= */

  /* 1. Palette Overrides (Deep Dark Purple & Creamy Silver) */
  html[data-theme="vintage"] {
    /* Much darker, richer purples ("Darker as before") */
    --prim: #7c3aed;
    /* Violet-600 */
    --prim-2: #5b21b6;
    /* Violet-800 */
    --accent: #d8b4fe;
    /* Purple-300 (Highlights) */

    /* Deepest, darkest purple-black backgrounds */
    --bg: #05010a;
    --bg-elev: #0f0718;
    --panel: #0a0410;
    /* Very dark panel */

    /* "Creamy Touch Silver" text */
    --fg: #e2e2d5;
    /* Warm creamy silver */
    --fg-2: #a8a8a0;

    --surface-1: #0f0718;
    --surface-2: #160b20;

    --stroke: rgba(226, 226, 213, 0.15);
    /* Creamy silver stroke */
    --stroke-2: rgba(226, 226, 213, 0.08);

    --chip-bg: rgba(20, 10, 30, 0.9);
    --chip-stroke: rgba(124, 58, 237, 0.3);

    /* Gradients: Deep Majestic Purple */
    --cc-cta-gradient: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
    --cc-cta-shadow: 0 10px 30px rgba(76, 29, 149, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --cc-cta-border: rgba(255, 255, 255, 0.1);
  }

  /* 2. Header Cleanup (Maximum Simplicity) */
  html[data-theme="vintage"] .cc-header-rail {
    background: rgba(10, 4, 16, 0.9);
    border: 1px solid var(--stroke);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
  }

  /* Completely hide neon borders/glows */
  html[data-theme="vintage"] .cc-header-rail::before,
  html[data-theme="vintage"] .cc-header-rail::after {
    display: none !important;
  }

  /* Brand Logo: Darker energy for vintage feel */
  html[data-theme="vintage"] .cc-brand-energy {
    opacity: 0.5;
    filter: blur(10px);
    mix-blend-mode: color-dodge;
  }

  /* 3. Background Animation (High Visibility, Like Neon Mode) */
  /* 3. Background Animation (Exact Match to Neon Mode, but Purple) */
  html[data-theme="vintage"] body::before {
    /* Atmospheric glows matching Neon positioning */
    content: "";
    display: block !important;
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(139, 92, 246, 0.15), transparent 70%),
      radial-gradient(900px 500px at 85% -20%, rgba(109, 40, 217, 0.1), transparent 60%),
      var(--bg);
  }

  html[data-theme="vintage"] body::after {
    /* Exact replica of Neon Mode "structure" (115deg, 8px striations) but in Vintage Purple */
    content: "";
    display: block !important;
    position: fixed;
    inset: -20%;
    background:
      repeating-linear-gradient(115deg,
        rgba(167, 139, 250, 0.08) 0 8px,
        transparent 8px 32px);
    mix-blend-mode: screen;
    animation: travel 22s linear infinite;
    /* Reusing the global 'travel' animation for identical motion */
    z-index: -1;
    pointer-events: none;
  }

  /* Remove old vintageRain if it exists to avoid confusion, or just unused */


  /* === Tool Specific Overrides for Vintage (RESTORED & ENFORCED) === */

  html[data-theme="vintage"] .cc-header .btn-pill {
    background: var(--chip-bg);
    border-color: var(--chip-stroke);
    color: var(--fg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  html[data-theme="vintage"] .cc-header .btn-pill:hover {
    border-color: var(--prim);
    color: #fff;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
  }

  html[data-theme="vintage"] .hero,
  html[data-theme="vintage"] .panel,
  html[data-theme="vintage"] .card,
  html[data-theme="vintage"] .tool-card {
    background: var(--panel) !important;
    border-color: var(--stroke) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6) !important;
  }

  html[data-theme="vintage"] .tool-nav-item.is-active {
    background: rgba(124, 58, 237, 0.2) !important;
    border-color: var(--prim) !important;
    color: var(--accent) !important;
  }

  /* Force Buttons to use Vintage Gradient */
  html[data-theme="vintage"] .btn,
  html[data-theme="vintage"] .btn-primary,
  html[data-theme="vintage"] .file-trigger,
  html[data-theme="vintage"] .pc-file-btn,
  html[data-theme="vintage"] #tool-pdf-to-images .file-trigger,
  html[data-theme="vintage"] #btn-pdf-to-images {
    --btn-bg: var(--cc-cta-gradient) !important;
    --btn-fg: #fff !important;
    --btn-shadow: var(--cc-cta-shadow) !important;
    background: var(--cc-cta-gradient) !important;
    /* Force background */
    color: #fff !important;
    border: 1px solid var(--chip-stroke) !important;
    box-shadow: var(--cc-cta-shadow) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  html[data-theme="vintage"] .btn:hover,
  html[data-theme="vintage"] .btn-primary:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 25px rgba(124, 58, 237, 0.6) !important;
  }

  /* Secondary/Ghost Buttons */
  html[data-theme="vintage"] .btn.btn--ghost,
  html[data-theme="vintage"] .btn-primary.btn--ghost {
    background: transparent !important;
    border: 1px solid var(--stroke) !important;
    color: var(--fg) !important;
    box-shadow: none !important;
  }

  html[data-theme="vintage"] .btn.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--prim) !important;
    color: #fff !important;
  }

  /* Universal Dropzone */
  html[data-theme="vintage"] .imgc-upload {
    background: rgba(10, 5, 15, 0.6) !important;
    border-color: var(--stroke) !important;
  }

  html[data-theme="vintage"] .imgc-upload:hover,
  html[data-theme="vintage"] .imgc-upload:focus-within {
    border-color: var(--prim) !important;
    background: rgba(124, 58, 237, 0.05) !important;
    box-shadow: inset 0 0 0 1px var(--prim), 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  }

  html[data-theme="vintage"] .imgc-upload__cta {
    background: var(--chip-bg);
    border: 1px solid var(--chip-stroke);
    color: var(--fg);
  }

  /* Inputs & Selects */
  html[data-theme="vintage"] input[type="text"],
  html[data-theme="vintage"] input[type="number"],
  html[data-theme="vintage"] select,
  html[data-theme="vintage"] .tool-range input[type="range"] {
    background-color: var(--bg-elev) !important;
    color: var(--fg) !important;
    border-color: var(--stroke) !important;
  }

  html[data-theme="vintage"] input:focus,
  html[data-theme="vintage"] select:focus {
    border-color: var(--prim) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3) !important;
  }

  /* Progress Bars */
  html[data-theme="vintage"] .progress__bar>span {
    background: var(--cc-cta-gradient) !important;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.5) !important;
  }


  /* Make side ad columns fixed and vertical on wide screens so they stay
   visible as a vertical strip at the left/right of the page layout. */
  /* Make side ad columns sticky so they scroll with the page but stay in view */
  @media (min-width: 1101px) {
    .ad-column {
      position: sticky;
      /* CHANGED from fixed to sticky to keep Grid layout intact */
      top: calc(var(--cc-header-height, 70px) + 20px);
      /* height: calc(100vh - ...);  -- Let content decide height */
      display: flex;
      flex-direction: column;
      gap: 24px;
      width: 100%;
      /* Fill the grid track */
      z-index: 30;
      max-height: calc(100vh - 100px);
      overflow-y: auto;
      /* Allow scrolling if ads are tall */
      scrollbar-width: none;
      /* Hide scrollbar for cleaner look */
    }

    .ad-column::-webkit-scrollbar {
      display: none;
    }

    /* Grid layout handles positioning, no need for left/right/padding hacks */
    .ad-column--left {
      left: auto;
      right: auto;
    }

    .ad-column--right {
      left: auto;
      right: auto;
    }

    /* Remove the broken block display hack - let Grid defined above rule! */
    .page-frame {
      /* display: grid;  <-- inherited from above */
      display: grid;
      padding-left: 0;
      padding-right: 0;
    }

    .page-frame>.page-main {
      width: 100%;
    }
  }

  /* Adjust Ad Track width to be safer (User said "bring it back") */
  /* Was 220px, reverting to 200px which is wide enough for 160px skyscraper but not huge */
  /* Needs to update the VARIABLE definition at the top of the file separately, 
     but since I can't edit multiple disjoint blocks in one go easily without side effects,
     I will override it here in the media query or just rely on the top definition if I could reach it.
     
     Actually, I should assume the top definition (clamp 220px) is still active. 
     I will override it here to be safe.
  */

  .page-frame {
    /* Reverting to a safer width */
    --ad-track: clamp(160px, 12vw, 240px) !important;
  }


  /* ===== FINAL GUARD: hide native file inputs ===== */
  input[type="file"],
  input[type="file"]::file-selector-button,
  input[type="file"]::-webkit-file-upload-button {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0.1px !important;
    height: 0.1px !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
  }


  /* Quick Tool Grid (New) */
  .quick-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 800px;
    margin: 2rem auto 0;
    padding: 0 1rem;
  }

  .qt-card {
    appearance: none;
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
    color: inherit;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .qt-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(120, 190, 255, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .qt-card:hover {
    transform: translateY(-4px);
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(120, 190, 255, 0.4);
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(120, 190, 255, 0.15);
  }

  .qt-card:hover::before {
    opacity: 1;
  }

  .qt-icon {
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  }

  .qt-info h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f3f4f6;
    margin: 0;
    line-height: 1.2;
  }

  .qt-info p {
    font-size: 0.7rem;
    color: #94a3b8;
    margin: 0.25rem 0 0;
    line-height: 1.2;
  }

  /* Maintenance Banner */
  .maintenance-banner {
    background: rgba(245, 158, 11, 0.15);
    /* Amber with transparency */
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    /* Amber-400 */
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    z-index: 1001;
    /* Above header if needed */
  }

  .maintenance-banner p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
  }

  .maintenance-banner strong {
    color: #fff;
    font-weight: 600;
  }

  /* Announcement Marquee Banner */
  :root {
    --cc-announcement-height: 0px;
  }

  body.cc-has-announcement {
    padding-top: var(--cc-announcement-height);
  }

  .announcement-banner {
    background: rgba(245, 158, 11, 0.15);
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--warn);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .announcement-inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .announcement-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    padding: 0.72rem 3.25rem 0.72rem 1rem;
    will-change: transform;
    animation: cc-marquee 40s linear infinite;
  }

  .announcement-banner:hover .announcement-track {
    animation-play-state: paused;
  }

  .announcement-text {
    display: inline-flex;
    align-items: center;
    padding-right: 2.5rem;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .announcement-text strong {
    color: #fff;
    font-weight: 700;
  }

  .announcement-text a {
    color: var(--prim);
    text-decoration: underline;
    font-weight: 700;
  }

  .announcement-text a:hover {
    text-decoration: none;
  }

  .announcement-close {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 20px;
  }

  .announcement-close:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  @keyframes cc-marquee {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  @media (max-width: 768px) {
    .announcement-text {
      font-size: 0.82rem;
    }
  }

  /* Pro promo banner (reuses announcement banner shell) */
  .announcement-banner.cc-pro-banner {
    /* Prefer theme color if supported; falls back to default announcement styling */
    background: color-mix(in srgb, var(--prim) 14%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--prim) 30%, transparent);
    color: var(--text);
  }

  .announcement-banner.cc-pro-banner .announcement-track {
    width: 100%;
    max-width: none;
    margin: 0;
    white-space: nowrap;
    animation: none;
    will-change: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1.25rem;
    padding: 0.35rem 1.25rem;
    padding-right: 3.75rem;
  }

  .announcement-banner.cc-pro-banner .cc-pro-banner__right {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    justify-content: flex-end;
    max-width: 680px;
  }

  .announcement-banner.cc-pro-banner .cc-pro-banner__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    padding: 0 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .announcement-banner.cc-pro-banner .cc-pro-banner__text strong {
    color: inherit;
    font-weight: 800;
  }

  .announcement-banner.cc-pro-banner .cc-pro-banner__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 0.9rem;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .announcement-banner.cc-pro-banner .cc-pro-banner__cta:hover {
    filter: brightness(1.03);
    text-decoration: none;
  }

  .announcement-banner.cc-pro-banner .cc-pro-banner__pill {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--prim) 34%, transparent);
    background: color-mix(in srgb, var(--prim) 18%, transparent);
    color: var(--text);
    font-weight: 800;
    font-size: 0.82rem;
    line-height: 1.15;
    /* Allow wrapping so the full message is always visible */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .announcement-banner.cc-pro-banner .cc-pro-banner__right .cc-pro-banner__pill {
    max-width: 620px;
  }

  @media (max-width: 768px) {
    .announcement-banner.cc-pro-banner .announcement-track {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.5rem;
      padding: 0.6rem 3.25rem 0.6rem 1rem;
    }

    .announcement-banner.cc-pro-banner .cc-pro-banner__right {
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
    }

    .announcement-banner.cc-pro-banner .cc-pro-banner__pill {
      max-width: 100%;
      white-space: normal;
      text-align: center;
    }

    .announcement-banner.cc-pro-banner .cc-pro-banner__cta {
      height: 32px;
      padding: 0 0.75rem;
    }
  }

  /* Full-page snow overlay (SVG flakes) */
  .cc-snow-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
    color: var(--fg);
  }

  .cc-snow-overlay__svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .cc-snowflake {
    opacity: var(--o, 0.35);
    transform: translate3d(var(--x, 0vw), -15vh, 0) scale(var(--s, 1));
    transform-origin: center;
    animation: cc-snow-fall var(--dur, 12s) linear var(--delay, 0s) infinite;
  }

  .cc-snowflake path {
    fill: none;
    stroke: var(--fg);
    stroke: color-mix(in srgb, var(--fg) 85%, transparent);
    stroke-width: 1.25;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  @keyframes cc-snow-fall {
    from {
      transform: translate3d(var(--x, 0vw), -15vh, 0) scale(var(--s, 1));
    }

    to {
      transform: translate3d(calc(var(--x, 0vw) + var(--drift, 0vw)), 115vh, 0) scale(var(--s, 1));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cc-snow-overlay {
      display: none;
    }
  }

  /* Allow explicit opt-in to snow even when reduced motion is enabled. */
  .cc-force-snow .cc-snow-overlay {
    display: block !important;
  }

  /* Sexy Dropzone (Deep Gradient & Glow) */
  @keyframes dz-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }

    50% {
      box-shadow: 0 0 20px 2px rgba(99, 102, 241, 0.4);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
  }

  #drop.dropzone {
    animation: dz-pulse 3s infinite ease-in-out;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    /* Deep Royal */
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
  }

  #drop.dropzone::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.15), transparent 60%);
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  #drop.dropzone:hover,
  #drop.dropzone.is-dragover {
    animation: none;
    transform: translateY(-4px) scale(1.01);
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 20px 60px -10px rgba(79, 70, 229, 0.5);
  }

  #drop.dropzone:hover::before {
    opacity: 1;
  }

  #drop.dropzone:hover .dz-ico {
    transform: translateY(-6px) scale(1.2);
    filter: drop-shadow(0 0 8px rgba(165, 180, 252, 0.6));
  }

  #drop.dropzone .dz-ico {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }


  /* Sexy Conversion Grid */
  .conversion-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 1rem;
  }

  .conversion-card-item {
    display: flex !important;
    align-items: center;
    gap: 16px;
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px;
    padding: 16px !important;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
  }

  .conversion-card-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  /* Color Accents by Type */
  .conversion-card-item.type-image:hover {
    border-color: rgba(56, 189, 248, 0.5) !important;
    background: rgba(56, 189, 248, 0.1) !important;
  }

  .conversion-card-item.type-audio:hover {
    border-color: rgba(236, 72, 153, 0.5) !important;
    background: rgba(236, 72, 153, 0.1) !important;
  }

  .conversion-card-item.type-video:hover {
    border-color: rgba(249, 115, 22, 0.5) !important;
    background: rgba(249, 115, 22, 0.1) !important;
  }

  .conversion-card-item.type-pdf:hover {
    border-color: rgba(16, 185, 129, 0.5) !important;
    background: rgba(16, 185, 129, 0.1) !important;
  }

  .conversion-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }

  .conv-icon {
    font-size: 2rem;
    line-height: 1;
    filter: grayscale(0.2);
    transition: filter 0.3s;
  }

  .conversion-card-item:hover .conv-icon {
    filter: grayscale(0) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  }

  .conv-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .conv-title {
    font-size: 1rem;
    color: #f1f5f9;
    display: block;
  }

  .conv-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.4;
    display: block;
  }


  /* Success Card (Result Polish) */
  .success-card {
    background: rgba(6, 78, 59, 0.5);
    /* Deep Emerald */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    /* Spread out */
    gap: 2rem;
    margin-top: 2rem;
    width: 100%;
    max-width: 1200px;
    /* Full width like dropzone */
    margin-left: auto;
    margin-right: auto;
    animation: slideUpFade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 10px 40px rgba(6, 78, 59, 0.2);
  }

  .sc-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  }

  .sc-info {
    flex: 1;
    text-align: left;
    overflow: hidden;
  }

  .sc-info h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #34d399;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .sc-info p {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    color: #ecfdf5;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
  }

  /* Giant Sexy Download Button */
  .success-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.8rem 2.5rem;
    /* Bigger button */
    border-radius: 99px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .success-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
    filter: brightness(1.1);
  }

  @keyframes slideUpFade {
    from {
      opacity: 0;
      transform: translateY(12px);
    }

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

  /* Reorganized Hero Layout */
  .hero-landing {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 2rem !important;
    padding-top: 2rem !important;
    max-width: 1400px !important;
    /* Widened from 1000px */
    width: 95% !important;
    margin: 0 auto !important;
  }

  .hero__text.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
    /* Widened text a bit, but kept readable */
  }

  /* Ensure Dropzone is centered and sized nicely */
  #drop.dropzone {
    width: 100%;
    max-width: 1200px;
    /* Much wider dropzone */
    margin: 0 auto;
  }

  /* Styling the Cancel Button */
  .action-cancel {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    padding: 0.5rem 1.5rem;
    border-radius: 99px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    margin-top: 1rem;
  }

  .action-cancel:hover {
    background: rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
  }

  /* Typography Polish for Conversion List */
  .conversion-card {
    width: 100%;
    max-width: 1200px;
    /* Match dropzone width */
  }

  .conversion-card h3 {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
  }

  .conv-title {
    font-size: 1.05rem !important;
    /* Bigger title */
    font-weight: 600 !important;
  }

  .conv-desc {
    font-size: 0.85rem !important;
    opacity: 0.8;
  }

  /* Trust Note Polish */
  .trust-note {
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.4rem 1rem;
    border-radius: 99px;
    display: inline-block;
  }

  /* =========================================
     Tool Polish V2: Premium Neon & Glass
     ========================================= */

  /* 1. The Main Card Container */
  #tool-img-any .tool-card {
    background: linear-gradient(145deg, rgba(13, 22, 35, 0.8), rgba(8, 14, 28, 0.95));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
  }

  /* 2. Header Typography */
  #tool-img-any .tool-card__header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 1.5rem;
    margin-bottom: 0;
  }

  #tool-img-any .tool-card__header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    /* "Northern Lights" Text Gradient */
    background: linear-gradient(135deg, #e2e8f0 0%, #63b3ed 50%, #90cdf4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
    text-shadow: 0 0 30px rgba(99, 179, 237, 0.2);
  }

  #tool-img-any .tool-card__subtitle {
    font-size: 1.1rem;
    color: rgba(203, 213, 224, 0.8);
    font-weight: 400;
    line-height: 1.6;
  }

  /* 3. The "Sexy" Dropzone */
  #tool-img-any .imgc-upload__cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    padding: 3.5rem 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
  }

  /* Dropzone Hover State */
  #tool-img-any .imgc-upload__cta:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: #63b3ed;
    box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.1), 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
  }

  /* The Icon Bubble */
  #tool-img-any .imgc-upload__icon {
    font-size: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* Deep glowing gradient */
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
    transition: transform 0.4s ease;
  }

  #tool-img-any .imgc-upload__cta:hover .imgc-upload__icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.6);
  }

  #tool-img-any .imgc-upload__icon::after {
    content: "↑";
    font-size: 32px;
    color: #fff;
    font-weight: 800;
  }

  #tool-img-any .imgc-upload__text {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  #tool-img-any .imgc-upload__hint {
    margin-top: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 16px;
    border-radius: 99px;
  }

  /* 4. Controls: Selects & Ranges */

  /* Labels */
  #tool-img-any label:not(.imgc-upload__cta) {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
  }

  /* Custom Select */
  #tool-img-any select {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(20, 30, 48, 0.6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 1rem 3rem 1rem 1.25rem;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  #tool-img-any select:hover,
  #tool-img-any select:focus {
    border-color: rgba(99, 179, 237, 0.6);
    background-color: rgba(20, 30, 48, 0.8);
    box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.15);
    outline: none;
  }

  /* Custom Range Slider */
  #tool-img-any input[type="range"] {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  #tool-img-any input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-top: -8px;
    /* centering */
  }

  #tool-img-any input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #3b82f6 0%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: 4px;
  }

  #tool-img-any input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.25);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
  }

  /* 5. Primary Action Button (Gradient) */
  #imgc-run {
    position: relative;
    width: 100%;
    padding: 1.25rem 2rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
    background-size: 200% auto;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    overflow: hidden;
  }

  #imgc-run:hover:not(:disabled) {
    background-position: right center;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  #imgc-run:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.4);
  }

  #imgc-run:disabled {
    opacity: 0.6;
    filter: grayscale(0.8);
    cursor: not-allowed;
  }

  /* 6. Success / Download Button Area */
  #imgc-download {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 1.1rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #064e3b;
    /* Emerald Gradient */
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  #imgc-download:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px -5px rgba(16, 185, 129, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    filter: brightness(1.05);
  }

  /* 7. Spacing & Layout Polish */
  #tool-img-any .tool-card__body {
    padding: 3rem;
    gap: 2rem;
  }

  #tool-img-any .tool-row {
    display: grid;
    gap: 1.5rem;
  }

  #tool-img-any .tool-row--inline {
    grid-template-columns: 1fr 1fr;
    align-items: flex-end;
  }

  /* Mobile responsiveness */
  @media (max-width: 640px) {
    #tool-img-any .tool-card__body {
      padding: 1.5rem;
    }

    #tool-img-any .tool-row--inline {
      grid-template-columns: 1fr;
    }

    #tool-img-any .tool-card__header h2 {
      font-size: 1.75rem;
    }
  }

  /* =========================================
     Tool Polish V3: "Big Box" & Premium Finish
     ========================================= */

  /* 1. Main Card Container */
  #tool-img-any .tool-card {
    background: linear-gradient(145deg, rgba(8, 12, 20, 0.95), rgba(4, 6, 12, 0.98));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
    border-radius: 24px;
    overflow: hidden;
  }

  #tool-img-any .tool-card__header {
    background: rgba(255, 255, 255, 0.015);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem 3rem 1.5rem;
    margin-bottom: 0;
  }

  /* Typography */
  #tool-img-any .tool-card__header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(to right, #ffffff, #a5f3fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    filter: drop-shadow(0 0 20px rgba(165, 243, 252, 0.2));
  }

  #tool-img-any .tool-card__subtitle {
    font-size: 1.1rem;
    color: rgba(203, 213, 224, 0.7);
    font-weight: 400;
    line-height: 1.6;
  }

  /* 2. THE MASSIVE DROPZONE (V3 Redesign) */
  /* The Wrapper (.imgc-upload) becomes the visual box */
  #tool-img-any .imgc-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center content vertically */
    width: 100%;
    min-height: 360px;
    /* REQUESTED: BIGGER */
    background: rgba(255, 255, 255, 0.02);
    border: 3px dashed rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
    margin-top: 1rem;
    overflow: hidden;
    /* Contain inner absolute children */
  }

  /* Hover State for the Box */
  #tool-img-any .imgc-upload:hover {
    background: rgba(20, 184, 166, 0.05);
    /* Subtle Teal tint */
    border-color: #2dd4bf;
    /* Teal-400 */
    box-shadow: 0 0 40px -10px rgba(45, 212, 191, 0.15);
    transform: translateY(-2px);
  }

  /* Hide default file input */
  #tool-img-any input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* The Trigger Label (.imgc-upload__cta) */
  /* Covers the ENTIRE box to capture clicks */
  #tool-img-any .imgc-upload__cta {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;
    cursor: pointer;
    display: flex;
    /* To center icon/text */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 3rem;
    /* Leave room for hint at bottom */
    width: 100%;
    margin-bottom: 0;
    border: none;
    box-shadow: none;
  }

  #tool-img-any .imgc-upload__cta:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
    border: none;
  }

  /* The Icon Bubble */
  #tool-img-any .imgc-upload__icon {
    font-size: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(45, 212, 191, 0.4);
    margin-bottom: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  #tool-img-any .imgc-upload:hover .imgc-upload__icon {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 0 50px rgba(45, 212, 191, 0.6);
  }

  #tool-img-any .imgc-upload__icon::after {
    content: "↑";
    font-size: 40px;
    color: #fff;
    font-weight: 800;
  }

  /* "CHOOSE FILES" Text */
  #tool-img-any .imgc-upload__text {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }

  /* 3. Integrated File Summary (The "Hint") */
  /* Sits at the bottom of the box, visible through transparent label */
  #tool-img-any .imgc-upload__hint {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 5;
    /* Below label (z-10) so visually visible but clicks hit label */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
    /* Ensure clicks pass through just in case */
    border-radius: 0 0 24px 24px;
    margin-top: 0;
  }

  /* The Filename / Status Text */
  #tool-img-any .imgc-upload__summary {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e2e8f0;
    /* Bright text */
    text-align: center;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* File Types Note */
  #tool-img-any .imgc-upload__note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* 4. Controls UI */
  #tool-img-any label:not(.imgc-upload__cta) {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
    display: block;
  }

  #tool-img-any select {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(15, 23, 42, 0.6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: #fff;
    padding: 1.25rem 3rem 1.25rem 1.5rem;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 500;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s;
  }

  #tool-img-any select:hover,
  #tool-img-any select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1);
    background-color: rgba(15, 23, 42, 0.8);
    outline: none;
  }

  #tool-img-any input[type="range"] {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    margin-top: 1rem;
  }

  #tool-img-any input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0ea5e9;
    /* Sky 500 */
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
    cursor: grab;
    transition: transform 0.2s;
    margin-top: -11px;
  }

  #tool-img-any input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: #0284c7;
  }

  #imgc-quality-label {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 700;
    color: #38bdf8;
  }

  /* 5. Buttons */
  #imgc-run {
    width: 100%;
    padding: 1.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    /* Royal Purple/Blue Gradient */
    background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
    border: none;
    border-radius: 20px;
    box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
  }

  #imgc-run:hover:not(:disabled) {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -15px rgba(79, 70, 229, 0.6);
    filter: brightness(1.1);
  }

  #imgc-run:active:not(:disabled) {
    transform: translateY(-1px);
  }

  #imgc-clear {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    padding: 1rem 2rem;
    border-radius: 16px;
    background: transparent;
    font-weight: 600;
    transition: 0.2s;
  }

  #imgc-clear:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
  }

  /* Download Success Button */
  #imgc-download {
    display: block;
    width: 100%;
    margin-top: 2rem;
    padding: 1.25rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #022c22;
    /* Deep green text */
    /* Neon Green Gradient */
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border: none;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: pulse-green 2s infinite;
  }

  @keyframes pulse-green {
    0% {
      box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    }

    70% {
      box-shadow: 0 0 0 15px rgba(74, 222, 128, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
  }

  #imgc-download:hover {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 20px 50px -10px rgba(34, 197, 94, 0.6);
  }

  /* 7. Spacing & Layout Polish */
  #tool-img-any .tool-card__body {
    padding: 3rem;
    gap: 2rem;
  }

  #tool-img-any .tool-row {
    display: grid;
    gap: 1.5rem;
  }

  #tool-img-any .tool-row--inline {
    grid-template-columns: 1fr 1fr;
    align-items: flex-end;
  }

  /* Mobile responsiveness */
  @media (max-width: 640px) {
    #tool-img-any .tool-card__body {
      padding: 1.5rem;
    }

    #tool-img-any .tool-row--inline {
      grid-template-columns: 1fr;
    }

    #tool-img-any .tool-card__header h2 {
      font-size: 1.75rem;
    }
  }

  /* =========================================
     Tool Polish V3.1: "Big Box" Fixed (Lighter & Wider)
     ========================================= */

  /* 1. Main Card Container (Reverted to V2 Lighter Style) */
  #tool-img-any .tool-card {
    background: linear-gradient(145deg, rgba(13, 22, 35, 0.8), rgba(8, 14, 28, 0.95));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
    border-radius: 24px;
    overflow: hidden;
  }

  #tool-img-any .tool-card__header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem 3rem 1.5rem;
    margin-bottom: 0;
  }

  /* Typography */
  #tool-img-any .tool-card__header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #e2e8f0 0%, #63b3ed 50%, #90cdf4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    filter: drop-shadow(0 0 20px rgba(99, 179, 237, 0.2));
  }

  #tool-img-any .tool-card__subtitle {
    font-size: 1.1rem;
    color: rgba(203, 213, 224, 0.8);
    font-weight: 400;
  }

  /* 2. THE UNIVERSAL GLOBAL DROPZONE (Fixed Width & Look) */
  .imgc-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Force full width */
    max-width: 100%;
    min-width: 0;
    /* Prevent flex overflow */
    min-height: 320px;
    background: rgba(255, 255, 255, 0.02);
    /* Smoother border look */
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    margin-top: 1rem;
    box-sizing: border-box;
    /* Critical for width */
  }

  /* Hover State */
  .imgc-upload:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: #3b82f6;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.15);
  }

  .imgc-upload input[type="file"] {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
  }

  /* Trigger Label - Full size */
  .imgc-upload__cta {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding-bottom: 2rem;
    cursor: pointer;
  }

  .imgc-upload__icon {
    font-size: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    margin-bottom: 1.25rem;
    transition: transform 0.3s ease;
  }

  .imgc-upload:hover .imgc-upload__icon {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.6);
  }

  .imgc-upload__icon::after {
    content: "↑";
    font-size: 36px;
    color: #fff;
    font-weight: 800;
  }

  .imgc-upload__text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* Hint/Summary Area */
  .imgc-upload__hint {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
  }

  .imgc-upload__summary {
    font-size: 1rem;
    color: #e2e8f0;
    font-weight: 600;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .imgc-upload__note {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
  }

  /* 4. Controls UI */
  #tool-img-any label:not(.imgc-upload__cta) {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
    display: block;
  }

  #tool-img-any select {
    appearance: none;
    background-color: rgba(20, 30, 48, 0.6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 1rem 2.5rem 1rem 1.25rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s;
  }

  #tool-img-any select:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background-color: rgba(20, 30, 48, 0.8);
  }

  #tool-img-any input[type="range"] {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    margin-top: 1rem;
  }

  #tool-img-any input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #3b82f6;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.2s;
    margin-top: -7px;
  }

  #tool-img-any input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
  }

  #imgc-quality-label {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 700;
    color: #60a5fa;
  }

  /* 5. Buttons */
  #imgc-run {
    width: 100%;
    padding: 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    /* Reverted to Royal Blue V2 style */
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  #imgc-run:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.6);
  }

  #imgc-clear {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    background: transparent;
    font-weight: 600;
  }

  #imgc-clear:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
  }

  /* Success Button */
  #imgc-download {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 1.15rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #064e3b;
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  #imgc-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px -4px rgba(16, 185, 129, 0.6);
  }

  /* Layout */
  #tool-img-any .tool-card__body {
    padding: 2.5rem;
    gap: 2rem;
  }

  /* Reset tool-row to simple block or flex to strictly avoid grid squashing */
  #tool-img-any .tool-row {
    display: block;
    margin-bottom: 1.5rem;
  }

  #tool-img-any .tool-row--inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: flex-end;
    margin-bottom: 0;
  }

  /* Mobile */
  @media (max-width: 640px) {
    #tool-img-any .tool-card__body {
      padding: 1.5rem;
    }

    #tool-img-any .tool-row--inline {
      grid-template-columns: 1fr;
    }

    #tool-img-any .tool-card__header h2 {
      font-size: 1.75rem;
    }
  }

  /* =========================================
     Tool Polish V3.2: NEON PROGRESS BAR ("NC STYLE")
     ========================================= */

  /* The Status Text Container becomes the Bar */
  #tool-img-any .tool-status {
    position: relative;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    overflow: hidden;
    /* Default state */
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1;
  }

  /* When Progress is Active */
  #tool-img-any .tool-status.is-progressing {
    background: rgba(15, 23, 42, 0.6);
    /* Darker backing */
    border-color: rgba(45, 212, 191, 0.4);
    /* Teal border */
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px rgba(45, 212, 191, 0.15) inset;
  }

  /* The Progress Fill Layer */
  #tool-img-any .tool-status.is-progressing::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* Cover full area, but gradient controls visible width */
    z-index: -1;
    background-image: linear-gradient(90deg,
        rgba(45, 212, 191, 0.2) 0%,
        rgba(45, 212, 191, 0.5) var(--progress),
        transparent var(--progress));
    transition: --progress 0.1s linear;
    /* Note: requires @property for smooth, but works as choppy update in standard CSS */
  }

  /* Add a "Leading Edge" Glow Line */
  #tool-img-any .tool-status.is-progressing::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--progress);
    width: 2px;
    background: #fff;
    box-shadow: 0 0 8px #fff, 0 0 16px #2dd4bf;
    transition: left 0.1s linear;
    opacity: 0.9;
    z-index: 0;
  }

  /* =========================================
     Tool Polish V3.3: BACKGROUND FIX (Transparency)
     ========================================= */

  /* Make the card much more transparent to show the background GIF */
  #tool-img-any .tool-card {
    background: rgba(8, 14, 28, 0.45) !important;
    /* Low opacity dark tint */
    backdrop-filter: blur(12px) !important;
    /* Reduced blur */
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  }

  /* Ensure header doesn't block it either */
  #tool-img-any .tool-card__header {
    background: rgba(255, 255, 255, 0.01) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* =========================================
     Tool Polish V3.4: LIGHTNESS FIX ("Airy transparency")
     ========================================= */

  /* Make the card much lighter and more transparent */
  #tool-img-any .tool-card {
    background: rgba(15, 23, 42, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }

  /* =========================================
     Tool Polish V3.4: LIGHTNESS FIX ("Airy transparency")
     ========================================= */

  /* Make the card much lighter and more transparent (Specific to img-any) */
  #tool-img-any .tool-card {
    background: rgba(15, 23, 42, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }

  /* Ensure header is fully clear */
  #tool-img-any .tool-card__header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* =========================================
     Tool Polish V4: GLOBAL ROLLOUT ("Apply to All")
     ========================================= */

  /* Apply the same "Local Style" to ALL other tool cards */
  /* We exclude #tool-img-any here simply to respect the "Avoid Main Converter" instruction 
     mechanically, though visually they will match because of the rule above. */
  .tool-card:not(#tool-img-any .tool-card) {
    background: rgba(15, 23, 42, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    /* Ensure uniform rounding */
  }

  .tool-card__header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* Global Tool Status (Progress Bar Style) */
  /* Global Tool Status (Progress Bar Style) - Updated */
  .tool-status {
    position: relative;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    overflow: hidden;
    /* Default "Idle" State - Premium Card Look */
    background: rgba(15, 23, 42, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Subtle border */
    z-index: 1;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
  }

  .tool-status:empty {
    display: none;
  }

  /* Apply Neon Progress logic globally if the tool sets 'is-progressing' */
  .tool-status.is-progressing {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(45, 212, 191, 0.4);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px rgba(45, 212, 191, 0.15) inset;
  }

  .tool-status.is-progressing::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-image: linear-gradient(90deg,
        rgba(45, 212, 191, 0.2) 0%,
        rgba(45, 212, 191, 0.5) var(--progress, 0%),
        transparent var(--progress, 0%));
    transition: width 0.1s linear;
    /* Fallback */
  }

  .tool-status.is-progressing::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--progress, 0%);
    width: 2px;
    background: #fff;
    box-shadow: 0 0 8px #fff, 0 0 16px #2dd4bf;
    transition: left 0.1s linear;
    opacity: 0.9;
    z-index: 0;
  }

  /* =========================================
     Tool Polish V4.1: LEGACY PROGRESS BARS -> NEON
     ========================================= */

  /* If tools use <progress> or .progress-bar, styling them to match */
  progress {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    border: none;
  }

  progress::-webkit-progress-bar {
    background: rgba(255, 255, 255, 0.1);
  }

  progress::-webkit-progress-value {
    background: linear-gradient(90deg, #14b8a6 0%, #2dd4bf 100%);
    box-shadow: 0 0 10px rgba(45, 212, 191, 0.5);
  }

  progress::-moz-progress-bar {
    background: linear-gradient(90deg, #14b8a6 0%, #2dd4bf 100%);
    box-shadow: 0 0 10px rgba(45, 212, 191, 0.5);
  }

  /* Common class-based bars often used in older tools */
  .bar,
  .progress-bar {
    background: linear-gradient(90deg, #14b8a6 0%, #2dd4bf 100%) !important;
    box-shadow: 0 0 12px rgba(45, 212, 191, 0.4) !important;
    border-radius: 999px !important;
  }

  /* =========================================
     Tool Polish V4.2: INNER UI UPGRADE ("The Stylee")
     ========================================= */

  /* 1. UPGRADE LEGACY FILE INPUTS TO "DROPZONES" */
  /* This targets tools like Batch Resize, PDF tools, etc. */
  .tool-card .file-input {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;
    /* Big dropzone feel */
    background: rgba(15, 23, 42, 0.4);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
  }

  .tool-card .file-input:hover {
    background: rgba(15, 23, 42, 0.6);
    border-color: #2dd4bf;
    /* Neon Teal Hover */
    box-shadow: 0 0 30px rgba(45, 212, 191, 0.15);
    transform: translateY(-2px);
  }

  /* Hide the actual file input completely (Off-Screen) 
     We rely on the <label> wrapper to trigger the click. 
     This guarantees no "Double Button" artifact. */
  label.file-input input[type="file"],
  .tool-card .file-input input,
  .file-input input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    left: -9999px !important;
    /* Move fully out of view */
    visibility: hidden !important;
  }

  /* The Text inside the legacy file input container -> Make it a CTA Button */
  .tool-card .file-input span {
    pointer-events: none;
    background: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Gradient Text */
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1.2rem 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
  }

  /* Add Folder Icon for "Real Button" feel */
  .tool-card .file-input span::before {
    content: "📂";
    /* Simple unicode fallback, or use CSS icon if available */
    -webkit-text-fill-color: initial;
    color: #2dd4bf;
    font-size: 1.5rem;
    filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.4));
  }

  /* 2. UPGRADE SLIDERS (Ranges) */
  .tool-range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    outline: none;
    cursor: pointer;
  }

  .tool-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 15px #2dd4bf;
    border: 2px solid #2dd4bf;
    margin-top: -8px;
    /* Correct vertical alignment */
    transition: transform 0.2s ease;
  }

  .tool-range input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 25px #2dd4bf;
  }

  /* 3. UPGRADE SELECTS & INPUTS */
  .tool-card select,
  .tool-card input[type="text"],
  .tool-card input[type="number"] {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .tool-card select:focus,
  .tool-card input:focus {
    border-color: #2dd4bf !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2);
    outline: none;
  }

  /* 4. PREMIUM BUTTONS */
  .tool-card .btn {
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 2rem;
    transition: all 0.3s ease;
  }

  /* Primary Action Buttons (Exclude Download) */
  .tool-card .btn:not(.btn--ghost):not([id$="-download"]) {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    border: none;
  }

  .tool-card .btn:not(.btn--ghost):not([id$="-download"]):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.6);
    filter: brightness(1.1);
  }

  /* 5. SUCCESS/DOWNLOAD BUTTONS (Green Gradient) */
  /* Target any button inside a download-slot or holding the download ID pattern */
  .tool-card .download-slot .btn,
  .tool-card .btn[id$="-download"] {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 1.15rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #064e3b !important;
    /* Dark green text for contrast */
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    border: none !important;
    border-radius: 16px;
    box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
  }

  .tool-card .download-slot .btn:hover,
  .tool-card .btn[id$="-download"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px -4px rgba(16, 185, 129, 0.6);
    filter: brightness(1.1);
  }

  /* PDF Format Selector (Segmented Control) */
  .visual-format-group {
    display: inline-flex;
    background: var(--bg-surface-2, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    vertical-align: middle;
  }

  .btn-format {
    background: transparent;
    border: none;
    color: var(--fg-muted);
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9em;
    transition: all 0.2s;
  }

  .btn-format:hover {
    background: var(--bg-surface-hover, rgba(255, 255, 255, 0.05));
    color: var(--fg);
  }

  .btn-format.active {
    background: var(--prim);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  html[data-theme="vintage"] .visual-format-group {
    border-color: var(--border);
    background: rgba(0, 0, 0, 0.2);
  }

  /* OCR Language Selector (Multi-select) */
  .ocr-combobox {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    /* var(--radius-sm) */
    background: var(--bg-surface-2, rgba(255, 255, 255, 0.05));
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    transition: box-shadow 0.2s, border-color 0.2s;
  }

  .ocr-combobox:focus-within {
    border-color: var(--prim);
    box-shadow: 0 0 0 2px var(--prim-ring, rgba(124, 58, 237, 0.2));
  }

  .ocr-tag {
    background: var(--prim-surface, rgba(124, 58, 237, 0.1));
    border: 1px solid var(--prim-border, rgba(124, 58, 237, 0.2));
    color: var(--prim-fg, #7c3aed);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.85em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
  }

  html[data-theme="dark"] .ocr-tag,
  html[data-theme="vintage"] .ocr-tag {
    color: var(--prim-2, #a78bfa);
  }

  .ocr-tag-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.1em;
    padding: 0;
    line-height: 1;
    opacity: 0.6;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ocr-tag-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
  }

  .ocr-input {
    border: none;
    background: transparent;
    flex: 1;
    min-width: 80px;
    outline: none !important;
    /* Managed by parent */
    padding: 4px;
    color: var(--fg);
    font-size: 0.95em;
  }

  /* Code/JSON Editor Textareas */
  .code-editor-area {
    font-family: 'Fira Code', 'Roboto Mono', monospace;
    padding: 1rem;
    border: 1px solid var(--border);
    background: var(--bg-surface-2);
    border-radius: 8px;
    line-height: 1.5;
    font-size: 0.9em;
    resize: vertical;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .code-editor-area:focus {
    border-color: var(--prim);
    box-shadow: 0 0 0 2px var(--prim-ring, rgba(124, 58, 237, 0.2));
    outline: none;
  }

  html[data-theme="vintage"] .code-editor-area {
    background: rgba(0, 0, 0, 0.3);
    border-color: var(--border);
    color: var(--fg);
  }

  /* 6. UTILITY TOOL ENHANCEMENTS (Phase 5) */
  .result-card {
    background: var(--bg-surface-2, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border);
    border-radius: var(--radius-2, 8px);
    padding: 1rem;
    margin-top: 1rem;
    font-family: var(--font-mono, monospace);
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.9em;
    color: var(--fg);
    min-height: 240px;
  }

  /* Success state for Copy buttons */
  .btn.btn--copy-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border-color: #059669 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    pointer-events: none;
  }

  /* Responsive Split Grid */
  .grid--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
  }

  @media (max-width: 768px) {
    .grid--split {
      grid-template-columns: 1fr;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cc-main-toolcard,
    .main-converter-card {
      transition: none;
    }

    .cc-main-toolcard:hover,
    .cc-main-toolcard:focus-within,
    .main-converter-card:hover,
    .main-converter-card:focus-within {
      transform: none;
    }
  }

  /* AD HIDER - Added 2025-12-29
     Hides Ezoic & Google AdSense without removal
     Can be safely removed when needed
     NOTE: intentionally avoids generic ad-* selectors to keep other networks (e.g. Adsierra) unaffected. */
  .ezoic-ad,
  [id*="ezoic"],
  [class*="ezoic"],
  iframe[src*="ezoic"],
  .adsbygoogle,
  ins.adsbygoogle,
  iframe[src*="googlesyndication"],
  iframe[src*="doubleclick"],
  div[data-ad-status],
  div[data-ad-client],
  ins[data-ad-client],
  ins[data-ad-slot] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
    pointer-events: none !important;
  }