/* ====== Base / Theme ====== */
:root{
  --bg: #070b10;
  --panel: #0d1219;
  --panel-2: #0a0f16;
  --text: #e6e9ee;
  --muted: #9aa0a6;

  --blue: #2dd4ff;      /* electric cyan */
  --blue-d: #0ea5e9;    /* depth blue */
  --blue-glow: rgba(45,212,255,.30);

  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position: relative;
  overflow-x: hidden;
}

/* Because we removed floating auth, we can reduce bottom space */
main { padding-bottom: 120px; }

/* === Background: vivid, animated, but tasteful === */
/* 1) Ultra-light glowing nodes with gentle pulse (adds life) */
html::before{
  content:"";
  position: fixed; inset:0; z-index:-4; pointer-events:none;
  background:
    radial-gradient(circle at 50% 10%, rgba(45,212,255,0.20), transparent 42%),
    radial-gradient(circle at 75% 26%, rgba(14,165,233,0.12), transparent 46%),
    radial-gradient(circle at 24% 28%, rgba(45,212,255,0.12), transparent 48%);
  animation: pulse 9s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

/* 2) Grid lines + large glows centered near hero */
body::before{
  content:"";
  position: fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(45,212,255,0.15) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, rgba(14,165,233,0.14) 0 1px, transparent 1px 14px),
    radial-gradient(1200px 680px at 50% 6%, rgba(45,212,255,.18), transparent 56%),
    radial-gradient(1100px 640px at 50% 16%, rgba(14,165,233,.12), transparent 60%),
    var(--bg);
  filter: saturate(1.1);
}

/* 3) Diagonal trace drift (more vibrant than before) */
body::after{
  content:"";
  position: fixed; inset:-60%; z-index:-2; pointer-events:none;
  background:
    repeating-linear-gradient(115deg, transparent 0 14px, rgba(45,212,255,0.12) 14px 15px),
    repeating-linear-gradient(-65deg, transparent 0 18px, rgba(14,165,233,0.10) 18px 19px);
  mix-blend-mode: lighten;
  opacity:.85;
  animation: drift 18s linear infinite;
}

@keyframes drift{
  from{ transform: translate3d(0,0,0) }
  to  { transform: translate3d(70px,40px,0) }
}
@keyframes pulse{
  0%   { opacity: 0.25; transform: scale(1); }
  50%  { opacity: 0.48; transform: scale(1.05); }
  100% { opacity: 0.25; transform: scale(1); }
}

/* ====== Hero (robot + title closer to top with backglow) ====== */
.site-header.hero{
  position: relative;
  text-align: center;
  margin: 12px 0 0;            /* pulled up */
  padding: 22px 16px 6px;      /* tighter */
}

.site-header.hero::before{
  /* Backglow behind hero area (kept) */
  content:"";
  position:absolute; inset:-10px 0 0 0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(520px 240px at 50% 30%, rgba(45,212,255,.20), transparent 62%),
    radial-gradient(420px 200px at 50% 30%, rgba(14,165,233,.14), transparent 66%);
  mask-image: radial-gradient(520px 240px at 50% 30%, #000 55%, transparent 72%);
  opacity:.95;
}

.hero-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;                   /* a tad tighter */
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.hero-robot {
  max-width: 140px;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(45,212,255,.38)) brightness(1.06);
}

.hero-text { text-align: left; max-width: 680px; }
.hero-text h1 { margin: 0 0 6px; font-size: 1.9rem; }
.hero-text p  { margin: 0; color: #cfd3d7; }

@media (max-width: 640px) {
  .hero-wrap { flex-direction: column; text-align: center; }
  .hero-text { text-align: center; }
  .hero-robot { max-width: 132px; }
  .hero-text h1 { font-size: 1.6rem; }
}

/* ====== Panels ====== */
.converter-box, .premium-section, #loginSection {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid #17212c;
  border-radius: var(--radius);
  padding: 18px;
  margin: 18px auto;
  max-width: 920px;
  box-shadow: 0 20px 44px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.38);
}

/* Converter content */
textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  background: #0a1117;
  color: var(--text);
  border: 1px solid #1a2733;
  border-radius: 12px;
  padding: 12px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea:focus {
  border-color: var(--blue-d);
  box-shadow: 0 0 0 3px rgba(14,165,233,.22);
}
#outputText { margin-top: 12px; }

/* Convert button row */
.convert-actions{
  display:flex; align-items:center; gap:14px; margin-top: 10px; margin-bottom: 2px;
}

/* Helper text */
.note { margin-top: 14px; font-size: .95rem; color:#cfd3d7; }
#usageInfo { margin-top: 10px; font-weight: 600; }
#timerDisplay { color: var(--muted); font-size: .95rem; }

/* ====== Buttons / Links ====== */
button, .premium-button {
  display: inline-block;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color: #051018;
  font-weight: 700;
  border: none;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  min-width: 180px;
  text-align: center;
  box-shadow: 0 12px 28px var(--blue-glow);
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}
button:hover, .premium-button:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(45,212,255,.40); }
button:active, .premium-button:active { transform: translateY(0); box-shadow: 0 8px 20px rgba(45,212,255,.28); }

/* ====== Premium Section ====== */
.premium-section h2 { margin-top: 0; }
.trust-row {
  margin-top: 10px; color: var(--muted); font-size: .9rem;
  display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap;
}
.trust-row .pill {
  border:1px solid #253140; border-radius:999px; padding:6px 10px; background:#121a22;
}

/* ====== Auth (inline) ====== */
#loginSection h2 { margin: 8px 0; }
#loginForm, #registerForm {
  display: grid; gap: 8px; grid-template-columns: 1fr; max-width: 520px; margin: 8px auto 12px;
}
#loginForm input, #registerForm input {
  background: #0a1117; color: var(--text);
  border: 1px solid #1a2733; border-radius: 10px; padding: 10px 12px;
}
#loginForm input:focus, #registerForm input:focus {
  border-color: var(--blue-d); box-shadow: 0 0 0 3px rgba(14,165,233,.22);
}
#loginMessage, #registerMessage { min-height: 20px; color: #cfd3d7; }

/* ====== Footer & Support ====== */
footer { text-align:center; padding: 28px 16px 40px; color: var(--muted); }
.footer-links { margin-top: 6px; color: var(--muted); }
.foot-link { color: var(--muted); text-decoration:none; }
.foot-link:hover { color:#e6e9ee; text-decoration:underline; }

/* Bottom-left, tucked, never overlapping */
.support-pill{
  position: fixed; left: 8px; bottom: 8px; z-index: 40;
  display:inline-block;
  padding:8px 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color:#061019; font-weight: 700; text-decoration:none;
  box-shadow: 0 10px 22px var(--blue-glow);
  font-size: .9rem;
  white-space: nowrap;
}
.support-pill:hover{ transform: translateY(-1px); box-shadow: 0 16px 30px rgba(45,212,255,.36); }

/* ====== Responsive ====== */
@media (max-width: 640px){
  .converter-box, .premium-section, #loginSection { margin: 14px 12px; }
  button, .premium-button { width: 100%; min-width: 0; }
  main { padding-bottom: 140px; }
}