/**
 * Project: DailyWebUtils - DNS UI Styles
 * Version: 4.0 (Final Main-Card-Only Hover)
 */

:root {
    --dw-primary: #2563eb;
    --dw-primary-glow: rgba(37, 99, 235, 0.4);
    --dw-bg: #f8fafc;
    --dw-border: #e2e8f0;
    --dw-text: #0f172a;
    --dw-text-mut: #64748b;
    --dw-success: #22c55e;
}

/* Master Layout */
.dw-dns-main-container { padding: 40px 15px; font-family: 'Inter', sans-serif; }

/* 🚀 MAIN CARD: Ispe Hover Effect rahega */
.dw-dns-card {
    max-width: 1100px; width: 100%; margin: 0 auto; background: #fff;
    border-radius: 24px; padding: 45px; border: 1px solid var(--dw-border);
   box-shadow: 0 20px 40px rgba(0,0,0,0.06), 0 40px 90px rgba(0,0,0,0.08);
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

/* 🚀 MAIN CARD HOVER: Sirf ye box upar uthega */
.dw-dns-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(37, 99, 235, 0.15);
    border-color: var(--dw-primary);
}

/* Header & Badges */
.dw-dns-header { text-align: center; margin-bottom: 40px; }
.dw-badge { background: #eff6ff; color: var(--dw-primary); padding: 6px 16px; border-radius: 50px; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 8px; }

/* Search Bar */
.dw-dns-search-wrapper { 
    display: flex; gap: 15px; margin-bottom: 40px; background: #f1f5f9; 
    padding: 10px; border-radius: 18px; border: 1px solid var(--dw-border); 
}
.dw-dns-input-group { flex: 1; display: flex; align-items: center; gap: 12px; padding-left: 15px; }
.dw-dns-input-group input { border: none; background: transparent; width: 100%; font-size: 16px; outline: none; font-weight: 500; }
.dw-btn-glow { 
    background: var(--dw-primary); color: #fff; border: none; padding: 14px 28px; 
    border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.3s; 
    box-shadow: 0 10px 20px var(--dw-primary-glow); white-space: nowrap;
}

/* Dashboard & Scoring */
.dw-dns-dashboard { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; margin-bottom: 40px; align-items: center; }
.dw-score-circle { position: relative; width: 160px; margin: auto; }
.dw-score-circle svg { transform: rotate(-90deg); }
.bg { stroke: #f1f5f9; stroke-width: 12; fill: none; }
.progress { stroke: var(--dw-success); stroke-width: 12; fill: none; stroke-dasharray: 440; stroke-dashoffset: 440; transition: 1.5s ease-out; stroke-linecap: round; }
.dw-score-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.dw-score-text { font-size: 32px; font-weight: 800; color: var(--dw-text); }

/* 🚀 RESULTS GRID: Yahan se hover effects hata diye gaye hain */
.dw-dns-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin: 60px auto;
    max-width: 1000px;
    justify-content: center;
}

/* ❌ OUTPUT RECORDS: Inpe ab koi hover/lift effect nahi hai (Static Like Screenshot 1) */
.dw-dns-record {
    background: #ffffff; padding: 25px; border-radius: 20px;
    border: 1px solid var(--dw-border);
    box-shadow: 0 10px 25px rgba(0,0,0,0.04); 
    box-sizing: border-box;
    transition: border-color 0.3s ease; /* Sirf halka sa border change, no movement */
}

/* AAAA Record Green Style */
.dw-dns-record-aaaa { border-left: 6px solid var(--dw-success) !important; background: #f0fdf4 !important; border-color: #dcfce7 !important; }
.dw-rec-type-aaaa { background: var(--dw-success) !important; color: #fff !important; padding: 2px 10px; border-radius: 6px; font-size: 11px; font-weight: 800; }

.dw-rec-header { display: flex; justify-content: space-between; margin-bottom: 15px; align-items: center; }
.dw-rec-type { background: var(--dw-primary); color: #fff; padding: 2px 10px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.dw-rec-ttl { font-size: 11px; color: var(--dw-text-mut); font-weight: 600; }

.dw-rec-body { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(0,0,0,0.02); padding: 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.03); }
.dw-rec-body code { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--dw-text); word-break: break-all; line-height: 1.4; }

.dw-btn-copy-sm { background: #fff; border: 1px solid var(--dw-border); padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: 0.2s; color: var(--dw-primary); flex-shrink: 0; }
.dw-btn-copy-sm:hover { background: var(--dw-primary); color: #fff; }

/* Map & Nodes (Static) */
.dw-map-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dw-node { background: #f8fafc; border: 1px solid var(--dw-border); padding: 15px; border-radius: 12px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; transition: 0.5s; }
.dw-node.active { border-color: var(--dw-success); color: var(--dw-success); background: #f0fdf4; }

/* Responsive Queries */
@media (max-width: 900px) {
    .dw-dns-dashboard { grid-template-columns: 1fr; } 
    .dw-map-grid { grid-template-columns: 1fr 1fr; } 
    .dw-dns-results-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .dw-dns-search-wrapper { flex-direction: column; padding: 15px; } 
    .dw-btn-glow { width: 100%; }
    .dw-map-grid { grid-template-columns: 1fr; } 
    .dw-dns-results-grid { grid-template-columns: 1fr; max-width: 100%; }
}