/* ===============================
   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;

  --shadow-sm: 0 6px 16px rgba(0,0,0,.20);
  --shadow-md: 0 10px 30px rgba(0,0,0,.28);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.35);

  /* DARK (kept, slightly clearer) */
  --bg: #0b111a;
  --bg-elev: #101728;
  --bg-soft: #141d2e;
  --panel: #0e1626;
  --panel-2: #101a2f;
  --glass: rgba(255,255,255,.06);

  --fg: #e6ebf7;
  --fg-2: #c8d2ea;
  --muted: #9fb0cc;

  --stroke: rgba(255,255,255,.08);
  --stroke-2: rgba(255,255,255,.12);

  --prim: #78b6ff;
  --prim-2: #4d8dff;
  --accent: #7bffef;

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

  --chip-bg: rgba(255,255,255,.06);
  --chip-stroke: rgba(255,255,255,.10);

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

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

/* DIM-LIGHT (non-blinding, matches glass background) */
html[data-theme="light"]{
  --bg: #0f1520;          /* page */
  --bg-elev: #131b29;     /* elevated */
  --bg-soft: #172235;     /* cards */
  --panel: #131c2e;       /* panels */
  --panel-2: #161f34;
  --glass: rgba(255,255,255,.06);

  --fg: #eaf1ff;
  --fg-2: #cbd7ee;
  --muted: #9fb0cc;

  --stroke: rgba(255,255,255,.07);
  --stroke-2: rgba(255,255,255,.12);

  --chip-bg: rgba(255,255,255,.05);
  --chip-stroke: rgba(255,255,255,.10);

  --shadow-sm: 0 6px 16px rgba(0,0,0,.26);
  --shadow-md: 0 10px 30px rgba(0,0,0,.34);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.42);

  --prim: #89b6ff;
  --prim-2: #4d8dff;
  --accent: #ffcc8a;
}

/* ---------- 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: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15.5px;
}

/* 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,.20), transparent 70%),
    radial-gradient(900px 500px at 85% -20%, rgba(123,255,239,.12), transparent 60%),
    radial-gradient(700px 500px at 70% 120%, rgba(60,110,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
    var(--bg);
  filter: saturate(1.1);
}
body::after{
  /* diagonal energy streaks */
  content:"";
  position: fixed; inset:-20%;
  background:
    repeating-linear-gradient(115deg,
      rgba(94,195,255,.06) 0 8px,
      transparent 8px 28px);
  mix-blend-mode: screen;
  animation: travel 18s linear infinite;
  z-index:-1;
  pointer-events:none;
}
@keyframes travel{
  to{ transform: translate3d(-8%, -8%, 0); }
}

/* ---------- Containers ---------- */
.container{
  width:min(1100px, 92vw);
  margin: 36px auto 60px;
}

/* ---------- Header / Nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--gap-3);
  padding: 16px 24px;
  backdrop-filter: saturate(1.1) blur(6px);
  background: linear-gradient(180deg, rgba(3,9,35,.75), rgba(3,9,35,.35) 30%, transparent);
  border-bottom: 1px solid var(--stroke);
}
.nav__left, .nav__right{ display:flex; align-items:center; gap: var(--gap-2); }
.nav__right{ justify-self: end; }

/* Brand: keep only left big logo, remove tiny dot/flash */
.brand{
  font-weight: 800; letter-spacing:.2px;
  display:flex; align-items:center; gap:10px;
  color: var(--fg);
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.brand img{ width:40px; height:40px; border-radius:14px; box-shadow: var(--shadow-sm); }

/* hide extra spark/dot + inline flash icon */
.brand .sparkle, .flash-ico{ display:none !important; }

/* ---------- 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); }
.chip--discord{
  background: linear-gradient(180deg, rgba(115,130,255,.14), rgba(115,130,255,.06));
}

/* Theme toggle (left) */
.theme-switch{ display:flex; align-items:center; gap:10px; }
#themeToggle{
  border:1px solid var(--chip-stroke);
  background: var(--chip-bg);
  border-radius: 14px;
  width:44px; height:30px;
  display:grid; place-items:center;
  cursor:pointer;
  position:relative; overflow:hidden;
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
#themeToggle:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
#themeToggle .sun, #themeToggle .moon{
  width:16px; height:16px; display:block;
  background: currentColor; mask-size: contain; -webkit-mask-size: contain; opacity:.85;
}
#themeToggle .sun{ mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12m0 4a1 1 0 0 1-1-1v-1.5a1 1 0 0 1 2 0V21a1 1 0 0 1-1 1M5.64 17.36a1 1 0 0 1-1.41 0l-1.06-1.06a1 1 0 0 1 1.41-1.41l1.06 1.06a1 1 0 0 1 0 1.41M4 13H2.5a1 1 0 0 1 0-2H4a1 1 0 0 1 0 2m1.64-9.36a1 1 0 0 1 0 1.41L5.22 6.11A1 1 0 1 1 3.81 4.7l1.06-1.06a1 1 0 0 1 1.41 0M12 3a1 1 0 0 1 1 1v1.5a1 1 0 0 1-2 0V4a1 1 0 0 1 1-1m7.36 2.64a1 1 0 0 1 0 1.41l-1.06 1.06a1 1 0 0 1-1.41-1.41l1.06-1.06a1 1 0 0 1 1.41 0M21.5 11H20a1 1 0 0 1 0-2h1.5a1 1 0 0 1 0 2m-2.2 6.3-1.06 1.06a1 1 0 1 1-1.41-1.41l1.06-1.06a1 1 0 1 1 1.41 1.41"/></svg>') center/contain no-repeat; }
#themeToggle .moon{ mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M21 12.8A8.5 8.5 0 1 1 11.2 3a7 7 0 1 0 9.8 9.8Z"/></svg>') center/contain no-repeat; }
.theme-label{ font-size:12.5px; color: var(--muted); }

/* ---------- 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: rgba(94,195,255,.12);
  color: #cfeaff;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(94,195,255,.22);
  font-weight:700; font-size:12.5px;
}
.hero h2{
  margin: 10px 0 6px;
  font-size: 28px; letter-spacing:.2px;
}
.hero .muted{ color: var(--muted); }
.waves{
  display:grid; grid-template-columns: 1.2fr .9fr; gap: var(--gap-4);
}
@media (max-width: 900px){ .waves{ grid-template-columns: 1fr; } }

/* Dropzone */
.dropzone{
  background: linear-gradient(180deg, rgba(255,255,255,.04), 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;
}
.dropzone:hover{ border-color: rgba(94,195,255,.6); transform: translateY(-1px); 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; }

/* Presets */
.presets{ margin-top: 12px; display:flex; flex-wrap:wrap; gap: 8px; }
.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); }

/* ---------- Panels / Cards ---------- */
.panel{
  margin-top: 18px;
  border-radius: var(--radius-4);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-md);
  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(180deg, var(--bg-soft), transparent 70%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}
.card__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg: linear-gradient(180deg, #5ec3ff, #2ca3ff);
  --btn-fg: #071326;
  --btn-border: rgba(255,255,255,.18);

  display:inline-flex; align-items:center; justify-content:center;
  height:38px; min-width: 108px;
  padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg); font-weight: 800; letter-spacing:.2px;
  box-shadow: 0 8px 24px rgba(46,165,255,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  cursor: pointer;
}
.btn:hover{ transform: translateY(-1px); filter: saturate(1.05); box-shadow: 0 12px 30px rgba(46,165,255,.42), inset 0 1px 0 rgba(255,255,255,.3); }
.btn:active{ transform: translateY(0); box-shadow: 0 6px 18px rgba(46,165,255,.35) inset; }

.btn.btn--ghost{
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  --btn-fg: var(--fg);
  --btn-border: var(--stroke-2);
  box-shadow:none;
}

/* 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: 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);
}
.file .chip{ padding:8px 10px; }

/* ---------- Actions & progress ---------- */
.actions{ display:flex; align-items:center; gap: 10px; margin-top: 8px; }

.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; }

/* ---------- 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);
}

/* ---------- Language popover ---------- */
.lang-popover{
  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;
}
.lang-row{
  display:grid; grid-template-columns: 24px 1fr auto;
  align-items:center; gap:10px;
  padding:8px 10px; border-radius:12px;
  cursor:pointer;
}
.lang-row:hover{ background: rgba(255,255,255,.06); }

/* ---------- Utility ---------- */
.muted{ color: var(--muted); }
.is-hidden{ display:none !important; }

/* Remove any stray small “status ball” in header if present */
.nav .dot, .nav .status, .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;
}

/* 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{
  /* neutral glass */
  --pill-bg: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  --pill-stroke: rgba(255,255,255,.18);
  --pill-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  --pill-shadow-hover: 0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10);

  /* 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 40%);
}

[data-theme="light"]{
  --pill-bg: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  --pill-stroke: rgba(18, 37, 66, .12);
  --pill-shadow: 0 6px 16px rgba(69, 116, 179, .15), inset 0 1px 0 rgba(255,255,255,.9);
  --pill-shadow-hover: 0 10px 28px rgba(69,116,179,.2), inset 0 1px 0 rgba(255,255,255,1);
  --chip-fg: #0e1b2b;
  --chip-muted: color-mix(in oklab, #0e1b2b, transparent 35%);
}

/* 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; }
.chip .label{ font-weight:700; }
.chip .sub{ font-weight:600; opacity:.7; color:var(--chip-muted); margin-top:.15rem; }

/* 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 */
}
/* ===== Premium <input type="file"> styling ===== */
:root{
  --file-btn-bg:#2a3342;
  --file-btn-bg-h:#364056;
  --file-btn-txt:#e9f1ff;
  --file-chip-bg:rgba(255,255,255,.04);
  --file-border:rgba(255,255,255,.10);
  --file-ring:rgba(99,179,255,.55);
  --file-text:rgba(235,242,255,.82);
}
:root[data-theme="light"]{
  --file-btn-bg:#e9f2ff;
  --file-btn-bg-h:#d9e8ff;
  --file-btn-txt:#0b2a55;
  --file-chip-bg:rgba(0,0,0,.04);
  --file-border:rgba(0,0,0,.10);
  --file-ring:rgba(16,109,255,.35);
  --file-text:#122033;
}

/* wrapper look for the whole control */
input[type="file"]{
  font: inherit;
  color: var(--file-text);
  background: var(--file-chip-bg);
  border: 1px solid var(--file-border);
  border-radius: 12px;
  padding: .45rem .5rem;                /* space around filename text */
  max-width: 100%;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

/* the actual button (Chromium/Firefox) */
input[type="file"]::file-selector-button{
  font: inherit;
  font-weight: 700;
  letter-spacing:.2px;
  color: var(--file-btn-txt);
  background: linear-gradient(180deg, var(--file-btn-bg), color-mix(in oklab, var(--file-btn-bg) 80%, #000));
  border: 0;
  border-radius: 10px;
  padding: .5rem .85rem;
  margin-right: .75rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .06s ease, filter .2s ease, background .2s ease, box-shadow .2s ease;
  position: relative;
}

/* small folder icon flair */
input[type="file"]::file-selector-button::before{
  content:"📁";
  margin-right:.45rem;
  filter: saturate(1.1);
}

/* hover / active / focus */
input[type="file"]:hover::file-selector-button{ background: var(--file-btn-bg-h); }
input[type="file"]:active::file-selector-button{ transform: translateY(1px); }
input[type="file"]:focus-visible{
  box-shadow: 0 0 0 4px var(--file-ring);
  border-color: color-mix(in oklab, var(--file-ring) 60%, transparent);
}

/* file name text area */
input[type="file"]::-ms-value,
input[type="file"]{ 
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Safari/WebKit fallback */
input[type="file"]::-webkit-file-upload-button{
  font: inherit;
  font-weight: 700;
  color: var(--file-btn-txt);
  background: linear-gradient(180deg, var(--file-btn-bg), color-mix(in oklab, var(--file-btn-bg) 80%, #000));
  border:0;
  border-radius: 10px;
  padding:.5rem .85rem;
  margin-right:.75rem;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .06s ease, filter .2s ease, background .2s ease;
}
input[type="file"]:hover::-webkit-file-upload-button{ background: var(--file-btn-bg-h); }
input[type="file"]:active::-webkit-file-upload-button{ transform: translateY(1px); }

/* disabled state */
input[type="file"][disabled],
input[type="file"]:disabled{
  opacity:.6;
  cursor:not-allowed;
}
input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled::-webkit-file-upload-button{
  filter: grayscale(.2) brightness(.9);
  cursor:not-allowed;
}

/* compact variant if you need tighter controls */
.input-file--sm{ padding:.35rem .4rem; }
.input-file--sm::file-selector-button,
.input-file--sm::-webkit-file-upload-button{ padding:.35rem .7rem; border-radius: 9px; }
/* ===== Static footer: readable, not pinned ===== */
:root{
  --foot-bg: rgba(10,16,25,.55);
  --foot-border: rgba(255,255,255,.10);
  --foot-text: #e9f2ff;
}
:root[data-theme="light"]{
  --foot-bg: rgba(245,248,255,.85);
  --foot-border: rgba(10,16,25,.08);
  --foot-text: #0e2038;
}

.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; }
}
/* ===== PATCH — Light-mode <input type="file"> visibility ===== */
html[data-theme="light"] input[type="file"]{
  /* Stronger contrast for the filename area */
  color: #0f2036;                         /* filename text */
  background: rgba(6, 22, 44, .06);       /* chip bg a bit darker */
  border-color: rgba(6, 22, 44, .22);     /* clearer outline */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),  /* subtle highlight */
    0 1px 0 rgba(6,22,44,.04);            /* soft top edge */
}

/* Make the button stay readable and not “wash out” */
html[data-theme="light"] input[type="file"]::file-selector-button,
html[data-theme="light"] input[type="file"]::-webkit-file-upload-button{
  color: #0b2a55;
  background: linear-gradient(180deg, #e9f2ff, #dbe9ff);
  box-shadow:
    0 6px 16px rgba(69,116,179,.18),
    inset 0 1px 0 rgba(255,255,255,.95);
  border-radius: 10px;
}

html[data-theme="light"] input[type="file"]:hover::file-selector-button,
html[data-theme="light"] input[type="file"]:hover::-webkit-file-upload-button{
  background: linear-gradient(180deg, #e4eeff, #d4e3ff);
}

/* Crisper focus ring so the whole control is obvious */
html[data-theme="light"] input[type="file"]:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(32, 120, 255, .30),    /* outer ring */
    inset 0 0 0 1px rgba(32, 120, 255, .35);
  border-color: rgba(32,120,255,.45);
}

/* When disabled, keep it legible but clearly inactive */
html[data-theme="light"] input[type="file"]:disabled{
  background: rgba(6,22,44,.05);
  color: rgba(15,32,54,.55);
  border-color: rgba(6,22,44,.12);
}
html[data-theme="light"] input[type="file"]:disabled::file-selector-button,
html[data-theme="light"] input[type="file"]:disabled::-webkit-file-upload-button{
  background: linear-gradient(180deg, #eef4ff, #e6f0ff);
  color: rgba(11,42,85,.6);
  box-shadow: none;
}
/* ========= AURORA-LITE v2 — mid-blue light (low glare) ========= */

html[data-theme="light"]{
  /* Mid, gentle blues */
  --bg:        #DFE7F3;   /* page */
  --bg-elev:   #E9F0FA;   /* elevated surfaces */
  --bg-soft:   #E3EBF7;   /* card tint */
  --panel:     #F4F8FF;   /* panel top */
  --panel-2:   #EAF2FF;   /* panel bottom */
  --glass:     rgba(20, 48, 88, .04);

  --fg:        #0F2238;   /* main text */
  --fg-2:      #1E3552;   /* secondary */
  --muted:     #5C6E89;   /* paragraphs */

  --stroke:    rgba(15, 34, 56, .12);
  --stroke-2:  rgba(15, 34, 56, .18);

  --chip-bg:      rgba(15, 34, 56, .06);
  --chip-stroke:  rgba(15, 34, 56, .14);

  /* Actions keep a mid-blue (less neon) */
  --prim:     #3F7FE6;
  --prim-2:   #6AA0F0;
  --accent:   #5DE0D0;

  /* Softer shadows */
  --shadow-sm: 0 4px 12px rgba(15, 34, 56, .10);
  --shadow-md: 0 8px 22px rgba(15, 34, 56, .14);
  --shadow-lg: 0 18px 42px rgba(15, 34, 56, .16);
}

/* Header glass (muted, not shiny) */
html[data-theme="light"] .nav{
  background: linear-gradient(180deg, rgba(223,231,243,.92), rgba(223,231,243,.55) 45%, transparent);
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(7px) saturate(1.06);
}

/* Hero: calm gradient, no hot highlights */
html[data-theme="light"] .hero{
  background:
    linear-gradient(145deg, rgba(63,127,230,.08), rgba(232,240,251,.92) 46%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border-color: var(--stroke);
  box-shadow: var(--shadow-lg);
}
html[data-theme="light"] .hero .hero-chip{
  background: rgba(63,127,230,.12);
  color:#0F2238;
  border-color: rgba(63,127,230,.22);
}

/* Pills/chips — flatter glass, toned down */
html[data-theme="light"] .chip{
  background: linear-gradient(180deg, rgba(248,250,255,.88), rgba(248,250,255,.72));
  border-color: var(--chip-stroke);
  box-shadow: 0 4px 12px rgba(15,34,56,.10), inset 0 1px 0 rgba(255,255,255,.7);
  color: var(--fg);
}
html[data-theme="light"] .chip--primary{
  background: linear-gradient(180deg, rgba(140,178,245,.28), rgba(63,127,230,.16));
  border-color: color-mix(in oklab, #3F7FE6, #0F2238 70%);
  box-shadow: 0 8px 20px rgba(63,127,230,.18);
}
html[data-theme="light"] .chip--accent{
  background: linear-gradient(180deg, rgba(255,186,90,.24), rgba(255,148,48,.14));
  border-color: color-mix(in oklab, #ff9a3c, #3b1d00 62%);
}

/* Panels/cards */
html[data-theme="light"] .panel{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-color: var(--stroke);
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .card{
  background: linear-gradient(180deg, var(--bg-soft), transparent 70%);
  border-color: var(--stroke);
}

/* Preset pills */
html[data-theme="light"] .pill{
  background: linear-gradient(180deg, rgba(248,250,255,.86), rgba(248,250,255,.7));
  border-color: var(--stroke-2);
  color: var(--fg);
}
html[data-theme="light"] .pill:hover{
  border-color: var(--prim);
  box-shadow: 0 6px 16px rgba(63,127,230,.16);
}

/* Inputs/selects/sliders — clearer borders */
html[data-theme="light"] .template input[type="number"],
html[data-theme="light"] .template input[type="range"],
html[data-theme="light"] .template select{
  background: linear-gradient(180deg, rgba(15,34,56,.05), rgba(15,34,56,.025));
  color: var(--fg);
  border-color: var(--stroke-2);
}
html[data-theme="light"] .template input:focus,
html[data-theme="light"] .template select:focus{
  border-color: var(--prim);
  box-shadow: 0 0 0 3px rgba(63,127,230,.22);
}

/* Dropzone */
html[data-theme="light"] .dropzone{
  background: linear-gradient(180deg, rgba(15,34,56,.04), rgba(15,34,56,.02));
  border-color: rgba(15,34,56,.26);
  color: var(--fg-2);
}
html[data-theme="light"] .dropzone:hover{
  border-color: rgba(63,127,230,.5);
  box-shadow: var(--shadow-md);
}

/* Buttons — mid-blue */
html[data-theme="light"] .btn{
  --btn-bg: linear-gradient(180deg, #7FA7F0, #3F7FE6);
  --btn-fg: #0A1626;
  --btn-border: rgba(15,34,56,.14);
  color: var(--btn-fg);
  border-color: var(--btn-border);
  box-shadow: 0 10px 24px rgba(63,127,230,.22), inset 0 1px 0 rgba(255,255,255,.28);
}
html[data-theme="light"] .btn.btn--ghost{
  --btn-bg: linear-gradient(180deg, rgba(15,34,56,.06), rgba(15,34,56,.035));
  --btn-fg: var(--fg);
  --btn-border: var(--stroke-2);
}

/* Progress bar */
html[data-theme="light"] .progress__bar{
  background: rgba(15,34,56,.10);
  border-color: var(--stroke);
}
html[data-theme="light"] .progress__bar > span{
  background: linear-gradient(90deg, #5DE0D0, #7FA7F0 50%, #3F7FE6);
}

/* File input — high readability, calmer tones */
html[data-theme="light"] input[type="file"]{
  color: #0F2238;
  background: rgba(15,34,56,.06);
  border: 1px solid rgba(15,34,56,.22);
  border-radius: 12px;
  padding: .45rem .5rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-theme="light"] input[type="file"]::file-selector-button,
html[data-theme="light"] input[type="file"]::-webkit-file-upload-button{
  color: #0B2444;
  background: linear-gradient(180deg, #F0F5FF, #E1EBFF);
  border: 0;
  border-radius: 10px;
  padding: .5rem .85rem;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(15,34,56,.14), inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] input[type="file"]:hover::file-selector-button,
html[data-theme="light"] input[type="file"]:hover::-webkit-file-upload-button{
  background: linear-gradient(180deg, #E9F2FF, #DAE7FF);
}
html[data-theme="light"] input[type="file"]:focus-visible{
  outline: none;
  border-color: rgba(63,127,230,.55);
  box-shadow: 0 0 0 3px rgba(63,127,230,.22), inset 0 1px 0 rgba(255,255,255,.85);
}

/* Footer */
html[data-theme="light"] .foot{
  background:
    radial-gradient(60% 120% at 50% 100%, rgba(63,127,230,.10), transparent 60%),
    rgba(234,241,252,.92);
  border-top: 1px solid rgba(15,34,56,.10);
  color: #0F2238;
}

/* Focus ring for light */
html[data-theme="light"] :focus-visible{
  box-shadow: 0 0 0 3px rgba(63,127,230,.26);
}
/* === LIGHT: Darker (-20%), calm mid-blue (≈15% blue + 5% white) === */
html[data-theme="light"]{
  /* darker, low-glare tokens */
  --bg:      #C6D6EE;  /* base */
  --bg-elev: #D6E2F6;  /* slightly lighter panels */
  --bg-soft: #CFDBF2;  /* soft fills */

  /* keep your existing fg/muted; these focus the background only */
}

html[data-theme="light"] body{
  /* calm gradient with no hotspots */
  background:
    linear-gradient(180deg, #D6E2F6 0%, #C9D9F1 50%, #C1D2EC 100%) !important;
  filter: saturate(0.94);
}

/* remove shiny overlays; replace with ultra-soft wash only */
html[data-theme="light"] body::before{
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(52,102,190,.06), transparent 70%),
    radial-gradient(700px 420px at 85% -20%, rgba(88,190,178,.03), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%),
    var(--bg) !important;
  filter: none !important;
}
html[data-theme="light"] body::after{
  background: none !important;
  animation: none !important;
  mix-blend-mode: normal !important;
}

/* Panels/cards tuned to sit on the darker light background */
html[data-theme="light"] .panel{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-color: rgba(12,28,48,.12);
  box-shadow: 0 10px 24px rgba(12,28,48,.12);
}
html[data-theme="light"] .card{
  background: linear-gradient(180deg, var(--bg-soft), transparent 70%);
  border-color: rgba(12,28,48,.14);
  box-shadow: 0 6px 16px rgba(12,28,48,.10);
}
/* ==== ConvertCraft LIGHT (Mid-Blue, non-shiny, GIF-friendly) ==== */
/* Drop this at the very end of app.css */

html[data-theme="light"]{
  /* calm mid-blue text palette (not harsh) */
  --fg: #0f233a;          /* main text */
  --fg-2: #203f60;        /* headings/strong */
  --muted: #4f6c8c;       /* secondary */

  /* strokes tuned for glassy layers */
  --stroke: rgba(16, 38, 70, .10);
  --stroke-2: rgba(16, 38, 70, .16);

  /* keep brand accents the same; only UI surface changes below */
}

/* Let your page-wide GIF shine through in LIGHT mode */
html[data-theme="light"] body{
  background: transparent !important;   /* reveal the GIF behind */
  filter: none !important;              /* no extra saturation/shine */
}

/* Kill the shiny energy overlays only for light mode */
html[data-theme="light"] body::before,
html[data-theme="light"] body::after{
  content: none !important;
}

/* Glass recipe for nav / panels / cards (soft, readable, non-glaring) */
:root{
  /* shared glass tokens */
  --glass-bg: rgba(255,255,255,.60);
  --glass-bg-strong: rgba(255,255,255,.72);
  --glass-bg-soft: rgba(255,255,255,.50);
  --glass-border: rgba(16,38,70,.16);
  --glass-shadow: 0 10px 30px rgba(16,38,70,.10);
}

/* Nav: subtle glass so GIF is visible */
html[data-theme="light"] .nav{
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(1.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.02);
  box-shadow: var(--glass-shadow);
}

/* Hero: slightly stronger glass for readability, no glare */
html[data-theme="light"] .hero{
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Panels / Cards: consistent glass */
html[data-theme="light"] .panel{
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-theme="light"] .card{
  background: var(--glass-bg-soft);
  border-color: var(--glass-border);
  box-shadow: 0 6px 18px rgba(16,38,70,.08);
}

/* Chips / Pills (lang, discord, coffee): glass, no glare */
html[data-theme="light"] .chip{
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: 0 6px 16px rgba(16,38,70,.08), inset 0 1px 0 rgba(255,255,255,.55);
  color: var(--fg);
}
html[data-theme="light"] .chip--primary{
  background: linear-gradient(180deg, rgba(157,212,255,.28), rgba(42,107,255,.14));
  border-color: rgba(42,107,255,.25);
}
html[data-theme="light"] .chip--accent{
  background: linear-gradient(180deg, rgba(255,184,74,.24), rgba(255,140,42,.14));
  border-color: rgba(255,140,42,.25);
}

/* Buttons: reduce shine */
html[data-theme="light"] .btn{
  --btn-border: rgba(16,38,70,.16);
  box-shadow: 0 8px 22px rgba(42,107,255,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="light"] .btn.btn--ghost{
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  --btn-fg: var(--fg);
  --btn-border: var(--glass-border);
}

/* Dropzone: readable on GIF, no bright halo */
html[data-theme="light"] .dropzone{
  background: rgba(255,255,255,.55);
  border-color: rgba(16,38,70,.22);
  color: var(--fg-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-theme="light"] .dropzone:hover{
  border-color: rgba(42,107,255,.45);
  box-shadow: 0 10px 24px rgba(16,38,70,.12);
}

/* File list tiles: keep strong readability */
html[data-theme="light"] .file{
  background: rgba(255,255,255,.60);
  border-color: var(--glass-border);
}

/* Inputs/selects in template area: match glass */
html[data-theme="light"] .template input[type="number"],
html[data-theme="light"] .template input[type="range"],
html[data-theme="light"] .template select{
  background: rgba(255,255,255,.55);
  border-color: var(--glass-border);
  color: var(--fg);
}

/* Progress bar on light GIF */
html[data-theme="light"] .progress__bar{
  background: rgba(0,0,0,.08);
  border-color: var(--glass-border);
}
html[data-theme="light"] .progress__txt{ color: var(--fg-2); }

/* Footer: readable, not pinned, glass */
html[data-theme="light"] .foot{
  background: rgba(255,255,255,.65);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-theme="light"] .foot p{ color: var(--fg); }

/* Premium input[type=file] (your existing block) — light tune */
html[data-theme="light"]{
  --file-btn-bg:#e6eefb;
  --file-btn-bg-h:#d8e6fb;
  --file-btn-txt:#0f233a;
  --file-chip-bg:rgba(255,255,255,.55);
  --file-border:rgba(16,38,70,.16);
  --file-ring:rgba(42,107,255,.30);
  --file-text:#173251;
}
  /* === LIGHT MODE: let the GIF show + vintage glass === */
/* Put this at the very end of app.css */

html[data-theme="light"],
html[data-theme="light"] body{
  background: transparent !important;   /* reveal your GIF layer behind */
}

/* Remove previous bright overlays; re-add only a soft vignette */
html[data-theme="light"] body::before{ content:none !important; }
html[data-theme="light"] body::after{
  content:"";
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  /* subtle edge darkening for vintage look, clear center */
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(30,50,90,.08), transparent 55%),
    radial-gradient(120% 120% at 50% 110%, rgba(10,20,30,.28), transparent 55%);
}

/* Calmer mid-blue text palette (non-glaring) */
html[data-theme="light"]{
  --fg:   #0f2238;
  --fg-2: #223e5f;
  --muted:#4f6b8a;
  --glass-border: rgba(20,40,70,.15);
}

/* Panels / Hero / Cards: semi-transparent glass so GIF is visible */
html[data-theme="light"] .hero{
  background: rgba(255,255,255,.66);
  border-color: var(--glass-border);
  backdrop-filter: blur(10px) saturate(1.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.02);
  box-shadow: 0 10px 28px rgba(20,40,70,.12);
}
html[data-theme="light"] .panel{
  background: rgba(255,255,255,.58);
  border-color: var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(20,40,70,.10);
}
html[data-theme="light"] .card{
  background: rgba(255,255,255,.52);
  border-color: var(--glass-border);
  box-shadow: 0 6px 18px rgba(20,40,70,.08);
}

/* Top nav: glass, not blocking the GIF */
html[data-theme="light"] .nav{
  background: rgba(255,255,255,.60);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(20,40,70,.10);
}

/* Dropzone & inputs: readable on moving GIF */
html[data-theme="light"] .dropzone{
  background: rgba(255,255,255,.60);
  border-color: rgba(20,40,70,.22);
  color: var(--fg-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-theme="light"] .template input[type="number"],
html[data-theme="light"] .template input[type="range"],
html[data-theme="light"] .template select{
  background: rgba(255,255,255,.56);
  border-color: var(--glass-border);
  color: var(--fg);
}

/* File input: stronger contrast for the “No file chosen” label */
html[data-theme="light"] input[type="file"]{
  background: rgba(255,255,255,.60);
  border: 1px solid var(--glass-border);
  color: #173251;                /* filename text */
}
html[data-theme="light"] input[type="file"]::file-selector-button,
html[data-theme="light"] input[type="file"]::-webkit-file-upload-button{
  background: linear-gradient(180deg, #e6eefb, #d8e6fb);
  color: #0f2238;
  border-radius: 10px;
}

/* Buttons: tone down shine */
html[data-theme="light"] .btn{
  --btn-border: rgba(20,40,70,.16);
  box-shadow: 0 8px 20px rgba(42,107,255,.16), inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="light"] .btn.btn--ghost{
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  --btn-fg: var(--fg);
  --btn-border: var(--glass-border);
}

/* Footer: glass, readable, not pinned */
html[data-theme="light"] .foot{
  background: rgba(255,255,255,.62);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* =========================
   PATCH: Lang chip + Light mode glass
   ========================= */

/* 1) Bigger Language chip */
#langBtn.chip.chip--lang{
  font-size: 15.5px;
  padding: .66rem 1.05rem;
  min-height: 44px;
  border-radius: 999px;
}
#langBtn .flag{ width: 24px; height: 16px; border-radius: 3px; }
#langBtn:active{ transform: scale(.98); }

/* 2) Light mode – mid-blue, non-shiny, keep glass/“gif” streaks visible */
html[data-theme="light"]{
  /* soften base + panels */
  --bg:        #d7e3f1;   /* mid blue with a touch of grey */
  --bg-elev:   #eef3f9;
  --bg-soft:   #e6eef7;
  --panel:     rgba(255,255,255,.88);
  --panel-2:   rgba(255,255,255,.88);
  --glass:     rgba(22, 54, 96, .08);

  /* text and strokes tuned for readability on mid blue */
  --fg:   #0e1b2b;
  --fg-2: #1e2d46;
  --muted:#5b6b8a;

  --stroke:  rgba(10, 28, 55, .10);
  --stroke-2:rgba(10, 28, 55, .14);

  /* gentler shadows in light */
  --shadow-sm: 0 6px 14px rgba(30,60,120,.10);
  --shadow-md: 0 10px 24px rgba(30,60,120,.14);
  --shadow-lg: 0 22px 50px rgba(30,60,120,.16);
}

/* keep hero/panels airy (not opaque) so the glassy bg can read through */
html[data-theme="light"] .hero{
  background:
    linear-gradient(145deg,
      rgba(120, 185, 255, .10),
      rgba(255,255,255,.80) 24%,
      rgba(255,255,255,.84) 70%);
  border-color: rgba(10,28,55,.12);
}
html[data-theme="light"] .panel{
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.88));
  border-color: rgba(10,28,55,.12);
}
html[data-theme="light"] .card{
  background: linear-gradient(180deg, var(--bg-soft), transparent 70%);
  border-color: rgba(10,28,55,.12);
  box-shadow: var(--shadow-sm);
}

/* Make the animated “glassy gif” streaks visible in light mode */
html[data-theme="light"] body::before{
  /* subtle blue atmosphere, lower brightness than before */
  background:
    radial-gradient(900px 420px at 14% -10%, rgba(42,107,255,.18), transparent 70%),
    radial-gradient(700px 380px at 86% -14%, rgba(123,210,255,.10), transparent 62%),
    radial-gradient(700px 500px at 70% 120%, rgba(42,107,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
    var(--bg);
  opacity: .82;
  filter: saturate(1.0);
}

/* key: use MULTIPLY on light so the diagonal energy lines show up,
   without blowing out whites (screen was too shiny on light) */
html[data-theme="light"] body::after{
  background:
    repeating-linear-gradient(115deg,
      rgba(42,107,255,.14) 0 8px,
      transparent 8px 28px);
  mix-blend-mode: multiply;
  opacity: .35;
  animation: travel 18s linear infinite;
}

/* Inputs/Choose File – ensure filename text stays readable in light */
html[data-theme="light"] input[type="file"]{
  color: var(--fg) !important;
  background: rgba(0,0,0,.03);
  border-color: rgba(10,28,55,.14);
}
html[data-theme="light"] input[type="file"]::file-selector-button,
html[data-theme="light"] input[type="file"]::-webkit-file-upload-button{
  background: linear-gradient(180deg, #e3edfb, #d6e6ff);
  color: #0e1b2b;
  box-shadow: 0 6px 14px rgba(30,60,120,.12), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Slightly stronger focus ring in light, but not flashy */
html[data-theme="light"] :focus-visible{
  box-shadow: 0 0 0 3px rgba(42,107,255,.22);
}
/* =========================
   HEADER OPTIMIZATION + BIGGER BRAND
   ========================= */

/* Bar: tighter blur, softer border, comfortable height */
.nav{
  padding: 14px 20px;
  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 */
.brand{
  gap: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1;
  /* Bigger wordmark */
  font-size: clamp(20px, 1.5rem + 0.6vw, 30px);
}
.brand img{
  /* Bigger bolt tile, soft glow */
  width: clamp(44px, 3.1rem + 0.6vw, 56px);
  height: clamp(44px, 3.1rem + 0.6vw, 56px);
  border-radius: 16px;
  box-shadow:
    0 10px 26px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Keep only the left bolt (you already removed the extra one) */
.brand .sparkle, .flash-ico{ 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;
  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{
  height: 42px;
  min-width: 112px;
  border-radius: 12px;
  font-size: 14.2px;
}

/* 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){
  .brand{
    font-size: clamp(18px, 1.2rem + 0.4vw, 24px);
  }
  .brand img{
    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: 12vw; top: 24vh;
  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 16px rgba(0,0,0,.25));
}
#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;
}

/* 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); } }

/* Light-mode tuning so it’s not shiny; still shows the arcs */
html[data-theme="light"] body::before{
  --arc-top: #8db8ff;
  --arc-bot: #94eddc;
  filter: saturate(1.02) brightness(.98); /* kill harsh shine */
}

/* 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; }
}