:root { color-scheme: light; --bg:#f4f6f3; --surface:#fff; --ink:#17211b; --muted:#667068; --line:#dfe5df; --brand:#24704a; --soft:#e5f2ea; --danger:#a13b32; --warn:#8a6200; --warn-bg:#fff8e1; --ok:#1a5c35; --ok-bg:#e5f2ea; --border-warning:#c89600; --surface-alt:#f8faf8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }

/* Topbar */
.topbar { min-height:56px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; background:var(--surface); border-bottom:1px solid var(--line); }
.topbar form { display:flex; align-items:center; gap:14px; }
.main-nav { display:flex; align-items:center; gap:24px; }
.main-nav a:not(.brand) { color:var(--muted); text-decoration:none; font-weight:600; font-size:.9rem; }
.main-nav a.active { color:var(--brand); }
.brand { font-weight:750; text-decoration:none; letter-spacing:-.02em; }

/* Layout */
.container { width:min(1200px,92vw); margin:38px auto; }
.heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:28px; }
.back-link { margin-bottom:12px; }
.back-link a { color:var(--muted); text-decoration:none; font-size:.88rem; }
.back-link a:hover { color:var(--brand); }

/* Typography */
h1 { margin:.1rem 0 0; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.08; letter-spacing:-.04em; }
h2 { margin:0 0 16px; font-size:.95rem; font-weight:700; }
.eyebrow { margin:0; color:var(--brand); font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
p { margin:.4rem 0; }

/* Pills and badges */
.pill { display:inline-block; padding:4px 10px; border-radius:999px; background:var(--soft); color:var(--brand); font-size:.75rem; font-weight:700; }
.pill-sm { font-size:.7rem; padding:3px 8px; }
.pill-ok { background:var(--ok-bg); color:var(--ok); }
.pill-error { background:#fde8e8; color:var(--danger); }
.pill-warning { background:var(--warn-bg); color:var(--warn); }
.pill-info { background:#e8f0fe; color:#1a56c4; }
tr.row-error td { background:#fff5f5; }
tr.row-skip td { opacity:.55; }
.btn-secondary { background:var(--soft); color:var(--brand); border:0; border-radius:9px; padding:10px 16px; font:inherit; font-size:.88rem; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; }
.btn-danger { background:var(--danger); color:#fff; }
.border-warning { border-color:var(--warn); }
.error-msg { color:var(--danger); font-size:.88rem; margin:.5rem 0 0; }
.badge { display:inline-block; padding:2px 8px; border-radius:6px; font-size:.72rem; font-weight:700; }
.badge-ok { background:var(--ok-bg); color:var(--ok); }
.badge-warn { background:var(--warn-bg); color:var(--warn); }
.badge-stale { margin-left:5px; background:#fee2e2; color:#991b1b; }

/* Status dot on system cards */
.status { padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:700; }
.status-healthy { background:var(--ok-bg); color:var(--ok); }
.status-unhealthy,.status-unreachable { background:#fde8e8; color:var(--danger); }
.status-unknown { background:var(--bg); color:var(--muted); border:1px solid var(--line); }

/* Sync run status */
.run-status { font-size:.78rem; font-weight:700; }
.run-succeeded { color:var(--ok); }
.run-failed { color:var(--danger); }
.run-running { color:var(--warn); }
.run-partial { color:var(--warn); }

/* Cards */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:0 4px 18px rgba(27,44,33,.04); }
.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.card-head h2 { margin-bottom:0; }
.card-url { color:var(--muted); font-size:.8rem; overflow-wrap:anywhere; margin:6px 0 12px; }
.card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.card-footer small { color:var(--muted); }
.metrics { display:grid; grid-template-columns:auto 1fr; gap:1px 8px; margin:10px 0; }
.metrics strong { font-size:1.3rem; }
.metrics span { color:var(--muted); font-size:.82rem; align-self:center; }

/* Stat row in heading */
.stat-row { display:flex; gap:20px; }
.stat { color:var(--muted); font-size:.88rem; }
.stat strong { color:var(--ink); font-size:1.1rem; margin-right:4px; }

/* Sections */
.section { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; margin-top:20px; }
.section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.section-head h2 { margin-bottom:0; }
.table-section { margin-top:0; }

/* Detail grid (2-col on wide) */
.detail-grid { display:grid; gap:16px; }
@media (min-width:900px) { .detail-grid { grid-template-columns:300px 1fr; } }

/* Meta dl */
dl.meta { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; font-size:.88rem; }
dl.meta dt { color:var(--muted); font-weight:600; white-space:nowrap; }
dl.meta dd { margin:0; overflow-wrap:anywhere; }

/* Tables */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
th,td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); }
td { white-space:nowrap; }
td small { display:block; color:var(--muted); }
th { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }
.table-link { font-weight:700; text-decoration:none; }
.table-link:hover { color:var(--brand); }
.empty { text-align:center; color:var(--muted); padding:30px !important; white-space:normal !important; }

/* Filters */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:center; }
.filters input { flex:1; min-width:180px; }
.filters select,.filters input { border:1px solid var(--line); border-radius:9px; padding:9px 11px; background:var(--surface); color:var(--ink); font:inherit; font-size:.88rem; }

/* Forms / Auth */
.auth-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 30px rgba(27,44,33,.04); width:min(420px,100%); margin:10vh auto; padding:30px; }
.stack { display:grid; gap:18px; }
label { display:grid; gap:6px; color:var(--muted); font-weight:650; font-size:.88rem; }
input[type=text],input[type=password],input[type=email] { width:100%; border:1px solid var(--line); border-radius:9px; padding:11px 12px; background:var(--surface); color:var(--ink); font:inherit; }

/* Buttons */
button,a.btn { border:0; border-radius:9px; padding:10px 16px; background:var(--brand); color:#fff; font:inherit; font-size:.88rem; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; }
button.quiet { padding:7px 12px; background:var(--soft); color:var(--brand); }
button.small,a.btn.small { padding:5px 10px; font-size:.78rem; }
.btn-link { color:var(--brand); font-size:.85rem; font-weight:700; text-decoration:none; }
.btn-link:hover { text-decoration:underline; }

/* Pagination */
.pagination { display:flex; justify-content:center; gap:18px; margin:22px; }
.pagination a { color:var(--brand); font-weight:700; text-decoration:none; }

/* Misc */
.user { color:var(--muted); font-size:.88rem; }
.muted { color:var(--muted); }
.error,.errorlist { color:var(--danger); }
.errorlist { margin:4px 0 0; padding:0; list-style:none; font-weight:500; font-size:.85rem; }
code { padding:2px 5px; background:var(--bg); border-radius:5px; font-size:.85em; }
.otp-form { margin-top:20px; }
.setup-uri { display:block; margin-top:10px; padding:10px; overflow-wrap:anywhere; white-space:normal; font-size:.8rem; }

/* Action card (invoice status change) */
.action-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px; max-width:600px; }
textarea { width:100%; border:1px solid var(--line); border-radius:9px; padding:11px 12px; background:var(--surface); color:var(--ink); font:inherit; resize:vertical; }
select { border:1px solid var(--line); border-radius:9px; padding:9px 11px; background:var(--surface); color:var(--ink); font:inherit; width:100%; }
label select,label textarea,label input[type=date] { margin-top:4px; }
input[type=date] { border:1px solid var(--line); border-radius:9px; padding:9px 11px; background:var(--surface); color:var(--ink); font:inherit; }

/* Rule cards (pricing detail) */
.rule-card { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:12px; }
.rule-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px; }
.rule-head strong { font-size:.95rem; }
dl.meta-compact { grid-template-columns:auto 1fr; gap:4px 14px; font-size:.85rem; }
.tier-table { margin-top:14px; width:auto; }
.tier-table th,.tier-table td { padding:6px 12px; font-size:.82rem; }
.notes-block { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:16px; }
.notes-block p.eyebrow { margin-bottom:6px; }

/* Dark mode */
@media (prefers-color-scheme:dark) {
  :root { color-scheme:dark; --bg:#111713; --surface:#18201b; --ink:#edf4ef; --muted:#a7b1aa; --line:#303b33; --brand:#70d29b; --soft:#203d2d; --ok:#70d29b; --ok-bg:#1a3326; --warn:#f5c842; --warn-bg:#2a2100; --border-warning:#f5c842; --surface-alt:#1e2820; }
  .status-healthy { background:var(--ok-bg); color:var(--ok); }
  .badge-ok { background:var(--ok-bg); color:var(--ok); }
  .badge-warn { background:var(--warn-bg); color:var(--warn); }
}

/* Mobile */
@media (max-width:700px) {
  .container { margin:20px auto; }
  .heading { flex-direction:column; gap:8px; }
  .stat-row { gap:12px; }
  .user { display:none; }
  .main-nav { gap:14px; }
  .filters { flex-direction:column; }
  .filters input,.filters select { width:100%; }
  .detail-grid { grid-template-columns:1fr; }
}