/* ============================================================
   SuperTwentyPlus URL Shortener v2.2 — Neon UX
   Layout identical to v2.0 + toast + footer scaling
   ============================================================ */

:root {
  --bg:#0a0e14; --text:#e9f1ff; --muted:#9ab0c9;
  --cyan:#00e5ff; --magenta:#ff2bd6; --green:#27d985; --red:#ff4d6d;
  --card:#0d1220cc;
  --glow:0 0 12px rgba(0,229,255,.65),0 0 24px rgba(255,43,214,.35);
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --footer-h:86px;
}
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 50% -10%,rgba(0,229,255,.12),transparent 60%),
    radial-gradient(900px 600px at 80% 0%,rgba(255,43,214,.10),transparent 60%),
    var(--bg);
}

/* Background grid */
.neon-grid{
  position:fixed;inset:0;
  background:
    linear-gradient(rgba(0,229,255,.1)1px,transparent 1px)0 0/40px 40px,
    linear-gradient(90deg,rgba(255,43,214,.1)1px,transparent 1px)0 0/40px 40px;
  pointer-events:none;z-index:0;
}

/* Floating menu */
.floating-menu{
  position:fixed;top:16px;left:16px;right:16px;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-radius:999px;background:#0b0f18bf;
  backdrop-filter:blur(8px);border:1px solid rgba(0,229,255,.25);
  box-shadow:var(--glow);z-index:1000;
}
.floating-menu .brand{font-family:Orbitron,sans-serif;font-weight:800;letter-spacing:.07em}
.floating-menu a{color:var(--text);text-decoration:none;padding:6px 10px;border-radius:999px}
.floating-menu a:hover{outline:1px solid rgba(255,43,214,.4);box-shadow:0 0 10px rgba(255,43,214,.4)}
.hamburger{background:none;border:none;color:var(--text);font-size:1.25rem;cursor:pointer}
.menu-rail{list-style:none;margin:0;padding:0;display:flex;gap:10px;position:absolute;right:56px;top:8px;
transform-origin:right center;transform:scaleX(0);opacity:0;transition:.3s}
.menu-rail.open{transform:scaleX(1);opacity:1}
@media(max-width:720px){.menu-rail{right:10px;top:56px;display:none;flex-direction:column}.menu-rail.open{display:flex}}

/* Container */
.container{max-width:900px;margin:120px auto calc(80px + var(--footer-h));padding:0 16px;position:relative;z-index:1}
.header h1{font-family:Orbitron,sans-serif;margin:0 0 6px;text-shadow:var(--glow)}
.sub{color:var(--muted);margin:0 0 24px}

/* Card */
.card{background:var(--card);border:1px solid rgba(0,229,255,.25);
border-radius:var(--radius);box-shadow:var(--shadow),var(--glow);
padding:20px;margin:20px 0}

/* Neon heading */
.neon-title{font-family:Orbitron,sans-serif;color:var(--cyan);
text-shadow:0 0 12px var(--cyan),0 0 24px rgba(0,229,255,.4);
margin:0 0 12px;text-transform:uppercase;font-size:1.1rem;letter-spacing:.05em}

/* Input rows */
.row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
input[type="url"],input[type="text"],input[type="email"]{
width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
background:#0f1420;color:var(--text);outline:none}
input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.18)}
.readonly{background:#0b1220}
.label{display:block;margin:4px 0 8px;color:var(--muted)}

/* Buttons */
.btn{padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
cursor:pointer;background:#111827;color:var(--text)}
.btn:hover{box-shadow:0 0 12px rgba(0,229,255,.35)}
.btn.primary{background:linear-gradient(135deg,rgba(0,229,255,.25),rgba(255,43,214,.18));border-color:rgba(0,229,255,.35)}
.btn.danger{border-color:rgba(255,77,109,.55);background:rgba(255,77,109,.15)}

/* Advanced grid */
.adv-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:720px){.adv-grid{grid-template-columns:1fr}}

/* Result */
.result-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;margin-top:10px}

/* QR */
.qr-container{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px}
.qr-container img{width:160px;height:160px;border-radius:12px;border:1px solid rgba(0,229,255,.35);image-rendering:pixelated}

/* Toast */
.toast{
  position:fixed;bottom:110px;left:50%;transform:translateX(-50%);
  background:#111827;padding:12px 20px;border-radius:10px;
  color:var(--text);font-size:.95rem;box-shadow:0 0 10px rgba(0,229,255,.4);
  opacity:0;transition:opacity .4s ease;z-index:1500;
}
.toast.show{opacity:1}

/* Footer */
.footer.fixed{position:fixed;left:0;right:0;bottom:0;height:var(--footer-h);
display:flex;flex-direction:column;justify-content:center;align-items:center;
background:#0b0f18e6;border-top:1px solid rgba(0,229,255,.25);
box-shadow:0 -6px 24px rgba(0,0,0,.35),var(--glow);
padding:10px 16px;z-index:1000;text-align:center;color:var(--text)}
.footer-line{font-family:Orbitron,sans-serif;font-size:.9rem}
.footer-tip{color:var(--muted);font-size:.8rem}
@media(max-width:720px){.footer-line{font-size:.85rem}.footer-tip{font-size:.75rem}}

/* Modal */
dialog{border:none;border-radius:12px;max-width:840px;width:92%;background:#0d1220;
color:var(--text);box-shadow:var(--glow);padding:0}
dialog article{display:flex;flex-direction:column;height:80vh}
dialog header{display:flex;justify-content:space-between;align-items:center;
padding:10px 16px;background:#111827;border-bottom:1px solid rgba(255,255,255,.1)}
dialog iframe{flex:1;border:none;width:100%}