:root{
  --bg:#0b0b0c; --card:#121214; --text:#f5f5f7; --muted:#a1a1aa;
  --accent:#f5c400; --border:rgba(255,255,255,.10);
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
body{
  background: radial-gradient(1200px 600px at 10% 0%, rgba(245,196,0,.12), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(255,77,109,.10), transparent 55%),
              var(--bg);
  color:var(--text);
}
input,button,select,textarea{
  border-radius:14px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); color:var(--text);
}
button{ transition:transform .06s ease, opacity .2s ease; }
button:active{ transform:translateY(1px); }

/* --- legibilidad general --- */
body, p, span, li, label, small, h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
}

/* links */
a { color: var(--accent) !important; }

/* cajas / paneles */
.card, .panel, .box, .container-card, .wrap, .section, .tile {
  background: rgba(18,18,20,.82) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}

/* inputs */
input, textarea, select {
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(245,245,247,.55) !important;
}

/* si hay textos dentro de cajas claras, forzamos oscuro */
.light, .light * { color: #0b0b0c !important; }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif !important;
  letter-spacing: 0.1px;
}
h1,h2,h3{
  letter-spacing: -0.3px;
}
body{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
/* ---- FIX: inputs & buttons dark (override) ---- */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="number"],
select,
textarea{
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder{
  color: rgba(245,245,247,.55) !important;
}

/* date field text color (chrome) */
input[type="date"]{
  color-scheme: dark;
}

/* buttons */
button,
input[type="button"],
input[type="submit"]{
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* primary buttons if you have any class */
.btn-primary, .primary{
  background: linear-gradient(135deg, var(--accent), rgba(245,196,0,.75)) !important;
  color: #0b0b0c !important;
  border: 1px solid rgba(245,196,0,.45) !important;
}

/* checkbox visibility */
input[type="checkbox"]{
  accent-color: var(--accent);
}
/* ---- FIX: output boxes (Katakana / Signo / Descripción / Cumple) ---- */
pre, code {
  color: var(--text) !important;
}

.output, .result, .results, .out, .box-out, .kv, .valuebox, .readout {
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}

/* si los outputs son divs dentro de secciones */
.section div, .panel div, .card div {
  color: var(--text);
}

/* títulos y etiquetas dentro de esas cajas */
.output *, .result *, .results *, .out *, .box-out *, .kv *, .valuebox *, .readout * {
  color: var(--text) !important;
}

/* si el output usa <p> o <span> con estilos propios */
p, span { color: var(--text); }

/* outputs (disabled/readonly) */
input:disabled, textarea:disabled, input[readonly], textarea[readonly]{
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  opacity: 1 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
/* Nuke: cualquier caja dentro del panel de resultados */
.result-box, .resultBox, .result, .results, .output, .out,
pre, code,
textarea, input {
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* Si son contenedores tipo card/panel */
.card * , .panel * , .box * {
  color: var(--text) !important;
}

/* borde y radio para que queden premium */
textarea, input, pre {
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}

/* outputs: caja kv (Katakana/Signo/Descripción/Cumple) */
.kv div{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
}

.kv strong{
  color: rgba(245,245,247,.70) !important;
}

.kv span{
  color: var(--text) !important;
}