/* Soundbyte Rights portal. Same look as the Vandelay finance portal:
   signed-out screens = its sign-in pages (auth.css): circuit-board video (login-bg.mp4, copied from
   VANDELAY-FIN/public; still login-bg.jpg when motion is reduced), dim + vignette, white Space Grotesk title,
   cyan tagline, cyan outlined inputs and buttons;
   signed-in screens = its dashboard (style.css): header bar, cards, KPI row, ledger tables, badges.
   Fonts are self-hosted (@fontsource/space-grotesk, served at /static/fonts). No scripts. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }

:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", sans-serif; }

/* ---------- signed out (finance auth.css) ---------- */
.auth-page { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 3rem 1.5rem; overflow-x: hidden; background: #000; color: #fff; }
.auth-layer { position: fixed; inset: 0; pointer-events: none; }
.auth-bg { overflow: hidden; background: #000 url("/static/login-bg.jpg") center / cover no-repeat; }
.auth-bg video { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .auth-bg video { display: none; } }
.auth-dim { background: rgba(0, 0, 0, 0.25); }
.auth-vignette { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.65) 100%); }
.auth-top { inset: 0 0 auto 0; height: 4rem; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent); }
.auth-bottom { inset: auto 0 0 0; height: 4rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); }
.auth-head { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.auth-title { margin: 0; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 2.25rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1; color: #fff; }
@media (min-width: 768px) { .auth-title { font-size: 3rem; } }
.auth-tagline { margin: 0; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; color: #00d4ff; }
.auth-body { position: relative; z-index: 10; width: 100%; max-width: 24rem; }

.auth-page .card { display: flex; flex-direction: column; gap: 0.75rem; background: none; border: none; padding: 0; }
.auth-body h1 { margin: 0; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 1.1rem; font-weight: 500; text-align: center; letter-spacing: 0.02em; }
.auth-body h2 { margin: 0.75rem 0 0; font-size: 0.95rem; font-weight: 600; text-align: center; }
.auth-body p { margin: 0; font-size: 0.85rem; text-align: center; opacity: 0.85; }
.auth-page .form { display: flex; flex-direction: column; gap: 0.75rem; }
.auth-page label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #00d4ff; opacity: 0.85; margin-bottom: -0.4rem; }
.auth-page input { width: 100%; background: rgba(0, 212, 255, 0.25); border: 2px solid #00d4ff; border-radius: 12px; color: #fff; letter-spacing: 1px; font-weight: 600; font-size: 0.875rem; padding: 14px 20px; text-align: center; font-family: inherit; outline: none; }
.auth-page input:focus { background: rgba(0, 212, 255, 0.35); }
.auth-page button.primary, .auth-page .btn-primary { width: 100%; background: rgba(0, 212, 255, 0.25); border: 2px solid #00d4ff; border-radius: 12px; color: #00d4ff; letter-spacing: 1px; font-weight: 600; font-size: 0.875rem; padding: 16px 24px; cursor: pointer; font-family: inherit; margin-top: 0.25rem; transition: background 0.3s ease; }
.auth-page button.primary:hover { background: rgba(0, 212, 255, 0.35); }
.auth-page .hint { font-size: 0.75rem; opacity: 0.7; }
.auth-page .aside a, .auth-page a { color: #00d4ff; }
.auth-page .notice.error { color: #ff6b6b; opacity: 1; }
.auth-page .notice.ok { color: #00d4ff; opacity: 1; }
.auth-page .qr { align-self: center; background: #fff; padding: 0.5rem; border-radius: 12px; }
.auth-page .secret { font-family: ui-monospace, Consolas, monospace; color: #00d4ff; word-break: break-all; }

/* ---------- signed in (finance style.css) ---------- */
.app { background: #f7f7f8; color: #1a1a1a; }
@media (prefers-color-scheme: dark) { .app { background: #16171a; color: #eee; } }
.app a { color: #4f46e5; }
@media (prefers-color-scheme: dark) { .app a { color: #a5b4fc; } }

.top { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid #0002; }
.top .brand { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 1.1rem; font-weight: 600; margin: 0; flex: 1; }
.top form { margin: 0; }
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem 1.25rem; border-bottom: 1px solid #0001; }
.nav a { padding: 0.35rem 0.7rem; border-radius: 6px; text-decoration: none; color: inherit; opacity: 0.7; font-size: 0.9rem; }
.nav a:hover { opacity: 1; background: #0000000a; }
.nav a[aria-current="page"] { opacity: 1; background: #4f46e51a; color: #4f46e5; font-weight: 600; }
@media (prefers-color-scheme: dark) { .nav a:hover { background: #ffffff0d; } .nav a[aria-current="page"] { background: #6366f133; color: #c7d2fe; } }

.main { max-width: 1080px; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.foot { text-align: center; padding: 1.5rem; }

.page-head h1 { margin: 0; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 1.5rem; font-weight: 600; }
.page-head p { margin: 0.25rem 0 0; }
.links { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9rem; }
.scope-bar { margin: 0; padding: 0.6rem 0.9rem; border-radius: 8px; background: #4f46e514; font-size: 0.85rem; }

.card { background: #fff; border: 1px solid #0001; border-radius: 10px; padding: 1.25rem; }
@media (prefers-color-scheme: dark) { .card { background: #1f2023; border-color: #fff1; } }
.app .card.narrow { max-width: 30rem; }
.card h1 { margin-top: 0; font-size: 1.15rem; }
.card h2 { margin-top: 0; font-size: 1rem; }
.card-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.card-header-row h2 { margin: 0; }
.header-actions { display: flex; align-items: center; gap: 0.75rem; margin: 0; }

.muted { opacity: 0.6; font-size: 0.85rem; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem; }
.nowrap { white-space: nowrap; }

.app select, .app input { padding: 0.45rem 0.55rem; border-radius: 6px; border: 1px solid #0003; background: transparent; color: inherit; font: inherit; font-size: 0.85rem; }
@media (prefers-color-scheme: dark) { .app select, .app input { border-color: #fff3; } .app option { background: #1f2023; } }
.form-grid { display: grid; gap: 0.6rem; max-width: 28rem; }
.form-grid label, .filters label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.app .form { display: grid; gap: 0.5rem; max-width: 28rem; }
.app .form label { font-size: 0.85rem; }
.app .hint { font-size: 0.8rem; opacity: 0.6; }

.btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 6px; border: none; cursor: pointer; font-size: 0.9rem; text-decoration: none; font-family: inherit; }
.btn-primary, .app button.primary { background: #4f46e5; color: #fff; width: fit-content; padding: 0.5rem 1rem; border-radius: 6px; border: none; cursor: pointer; font: inherit; font-size: 0.9rem; }
.btn-link { background: none; color: inherit; opacity: 0.6; text-decoration: underline; padding: 0; }
.btn-link.danger { color: #dc2626; opacity: 0.9; }
form.inline { display: inline; margin: 0; }

.notice { margin: 0; font-size: 0.85rem; }
.app .notice.error { color: #dc2626; }
.app .notice.ok { color: #16a34a; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
@media (max-width: 640px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi { display: flex; flex-direction: column; gap: 0.15rem; }
.kpi-label { font-size: 0.75rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.ledger-table-wrap { overflow-x: auto; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ledger-table th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.6; padding: 0.4rem 0.5rem; border-bottom: 1px solid #0002; }
.ledger-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid #0001; vertical-align: top; }
.ledger-table tbody tr:last-child td { border-bottom: none; }
.ledger-table tfoot th, .ledger-table tfoot td { border-top: 1px solid #0002; border-bottom: none; font-weight: 600; opacity: 1; font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.ledger-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .ledger-table th { border-color: #fff2; } .ledger-table td { border-color: #fff1; } }

.badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px; font-size: 0.7rem; }
.badge-on { background: #16a34a22; color: #16a34a; }
.badge-off { background: #dc262622; color: #dc2626; }
.badge-pending { background: #71717a22; color: #71717a; }

.pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }