/* ══════════════════════════════════════════════════════════════
   DNS PAGE — /dns/ propagation checker (loaded via $pageCss)
   ══════════════════════════════════════════════════════════════ */

/* ── Hero glow accent behind the two-panel layout ── */
.dns-main{position:relative}
.dns-hero-glow{position:absolute;left:50%;top:10vh;transform:translateX(-50%);width:min(1000px,100%);height:420px;pointer-events:none;z-index:0;background:radial-gradient(ellipse at center,var(--accent-glow) 0%,transparent 65%);opacity:.7}
.dns-main .container-wide{position:relative;z-index:1}

/* ── Panel header: title left, action buttons right ── */
.dns-layout .panel-header{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dns-actions{display:none;align-items:center;gap:6px}
.dns-actions.visible{display:flex}
.dns-actions .btn-icon{width:28px;height:28px}
.dns-actions .btn-icon svg{width:13px;height:13px}

/* ── Skeleton states ── */
/* SSR placeholder rows shown until the server list loads from the API */
.dns-skel-row{gap:7px;padding:12px 10px;pointer-events:none}
.dns-skel{height:10px;border-radius:5px}
/* Per-row loading line while the NDJSON stream runs */
.server-row.pending .dns-skel{width:70%;margin-top:3px}

/* ── Per-server hover copy button ── */
.server-row{position:relative}
.dns-row-copy{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;opacity:0;transform:translateY(-2px);transition:opacity .15s ease,transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease}
.dns-row-copy svg{width:12px;height:12px}
.server-row:hover .dns-row-copy,.dns-row-copy:focus-visible{opacity:1;transform:translateY(0)}
@media (hover:none){.dns-row-copy{opacity:1;transform:none}}

/* ── Summary bar: propagation readout + animated percentage ── */
.summary-stats{align-items:center;flex-wrap:wrap}
.summary-readout{margin-left:auto;display:flex;align-items:center;font-size:11px;font-weight:600;color:var(--text-tertiary);white-space:nowrap}
.summary-pct{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}

/* ── Error / empty states ── */
.dns-error{display:flex;align-items:center;gap:8px;margin:10px 12px 0;padding:9px 12px;border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.08);border-radius:var(--radius-md);font-size:12px;font-weight:600;color:var(--text-secondary)}
.dns-error svg{width:14px;height:14px;color:var(--red);flex-shrink:0}
.dns-error span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dns-retry-btn{padding:4px 12px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:100px;color:var(--text-secondary);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;flex-shrink:0;transition:all .15s ease}
.dns-retry-btn:hover{color:var(--text-primary);border-color:var(--border-hover);background:var(--bg-hover)}
.dns-retry-btn:active{transform:translateY(1px)}
.dns-list-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 16px;text-align:center;color:var(--text-tertiary);font-size:12.5px;font-weight:500}
.dns-list-error svg{width:22px;height:22px;color:var(--text-muted)}

@media (prefers-reduced-motion:reduce){
    .dns-row-copy{transition:none}
}