:root{
  --bg: #0b1220;
  --panel: #0e172a;
  --card: #0a1426;
  --glass: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.18);
  --accent: #19c37d;
  --accent-2: #7dffc9;
  --text: #e8faf3;
  --muted: #9bd9c1;
  --footer-h: 56px;
  --lift: 6vh;
  --header-h: 72px;
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  padding-bottom: var(--footer-h);
}
@supports (padding: max(0px)){
  body{ padding-bottom: max(var(--footer-h), env(safe-area-inset-bottom)); }
}
a{color:inherit;text-decoration:none}

.bg-anim{
  position: fixed; inset: 0; z-index: -1; pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(1200px 900px at -20% -10%, rgba(25,195,125,.05), transparent 60%),
    radial-gradient(900px 900px at 120% 10%, rgba(125,255,201,.04), transparent 60%),
    var(--bg);
}

.float-icon{
  position:absolute; top:0; left:0;
  width: var(--size,22px); height: var(--size,22px);
  opacity:0;
  animation: fadeFloat var(--dur,18s) linear var(--delay,0s) forwards;
  will-change: transform, opacity;
}
@keyframes fadeFloat{
  0% { transform: translate(var(--x,0vw), var(--y,0vh)) rotate(var(--rot,0deg)); opacity: 0; }
  20% { opacity: var(--alpha, .26); }
  90% { opacity: var(--alpha, .26); }
  100% {
    transform: translate(
      calc(var(--x,0vw) + var(--dx,0vw)),
      calc(var(--y,0vh) - calc(var(--rise,40vh) + 6vh))
    ) rotate(var(--rot,0deg));
    opacity: 0;
  }
}

.container{max-width:1440px;margin:0 auto;padding:20px}

.header{
  position: sticky; top:0; z-index: 20;
  background: linear-gradient(180deg, rgba(11,18,32,0.85), rgba(11,18,32,0.65));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:10px;
  overflow:hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#082014; font-weight:900; letter-spacing:.5px;
  border: 1px solid var(--border);
}
.logo-img{ width:100%; height:100%; object-fit: cover; display:block; }

.brand-title{font-weight:900;letter-spacing:.4px}
.brand-sub{font-size:12px;color:var(--muted)}
.nav{display:flex;gap:10px;flex-wrap:wrap}

.btn{
  appearance:none;border:none;outline:none;cursor:pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.00)),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#082014;
  padding:9px 12px;border-radius:12px;font-weight:800;
  line-height:1; transition: transform .15s ease, filter .15s ease;
}
.btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  filter: none !important;
}
.btn.ghost{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00)), rgba(255,255,255,0.03);
  color: var(--text); border:1px solid var(--border);
}
.btn:hover{filter:brightness(1.05); transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn.ghost:hover{background: rgba(255,255,255,0.06)}

.main{display:grid;gap:22px}
.hero{display:grid;grid-template-columns:1fr 360px;gap:18px;margin-top:6px}
.hero-left h1{margin:4px 0 6px;font-size:30px}
.hero-actions{display:flex;gap:10px;margin-top:10px}
.kpi{
  display:grid;grid-template-columns:1fr;gap:8px;
  background:
    linear-gradient(180deg, rgba(25,195,125,.10), rgba(25,195,125,.02)),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
  border:1px solid var(--border);border-radius:14px;padding:14px;
}
.label{color:var(--muted);font-size:12px}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  grid-auto-flow: dense;
}
@media (min-width:1280px){
  .grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #tts, #qr{ grid-column: span 2; }
}
@media (max-width:1080px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){ .grid{grid-template-columns:1fr} }

.card{
  position: relative;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(125,255,201,0.08), transparent 50%),
    linear-gradient(180deg, rgba(10,20,38,0.96), rgba(10,20,38,0.82));
  border:1px solid var(--border);
  border-radius: var(--radius);
  background-clip: padding-box;
  padding:14px;
  display:flex;flex-direction:column;gap:12px;
  min-height: 210px;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.card::before{
  content:""; position:absolute; inset:0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  opacity:.55; pointer-events:none;
}
.card::after{
  content:""; position:absolute; inset:0;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 0% 0%, rgba(125,255,201,0.03), transparent 40%);
  pointer-events:none;
}
.card:hover{ transform: translateY(-2px); border-color: var(--border-strong); }
.card:focus-within{ border-color: rgba(25,195,125,.35); }

.card-head{
  position: relative; display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:8px;
}
.card-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, rgba(25,195,125,.28), rgba(125,255,201,.12) 30%, rgba(255,255,255,.06) 60%, rgba(255,255,255,0) 100%);
  opacity:.8;
}
.pill{
  padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;color:#082014;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--accent), var(--accent-2));
}
.pill.ghost{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)), rgba(255,255,255,.02);
  color:var(--muted); border:1px solid var(--border);
}

.muted{color:var(--muted)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stack{display:grid;gap:8px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.card *{ min-width: 0; }
.card .row{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.card .row > *{ min-width: 0; }
.card .actions{ flex-wrap: wrap; }

input, select{
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)), #0c1830;
  border:1px solid var(--border); border-radius:12px;
  padding:10px 12px;color:var(--text);outline:none;font-size:14px;
  transition: border-color .15s ease;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
input[type="range"]{ width:100%; }
input:focus, select:focus{ border-color: rgba(25,195,125,.35); }

#tts{ overflow: visible; min-height: auto; }
#tts .stack{ gap: 6px; }
#tts .row{ gap: 10px; }
#tts .actions{ gap: 8px; flex-wrap: wrap; }
#tts input[type="range"]{ width:100%; }
#tts select{ width:100%; min-width:0; }

#qrForm{
  display: grid;
  grid-template-columns: 1fr min(42%, 280px);
  gap: 12px;
  align-items: start;
}
#qrForm > .row,
#qrForm > .actions,
#qrForm > p,
#qrForm > label{ grid-column:1; min-width:0; }

#qrForm .qr-preview{
  grid-column:2;
  grid-row: 1 / -1;
  align-self:start;
  height:auto;
  min-height:200px;
  border:1px dashed var(--border);
  border-radius:12px;
  background-clip: padding-box;
  padding:10px 10px 12px;
  background: radial-gradient(60% 80% at 50% 0%, rgba(125,255,201,.06), transparent 70%), rgba(255,255,255,.01);
  display:grid;
  justify-items:center;
  align-items:start;
  overflow:hidden;
}
#qrForm .qr-preview img{
  display:block;
  width:auto; height:auto;
  max-width:100%;
  max-height:220px;
  object-fit:contain;
}

#qr.card{
  grid-template-rows: auto auto auto !important;
}

@media (max-width:980px){
  #qrForm{ grid-template-columns:1fr; }
  #qrForm .qr-preview{ grid-column:auto; grid-row:auto; min-height:140px; }
  #qrForm .qr-preview img{ max-height:160px; }
}

.coming{
  display:grid;place-items:center;min-height:120px;border:1px dashed var(--border);
  border-radius:12px;color:var(--muted);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 6px, rgba(255,255,255,0) 6px 12px);
}

.footer{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: var(--footer-h); width: 100%;
  border-top: 1px solid var(--border);
  background: linear-gradient(0deg, rgba(11,18,32,0.85), rgba(11,18,32,0.65));
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px;
  font-size: 12px;
}
.footer-inner{
  width: 100%;
  max-width: 1440px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.footer-right{ justify-self: end; display: inline-flex; gap: 8px; align-items: center; }
.footer-left{ justify-self: start; }

.copy-pill{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:var(--text);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  line-height:1;
}
.copy-pill:hover{ filter:brightness(1.05); }
.copy-pill.copied{ border-color: rgba(25,195,125,.45); }
.copy-pill.copied .copy-status{ color: var(--accent-2); }

.copy-pill .copy-label{
  flex:1;
  min-width:0;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.copy-pill .copy-label strong{ color: var(--accent-2); }

.copy-pill .copy-status{
  flex:none;
  white-space:nowrap;
  color:var(--muted);
}

.btn.sm{ padding: 6px 10px; border-radius: 10px; font-size: 13px; }
.btn.icon{ display: inline-flex; align-items: center; gap: 6px; }
.btn.icon svg{ display:block; width:16px; height:16px; }

.center-page{ min-height: calc(100svh - 96px - var(--footer-h)); display: grid; place-items: center; padding: 40px 20px; }
.center-card{ width: min(720px, 100%); margin: 0 auto; transform: translateY(calc(-1 * var(--lift))); }
.btn.lg{ padding: 12px 18px; border-radius: 12px; font-size: 16px; }
.signup-hero{ text-align: center; margin: 6px 0 2px; }
@media (max-width: 640px){ .center-card{ transform: translateY(-2vh); } }

.main-fit{
  height: auto;
  min-height: calc(100svh - var(--header-h) - var(--footer-h));
  display: grid;
  grid-template-rows: minmax(0, auto) 1fr;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: visible;
}
.main-fit .hero{ grid-template-columns: 1.2fr 0.8fr; gap: 12px; align-items: center; margin-top: 0; }
.main-fit .hero-left h1{ font-size: 26px; margin: 2px 0 4px; }
.main-fit .hero-actions{ gap: 8px; margin-top: 8px; }
.main-fit .kpi{ padding: 12px; gap: 6px; border-radius: 12px; }
.main-fit .grid{
  grid-auto-rows: auto;
  align-items: start;
  align-content: start;
}
.main-fit #tts, .main-fit #qr{ grid-column: span 2; }
.card-tight{ padding: 12px; min-height: auto; display: grid; grid-template-rows: auto auto 1fr; }
.main-fit .card{
  align-self: start;
  min-height: auto;
}
.card-tight .card-head h3, .main-fit .card .card-head h3{ font-size: 16px; }
.card-tight .pill, .main-fit .card .pill{ transform: scale(.92); }
.small{ font-size: 12px; }
.stack-tight{ gap: 6px; } .row-tight{ gap: 8px; } .actions-tight{ gap: 8px; }
.main-fit input, .main-fit select{ padding: 8px 10px; font-size: 14px }
.qr-small{ min-height: 90px; } .qr-small img{ max-width: 120px; max-height: 120px; }

.center-card.card{
  transform: translateY(calc(-1 * var(--lift)));
  transition: border-color .2s ease;
  cursor: default;
}
.center-card.card:hover{
  transform: translateY(calc(-1 * var(--lift))) !important;
}
@media (max-width: 640px){
  .center-card.card,
  .center-card.card:hover{
    transform: translateY(-2vh) !important;
  }
}

.card.glow-pulse::after{
  border: 2px solid var(--accent-2);
  opacity: 0;
  animation: glowRing .55s ease-out 0s 2;
}
@keyframes glowRing{
  0% { opacity: 0; }
  25%{ opacity: 1; }
  60%{ opacity: 0; }
  100%{ opacity: 0; }
}

.mobile-only{ display:none !important; }
.desktop-only{ display:block !important; }

@media (max-width: 780px){
  .main-fit{
    height: auto;
    min-height: calc(100svh - var(--header-h) - var(--footer-h));
    overflow: visible;
    padding-bottom: calc(var(--footer-h) + 8px);
  }

  .hero{
    grid-template-columns: 1fr !important;
    gap: 12px;
    margin-top: 2px;
  }
  .hero-left h1{ font-size: 24px; }
  .kpi{
    grid-template-columns: repeat(3, minmax(0,1fr));
    text-align: center;
  }

  .main-fit .grid,
  .grid{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    gap: 12px;
  }
  #tts, #qr{ grid-column: auto !important; min-height: auto; }

  .grid > .card.desktop-only{ display: none !important; }
  .mobile-only{ display: block !important; }

  .mobile-only .coming{
    text-align: center;
    justify-items: center;
    align-items: center;
  }
  .mobile-only .card-head::after{ display: none; }

  #qrForm{ grid-template-columns: 1fr !important; }
  #qrForm .qr-preview{ min-height: 140px; }
  #qrForm .qr-preview img{ max-height: 160px; }

  .main-fit input,
  .main-fit select{
    padding: 10px 12px;
    font-size: 15px;
  }

  .copy-pill{ max-width: 78vw; }
  .copy-pill .copy-label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.card:has(.coming) .card-head::after{
  display: none;
  content: none;
}

@media (min-width: 1080px){
  #qrForm .qr-preview{
    min-height: 170px;
    padding: 8px 8px 10px;
  }
  #qrForm .qr-preview img{
    max-height: 177px;
  }
}