.broken-tool {
    --bg: #f4f7fb;
    display: flow-root;
    width: 100%;
    background: var(--bg);
    padding: 1px 0;
}
.broken-tool{
    --bg: #f4f7fb;
    --surface: #ffffff;
    --text: #172033;
    --muted: #667085;
    --border: #dce3ec;
    --primary: #f15a29;
    --primary-dark: #d94816;
    --green: #16803b;
    --green-bg: #eaf8ef;
    --blue: #1769d2;
    --blue-bg: #eaf2ff;
    --orange: #b86405;
    --orange-bg: #fff3e1;
    --red: #c53333;
    --red-bg: #ffeded;
    --grey: #667085;
    --grey-bg: #eef1f5;
    --shadow: 0 14px 40px rgba(21, 36, 60, 0.08);
}

.broken-tool, .broken-tool *{ box-sizing: border-box; }
.broken-tool{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.55;
}
.broken-tool button, .broken-tool input{ font: inherit; }
.broken-tool button{ cursor: pointer; }
.broken-tool button:disabled{ cursor: not-allowed; opacity: .55; }
.broken-tool .hidden{ display: none !important; }

.broken-tool .app-shell{ width: min(1500px, calc(100% - 32px)); margin: 36px auto 64px; }
.broken-tool .hero{
    background: linear-gradient(135deg, #ffffff, #f5f9ff);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: clamp(24px, 4vw, 48px);
    box-shadow: var(--shadow);
}
.broken-tool .eyebrow, .broken-tool .section-label{
    display: inline-block;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.broken-tool h1{ margin: 8px 0 10px; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; }
.broken-tool .hero > p{ max-width: 820px; margin: 0 0 28px; color: var(--muted); font-size: 1.05rem; }

.broken-tool .url-form label{ display: block; margin-bottom: 8px; font-weight: 700; }
.broken-tool .input-row{ display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
.broken-tool .input-row input, .broken-tool .search-input{
    width: 100%; border: 1px solid var(--border); background: #fff; color: var(--text);
    border-radius: 12px; padding: 13px 14px; outline: none;
}
.broken-tool .input-row input:focus, .broken-tool .search-input:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(241,90,41,.14); }
.broken-tool .form-message{ min-height: 24px; margin: 8px 0 0; color: var(--red); font-weight: 600; }
.broken-tool .form-message.success{ color: var(--green); }

.broken-tool .btn{ border: 1px solid var(--border); border-radius: 11px; padding: 12px 16px; background: #fff; color: var(--text); font-weight: 750; }
.broken-tool .btn:hover:not(:disabled){ transform: translateY(-1px); }
.broken-tool .btn-primary{ background: #111111; border-color: #111111; color: #ffffff; }
.broken-tool .btn-primary:hover:not(:disabled){ background: #000000; border-color: #000000; }
.broken-tool .btn-secondary{ background: #fff; }
.broken-tool .btn-danger{ color: var(--red); border-color: #efb7b7; }
.broken-tool .btn-small{ padding: 8px 12px; font-size: .9rem; }

.broken-tool .report{ margin-top: 24px; display: grid; gap: 20px; }
.broken-tool .card{ background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); }
.broken-tool .status-head{ display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.broken-tool .status-head h2, .broken-tool .health-section h2, .broken-tool .export-section h2, .broken-tool #recommendationsSection h2{ margin: 4px 0 0; }
.broken-tool .scan-controls{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.broken-tool .status-grid{ margin: 22px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.broken-tool .status-grid div{ min-width: 0; padding: 12px; border-radius: 12px; background: #f8fafc; border: 1px solid #edf1f5; }
.broken-tool .status-grid dt{ color: var(--muted); font-size: .78rem; font-weight: 700; }
.broken-tool .status-grid dd{ margin: 4px 0 0; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.broken-tool .progress-meta{ display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: .9rem; }
.broken-tool .progress-track{ height: 12px; margin-top: 8px; background: #e8edf4; border-radius: 999px; overflow: hidden; }
.broken-tool .progress-bar{ width: 0; height: 100%; background: var(--primary); transition: width .2s ease; }

.broken-tool .summary-grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.broken-tool .summary-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.broken-tool .summary-card span{ display: block; color: var(--muted); font-size: .82rem; min-height: 40px; }
.broken-tool .summary-card strong{ display: block; margin-top: 4px; font-size: 1.8rem; }

.broken-tool .health-section{ display: grid; grid-template-columns: auto minmax(220px, 1fr); align-items: center; gap: 24px; }
.broken-tool .health-section h2{ font-size: 2.3rem; }
.broken-tool .health-section p{ margin: 0; color: var(--muted); font-weight: 700; }
.broken-tool .health-meter{ height: 16px; border-radius: 999px; background: #e8edf4; overflow: hidden; }
.broken-tool .health-meter > div{ width: 100%; height: 100%; background: var(--primary); transition: width .25s ease; }

.broken-tool .toolbar{ display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.broken-tool .filters{ display: flex; flex-wrap: wrap; gap: 7px; }
.broken-tool .filter-btn{ border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; background: #fff; font-weight: 700; }
.broken-tool .filter-btn.active{ background: var(--text); color: #fff; border-color: var(--text); }
.broken-tool .search-input{ max-width: 330px; }
.broken-tool .table-wrap{ overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.broken-tool table{ width: 100%; min-width: 1400px; border-collapse: collapse; }
.broken-tool th, .broken-tool td{ padding: 11px 12px; text-align: left; border-bottom: 1px solid #edf1f5; vertical-align: top; font-size: .88rem; }
.broken-tool th{ position: sticky; top: 0; background: #f8fafc; z-index: 1; color: #344054; }
.broken-tool tbody tr:last-child td{ border-bottom: 0; }
.broken-tool tbody tr:hover{ background: #fbfcfe; }
.broken-tool .url-cell{ max-width: 320px; word-break: break-word; }
.broken-tool .anchor-cell{ max-width: 260px; word-break: break-word; }
.broken-tool .error-cell{ max-width: 260px; color: var(--red); word-break: break-word; }
.broken-tool .badge{ display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.broken-tool .badge-working{ color: var(--green); background: var(--green-bg); }
.broken-tool .badge-redirect{ color: var(--blue); background: var(--blue-bg); }
.broken-tool .badge-warning{ color: var(--orange); background: var(--orange-bg); }
.broken-tool .badge-broken, .broken-tool .badge-network-error{ color: var(--red); background: var(--red-bg); }
.broken-tool .badge-unchecked{ color: var(--grey); background: var(--grey-bg); }
.broken-tool .empty-message{ padding: 24px; border: 1px dashed var(--border); border-radius: 12px; text-align: center; color: var(--muted); }

.broken-tool #recommendationsList{ margin: 14px 0 0; padding-left: 22px; }
.broken-tool #recommendationsList li + li{ margin-top: 8px; }
.broken-tool .export-section{ display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.broken-tool .export-buttons{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

@media (max-width: 1150px) {
    .broken-tool .summary-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .broken-tool .status-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
    .broken-tool .app-shell{ width: min(100% - 20px, 1500px); margin-top: 10px; }
    .broken-tool .hero, .broken-tool .card{ border-radius: 14px; padding: 18px; }
    .broken-tool .input-row{ grid-template-columns: 1fr 1fr; }
    .broken-tool .input-row input{ grid-column: 1 / -1; }
    .broken-tool .status-head, .broken-tool .toolbar, .broken-tool .export-section{ align-items: stretch; flex-direction: column; }
    .broken-tool .scan-controls, .broken-tool .export-buttons{ justify-content: flex-start; }
    .broken-tool .summary-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .broken-tool .status-grid{ grid-template-columns: 1fr 1fr; }
    .broken-tool .health-section{ grid-template-columns: 1fr; }
    .broken-tool .search-input{ max-width: none; }
}
@media (max-width: 480px) {
    .broken-tool .input-row{ grid-template-columns: 1fr; }
    .broken-tool .input-row input{ grid-column: auto; }
    .broken-tool .summary-grid, .broken-tool .status-grid{ grid-template-columns: 1fr; }
    .broken-tool .progress-meta{ flex-direction: column; gap: 2px; }
}

/* Prevent wide report content from expanding the browser viewport. */
.broken-tool .report, .broken-tool .report > *, .broken-tool .card, .broken-tool .status-panel, .broken-tool .results-section, .broken-tool .toolbar, .broken-tool .status-head, .broken-tool .status-grid, .broken-tool .status-grid > div{
    min-width: 0;
    max-width: 100%;
}

.broken-tool .status-panel, .broken-tool .results-section{
    overflow: hidden;
}

.broken-tool .status-grid dd{
    max-width: 100%;
}

.broken-tool .table-wrap{
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Mobile result cards: easier to read than a 10-column table on a phone. */
@media (max-width: 700px) {
    .broken-tool .app-shell{
        width: calc(100% - 16px);
        margin: 8px auto 32px;
    }

    .broken-tool h1{
        font-size: clamp(1.8rem, 10vw, 2.5rem);
    }

    .broken-tool .hero, .broken-tool .card{
        padding: 16px;
    }

    .broken-tool .scan-controls, .broken-tool .export-buttons{
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .broken-tool .scan-controls .btn, .broken-tool .export-buttons .btn{
        width: 100%;
    }

    .broken-tool .status-grid{
        grid-template-columns: 1fr;
    }

    .broken-tool .status-grid dd{
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .broken-tool .filters{
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .broken-tool .filter-btn{
        flex: 0 0 auto;
    }

    .broken-tool .table-wrap{
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .broken-tool #resultsTable, .broken-tool #resultsTable tbody, .broken-tool #resultsTable tr, .broken-tool #resultsTable td{
        display: block;
        width: 100%;
        min-width: 0;
    }

    .broken-tool #resultsTable{
        min-width: 0;
    }

    .broken-tool #resultsTable thead{
        display: none;
    }

    .broken-tool #resultsTable tbody{
        display: grid;
        gap: 12px;
    }

    .broken-tool #resultsTable tr{
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: #fff;
    }

    .broken-tool #resultsTable td{
        display: grid;
        grid-template-columns: minmax(105px, 34%) minmax(0, 1fr);
        gap: 10px;
        max-width: none;
        padding: 10px 12px;
        border-bottom: 1px solid #edf1f5;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .broken-tool #resultsTable td:last-child{
        border-bottom: 0;
    }

    .broken-tool #resultsTable td::before{
        color: var(--muted);
        font-size: .76rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .broken-tool #resultsTable td:nth-child(1)::before{ content: "Number"; }
    .broken-tool #resultsTable td:nth-child(2)::before{ content: "Status"; }
    .broken-tool #resultsTable td:nth-child(3)::before{ content: "HTTP Code"; }
    .broken-tool #resultsTable td:nth-child(4)::before{ content: "URL"; }
    .broken-tool #resultsTable td:nth-child(5)::before{ content: "Link Type"; }
    .broken-tool #resultsTable td:nth-child(6)::before{ content: "Final URL"; }
    .broken-tool #resultsTable td:nth-child(7)::before{ content: "Redirects"; }
    .broken-tool #resultsTable td:nth-child(8)::before{ content: "Response Time"; }
    .broken-tool #resultsTable td:nth-child(9)::before{ content: "Anchor Text"; }
    .broken-tool #resultsTable td:nth-child(10)::before{ content: "Issue / Error"; }

    .broken-tool .url-cell, .broken-tool .anchor-cell, .broken-tool .error-cell{
        max-width: none;
    }
}

@media (max-width: 420px) {
    .broken-tool .scan-controls, .broken-tool .export-buttons{
        grid-template-columns: 1fr;
    }

    .broken-tool #resultsTable td{
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* SubmitShop colour overrides */
.broken-tool .eyebrow,
.broken-tool .section-label{
    color:#f15a29 !important;
}
.broken-tool .btn-primary{
    background:#111111 !important;
    border-color:#111111 !important;
    color:#ffffff !important;
}
.broken-tool .btn-primary:hover:not(:disabled){
    background:#000000 !important;
    border-color:#000000 !important;
}