:root{
  --bg:#0f172a; --panel:#1e293b; --muted:#94a3b8; --text:#e2e8f0;
  --accent:#38bdf8; --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444; --border:#334155;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;gap:1.25rem;background:var(--panel);
  border-bottom:1px solid var(--border);padding:.75rem 1.25rem}
.brand{font-weight:700;font-size:1.1rem;color:var(--text)}
.topbar nav{display:flex;gap:1rem;flex:1}
.topbar nav a{color:var(--muted);font-weight:500}
.topbar nav a:hover{color:var(--text)}
.logout{display:flex;align-items:center;gap:.5rem}
.logout .user{color:var(--muted);font-size:.9rem}

.container{max-width:1000px;margin:1.5rem auto;padding:0 1.25rem}
h1{font-size:1.5rem;margin:.2rem 0 1rem}
h2{font-size:1.15rem;margin:1.5rem 0 .75rem;border-bottom:1px solid var(--border);padding-bottom:.35rem}

.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1.1rem;margin-bottom:1.1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1rem;text-align:center}
.stat b{display:block;font-size:2rem;color:var(--accent)}

table{width:100%;border-collapse:collapse;margin:.5rem 0}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--border);font-size:.92rem}
th{color:var(--muted);font-weight:600}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
pre{background:#0b1220;border:1px solid var(--border);border-radius:8px;padding:.8rem;overflow:auto}

form.inline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end}
label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.2rem}
input,select,textarea{background:#0b1220;color:var(--text);border:1px solid var(--border);
  border-radius:6px;padding:.45rem .55rem;font-size:.92rem;min-width:8rem}
textarea{width:100%;min-height:5rem}
button,.btn{background:var(--accent);color:#072033;border:0;border-radius:6px;
  padding:.5rem .9rem;font-weight:600;cursor:pointer;font-size:.9rem}
button:hover,.btn:hover{filter:brightness(1.08)}
button.danger,.btn.danger{background:var(--danger);color:#fff}
button.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}

.flash{padding:.7rem .9rem;border-radius:8px;margin-bottom:.8rem;border:1px solid}
.flash-success{background:#052e16;border-color:#166534;color:#bbf7d0}
.flash-danger{background:#3f1212;border-color:#991b1b;color:#fecaca}
.flash-warning{background:#3a2a06;border-color:#92660b;color:#fde68a}
.flash-info{background:#082f49;border-color:#0e7490;color:#bae6fd}

.badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.75rem;font-weight:600}
.badge.ok{background:#052e16;color:#86efac}
.badge.drifted{background:#3a2a06;color:#fde68a}
.badge.error{background:#3f1212;color:#fca5a5}
.badge.pending{background:#1e293b;color:#94a3b8;border:1px solid var(--border)}
.muted{color:var(--muted)}
.right{text-align:right}
.foot{max-width:1000px;margin:2rem auto;padding:1rem 1.25rem;color:var(--muted);font-size:.82rem;border-top:1px solid var(--border)}

.login-wrap{max-width:360px;margin:8vh auto}
.login-wrap input{width:100%}
.login-wrap .field{margin-bottom:.8rem}

/* ===================== editor de registros (estilo cPanel/Cloudflare) ===================== */
.container{max-width:1100px}
.zone-head h1{margin-bottom:.3rem}
.meta{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:.2rem 0 1rem}
.meta b{color:var(--text)}

.editor{padding:0;overflow:hidden}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tbl-left{display:flex;align-items:baseline;gap:.6rem}
.tbl-left strong{font-size:1.05rem}
.quick{display:flex;gap:.4rem;flex-wrap:wrap}
.btn.qadd{background:#0b1220;color:var(--accent);border:1px solid var(--border)}
.btn.qadd:hover{border-color:var(--accent);filter:none}

.filters{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1.1rem;flex-wrap:wrap}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:.25rem .7rem;font-size:.8rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.chip:hover{color:var(--text)}
.chip.active{background:var(--accent);color:#072033;border-color:var(--accent)}
.chip .dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block}
#search{min-width:14rem}

table.records{margin:0}
table.records thead th{background:#172033;padding:.5rem .9rem}
table.records td{padding:.5rem .9rem;vertical-align:middle}
table.records tbody tr.rec:hover{background:#172033}
td.name code{color:var(--text)}
td.name .sfx{color:var(--muted);font-size:.82rem}
td.name .apex{margin-left:.4rem;font-size:.68rem;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:0 .3rem}
td.val{font-size:.9rem}
td.val .cval{word-break:break-all}
.copy{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:.95rem;padding:0 .25rem;margin-left:.25rem}
.copy:hover{color:var(--accent)}
.copy.ok{color:var(--ok)}
.ttl{font-size:.82rem;color:var(--muted)}

.rtype-badge{display:inline-block;min-width:3.2rem;text-align:center;padding:.12rem .45rem;border-radius:6px;font-size:.72rem;font-weight:700;font-family:ui-monospace,monospace;border:1px solid transparent}
.t-A{color:#7dd3fc;background:#082f49;border-color:#0e7490}
.t-AAAA{color:#a5b4fc;background:#1e1b4b;border-color:#4338ca}
.t-CNAME{color:#d8b4fe;background:#2e1065;border-color:#7e22ce}
.t-MX{color:#fcd34d;background:#3a2a06;border-color:#92660b}
.t-TXT{color:#cbd5e1;background:#1e293b;border-color:#475569}
.t-SRV{color:#67e8f9;background:#083344;border-color:#0e7490}
.t-CAA{color:#86efac;background:#052e16;border-color:#166534}
.t-NS{color:#f9a8d4;background:#500724;border-color:#9d174d}
.t-PTR{color:#e7c08b;background:#3a2a06;border-color:#92660b}
.dot.t-A{background:#38bdf8}.dot.t-AAAA{background:#818cf8}.dot.t-CNAME{background:#c084fc}
.dot.t-MX{background:#f59e0b}.dot.t-TXT{background:#94a3b8}.dot.t-SRV{background:#22d3ee}
.dot.t-CAA{background:#22c55e}.dot.t-NS{background:#f472b6}.dot.t-PTR{background:#d6a36a}

.rec-actions .act-default,.rec-actions .act-confirm{display:inline-flex;gap:.3rem;align-items:center;justify-content:flex-end}
button.sm,.btn.sm{padding:.28rem .6rem;font-size:.8rem}
button.ghost.sm{background:transparent;border:1px solid var(--border);color:var(--text)}
button.danger-o{background:transparent;color:#fca5a5;border:1px solid #7f1d1d}
button.danger-o:hover{background:#3f1212;filter:none}
tr.rec:not(:hover) .act-default button{opacity:.5}

tr.addrow>td,tr.editrow>td{background:#0b1220;border-bottom:2px solid var(--accent)}
.addform,.editform{align-items:end}
.addform .grow,.editform .grow{flex:1 1 16rem}
.addform .grow input,.editform .grow input{width:100%}
.actbtns{display:flex;gap:.4rem;align-items:end}
.preview{flex-basis:100%;color:var(--muted);font-size:.82rem;margin-top:.35rem}
.preview b{color:var(--accent)}

td.empty{text-align:center;padding:2rem 1rem}
td.empty p{margin:.3rem 0}
.danger-zone{border-color:#7f1d1d}
.danger-zone form{display:flex;align-items:center;gap:.8rem;margin:0}