/* QS DNS Auditor — Optimized with QS Tools Variables */

.qs-dns-auditor {
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    border: 1px solid var(--qs-border-color, #e5e7eb);
    padding: var(--qs-spacing-md, 16px);
    border-radius: var(--qs-border-radius-lg, 12px);
    background: var(--qs-bg-primary, #ffffff);
    box-shadow: var(--qs-shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}

.qs-dns-form {
    display: flex;
    flex-direction: column;
    gap: var(--qs-spacing-sm, 12px);
}

.qs-dns-form label {
    font-weight: var(--qs-font-weight-semibold, 600);
    color: var(--qs-text-primary, #1f2937);
    margin-bottom: var(--qs-spacing-xs, 4px);
}

.qs-dns-form input[type="text"] {
    padding: var(--qs-spacing-sm, 12px);
    border: 1px solid var(--qs-border-color, #d1d5db);
    border-radius: var(--qs-border-radius-md, 8px);
    font-size: var(--qs-font-size-base, 14px);
    transition: border-color 0.2s;
}

.qs-dns-form input[type="text"]:focus {
    outline: none;
    border-color: var(--qs-color-primary, #3b82f6);
    box-shadow: 0 0 0 3px var(--qs-color-primary-light, rgba(59, 130, 246, 0.1));
}

.qs-dns-form button {
    padding: var(--qs-spacing-sm, 12px) var(--qs-spacing-md, 16px);
    background: var(--qs-color-primary, #3b82f6);
    color: #ffffff;
    border: none;
    border-radius: var(--qs-border-radius-md, 8px);
    font-weight: var(--qs-font-weight-semibold, 600);
    cursor: pointer;
    transition: background-color 0.2s;
}

.qs-dns-form button:hover {
    background: var(--qs-color-primary-hover, #2563eb);
}

.qs-hint {
    color: var(--qs-text-muted, #6b7280);
    font-size: var(--qs-font-size-sm, 12px);
    margin-top: var(--qs-spacing-xs, 6px);
}

.qs-dns-status {
    margin-top: var(--qs-spacing-sm, 10px);
    font-weight: var(--qs-font-weight-semibold, 600);
    color: var(--qs-text-primary, #1f2937);
}

.qs-dns-results {
    margin-top: var(--qs-spacing-md, 14px);
}

.qs-dns-hidden {
    display: none;
}

/* Badges */
.qs-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: var(--qs-font-size-sm, 12px);
    font-weight: var(--qs-font-weight-semibold, 600);
}

.qs-badge.ok {
    background: var(--qs-color-success-light, #e8f5e9);
    color: var(--qs-color-success-dark, #1b5e20);
}

.qs-badge.warn {
    background: var(--qs-color-warning-light, #fff8e1);
    color: var(--qs-color-warning-dark, #8d6e63);
}

.qs-badge.err {
    background: var(--qs-color-error-light, #ffebee);
    color: var(--qs-color-error-dark, #b71c1c);
}

/* Cards */
.qs-card {
    border: 1px solid var(--qs-border-color, #e5e7eb);
    border-radius: var(--qs-border-radius-lg, 12px);
    margin: var(--qs-spacing-sm, 12px) 0;
    overflow: hidden;
}

.qs-card-hd {
    background: var(--qs-bg-secondary, #f9fafb);
    padding: var(--qs-spacing-sm, 10px) var(--qs-spacing-md, 14px);
    font-weight: var(--qs-font-weight-bold, 700);
    color: var(--qs-text-primary, #1f2937);
}

.qs-card-bd {
    padding: var(--qs-spacing-sm, 12px) var(--qs-spacing-md, 14px);
}

/* Grid Layout */
.qs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--qs-spacing-sm, 12px);
}

/* Lists */
.qs-list {
    margin: 0;
    padding-left: 18px;
}

.qs-list li {
    margin: 4px 0;
    color: var(--qs-text-primary, #374151);
}

/* Key-Value Display */
.qs-kv {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.qs-kv dt {
    font-weight: var(--qs-font-weight-semibold, 600);
    margin-top: var(--qs-spacing-xs, 6px);
    color: var(--qs-text-primary, #1f2937);
}

.qs-kv dd {
    margin: 0;
    padding: 2px 0 8px 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--qs-text-secondary, #4b5563);
}

/* Table */
.qs-table {
    width: 100%;
    display: block;
    border: 1px solid var(--qs-border-color, #e5e7eb);
    border-radius: var(--qs-border-radius-md, 10px);
    overflow: hidden;
}

.qs-tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    border-top: 1px solid var(--qs-border-color-light, #f1f5f9);
}

.qs-tr:first-child {
    border-top: 0;
}

.qs-th {
    background: var(--qs-bg-secondary, #f8fafc);
    font-weight: var(--qs-font-weight-bold, 700);
    color: var(--qs-text-primary, #1f2937);
}

.qs-td {
    padding: var(--qs-spacing-xs, 8px) var(--qs-spacing-sm, 10px);
    font-size: var(--qs-font-size-sm, 13px);
    word-break: break-word;
    color: var(--qs-text-secondary, #4b5563);
}

/* Pills */
.qs-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qs-spacing-xs, 8px);
}

.qs-pill {
    background: var(--qs-bg-secondary, #f1f5f9);
    border: 1px solid var(--qs-border-color, #e2e8f0);
    padding: var(--qs-spacing-xs, 6px) var(--qs-spacing-sm, 10px);
    border-radius: 9999px;
    font-size: var(--qs-font-size-sm, 12px);
    color: var(--qs-text-secondary, #475569);
}

/* Responsive */
@media (max-width: 768px) {
    .qs-dns-auditor {
        padding: var(--qs-spacing-sm, 12px);
    }

    .qs-grid {
        grid-template-columns: 1fr;
    }

    .qs-tr {
        grid-template-columns: 1fr;
    }
}