/* NitroShock Site Audit Styles */
.ns-site-audit-wrapper {
    max-width: var(--ns-max-width, 1400px);
    margin: 0 auto;
    padding: 32px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Floating audit-in-progress widget                                   */
/* ------------------------------------------------------------------ */
.ns-audit-floating {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 320px;
    z-index: 9999;
    background: var(--surface, #1f1f1f);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    color: var(--ns-text-primary, #fff);
    overflow: hidden;
    font-size: 13px;
    animation: nsAuditFloatingIn 220ms ease-out;
}
@keyframes nsAuditFloatingIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ns-audit-floating-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ns-audit-floating-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
    animation: nsAuditPulse 1.6s infinite;
}
.ns-audit-floating-status-dot[data-state="complete"] {
    background: #10b981;
    animation: none;
}
.ns-audit-floating-status-dot[data-state="failed"] {
    background: #ef4444;
    animation: none;
}
@keyframes nsAuditPulse {
    0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.ns-audit-floating-title {
    flex: 1;
    font-weight: 600;
    font-size: 13px;
}
.ns-audit-floating-toggle {
    background: transparent;
    border: 0;
    color: var(--ns-text-secondary, #aaa);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    transition: transform 200ms ease;
}
.ns-audit-floating.collapsed .ns-audit-floating-toggle {
    transform: rotate(-90deg);
}
.ns-audit-floating-toggle:hover { color: #fff; }
.ns-audit-floating-body {
    padding: 12px;
    transition: max-height 200ms ease, padding 200ms ease;
    max-height: 260px;
    overflow: hidden;
}
.ns-audit-floating.collapsed .ns-audit-floating-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.ns-audit-floating-url {
    color: var(--ns-text-secondary, #aaa);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}
.ns-audit-floating-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.ns-audit-floating-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    transition: width 400ms ease;
}
.ns-audit-floating[data-state="complete"] .ns-audit-floating-fill {
    background: #10b981;
}
.ns-audit-floating[data-state="failed"] .ns-audit-floating-fill {
    background: #ef4444;
}
.ns-audit-floating-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--ns-text-secondary, #aaa);
}
.ns-audit-floating-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.ns-audit-floating-view {
    color: var(--ns-yellow-primary, #fbbf24);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
}
.ns-audit-floating-view:hover { text-decoration: underline; }
.ns-audit-floating-dismiss {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--ns-text-secondary, #aaa);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}
.ns-audit-floating-dismiss:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Header */
.ns-audit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.ns-audit-header .header-left {
    flex: 1;
}

.ns-audit-header .header-right {
    display: flex;
    gap: 16px;
    align-items: center;
}

.ns-audit-header h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ns-text-primary, #e5e5e5);
    font-size: var(--ns-h1-size, 28px);
    font-weight: 600;
    margin: 0;
}

.ns-audit-header h1 svg {
    width: 24px;
    height: 24px;
    stroke: var(--ns-primary, #fbbf24);
}

.ns-audit-stats {
    display: flex;
    gap: 16px;
}

.stat-card {
    text-align: center;
    padding: 12px 20px;
    background: var(--ns-surface, #1f1f1f);
    border-radius: 8px;
    border: 1px solid var(--ns-border, rgba(255,255,255,0.08));
}

.stat-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--ns-primary, #fbbf24);
}

.stat-label {
    font-size: 12px;
    color: var(--ns-text-secondary, #a1a1a1);
    text-transform: uppercase;
    margin-top: 4px;
}

/* Form */
.form-card {
    background: var(--ns-black-secondary, #1a1a1a);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}

.form-card h2 {
    margin-top: 0;
    color: var(--text-primary, #e5e5e5);
    font-size: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary, #a1a1a1);
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 10px 15px;
    background: var(--surface, #1f1f1f);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary, #e5e5e5);
    font-size: 14px;
}

.form-control:focus {
    outline: none;
    border-color: var(--ns-yellow-primary, #fbbf24);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--ns-yellow-primary, #fbbf24);
    color: var(--ns-black-primary, #0a0a0a);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--ns-yellow-dark, #f59e0b);
    transform: translateY(-1px);
}

.btn-primary svg {
    width: 18px;
    height: 18px;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    color: var(--ns-yellow-primary, #fbbf24);
    border: 1px solid var(--ns-yellow-primary, #fbbf24);
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.btn-secondary:hover {
    background: rgba(251, 191, 36, 0.1);
}

/* "Schedule Audits" button in the page header */
.ns-schedule-audits-link {
    margin-top: 10px;
    width: fit-content;
    text-decoration: none;
}

.ns-schedule-audits-link svg {
    /* Site-wide rule forces all svg to 1em; override to keep icon size */
    width: 16px !important;
    height: 16px !important;
}

.ns-schedule-count {
    background: var(--ns-yellow-primary, #fbbf24);
    color: #000;
    border-radius: 10px;
    padding: 0 7px;
    font-size: 12px;
    line-height: 18px;
}

/* Schedule Audits modal */
.ns-schedule-list {
    margin-bottom: 20px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    overflow: hidden;
}

.ns-schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
}

.ns-schedule-row + .ns-schedule-row {
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.ns-schedule-row-meta {
    display: block;
    color: var(--ns-text-secondary, #a1a1aa);
    font-size: 12px;
    margin-top: 2px;
}

.ns-schedule-row-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.ns-schedule-row-actions .ns-danger {
    color: var(--danger, #ef4444);
}

#schedule-audit-modal .ns-form-row {
    display: flex;
    gap: 12px;
}

#schedule-audit-modal .ns-form-row .form-group {
    flex: 1;
}

.ns-schedule-hint {
    color: var(--ns-text-secondary, #a1a1aa);
    font-size: 12px;
    margin: 10px 0 0;
}

/* Progress */
.progress-card {
    background: var(--ns-black-secondary, #1a1a1a);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.progress-header h3 {
    margin: 0;
    color: var(--text-primary, #e5e5e5);
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--ns-yellow-primary, #fbbf24);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.progress-bar {
    height: 8px;
    background: var(--surface, #1f1f1f);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
}

.progress-fill {
    height: 100%;
    background: var(--ns-yellow-primary, #fbbf24);
    border-radius: 4px;
    width: 0;
    transition: width 0.5s ease;
}

.progress-pages-count {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
    text-align: center;
}

/* Results */
.results-header {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 25px;
    background: var(--ns-black-secondary, #1a1a1a);
    border-radius: 12px;
    margin-bottom: 30px;
}

.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: conic-gradient(
        var(--ns-yellow-primary, #fbbf24) var(--score-percentage, 0%),
        var(--surface, #1f1f1f) 0
    );
    position: relative;
}

.score-circle::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--ns-black-secondary, #1a1a1a);
    border-radius: 50%;
}

.score-number {
    font-size: 36px;
    font-weight: bold;
    color: var(--ns-yellow-primary, #fbbf24);
    position: relative;
    z-index: 1;
}

.score-label {
    font-size: 12px;
    color: var(--text-secondary, #a1a1a1);
    position: relative;
    z-index: 1;
}

.results-summary {
    display: flex;
    gap: 30px;
    flex: 1;
}

.summary-item {
    text-align: center;
}

.summary-item .count {
    display: block;
    font-size: 28px;
    font-weight: bold;
}

.summary-item.issues .count {
    color: var(--danger, #ef4444);
}

.summary-item.warnings .count {
    color: var(--warning, #f59e0b);
}

.summary-item.passed .count {
    color: var(--success, #10b981);
}

/* Load time color states */
.summary-item.load-time.good .count {
    color: var(--success, #10b981);
}

.summary-item.load-time.warning .count {
    color: var(--warning, #f59e0b);
}

.summary-item.load-time.poor .count {
    color: var(--danger, #ef4444);
}

.summary-item .label {
    font-size: 12px;
    color: var(--text-secondary, #a1a1a1);
    text-transform: uppercase;
}

/* Tabs */
.results-tabs {
    display: none; /* Hidden by default, shown for single page audits */
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 8px 16px;
    background: transparent;
    color: var(--text-secondary, #a1a1a1);
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.tab-btn:hover {
    color: var(--text-primary, #e5e5e5);
    background: rgba(255,255,255,0.05);
}

.tab-btn.active {
    color: var(--ns-yellow-primary, #fbbf24);
    background: rgba(251, 191, 36, 0.1);
    border-bottom: none;
}

/* No checks message */
.no-checks-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary, #a1a1a1);
    font-size: 14px;
    background: var(--surface, #1f1f1f);
    border-radius: 8px;
}

/* Check Results */
.check-item {
    background: var(--surface, #1f1f1f);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.check-item.fail {
    border-left-color: var(--danger, #ef4444);
}

.check-item.warning {
    border-left-color: var(--warning, #f59e0b);
}

.check-item.pass {
    border-left-color: var(--success, #10b981);
}

.check-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.check-name {
    font-weight: 600;
    color: var(--text-primary, #e5e5e5);
}

.check-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

.check-status.fail {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger, #ef4444);
}

.check-status.warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning, #f59e0b);
}

.check-status.pass {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success, #10b981);
}

.check-details {
    color: var(--text-secondary, #a1a1a1);
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

.check-recommendations {
    display: block;
    background: rgba(251, 191, 36, 0.1);
    border-left: 3px solid var(--ns-yellow-primary, #fbbf24);
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--text-primary, #e5e5e5);
}

/* Recent Audits Section */
.ns-recent-audits {
    margin-top: 40px;
}

.ns-recent-audits h2 {
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--text-primary, #e5e5e5);
}

/* Table */
.audits-table {
    background: var(--ns-black-secondary, #1a1a1a);
    border-radius: 12px;
    overflow-x: auto;
}

.audits-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.audits-table th {
    background: var(--surface, #1f1f1f);
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary, #a1a1a1);
    font-weight: 600;
    white-space: nowrap;
}

.audits-table td {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    color: var(--text-primary, #e5e5e5);
    vertical-align: middle;
}

/* Plain links in the table (not the URL cell, which has its own layout below).
   :not(.url-link) matters: this rule is more specific than .url-link, so without
   it the anchor was forced back to inline-block + ellipsis, the 28px globe ate
   the box, and every domain rendered as "jh..." regardless of column width. */
.audits-table td a:not(.url-link) {
    color: var(--ns-yellow-primary, #fbbf24);
    text-decoration: none;
    max-width: 250px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audits-table td a:hover {
    text-decoration: underline;
}

.score-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
}

.score-good {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success, #10b981);
}

.score-warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning, #f59e0b);
}

.score-poor {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger, #ef4444);
}

.issues-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger, #ef4444);
}

.btn-small {
    padding: 6px 12px;
    background: var(--surface, #1f1f1f);
    color: var(--text-primary, #e5e5e5);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    margin-right: 5px;
    transition: all 0.2s;
}

.btn-small:hover {
    background: var(--surface-hover, #252525);
    border-color: var(--ns-yellow-primary, #fbbf24);
    color: var(--ns-yellow-primary, #fbbf24);
}

.btn-small.view-audit {
    background: rgba(251, 191, 36, 0.1);
    border-color: var(--ns-yellow-primary, #fbbf24);
    color: var(--ns-yellow-primary, #fbbf24);
}

.btn-small.view-audit:hover {
    background: rgba(251, 191, 36, 0.2);
}

/* Export Options */
.export-options {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-export {
    padding: 8px 16px;
    background: var(--surface, #1f1f1f);
    color: var(--text-primary, #e5e5e5);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.btn-export:hover {
    background: var(--surface-hover, #252525);
    border-color: var(--ns-yellow-primary, #fbbf24);
}

/* Advanced Settings */
.btn-link {
    background: none;
    border: none;
    color: var(--ns-yellow-primary, #fbbf24);
    cursor: pointer;
    padding: 8px 0;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}

.btn-link:hover {
    opacity: 0.8;
}

.btn-link.active {
    color: var(--ns-yellow-dark, #f59e0b);
}

.audit-settings {
    margin-top: 15px;
    padding: 20px;
    background: var(--surface, #1f1f1f);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 8px;
}

/* Two columns, not auto-fit. auto-fit produced four cramped columns on a wide
   panel, which is what forced "Check External Links" to wrap onto two lines and
   pushed its description alongside the label. Fewer columns, more rows, no wrap. */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
}

@media (max-width: 720px) {
    .settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.setting-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.setting-item label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e5e5e5);
}

.setting-item small {
    font-size: 11px;
    color: var(--text-secondary, #999);
    margin-top: -3px;
}

/* Exclude-URL patterns need the full panel width: a two-column cell wraps every
   pattern mid-path, which is exactly the part you need to read to trust it. */
.setting-item-wide {
    grid-column: 1 / -1;
}

.setting-item-wide textarea.form-control {
    font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.6;
    resize: vertical;
    min-height: 76px;
    white-space: pre;
    overflow-x: auto;
}

.setting-item-wide small code {
    font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ns-yellow-primary, #fbbf24);
}

/* Checkbox settings read as a card: box + title on one line, description beneath
   and indented to the title. The old `flex-direction: row` put the <small>
   alongside the <label>, so both competed for the same narrow column and the
   title wrapped mid-phrase. */
.setting-item.checkbox-item {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.2s, background 0.2s;
}

.setting-item.checkbox-item:hover {
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(255, 255, 255, 0.04);
}

.setting-item.checkbox-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    /* The title is short; never break it across lines. */
    white-space: nowrap;
}

.setting-item.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--ns-yellow-primary, #fbbf24);
}

/* Line the description up under the title text, past the checkbox. */
.setting-item.checkbox-item small {
    margin-top: 0;
    padding-left: 26px;
    white-space: normal;
}

.form-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

/* Audit Type Toggle */
.audit-type-toggle {
    display: flex;
    gap: 15px;
    margin: 15px 0;
    padding: 15px;
    background: var(--surface, #1f1f1f);
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
}

.toggle-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px;
    background: var(--ns-black-secondary, #1a1a1a);
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-option:hover {
    border-color: var(--ns-yellow-primary, #fbbf24);
    background: rgba(251, 191, 36, 0.05);
}

.toggle-option input[type="radio"] {
    display: none;
}

.toggle-option input[type="radio"]:checked + span {
    color: var(--ns-yellow-primary, #fbbf24);
}

.toggle-option input[type="radio"]:checked ~ small {
    color: var(--text-primary, #e5e5e5);
}

.toggle-option span {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #e5e5e5);
}

.toggle-option small {
    font-size: 12px;
    color: var(--text-secondary, #999);
}

.toggle-option input[type="radio"]:checked {
    & ~ span::before {
        content: '✓ ';
        color: var(--ns-yellow-primary, #fbbf24);
    }
}

/* Cancel Button */
.btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background: rgba(239, 68, 68, 0.1);
    transform: translateY(-1px);
}

.progress-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .ns-audit-header {
        flex-direction: column;
        gap: 20px;
    }

    /* Two flex:1 options share ~150px each on a phone, which wraps
       "Full Site Audit" onto three lines. Stack them instead. */
    .audit-type-toggle {
        flex-direction: column;
        gap: 10px;
    }

    .toggle-option {
        padding: 12px 15px;
    }

    .form-actions {
        flex-direction: column;
    }
    
    .btn-primary,
    .btn-cancel {
        width: 100%;
        justify-content: center;
    }
}

/* Audit Tabs */
.audit-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255,255,255,0.08);
}

.audit-tab {
    padding: 12px 24px;
    background: transparent;
    color: var(--text-secondary, #a3a3a3);
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.audit-tab:hover {
    color: var(--text-primary, #e5e5e5);
    background: rgba(255,255,255,0.03);
}

.audit-tab.active {
    color: var(--ns-yellow-primary, #fbbf24);
    border-bottom-color: var(--ns-yellow-primary, #fbbf24);
}

.audit-tab-content {
    min-height: 200px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Issue Names List */
.issue-names-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.issue-name-item {
    background: var(--surface, #1f1f1f);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}

.issue-name-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.issue-name-link:hover {
    background: rgba(255,255,255,0.03);
}

.expand-icon {
    font-size: 12px;
    color: var(--text-secondary, #a3a3a3);
    transition: transform 0.3s;
    width: 12px;
    flex-shrink: 0;
}

.issue-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.issue-name-text {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #e5e5e5);
}

.issue-count-badge {
    padding: 4px 12px;
    background: rgba(251, 191, 36, 0.15);
    color: var(--ns-yellow-primary, #fbbf24);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.issue-urls-list {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 12px 20px 16px;
    background: var(--ns-black-secondary, #1a1a1a);
}

/* URL List */
.url-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.url-item {
    background: var(--surface, #1f1f1f);
    border-left: 3px solid var(--ns-yellow-primary, #fbbf24);
    border-radius: 4px;
    padding: 12px 14px;
    transition: all 0.2s;
}

.url-item:hover {
    background: var(--surface, #242424);
    transform: translateX(2px);
}

.url-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.url-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.url-link {
    flex: 1;
    color: var(--ns-yellow-primary, #fbbf24);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    word-break: break-all;
    transition: color 0.2s;
}

.url-link:hover {
    color: var(--ns-yellow-hover, #f59e0b);
    text-decoration: underline;
}

.url-details {
    color: var(--text-secondary, #a3a3a3);
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 8px;
    padding-left: 0;
}

.url-fix {
    background: rgba(251, 191, 36, 0.08);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.6;
}

.url-fix strong {
    color: var(--ns-yellow-primary, #fbbf24);
    margin-right: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.url-linked-from {
    margin-top: 8px;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid rgba(239, 68, 68, 0.6);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.6;
}

.url-linked-from strong {
    display: block;
    color: #ef4444;
    margin-bottom: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.url-linked-from .linked-from-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
}

.url-linked-from .linked-from-list li {
    padding: 2px 0;
    word-break: break-all;
}

/* The dashboard's global (Oxygen base-styles) list decoration adds a ::before
   bullet to every li; inside this panel the dots render hanging outside the
   red box. Suppress it here — !important because the global rule is id-scoped
   and outranks this stylesheet's class selectors. */
.url-linked-from .linked-from-list li::before {
    content: none !important;
    display: none !important;
}
.url-linked-from .linked-from-list li::marker {
    content: none;
}

.url-linked-from .linked-from-list a {
    color: var(--ns-text-secondary, #aaa);
    text-decoration: none;
}

.url-linked-from .linked-from-list a:hover {
    color: var(--ns-yellow-primary, #fbbf24);
    text-decoration: underline;
}

/* Issue Type Cards (for site audits - group by issue type) */
.issue-type-card {
    background: var(--surface, #1f1f1f);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.2s;
}

.issue-type-card.has-issues {
    border-left: 4px solid #ef4444;
}

.issue-type-card.has-warnings {
    border-left: 4px solid #f59e0b;
}

.issue-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    gap: 16px;
}

.issue-type-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.issue-type-icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.issue-type-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #e5e5e5);
    margin-bottom: 6px;
}

.issue-type-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.severity-badge {
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 11px;
}

.severity-badge.has-issues {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.severity-badge.has-warnings {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.affected-count {
    color: var(--text-secondary, #a3a3a3);
}

.affected-pages-detail {
    padding: 0 20px 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.affected-pages-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.affected-page-item {
    background: var(--ns-black-secondary, #1a1a1a);
    border-left: 3px solid;
    border-radius: 6px;
    padding: 12px 14px;
    transition: all 0.2s;
}

.affected-page-item.issue {
    border-left-color: #ef4444;
}

.affected-page-item.warning {
    border-left-color: #f59e0b;
}

.affected-page-item:hover {
    background: var(--surface, #242424);
    transform: translateX(2px);
}

.affected-page-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.affected-page-url {
    color: var(--ns-yellow-primary, #fbbf24);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    flex: 1;
    word-break: break-all;
    transition: color 0.2s;
}

.affected-page-url:hover {
    color: var(--ns-yellow-hover, #f59e0b);
    text-decoration: underline;
}

.btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    background: transparent;
    color: var(--text-secondary, #a3a3a3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-mini:hover {
    background: var(--surface, #2a2a2a);
    color: var(--ns-yellow-primary, #fbbf24);
    border-color: var(--ns-yellow-primary, #fbbf24);
}

.btn-mini svg {
    width: 12px;
    height: 12px;
}

.page-issue-details {
    color: var(--text-secondary, #a3a3a3);
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 6px;
}

.page-issue-fix {
    background: rgba(251, 191, 36, 0.08);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.6;
}

.page-issue-fix strong {
    color: var(--ns-yellow-primary, #fbbf24);
    margin-right: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.no-issues {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary, #a3a3a3);
}

.success-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.no-issues h3 {
    color: var(--text-primary, #e5e5e5);
    font-size: 20px;
    margin: 0 0 8px 0;
}

.no-issues p {
    margin: 0;
    font-size: 14px;
}

/* Page Summary Cards */
.page-summary {
    background: var(--surface, #1f1f1f);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.2s;
}

.page-summary.has-issues {
    border-left: 3px solid #ef4444;
}

.page-summary.has-warnings {
    border-left: 3px solid #f59e0b;
}

.page-summary.passed {
    border-left: 3px solid #10b981;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    gap: 16px;
}

.page-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.page-status-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.page-url-display {
    margin-bottom: 6px;
}

.page-url-display a {
    color: var(--ns-yellow-primary, #fbbf24);
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
    transition: color 0.2s;
}

.page-url-display a:hover {
    color: var(--ns-yellow-hover, #f59e0b);
    text-decoration: underline;
}

.page-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.stat-issues,
.stat-warnings,
.stat-passed {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.stat-issues {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.stat-warnings {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.stat-passed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.page-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--ns-black-secondary, #1a1a1a);
    color: var(--text-primary, #e5e5e5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-small:hover {
    background: var(--surface, #2a2a2a);
    border-color: var(--ns-yellow-primary, #fbbf24);
    transform: translateY(-1px);
}

.btn-small svg {
    width: 14px;
    height: 14px;
}

.toggle-issues svg {
    transition: transform 0.3s;
}

.toggle-issues.expanded svg {
    transform: rotate(180deg);
}

.page-issues-detail {
    padding: 0 20px 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Issue Groups */
.issue-groups {
    margin-top: 12px;
}

.issue-group {
    margin-bottom: 20px;
}

.issue-group:last-child {
    margin-bottom: 0;
}

.issue-group-title {
    color: var(--ns-yellow-primary, #fbbf24);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

.issue-item {
    background: var(--ns-black-secondary, #1a1a1a);
    border-left: 3px solid;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.issue-item.fail {
    border-left-color: #ef4444;
}

.issue-item.warning {
    border-left-color: #f59e0b;
}

.issue-item:hover {
    background: var(--surface, #242424);
    transform: translateX(2px);
}

.issue-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.issue-icon {
    font-size: 16px;
    line-height: 1;
}

.issue-name {
    font-weight: 600;
    color: var(--text-primary, #e5e5e5);
    flex: 1;
}

.issue-details {
    color: var(--text-secondary, #a3a3a3);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.issue-recommendations {
    background: rgba(251, 191, 36, 0.08);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.6;
}

.issue-recommendations strong {
    color: var(--ns-yellow-primary, #fbbf24);
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Check Groups for Single Page Audits */
.check-group {
    background: var(--surface, #1f1f1f);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.check-group-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ns-yellow-primary, #fbbf24);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

.group-counts {
    display: flex;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
}

.count-issues,
.count-warnings,
.count-passed {
    padding: 2px 8px;
    border-radius: 4px;
}

.count-issues {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.count-warnings {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.count-passed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.check-group-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.check-item {
    background: var(--ns-black-secondary, #1a1a1a);
    border-left: 3px solid;
    border-radius: 6px;
    padding: 12px 16px;
    transition: all 0.2s;
}

.check-item.fail {
    border-left-color: #ef4444;
}

.check-item.warning {
    border-left-color: #f59e0b;
}

.check-item.pass {
    border-left-color: #10b981;
}

.check-item:hover {
    background: var(--surface, #242424);
    transform: translateX(2px);
}

.check-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.check-icon {
    display: flex;
    align-items: center;
    line-height: 1;
}

.check-icon .status-icon {
    width: 16px;
    height: 16px;
}

.check-icon .status-icon.error {
    color: #ef4444;
}

.check-icon .status-icon.warning {
    color: #f59e0b;
}

.check-icon .status-icon.pass {
    color: #22c55e;
}

.check-name {
    font-weight: 600;
    color: var(--text-primary, #e5e5e5);
    flex: 1;
}

.check-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.check-status.fail {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.check-status.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.check-status.pass {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.check-details {
    color: var(--text-secondary, #a3a3a3);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 8px;
    display: block;
}

.check-recommendations {
    display: block;
    background: rgba(251, 191, 36, 0.08);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 8px;
}

.check-recommendations strong {
    color: var(--ns-yellow-primary, #fbbf24);
    margin-right: 4px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .page-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .btn-small {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* URL Pagination */
.url-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-top: 12px;
    background: var(--ns-black-secondary, #1a1a1a);
    border-radius: 6px;
}

.page-btn {
    padding: 6px 14px;
    background: var(--surface, #2a2a2a);
    color: var(--text-primary, #e5e5e5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
    background: var(--ns-yellow-primary, #fbbf24);
    color: var(--ns-black-primary, #0a0a0a);
    border-color: var(--ns-yellow-primary, #fbbf24);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info {
    font-size: 13px;
    color: var(--text-secondary, #a3a3a3);
}

.current-page-num {
    color: var(--ns-yellow-primary, #fbbf24);
    font-weight: 700;
}

/* Issues Popup */
.issues-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.issues-popup {
    background: var(--surface, #1f1f1f);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    max-width: 700px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.popup-header h3 {
    margin: 0;
    color: var(--text-primary, #e5e5e5);
    font-size: 18px;
}

.close-popup {
    background: none;
    border: none;
    color: var(--text-secondary, #a3a3a3);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.close-popup:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary, #e5e5e5);
}

.popup-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.popup-url {
    padding: 12px;
    background: var(--ns-black-secondary, #1a1a1a);
    border-radius: 6px;
    margin-bottom: 20px;
    word-break: break-all;
}

.popup-url strong {
    color: var(--text-secondary, #a3a3a3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 6px;
}

.popup-url a {
    color: var(--ns-yellow-primary, #fbbf24);
    text-decoration: none;
}

.popup-url a:hover {
    text-decoration: underline;
}

.popup-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px;
    background: var(--ns-black-secondary, #1a1a1a);
    border-radius: 6px;
    flex-wrap: wrap;
}

.popup-summary .summary-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.popup-summary .summary-stat svg {
    flex-shrink: 0;
}

.popup-summary .summary-stat.issues {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.popup-summary .summary-stat.warnings {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.popup-summary .summary-stat.passed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.popup-check-group {
    margin-bottom: 20px;
}

.popup-check-group h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ns-text-primary, #ffffff);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.popup-check-group h4 svg {
    flex-shrink: 0;
}

.popup-check-group ul {
    margin: 0;
    padding-left: 20px;
    list-style: none;
}

.popup-check-group ul li {
    margin-bottom: 8px;
    padding-left: 0;
    color: var(--text-primary, #e5e5e5);
    line-height: 1.6;
}

.popup-check-group ul li strong {
    color: var(--ns-yellow-primary, #fbbf24);
}

.popup-section {
    margin-bottom: 20px;
}

.popup-section h4 {
    color: var(--ns-yellow-primary, #fbbf24);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

.popup-section p {
    color: var(--text-primary, #e5e5e5);
    line-height: 1.6;
    margin: 0;
}

.popup-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.btn-secondary {
    padding: 10px 20px;
    background: transparent;
    color: var(--text-primary, #e5e5e5);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.3);
}

/* Checks Configuration */
.settings-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.settings-section h4 {
    margin: 0;
}

.section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text-primary, #e5e5e5);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    width: 100%;
    text-align: left;
    transition: color 0.2s;
}

.section-toggle:hover {
    color: var(--ns-yellow-primary, #fbbf24);
}

.toggle-icon {
    font-size: 10px;
    transition: transform 0.3s;
}

.checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.check-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--ns-black-secondary, #1a1a1a);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.check-toggle-item:hover {
    border-color: var(--ns-yellow-primary, #fbbf24);
    background: rgba(251, 191, 36, 0.05);
}

.check-toggle-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.check-toggle-item span {
    font-size: 13px;
    color: var(--text-primary, #e5e5e5);
    font-weight: 500;
}

.check-toggle-item input[type="checkbox"]:checked + span {
    color: var(--ns-yellow-primary, #fbbf24);
}

/* ========================================
   Lighthouse Dashboard Styles
   ======================================== */

.lighthouse-dashboard {
    max-width: 100%;
    padding: 0;
}

.lighthouse-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px;
}

.lighthouse-audit-form {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

.lighthouse-form-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.lighthouse-url-input {
    flex: 1;
    min-width: 300px;
    padding: 12px 16px;
    background: var(--bg-tertiary, #0f172a);
    border: 1px solid var(--border, #334155);
    border-radius: 6px;
    color: var(--text-primary, #f1f5f9);
    font-size: 14px;
}

.lighthouse-url-input:focus {
    outline: none;
    border-color: var(--ns-yellow-primary, #fbbf24);
}

.lighthouse-options {
    display: flex;
    gap: 16px;
    align-items: center;
}

.lighthouse-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #94a3b8);
    font-size: 14px;
    cursor: pointer;
}

.lighthouse-checkbox-label input {
    cursor: pointer;
}

.lighthouse-run-btn {
    padding: 12px 32px;
    background: var(--ns-yellow-primary, #fbbf24);
    color: var(--ns-black-primary, #0f172a);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.lighthouse-run-btn:hover {
    background: var(--ns-yellow-light, #fcd34d);
    transform: translateY(-1px);
}

.lighthouse-run-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lighthouse-loading {
    display: none;
    text-align: center;
    padding: 40px;
    color: var(--text-secondary, #94a3b8);
}

.lighthouse-loading.active {
    display: block;
}

.lighthouse-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border, #334155);
    border-top-color: var(--ns-yellow-primary, #fbbf24);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Score Cards */
.lighthouse-scores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.lighthouse-score-card {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.lighthouse-score-label {
    color: var(--text-secondary, #94a3b8);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.lighthouse-score-circle {
    width: 100px;
    height: 100px;
    margin: 0 auto 12px;
    position: relative;
}

.lighthouse-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: 700;
}

.lighthouse-score-grade {
    color: var(--text-secondary, #94a3b8);
    font-size: 12px;
}

/* Core Web Vitals */
.lighthouse-metrics {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.lighthouse-metrics-title {
    color: var(--text-primary, #f1f5f9);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px;
}

.lighthouse-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.lighthouse-metric-item {
    padding: 16px;
    background: var(--bg-tertiary, #0f172a);
    border-radius: 6px;
}

.lighthouse-metric-label {
    color: var(--text-secondary, #94a3b8);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.lighthouse-metric-value {
    color: var(--text-primary, #f1f5f9);
    font-size: 24px;
    font-weight: 700;
}

.lighthouse-metric-unit {
    color: var(--text-secondary, #94a3b8);
    font-size: 14px;
    margin-left: 4px;
}

/* Opportunities */
.lighthouse-opportunities {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.lighthouse-opportunities-title {
    color: var(--text-primary, #f1f5f9);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px;
}

.lighthouse-opportunity-item {
    padding: 16px;
    background: var(--bg-tertiary, #0f172a);
    border-left: 3px solid var(--ns-yellow-primary, #fbbf24);
    border-radius: 4px;
    margin-bottom: 12px;
}

.lighthouse-opportunity-item:last-child {
    margin-bottom: 0;
}

.lighthouse-opportunity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.lighthouse-opportunity-title {
    color: var(--text-primary, #f1f5f9);
    font-weight: 600;
    font-size: 14px;
}

.lighthouse-opportunity-savings {
    color: var(--ns-yellow-primary, #fbbf24);
    font-size: 13px;
    font-weight: 600;
}

.lighthouse-opportunity-desc {
    color: var(--text-secondary, #94a3b8);
    font-size: 13px;
    line-height: 1.5;
}

/* Loading and Error States */
.lighthouse-loading {
    text-align: center;
    padding: 30px;
    color: var(--text-secondary, #94a3b8);
    font-size: 14px;
}

.lighthouse-loading .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    opacity: 0.8;
}

.lighthouse-loading .spin {
    animation: spin 1s linear infinite;
}

.lighthouse-error {
    text-align: center;
    padding: 30px;
    color: #ef4444;
    font-size: 14px;
}

/* Results Info */
.lighthouse-results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-tertiary, #0f172a);
    border-radius: 6px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.lighthouse-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #94a3b8);
    font-size: 13px;
}

.lighthouse-cache-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--ns-yellow-dark, #d97706);
    color: var(--ns-black-primary, #0f172a);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.lighthouse-cost-badge {
    color: var(--ns-success, #22c55e);
    font-weight: 600;
}

/* Error State */
.lighthouse-error {
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #ef4444;
    margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .lighthouse-form-row {
        flex-direction: column;
    }
    
    .lighthouse-url-input {
        width: 100%;
    }
    
    .lighthouse-scores-grid {
        grid-template-columns: 1fr;
    }
    
    .lighthouse-results-info {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   Page Limit Slider & Credit Estimator
   ======================================== */

.page-limit-section {
    margin-top: 20px;
    padding: 20px;
    background: var(--surface, #1f1f1f);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 8px;
}

.page-limit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.page-limit-header label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e5e5e5);
}

.page-limit-value {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #a1a1a1);
    font-size: 14px;
}

.page-limit-number {
    width: 70px;
    padding: 6px 10px;
    text-align: center;
    background: var(--ns-black-secondary, #1a1a1a);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 6px;
    color: var(--ns-yellow-primary, #fbbf24);
    font-size: 18px;
    font-weight: 700;
}

.page-limit-number:focus {
    outline: none;
    border-color: var(--ns-yellow-primary, #fbbf24);
}

.page-limit-slider-container {
    margin-bottom: 20px;
}

/* --fill is the current value's fraction of the range, set from JS. The track
   is filled up to the thumb so the value's position is unmistakable. */
.page-limit-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    cursor: pointer;
    --fill: 0;
    background: linear-gradient(
        to right,
        var(--ns-yellow-primary, #fbbf24) 0%,
        var(--ns-yellow-primary, #fbbf24) calc(var(--fill) * (100% - 24px) + 12px),
        var(--ns-black-secondary, #1a1a1a) calc(var(--fill) * (100% - 24px) + 12px),
        var(--ns-black-secondary, #1a1a1a) 100%
    );
}

.page-limit-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--ns-yellow-primary, #fbbf24);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--ns-black-primary, #0a0a0a);
    transition: transform 0.2s;
}

.page-limit-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.page-limit-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--ns-yellow-primary, #fbbf24);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--ns-black-primary, #0a0a0a);
}

/* Truthful scale: each tick sits at its real position on the linear range, not
   at an evenly-spaced flex slot. Offsetting by half the 24px thumb keeps the
   tick aligned with the thumb's centre at both ends. */
.slider-scale {
    position: relative;
    height: 26px;
    margin-top: 6px;
}

.slider-tick {
    position: absolute;
    top: 0;
    left: calc(var(--p) * (100% - 24px) + 12px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--text-secondary, #a1a1a1);
    white-space: nowrap;
    pointer-events: none;
}

.slider-tick i {
    width: 1px;
    height: 5px;
    background: rgba(255, 255, 255, 0.22);
}

.slider-tick b {
    font-weight: 500;
}

.credit-estimate-box {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.credit-estimate-main {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.credit-icon svg {
    stroke: var(--ns-yellow-primary, #fbbf24);
}

.credit-text {
    font-size: 15px;
    color: var(--text-primary, #e5e5e5);
}

.credit-text strong {
    color: var(--ns-yellow-primary, #fbbf24);
    font-size: 18px;
}

.credit-estimate-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary, #a1a1a1);
}

.credit-estimate-note svg {
    stroke: var(--text-secondary, #a1a1a1);
    flex-shrink: 0;
}

/* Device Toggle */
.device-toggle {
    display: flex;
    gap: 12px;
}

.device-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px;
    background: var(--ns-black-secondary, #1a1a1a);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.device-option:hover {
    border-color: rgba(251, 191, 36, 0.3);
}

.device-option input[type="radio"] {
    display: none;
}

.device-option input[type="radio"]:checked + .device-icon svg,
.device-option input[type="radio"]:checked ~ span {
    color: var(--ns-yellow-primary, #fbbf24);
    stroke: var(--ns-yellow-primary, #fbbf24);
}

.device-option input[type="radio"]:checked ~ span {
    color: var(--ns-yellow-primary, #fbbf24);
}

.device-option:has(input:checked) {
    border-color: var(--ns-yellow-primary, #fbbf24);
    background: rgba(251, 191, 36, 0.05);
}

.device-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.device-icon svg {
    stroke: var(--text-secondary, #a1a1a1);
    transition: stroke 0.2s;
}

.device-option span:last-child {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #a1a1a1);
    transition: color 0.2s;
}

/* ========================================
   Core Web Vitals Section
   ======================================== */

.core-web-vitals {
    background: var(--surface, #1f1f1f);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.core-web-vitals h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    color: var(--text-primary, #e5e5e5);
    font-size: 18px;
    font-weight: 600;
}

.core-web-vitals h3 svg {
    stroke: var(--ns-yellow-primary, #fbbf24);
}

.vitals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.vital-card {
    background: var(--ns-black-secondary, #1a1a1a);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    transition: all 0.3s ease;
}

.vital-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.vital-card.good {
    border-color: rgba(16, 185, 129, 0.3);
}

.vital-card.needs-improvement {
    border-color: rgba(245, 158, 11, 0.3);
}

.vital-card.poor {
    border-color: rgba(239, 68, 68, 0.3);
}

.vital-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-secondary, #a1a1a1);
    margin-bottom: 8px;
}

.vital-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
}

.vital-card.good .vital-value {
    color: var(--success, #10b981);
}

.vital-card.needs-improvement .vital-value {
    color: var(--warning, #f59e0b);
}

.vital-card.poor .vital-value {
    color: var(--danger, #ef4444);
}

.vital-name {
    font-size: 12px;
    color: var(--text-secondary, #a1a1a1);
    margin-bottom: 12px;
}

.vital-bar {
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.vital-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.vital-card.good .vital-fill {
    background: var(--success, #10b981);
}

.vital-card.needs-improvement .vital-fill {
    background: var(--warning, #f59e0b);
}

.vital-card.poor .vital-fill {
    background: var(--danger, #ef4444);
}

/* Results Meta Section */
.results-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.credits-used {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 6px;
    color: var(--ns-yellow-primary, #fbbf24);
    font-size: 14px;
    font-weight: 600;
}

.credits-used svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.summary-item.pages .count {
    color: var(--ns-yellow-primary, #fbbf24);
}

/* Responsive for new sections */
@media (max-width: 768px) {
    .slider-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .slider-container {
        flex-direction: column;
    }
    
    .page-display {
        width: 100%;
    }
    
    .vitals-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .results-header {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    
    .results-meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .vitals-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   PASSED CHECKS SECTION
   ========================================= */
.passed-checks-section {
    background: var(--ns-black-secondary, #1a1a1a);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 24px;
}

.passed-checks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(16, 185, 129, 0.08);
    cursor: pointer;
    transition: background 0.2s;
}

.passed-checks-header:hover {
    background: rgba(16, 185, 129, 0.12);
}

.passed-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.passed-icon {
    width: 32px;
    height: 32px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success, #10b981);
}

.passed-icon svg {
    width: 18px;
    height: 18px;
}

.passed-title {
    color: var(--ns-text-primary, #ffffff);
    font-size: 16px;
    font-weight: 600;
}

.passed-count {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success, #10b981);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.expand-icon {
    width: 24px;
    height: 24px;
    color: var(--text-secondary, #a1a1a1);
    transition: transform 0.3s ease;
}

.passed-checks-header.expanded .expand-icon {
    transform: rotate(180deg);
}

.passed-checks-content {
    display: none;
    padding: 20px;
    border-top: 1px solid rgba(16, 185, 129, 0.1);
}

.passed-checks-content.visible {
    display: block;
}

.passed-checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.check-category {
    background: var(--surface, #1f1f1f);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s;
}

.check-category:hover {
    border-color: rgba(16, 185, 129, 0.3);
    transform: translateY(-2px);
}

.check-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.check-category-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ns-text-primary, #ffffff);
    text-transform: capitalize;
}

.check-category-count {
    font-size: 12px;
    color: var(--success, #10b981);
    font-weight: 600;
    background: rgba(16, 185, 129, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
}

.check-category-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Simple check list items in category view */
.check-category-items .simple-check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary, #a1a1a1);
    line-height: 1.4;
}

.check-category-items .simple-check-item::before {
    content: '✓';
    color: var(--success, #10b981);
    font-weight: bold;
    flex-shrink: 0;
}

/* Checks Summary Section */
.checks-summary {
    display: flex;
    gap: 24px;
    padding: 20px;
    background: var(--ns-black-secondary, #1a1a1a);
    border-radius: 12px;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.05);
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px;
    background: var(--surface, #1f1f1f);
    border-radius: 10px;
    min-width: 100px;
}

.summary-stat.issues {
    border-left: 3px solid var(--danger, #ef4444);
}

.summary-stat.warnings {
    border-left: 3px solid var(--warning, #f59e0b);
}

.summary-stat.passed {
    border-left: 3px solid var(--success, #10b981);
}

.summary-stat .value {
    font-size: 28px;
    font-weight: 700;
    color: var(--ns-text-primary, #ffffff);
}

.summary-stat.issues .value {
    color: var(--danger, #ef4444);
}

.summary-stat.warnings .value {
    color: var(--warning, #f59e0b);
}

.summary-stat.passed .value {
    color: var(--success, #10b981);
}

.summary-stat .label {
    font-size: 12px;
    color: var(--text-secondary, #a1a1a1);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive for passed checks */
@media (max-width: 768px) {
    .passed-checks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .checks-summary {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .summary-stat {
        flex: 1;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .passed-checks-grid {
        grid-template-columns: 1fr;
    }
    
    .passed-checks-header {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* =========================================
   SVG ICON STYLING
   ========================================= */
.tab-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
}

.tab-icon.error {
    color: var(--danger, #ef4444);
}

.tab-icon.warning {
    color: var(--warning, #f59e0b);
}

.tab-icon.success {
    color: var(--success, #10b981);
}

.issue-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    flex-shrink: 0;
}

.issue-icon.error {
    color: var(--danger, #ef4444);
}

.issue-icon.warning {
    color: var(--warning, #f59e0b);
}

.expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: var(--text-secondary, #a1a1a1);
    transition: transform 0.2s;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.expand-icon svg {
    width: 18px;
    height: 18px;
}

.passed-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    color: var(--success, #10b981);
    flex-shrink: 0;
}

.passed-icon svg {
    stroke: var(--success, #10b981);
}

/* Passed checks grid layout */
.passed-checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.passed-type-group {
    background: var(--surface, #1f1f1f);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.passed-type-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--success, #10b981);
    margin: 0 0 12px 0;
    text-transform: capitalize;
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    padding-bottom: 8px;
}

.passed-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.passed-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: rgba(16, 185, 129, 0.05);
    border-radius: 6px;
    font-size: 13px;
    color: var(--ns-text-primary, #ffffff);
}

.passed-name {
    flex: 1;
}

.passed-count {
    font-size: 11px;
    color: var(--text-secondary, #a1a1a1);
    background: rgba(255,255,255,0.1);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Audit tabs styling */
.audit-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.audit-tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: var(--surface, #1f1f1f);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-secondary, #a1a1a1);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.audit-tab:hover {
    background: rgba(255,255,255,0.05);
    color: var(--ns-text-primary, #ffffff);
}

.audit-tab.active {
    background: var(--ns-yellow-primary, #fbbf24);
    color: #000;
    border-color: var(--ns-yellow-primary, #fbbf24);
}

.audit-tab.active .tab-icon {
    color: #000;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.checks-summary {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    color: var(--text-secondary, #a1a1a1);
    font-size: 14px;
}

/* ============================================
   SCANNING PROGRESS - Grid Layout with Icons
   ============================================ */
.checks-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 20px;
    padding: 20px;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
}

.check-progress-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.check-progress-item.scanning {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.3);
    animation: pulse-scan 1.5s ease-in-out infinite;
}

.check-progress-item.complete {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
}

@keyframes pulse-scan {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(0.98); }
}

.check-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    flex-shrink: 0;
}

.check-icon.pending {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.3);
}

.check-icon.scanning {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    animation: icon-spin 1s linear infinite;
}

.check-icon.complete {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

@keyframes icon-spin {
    to { transform: rotate(360deg); }
}

.check-icon svg.spin {
    animation: icon-spin 0.8s linear infinite;
}

.spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: icon-spin 0.6s linear infinite;
}

.check-text {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    line-height: 1.3;
}

.check-progress-item.complete .check-text {
    color: rgba(255,255,255,0.6);
}

/* Progress stats row */
.progress-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
    padding: 16px;
    background: rgba(251, 191, 36, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.15);
}

.progress-stat {
    text-align: center;
}

.progress-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #fbbf24;
}

.progress-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ============================================
   EXPORT/REPORT BUTTONS - Premium Style
   ============================================ */
.report-actions {
    display: flex !important;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.05), rgba(251, 191, 36, 0.02));
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 12px;
}

.btn-report {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    text-decoration: none;
}

.btn-report svg {
    width: 18px;
    height: 18px;
}

.btn-report-pdf {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.btn-report-pdf:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
}

.btn-report-email {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.btn-report-email:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.btn-report-schedule {
    background: transparent;
    color: var(--ns-yellow-primary, #fbbf24);
    border: 2px solid var(--ns-yellow-primary, #fbbf24);
}

.btn-report-schedule:hover {
    background: rgba(251, 191, 36, 0.1);
    transform: translateY(-2px);
}

.btn-report-csv {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.15);
}

.btn-report-csv:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

/* ============================================
   KILLER REPORT DESIGN - Premium Audit Results
   ============================================ */

/* Enhanced Results Header */
.results-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 30px;
    align-items: center;
    padding: 30px;
    background: linear-gradient(135deg, var(--ns-black-secondary, #1a1a1a) 0%, #0f0f0f 100%);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 16px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.results-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
}

/* Enhanced Score Circle */
.score-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    --score-deg: calc(var(--score-percentage, 0) * 3.6deg);
    background: conic-gradient(
        from 135deg,
        var(--score-color, #fbbf24) var(--score-deg),
        rgba(255,255,255,0.08) var(--score-deg)
    );
    box-shadow: 
        0 0 40px rgba(251, 191, 36, 0.2),
        inset 0 0 30px rgba(0,0,0,0.5);
}

.score-circle::before {
    content: '';
    position: absolute;
    width: 115px;
    height: 115px;
    background: linear-gradient(135deg, #1a1a1a, #0f0f0f);
    border-radius: 50%;
}

.score-number {
    font-size: 44px;
    font-weight: 800;
    color: var(--score-color, #fbbf24);
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(251, 191, 36, 0.3);
}

.score-label {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    margin-top: 4px;
}

/* Score color variants */
.score-circle.score-excellent { --score-color: #10b981; }
.score-circle.score-good { --score-color: #22c55e; }
.score-circle.score-average { --score-color: #fbbf24; }
.score-circle.score-poor { --score-color: #f97316; }
.score-circle.score-bad { --score-color: #ef4444; }

/* Enhanced Summary Items */
.results-summary {
    display: grid;
    /* Six tiles since the Notices counter joined Issues / Warnings / Passed /
       Load Time / Pages Scanned. Was repeat(5, 1fr), which left the sixth
       stranded alone on a second row. The 1024px and 640px breakpoints below
       reflow this to 3 and 2 columns. */
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    flex: 1;
}

.summary-item {
    text-align: center;
    padding: 20px 15px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.summary-item:hover {
    background: rgba(255,255,255,0.04);
    transform: translateY(-2px);
}

.summary-item .count {
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.summary-item .label {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-item.issues .count { color: #ef4444; }
.summary-item.warnings .count { color: #f59e0b; }
.summary-item.passed .count { color: #10b981; }
.summary-item.load-time .count { color: #3b82f6; }
.summary-item.pages .count { color: #8b5cf6; }

/* Enhanced Core Web Vitals */
.core-web-vitals {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.02));
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
}

.core-web-vitals h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ns-text-primary, #fff);
    margin: 0 0 20px;
}

.core-web-vitals h3 svg {
    color: #3b82f6;
}

.vitals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.vital-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.vital-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.vital-card.good { border-color: rgba(16, 185, 129, 0.4); }
.vital-card.average { border-color: rgba(251, 191, 36, 0.4); }
.vital-card.poor { border-color: rgba(239, 68, 68, 0.4); }

.vital-label {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.vital-value {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
}

.vital-card.good .vital-value { color: #10b981; }
.vital-card.average .vital-value { color: #fbbf24; }
.vital-card.poor .vital-value { color: #ef4444; }

.vital-name {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 12px;
}

.vital-bar {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}

.vital-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.vital-card.good .vital-fill { background: linear-gradient(90deg, #10b981, #059669); }
.vital-card.average .vital-fill { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.vital-card.poor .vital-fill { background: linear-gradient(90deg, #ef4444, #dc2626); }

/* Enhanced Results Tabs */
.results-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 12px 24px;
    background: transparent;
    color: rgba(255,255,255,0.6);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.tab-btn:hover {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.05);
}

.tab-btn.active {
    background: var(--ns-yellow-primary, #fbbf24);
    color: #000;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

/* Badge count on tabs */
.tab-btn .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,0.15);
}

.tab-btn.active .badge {
    background: rgba(0,0,0,0.2);
    color: #000;
}

/* Enhanced Check Results */
.check-results {
    background: var(--ns-black-secondary, #1a1a1a);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
}

.check-group {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.check-group:last-child {
    border-bottom: none;
}

.check-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background 0.2s;
}

.check-group-header:hover {
    background: rgba(0,0,0,0.3);
}

.check-group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ns-text-primary, #fff);
}

.check-group-title svg {
    width: 20px;
    height: 20px;
    color: var(--ns-yellow-primary, #fbbf24);
}

.check-group-count {
    display: flex;
    gap: 12px;
}

.count-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.count-pill.issues {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.count-pill.warnings {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.count-pill.passed {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.check-group-items {
    padding: 0;
}

.check-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 18px 24px;
    border-top: 1px solid rgba(255,255,255,0.04);
    transition: background 0.2s;
}

.check-item:hover {
    background: rgba(255,255,255,0.02);
}

.check-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.check-item-icon.fail {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.check-item-icon.warning {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.check-item-icon.pass {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.check-item-icon.info {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.check-item-content {
    flex: 1;
}

.check-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ns-text-primary, #fff);
    margin-bottom: 4px;
}

.check-item-message {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}

.check-item-url {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    margin-top: 4px;
    word-break: break-all;
}

.check-item-action {
    padding: 8px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.check-item-action:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* Recommendation highlight */
.check-item-recommendation {
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(251, 191, 36, 0.06);
    border-left: 3px solid #fbbf24;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.check-item-recommendation strong {
    color: #fbbf24;
    font-weight: 600;
}

/* Check Badge */
.check-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.check-badge.fail {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.check-badge.warning {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.check-badge.pass {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* Print/PDF Styles */
@media print {
    .ns-audit-container {
        background: white !important;
        color: black !important;
    }
    
    .results-header {
        background: white !important;
        border: 2px solid #000 !important;
    }
    
    .btn-report,
    .btn-secondary,
    .report-actions {
        display: none !important;
    }
}

/* Responsive updates */
@media (max-width: 1024px) {
    .results-header {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .score-circle {
        margin: 0 auto;
    }
    
    .results-summary {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .vitals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .results-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .vitals-grid {
        grid-template-columns: 1fr;
    }
    
    .checks-list {
        grid-template-columns: 1fr;
    }
    
    .report-actions {
        flex-direction: column;
    }
    
    .btn-report {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   EMAIL REPORT MODAL
   ============================================ */
.ns-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ns-modal-content {
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(251, 191, 36, 0.1);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from { transform: translateY(-20px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.ns-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ns-modal-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.ns-modal-header h3 svg {
    color: #fbbf24;
}

.ns-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.ns-modal-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.ns-modal-body {
    padding: 24px;
}

.ns-modal-body .form-group {
    margin-bottom: 20px;
}

.ns-modal-body label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.ns-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    transition: all 0.2s;
}

.ns-input:focus {
    outline: none;
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

.ns-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

textarea.ns-input {
    resize: vertical;
    min-height: 80px;
}

.form-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #fbbf24;
}

.checkbox-label span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.ns-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
}

.ns-modal-footer .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ns-modal-footer .btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.ns-modal-footer .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* ================================================
   Table Action Icon Buttons - Premium Styling
   ================================================ */

.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-1px);
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

/* View Button - Purple accent */
.btn-icon.view-audit {
    border-color: rgba(139, 92, 246, 0.3);
    color: rgba(139, 92, 246, 0.7);
}

.btn-icon.view-audit:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.5);
    color: #a78bfa;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}

/* PDF Export Button - Red/Orange accent */
.btn-icon.btn-pdf,
.btn-icon.export-audit-pdf {
    border-color: rgba(239, 68, 68, 0.3);
    color: rgba(239, 68, 68, 0.7);
}

.btn-icon.btn-pdf:hover,
.btn-icon.export-audit-pdf:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

/* Email Button - Blue accent */
.btn-icon.btn-email,
.btn-icon.email-audit {
    border-color: rgba(59, 130, 246, 0.3);
    color: rgba(59, 130, 246, 0.7);
}

.btn-icon.btn-email:hover,
.btn-icon.email-audit:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

/* Re-run Button - Gold accent */
.btn-icon.rerun-audit {
    border-color: rgba(251, 191, 36, 0.3);
    color: rgba(251, 191, 36, 0.7);
}

.btn-icon.rerun-audit:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.2);
}

/* Loading state */
.btn-icon.loading {
    pointer-events: none;
    opacity: 0.5;
}

.btn-icon.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Table action buttons group */
.table-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ================================================
   URL Cell Styling
   ================================================ */

/* The URL column is the widest, most identifying column, so give it the slack
   and let the fixed-content columns (badges, dates) size to their content.
   No max-width: capping it was what squeezed the domain into an ellipsis. */
.url-cell {
    width: auto;
    min-width: 230px;
}

.url-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.2s;
    max-width: 100%;
    min-width: 0;
}

.url-link:hover {
    color: #fbbf24;
}

.url-link:hover .url-icon-btn {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.5);
    color: #34d399;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

/* Globe icon styled like action buttons */
.url-icon-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(16, 185, 129, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.url-icon-btn svg {
    width: 14px;
    height: 14px;
}

/* Host + path sit on one baseline and wrap to a second line when space runs out.
   min-width:0 is required or the flex item refuses to shrink below its content
   and pushes the ellipsis onto the host. */
.url-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1px;
    min-width: 0;
    direction: ltr;
    text-align: left;
}

/* The domain is the identity of the row - it is never shortened, at any width. */
.url-host {
    font-size: 13px;
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
    flex: 0 0 auto;
    word-break: normal;
}

/* Only the trailing path gives way when the column is tight. */
.url-path {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legacy: older markup rendered the whole URL in one span. */
.url-full {
    font-size: 13px;
    font-weight: 400;
    color: inherit;
}

/* Audit Type Badge */
.audit-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.audit-type-badge.site {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.audit-type-badge.page {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Actions column: buttons flush left under the header, wrapping rather than
   forcing the table wider. */
.audits-table td.actions-cell,
.audits-table th:last-child {
    text-align: left;
    white-space: nowrap;
    width: 1%;
}

/* Must not wrap on desktop. width:1% sizes the cell to its min-content, and a
   wrapping flex row's min-content is ONE button - which stacked all four into a
   vertical column and tripled every row's height. */
.actions-cell .action-buttons {
    justify-content: flex-start;
    flex-wrap: nowrap;
}

/* Content-sized columns so the URL column keeps the remaining space. */
.audits-table td:not(.url-cell),
.audits-table th:not(:first-child) {
    white-space: nowrap;
    width: 1%;
}

/* Below the table's 600px min-width, horizontal scrolling would hide the
   actions and still clip the domain. Stack each row into a labelled card
   instead: full domain, no ellipsis, everything reachable without scrolling. */
@media (max-width: 640px) {
    .audits-table {
        overflow-x: visible;
        background: transparent;
    }

    .audits-table table,
    .audits-table tbody,
    .audits-table tr,
    .audits-table td {
        display: block;
        width: auto;
    }

    .audits-table table {
        min-width: 0;
    }

    .audits-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .audits-table tr {
        background: var(--ns-black-secondary, #1a1a1a);
        border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
        border-radius: 12px;
        padding: 4px 14px 10px;
        margin-bottom: 12px;
    }

    .audits-table td {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 0;
        border-top: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        white-space: normal;
    }

    .audits-table td:last-child {
        border-bottom: 0;
    }

    /* Column header travels with the value, since thead is hidden. A fixed label
       column keeps every value on the same left edge down the card. */
    .audits-table td::before {
        content: attr(data-label);
        flex: 0 0 72px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-secondary, #a1a1a1);
    }

    /* The URL gets the full card width, stacked under its own label. */
    .audits-table td.url-cell {
        display: block;
        padding-top: 12px;
    }

    .audits-table td.url-cell::before {
        display: block;
        margin-bottom: 6px;
    }

    .url-cell {
        width: auto;
        min-width: 0;
    }

    /* Full domain on a phone: wrap to as many lines as it needs, never clip.
       flex must be reset to shrinkable here - the desktop rule pins the host at
       `flex: 0 0 auto` so it can never be shortened, which on a narrow card made
       a long domain run straight off the right edge instead of wrapping. */
    .url-link {
        display: flex;
        align-items: flex-start;
        max-width: 100%;
        min-width: 0;
    }

    .url-text {
        flex-wrap: wrap;
        white-space: normal;
        min-width: 0;
        max-width: 100%;
    }

    .url-host {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: 14px;
    }

    .url-path {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .audits-table td.actions-cell {
        display: block;
        width: auto;
        padding-top: 12px;
    }

    .audits-table td.actions-cell::before {
        display: block;
        margin-bottom: 8px;
    }

    .actions-cell .action-buttons {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* ================================================
   Report Type Dialog
   ================================================ */

.report-type-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 20px;
}

.report-type-dialog {
    background: var(--surface, #1f1f1f);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.report-type-dialog h3 {
    color: var(--text-primary, #fff);
    font-size: 20px;
    margin-bottom: 8px;
}

.report-type-dialog p {
    color: var(--text-secondary, #a3a3a3);
    font-size: 14px;
    margin-bottom: 24px;
}

.report-type-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.report-type-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--ns-black-secondary, #1a1a1a);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.report-type-btn:hover {
    border-color: var(--ns-yellow-primary, #fbbf24);
    background: rgba(251, 191, 36, 0.05);
}

.report-type-btn.summary:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.report-type-btn.full:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.report-type-icon {
    font-size: 32px;
    flex-shrink: 0;
    color: var(--primary, #fbbf24);
}

/* Site forces every svg to 1em; size the report-type icons explicitly. */
.report-type-icon svg {
    width: 28px !important;
    height: 28px !important;
}

.report-type-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 4px;
}

.report-type-desc {
    display: block;
    font-size: 13px;
    color: var(--text-secondary, #a3a3a3);
    line-height: 1.4;
}

.report-type-cancel {
    padding: 10px 24px;
    background: transparent;
    color: var(--text-secondary, #a3a3a3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.report-type-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #fff);
}

/* ---------------------------------------------------------------
 * Phase 3 — Skip-check / Hide-result UI
 * --------------------------------------------------------------- */

/* Skip-check button sits inside the issue header, right of the count badge */
.issue-name-link .skip-check-btn {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    color: var(--text-secondary, #9aa4b2);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    opacity: 0;
}
.issue-name-item:hover .skip-check-btn { opacity: 1; }
.issue-name-link .skip-check-btn:hover {
    color: #fff;
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
}
.issue-name-link .skip-check-btn svg { display: block; }
.issue-name-link .skip-check-btn[disabled] { opacity: 0.5; cursor: wait; }

/* Hide-result mini button matches existing .btn-mini family */
.btn-mini.hide-result {
    color: var(--text-secondary, #9aa4b2);
}
.btn-mini.hide-result:hover {
    color: #fff;
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
}
.btn-mini.hide-result[disabled] { opacity: 0.5; cursor: wait; }

/* ---------------------------------------------------------------
 * Manage panel — Advanced Settings → Hidden items & skipped checks
 * --------------------------------------------------------------- */
.audit-filters-panel {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.audit-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.audit-filters-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fff);
}
.audit-filters-header .btn-link {
    background: transparent;
    border: none;
    color: var(--text-secondary, #9aa4b2);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}
.audit-filters-header .btn-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.audit-filters-help {
    margin: 0 0 10px 0;
    font-size: 11px;
    color: var(--text-secondary, #9aa4b2);
}
.audit-filters-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}
.audit-filters-empty {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text-secondary, #9aa4b2);
    text-align: center;
}
.audit-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 12px;
}
.audit-filter-row:last-child { border-bottom: none; }
.audit-filter-type {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.audit-filter-row.is-skip .audit-filter-type {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}
.audit-filter-row.is-hide .audit-filter-type {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}
.audit-filter-name {
    flex-shrink: 0;
    color: var(--text-primary, #fff);
    font-weight: 500;
}
.audit-filter-target {
    flex: 1 1 0;
    min-width: 0;
    color: var(--text-secondary, #9aa4b2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}
.audit-filter-remove {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text-secondary, #9aa4b2);
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 0;
    transition: all 0.15s;
}
.audit-filter-remove:hover {
    color: #fff;
    background: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.50);
}
.audit-filter-remove[disabled] { opacity: 0.5; cursor: wait; }

/* Badge that sits next to the "Advanced Settings" toggle, surfacing
 * the count of active skip/hide filters so it's obvious where to manage them. */
.audit-filters-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 500;
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    vertical-align: middle;
}
.audit-filters-badge:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: rgba(245, 158, 11, 0.60);
    color: #fff;
}
.audit-filters-badge svg { display: block; }
#audit-filters-badge-count { font-weight: 700; }

/* Brief highlight when the filters panel is scrolled to via the badge */
.audit-filters-panel.flash-highlight {
    animation: ns-filters-flash 1.2s ease-out;
}
@keyframes ns-filters-flash {
    0%   { background: rgba(245, 158, 11, 0.18); }
    100% { background: transparent; }
}

/* ---- 'skipped' check status -------------------------------------------------
   A check that could not be evaluated. Grey and dashed, never green, and never
   counted in a "passed" tally - see count_status() and the CSV/report writers. */
.check-status.skipped,
.check-item-icon.skipped {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.3);
}
.check-item-icon.skipped svg { opacity: 0.85; }
.check-group-header .count.skipped { color: #94a3b8; }

/* ---- 'notice' check status ---------------------------------------------------
   The fourth tier: Errors / Warnings / Notices / Passed. A notice is a real
   finding that is informational only - it needs no action and is excluded from
   the score in both directions, exactly like 'skipped' above.

   Blue, because the brand's warning colour and its primary accent are both the
   same yellow (--warning #f59e0b, --primary #fbbf24), so a notice tinted with
   either would read as a warning. Blue was already the informal informational
   colour in this file (.check-item-icon.info) and in the audit email.

   Appended as ONE block at the end of the file on purpose. The severity rules
   above are duplicated in two or three places each (.summary-item.* at ~493 and
   ~3685, .check-item.* at ~576 and ~1728, and so on), so editing them in place
   means finding every copy. Last rule of equal specificity wins, so nothing here
   needs !important. */
:root {
    --ns-info: #3b82f6;
}

.summary-item.notices .count {
    color: var(--ns-info, #3b82f6);
}

.check-item.notice {
    border-left-color: var(--ns-info, #3b82f6);
}

.check-status.notice,
.check-badge.notice {
    background: rgba(59, 130, 246, 0.15);
    color: var(--ns-info, #3b82f6);
}

/* Alias, not a duplicate: .info already existed for the same idea. */
.check-item-icon.info,
.check-item-icon.notice {
    background: rgba(59, 130, 246, 0.12);
    color: var(--ns-info, #3b82f6);
    border-color: rgba(59, 130, 246, 0.3);
}

.tab-icon.notice,
.issue-icon.notice {
    color: var(--ns-info, #3b82f6);
}

.count-notices,
.count-pill.notices {
    background: rgba(59, 130, 246, 0.15);
    color: var(--ns-info, #3b82f6);
}

.popup-summary .summary-stat.notices {
    color: var(--ns-info, #3b82f6);
}

/* Sits under the Notices tab heading, explaining why nothing here needs doing. */
.tab-pane-note {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary, #a1a1a1);
}

/* Missing counterparts to the 'skipped' status above: it had an icon and a
   status pill but no badge or group counter, so a skipped row rendered an
   unstyled badge. */
.check-badge.skipped {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.count-skipped {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}