.sc-page {
    position: relative;
    overflow: hidden;
    min-height: 82vh;
    background: radial-gradient(circle at 75% 5%, rgba(189, 128, 184, .2), transparent 27%), linear-gradient(135deg, #f7f4ef, #eee8f3);
    padding: 85px 20px;
    display: grid;
    place-items: center
}

.sc-orbit {
    position: absolute;
    border: 1px solid rgba(103, 86, 216, .15);
    border-radius: 50%
}

.sc-orbit-one {
    width: 520px;
    height: 520px;
    right: -220px;
    top: -250px
}

.sc-orbit-two {
    width: 300px;
    height: 300px;
    left: -170px;
    bottom: -160px
}

.sc-card {
    position: relative;
    width: min(100%, 760px);
    background: rgba(255, 253, 249, .96);
    border: 1px solid #e3dce7;
    border-radius: 28px;
    padding: 45px;
    box-shadow: 0 32px 100px rgba(32, 22, 48, .14);
    text-align: center
}

.sc-check {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    background: linear-gradient(145deg, #e7e1ff, #f8e8f2);
    display: grid;
    place-items: center;
    margin: 0 auto 22px
}

.sc-check svg {
    width: 34px;
    fill: none;
    stroke: #bd83b8;
    stroke-width: 2.5
}

.sc-card h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    margin: 13px auto;
    max-width: 650px
}

.sc-lead {
    color: #746b7d;
    max-width: 610px;
    margin: 0 auto 27px
}

.sc-reference {
    background: #251a38;
    color: #fff;
    border-radius: 18px;
    padding: 22px
}

.sc-reference>span {
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #bdb3c8
}

.sc-reference>div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    margin: 8px 0
}

.sc-reference strong {
    font: 800 clamp(1.5rem, 5vw, 2.2rem) Manrope;
    letter-spacing: .12em;
    color: #dedaff
}

.sc-reference button {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-radius: 9px;
    padding: 8px 11px;
    display: flex;
    gap: 6px
}

.sc-reference button svg {
    width: 15px;
    fill: none;
    stroke: currentColor
}

.sc-reference small {
    color: #aaa0b6
}

.sc-next {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
    margin: 28px 0
}

.sc-next article {
    display: flex;
    gap: 10px;
    padding: 15px;
    border-right: 1px solid #e5dee8
}

.sc-next article:last-child {
    border: 0
}

.sc-next article>span {
    color: #bd80b8;
    font-size: .68rem;
    font-weight: 900
}

.sc-next strong {
    font-size: .76rem
}

.sc-next p {
    font-size: .65rem;
    color: #7c7283;
    margin: 3px 0
}

.sc-actions {
    display: flex;
    justify-content: center;
    gap: 10px
}

.sc-security {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #7b7182;
    font-size: .66rem;
    margin: 25px 0 0
}

.sc-security svg {
    width: 17px;
    fill: none;
    stroke: #bd83b8
}

.tr-container {
    width: min(calc(100% - 40px), 1120px);
    margin-inline: auto
}

.tr-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 82% 0, rgba(189, 128, 184, .24), transparent 30%), linear-gradient(125deg, #130d21, #493762);
    color: #fff;
    padding: 80px 0 125px
}

.tr-hero-ring {
    position: absolute;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(201, 169, 110, .2);
    border-radius: 50%;
    right: -120px;
    top: -330px
}

.tr-hero h1 {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    margin: 13px 0
}

.tr-hero p {
    max-width: 650px;
    color: #d3ccda
}

.tr-main {
    background: #f7f4ef;
    min-height: 550px;
    padding-bottom: 100px
}

.tr-search-layout {
    position: relative;
    z-index: 2;
    margin-top: -65px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    align-items: stretch
}

.tr-search-card,
.tr-help {
    background: #fff;
    border: 1px solid #e3dce7;
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 22px 65px rgba(32, 22, 48, .1)
}

.tr-search-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px
}

.tr-search-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eeeaff;
    display: grid;
    place-items: center
}

.tr-search-icon svg {
    width: 23px;
    fill: none;
    stroke: #bd83b8;
    stroke-width: 1.8
}

.tr-search-head span:not(.tr-search-icon) {
    font-size: .64rem;
    color: #8b7f91;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 800
}

.tr-search-head h2 {
    margin: 2px 0;
    font-size: 1.45rem
}

.tr-search-card label {
    display: block;
    font-size: .75rem;
    font-weight: 800;
    margin-bottom: 8px
}

.tr-search-card label b {
    color: #bd2548
}

.tr-input-row {
    display: flex;
    gap: 9px
}

.tr-input-row input {
    flex: 1;
    min-width: 0;
    height: 52px;
    border: 1px solid #ddd6e1;
    border-radius: 11px;
    padding: 0 15px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase
}

.tr-input-row input:focus {
    outline: 0;
    border-color: #bd83b8;
    box-shadow: 0 0 0 4px rgba(103, 86, 216, .1)
}

.tr-search-card form>p {
    color: #827788;
    font-size: .66rem;
    margin: 8px 0
}

.tr-alert {
    padding: 12px 14px;
    border-radius: 10px;
    margin-top: 13px;
    font-size: .72rem;
    font-weight: 800
}

.tr-alert-error {
    background: #fff0f3;
    color: #ad2344;
    border: 1px solid #f2cbd5
}

.tr-inline-loader {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-top: 14px;
    color: #bd83b8
}

.tr-inline-loader[hidden] {
    display: none
}

.tr-inline-loader>span {
    width: 24px;
    height: 24px;
    border: 2px solid #ddd5e4;
    border-top-color: #bd83b8;
    border-radius: 50%;
    animation: spin .7s linear infinite
}

.tr-inline-loader strong,
.tr-inline-loader small {
    display: block
}

.tr-inline-loader small {
    color: #817588
}

.tr-help h2 {
    font-size: 1.45rem;
    margin: 11px 0
}

.tr-help>p {
    color: #786f7f;
    font-size: .78rem
}

.tr-help>a {
    color: #bd83b8;
    font-weight: 800;
    font-size: .75rem
}

.tr-help>div {
    display: flex;
    gap: 10px;
    border-top: 1px solid #e8e2ea;
    margin-top: 22px;
    padding-top: 17px
}

.tr-help svg {
    width: 22px;
    fill: none;
    stroke: #bd83b8
}

.tr-help strong,
.tr-help small {
    display: block;
    font-size: .68rem
}

.tr-help small {
    color: #827788
}

.tr-result-slot {
    margin-top: 28px
}

.td-dashboard {
    background: #fff;
    border: 1px solid #e3dce7;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(32, 22, 48, .1)
}

.td-head {
    background: #000000;
    color: #fff;
    padding: 27px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.td-head>div:first-child>span,
.td-head small {
    display: block;
    color: #bcb2c6;
    font-size: .67rem
}

.td-head h2 {
    font-size: 1.55rem;
    letter-spacing: .08em;
    margin: 4px 0
}

.td-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .1);
    padding: 9px 13px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800
}

.td-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d7ae61;
    box-shadow: 0 0 0 5px rgba(215, 174, 97, .12)
}

.td-approved .td-status i {
    background: #64c8aa
}

.td-rejected .td-status i {
    background: #ec718d
}

.td-body {
    padding: 28px;
    display: grid;
    gap: 19px
}

.td-overview,
.td-journey,
.td-documents {
    border: 1px solid #e7e1e9;
    border-radius: 17px;
    padding: 22px
}

.td-section-title {
    display: flex;
    gap: 12px
}

.td-section-title>span {
    font-size: .65rem;
    color: #bd80b8;
    font-weight: 900
}

.td-section-title h3 {
    font-size: 1.1rem;
    margin: 0
}

.td-section-title p {
    font-size: .68rem;
    color: #837888;
    margin: 2px 0
}

.td-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px
}

.td-metrics article {
    background: #f8f5f9;
    border-radius: 12px;
    padding: 16px
}

.td-metrics span {
    display: block;
    color: #817688;
    font-size: .66rem
}

.td-metrics strong {
    display: block;
    font: 800 1.05rem Manrope;
    margin-top: 5px
}

.td-progress {
    height: 6px;
    background: #e6e0e9;
    border-radius: 99px;
    overflow: hidden;
    margin: 18px 0
}

.td-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #bd83b8, #bd80b8);
    border-radius: inherit
}

.td-journey ol {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    padding: 0;
    margin: 0
}

.td-journey li {
    padding: 13px;
    border-top: 2px solid #e1dae5
}

.td-journey li>i {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #eee9f1;
    color: #8a7e90;
    display: grid;
    place-items: center;
    font-size: .68rem;
    font-style: normal;
    margin-top: -26px;
    border: 4px solid #fff
}

.td-journey li.done>i,
.td-journey li.active>i {
    background: #bd83b8;
    color: #fff
}

.td-journey li.rejected>i {
    background: #bd2548;
    color: #fff
}

.td-journey strong,
.td-journey small {
    display: block;
    font-size: .68rem
}

.td-journey small {
    color: #817688
}

.td-message {
    display: flex;
    gap: 14px;
    padding: 19px;
    background: #fff8e8;
    border: 1px solid #f0dfb8;
    border-radius: 15px
}

.td-message.positive {
    background: #edf8f4;
    border-color: #cce8de
}

.td-message.negative {
    background: #fff1f4;
    border-color: #f0ccd5
}

.td-message-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 auto
}

.td-message h3 {
    font-size: .9rem;
    margin: 0
}

.td-message p {
    font-size: .72rem;
    color: #776d7d;
    margin: 4px 0
}

.td-documents>a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    background: #f8f5f9;
    border-radius: 12px;
    margin-top: 10px
}

.td-documents>a>span {
    background: #2c2144;
    color: #fff;
    border-radius: 7px;
    padding: 6px;
    font-size: .6rem
}

.td-documents>a>div {
    display: grid
}

.td-documents>a small {
    color: #817688
}

.td-documents>a>b {
    margin-left: auto
}

.td-actions {
    display: flex;
    justify-content: space-between
}

.td-actions a {
    font-size: .72rem;
    font-weight: 800;
    color: #bd83b8
}

@media(max-width:800px) {
    .tr-search-layout {
        grid-template-columns: 1fr
    }

    .td-journey ol {
        grid-template-columns: 1fr
    }

    .td-journey li {
        border-top: 0;
        border-left: 2px solid #e1dae5
    }

    .td-journey li>i {
        margin: 0 8px 0 -27px;
        display: inline-grid
    }

    .sc-next {
        grid-template-columns: 1fr
    }

    .sc-next article {
        border-right: 0;
        border-bottom: 1px solid #e5dee8
    }
}

@media(max-width:560px) {
    .sc-card {
        padding: 30px 20px
    }

    .sc-reference>div,
    .sc-actions,
    .tr-input-row,
    .td-head,
    .td-actions {
        display: grid
    }

    .sc-reference button {
        justify-self: center
    }

    .tr-container {
        width: min(calc(100% - 28px), 1120px)
    }

    .tr-hero {
        padding: 55px 0 105px
    }

    .tr-search-card,
    .tr-help,
    .td-body {
        padding: 21px
    }

    .td-metrics {
        grid-template-columns: 1fr
    }

    .td-status {
        margin-top: 14px;
        width: max-content
    }
}

/* Success confirmation — premium split layout */
.sc-shell{position:relative;width:min(100%,1120px);background:rgba(255,253,249,.97);border:1px solid #e3dce7;border-radius:32px;padding:18px;box-shadow:0 32px 100px rgba(32,22,48,.14);display:grid;grid-template-columns:minmax(0,.82fr) minmax(480px,1.18fr);gap:18px}
.sc-intro{border-radius:23px;padding:clamp(34px,5vw,62px);background:radial-gradient(circle at 0 100%,rgba(189,131,184,.23),transparent 38%),linear-gradient(145deg,#171021,#332644);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.sc-intro .sc-check{margin:0 0 28px}
.sc-intro h1{color:#fff;font-size:clamp(2.35rem,4.5vw,4.15rem);line-height:1.02;margin:15px 0 20px;max-width:620px}
.sc-intro>p{color:#d8d0df;max-width:520px;margin:0;font-size:.9rem}
.sc-confirmed{display:flex;align-items:center;gap:10px;margin-top:34px;color:#efeaf2;font-size:.72rem}
.sc-confirmed span{width:9px;height:9px;border-radius:50%;background:#77caae;box-shadow:0 0 0 6px rgba(119,202,174,.12)}
.sc-panel{padding:clamp(25px,4vw,46px);display:flex;flex-direction:column;justify-content:center}
.sc-reference-head{display:flex;align-items:center;justify-content:space-between;gap:15px}
.sc-reference-head i{color:#e6d3ad;border:1px solid rgba(230,211,173,.25);border-radius:999px;padding:6px 10px;font-size:.61rem;font-style:normal}
.sc-reference-value{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:12px 0 8px}
.sc-reference-value strong{min-width:0;overflow-wrap:anywhere}
.sc-reference button{cursor:pointer;transition:.2s ease}
.sc-reference button:hover,.sc-reference button.is-copied{background:rgba(255,255,255,.17);transform:translateY(-1px)}
.sc-next-head{display:flex;gap:14px;align-items:flex-start;margin:30px 0 10px}
.sc-next-head>span{color:#bd83b8;font-size:.66rem;font-weight:900;padding-top:5px}
.sc-next-head h2{margin:0;font-size:1.45rem}
.sc-next-head p{color:#7c7283;font-size:.68rem;margin:3px 0}
.sc-shell .sc-next{margin:0 0 28px}
.sc-shell .sc-next article{padding:15px 13px}
.sc-shell .sc-security{margin:23px 0 0}
.sc-security span{display:grid;text-align:left;line-height:1.45}
.sc-security strong{color:#403548;font-size:.68rem}
@media(max-width:800px){.sc-shell{grid-template-columns:1fr}.sc-intro{min-height:420px}}
@media(max-width:560px){.sc-page{padding:45px 14px}.sc-shell{padding:9px;border-radius:24px}.sc-intro,.sc-panel{padding:30px 21px}.sc-intro{min-height:auto}.sc-reference-value{align-items:flex-start;flex-direction:column}.sc-reference-value button{align-self:flex-start}}
