:root { --bg:#ffffff; --fg:#0b0f14; --muted:#6b7280; --primary:#2563eb; --ok:#16a34a; --card:#f6f7f9; }
html.dark { --bg:#0b0f14; --fg:#e5e7eb; --muted:#9ca3af; --primary:#60a5fa; --ok:#22c55e; --card:#111827; }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,Segoe UI,Roboto,Arial}
.hide{display:none} .spacer{flex:1}
.topbar{position:sticky;top:0;display:flex;gap:.5rem;align-items:center;padding:.75rem 1rem;background:var(--bg);border-bottom:1px solid #e5e7eb}
.card{background:var(--card);border:1px solid #e5e7eb;padding:1rem;border-radius:.75rem;margin:1rem}
button{background:var(--primary);color:#fff;border:0;border-radius:.5rem;padding:.5rem .75rem;cursor:pointer}
input,select{padding:.5rem;border:1px solid #cbd5e1;border-radius:.5rem;width:100%;max-width:520px;background:var(--bg);color:var(--fg)}
.ok{color:var(--ok);margin-top:.5rem}
.list{list-style:none;margin:.5rem 0 0;padding:0} .list li{padding:.25rem .5rem;border:1px solid #e5e7eb;margin-top:.25rem;border-radius:.5rem;cursor:pointer}
.hint{color:var(--muted)}
.or{margin:.5rem 0;color:var(--muted)}
.banner h2{margin:.25rem 0}

/* Marca de agua */
.watermark{
  position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;
  font-weight:800;font-size:8vw;letter-spacing:.1em;color:var(--fg);opacity:.05;mix-blend-mode:multiply;
}
.wm-corner{position:fixed;pointer-events:none;opacity:.05;font-weight:800;color:var(--fg)}
.wm-tl{top:.5rem;left:.75rem;font-size:16px}
.wm-tr{top:.5rem;right:.75rem;font-size:16px}
.wm-bl{bottom:.5rem;left:.75rem;font-size:16px}
.wm-br{bottom:.5rem;right:.75rem;font-size:16px}