:root {
  --preysync-navy: #102a43;
  --preysync-blue: #246bfe;
  --preysync-sky: #eef5ff;
  --preysync-surface: #f5f7fb;
  --preysync-sidebar: 17rem;
}

body { background: var(--preysync-surface); color: #1d2939; }
a { text-underline-offset: .18em; }
.min-width-0 { min-width: 0; }
.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 2000; padding: .65rem 1rem; background: #fff; color: #000; border-radius: .4rem; }
.skip-link:focus { top: 1rem; }
.portal-sidebar { width: var(--preysync-sidebar); flex: 0 0 var(--preysync-sidebar); background: var(--preysync-navy); }
.portal-offcanvas { width: var(--preysync-sidebar) !important; background: var(--preysync-navy); color: #fff; }
.portal-offcanvas .offcanvas-header { background: #fff; color: var(--preysync-navy); }
.portal-sidebar .nav-link, .portal-offcanvas .nav-link { color: rgba(255,255,255,.78); padding: .72rem 1rem; }
.portal-sidebar .nav-link:hover, .portal-sidebar .nav-link:focus, .portal-offcanvas .nav-link:hover, .portal-offcanvas .nav-link:focus { color: #fff; background: rgba(255,255,255,.08); }
.portal-sidebar .nav-link.active, .portal-offcanvas .nav-link.active { color: #fff; background: var(--preysync-blue); }
.portal-shell { max-width: calc(100vw - var(--preysync-sidebar)); }
.portal-content { max-width: 96rem; margin-inline: auto; }
.portal-topbar { min-height: 4.5rem; }
.brand-mark { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .7rem; background: var(--preysync-blue); color: #fff; }
.brand-mark-lg { width: 3.25rem; height: 3.25rem; font-size: 1.3rem; }
.avatar, .account-avatar { display: inline-grid; place-items: center; background: #dbe9ff; color: #174ea6; font-weight: 700; border-radius: 50%; }
.avatar { width: 2rem; height: 2rem; }
.account-avatar { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
.eyebrow { color: var(--preysync-blue); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.metric-icon, .feature-icon, .download-icon, .device-icon, .empty-icon { display: inline-grid; place-items: center; border-radius: .8rem; }
.metric-icon, .feature-icon, .download-icon { width: 2.8rem; height: 2.8rem; font-size: 1.15rem; }
.feature-icon, .download-icon { color: var(--preysync-blue); background: var(--preysync-sky); }
.download-icon { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; }
.device-icon { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; background: var(--preysync-sky); color: var(--preysync-blue); }
.empty-icon { width: 4rem; height: 4rem; font-size: 1.5rem; background: var(--preysync-sky); color: var(--preysync-blue); }
.metric-value { font-size: clamp(1.6rem, 3vw, 2.15rem); }
.metric-label { font-size: 1.25rem; }
.portal-card { transition: transform .15s ease, box-shadow .15s ease; }
.portal-card:hover, .portal-card:focus-visible { transform: translateY(-2px); box-shadow: 0 .5rem 1.5rem rgba(16,42,67,.12) !important; }
.device-row { display: flex; align-items: center; gap: .75rem; }
.status-badge { display: inline-flex; align-items: center; gap: .4rem; }
.status-dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.detail-grid { display: grid; grid-template-columns: minmax(9rem, .8fr) minmax(0, 1.2fr); gap: 1rem 1.5rem; }
.detail-grid dt { color: #667085; font-weight: 500; }
.detail-grid dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.capacity-note { background: #edf8f2; color: #146c43; }
.table > :not(caption) > * > * { padding: 1rem 1.25rem; }
.login-page, .error-page { background: radial-gradient(circle at top right, #dceaff 0, transparent 38%), var(--preysync-surface); }
.login-card { width: min(100%, 62rem); }
.login-brand { min-height: 34rem; background: linear-gradient(145deg, #102a43, #174ea6 70%, #246bfe); }
.login-container { max-width: 86rem; }
.plan-card { border-top: .3rem solid #dbe9ff !important; }
.plan-card-featured { border-top-color: var(--preysync-blue) !important; }
.plan-price { color: var(--preysync-navy); font-size: 1.8rem; font-weight: 750; }
.plan-features li { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .65rem; }
.plan-features .bi { color: #198754; margin-top: .1rem; }
.plan-features .plan-feature-muted, .plan-features .plan-feature-muted .bi { color: #7b8794; }
.text-white-75 { color: rgba(255,255,255,.75); }
.error-code { display: block; color: #cad5e2; font-size: clamp(5rem, 15vw, 9rem); font-weight: 800; line-height: 1; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }

@media (max-width: 991.98px) {
  .portal-shell { max-width: 100vw; }
}

@media (max-width: 575.98px) {
  .portal-content { padding-inline: 1rem !important; }
  .detail-grid { grid-template-columns: 1fr; gap: .25rem; }
  .detail-grid dd { margin-bottom: .8rem; }
}