/* ===== Design tokens ===== */
:root{
  --bg:#0b0d10; --panel:#11151b; --panel2:#0e1218; --text:#e8edf3; --muted:#98a2b3;
  --brand:#5aa8ff; --brand2:#2b7ff2; --stroke:1px solid rgba(255,255,255,.07);
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35); --focus:0 0 0 3px rgba(90,168,255,.35);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fc; --panel:#ffffff; --panel2:#f9fafc; --text:#0b1220; --muted:#606b7a;
         --stroke:1px solid rgba(10,22,50,.08); --shadow:0 12px 28px rgba(10,22,50,.08); }
}

/* ===== Page (no scroll) ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(1200px 800px at 10% -10%, rgba(90,168,255,.18), transparent 60%),
    radial-gradient(800px 600px at 100% 0%, rgba(46,255,198,.10), transparent 50%), var(--bg);
  color:var(--text); font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  overflow:hidden; /* sin scroll */
}
#num_opts {
  background:black;color:#3b80f5;outline:black;-moz-appearance:textfield; text-align:right;
}
#num_opts::-moz-number-spin-up,
#num_opts::-moz-number-spin-down {
  filter: invert(0.5) sepia(1) hue-rotate(120deg);
}
.shell{
  height:100%; display:grid; place-items:center; padding:24px;
}
.frame{
  width:min(1360px, 96vw);
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:var(--stroke); border-radius:24px; box-shadow:var(--shadow);
  padding:22px 22px;
}
.header{display:flex;align-items:center;gap:14px;margin:2px 0 14px}
.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,var(--brand),#8cd0ff)}
h1{margin:0;font-size:clamp(22px,2.2vw,30px);color:#cdcdd4}

/* ===== Grid sin scroll ===== */
.content{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
}
.left, .right{display:grid; gap:16px}
.area{
  border:var(--stroke); border-radius:16px; padding:4px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.area h2{margin:0 0 10px;font-size:15px;letter-spacing:.3px;color:#e89237;font-weight:700;text-transform:uppercase}

/* ===== Form ===== */
form{display:grid; gap:16px}
label{display:block;font-weight:600;color:#3b80f5; font-size:.95rem}
.input{
  width:100%; padding:12px 14px; border-radius:12px;
  background: #0f1319; color:var(--text); border:var(--stroke); outline:none; transition:.18s;
}
@media (prefers-color-scheme: light){ .input{ background:#fff } }
.input:focus{ box-shadow:var(--focus); border-color:transparent }
input::file-selector-button{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:var(--stroke); color:var(--text); padding:8px 12px; border-radius:10px; margin-right:10px; cursor:pointer;
}

/* Row para botones */
.actions{ display:flex; gap:10px; align-items:center; justify-content:flex-start; }

/* ===== Buttons ===== */
.btn{
  appearance:none; border:0; border-radius:12px; padding:12px 16px; cursor:pointer;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  color:#fff; font-weight:700; letter-spacing:.2px; transition:filter .18s ease, transform .08s ease, box-shadow .18s ease;
  box-shadow:none; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{ filter:brightness(1.05); box-shadow:0 10px 22px rgba(90,168,255,.28) }
.btn:active{ transform: translateY(1px) }

.btn-ghost{
  background:transparent; color: #1e7beb; border:var(--stroke); border-radius: 1rem;
  padding: 0.6rem;  box-shadow:none; text-decoration:none;
}
.btn-ghost:hover{ box-shadow:0 8px 20px rgba(0,0,0,.12); text-decoration:none }
.btn-ghost:active{ transform: translateY(1px) }

/* ===== Inline hints ===== */
.hint{ color:var(--muted); font-size:.9rem; margin-top:-6px }

/* ===== Footer small ===== */
.footer{ margin-top:10px; text-align:center; color:var(--muted); font-size:.9rem }

.fichi{ color:#c1f211 }

.files a{ color:green }

/* ===== Responsive (mantener sin scroll) ===== */
@media (max-width: 900px){
  .content{ grid-template-columns: 1fr }
  .shell{ padding:14px }
  .frame{ width:96vw; padding:18px }
}