/* ============================================
   BROKEN LINK CHECKER - Modern UI Styles
   Dark mode support with light mode default
   ============================================ */

/* === VARIABLES === */
.blc-wrapper {
    /* Main Colors - SURITD TOOLS Palette */
    --blc-primary: #3399cc;
    --blc-primary-light: rgba(51, 153, 204, 0.12);
    --blc-primary-dark: #2980b9;
    --blc-success: #339966;
    --blc-success-light: rgba(51, 153, 102, 0.12);
    --blc-warning: #f59e0b;
    --blc-warning-light: rgba(245, 158, 11, 0.12);
    --blc-danger: #e64e4e;
    --blc-danger-light: rgba(230, 78, 78, 0.12);
    --blc-info: #8b5cf6;
    --blc-info-light: rgba(139, 92, 246, 0.12);
    
    /* Check Type Colors */
    --blc-type-links: #3399cc;
    --blc-type-images: #339966;
    --blc-type-css: #f59e0b;
    --blc-type-scripts: #8b5cf6;
    
    /* Background Colors */
    --blc-bg: #f8fafc;
    --blc-card: #ffffff;
    --blc-card-alt: #f1f5f9;
    --blc-text: #1e293b;
    --blc-text-light: #64748b;
    --blc-text-muted: #94a3b8;
    --blc-border: #e2e8f0;
    
    /* Progress ring colors */
    --blc-ring-blue: #3399cc;
    --blc-ring-yellow: #f59e0b;
    --blc-ring-orange: #f59e0b;
    --blc-ring-green: #339966;
    --blc-ring-red: #e64e4e;
    
    /* Transition */
    --transition-speed: 0.25s;
}

[data-theme="dark"] .blc-wrapper {
    --blc-primary: #60a5fa;
    --blc-primary-light: rgba(96, 165, 250, 0.15);
    --blc-primary-dark: #3b82f6;
    --blc-success: #4ade80;
    --blc-success-light: rgba(74, 222, 128, 0.15);
    --blc-warning: #fbbf24;
    --blc-warning-light: rgba(251, 191, 36, 0.15);
    --blc-danger: #f87171;
    --blc-danger-light: rgba(248, 113, 113, 0.15);
    --blc-info: #a78bfa;
    --blc-info-light: rgba(167, 139, 250, 0.15);
    
    /* Check Type Colors - Dark Mode */
    --blc-type-links: #60a5fa;
    --blc-type-images: #4ade80;
    --blc-type-css: #fbbf24;
    --blc-type-scripts: #a78bfa;
    
    --blc-bg: #0f172a;
    --blc-card: #1e293b;
    --blc-card-alt: #334155;
    --blc-text: #f1f5f9;
    --blc-text-light: #94a3b8;
    --blc-text-muted: #64748b;
    --blc-border: #334155;
    
    /* Progress ring colors - dark mode */
    --blc-ring-blue: #60a5fa;
    --blc-ring-yellow: #fbbf24;
    --blc-ring-orange: #fb923c;
    --blc-ring-green: #4ade80;
    --blc-ring-red: #f87171;
}

/* === BASE WRAPPER === */
.blc-wrapper {
    background: var(--blc-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--blc-text);
    line-height: 1.5;
    font-size: 14px;
    padding: 0;
    margin: 0;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* Reset button styles from custom_styles.css */
.blc-wrapper button,
.blc-wrapper .blc-btn,
.blc-wrapper .blc-filter,
.blc-wrapper .blc-expand-toggle,
.blc-wrapper .blc-page-btn,
.blc-wrapper .blc-export-option {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
}

.blc-wrapper button:hover,
.blc-wrapper .blc-btn:hover,
.blc-wrapper .blc-filter:hover,
.blc-wrapper .blc-expand-toggle:hover,
.blc-wrapper .blc-page-btn:hover {
    transform: none;
    box-shadow: none;
}

.blc-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 20px;
}

/* === HEADER === */
.blc-header {
    text-align: center;
    margin-bottom: 24px;
    padding: 0;
}

.blc-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.blc-icon-box {
    width: 56px;
    height: 56px;
    background: var(--blc-primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(51, 153, 204, 0.3);
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}

.blc-icon-box i { 
    width: 28px; 
    height: 28px; 
}

.blc-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--blc-primary);
    margin: 0;
    padding: 0;
}

.blc-description {
    font-size: 15px;
    color: var(--blc-text-light);
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    line-height: 1.6;
}

.blc-description a {
    color: var(--blc-primary);
    text-decoration: none;
    font-weight: 500;
}

.blc-description a:hover {
    text-decoration: underline;
}

/* === MAIN CARD === */
.blc-main {
    background: var(--blc-card);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--blc-border);
    overflow: hidden;
    transition: background-color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* === CONFIG SECTION === */
.blc-config {
    padding: 32px 24px;
}

/* === MODE SELECTION - CENTERED & PROMINENT === */
.blc-modes-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.blc-modes {
    display: inline-flex;
    gap: 0;
    background: var(--blc-card-alt);
    padding: 4px;
    border-radius: 12px;
}

.blc-mode {
    cursor: pointer;
    display: block;
}

.blc-mode input { 
    display: none; 
}

.blc-mode-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: transparent;
    border: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-align: center;
}

.blc-mode-inner i {
    width: 17px;
    height: 17px;
    color: var(--blc-text-muted);
    transition: color 0.2s ease;
}

.blc-mode-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--blc-text-muted);
    transition: color 0.2s ease;
}

.blc-mode-desc {
    display: none;
}

.blc-mode:hover .blc-mode-inner {
    background: transparent;
}

.blc-mode:hover .blc-mode-inner i {
    color: var(--blc-primary);
}

.blc-mode:hover .blc-mode-title {
    color: var(--blc-primary);
}

.blc-mode.active .blc-mode-inner {
    background: var(--blc-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.blc-mode.active .blc-mode-inner i {
    color: var(--blc-primary);
}

.blc-mode.active .blc-mode-title {
    color: var(--blc-text);
}

/* === MODE CONFIG - CENTERED === */
.blc-mode-config {
    max-width: 800px;
    margin: 0 auto;
}

.blc-mode-config-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blc-mode-config-centered .blc-url-field {
    width: 100%;
}

.blc-mode-config-centered .blc-input-row {
    width: 100%;
}

.blc-mode-config-centered .blc-settings-panel {
    width: 100%;
}

.blc-mode-config-centered .blc-field-urls {
    width: 100%;
}

/* === INPUT ROW - BUTTONS === */
.blc-input-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
    margin-top: 12px;
    margin-bottom: 0;
}

.blc-url-field {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    background: var(--blc-card-alt);
    border: 2px solid var(--blc-border);
    border-radius: 12px;
    transition: all 0.2s ease;
    min-height: 54px;
}

.blc-url-field:focus-within {
    border-color: var(--blc-primary);
    box-shadow: 0 0 0 4px var(--blc-primary-light);
    background: var(--blc-card);
}

.blc-url-field i {
    width: 22px;
    height: 22px;
    color: var(--blc-text-muted);
    flex-shrink: 0;
}

.blc-url-field input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 16px 0;
    font-size: 16px;
    color: var(--blc-text);
    outline: none;
    min-width: 0;
}

.blc-url-field input::placeholder {
    color: var(--blc-text-muted);
}

.blc-url-field-label {
    cursor: default;
    min-height: 54px;
    display: flex;
    align-items: center;
}

.blc-url-field-label span {
    color: var(--blc-text-light);
    font-size: 15px;
}

/* === BUTTONS === */
.blc-wrapper .blc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-decoration: none;
    margin: 0;
    white-space: nowrap;
    background: transparent;
    color: inherit;
}

.blc-wrapper .blc-btn i { 
    width: 18px; 
    height: 18px; 
}

.blc-wrapper .blc-btn-primary {
    background: var(--blc-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(51, 153, 204, 0.3);
}

.blc-wrapper .blc-btn-primary:hover:not(:disabled) {
    background: var(--blc-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(51, 153, 204, 0.4);
}

.blc-wrapper .blc-btn-danger {
    background: var(--blc-danger);
    color: white;
    box-shadow: 0 4px 12px rgba(230, 78, 78, 0.3);
}

.blc-wrapper .blc-btn-danger:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-2px);
}

.blc-wrapper .blc-btn-secondary {
    background: var(--blc-card-alt);
    color: var(--blc-text);
    border: 1px solid var(--blc-border);
}

.blc-wrapper .blc-btn-secondary:hover:not(:disabled) {
    background: var(--blc-border);
}

.blc-wrapper .blc-btn-settings {
    background: var(--blc-card-alt);
    color: var(--blc-text-muted);
    border: 1px solid var(--blc-border);
    padding: 14px 16px;
}

.blc-wrapper .blc-btn-settings:hover {
    background: var(--blc-border);
    color: var(--blc-text);
}

.blc-btn-settings.active {
    background: var(--blc-primary-light);
    border-color: var(--blc-primary);
    color: var(--blc-primary);
}

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

/* === SETTINGS PANEL (Collapsible) === */
.blc-settings-panel {
    display: none;
    padding: 28px;
    background: var(--blc-card-alt);
    border-radius: 12px;
    margin-top: 16px;
    animation: slideDown 0.25s ease;
    border: 1px solid var(--blc-border);
}

.blc-settings-panel.open {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blc-settings-grid {
    display: flex;
    gap: 28px 24px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* === FORM FIELDS === */
.blc-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blc-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blc-text);
    margin: 0;
    padding: 0;
}

.blc-field label i {
    width: 14px;
    height: 14px;
    color: var(--blc-primary);
}

.blc-field-num {
    flex: 0 0 110px;
}

.blc-field-toggle {
    flex: 0 0 auto;
    align-items: flex-start;
}

.blc-field-patterns {
    width: 100%;
}

.blc-field-patterns textarea {
    width: 100%;
    min-width: 100%;
}

.blc-field-urls textarea {
    width: 100%;
}

/* Input styles */
.blc-field input[type="url"],
.blc-field input[type="text"],
.blc-field input[type="number"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--blc-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--blc-card);
    color: var(--blc-text);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    margin: 0;
}

.blc-field input:focus {
    border-color: var(--blc-primary);
    box-shadow: 0 0 0 3px var(--blc-primary-light);
}

.blc-field input::placeholder {
    color: var(--blc-text-muted);
}

.blc-field textarea {
    padding: 12px 14px;
    border: 1px solid var(--blc-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: ui-monospace, monospace;
    background: var(--blc-card);
    color: var(--blc-text);
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    margin: 0;
}

.blc-field textarea:focus {
    border-color: var(--blc-primary);
    box-shadow: 0 0 0 3px var(--blc-primary-light);
}

/* === TOGGLE SWITCH === */
.blc-toggle {
    position: relative;
    width: 48px;
    height: 26px;
    display: inline-block;
}

.blc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.blc-toggle-track {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--blc-border);
    border-radius: 13px;
    transition: background 0.2s;
}

.blc-toggle-track::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.blc-toggle input:checked + .blc-toggle-track {
    background: var(--blc-primary);
}

.blc-toggle input:checked + .blc-toggle-track::before {
    transform: translateX(22px);
}

/* === LINK TYPES SECTION - WITH DIFFERENT COLORS === */
.blc-link-types {
    margin-bottom: 20px;
}

.blc-link-types-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blc-text);
    margin-bottom: 12px;
}

.blc-link-types-label i {
    width: 14px;
    height: 14px;
    color: var(--blc-primary);
}

.blc-type-checks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.blc-type-check {
    cursor: pointer;
}

.blc-type-check input {
    display: none;
}

.blc-type-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--blc-card);
    border: 2px solid var(--blc-border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--blc-text-light);
    transition: all 0.2s ease;
}

.blc-type-box i {
    width: 16px;
    height: 16px;
}

.blc-type-check:hover .blc-type-box {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Different Colors for Each Type */
.blc-type-links:hover .blc-type-box {
    border-color: var(--blc-type-links);
}

.blc-type-links input:checked + .blc-type-box {
    background: rgba(51, 153, 204, 0.1);
    border-color: var(--blc-type-links);
    color: var(--blc-type-links);
}

.blc-type-images:hover .blc-type-box {
    border-color: var(--blc-type-images);
}

.blc-type-images input:checked + .blc-type-box {
    background: rgba(51, 153, 102, 0.1);
    border-color: var(--blc-type-images);
    color: var(--blc-type-images);
}

.blc-type-css:hover .blc-type-box {
    border-color: var(--blc-type-css);
}

.blc-type-css input:checked + .blc-type-box {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--blc-type-css);
    color: var(--blc-type-css);
}

.blc-type-scripts:hover .blc-type-box {
    border-color: var(--blc-type-scripts);
}

.blc-type-scripts input:checked + .blc-type-box {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--blc-type-scripts);
    color: var(--blc-type-scripts);
}

/* Dark mode adjustments for type colors */
[data-theme="dark"] .blc-type-links input:checked + .blc-type-box {
    background: rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .blc-type-images input:checked + .blc-type-box {
    background: rgba(74, 222, 128, 0.15);
}

[data-theme="dark"] .blc-type-css input:checked + .blc-type-box {
    background: rgba(251, 191, 36, 0.15);
}

[data-theme="dark"] .blc-type-scripts input:checked + .blc-type-box {
    background: rgba(167, 139, 250, 0.15);
}

/* === EXPORT ROW === */
.blc-export-row {
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--blc-border);
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/* Export Dropdown */
.blc-export-dropdown {
    position: relative;
    display: inline-block;
}

.blc-export-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
    margin-left: -2px;
}

.blc-export-dropdown.open .blc-export-arrow {
    transform: rotate(180deg);
}

.blc-export-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--blc-card);
    border: 1px solid var(--blc-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.2s ease;
    z-index: 100;
    overflow: hidden;
}

.blc-export-dropdown.open .blc-export-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.blc-wrapper .blc-export-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: transparent;
    color: var(--blc-text);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
    border-radius: 0;
    box-shadow: none;
}

.blc-wrapper .blc-export-option:hover {
    background: var(--blc-primary-light);
    transform: none;
    box-shadow: none;
}

.blc-wrapper .blc-export-option i,
.blc-wrapper .blc-export-option svg {
    width: 15px;
    height: 15px;
    color: var(--blc-primary);
    flex-shrink: 0;
}

[data-theme="dark"] .blc-export-menu {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* === ANIMATED PROGRESS SECTION - TICKER ON TOP === */
.blc-progress-animated {
    margin: 24px;
    padding: 28px 32px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 16px;
    border: 1px solid var(--blc-border);
    display: none;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.blc-progress-animated.active {
    display: flex;
}

[data-theme="dark"] .blc-progress-animated {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
}

/* Progress Ring Wrapper - BIGGER */
.blc-progress-ring-wrapper {
    display: flex;
    justify-content: center;
}

.blc-progress-ring {
    position: relative;
    width: 160px;
    height: 160px;
}

.blc-progress-ring svg {
    transform: rotate(-90deg);
    width: 160px;
    height: 160px;
}

.blc-ring-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 10;
    transition: stroke 0.3s ease;
}

[data-theme="dark"] .blc-ring-bg {
    stroke: #334155;
}

.blc-ring-fg {
    fill: none;
    stroke: var(--blc-ring-green);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease, stroke 0.5s ease;
}

.blc-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.blc-ring-percent {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--blc-ring-green);
    line-height: 1.2;
    transition: color 0.5s ease;
}

.blc-ring-label {
    display: block;
    font-size: 12px;
    color: var(--blc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Live Stats - NOW BELOW RING */
.blc-live-stats {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.blc-live-stat {
    text-align: center;
}

.blc-live-num {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--blc-text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    transition: transform 0.2s ease;
}

.blc-live-num.pulse {
    transform: scale(1.1);
}

.blc-live-label {
    display: block;
    font-size: 12px;
    color: var(--blc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.blc-live-pages .blc-live-num { color: var(--blc-primary); }
.blc-live-links .blc-live-num { color: var(--blc-success); }
.blc-live-issues .blc-live-num { color: var(--blc-danger); }

/* Phase Indicators */
.blc-phases {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 450px;
    position: relative;
    padding: 0 10px;
}

.blc-phases-track {
    position: absolute;
    top: 18px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: #cbd5e1;
    border-radius: 2px;
    z-index: 0;
}

[data-theme="dark"] .blc-phases-track {
    background: #334155;
}

.blc-phases-fill {
    position: absolute;
    top: 18px;
    left: 40px;
    height: 3px;
    background: var(--blc-primary);
    border-radius: 2px;
    z-index: 1;
    width: 0%;
    transition: width 0.5s ease;
}

.blc-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.blc-phase-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blc-card);
    border: 3px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

[data-theme="dark"] .blc-phase-dot {
    background: #1e293b;
    border-color: #334155;
}

.blc-phase-dot i {
    width: 16px;
    height: 16px;
    color: var(--blc-text-muted);
    transition: color 0.3s ease;
}

.blc-phase-label {
    font-size: 11px;
    color: var(--blc-text-muted);
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Phase States */
.blc-phase.active .blc-phase-dot {
    background: var(--blc-primary);
    border-color: var(--blc-primary);
    box-shadow: 0 0 0 4px var(--blc-primary-light);
    animation: phasePulse 1.5s ease-in-out infinite;
}

.blc-phase.active .blc-phase-dot i {
    color: white;
}

.blc-phase.active .blc-phase-label {
    color: var(--blc-primary);
    font-weight: 600;
}

.blc-phase.completed .blc-phase-dot {
    background: var(--blc-success);
    border-color: var(--blc-success);
}

.blc-phase.completed .blc-phase-dot i {
    color: white;
}

.blc-phase.completed .blc-phase-label {
    color: var(--blc-success);
}

@keyframes phasePulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(51, 153, 204, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(51, 153, 204, 0); }
}

/* URL Ticker */
.blc-url-ticker {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 600px;
    padding: 14px 18px;
    background: var(--blc-card);
    border: 1px solid var(--blc-border);
    border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
}

[data-theme="dark"] .blc-url-ticker {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.blc-ticker-label {
    color: var(--blc-text-muted);
    flex-shrink: 0;
}

.blc-ticker-url {
    color: var(--blc-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blc-ticker-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--blc-primary);
    border-radius: 50%;
    animation: tickerSpin 1s linear infinite;
    flex-shrink: 0;
}

[data-theme="dark"] .blc-ticker-spinner {
    border-color: #334155;
    border-top-color: var(--blc-primary);
}

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

/* === RESULTS SUMMARY === */
.blc-results-summary {
    margin: 12px 24px 24px;
    padding: 24px;
    background: var(--blc-card-alt);
    border-radius: 12px;
    border: 1px solid var(--blc-border);
}

.blc-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.blc-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--blc-card);
    border-radius: 10px;
    flex: 1 1 100px;
    min-width: 100px;
    border: 1px solid var(--blc-border);
    transition: all 0.2s ease;
}

.blc-stat-clickable {
    cursor: pointer;
}

.blc-stat-clickable:hover {
    border-color: var(--blc-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.blc-stat i {
    width: 22px;
    height: 22px;
}

.blc-stat-content {
    display: flex;
    flex-direction: column;
}

.blc-stat-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.blc-stat-label {
    font-size: 11px;
    color: var(--blc-text-muted);
    text-transform: uppercase;
}

.blc-stat-total i { color: var(--blc-primary); }
.blc-stat-total .blc-stat-num { color: var(--blc-primary); }

.blc-stat-success i { color: var(--blc-success); }
.blc-stat-success .blc-stat-num { color: var(--blc-success); }

.blc-stat-redirect i { color: var(--blc-warning); }
.blc-stat-redirect .blc-stat-num { color: var(--blc-warning); }

.blc-stat-broken i { color: var(--blc-danger); }
.blc-stat-broken .blc-stat-num { color: var(--blc-danger); }

.blc-stat-timeout i { color: var(--blc-info); }
.blc-stat-timeout .blc-stat-num { color: var(--blc-info); }

/* === FILTERS === */
.blc-filters {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 0 24px 20px;
    padding: 0;
    flex-wrap: wrap;
}

.blc-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.blc-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--blc-text-muted);
}

.blc-wrapper .blc-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--blc-card);
    border: 1px solid var(--blc-border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--blc-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
}

.blc-wrapper .blc-filter span {
    background: var(--blc-card-alt);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.blc-wrapper .blc-filter:hover {
    border-color: var(--blc-primary);
    color: var(--blc-primary);
    transform: none;
}

.blc-wrapper .blc-filter.active {
    background: var(--blc-primary);
    border-color: var(--blc-primary);
    color: white;
}

.blc-wrapper .blc-filter.active span {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.blc-select {
    padding: 8px 14px;
    border: 1px solid var(--blc-border);
    border-radius: 8px;
    background: var(--blc-card);
    color: var(--blc-text);
    font-size: 13px;
    cursor: pointer;
    outline: none;
}

.blc-select:focus {
    border-color: var(--blc-primary);
}

/* === TABLE SECTION === */
.blc-table-section {
    margin: 0 24px 24px;
    background: var(--blc-card);
    border-radius: 12px;
    border: 1px solid var(--blc-border);
    overflow: hidden;
}

.blc-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--blc-border);
    gap: 14px;
    flex-wrap: wrap;
    background: var(--blc-card);
}

.blc-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--blc-card-alt);
    border-radius: 8px;
    flex: 1;
    max-width: 320px;
    border: 1px solid var(--blc-border);
}

.blc-search i {
    width: 16px;
    height: 16px;
    color: var(--blc-text-muted);
    flex-shrink: 0;
}

.blc-search input {
    border: none;
    background: transparent;
    flex: 1;
    font-size: 14px;
    color: var(--blc-text);
    outline: none;
}

.blc-search input::placeholder {
    color: var(--blc-text-muted);
}

.blc-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blc-sort label {
    font-size: 13px;
    color: var(--blc-text-muted);
    margin: 0;
}

.blc-table-wrap {
    overflow-x: auto;
}

.blc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.blc-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--blc-text-light);
    background: var(--blc-card-alt);
    border-bottom: 1px solid var(--blc-border);
    white-space: nowrap;
}

/* Sortable header */
.blc-th-sortable {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.blc-th-sortable:hover {
    color: var(--blc-primary);
    background: var(--blc-card);
}

.blc-th-sortable .blc-sort-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.blc-th-sortable:hover .blc-sort-icon {
    opacity: 1;
}

.blc-th-sortable.blc-sorted-asc,
.blc-th-sortable.blc-sorted-desc {
    color: var(--blc-primary);
    background: rgba(51, 153, 204, 0.08);
}

.blc-th-sortable.blc-sorted-asc .blc-sort-icon,
.blc-th-sortable.blc-sorted-desc .blc-sort-icon {
    opacity: 1;
    color: var(--blc-primary);
}

[data-theme="dark"] .blc-th-sortable.blc-sorted-asc,
[data-theme="dark"] .blc-th-sortable.blc-sorted-desc {
    background: rgba(96, 165, 250, 0.12);
}

.blc-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--blc-border);
    color: var(--blc-text);
}

.blc-table tr:last-child td {
    border-bottom: none;
}

.blc-table tr:hover td {
    background: var(--blc-card-alt);
}

/* Status badges */
.blc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.blc-badge-success {
    background: var(--blc-success-light);
    color: var(--blc-success);
}

.blc-badge-warning {
    background: var(--blc-warning-light);
    color: var(--blc-warning);
}

.blc-badge-danger {
    background: var(--blc-danger-light);
    color: var(--blc-danger);
}

.blc-badge-info {
    background: var(--blc-info-light);
    color: var(--blc-info);
}

/* Status badges in results table */
.blc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.blc-status i {
    width: 14px;
    height: 14px;
}

.blc-status-success,
.blc-status-ok {
    background: var(--blc-success-light);
    color: var(--blc-success);
}

.blc-status-redirect,
.blc-status-redir {
    background: var(--blc-warning-light);
    color: var(--blc-warning);
}

.blc-status-broken,
.blc-status-err {
    background: var(--blc-danger-light);
    color: var(--blc-danger);
}

.blc-status-timeout {
    background: var(--blc-info-light);
    color: var(--blc-info);
}

/* Row highlighting for broken/issue links */
.blc-row-success td {
    background: rgba(51, 153, 102, 0.04);
}

.blc-row-success:hover td {
    background: rgba(51, 153, 102, 0.08);
}

/* Broken links - prominent red/pink background */
.blc-row-broken td {
    background: rgba(230, 78, 78, 0.12);
}

.blc-row-broken:hover td {
    background: rgba(230, 78, 78, 0.18);
}

.blc-row-redirect td {
    background: rgba(245, 158, 11, 0.04);
}

.blc-row-redirect:hover td {
    background: rgba(245, 158, 11, 0.08);
}

.blc-row-issue td {
    background: rgba(230, 78, 78, 0.06);
}

.blc-row-issue:hover td {
    background: rgba(230, 78, 78, 0.12);
}

.blc-row-timeout td {
    background: rgba(139, 92, 246, 0.04);
}

.blc-row-timeout:hover td {
    background: rgba(139, 92, 246, 0.08);
}

/* Dark mode row highlighting */
[data-theme="dark"] .blc-row-success td {
    background: rgba(74, 222, 128, 0.06);
}

[data-theme="dark"] .blc-row-success:hover td {
    background: rgba(74, 222, 128, 0.12);
}

/* Dark mode broken rows */
[data-theme="dark"] .blc-row-broken td {
    background: rgba(248, 113, 113, 0.15);
}

[data-theme="dark"] .blc-row-broken:hover td {
    background: rgba(248, 113, 113, 0.22);
}

[data-theme="dark"] .blc-row-redirect td {
    background: rgba(251, 191, 36, 0.06);
}

[data-theme="dark"] .blc-row-redirect:hover td {
    background: rgba(251, 191, 36, 0.12);
}

[data-theme="dark"] .blc-row-issue td {
    background: rgba(248, 113, 113, 0.08);
}

[data-theme="dark"] .blc-row-issue:hover td {
    background: rgba(248, 113, 113, 0.15);
}

[data-theme="dark"] .blc-row-timeout td {
    background: rgba(167, 139, 250, 0.06);
}

[data-theme="dark"] .blc-row-timeout:hover td {
    background: rgba(167, 139, 250, 0.12);
}

/* Source toggle button */
.blc-source-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--blc-card-alt);
    border: 1px solid var(--blc-border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--blc-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.blc-source-toggle:hover {
    background: var(--blc-primary-light);
    border-color: var(--blc-primary);
    color: var(--blc-primary);
}

.blc-source-toggle i {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.blc-source-toggle.expanded {
    background: var(--blc-primary-light);
    border-color: var(--blc-primary);
    color: var(--blc-primary);
}

.blc-source-toggle.expanded i {
    transform: rotate(180deg);
}

/* Expand Toggle Button - for showing source pages */
.blc-wrapper .blc-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--blc-card-alt);
    border: 1px solid var(--blc-border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--blc-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.blc-wrapper .blc-expand-toggle:hover {
    background: var(--blc-primary-light);
    border-color: var(--blc-primary);
    color: var(--blc-primary);
}

.blc-wrapper .blc-expand-toggle i {
    width: 14px;
    height: 14px;
}

.blc-wrapper .blc-expand-toggle span {
    color: inherit;
}

.blc-no-source {
    color: var(--blc-text-muted);
    font-size: 13px;
}

/* Pause button styling */
.blc-wrapper .blc-btn-warning {
    background: var(--blc-warning);
    border-color: var(--blc-warning);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.blc-wrapper .blc-btn-warning:hover {
    background: #d97706;
    border-color: #d97706;
    transform: translateY(-2px);
}

/* Resume button styling (success) */
.blc-wrapper .blc-btn-success {
    background: var(--blc-success);
    border-color: var(--blc-success);
    color: #fff;
    box-shadow: 0 4px 12px rgba(51, 153, 102, 0.3);
}

.blc-wrapper .blc-btn-success:hover {
    background: #059669;
    border-color: #059669;
    transform: translateY(-2px);
}

/* Pause button in input row */
.blc-wrapper .blc-btn-pause {
    min-width: auto;
    padding: 0 16px;
}

/* Progress control buttons - can be removed if not needed */
.blc-progress-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.blc-progress-controls .blc-btn {
    min-width: 120px;
}

/* URL column handled by .blc-cell-url above */

/* Type badge handled by .blc-type above */

/* Source page link */
.blc-source-link {
    color: var(--blc-text-light);
    font-size: 12px;
    text-decoration: none;
}

.blc-source-link:hover {
    color: var(--blc-primary);
}

/* Response time */
.blc-time {
    font-variant-numeric: tabular-nums;
    color: var(--blc-text-muted);
}

/* Table footer */
.blc-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--blc-border);
    font-size: 13px;
    color: var(--blc-text-muted);
}

.blc-pagination {
    display: flex;
    gap: 4px;
}

.blc-wrapper .blc-page-btn,
.blc-wrapper #pagination button {
    padding: 6px 12px;
    border: 1px solid var(--blc-border);
    background: var(--blc-card);
    color: var(--blc-text);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blc-wrapper #pagination button i {
    width: 16px;
    height: 16px;
}

.blc-wrapper .blc-page-btn:hover,
.blc-wrapper #pagination button:hover:not(:disabled) {
    border-color: var(--blc-primary);
    color: var(--blc-primary);
    transform: none;
}

.blc-wrapper .blc-page-btn.active,
.blc-wrapper #pagination button.blc-active {
    background: var(--blc-primary);
    border-color: var(--blc-primary);
    color: white;
}

.blc-wrapper .blc-page-btn:disabled,
.blc-wrapper #pagination button:disabled,
.blc-wrapper #pagination button.blc-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.blc-wrapper #pagination button.blc-disabled:hover {
    border-color: var(--blc-border);
    color: var(--blc-text);
}

.blc-page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    color: var(--blc-text-muted);
    font-size: 13px;
}

/* Single Page Mode Hint */
.blc-single-page-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--blc-primary-light);
    border-radius: 8px;
    font-size: 13px;
    color: var(--blc-text);
    margin-top: 16px;
    animation: hintSlideIn 0.3s ease;
}

@keyframes hintSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blc-single-page-hint i {
    width: 18px;
    height: 18px;
    color: var(--blc-primary);
    flex-shrink: 0;
    margin-top: 1px;
}

.blc-single-page-hint strong {
    color: var(--blc-primary);
}

/* Disabled state for Max Pages when single page mode */
#maxPages:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--blc-card-alt);
}

.blc-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    color: var(--blc-text-muted);
    font-size: 13px;
}

/* === EMPTY STATE === */
.blc-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--blc-text-muted);
}

.blc-empty i {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.blc-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--blc-text);
    margin: 0 0 8px 0;
}

.blc-empty p {
    font-size: 14px;
    margin: 0;
    color: var(--blc-text-light);
}

/* === RELATED TOOLS === */
.blc-related {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding: 1.25rem;
    background: var(--blc-card);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
    transition: background-color var(--transition-speed);
}

.blc-related-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blc-text);
    font-size: 14px;
}

.blc-related-label i {
    width: 18px;
    height: 18px;
    color: var(--blc-primary);
}

.blc-related-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.blc-related-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--blc-card-alt);
    border-radius: 9999px;
    color: var(--blc-text-light);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.25s ease;
}

.blc-related-link:hover {
    background: var(--blc-primary-light);
    color: var(--blc-primary);
}

.blc-related-link i {
    width: 16px;
    height: 16px;
}

/* === INFO SECTIONS === */
/* === INFO SECTIONS - TGD-inspired separate cards === */
.blc-info-sections {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 28px;
}

.blc-info-card {
    background: var(--blc-card);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: background-color var(--transition-speed);
}

.blc-info-card:last-child {
    border-bottom: none;
}

.blc-info-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--blc-text);
    margin: 0 0 1.25rem 0;
}

.blc-info-card h2 i {
    width: 20px;
    height: 20px;
    color: var(--blc-primary);
}

/* Steps */
.blc-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.blc-step {
    display: flex;
    gap: 14px;
}

.blc-step-num {
    width: 32px;
    height: 32px;
    background: var(--blc-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.blc-step h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--blc-text);
    margin: 0 0 4px 0;
}

.blc-step p {
    font-size: 13px;
    color: var(--blc-text-light);
    margin: 0;
    line-height: 1.5;
}

.blc-step p a {
    color: var(--blc-primary);
    text-decoration: none;
}

.blc-step p a:hover {
    text-decoration: underline;
}

/* Status reference */
.blc-status-ref {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.blc-status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--blc-card-alt);
    border-radius: 10px;
    font-size: 13px;
    color: var(--blc-text-light);
}

.blc-status-item span {
    font-weight: 700;
    min-width: 32px;
}

.blc-status-ok span { color: var(--blc-success); }
.blc-status-redir span { color: var(--blc-warning); }
.blc-status-err span { color: var(--blc-danger); }
.blc-status-time span { color: var(--blc-info); }

/* Asset info */
.blc-asset-info {
    font-size: 14px;
    color: var(--blc-text-light);
    line-height: 1.6;
}

.blc-asset-info p {
    margin: 0 0 14px 0;
}

.blc-asset-info a {
    color: var(--blc-primary);
    text-decoration: none;
}

.blc-asset-info a:hover {
    text-decoration: underline;
}

.blc-asset-info ul {
    margin: 0 0 14px 0;
    padding-left: 24px;
}

.blc-asset-info li {
    margin-bottom: 8px;
}

.blc-asset-info code {
    background: var(--blc-card-alt);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: ui-monospace, monospace;
}

.blc-code-block {
    display: block;
    background: var(--blc-card-alt);
    border: 1px solid var(--blc-border);
    padding: 14px;
    border-radius: 8px;
    font-size: 12px;
    font-family: ui-monospace, monospace;
    white-space: pre-wrap;
    color: var(--blc-text);
}

/* === FAQ - inside info card === */
.blc-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* FAQ - .faq-item structure (handled globally by _footer.php) */
.blc-faq .faq-item {
    background: var(--blc-card-alt);
    border-radius: 10px;
    overflow: hidden;
    border: none;
    margin: 0;
    padding: 0;
    transition: background-color var(--transition-speed), box-shadow 0.25s ease;
}

.blc-faq .faq-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.blc-faq .faq-question {
    padding: 14px 18px;
    font-weight: 600;
    color: var(--blc-text);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    gap: 12px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.blc-faq .faq-question i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--blc-text-muted);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

.blc-faq .faq-item.open .faq-question i {
    transform: rotate(180deg);
    color: var(--blc-primary);
}

.blc-faq .faq-question:hover {
    color: var(--blc-primary);
}

.blc-faq .faq-answer {
    display: none;
    padding: 0 18px 14px;
    margin: 0;
}

.blc-faq .faq-item.open .faq-answer {
    display: block;
    animation: blcFaqFadeIn 0.25s ease;
}

@keyframes blcFaqFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.blc-faq .faq-answer p {
    margin: 0;
    font-size: 13px;
    color: var(--blc-text-light);
    line-height: 1.6;
}

.blc-faq .faq-answer a {
    color: var(--blc-primary);
    text-decoration: none;
}

.blc-faq .faq-answer a:hover {
    text-decoration: underline;
}

.blc-faq .faq-answer code {
    background: var(--blc-card);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: ui-monospace, monospace;
}

/* === TEXT HELPERS === */
.blc-text-muted {
    color: var(--blc-text-muted);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .blc-container {
        padding: 16px 12px;
    }
    
    .blc-modes {
        gap: 2px;
        padding: 3px;
    }
    
    .blc-mode-inner {
        padding: 8px 12px;
        gap: 5px;
    }
    
    .blc-mode-inner i {
        width: 16px;
        height: 16px;
    }
    
    .blc-mode-title {
        font-size: 12px;
    }
    
    .blc-input-row {
        flex-wrap: wrap;
    }
    
    .blc-settings-grid {
        flex-direction: column;
        gap: 16px;
    }
    
    .blc-field-num {
        flex: 1 1 100%;
    }
    
    .blc-field-patterns textarea {
        width: 100%;
    }
    
    .blc-type-checks {
        flex-direction: column;
        gap: 8px;
    }
    
    .blc-stats {
        flex-direction: column;
    }
    
    .blc-stat {
        flex: 1 1 100%;
    }
    
    .blc-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .blc-table-header {
        flex-direction: column;
    }
    
    .blc-search {
        max-width: none;
    }
    
    .blc-table-footer {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
    
    .blc-pagination {
        justify-content: center;
    }
    
    .blc-related {
        flex-direction: column;
        text-align: center;
    }
    
    .blc-related-links {
        justify-content: center;
    }
    
    .blc-info-sections {
        gap: 1rem;
    }
    
    .blc-info-card {
        padding: 1.25rem;
    }
    
    .blc-steps {
        grid-template-columns: 1fr;
    }
    
    .blc-status-ref {
        grid-template-columns: 1fr;
    }
    
    /* Progress Section Responsive */
    .blc-progress-animated.active {
        padding: 24px 16px;
        gap: 20px;
    }
    
    .blc-progress-ring {
        width: 140px;
        height: 140px;
    }
    
    .blc-progress-ring svg {
        width: 140px;
        height: 140px;
    }
    
    .blc-ring-percent {
        font-size: 28px;
    }
    
    .blc-live-stats {
        gap: 24px;
    }
    
    .blc-live-num {
        font-size: 26px;
    }
    
    .blc-phases {
        max-width: 100%;
        padding: 0;
    }
    
    .blc-phases-track,
    .blc-phases-fill {
        left: 30px;
        right: 30px;
    }
    
    .blc-phase-dot {
        width: 30px;
        height: 30px;
    }
    
    .blc-phase-dot i {
        width: 14px;
        height: 14px;
    }
    
    .blc-phase-label {
        font-size: 10px;
    }
    
    .blc-url-ticker {
        padding: 12px 14px;
        font-size: 11px;
    }
}

/* === SCROLLBAR === */
.blc-wrapper ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.blc-wrapper ::-webkit-scrollbar-track {
    background: var(--blc-card-alt);
    border-radius: 4px;
}

.blc-wrapper ::-webkit-scrollbar-thumb {
    background: var(--blc-text-muted);
    border-radius: 4px;
}

.blc-wrapper ::-webkit-scrollbar-thumb:hover {
    background: var(--blc-text-light);
}

/* === SELECTION === */
.blc-wrapper ::selection {
    background: rgba(51, 153, 204, 0.2);
    color: var(--blc-text);
}

[data-theme="dark"] .blc-wrapper ::selection {
    background: rgba(96, 165, 250, 0.3);
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .blc-wrapper *,
    .blc-wrapper *::before,
    .blc-wrapper *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* === LIVE ISSUES FEED === */
.blc-live-issues-feed {
    margin: 0 24px 24px 24px;
    background: var(--blc-card);
    border: 1px solid var(--blc-border);
    border-radius: 12px;
    overflow: hidden;
    animation: feedSlideIn 0.3s ease;
}

@keyframes feedSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blc-live-issues-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--blc-card-alt);
    border-bottom: 1px solid var(--blc-border);
}

.blc-live-issues-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--blc-text);
    font-size: 14px;
}

.blc-live-issues-title i {
    width: 18px;
    height: 18px;
    color: var(--blc-warning);
}

.blc-live-issues-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--blc-danger);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}

.blc-live-issues-hint {
    font-size: 12px;
    color: var(--blc-text-muted);
}

.blc-live-issues-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
}

.blc-live-issue {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--blc-card-alt);
    transition: all 0.2s ease;
}

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

.blc-live-issue-new {
    animation: issueSlideIn 0.3s ease;
}

@keyframes issueSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.blc-live-issue-status {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.blc-live-issue-status i {
    width: 16px;
    height: 16px;
}

.blc-live-issue-code {
    font-weight: 600;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

.blc-live-issue-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.blc-live-issue-url {
    font-size: 13px;
    color: var(--blc-text);
    font-family: ui-monospace, SFMono-Regular, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blc-live-issue-type {
    font-size: 11px;
    color: var(--blc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Issue Type Colors */
.blc-live-issue-broken {
    background: var(--blc-danger-light);
}

.blc-live-issue-broken .blc-live-issue-status i,
.blc-live-issue-broken .blc-live-issue-code {
    color: var(--blc-danger);
}

.blc-live-issue-redirect {
    background: var(--blc-primary-light);
}

.blc-live-issue-redirect .blc-live-issue-status i,
.blc-live-issue-redirect .blc-live-issue-code {
    color: var(--blc-primary);
}

.blc-live-issue-timeout {
    background: var(--blc-warning-light);
}

.blc-live-issue-timeout .blc-live-issue-status i,
.blc-live-issue-timeout .blc-live-issue-code {
    color: var(--blc-warning);
}

/* Empty State */
.blc-live-issue-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--blc-text-muted);
    font-size: 14px;
}

.blc-live-issue-empty i {
    width: 20px;
    height: 20px;
    color: var(--blc-success);
}

/* === NOTIFICATIONS === */
.blc-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--blc-card);
    border: 1px solid var(--blc-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    color: var(--blc-text);
    z-index: 10000;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
    max-width: 500px;
}

.blc-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.blc-notification i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.blc-notification-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--blc-text-muted);
    flex-shrink: 0;
    margin-left: 4px;
}

.blc-notification-close i {
    width: 14px;
    height: 14px;
}

.blc-notification-info i { color: var(--blc-primary); }
.blc-notification-warning i { color: var(--blc-warning); }
.blc-notification-error i { color: var(--blc-danger); }
.blc-notification-success i { color: var(--blc-success); }

[data-theme="dark"] .blc-notification {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* === ACTION ROW (Export + Re-check) === */
.blc-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Compact action buttons - .blc-wrapper prefix needed to override all:unset reset */
.blc-wrapper .blc-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--blc-border);
    background: var(--blc-card-alt);
    color: var(--blc-text-light);
    transition: all 0.2s ease;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1.4;
}

.blc-wrapper .blc-btn-action i {
    width: 14px;
    height: 14px;
}

.blc-wrapper .blc-btn-action:hover {
    background: var(--blc-primary-light);
    border-color: var(--blc-primary);
    color: var(--blc-primary);
    transform: none;
    box-shadow: none;
}

.blc-wrapper .blc-btn-recheck {
    background: var(--blc-primary-light);
    color: var(--blc-primary);
    border-color: rgba(51, 153, 204, 0.3);
}

.blc-wrapper .blc-btn-recheck:hover {
    background: var(--blc-primary);
    color: white;
    border-color: var(--blc-primary);
}

.blc-wrapper .blc-btn-recheck:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* === SCAN RESULTS HEADING (above summary card) === */
.blc-results-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--blc-text);
    margin: 24px 24px 0;
    padding: 0;
}

.blc-results-heading i {
    width: 20px;
    height: 20px;
    color: var(--blc-primary);
}

/* === HEALTH SCORE === */
.blc-summary-top {
    display: flex;
    align-items: center;
    gap: 28px;
}

.blc-summary-right {
    flex: 1;
}

.blc-health-score {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.blc-health-ring {
    display: block;
}

.blc-health-bg {
    stroke: var(--blc-card-alt);
    transition: stroke var(--transition-speed);
}

.blc-health-fg {
    stroke: var(--blc-success);
    transition: stroke-dashoffset 1s ease, stroke 0.3s ease;
}

.blc-health-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.blc-health-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--blc-success);
    line-height: 1;
}

.blc-health-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--blc-text-muted);
    margin-top: 2px;
}

/* === SITEMAP HINT === */
.blc-sitemap-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--blc-primary-light);
    border-radius: 8px;
    font-size: 13px;
    color: var(--blc-text-light);
    margin-top: 12px;
    line-height: 1.6;
}

.blc-sitemap-hint i {
    width: 16px;
    height: 16px;
    color: var(--blc-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.blc-sitemap-hint a {
    color: var(--blc-primary);
    text-decoration: none;
    font-weight: 500;
}

.blc-sitemap-hint a:hover {
    text-decoration: underline;
}

/* === URL WRAP & CELLS === */
.blc-url-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.blc-url-wrap a {
    color: var(--blc-primary);
    text-decoration: none;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.blc-cell-url {
    max-width: 340px;
}

.blc-cell-status {
    white-space: nowrap;
}

.blc-cell-time {
    font-variant-numeric: tabular-nums;
    color: var(--blc-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.blc-cell-source {
    white-space: nowrap;
}

/* === TYPE BADGE === */
.blc-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--blc-card-alt);
    border-radius: 4px;
    font-size: 11px;
    color: var(--blc-text-light);
    font-weight: 500;
    text-transform: lowercase;
}

.blc-type i {
    width: 12px;
    height: 12px;
}

/* === COPY URL - GHOST BUTTON, only visible on row hover === */
.blc-wrapper .blc-copy-url {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    color: var(--blc-border);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 1;
}

.blc-wrapper .blc-copy-url i {
    width: 10px;
    height: 10px;
}

.blc-wrapper tr:hover .blc-copy-url {
    opacity: 0.4;
}

.blc-wrapper .blc-copy-url:hover {
    opacity: 1 !important;
    color: var(--blc-primary);
    transform: none;
    box-shadow: none;
}

.blc-wrapper .blc-copy-url.blc-copied {
    color: var(--blc-success);
    opacity: 1 !important;
}

/* === ANCHOR TEXT === */
.blc-anchor-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--blc-text-muted);
    margin-top: 2px;
    font-style: italic;
}

.blc-anchor-text i {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* === REDIRECT URL === */
.blc-redirect-url {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--blc-text-muted);
    margin-top: 2px;
}

.blc-redirect-url i {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* === SOURCE EXPANDED ROW === */
.blc-source-row td {
    padding: 0 16px 12px 16px !important;
    background: var(--blc-card-alt);
    border-bottom: 1px solid var(--blc-border);
}

.blc-source-details {
    padding: 6px 10px;
    background: var(--blc-card);
    border-radius: 6px;
    border: 1px solid var(--blc-border);
}

.blc-source-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.blc-source-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}

.blc-source-item:hover {
    background: var(--blc-card-alt);
}

.blc-source-item i {
    width: 13px;
    height: 13px;
    color: var(--blc-text-muted);
    flex-shrink: 0;
}

.blc-source-url {
    color: var(--blc-primary);
    text-decoration: none;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blc-source-url:hover {
    text-decoration: underline;
}

[data-theme="dark"] .blc-source-row td {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .blc-source-details {
    background: var(--blc-card);
    border-color: var(--blc-border);
}

/* === RESPONSE TIME WARNINGS === */
.blc-time-warn {
    color: var(--blc-warning);
    font-weight: 500;
}

.blc-time-slow {
    color: var(--blc-danger);
    font-weight: 600;
}

/* === RESPONSIVE - NEW FEATURES === */
@media (max-width: 768px) {
    .blc-summary-top {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .blc-health-score {
        margin: 0 auto;
    }
    
    .blc-action-row {
        gap: 6px;
    }
}

@media (max-width: 640px) {
    .blc-notification {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}