/* Data Hub app — shared brand styles (Burlington pine / gold / cream). */
:root {
  --pine: #1a3a2a;
  --pine-2: #0f2519;
  --gold: #d4a853;
  --gold-2: #b8892f;
  --cream: #faf7f0;
  --paper: #ffffff;
  --ink: #1b241d;
  --ink-2: #4a5750;
  --muted: #7c8a80;
  --line: #e6e0d3;
  --ok: #2d6b3d;
  --danger: #b4472e;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20,35,27,.05), 0 8px 24px -12px rgba(20,35,27,.14);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; line-height: 1.5; }
a { color: var(--gold-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); color: var(--pine); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.tabular { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; padding: .7rem 1.4rem; font-weight: 700; font-size: .95rem; border: 1px solid transparent; cursor: pointer; transition: transform .12s, background .15s, border-color .15s; }
.btn:hover { text-decoration: none; }
.btn-primary { background: linear-gradient(to bottom, #e8c07a, var(--gold)); color: var(--pine-2); box-shadow: 0 6px 18px rgba(212,168,83,.35); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--pine); }
.btn-ghost:hover { border-color: var(--pine); }
.btn-dark { background: var(--pine); color: #fff; }
.btn-dark:hover { background: #24503a; transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

/* Forms */
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-size: .85rem; font-weight: 600; color: var(--pine); margin-bottom: .35rem; }
input, select { width: 100%; padding: .7rem .85rem; border: 1px solid #d3ccbc; border-radius: 10px; font: inherit; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,83,.25); }
.form-msg { min-height: 1.25rem; font-size: .9rem; margin: .25rem 0 0; }
.form-msg.err { color: var(--danger); }
.form-msg.ok { color: var(--ok); }

/* Auth card */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(212,168,83,.12), transparent 60%), var(--cream); }
.auth-card { width: 100%; max-width: 420px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 2rem; }
.brandmark { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--pine); }
.brandmark .diamond { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(to bottom, #e8c07a, var(--gold)); color: var(--pine-2); font-size: .8rem; }
.tabs { display: flex; gap: .25rem; background: var(--cream); border-radius: 999px; padding: .25rem; margin: 1.25rem 0; }
.tabs button { flex: 1; border: 0; background: transparent; padding: .55rem; border-radius: 999px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tabs button.active { background: #fff; color: var(--pine); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* App chrome */
.appbar { position: sticky; top: 0; z-index: 20; background: var(--pine-2); color: #fff; }
.appbar .row { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.appbar .brandmark { color: #fff; }
.appbar nav { display: flex; gap: 1.5rem; font-size: .92rem; }
.appbar nav a { color: rgba(255,255,255,.82); }
.appbar nav a:hover, .appbar nav a.active { color: #fff; }
.usermenu { display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.tier-badge { font: 700 .65rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 999px; background: var(--gold); color: var(--pine-2); }
.tier-badge.trial { background: rgba(255,255,255,.14); color: #fff; }

.page { padding: 2.5rem 0 4rem; }
.eyebrow { font: 700 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.lede { color: var(--ink-2); font-size: 1.05rem; margin-top: .5rem; }

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.kpi .v { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; color: var(--pine); }
.kpi .l { font-size: .82rem; color: var(--ink-2); margin-top: .25rem; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow); }
.grid-2 { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 3fr 2fr; align-items: start; } }

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: right; }
table.data thead th { font: 600 .66rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
table.data thead th:first-child, table.data tbody th { text-align: left; }
table.data tbody th { font-weight: 600; color: var(--pine); }
table.data td { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* Locked / Pro feature list */
.locklist { list-style: none; margin: .75rem 0 0; padding: 0; }
.locklist li { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.locklist li:last-child { border-bottom: 0; }
.locklist .lock { flex: none; }
.chip { display: inline-block; font: 700 .6rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: .28rem .5rem; border-radius: 999px; }
.chip.live { background: #e3f2e8; color: var(--ok); }
.chip.soon { background: #f1ece0; color: var(--muted); }
.muted { color: var(--muted); }
.stale-banner { background: #fdf6e3; border-bottom: 1px solid #eadfb8; color: #7a5b1a; font-size: .88rem; }
.stale-banner .container { padding-top: .6rem; padding-bottom: .6rem; }