.changes-view { padding: max(20px, env(safe-area-inset-top)) 18px 28px; }
.changes-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.changes-header h1 { margin: 0; text-align: center; font-size: 22px; }
.changes-retention { margin: 18px 4px 12px; color: var(--muted); font-size: 13px; }
.changes-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 4px; border: 1px solid var(--ice-line); border-radius: 18px; background: var(--ice-soft); overflow: hidden; }
.changes-tabs button { min-width: 0; padding: 10px 4px; border: 0; border-radius: 14px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
.changes-tabs button.is-active { color: var(--ink); background: var(--white); box-shadow: var(--shadow); }
.changes-content { display: grid; gap: 12px; padding-top: 16px; }
.change-card { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 16px; border: 1px solid var(--ice-line); border-radius: 22px; background: var(--white); box-shadow: var(--shadow); }
.change-card__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: var(--cyan-deep); background: var(--cyan-pale); font-size: 20px; }
.change-card time, .change-card small { color: var(--muted); font-size: 11px; }
.change-card h2 { margin: 3px 0 4px; font-size: 16px; }
.change-card p { margin: 0 0 5px; color: var(--ink-soft); line-height: 1.45; }
.changes-empty { padding: 42px 22px; text-align: center; border: 1px solid var(--ice-line); border-radius: 24px; background: var(--white); }
.changes-empty > span { display: grid; width: 52px; height: 52px; margin: 0 auto 12px; place-items: center; border-radius: 18px; color: var(--cyan-deep); background: var(--cyan-pale); font-size: 24px; }
.changes-empty h2 { margin: 0 0 8px; font-size: 18px; }
.changes-empty p { margin: 0; color: var(--muted); line-height: 1.5; }
.changes-loading { height: 130px; border-radius: 24px; background: linear-gradient(90deg, var(--ice-soft), var(--white), var(--ice-soft)); background-size: 200% 100%; animation: changes-loading 1.2s infinite linear; }
@keyframes changes-loading { to { background-position: -200% 0; } }