:root {
    --bg: #07111f;
    --panel: #0c1929;
    --panel-soft: #101f32;
    --text: #eef6ff;
    --muted: #8ca0ba;
    --line: rgba(255,255,255,.08);
    --accent: #46a9ff;
    --accent2: #6dd5fa;
    --success: #36d399;
    --warning: #fbbd23;
    --danger: #f87272;
    --review: #fb923c;
    --radius: 20px;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(70,169,255,.13),
            transparent 34rem
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(109,213,250,.05),
            transparent 30rem
        ),
        var(--bg);
    font-family:
        Montserrat,
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a {
    color: inherit;
}

.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    border-bottom: 1px solid var(--line);
    background: rgba(7,17,31,.9);
    backdrop-filter: blur(18px);
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    color: #04101d;
    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );
    font-weight: 900;
    font-size: 20px;
}

.portal-brand strong,
.portal-brand small {
    display: block;
}

.portal-brand small {
    color: var(--muted);
}

.portal-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--muted);
    font-size: 12px;
}

.portal-nav a {
    text-decoration: none;
}

.portal-nav a:hover {
    color: var(--text);
}

.portal-nav form {
    margin: 0;
}

.portal-nav button {
    padding: 0;
    border: 0;
    color: var(--accent);
    background: none;
    cursor: pointer;
}

.portal-container {
    width: min(
        1380px,
        calc(100% - 40px)
    );
    margin: 0 auto;
    padding: 44px 0 80px;
}

.portal-container.narrow {
    width: min(
        900px,
        calc(100% - 32px)
    );
}

.hero,
.application-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.hero h1,
.application-hero h1,
.form-panel h1 {
    margin: 5px 0 8px;
    font-size: clamp(
        30px,
        4vw,
        46px
    );
    letter-spacing: -.04em;
}

.hero p,
.application-hero p,
.muted {
    margin: 0;
    color: var(--muted);
}

.eyebrow {
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
}

.primary,
.secondary {
    display: inline-flex;
    min-height: 45px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    text-decoration: none;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.primary {
    color: #03101d;
    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );
    box-shadow:
        0 12px 30px
        rgba(70,169,255,.14);
}

.secondary {
    color: var(--text);
    border: 1px solid var(--line);
    background: var(--panel-soft);
}

.wide {
    width: 100%;
}

.application-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );
    gap: 18px;
}

.application-card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: inherit;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );
    text-decoration: none;
    transition:
        transform .2s ease,
        border-color .2s ease;
}

.application-card:hover {
    transform: translateY(-3px);
    border-color:
        rgba(70,169,255,.25);
}

.card-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.card-head small {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 9px;
}

.card-head strong {
    font-size: 13px;
}

.application-card h3 {
    margin: 25px 0 18px;
}

.card-data,
.summary-grid,
.form-grid {
    display: grid;
    gap: 12px;
}

.card-data {
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
}

.card-data span,
.summary-grid span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 10px;
}

.progress {
    height: 5px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent2)
        );
}

.progress.large {
    height: 8px;
    margin-top: 12px;
}

.status {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.status.large {
    padding: 9px 14px;
    font-size: 11px;
}

.status.success,
.result-box.success {
    color: var(--success);
    border-color:
        rgba(54,211,153,.25);
}

.status.warning,
.result-box.warning {
    color: var(--warning);
    border-color:
        rgba(251,189,35,.25);
}

.status.danger,
.result-box.danger {
    color: var(--danger);
    border-color:
        rgba(248,114,114,.25);
}

.status.review,
.result-box.review {
    color: var(--review);
    border-color:
        rgba(251,146,60,.25);
}

.empty-state,
.form-panel,
.portal-panel,
.progress-panel,
.result-box {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(12,25,41,.82);
}

.empty-state {
    padding: 80px 30px;
    text-align: center;
}

.empty-state p {
    color: var(--muted);
}

.empty-icon {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    place-items: center;
    border-radius: 18px;
    color: var(--accent);
    background:
        rgba(70,169,255,.08);
    font-size: 36px;
}

.auth-shell {
    display: grid;
    min-height:
        calc(100vh - 130px);
    place-items: center;
    padding: 35px 20px;
}

.auth-card {
    width: min(
        450px,
        100%
    );
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(12,25,41,.92);
    box-shadow:
        0 30px 90px
        rgba(0,0,0,.3);
}

.auth-card h1 {
    margin-bottom: 8px;
}

.auth-card form {
    margin-top: 26px;
}

.auth-links {
    margin-top: 22px;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
}

.auth-links a {
    color: var(--accent);
}

label {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
    color: var(--muted);
    font-size: 12px;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text);
    background: #081422;
    font: inherit;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color:
        rgba(70,169,255,.6);
    box-shadow:
        0 0 0 3px
        rgba(70,169,255,.07);
}

textarea {
    resize: vertical;
}

.alert {
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 12px;
}

.alert.danger {
    color: var(--danger);
    border:
        1px solid
        rgba(248,114,114,.2);
    background:
        rgba(248,114,114,.06);
}

.form-panel {
    padding: 34px;
}

.form-section {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.form-section h2 {
    margin-top: 0;
    font-size: 18px;
}

.section-help {
    margin-top: -5px;
    color: var(--muted);
    font-size: 12px;
}

.form-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );
}

.back-link {
    margin-bottom: 22px;
}

.back-link a {
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
}

.progress-panel {
    margin-bottom: 20px;
    padding: 22px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
}

.steps {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );
    gap: 10px;
    margin-top: 18px;
    color: #64768d;
    font-size: 10px;
}

.steps .done {
    color: var(--accent2);
}

.content-grid {
    display: grid;
    grid-template-columns:
        minmax(0,2fr)
        minmax(280px,.75fr);
    gap: 20px;
}

.portal-panel {
    margin-bottom: 20px;
    overflow: hidden;
}

.panel-title {
    padding: 21px 23px;
    border-bottom: 1px solid var(--line);
}

.panel-title h2 {
    margin: 0;
    font-size: 17px;
}

.panel-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.summary-grid {
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );
    padding: 20px;
}

.summary-grid > div {
    padding: 14px;
    border-radius: 12px;
    background:
        rgba(255,255,255,.025);
}

.document-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

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

.document-row small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.doc-ok {
    color: var(--success);
    font-size: 11px;
    font-weight: 800;
}

.upload-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.upload-form input {
    max-width: 220px;
    padding: 8px;
    font-size: 10px;
}

.submit-panel {
    padding: 26px;
}

.submit-panel h2 {
    margin-top: 0;
}

.submit-panel p {
    color: var(--muted);
    line-height: 1.6;
}

.consent {
    display: flex;
    grid-template-columns: none;
    align-items: flex-start;
    gap: 10px;
}

.consent input {
    width: auto;
    margin-top: 3px;
}

.legal-link {
    font-size: 11px;
}

.legal-link a {
    color: var(--accent);
}

.result-box {
    padding: 28px;
}

.result-box h2 {
    margin: 7px 0 10px;
}

.result-box p {
    color: var(--muted);
    line-height: 1.6;
}

.data-list {
    margin: 0;
    padding: 8px 22px;
}

.data-list div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.data-list div:last-child {
    border-bottom: 0;
}

.data-list dt {
    color: var(--muted);
    font-size: 11px;
}

.data-list dd {
    margin: 0;
    text-align: right;
    font-size: 12px;
}

.timeline {
    padding: 20px 22px;
}

.timeline-item {
    display: grid;
    grid-template-columns:
        12px 1fr;
    gap: 10px;
    padding-bottom: 17px;
}

.timeline-item i {
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--accent);
}

.timeline-item strong {
    font-size: 11px;
}

.timeline-item small {
    display: block;
    margin-top: 3px;
    color: #61738b;
    font-size: 9px;
}

.legal p {
    color: var(--muted);
    line-height: 1.75;
}

.portal-footer {
    padding: 28px;
    color: #52667d;
    text-align: center;
    font-size: 10px;
}

@media (
    max-width: 1000px
) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .summary-grid {
        grid-template-columns:
            repeat(2,1fr);
    }
}

@media (
    max-width: 760px
) {
    .portal-topbar {
        padding: 0 16px;
    }

    .portal-nav > span {
        display: none;
    }

    .portal-nav a:first-child {
        display: none;
    }

    .portal-container {
        width:
            calc(100% - 24px);
        padding-top: 26px;
    }

    .hero,
    .application-hero {
        flex-direction: column;
    }

    .application-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .card-data {
        grid-template-columns:
            repeat(2,1fr);
    }

    .steps {
        grid-template-columns: 1fr;
    }

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

    .document-row {
        align-items: stretch;
        flex-direction: column;
    }

    .upload-form {
        align-items: stretch;
        flex-direction: column;
    }

    .upload-form input {
        max-width: none;
    }
}

/* =================================================
   BURZAM DaaS PORTAL 1.1
   Review Cycle + Document Security
   ================================================= */

.document-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.small-button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 10px;
}

.replace-form {
    margin-top: 12px;
}

.correction-panel {
    border-color:
        rgba(251,189,35,.24);
}

.correction-content {
    padding: 24px;
}

.correction-content > p {
    color: var(--muted);
    line-height: 1.6;
}

.review-message {
    margin-bottom: 20px;
    padding: 18px;
    border:
        1px solid
        rgba(251,189,35,.18);
    border-radius: 14px;
    background:
        rgba(251,189,35,.05);
}

.review-message strong {
    color: var(--warning);
    font-size: 12px;
}

.review-message p {
    margin-bottom: 0;
    color: var(--text);
    line-height: 1.6;
}

.timeline-reason {
    margin: 5px 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}


/* =================================================
   BURZAM DaaS PORTAL 1.1
   Review Cycle + Document Security
   ================================================= */

.document-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.small-button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 10px;
}

.replace-form {
    margin-top: 12px;
}

.correction-panel {
    border-color:
        rgba(251,189,35,.24);
}

.correction-content {
    padding: 24px;
}

.correction-content > p {
    color: var(--muted);
    line-height: 1.6;
}

.review-message {
    margin-bottom: 20px;
    padding: 18px;
    border:
        1px solid
        rgba(251,189,35,.18);
    border-radius: 14px;
    background:
        rgba(251,189,35,.05);
}

.review-message strong {
    color: var(--warning);
    font-size: 12px;
}

.review-message p {
    margin-bottom: 0;
    color: var(--text);
    line-height: 1.6;
}

.timeline-reason {
    margin: 5px 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}