/* Camada 4: primitivas visuais do SaaS educacional. */
.app-demo-banner {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3, 12px);
    width: min(calc(100% - 32px), var(--saas-content-width, var(--ui-content-max, 1440px)));
    margin: var(--ui-space-4, 16px) auto var(--ui-space-6, 24px);
    padding: 12px 16px;
    border: 1px solid #e8b93f;
    border-radius: var(--ui-radius-md, 12px);
    background: #fff8dc;
    color: #754b00;
    box-shadow: 0 4px 14px rgba(117, 75, 0, .07);
    font-size: .82rem;
    line-height: 1.5;
}

.app-demo-banner-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #c88708;
    color: #fff;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .06em;
    line-height: 1;
}

.app-demo-banner.is-expired {
    border-color: #e98d9b;
    background: #fff0f2;
    color: #922337;
}

body[data-theme="dark"] .app-demo-banner {
    border-color: rgba(245, 190, 55, .52);
    background: #2b2413;
    color: #fde68a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

body[data-theme="dark"] .app-demo-banner.is-expired {
    border-color: rgba(251, 113, 133, .55);
    background: #32171e;
    color: #fecdd3;
}

@media (max-width: 720px) {
    .app-demo-banner {
        align-items: flex-start;
        width: calc(100% - 24px);
        margin-block: 12px 18px;
        padding: 12px;
        gap: 8px;
        flex-direction: column;
    }
}

.ui-surface,
.ui-card {
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-xs);
}

.ui-surface { padding: clamp(var(--ui-space-4), 2vw, var(--ui-space-6)); }
.ui-card { padding: var(--ui-space-4); }

.ui-card-interactive {
    transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.ui-card-interactive:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-sm);
    transform: translateY(-1px);
}

.ui-kicker {
    margin: 0;
    color: var(--ui-brand);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}

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

.ui-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.625rem;
    padding-inline: .65rem;
    color: var(--ui-brand-strong);
    background: var(--ui-brand-soft);
    border-radius: var(--ui-radius-pill);
    font-size: .75rem;
    font-weight: 700;
}

.ui-empty {
    display: grid;
    place-items: center;
    min-height: 4rem;
    padding: var(--ui-space-4);
    color: var(--ui-text-muted);
    background: var(--ui-surface-subtle);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    text-align: center;
}

/* Ações globais do cabeçalho seguem os mesmos tokens em ambos os temas. */
.app-topbar-actions {
    align-items: center;
    gap: var(--ui-space-3);
}

.app-platform-return {
    border: 1px solid var(--ui-border);
    background: var(--ui-surface-subtle);
    color: var(--ui-text-muted);
    box-shadow: var(--ui-shadow-xs);
    transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast), background-color var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.app-platform-return span:first-child {
    background: var(--ui-brand-soft);
    color: var(--ui-brand-strong);
}

.app-platform-return:hover,
.app-platform-return:focus-visible {
    border-color: var(--ui-brand);
    background: var(--ui-surface-muted);
    color: var(--ui-brand-strong);
    box-shadow: var(--ui-shadow-focus);
    outline: none;
}

.app-asset-credit {
    display: block;
    margin-top: var(--ui-space-1);
    padding: .55rem .75rem .15rem;
    border-top: 1px solid var(--ui-border);
    color: var(--ui-text-soft);
    font-size: .68rem;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}

.app-asset-credit:hover,
.app-asset-credit:focus-visible {
    color: var(--ui-brand-strong);
    text-decoration: underline;
    outline: none;
}

.app-asset-credit-public {
    margin: var(--ui-space-3) 0 0;
    padding: 0;
    border-top: 0;
}

.app-asset-credit-public a {
    color: inherit;
}

.ui-skeleton {
    overflow: hidden;
    min-height: 1rem;
    background: var(--ui-surface-muted);
    border-radius: var(--ui-radius-sm);
    position: relative;
}

.ui-skeleton::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: translateX(-100%);
    animation: ui-skeleton 1.35s infinite;
}

@keyframes ui-skeleton { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    .ui-card-interactive:hover { transform: none; }
    .ui-skeleton::after { display: none; }
}