/* === Unified base === */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background: #f4f6f8;
    padding: 0;
    color: #263238;
}
body.login-page {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
body.report-page {
    padding: 32px 20px;
    line-height: 1.5;
}
.page-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 5%;
}

/* === login.html === */

        .login-box {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 40px;
            width: 340px;
            box-shadow: 0 2px 10px rgba(0,0,0,.06);
        }
        .login-page h1 { margin: 0 0 8px; font-size: 22px; color: #263746; }
        .login-page p { margin: 0 0 24px; color: #6b7280; font-size: 13px; }
        .login-page input {
            width: 100%;
            padding: 11px 14px;
            margin-bottom: 14px;
            border: 1px solid #d1d5db;
            border-radius: 7px;
            font-size: 14px;
            box-sizing: border-box;
        }
        .login-page button {
            width: 100%;
            padding: 12px;
            border: 0;
            border-radius: 7px;
            background: #1877F2;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }
        .login-page button:hover { background: #1f2937; }
        .login-page .error {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #991b1b;
            padding: 10px 14px;
            border-radius: 7px;
            margin-bottom: 14px;
            font-size: 13px;
        }


/* === index.html === */
* {
            box-sizing: border-box;
        }

        

        .container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* ----------------------------------------
           Header
        ---------------------------------------- */

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;

            background: #dfe8f1;
            border: 1px solid #c5d2df;
            border-radius: 12px;

            padding: 22px 28px;
            margin-bottom: 20px;

            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .header-title {
            flex-shrink: 0;
        }

        .header h1 {
            margin: 0;
            font-size: 28px;
            font-weight: 700;
            color: #263746;
        }

        .header-description {
            flex: 1;
            text-align: right;
        }

        .header-description p {
            margin: 0;
            color: #536575;
            font-size: 14px;
            line-height: 1.6;
            text-align:left
        }

        /* ----------------------------------------
           URL / Audit Form
        ---------------------------------------- */

        .audit-section {
            background: #e2eaf4;
            border: 1px solid #c7d5e5;
            border-radius: 12px;
            padding: 22px 28px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        .audit-header {
            display: flex;
            align-items: center;
            gap: 24px;
            width: 100%;
        }

        .audit-header .section-title {
            margin: 0;
            white-space: nowrap;
        }

        .audit-form {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            margin: 0;
            flex-wrap: wrap;
        }

        .audit-form input {
            flex: 1;
            min-width: 0;
        }

        .audit-form button {
            flex-shrink: 0;
        }

        .source-mode-row {
            width: 100%;
            display: flex;
            gap: 20px;
            margin-bottom: 4px;
        }

        .source-mode-label {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: #374151;
        }

        .section-title {
            margin: 0 0 16px;
            font-size: 18px;
            font-weight: 600;
            color: #1877F2;
        }

        form {
            display: flex;
            gap: 12px;
            width: 100%;
        }

        input {
            flex: 1;
            min-width: 0;
            padding: 12px 14px;
            border: 1px solid #d1d5db;
            border-radius: 7px;
            background: #ffffff;
            color: #263238;
            font-size: 14px;
            outline: none;
        }

        input:focus {
            border-color: #64748b;
            box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.12);
        }

        button {
            padding: 12px 20px;
            border: 0;
            border-radius: 7px;
            background: #1877F2;
            color: #ffffff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }

        button:hover {
            background: #1f2937;
        }

        /* ----------------------------------------
           Error
        ---------------------------------------- */

        .error-box {
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 12px;
            padding: 22px 28px;
            margin-bottom: 20px;
            color: #991b1b;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        /* ----------------------------------------
           Report Header
        ---------------------------------------- */

        .report-header {
            background: #e1eee8;
            border: 1px solid #c5ddd1;
            border-radius: 12px;
            padding: 22px 28px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .report-header h2 {
            margin: 0 0 12px;
            font-size: 20px;
            font-weight: 600;
        }

        .target-url {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 7px;
            padding: 12px 14px;
            font-size: 13px;
            color: #475569;

            /* Important for very long URLs */
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        /* ----------------------------------------
           Summary
        ---------------------------------------- */

        .summary-section {
            background: #eeeae0;
            border: 1px solid #ddd5c5;
            border-radius: 12px;
            padding: 22px 28px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

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

        .summary-card {
            padding: 16px;
            background: rgba(255, 255, 255, 0.80);
            border: 1px solid #d3dbe2;
            background: rgba(255, 255, 255, 0.75);
        }

        .summary-label {
            display: block;
            margin-bottom: 4px;
            font-size: 12px;
            font-weight: 600;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        .summary-count {
            font-size: 24px;
            font-weight: 600;
            color: #334155;
        }

        /* Category summary row - Row 1 */
        .category-summary-row {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            margin-bottom: 20px;
        }

        .category-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .category-card-title {
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: #64748b;
        }

        .category-card.cat-discoverable .category-card-title { color: #1e40af; }
        .category-card.cat-capable .category-card-title { color: #047857; }
        .category-card.cat-understandable .category-card-title { color: #c2410c; }
        .category-card.cat-transactable .category-card-title { color: #7c3aed; }

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

        .category-card-score {
            font-size: 14px;
            font-weight: 700;
        }

        .score-passed { color: #166534; }
        .score-separator { color: #94a3b8; font-weight: 400; }
        .score-total { color: #475569; }

        /* Mini status boxes inside category cards */
        .category-mini-statuses {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
        }

        .mini-status {
            border-radius: 8px;
            padding: 6px 2px;
            text-align: center;
        }

        .mini-status .mini-icon,
        .mini-status .mini-label {
            display: block;
            font-size: 10px;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .mini-status .mini-count {
            display: block;
            font-size: 16px;
            font-weight: 700;
        }

        .mini-pass {
            background: #dcfce7;
            color: #166534;
        }

        .mini-fail {
            background: #fee2e2;
            color: #991b1b;
        }

        .mini-error {
            background: #fef3c7;
            color: #92400e;
        }

        .mini-na {
            background: #f3f4f6;
            color: #6b7280;
        }

        /* Total Parameters card */
        .total-params {
            border: 2px solid #2563eb;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .score-total-large {
            font-size: 36px;
            font-weight: 700;
            color: #2563eb;
        }

        .category-card-subtitle {
            font-size: 12px;
            color: #6b7280;
            margin-top: 4px;
        }

        .category-card-sublabel {
            font-size: 11px;
            color: #94a3b8;
        }

        /* Status summary row - Row 2 */
        .status-summary-row {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }

        .status-card {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            text-align: center;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .status-card.pass { border-left: 4px solid #16a34a; }
        .status-card.fail { border-left: 4px solid #dc2626; }
        .status-card.error { border-left: 4px solid #f59e0b; background: #fff !important; padding: 16px !important; margin: 0 !important; border-radius: 12px !important; }
        .status-card.na { border-left: 4px solid #6b7280; }

        .status-card.overall-health {
            border: 2px solid #1e40af;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .status-card.overall-health .status-card-title {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: #1e40af;
            margin-bottom: 8px;
        }

        .status-card.overall-health .status-card-score {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .status-card-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }

        .status-card.pass .status-card-icon { color: #16a34a; }
        .status-card.fail .status-card-icon { color: #dc2626; }
        .status-card.error .status-card-icon { color: #f59e0b; }
        .status-card.na .status-card-icon { color: #6b7280; }

        .status-card-count {
            font-size: 28px;
            font-weight: 700;
            color: #1e293b;
        }

        .status-card.pass .status-card-count { color: #16a34a; }
        .status-card.fail .status-card-count { color: #dc2626; }
        .status-card.error .status-card-count { color: #f59e0b; }
        .status-card.na .status-card-count { color: #6b7280; }

        .status-card-label {
            font-size: 12px;
            font-weight: 600;
            color: #475569;
            margin-top: 2px;
        }

        .status-card-sublabel {
            font-size: 11px;
            color: #94a3b8;
        }

        /* ----------------------------------------
           Target Coverage Framework Breakdown
        ---------------------------------------- */

        .target-coverage-section {
            background: #f0f4f8;
            border: 1px solid #d1d9e6;
            border-radius: 12px;
            padding: 22px 28px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

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

        .target-coverage-header .section-title {
            margin-bottom: 0;
        }

        .target-coverage-subtitle {
            font-size: 13px;
            color: #64748b;
        }

        .target-summary-row {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .target-card {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            text-align: center;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .target-card.coverage {
            border: 2px solid #2563eb;
        }

        .target-card.passing { border-left: 4px solid #16a34a; }
        .target-card.failing { border-left: 4px solid #dc2626; }
        .target-card.errors { border-left: 4px solid #f59e0b; }
        .target-card.na-scope { border-left: 4px solid #6b7280; }
        .target-card.unmapped { border-left: 4px solid #94a3b8; }

        .target-card-title {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: #2563eb;
            margin-bottom: 6px;
        }

        .target-card.coverage .target-card-title { color: #2563eb; }
        .target-card.passing .target-card-title { color: #16a34a; }
        .target-card.failing .target-card-title { color: #dc2626; }
        .target-card.errors .target-card-title { color: #f59e0b; }
        .target-card.na-scope .target-card-title { color: #6b7280; }
        .target-card.unmapped .target-card-title { color: #94a3b8; }

        .target-card-percent {
            font-size: 28px;
            font-weight: 700;
            color: #2563eb;
        }

        .target-card-icon {
            font-size: 18px;
            margin-bottom: 2px;
        }

        .target-card.passing .target-card-icon { color: #16a34a; }
        .target-card.failing .target-card-icon { color: #dc2626; }
        .target-card.errors .target-card-icon { color: #f59e0b; }
        .target-card.na-scope .target-card-icon { color: #6b7280; }
        .target-card.unmapped .target-card-icon { color: #94a3b8; }

        .target-card-count {
            font-size: 28px;
            font-weight: 700;
            color: #1e293b;
        }

        .target-card.passing .target-card-count { color: #16a34a; }
        .target-card.failing .target-card-count { color: #dc2626; }
        .target-card.errors .target-card-count { color: #f59e0b; }
        .target-card.na-scope .target-card-count { color: #6b7280; }
        .target-card.unmapped .target-card-count { color: #94a3b8; }

        .target-card-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.3px;
            color: #475569;
            margin-top: 2px;
        }

        .target-card-sub {
            font-size: 10px;
            color: #94a3b8;
            margin-top: 2px;
        }

        .target-table-wrapper {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
        }

        .target-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .target-table th {
            background: #f8fafc;
            padding: 12px 16px;
            text-align: left;
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            letter-spacing: 0.3px;
            border-bottom: 2px solid #e5e7eb;
        }

        .target-table td {
            padding: 12px 16px;
            border-bottom: 1px solid #e5e7eb;
            font-size: 13px;
            color: #475569;
        }

        .target-table th:nth-child(1),
        .target-table td:nth-child(1) { width: 18%; }

        .target-table th:nth-child(2),
        .target-table td:nth-child(2) { width: 14%; text-align: center; }

        .target-table th:nth-child(3),
        .target-table td:nth-child(3) { width: 16%; text-align: center; }

        .target-table th:nth-child(4),
        .target-table td:nth-child(4) { width: 16%; text-align: center; }

        .target-table th:nth-child(5),
        .target-table td:nth-child(5) { width: 16%; text-align: center; }

        .target-table th:nth-child(6),
        .target-table td:nth-child(6) { width: 20%; text-align: center; }

        .target-table .total-row {
            background: #eff6ff;
            font-weight: 700;
        }

        .target-table .total-row td {
            border-bottom: none;
            color: #1e40af;
        }

        /* ----------------------------------------
           Status Colors
        ---------------------------------------- */

        .status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 92px;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.3px;
        }

        .status.PASS {
            background: #ecfdf3;
            color: #166534;
            border: 1px solid #bbf7d0;
        }

        .status.FAIL {
            background: #fef2f2;
            color: #991b1b;
            border: 1px solid #fecaca;
        }

        .status.N/A {
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #e2e8f0;
        }

        .status.ERROR {
            background: #fff7ed;
            color: #9a3412;
            border: 1px solid #fed7aa;
        }

        /* ----------------------------------------
           Results Section
        ---------------------------------------- */

        .results-section {
            background: #dfe8ee;
            border: 1px solid #c5d3dc;
            border-radius: 12px;
            padding: 22px 28px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

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

        .results-section-header h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
        }

        .result-count {
            color: #64748b;
            font-size: 13px;
        }

        /* ----------------------------------------
           Table Wrapper
        ---------------------------------------- */

        .table-wrapper {
            width: 100%;
            overflow-x: auto;
            background: #ffffff;
            border: 1px solid #cfd8df;
            border-radius: 8px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: #ffffff;
        }

        th,
        td {
            padding: 13px 14px;
            border-bottom: 1px solid #e5e7eb;
            text-align: left;
            vertical-align: top;
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: normal;
        }

        th {
            background: #f8fafc;
            color: #475569;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        td {
            color: #475569;
            font-size: 13px;
        }

        /* ----------------------------------------
           Results Table (index.html)
        ---------------------------------------- */

        .results-table {
            table-layout: fixed;
        }

        .results-table th:nth-child(1),
        .results-table td:nth-child(1) {
            width: 40px;
            text-align: center;
            padding: 8px 4px !important;
        }

        .results-table th:nth-child(2),
        .results-table td:nth-child(2) {
            width: 22%;
        }

        .results-table th:nth-child(3),
        .results-table td:nth-child(3) {
            width: 8%;
        }

        .results-table th:nth-child(4),
        .results-table td:nth-child(4) {
            width: 25%;
        }

        .results-table th:nth-child(5),
        .results-table td:nth-child(5) {
            width: 25%;
        }

        .results-table th:nth-child(6),
        .results-table td:nth-child(6) {
            width: 20%;
        }

        .results-table .category-row { background: #f3f4f6; }
        .results-table .category-header {
            padding: 8px 14px !important;
            font-weight: 700;
            font-size: 13px;
            color: #1e40af;
            background: #eff6ff;
            border-bottom: 2px solid #bfdbfe;
            text-align: left !important;
        }

        .read-more-btn {
            display: inline-block;
            margin-top: 6px;
            padding: 0;
            border: none;
            background: none;
            color: #356a8a;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
        }

        .read-more-btn:hover {
            text-decoration: underline;
        }

        .evidence-full {
            white-space: normal;
        }
        .error-cell {
            max-width: 250px;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .error-cell .error-short,
        .error-cell .error-full,
        .error-cell .error-text {
            color: #991b1b;
            font-size: 12px;
            line-height: 1.5;
        }
        /* ----------------------------------------
           Rule Information
        ---------------------------------------- */

        .rule-id {
            display: inline-block;
            margin-bottom: 4px;
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .rule-name {
            display: block;
            color: #263238;
            font-weight: 600;
            line-height: 1.4;
        }

        .message {
            color: #475569;
        }

        .evidence {
            color: #64748b;
            font-family: Consolas, Monaco, monospace;
            font-size: 12px;
            line-height: 1.5;
        }

        .error {
            color: #991b1b;
            font-size: 12px;
        }

        .no-error {
            color: #94a3b8;
        }

        /* ----------------------------------------
           Responsive
        ---------------------------------------- */

        @media (max-width: 768px) {

            

            .header,
            .audit-section,
            .report-header,
            .summary-section,
            .results-section {
                padding: 18px;
            }

            form {
                flex-direction: column;
            }

            button {
                width: 100%;
            }

            .results-section-header {
                align-items: flex-start;
                flex-direction: column;
            }

            table {
                min-width: 900px;
            }
        }


/* === websites.html === */

        h1 { color: #263746; }
        a { color:#2563eb; text-decoration:none; }
        a:hover { text-decoration:underline; }
        .nav {
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
            padding: 0 5%;
            margin-bottom: 0;
            box-shadow: 0 1px 3px rgba(0,0,0,.06);
        }
        .nav-brand {
            font-size: 22px;
            font-weight: 800;
            color: #1877F2;
            text-decoration: none;
            margin-right: auto;
            padding: 14px 0;
        }
        .nav-brand:hover { text-decoration: none; }
        .nav-center {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0 auto;
        }
        .nav-center a {
            font-size: 14px;
            font-weight: 500;
            color: #65676b;
            padding: 18px 16px;
            text-decoration: none;
            border-bottom: 3px solid transparent;
            transition: color 0.15s, border-color 0.15s;
        }
        .nav-center a:hover { color: #1877F2; text-decoration: none; }
        .nav-center a.active {
            color: #1877F2;
            font-weight: 600;
            border-bottom-color: #1877F2;
        }
        .nav-right {
            display: flex;
            align-items: center;
            margin-left: auto;
            gap: 10px;
        }
        .nav-right form {
            display: inline;
            margin: 0;
            padding: 0;
        }
        .btn-logout {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            background: #1877F2;
            padding: 8px 16px;
            border-radius: 6px;
            text-decoration: none;
            white-space: nowrap;
            transition: background 0.15s;
        }
        .btn-logout:hover { background: #166fe5; text-decoration: none; }
        .btn-rescan-all, .btn-rescan-now {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            background: #166534;
            padding: 8px 16px;
            border-radius: 6px;
            border: 0;
            cursor: pointer;
            transition: background 0.15s;
        }
        .btn-rescan-all:hover, .btn-rescan-now:hover { background: #14532d; }
        .btn-rescan-now { background: #9a3412; }
        .btn-rescan-now:hover { background: #7c2d12; }
        .add-form {
            background:#fff; border:1px solid #e5e7eb; border-radius:8px;
            padding:18px; margin-bottom:20px;
        }
        .add-form input { padding:10px 12px; border:1px solid #d1d5db; border-radius:6px; margin-right:8px; font-size:14px; }
        .add-form button { padding:10px 16px; background:#1877F2; color:#fff; border:0; border-radius:6px; cursor:pointer; }
        table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); }
        th { background:#1877F2; color:#fff; padding:12px 14px; text-align:left; font-size:13px; }
        td { padding:10px 14px; border-bottom:1px solid #e5e7eb; font-size:13px; }
        tr:hover { background:#f9fafb; }
        .error { color:#991b1b; background:#fef2f2; padding:12px; border-radius:6px; margin-bottom:16px; }
        .actions a, .actions button { margin-right:8px; font-size:12px; }
        .actions form { display:inline; }
        .actions button { background:none; border:none; color:#2563eb; cursor:pointer; padding:0; font-size:12px; }
        .actions button.delete { color:#dc2626; }
        .empty { color:#6b7280; font-size:14px; }
        .filter-form {
            background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px;
            padding:18px; margin-bottom:20px;
        }
        .filter-form input { padding:10px 12px; border:1px solid #d1d5db; border-radius:6px; margin-right:8px; font-size:14px; }
        .filter-form select { padding:10px 12px; border:1px solid #d1d5db; border-radius:6px; margin-right:8px; font-size:14px; background:#fff; }
        .filter-form button { padding:10px 16px; background:#1877F2; color:#fff; border:0; border-radius:6px; cursor:pointer; }
        .filter-form .clear-btn { display:inline-block; padding:10px 16px; background:#fff; color:#1877F2; border:1px solid #d1d5db; border-radius:6px; text-decoration:none; font-size:14px; }
        .bulk-actions { margin-bottom:12px; }
        th.checkbox-col, td.checkbox-col { width:40px; text-align:center; }
        td.checkbox-col input { margin:0; }
        .action-btns {
            /* background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; */
            margin-bottom:20px;
        }
        /* Override fixed layout inherited from report page */
        table { table-layout: auto; min-width: 0; }
        th, td { padding: 10px 1px; font-weight:700; }

        /* Rules table column widths */
        .rules-table { width: 100%; table-layout: fixed; }
        .rules-table .checkbox-col { width: 40px; text-align: center; }
        .rules-table th:nth-child(2), .rules-table td:nth-child(2) { width: 4%; text-align: center; }
        .rules-table th:nth-child(3), .rules-table td:nth-child(3) { width: 16%; }
        .rules-table th:nth-child(4), .rules-table td:nth-child(4) { width: 6%; text-align: center; }
        .rules-table th:nth-child(5), .rules-table td:nth-child(5) { width: 4%; text-align: center; }
        .rules-table th:nth-child(6), .rules-table td:nth-child(6) { width: 36%; }
        .rules-table th:nth-child(7), .rules-table td:nth-child(7) { width: 8%; text-align: center; }
        .rules-table th:nth-child(8), .rules-table td:nth-child(8) { width: 8%; text-align: center; }
        .rules-table th:nth-child(9), .rules-table td:nth-child(9) { width: 8%; text-align: center; }

        /* Website listing column widths */
        th.col-num, td.col-num { width: 65px; text-align: center; }
        th.col-url, td.col-url { width: auto; min-width: 220px; word-break: break-all; }
        th.col-email, td.col-email { width: 180px; word-break: break-all; }
        th.col-status, td.col-status { width: 75px; white-space: nowrap; text-align: center; }
        th.col-scans, td.col-scans { width: 60px; white-space: nowrap; text-align: center; }
        th.col-last, td.col-last { width: 160px; white-space: nowrap; }
        th.col-actions, td.col-actions { width: auto; min-width: 170px; white-space: nowrap; }


/* === website_edit.html === */

        h1 { color: #263746; }
        a { color:#2563eb; text-decoration:none; }
        .box { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:20px; max-width:600px; }
        .box input { width:100%; padding:11px 14px; border:1px solid #d1d5db; border-radius:6px; margin-bottom:14px; font-size:14px; box-sizing:border-box; }
        .box button { padding:11px 18px; background:#1877F2; color:#fff; border:0; border-radius:6px; cursor:pointer; }
        .box .clear-btn { padding:11px 18px; background:#6b7280; color:#fff; border:0; border-radius:6px; cursor:pointer; text-decoration:none; font-size:14px; }
        .box .clear-btn:hover { background:#4b5563; text-decoration:none; }
        .error { color:#991b1b; background:#fef2f2; padding:12px; border-radius:6px; margin-bottom:16px; }


/* === website_reports.html === */

        h1 { color: #263746; }
        a { color:#2563eb; text-decoration:none; }
        a:hover { text-decoration:underline; }
        .nav {
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
            padding: 0 5%;
            margin-bottom: 0;
            box-shadow: 0 1px 3px rgba(0,0,0,.06);
        }
        .nav-brand {
            font-size: 22px;
            font-weight: 800;
            color: #1877F2;
            text-decoration: none;
            margin-right: auto;
            padding: 14px 0;
        }
        .nav-brand:hover { text-decoration: none; }
        .nav-center {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0 auto;
        }
        .nav-center a {
            font-size: 14px;
            font-weight: 500;
            color: #65676b;
            padding: 18px 16px;
            text-decoration: none;
            border-bottom: 3px solid transparent;
            transition: color 0.15s, border-color 0.15s;
        }
        .nav-center a:hover { color: #1877F2; text-decoration: none; }
        .nav-center a.active {
            color: #1877F2;
            font-weight: 600;
            border-bottom-color: #1877F2;
        }
        .nav-right {
            display: flex;
            align-items: center;
            margin-left: auto;
            gap: 10px;
        }
        .nav-right form {
            display: inline;
            margin: 0;
            padding: 0;
        }
        .btn-logout {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            background: #1877F2;
            padding: 8px 16px;
            border-radius: 6px;
            text-decoration: none;
            white-space: nowrap;
            transition: background 0.15s;
        }
        .btn-logout:hover { background: #166fe5; text-decoration: none; }
        .btn-rescan-all, .btn-rescan-now {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            background: #166534;
            padding: 8px 16px;
            border-radius: 6px;
            border: 0;
            cursor: pointer;
            transition: background 0.15s;
        }
        .btn-rescan-all:hover, .btn-rescan-now:hover { background: #14532d; }
        .btn-rescan-now { background: #9a3412; }
        .btn-rescan-now:hover { background: #7c2d12; }
        .info { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:16px; margin-bottom:20px; }
        .info div + div { margin-top:8px; }
        .info strong { display:inline-block; width:120px; color:#6b7280; }
        table.reports-table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); table-layout:auto; min-width:0; }
        table.reports-table th { background:#1877F2; color:#fff; padding:12px 14px; text-align:left; font-size:13px; }
        table.reports-table td { padding:10px 14px; border-bottom:1px solid #e5e7eb; font-size:13px; }
        table.reports-table tr:hover { background:#f9fafb; }
        .status-count.pass { color:#166534; font-weight:600; }
        .status-count.fail { color:#991b1b; font-weight:600; }
        .status-count.na { color:#475569; }
        .status-count.error { color:#9a3412; }
        .empty { color:#6b7280; }
        form { display:inline; }
        button { background:#1877F2; color:#fff; border:0; border-radius:6px; padding:10px 16px; cursor:pointer; }

        /* Website reports column widths */
        table.reports-table th.col-scan, table.reports-table td.col-scan { width: 12%; min-width: 100px; }
        table.reports-table th.col-count, table.reports-table td.col-count { width: 8%; min-width: 60px; text-align: center; }
        table.reports-table th.col-date, table.reports-table td.col-date { width: 14%; min-width: 130px; white-space: nowrap; }
        table.reports-table th.col-view, table.reports-table td.col-view { width: 8%; min-width: 60px; white-space: nowrap; }
        table.reports-table td.col-view a { white-space: nowrap; }


/* === website_compare.html === */

        .compare-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .compare-header h1 { margin: 0; }
        .compare-header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .status-badge {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            padding: 10px 18px;
            border-radius: 6px;
        }
        .status-badge.status-active { background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0; }
        .status-badge.status-inactive { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
        .btn {
            display: inline-block;
            padding: 10px 18px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            border: 0;
        }
        .btn-back { background: #1877F2; color: #fff; }
        .btn-back:hover { background: #1f2937; text-decoration: none; }
        .btn-compare { background: #2563eb; color: #fff; }
        .btn-compare:hover { background: #1d4ed8; text-decoration: none; }

        table.compare-table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,.06);
        }
        table.compare-table th {
            background: #1877F2;
            color: #fff;
            padding: 12px 14px;
            text-align: center;
            font-size: 13px;
        }
        table.compare-table th.col-param { width: 22%; text-align: left; }
        table.compare-table th.col-num { width: 40px !important; min-width: 40px !important; max-width: 40px !important; text-align: center; padding: 8px 4px !important; }
        table.compare-table td.col-num { width: 40px !important; min-width: 40px !important; max-width: 40px !important; text-align: center; color: #6b7280; padding: 8px 4px !important; font-weight: 400; }
        table.compare-table td {
            padding: 10px 14px;
            border-bottom: 1px solid #e5e7eb;
            font-size: 13px;
            text-align: center;
        }
        table.compare-table td.col-param { text-align: left !important; font-weight: 600; color: #6b7280; }
        table.compare-table th.col-scan { width: auto; }
        table.compare-table th.col-scan a { color: #fff; text-decoration: underline; }
        table.compare-table th.col-scan a:hover { text-decoration: underline; opacity: 0.8; }
        table.compare-table tr:hover { background: #f9fafb; }
        table.compare-table .status-pass { color: #166534; font-weight: 600; }
        table.compare-table .status-fail { color: #991b1b; font-weight: 600; }
        table.compare-table .status-na { color: #475569; }
        table.compare-table .status-error { color: #9a3412; }
        table.compare-table .col-category { width: 120px; text-align: left; font-size: 12px; color: #6b7280; }
        table.compare-table .category-row { background: #f3f4f6; }
        table.compare-table .category-header {
            padding: 8px 14px;
            font-weight: 700;
            font-size: 13px;
            color: #1e40af;
            background: #eff6ff;
            border-bottom: 2px solid #bfdbfe;
            text-align: left !important;
        }


/* === users.html === */

        h1 { color: #263746; }
        a { color:#2563eb; text-decoration:none; }
        a:hover { text-decoration:underline; }
        .nav {
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
            padding: 0 5%;
            margin-bottom: 0;
            box-shadow: 0 1px 3px rgba(0,0,0,.06);
        }
        .nav-brand {
            font-size: 22px;
            font-weight: 800;
            color: #1877F2;
            text-decoration: none;
            margin-right: auto;
            padding: 14px 0;
        }
        .nav-brand:hover { text-decoration: none; }
        .nav-center {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0 auto;
        }
        .nav-center a {
            font-size: 14px;
            font-weight: 500;
            color: #65676b;
            padding: 18px 16px;
            text-decoration: none;
            border-bottom: 3px solid transparent;
            transition: color 0.15s, border-color 0.15s;
        }
        .nav-center a:hover { color: #1877F2; text-decoration: none; }
        .nav-center a.active {
            color: #1877F2;
            font-weight: 600;
            border-bottom-color: #1877F2;
        }
        .nav-right {
            display: flex;
            align-items: center;
            margin-left: auto;
            gap: 10px;
        }
        .nav-right form {
            display: inline;
            margin: 0;
            padding: 0;
        }
        .btn-logout {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            background: #1877F2;
            padding: 8px 16px;
            border-radius: 6px;
            text-decoration: none;
            white-space: nowrap;
            transition: background 0.15s;
        }
        .btn-logout:hover { background: #166fe5; text-decoration: none; }
        .btn-rescan-all, .btn-rescan-now {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            background: #166534;
            padding: 8px 16px;
            border-radius: 6px;
            border: 0;
            cursor: pointer;
            transition: background 0.15s;
        }
        .btn-rescan-all:hover, .btn-rescan-now:hover { background: #14532d; }
        .btn-rescan-now { background: #9a3412; }
        .btn-rescan-now:hover { background: #7c2d12; }
        .add-form {
            background:#fff; border:1px solid #e5e7eb; border-radius:8px;
            padding:18px; margin-bottom:20px;
        }
        .add-form input { padding:10px 12px; border:1px solid #d1d5db; border-radius:6px; margin-right:8px; font-size:14px; }
        .add-form button { padding:10px 16px; background:#1877F2; color:#fff; border:0; border-radius:6px; cursor:pointer; }
        table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); }
        th { background:#1877F2; color:#fff; padding:12px 14px; text-align:left; font-size:13px; }
        td { padding:10px 14px; border-bottom:1px solid #e5e7eb; font-size:13px; }
        tr:hover { background:#f9fafb; }
        .error { color:#991b1b; background:#fef2f2; padding:12px; border-radius:6px; margin-bottom:16px; }
        form.inline { display:inline; }
        button.delete { background:none; border:none; color:#dc2626; cursor:pointer; padding:0; font-size:12px; }
        .empty { color:#6b7280; }


/* === user_edit.html === */

        h1 { color: #263746; }
        a { color:#2563eb; text-decoration:none; }
        .nav {
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
            padding: 0 5%;
            margin-bottom: 0;
            box-shadow: 0 1px 3px rgba(0,0,0,.06);
        }
        .nav-brand {
            font-size: 22px;
            font-weight: 800;
            color: #1877F2;
            text-decoration: none;
            margin-right: auto;
            padding: 14px 0;
        }
        .nav-brand:hover { text-decoration: none; }
        .nav-center {
            display: flex;
            align-items: center;
            gap: 4px;
            margin: 0 auto;
        }
        .nav-center a {
            font-size: 14px;
            font-weight: 500;
            color: #65676b;
            padding: 18px 16px;
            text-decoration: none;
            border-bottom: 3px solid transparent;
            transition: color 0.15s, border-color 0.15s;
        }
        .nav-center a:hover { color: #1877F2; text-decoration: none; }
        .nav-center a.active {
            color: #1877F2;
            font-weight: 600;
            border-bottom-color: #1877F2;
        }
        .nav-right {
            display: flex;
            align-items: center;
            margin-left: auto;
            gap: 10px;
        }
        .nav-right form {
            display: inline;
            margin: 0;
            padding: 0;
        }
        .btn-logout {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            background: #1877F2;
            padding: 8px 16px;
            border-radius: 6px;
            text-decoration: none;
            white-space: nowrap;
            transition: background 0.15s;
        }
        .btn-logout:hover { background: #166fe5; text-decoration: none; }
        .btn-rescan-all, .btn-rescan-now {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            background: #166534;
            padding: 8px 16px;
            border-radius: 6px;
            border: 0;
            cursor: pointer;
            transition: background 0.15s;
        }
        .btn-rescan-all:hover, .btn-rescan-now:hover { background: #14532d; }
        .btn-rescan-now { background: #9a3412; }
        .btn-rescan-now:hover { background: #7c2d12; }
        .box { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:20px; max-width:500px; }
        .box input, .box select { width:100%; padding:11px 14px; border:1px solid #d1d5db; border-radius:6px; margin-bottom:14px; font-size:14px; box-sizing:border-box; }
        .box label { display:block; font-size:13px; color:#6b7280; margin-bottom:4px; }
        .box button { padding:11px 18px; background:#1877F2; color:#fff; border:0; border-radius:6px; cursor:pointer; }
        .hint { font-size:12px; color:#9ca3af; margin-top:-8px; margin-bottom:14px; }
        .error { color:#991b1b; background:#fef2f2; padding:12px; border-radius:6px; margin-bottom:16px; }


/* === rescan_result.html === */

        h1 { color: #263746; }
        a { color:#2563eb; text-decoration:none; }
        table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); }
        th { background:#1877F2; color:#fff; padding:12px 14px; text-align:left; font-size:13px; }
        td { padding:10px 14px; border-bottom:1px solid #e5e7eb; font-size:13px; width:10%}
        .changed { color:#b45309; font-weight:600; }
        .unchanged { color:#166534; }
        .error { color:#991b1b; }


/* === Shared: Actions column === */
/* Make the Actions column wide enough so all buttons/links fit on one row */
th.actions, td.actions {
    width: auto;
    min-width: 160px;
    white-space: nowrap;
    overflow: visible;
}

td.actions a,
td.actions form,
td.actions button {
    /* display: inline-block; */
    vertical-align: middle;
    white-space: nowrap;
    margin-right: 6px;
    font-weight: bold;
}

td.actions button.delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

td.actions button.delete svg {
    display: block;
    vertical-align: middle;
}

.info-box { background:#e0f2fe; border:1px solid #bae6fd; color:#0c4a6e; padding:14px 16px; border-radius:8px; margin-bottom:20px; font-size:14px; }
.status-badge { display:inline-block; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.status-badge.active { background:#ecfdf3; color:#166534; border:1px solid #bbf7d0; }
.status-badge.inactive { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }
.mapped-yes { color:#166534; font-weight:600; }
.mapped-no { color:#dc2626; font-weight:600; }
.rule-id { font-family: monospace; font-size:12px; color:#64748b; }