/* ClearDNS DNS Check */

@font-face{font-family:'Segoe Pro';src:url('/fonts/segoe/SegoePro-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Segoe Pro';src:url('/fonts/segoe/SegoePro-Semibold.ttf') format('truetype');font-weight:600;font-display:swap}

:root {
  --template-colors-1: #f9f9f9;
  --template-colors-2: rgba(255,255,255,1);
  --template-colors-3: rgba(29,29,29,0.025);
  --template-colors-text: rgba(29,29,29,1);
  --template-colors-text-muted: rgba(29,29,29,0.5);
  --template-colors-divider: color-mix(in srgb, var(--template-colors-text) 12%, transparent);
  --template-colors-toggle-bg: rgba(29,29,29,0.05);
  --template-colors-toggle-knob: rgba(255,255,255,1);
  --primary: rgba(60,109,234,1);
  --primary-soft: color-mix(in srgb, var(--primary) 10%, transparent);
  --success: rgba(56,177,133,1);
  --success-soft: color-mix(in srgb, var(--success) 12%, transparent);
  --warning: rgba(255,149,0,1);
  --warning-soft: color-mix(in srgb, var(--warning) 12%, transparent);
  --danger: rgba(234,72,66,1);
  --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
  --font-family: 'Segoe Pro', "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-base: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
}
.theme-dark {
  --primary: rgba(79,127,255,1);
  --template-colors-1: #1D1D1D;
  --template-colors-2: rgba(255,255,255,0.03);
  --template-colors-3: rgba(255,255,255,0.03);
  --template-colors-text: rgba(255,255,255,1);
  --template-colors-text-muted: rgba(255,255,255,0.4);
  --template-colors-divider: color-mix(in srgb, var(--template-colors-text) 16%, transparent);
  --template-colors-toggle-bg: rgba(255,255,255,0.12);
}
@media(prefers-color-scheme:dark){
  :root:not(.theme-light){
    --primary:rgba(79,127,255,1);--template-colors-1:#1D1D1D;
    --template-colors-2:rgba(255,255,255,0.03);--template-colors-3:rgba(255,255,255,0.03);
    --template-colors-text:rgba(255,255,255,1);--template-colors-text-muted:rgba(255,255,255,0.4);
    --template-colors-divider:color-mix(in srgb,var(--template-colors-text) 16%,transparent);
    --template-colors-toggle-bg:rgba(255,255,255,0.12);
  }
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:var(--font-family);background:var(--template-colors-1);color:var(--template-colors-text);letter-spacing:-0.03em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:normal}
.container{max-width:640px;margin:0 auto;padding:var(--spacing-md) var(--spacing-md) var(--spacing-xl)}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-base) 0;margin-bottom:var(--spacing-md)}
.header-left{display:flex;align-items:center;gap:var(--spacing-sm)}
.header-logo{height:28px;width:auto;flex-shrink:0}

/* Toggle — matches cleardns-website exactly */
.theme-toggle{width:3.25rem;height:1.75rem;border-radius:9999px;background:var(--template-colors-toggle-bg);padding:2px;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;border:none;transition:background .3s}
.theme-dark .theme-toggle{justify-content:flex-end}
@media(prefers-color-scheme:dark){:root:not(.theme-light) .theme-toggle{justify-content:flex-end}}
.theme-toggle-knob{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--template-colors-toggle-knob);display:flex;align-items:center;justify-content:center;transition:transform .3s}
.theme-toggle-knob svg{width:14px;height:14px;color:var(--template-colors-text-muted)}
.icon-moon{display:none}.icon-sun{display:block}
.theme-dark .icon-moon{display:block}.theme-dark .icon-sun{display:none}
@media(prefers-color-scheme:dark){:root:not(.theme-light) .icon-moon{display:block}:root:not(.theme-light) .icon-sun{display:none}}

/* Hero */
.hero-card{background:rgba(13,13,13,1);border-radius:var(--radius-lg);padding:var(--spacing-xl) var(--spacing-lg);margin-bottom:var(--spacing-md);position:relative;overflow:hidden}
.hero-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 90% 80%,rgba(60,109,234,0.2),transparent)}
.hero-content{position:relative;z-index:1}
.hero-card h1{font-size:1.75rem;font-weight:600;color:rgba(255,255,255,0.95);margin-bottom:var(--spacing-sm);line-height:1.2;letter-spacing:-0.04em}
.hero-desc{color:rgba(255,255,255,0.5);font-size:0.875rem;line-height:1.5;max-width:420px}
.hero-nodes{position:absolute;inset:0;pointer-events:none}
.node{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(60,109,234,0.5);box-shadow:0 0 8px rgba(60,109,234,0.3)}
.node::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(60,109,234,0.12);animation:nodeRing 3s ease-in-out infinite}
.n1{top:18%;left:72%;animation:nodePulse 4s ease-in-out infinite}
.n2{top:35%;left:85%;animation:nodePulse 3.5s .5s ease-in-out infinite}
.n3{top:60%;left:78%;animation:nodePulse 4.2s 1s ease-in-out infinite}
.n4{top:75%;left:90%;animation:nodePulse 3.8s 1.5s ease-in-out infinite}
.n5{top:25%;left:92%;animation:nodePulse 4.5s .8s ease-in-out infinite}
.n6{top:50%;left:65%;animation:nodePulse 3.2s 2s ease-in-out infinite}
.line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(60,109,234,0.18),transparent);transform-origin:left center}
.l1{top:20%;left:65%;width:25%;transform:rotate(10deg);animation:lineShine 5s ease-in-out infinite}
.l2{top:38%;left:73%;width:18%;transform:rotate(-15deg);animation:lineShine 4s 1s ease-in-out infinite}
.l3{top:55%;left:66%;width:20%;transform:rotate(25deg);animation:lineShine 6s .5s ease-in-out infinite}
.l4{top:68%;left:78%;width:15%;transform:rotate(-8deg);animation:lineShine 4.5s 2s ease-in-out infinite}
.l5{top:30%;left:80%;width:16%;transform:rotate(30deg);animation:lineShine 5.5s 1.5s ease-in-out infinite}
@keyframes nodePulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@keyframes nodeRing{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(2)}}
@keyframes lineShine{0%,100%{opacity:.12}50%{opacity:.45}}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}
.stat-item{background:var(--template-colors-2);border-radius:var(--radius-md);padding:var(--spacing-base);display:flex;flex-direction:column;gap:var(--spacing-xs)}
.stat-label{font-size:0.625rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--template-colors-text-muted);font-weight:600}
.stat-value{font-size:0.875rem;font-weight:600}

/* Status */
.status-line{text-align:center;margin-bottom:var(--spacing-md);font-size:0.875rem;font-weight:600}
.status-value.running{color:var(--primary)}.status-value.done{color:var(--success)}.status-value.leak{color:var(--warning)}

/* Cards */
.card{background:var(--template-colors-2);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--spacing-md);padding:var(--spacing-lg)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-base)}
.card-title{font-size:1rem;font-weight:600;letter-spacing:-0.025em}
.card-subtitle{font-size:0.8125rem;color:var(--template-colors-text-muted);line-height:1.5;margin-bottom:var(--spacing-base)}
.card-text{font-size:0.8125rem;color:var(--template-colors-text-muted);line-height:1.625}
.card-text strong{color:var(--template-colors-text);font-weight:600}

/* Badge */
.badge{font-size:0.6875rem;font-weight:600;padding:3px 10px;border-radius:9999px;white-space:nowrap}
.badge.ok{background:var(--success-soft);color:var(--success)}
.badge.warn{background:var(--warning-soft);color:var(--warning)}

/* Capabilities row */
.caps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}
.cap-card{background:var(--template-colors-2);border-radius:var(--radius-md);padding:var(--spacing-base);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}
.cap-value{font-size:0.875rem;font-weight:700;color:var(--template-colors-text-muted)}
.cap-value.pass{color:var(--success)}.cap-value.fail{color:var(--danger)}
.cap-label{font-size:0.625rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--template-colors-text-muted);font-weight:600}

/* IP Card */
.ip-card-inner{display:flex;align-items:center;gap:var(--spacing-base)}
.ip-flag{width:32px;height:24px;flex-shrink:0;border-radius:3px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ip-flag img{width:100%;height:100%;object-fit:cover}
.ip-info{flex:1;min-width:0}
.ip-isp{font-size:0.875rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-location{font-size:0.75rem;color:var(--template-colors-text-muted);margin-top:1px}
.ip-addr-row{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:4px}
.ip-addr{font-size:0.8125rem;font-weight:600;font-family:var(--font-mono);letter-spacing:0}
.ip-proto-badge{font-size:0.5625rem;font-weight:700;text-transform:uppercase;padding:1px 6px;border-radius:9999px;background:var(--primary-soft);color:var(--primary)}
.ip-copy-btn{background:none;border:none;cursor:pointer;color:var(--template-colors-text-muted);padding:2px;display:flex;align-items:center;transition:color .15s}
.ip-copy-btn:hover{color:var(--primary)}
.ip-copy-btn svg{width:14px;height:14px}
.ip-ptr{font-size:0.625rem;color:var(--primary);font-family:var(--font-mono);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* DNSSEC Table */
.ds-table{width:100%;border-collapse:collapse;font-size:0.8125rem;margin-top:var(--spacing-xs)}
.ds-table th{font-weight:600;font-size:0.6875rem;color:var(--template-colors-text-muted);text-align:center;padding:var(--spacing-sm);border-bottom:1px solid var(--template-colors-divider);line-height:1.3}
.ds-table th:first-child{text-align:left}
.ds-table td{padding:var(--spacing-sm);border-bottom:1px solid var(--template-colors-divider);font-size:0.8125rem}
.ds-table td:first-child{font-weight:500;color:var(--template-colors-text-muted)}
.ds-table tr:last-child td{border-bottom:none}
.ds-cell{text-align:center;font-weight:700;font-size:0.75rem}
.ds-cell.pass{color:var(--success)}
.ds-cell.fail{color:var(--danger)}

/* Resolver Row */
.resolver-row{display:flex;align-items:center;gap:var(--spacing-base);padding:0.625rem 0;border-bottom:1px solid var(--template-colors-divider);animation:slideIn .3s ease}
.resolver-row:last-child{border-bottom:none}
.resolver-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:0.6875rem;font-weight:700}
.resolver-icon.dns{background:var(--primary-soft);color:var(--primary)}
.resolver-details{flex:1;min-width:0}
.resolver-ip{font-size:0.8125rem;font-weight:600;font-family:var(--font-mono);letter-spacing:0}
.resolver-meta{font-size:0.6875rem;color:var(--template-colors-text-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resolver-ptr{font-size:0.5625rem;color:var(--primary);font-family:var(--font-mono);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resolver-proto{font-size:0.5625rem;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:9999px;background:var(--template-colors-3);color:var(--template-colors-text-muted)}

/* Resolver flag */
.resolver-flag{width:18px;height:13px;border-radius:2px;overflow:hidden;flex-shrink:0}
.resolver-flag img{width:100%;height:100%;object-fit:cover}

/* Empty */
.empty-state{padding:var(--spacing-lg) 0;text-align:center;color:var(--template-colors-text-muted);font-size:0.8125rem}

/* CTA Card */
.cta-card{border:1px solid var(--warning-soft)}
.bypass-warning-card{border:1px solid var(--danger-soft)}
.chrome-warning-card{border:1px solid var(--danger-soft)}
.cta-btn{display:inline-block;margin-top:var(--spacing-base);padding:0.625rem 1.5rem;background:var(--primary);color:#fff;font-size:0.875rem;font-weight:600;border-radius:9999px;text-decoration:none;transition:opacity .15s}
.cta-btn:hover{opacity:0.85}

/* Footer */
.footer{text-align:center;padding:var(--spacing-md) 0;font-size:0.75rem;color:var(--template-colors-text-muted)}
.footer a{color:var(--primary);text-decoration:none;font-weight:600}
.footer a:hover{text-decoration:underline}

/* Animations */
@keyframes slideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.pulse{animation:pulse 1.5s ease-in-out infinite}

/* Responsive */
@media(max-width:480px){
  .hero-card{padding:var(--spacing-lg) var(--spacing-md)}.hero-card h1{font-size:1.375rem}
  .caps-row{grid-template-columns:repeat(2,1fr)}
  .ds-table{font-size:0.75rem}.ds-table th,.ds-table td{padding:0.375rem 0.25rem}
}