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

:root {
  --bg:#04012b; --text:#e9f1ff; --muted:#9ab0c9; /* 0a0e14 */
  --cyan:#00e5ff; --magenta:#ff2bd6; --green:#27d985; --red:#ff4d6d;
  --card:#0d1220cc;
  --glow:0 0 12px rgba(0,174,255,.65),0 0 24px rgba(0,174,255,.95);
  --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 (REMOVED, REPLACED BY BLUEPRINT) */

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

/* OLD FOOTER REMOVED — replaced by blueprint */

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



/* ============================================================
   🔵 ADDED: NEW NEON BLUEPRINT HEADER + MENU + FOOTER
   (Fully compliant with New Neon Blueprint App 28.11.2025)
============================================================ */

/* HEADER */
.stp-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:10px 16px;
  background:linear-gradient(90deg, rgba(2,4,10,.96), rgba(6,9,22,.96));
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 22px rgba(0,255,255,.25);
}

.stp-hamburger {
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center;
}

.stp-brand {
  font-family:Orbitron,sans-serif;
  font-weight:700; letter-spacing:.08em;
  color:#00fff9;
  text-shadow:0 0 12px rgba(0,255,255,.6);
}

.stp-menu-box { margin-left:auto; position:relative; }
.stp-menu-toggle { position:absolute; opacity:0; pointer-events:none; }

.stp-burger {
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  
  font-size:1.2rem; cursor:pointer;
  
  border-radius:10px;
  border:1px solid rgba(0,255,255,.28);
  background:#03050a;
  color:#00fff9;
  text-shadow:0 0 10px rgba(0,255,255,.65);
}

.stp-menu {
  list-style:none; margin:0; padding:10px;
  position:absolute; top:120%; right:0;
  
  min-width:160px;
  display:none;
  background:#03050a;
  border-radius:12px;
  border:1px solid rgba(0,255,255,.25);
  box-shadow:0 14px 30px rgba(0,0,0,.8), 0 0 22px rgba(0,255,255,.3);
}

.stp-menu-toggle:checked ~ .stp-menu { display:block; }

.stp-menu a {
  display:block; padding:8px 12px; border-radius:8px;
  
  color:#e9f4ff; text-decoration:none; font-size:.7rem;
}
.stp-menu a:hover {
  background:rgba(0,255,255,.15);
  box-shadow:0 0 12px rgba(0,255,255,.35);
}

/* FOOTER */
.stp-footer {
  position:fixed; bottom:0; left:0; right:0;
  background:#03050ae6;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  padding:12px 16px;
  box-shadow:0 -12px 30px rgba(0,0,0,.8);
  color:#9bb4d0;
  font-size:.9rem;
}

.stp-footer-links {
  display:flex; justify-content:center; gap:10px; margin-bottom:4px;
}

.stp-footer-links a { color:#00fff9; }
.stp-footer-links a:hover { color:#ff66cc; }