.app-branding {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto 36px;

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

}

.app-branding-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 32px;

    width: 100%;

    min-height: 76px;

    padding: 8px 0 14px;

}

.app-brand-home {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 0;

    background: transparent;

    border: none;

    color: inherit;

    font-family: inherit;

    text-align: left;

    cursor: pointer;

}

.app-brand-mark {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    background:
        linear-gradient(135deg,
            var(--accent-hover),
            var(--accent),
            var(--accent-strong));

    border-radius: 13px;

    color: var(--text-primary);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: -.02em;

    box-shadow: var(--shadow-sm);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

.app-brand-home:hover .app-brand-mark {

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

}

.app-brand-copy {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.app-brand-name {

    color: var(--text-primary);

    font-size: 20px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.025em;

}

.app-brand-tagline {

    color: var(--text-muted);

    font-size: 10px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .25em;

    text-transform: uppercase;

}

.app-header-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

}

.app-header-action {

    min-height: 38px;

    padding: 0 14px;

    background: transparent;

    border: none;

    border-radius: 999px;

    color: var(--text-muted);

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease;

}

.app-header-action:not(:disabled):hover {

    background: var(--bg-elevated);

    color: var(--text-primary);

}

.app-header-action:disabled {

    cursor: default;

    opacity: .48;

}

.app-account-button {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 40px;

    padding: 4px 12px 4px 5px;

    background: var(--bg-surface);

    border: none;

    border-radius: 999px;

    color: var(--text-secondary);

    font-family: inherit;

    cursor: default;

    opacity: .62;

}

.app-account-avatar {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    background: var(--accent-surface);

    border-radius: 50%;

    color: var(--accent-hover);

    font-size: 12px;

    font-weight: 700;

}

.app-account-label {

    font-size: 12px;

    font-weight: 600;

}


.dashboard,
.survey-page,
.decision-detail-page {

    padding-top: 24px;

}

.app-page {

    min-height: 100vh;

    padding: 24px 40px 40px;

}

@media (max-width: 700px) {

    .app-page {

        padding: 18px 18px 32px;

    }

    .app-branding-inner {

        min-height: 68px;

        gap: 16px;

    }

    .app-brand-mark {

        width: 38px;

        height: 38px;

        border-radius: 11px;

    }

    .app-brand-name {

        font-size: 18px;

    }

    .app-header-action {

        display: none;

    }

    .app-account-label {

        display: none;

    }

    .app-account-button {

        padding-right: 5px;

    }

}