/* ==========================================================================
   REESPONDER UI REFERENCE — VARIANT 1
   05 / PAGES + STATES
   ========================================================================== */

/* ==========================================================================
   LOGIN / REGISTER
   ========================================================================== */

.ui-auth-divider {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        22px
        0;

    color:
        var(--ui-text-faint);

    font-size:
        var(--ui-size-11);
}

.ui-auth-divider::before,
.ui-auth-divider::after {
    content:
        "";

    height:
        1px;

    flex:
        1;

    background:
        var(--ui-border);
}

.ui-auth-foot {
    margin-top:
        24px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-12);

    text-align:
        center;
}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.ui-dashboard-welcome {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        22px;

    border:
        1px
        solid
        var(--ui-border);

    border-radius:
        var(--ui-radius-md);

    background:
        var(--ui-surface);
}

.ui-dashboard-welcome h2 {
    margin-bottom:
        6px;
}

.ui-dashboard-welcome p {
    max-width:
        620px;

    margin:
        0;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-13);
}

.ui-dashboard-checklist {
    display:
        flex;

    flex-direction:
        column;
}

.ui-dashboard-task {
    display:
        grid;

    grid-template-columns:
        24px
        minmax(0, 1fr)
        auto;

    gap:
        12px;

    align-items:
        center;

    padding:
        14px
        0;

    border-bottom:
        1px
        solid
        var(--ui-border-soft);
}

.ui-dashboard-task:last-child {
    border-bottom:
        0;
}

.ui-dashboard-task-check {
    display:
        grid;

    width:
        22px;

    height:
        22px;

    place-items:
        center;

    border:
        1px
        solid
        var(--ui-border);

    border-radius:
        50%;

    color:
        var(--ui-text-muted);

    font-size:
        10px;
}

.ui-dashboard-task-complete .ui-dashboard-task-check {
    border-color:
        var(--ui-success);

    background:
        var(--ui-success);

    color:
        #ffffff;
}

.ui-dashboard-task-title {
    color:
        var(--ui-text);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-medium);
}

.ui-dashboard-task-copy {
    margin-top:
        2px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-11);
}

/* ==========================================================================
   INSTALLATION
   ========================================================================== */

.ui-install-step {
    display:
        grid;

    grid-template-columns:
        34px
        minmax(0, 1fr);

    gap:
        14px;

    padding:
        20px
        0;

    border-bottom:
        1px
        solid
        var(--ui-border);
}

.ui-install-step:last-child {
    border-bottom:
        0;
}

.ui-install-number {
    display:
        grid;

    width:
        30px;

    height:
        30px;

    place-items:
        center;

    border:
        1px
        solid
        var(--ui-border);

    border-radius:
        50%;

    background:
        var(--ui-surface-muted);

    color:
        var(--ui-text-soft);

    font-size:
        var(--ui-size-11);

    font-weight:
        var(--ui-weight-semibold);
}

.ui-install-step h3 {
    margin-bottom:
        5px;
}

.ui-install-step p {
    max-width:
        650px;

    margin-bottom:
        12px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-12);
}

/* ==========================================================================
   KNOWLEDGE BASE
   ========================================================================== */

.ui-source-list {
    display:
        flex;

    flex-direction:
        column;

    border:
        1px
        solid
        var(--ui-border);

    border-radius:
        var(--ui-radius-md);

    background:
        var(--ui-surface);
}

.ui-source-row {
    display:
        grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        auto;

    gap:
        14px;

    align-items:
        center;

    min-height:
        68px;

    padding:
        10px
        14px;

    border-bottom:
        1px
        solid
        var(--ui-border-soft);
}

.ui-source-row:last-child {
    border-bottom:
        0;
}

.ui-source-icon {
    display:
        grid;

    width:
        36px;

    height:
        36px;

    place-items:
        center;

    border:
        1px
        solid
        var(--ui-border);

    border-radius:
        var(--ui-radius-sm);

    background:
        var(--ui-surface-muted);

    color:
        var(--ui-text-soft);

    font-size:
        10px;

    font-weight:
        var(--ui-weight-bold);

    text-transform:
        uppercase;
}

.ui-source-title {
    color:
        var(--ui-text);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-medium);
}

.ui-source-meta {
    margin-top:
        3px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-11);
}

/* ==========================================================================
   BILLING
   ========================================================================== */

.ui-plan-summary {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        20px;

    align-items:
        center;
}

.ui-plan-name {
    color:
        var(--ui-text);

    font-size:
        var(--ui-size-18);

    font-weight:
        var(--ui-weight-semibold);
}

.ui-plan-price {
    margin-top:
        3px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-12);
}

.ui-invoice-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    font-size:
        var(--ui-size-11);

    font-weight:
        var(--ui-weight-semibold);
}

/* ==========================================================================
   API KEYS
   ========================================================================== */

.ui-secret {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        12px;

    align-items:
        center;

    padding:
        12px
        14px;

    border:
        1px
        solid
        var(--ui-border);

    border-radius:
        var(--ui-radius-sm);

    background:
        #f7f8f6;
}

.ui-secret-code {
    min-width:
        0;

    color:
        #343934;

    font-family:
        var(--ui-font-mono);

    font-size:
        var(--ui-size-12);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}

/* ==========================================================================
   TEAM
   ========================================================================== */

.ui-team-member {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        130px
        auto;

    gap:
        20px;

    align-items:
        center;

    padding:
        13px
        0;

    border-bottom:
        1px
        solid
        var(--ui-border-soft);
}

.ui-team-member:last-child {
    border-bottom:
        0;
}

/* ==========================================================================
   ONBOARDING
   ========================================================================== */

.ui-onboarding {
    width:
        min(
            100%,
            760px
        );

    margin:
        40px
        auto;

    border:
        1px
        solid
        var(--ui-border);

    border-radius:
        var(--ui-radius-lg);

    background:
        var(--ui-surface);
}

.ui-onboarding-head {
    padding:
        26px
        28px
        20px;

    border-bottom:
        1px
        solid
        var(--ui-border-soft);
}

.ui-onboarding-head h1 {
    margin-bottom:
        7px;

    font-size:
        var(--ui-size-24);
}

.ui-onboarding-head p {
    max-width:
        620px;

    margin:
        0;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-13);
}

.ui-onboarding-body {
    padding:
        28px;
}

.ui-onboarding-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        16px
        28px;

    border-top:
        1px
        solid
        var(--ui-border-soft);

    background:
        var(--ui-surface-muted);
}

/* ==========================================================================
   LOADING PAGE
   ========================================================================== */

.ui-loading-page {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        420px;

    color:
        var(--ui-text-muted);
}

.ui-spinner {
    width:
        24px;

    height:
        24px;

    margin-bottom:
        12px;

    border:
        2px
        solid
        var(--ui-border);

    border-top-color:
        var(--ui-accent);

    border-radius:
        50%;

    animation:
        ui-spin
        700ms
        linear
        infinite;
}

@keyframes ui-spin {
    to {
        transform:
            rotate(360deg);
    }
}

/* ==========================================================================
   ERROR PAGE
   ========================================================================== */

.ui-state-page {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    min-height:
        420px;

    max-width:
        600px;
}

.ui-state-code {
    margin-bottom:
        12px;

    color:
        var(--ui-text-faint);

    font-family:
        var(--ui-font-mono);

    font-size:
        var(--ui-size-12);
}

.ui-state-page h1 {
    margin-bottom:
        10px;

    font-size:
        var(--ui-size-28);
}

.ui-state-page p {
    margin-bottom:
        20px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-13);
}

/* ==========================================================================
   PERMISSION BLOCK
   ========================================================================== */

.ui-permission {
    padding:
        22px;

    border:
        1px
        solid
        var(--ui-warning-border);

    border-radius:
        var(--ui-radius-md);

    background:
        var(--ui-warning-soft);
}

.ui-permission h3 {
    margin-bottom:
        6px;
}

.ui-permission p {
    margin:
        0;

    color:
        #6f5a24;

    font-size:
        var(--ui-size-12);
}

/* ==========================================================================
   DESTRUCTIVE SETTINGS
   ========================================================================== */

.ui-danger-zone {
    border:
        1px
        solid
        var(--ui-danger-border);

    border-radius:
        var(--ui-radius-md);

    background:
        var(--ui-surface);
}

.ui-danger-zone-head {
    padding:
        18px
        20px;

    border-bottom:
        1px
        solid
        var(--ui-danger-border);

    background:
        var(--ui-danger-soft);
}

.ui-danger-zone-head h3 {
    margin:
        0;

    color:
        var(--ui-danger);
}

.ui-danger-zone-row {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        20px;

    align-items:
        center;

    padding:
        18px
        20px;

    border-bottom:
        1px
        solid
        var(--ui-border-soft);
}

.ui-danger-zone-row:last-child {
    border-bottom:
        0;
}

.ui-danger-zone-title {
    color:
        var(--ui-text);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-semibold);
}

.ui-danger-zone-copy {
    margin-top:
        4px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-12);
}

/* ==========================================================================
   DEMO SHOWCASE HELPERS
   ========================================================================== */

.ui-showcase {
    padding:
        42px
        0;
}

.ui-showcase-block {
    margin-bottom:
        52px;
}

.ui-showcase-label {
    margin-bottom:
        16px;

    color:
        var(--ui-text-faint);

    font-size:
        10px;

    font-weight:
        var(--ui-weight-bold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.ui-showcase-row {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        12px;
}

.ui-showcase-card {
    padding:
        20px;

    border:
        1px
        solid
        var(--ui-border);

    border-radius:
        var(--ui-radius-md);

    background:
        var(--ui-surface);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 700px) {
    .ui-dashboard-welcome {
        flex-direction:
            column;
    }

    .ui-plan-summary {
        grid-template-columns:
            1fr;
    }

    .ui-team-member {
        grid-template-columns:
            1fr;
    }

    .ui-onboarding {
        margin:
            16px
            auto;
    }

    .ui-onboarding-head,
    .ui-onboarding-body,
    .ui-onboarding-footer {
        padding-inline:
            18px;
    }

    .ui-onboarding-footer {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .ui-danger-zone-row {
        grid-template-columns:
            1fr;
    }
}