/* StrongQRCode Premium Theme */
:root{
  --bg:#0a0e1a; --ink:#eef4ff; --muted:#a9b7d9;
  --card:#0f172a; --card2:#0e1629; --line:#24345f;
  --accent:#7cf5ff; --accent2:#7aa2ff; --accent3:#ff7ad1;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1000px 600px at 20% -200px, rgba(127, 200, 255, .25) 0%, rgba(10,14,26,0) 65%),
    radial-gradient(900px 700px at 120% 20%, rgba(255, 122, 209, .18) 0%, rgba(10,14,26,0) 60%),
    #0a0e1a;
  line-height:1.55;
}
.container{max-width:1200px;margin:0 auto;padding:24px 20px}
header{position:sticky;top:0;z-index:60;background:rgba(9,12,22,.78);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.brand .logoBox{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:conic-gradient(from 180deg, #7cf5ff, #7aa2ff, #ff7ad1, #7cf5ff);
  box-shadow:0 8px 26px rgba(124,245,255,.25);
}
.brand .word{font-weight:900;font-size:22px;letter-spacing:.3px}
.badge{padding:6px 10px;border-radius:999px;background:#111b35;border:1px solid #1e2b54;color:#d3dfff;font-size:12px;margin-left:6px}
nav a{color:#fff;margin-left:18px;font-weight:600;opacity:.95;text-decoration:none}
nav a:hover{opacity:1;text-decoration:underline}
nav a.btn{padding:10px 14px;border-radius:999px;background:linear-gradient(180deg,#18243d,#111a31);border:1px solid #24335a}
.hero{padding:36px 0 10px}
.hero h1{
  margin:0 0 10px;font-size:clamp(32px,5.4vw,54px);letter-spacing:-.3px;
  background:linear-gradient(90deg,#7cf5ff,#7aa2ff,#ff7ad1);-webkit-background-clip:text;background-clip:text;color:transparent
}
.hero p{margin:0;color:var(--muted);font-size:18px}
.gen{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:18px}
@media (max-width:1000px){.gen{grid-template-columns:1fr} .right{position:relative;top:0}}
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(6,10,22,.45), inset 0 1px 0 rgba(255,255,255,.03);padding:18px}
.card h2{margin:2px 0 12px}
.hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tab{padding:10px 14px;border-radius:14px;border:1px solid #263560;background:linear-gradient(180deg,#111a33,#0f152a);color:#d7e4ff;cursor:pointer}
.tab.active{box-shadow:0 0 0 2px rgba(124,245,255,.28) inset, 0 8px 24px rgba(122,162,255,.2)}
label{display:block;font-weight:700;margin:12px 0 6px}
input,select,textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid #263560;background:#0c1430;color:#eef4ff;font-size:16px;
}
textarea{min-height:110px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.check{display:flex;align-items:center;gap:8px}
.help{color:#9fb0d6;font-size:13px}
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:
    linear-gradient(180deg, transparent, transparent),
    radial-gradient(circle at right 12px center, #7cf5ff 0, #7cf5ff 2px, transparent 3px);
  background-position:right 12px center;
  background-repeat:no-repeat; padding-right:32px;
}
.right{position:sticky;top:86px;height:fit-content}
.preview{display:grid;place-items:center;min-height:460px;border:1px dashed #2b3f73;border-radius:16px;background:radial-gradient(900px 500px at 40% -120px, #1a3b7a 0%, rgba(26,59,122,0) 70%), #0b1430}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.actions button{flex:1 1 180px}
.btn{background:linear-gradient(180deg,#0e1834,#0a1228);border:1px solid #253663;border-radius:12px;color:#dbe6ff;padding:12px 14px;cursor:pointer}
.btn-primary{background:linear-gradient(90deg,#7cf5ff,#7aa2ff,#ff7ad1);border:0;color:#08152b;font-weight:900}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
@media (max-width:1000px){.features{grid-template-columns:1fr 1fr}}
.feature{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:14px;padding:16px}
.small{font-size:13px;color:#a9b7d9}
footer{margin:28px 0 40px;color:#9fb0d6}
footer a{color:#9bd1ff;text-decoration:underline}
.version{opacity:.7;font-size:12px;margin-top:6px}
main a:not(.btn):not(.tab):not(nav a){ color:#eef4ff; text-decoration:underline; }
main a:hover{ text-decoration:none; opacity:0.95; }
@media (max-width:640px){
  .row, .row-3{grid-template-columns:1fr}
}


/* --- Touch-friendly buttons --- */
.btn{ min-height: 46px; font-size: 16px; }
@media (pointer:coarse){
  .btn{ min-height: 52px; font-size: 17px; }
  .btn-primary{ padding: 14px 18px; }
}


/* --- High-contrast QR preview card --- */
.preview { position: relative; }
.preview .preview-inner{
  background:#ffffff;
  border-radius:14px;
  padding:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:inline-block;
}
.preview .preview-inner canvas,
.preview .preview-inner svg,
.preview .preview-inner img{ display:block; height:auto; width:auto; }


/* FIX10: White preview container (visible on-screen, matches downloads) */
.preview{
  background:#ffffff !important;
  border-radius:16px;
  padding:18px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.preview .preview-inner{ background:transparent !important; padding:0; box-shadow:none; }
.preview canvas,.preview svg,.preview img{ display:block; max-width:100%; height:auto; }


/* FIX11: Force-visible white background inside preview and media */
.preview{ background:#ffffff !important; }
.preview canvas,
.preview svg,
.preview img{ background:#ffffff !important; border-radius:12px; }


/* FIX12: Apply white background to legacy More pages too */
#preview { background:#ffffff !important; border-radius:16px; padding:18px; border:1px solid rgba(0,0,0,.08); box-shadow:0 8px 24px rgba(0,0,0,.15); }
#preview canvas, #preview svg, #preview img { background:#ffffff !important; border-radius:12px; display:block; max-width:100%; height:auto; }


/* ===== Desktop defaults (unchanged) ===== */
.actions{display:flex;gap:10px;flex-wrap:wrap}
.actions .btn{width:auto;padding:.9rem 1rem;font-size:16px}


/* ===== Mobile-only compact buttons (smaller, tidy) ===== */
@media (max-width: 768px){
  header .nav{flex-wrap:wrap}
  header .brand .logo{width:22px;height:22px}
  header .brand strong{font-size:20px}
  header .badge{padding:2px 6px;font-size:12px}
  header .topnav{width:100%;display:flex;gap:18px;padding:8px 0 0 0}
  header .topnav a{font-size:16px;margin-left:0}

  /* Layout: Generate full width row, downloads side-by-side (smaller) */
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .actions .btn{width:100%;padding:.6rem .7rem;font-size:14px}
  .actions .btn-primary{grid-column:1/-1}
}