.mk--app .mk-screen {
    display: flex;
    color: var(--text-primary);
    background: var(--bg-card);
}

.app-side {
    width: 3em;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    padding: 1em 0.8em;
    border-right: 1px solid var(--border-subtle);
    background: var(--bg-deep);
}

.app-side-item {
    height: 1.4em;
    border-radius: 0.3em;
    background: rgba(255, 255, 255, 0.06);
}

.app-side-item--on {
    background: var(--accent);
    opacity: 0.8;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    padding: 1em;
    min-width: 0;
}

.app-top {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex: none;
    color: var(--text-primary);
}

.app-chip {
    width: 3.2em;
    height: 1.2em;
    border-radius: 2em;
    background: rgba(255, 255, 255, 0.06);
    flex: none;
}

.app-chip--on {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
}

.app-chip:nth-of-type(2) { margin-left: auto; }

.app-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5em;
}

.app-day {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 0.4em;
    border-radius: 0.35em;
    border: 1px solid var(--border-subtle);
    background:
        repeating-linear-gradient(180deg,
        transparent 0 2.2em,
        rgba(255, 255, 255, 0.05) 2.2em calc(2.2em + 1px)),
        rgba(255, 255, 255, 0.03);
}

.app-void { flex: 1.3 0 0; }
.app-void--2 { flex: 2.6 0 0; }

.app-slot {
    position: relative;
    flex: 1.8 0 0;
    border-radius: 0.25em;
    padding: 0.35em 0.4em;
    border-left: 2px solid;
    opacity: 0;
    transform: translateY(-0.5em) scale(0.94);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.app-slot::before {
    content: '';
    position: absolute;
    top: 0.4em;
    left: 0.5em;
    width: 62%;
    height: 0.3em;
    border-radius: 0.2em;
    background: currentColor;
    opacity: 0.75;
}

.app-slot--h2 { flex: 1.8 0 0; }
.app-slot--h3 { flex: 2.6 0 0; }
.app-slot--h4 { flex: 3.4 0 0; }

.app-slot--a {
    background: rgba(251, 191, 36, 0.2);
    border-left-color: rgba(251, 191, 36, 0.9);
    color: rgba(251, 191, 36, 0.9);
}

.app-slot--b {
    background: rgba(78, 205, 196, 0.18);
    border-left-color: rgba(78, 205, 196, 0.85);
    color: rgba(78, 205, 196, 0.85);
}

.app-slot--c {
    background: rgba(168, 85, 247, 0.18);
    border-left-color: rgba(168, 85, 247, 0.85);
    color: rgba(168, 85, 247, 0.85);
}

.rea.is-live .app-slot {
    opacity: 1;
    transform: none;
}

.app-day:nth-child(1) { --d: 0.35s; }
.app-day:nth-child(2) { --d: 0.5s; }
.app-day:nth-child(3) { --d: 0.65s; }
.app-day:nth-child(4) { --d: 0.8s; }
.app-day:nth-child(5) { --d: 0.95s; }

.rea.is-live .app-slot { transition-delay: var(--d, 0s); }
.rea.is-live .app-slot:nth-child(3) { transition-delay: calc(var(--d, 0s) + 0.1s); }
.rea.is-live .app-slot:nth-child(4) { transition-delay: calc(var(--d, 0s) + 0.14s); }
.rea.is-live .app-slot:nth-child(5) { transition-delay: calc(var(--d, 0s) + 0.2s); }

.app-kpis {
    display: flex;
    gap: 0.5em;
    flex: none;
}

.app-kpi {
    flex: 1;
    height: 1.8em;
    border-radius: 0.35em;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
}