/* =========================================
   CANONICAL REDIRECT CHECKER
========================================= */

.redirect-app {
    max-width: 960px;
}

.redirect-tool-icon {
    border-color: rgba(88,166,255,.30);
    background: rgba(88,166,255,.085);
    color: #62adff;
}

.redirect-tool-icon svg {
    width: 46px;
    height: 46px;
}

.redirect-form {
    max-width: 900px;
    margin: 0 auto;
}

.redirect-custom {
    margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.redirect-custom summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    color: #a9b8ca;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.redirect-custom summary::-webkit-details-marker {
    display: none;
}

.redirect-custom summary::before {
    content: "+";
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(88,166,255,.26);
    border-radius: 6px;
    color: #68b0ff;
    font-size: 15px;
    line-height: 1;
}

.redirect-custom[open] summary::before {
    content: "−";
}

.redirect-custom summary span {
    margin-left: auto;
    color: #637993;
    font-size: 11px;
    font-weight: 600;
}

.redirect-custom-label {
    display: block;
    margin: 15px 0 8px;
    color: #8195ad;
    font-size: 12px;
    font-weight: 700;
}

.redirect-textarea {
    width: 100%;
    min-height: 104px;
    padding: 13px 15px;
    resize: vertical;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    outline: none;
    background: rgba(5,15,27,.72);
    color: #eef4fb;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 13px;
    line-height: 1.55;
}

.redirect-textarea:focus {
    border-color: rgba(88,166,255,.55);
    box-shadow: 0 0 0 3px rgba(88,166,255,.07);
}

.redirect-textarea::placeholder {
    color: #526983;
}

.redirect-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 16px;
    color: #71859e;
    font-size: 11px;
}

.redirect-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.redirect-legend-item i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255,255,255,.03);
}

.redirect-legend-item.is-correct {
    color: #67affb;
}

.redirect-legend-item.is-warning {
    color: #f2c568;
}

.redirect-legend-item.is-error {
    color: #ff8585;
}

.redirect-results {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
}

.redirect-result-summary {
    margin-bottom: 12px;
}

.redirect-overall.is-correct {
    border-color: rgba(88,166,255,.32);
    background: rgba(88,166,255,.10);
    color: #78bbff;
}

.redirect-overall.is-warning {
    border-color: rgba(242,197,104,.32);
    background: rgba(242,197,104,.09);
    color: #f2ca78;
}

.redirect-overall.is-error {
    border-color: rgba(255,108,108,.32);
    background: rgba(255,108,108,.09);
    color: #ff9999;
}

.redirect-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.redirect-stat {
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 15px;
    background: rgba(255,255,255,.045);
    color: #dbe5ef;
    text-align: left;
    cursor: pointer;
    transition:
        transform .12s ease,
        border-color .15s ease,
        background .15s ease;
}

.redirect-stat:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.065);
}

.redirect-stat.is-active {
    box-shadow: inset 0 0 0 1px currentColor;
}

.redirect-stat.is-total {
    color: #aab9ca;
}

.redirect-stat.is-correct {
    border-color: rgba(88,166,255,.22);
    background: rgba(88,166,255,.065);
    color: #69b0fb;
}

.redirect-stat.is-warning {
    border-color: rgba(242,197,104,.22);
    background: rgba(242,197,104,.06);
    color: #efc66f;
}

.redirect-stat.is-error {
    border-color: rgba(255,108,108,.22);
    background: rgba(255,108,108,.06);
    color: #ff8989;
}

.redirect-stat-value {
    display: block;
    font-size: 27px;
    line-height: 1;
    font-weight: 700;
}

.redirect-stat-label {
    display: block;
    margin-top: 7px;
    color: currentColor;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    opacity: .82;
}

.redirect-list-section {
    margin-top: 12px;
}

.redirect-list-heading {
    align-items: center;
}

.redirect-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.redirect-filters button {
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    background: rgba(5,15,27,.26);
    color: #8194ab;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.redirect-filters button:hover,
.redirect-filters button.is-active {
    border-color: rgba(88,166,255,.30);
    background: rgba(88,166,255,.08);
    color: #79baff;
}

.redirect-list {
    display: grid;
    gap: 9px;
}

.redirect-card {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid rgba(255,255,255,.09);
    border-left-width: 3px;
    border-radius: 14px;
    background: rgba(5,15,27,.32);
}

.redirect-card[hidden] {
    display: none;
}

.redirect-card.is-correct {
    border-left-color: #58a6ff;
}

.redirect-card.is-warning {
    border-left-color: #e8b957;
}

.redirect-card.is-error {
    border-left-color: #f36f6f;
}

.redirect-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.redirect-card-identity {
    min-width: 0;
}

.redirect-card-type {
    display: block;
    margin-bottom: 5px;
    color: #72879f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.redirect-card-url {
    overflow-wrap: anywhere;
    color: #e9f0f8;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 13px;
    line-height: 1.45;
}

.redirect-card-badge {
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.redirect-card-badge.is-correct {
    background: rgba(88,166,255,.08);
    color: #6db3ff;
}

.redirect-card-badge.is-warning {
    background: rgba(242,197,104,.08);
    color: #edc36b;
}

.redirect-card-badge.is-error {
    background: rgba(255,108,108,.08);
    color: #ff8585;
}

.redirect-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 13px;
    margin-top: 11px;
    color: #7489a1;
    font-size: 11px;
}

.redirect-sequence {
    color: #a8bbcf;
    font-weight: 700;
}

.redirect-final-url {
    min-width: 0;
    overflow-wrap: anywhere;
}

.redirect-card-message {
    margin: 10px 0 0;
    color: #a7b5c5;
    font-size: 13px;
    line-height: 1.5;
}

.redirect-chain {
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.redirect-chain summary {
    padding-top: 11px;
    color: #6f87a2;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.redirect-chain-list {
    display: grid;
    gap: 0;
    padding-top: 12px;
}

.redirect-hop {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 9px;
    padding-bottom: 12px;
}

.redirect-hop:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 21px;
    bottom: -1px;
    left: 11px;
    width: 1px;
    background: rgba(88,166,255,.17);
}

.redirect-hop-marker {
    position: relative;
    z-index: 1;
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(88,166,255,.25);
    border-radius: 50%;
    background: #0b1727;
    color: #6fb4ff;
    font-size: 9px;
    font-weight: 800;
}

.redirect-hop-content {
    min-width: 0;
    padding-top: 1px;
}

.redirect-hop-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.redirect-hop-status {
    color: #d8e4ef;
    font-size: 12px;
    font-weight: 800;
}

.redirect-hop-time {
    color: #5f7590;
    font-size: 10px;
}

.redirect-hop-url,
.redirect-hop-location {
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: #8397ae;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 10px;
    line-height: 1.45;
}

.redirect-hop-location {
    color: #677e98;
}

.redirect-empty {
    display: none;
    padding: 26px 15px;
    color: #788da5;
    text-align: center;
    font-size: 13px;
}

.redirect-empty.is-visible {
    display: block;
}

.redirect-note {
    margin-top: 12px;
}

@media (max-width: 760px) {
    .redirect-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .redirect-list-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .redirect-filters {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .redirect-stat {
        padding: 13px;
    }

    .redirect-stat-value {
        font-size: 23px;
    }

    .redirect-card {
        padding: 13px;
    }

    .redirect-card-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .redirect-card-badge {
        align-self: flex-start;
    }

    .redirect-custom summary {
        align-items: flex-start;
    }

    .redirect-custom summary span {
        margin-left: 0;
    }
}