:root {
  color-scheme: dark;
  --bg: #131217;
  --head: rgba(19, 18, 23, .9);
  --panel: #191820;
  --panel2: #1a1920;
  --line: #262430;
  --line-strong: #322f3d;
  --text: #eceaef;
  --text2: #9b95ab;
  --text3: #6b6580;
  --accent: #f2703a;
  --accent-fg: #1a0d07;
  --accent-text: #ffb08c;
  --accent-soft: rgba(242, 112, 58, .14);
  --accent-line: rgba(242, 112, 58, .34);
  --red-text: #e88b8b;
  --red-soft: rgba(217, 79, 79, .08);
  --red-line: #4a2b2b;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Archivo, "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --radius: 14px;
  background: var(--bg);
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 13.5px; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-text); }
h1 { margin: 0; color: var(--text); font-family: var(--display); font-size: 33px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }

.setup-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.setup-card { width: min(100%, 440px); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--accent); color: var(--accent-fg); font-size: 13px; letter-spacing: 0; }
.eyebrow { margin: 34px 0 10px; color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.login-title { margin-top: 34px; }
.intro { margin: 9px 0 24px; color: var(--text2); line-height: 1.6; text-wrap: pretty; }
label { display: block; margin-bottom: 6px; color: var(--text2); font-size: 13px; font-weight: 600; }
form label:not(:first-child) { margin-top: 14px; }
input, select { width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; outline: none; background: var(--panel2); color: var(--text); font: 13.5px var(--sans); }
input:focus, select:focus { border-color: var(--accent-line); }
.field-hint { float: right; color: var(--text3); font-weight: 400; }
button, .button { display: block; width: 100%; margin-top: 16px; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: var(--accent-fg); font: inherit; font-weight: 650; cursor: pointer; text-align: center; text-decoration: none; }
button:hover, .button:hover { background: var(--accent-text); border-color: var(--accent-text); color: var(--accent-fg); }
.notice { margin: 20px 0; padding: 12px 14px; border-radius: 8px; line-height: 1.5; }
.notice.error { border: 1px solid var(--red-line); background: var(--red-soft); color: var(--red-text); }
.notice.success { display: grid; gap: 4px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
.notice.success span { color: var(--text2); }

.portal-shell { min-height: 100vh; padding-bottom: 34px; background: var(--bg); }
.portal-nav { position: sticky; top: 0; z-index: 10; height: 56px; padding: 0 22px; border-bottom: 1px solid var(--line); background: var(--head); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-link { padding: 5px 11px; border: 1px solid transparent; border-radius: 6px; color: var(--text3); font-family: var(--mono); font-size: 11.5px; }
.nav-link:hover { border-color: var(--line-strong); color: var(--text); }
.nav-link.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.logout-form button { width: auto; margin: 0 0 0 4px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--text3); font-family: var(--mono); font-size: 11.5px; font-weight: 400; }
.logout-form button:hover { border-color: var(--line-strong); color: var(--text); }
.portal-card { width: min(calc(100% - 52px), 1080px); margin: 26px auto 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.provider-form-page { display: grid; grid-template-rows: auto 1fr; padding-bottom: 0; }
.provider-form-card { align-self: center; width: min(calc(100% - 52px), 560px); margin-block: 26px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.card-heading .button { width: auto; min-width: 92px; margin: 0; }
.audit-card { overflow: hidden; }
.audit-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 10px 14px; background: rgba(255, 255, 255, .03); color: var(--text3); font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
td { padding: 12px 14px; border-top: 1px solid var(--line); color: var(--text2); font-family: var(--mono); font-size: 11.5px; }
tbody tr:hover { background: var(--accent-soft); }
.connection-form { display: flex; flex-direction: column; gap: 16px; }
.connection-form label, .connection-form label:not(:first-child) { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.connection-form label[hidden] { display: none; }
.connection-form button { margin-top: 4px; }
.table-action { text-align: right; }
.table-button { width: auto; margin: 0; padding: 6px 10px; white-space: nowrap; }
.table-action .table-button { margin-left: auto; }
.outcome { color: var(--accent-text); }
.empty-state { padding: 32px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--text3); text-align: center; }
.next-page { width: fit-content; margin-left: auto; padding-inline: 18px; }

@media (max-width: 720px) {
  .portal-nav { height: auto; min-height: 56px; padding-block: 12px; align-items: flex-start; flex-direction: column; }
  .nav-actions { width: 100%; flex-wrap: wrap; }
  .logout-form { margin-left: auto; }
  .portal-card { width: calc(100% - 40px); margin-top: 20px; padding: 22px 20px; }
  .card-heading { align-items: stretch; flex-direction: column; }
  .card-heading .button { width: 100%; }
}