.button { display: inline-flex; min-height: 2.65rem; align-items: center; justify-content: center; gap: .45rem; padding: .68rem 1rem; border: 1px solid transparent; border-radius: .65rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.button:hover { transform: translateY(-1px); }
.button--primary { color: white; background: var(--sky-600); box-shadow: 0 7px 18px rgba(8, 126, 164, .2); }
.button--primary:hover { background: #076c8d; }
.button--secondary { color: var(--navy-900); background: white; border-color: var(--line); }
.button--quiet { color: #dce9f4; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.13); }
.button--danger { color: white; background: var(--danger); }
.button--full { width: 100%; }
.text-link { color: var(--sky-600); font-weight: 750; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.badge { display: inline-flex; align-items: center; min-height: 1.65rem; padding: .22rem .55rem; border-radius: 999px; font-size: .73rem; font-weight: 800; white-space: nowrap; }
.badge--neutral { color: #526272; background: #edf2f5; }
.badge--success { color: var(--success); background: #dff5eb; }
.badge--warning { color: var(--warning); background: #fff0cf; }
.badge--danger { color: var(--danger); background: #fde8ea; }
.badge--info { color: #086685; background: var(--sky-100); }

.metric-card { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 3px 12px rgba(16, 36, 62, .035); }
.metric-card__topline { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.metric-card__label { color: var(--ink-700); font-size: .82rem; font-weight: 750; }
.metric-card__value { display: block; margin-top: 1rem; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -.05em; }
.metric-card__detail { margin: .18rem 0 0; font-size: .82rem; }

.panel { min-width: 0; padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: 0 3px 12px rgba(16, 36, 62, .035); }
.panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel__heading h2 { margin: 0; }
.eyebrow { margin-bottom: .35rem; color: var(--sky-600); font-size: .72rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }

.table-wrap { max-width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th { padding: .75rem; color: var(--ink-500); font-size: .72rem; text-align: left; text-transform: uppercase; letter-spacing: .055em; border-bottom: 1px solid var(--line); }
td { padding: .9rem .75rem; border-bottom: 1px solid #eaf0f4; color: var(--ink-700); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fbfc; }

.flash { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid; border-radius: var(--radius-sm); background: white; }
.flash__icon { display: inline-grid; flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 50%; font-weight: 900; }
.flash--success { color: var(--success); border-color: #bce4d3; background: #f1fbf6; }
.flash--info { color: #086685; border-color: #b9e4ee; background: #f0fbfd; }
.flash--warning { color: var(--warning); border-color: #edd49b; background: #fff9ec; }
.flash--error { color: var(--danger); border-color: #efc1c6; background: #fff5f5; }

.state { display: flex; min-height: 14rem; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.state h2 { margin: .8rem 0 .25rem; }
.state p { max-width: 34rem; margin-bottom: 0; }
.state__symbol { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; color: var(--sky-600); background: var(--sky-100); font-size: 1.35rem; font-weight: 850; }
.state--error .state__symbol { color: var(--danger); background: #fde8ea; }
.state__spinner { width: 2.5rem; height: 2.5rem; border: 3px solid var(--line); border-top-color: var(--sky-600); border-radius: 50%; animation: spin .8s linear infinite; }
.state-action { text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.form-field { display: grid; gap: .38rem; }
.form-field label { font-size: .84rem; font-weight: 750; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 2.8rem; padding: .65rem .75rem; color: var(--ink-900); border: 1px solid #bdcad4; border-radius: .6rem; background: white; }
.form-field textarea { resize: vertical; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: #8da0ae; }
.form-field small { color: var(--ink-500); }
progress { width: 100%; height: .65rem; overflow: hidden; border: 0; border-radius: 999px; background: #e6edf2; accent-color: var(--sky-600); }
progress::-webkit-progress-bar { border-radius: 999px; background: #e6edf2; }
progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--sky-600), var(--sky-500)); }
progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--sky-600), var(--sky-500)); }