:root { --bottom-nav-height: 4rem; }
.app-shell { width: min(100%, 48rem); min-height: 100vh; margin-inline: auto; padding: 1rem 1rem calc(var(--bottom-nav-height) + 1rem + env(safe-area-inset-bottom)); }
:where(main, .page-container):not(.app-shell) { padding-bottom: calc(var(--bottom-nav-height) + 1rem + env(safe-area-inset-bottom)); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 0 1.25rem; }
.card { padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .65rem 1rem; border: 1px solid transparent; border-radius: .75rem; cursor: pointer; font-weight: 600; text-decoration: none; }
.button:disabled { cursor: not-allowed; opacity: .55; }
.button-primary { color: #fff; background: var(--color-primary); }
.button-primary:hover { background: var(--color-primary-dark); }
.button-secondary { color: var(--color-primary-dark); border-color: var(--color-border); background: var(--color-surface); }
.status-badge { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .15rem .6rem; border-radius: 999px; font-size: .875rem; font-weight: 600; }
.status-success { color: var(--color-success); background: #e7f6ec; }
.status-warning { color: var(--color-warning); background: #fff3d6; }
.status-muted { color: var(--color-muted); background: #edf0ee; }
.state { display: grid; justify-items: center; gap: .75rem; padding: 2rem 1rem; text-align: center; }
.state p { margin: 0; color: var(--color-muted); }
.state-error { color: var(--color-danger); }
.state-loading::before { width: 2rem; height: 2rem; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin .8s linear infinite; content: ""; }
.skeleton { border-radius: .5rem; background: linear-gradient(90deg, #e8ece9 25%, #f5f7f5 50%, #e8ece9 75%); background-size: 200% 100%; animation: skeleton 1.4s ease infinite; }
.bottom-navigation { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); padding: .35rem max(.5rem, env(safe-area-inset-right)) calc(.35rem + env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); border-top: 1px solid var(--color-border); background: rgb(255 255 255 / 96%); box-shadow: 0 -4px 16px rgb(29 41 34 / 8%); }
.bottom-navigation__item { display: grid; min-height: 44px; place-items: center; padding: .35rem; border-radius: .65rem; color: var(--color-muted); text-align: center; text-decoration: none; }
.bottom-navigation__item[aria-current="page"] { color: var(--color-primary-dark); background: #e9f4ed; font-weight: 600; }
.bottom-navigation__item--disabled { cursor: not-allowed; opacity: .5; }
.toast { position: fixed; z-index: 20; right: 1rem; bottom: calc(var(--bottom-nav-height) + 1rem + env(safe-area-inset-bottom)); left: 1rem; width: fit-content; max-width: min(30rem, calc(100% - 2rem)); margin-inline: auto; padding: .75rem 1rem; border-radius: .75rem; color: #fff; background: var(--color-text); box-shadow: var(--shadow); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes skeleton { to { background-position-x: -200%; } }
@media (min-width: 48rem) { .bottom-navigation { right: 50%; left: auto; width: min(100%, 48rem); transform: translateX(50%); } }