/* --- Components & Patterns (refined) --- */

/* Typography helpers */
.h1{ font-size:clamp(36px,5vw,54px); letter-spacing:-0.02em; line-height:1.06; font-weight:800; margin:0 0 var(--space-3); }
.h2{ font-size:clamp(24px,3vw,34px); letter-spacing:-0.01em; font-weight:800; margin:0 0 var(--space-2); }
.h3{ font-size:clamp(18px,2vw,22px); letter-spacing:-0.005em; font-weight:800; margin:0 0 var(--space-2); }

/* Buttons (sizes + states) */
.btn{ appearance:none; border:none; border-radius:var(--radius-pill); cursor:pointer; font-weight:700; line-height:1; transition:transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), background var(--dur-med) var(--ease); }
.btn:focus-visible{ outline:3px solid color-mix(in oklab, var(--brand-700), #fff 70%); outline-offset:1px; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn-primary{ background:var(--brand-700); color:#fff; box-shadow:var(--shadow-s); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-m); }
.btn-secondary{ background:var(--surface); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover{ background:var(--surface-3); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--hair); }
.btn-ghost:hover{ background:var(--surface-3); }
.btn-danger{ background:#dc2626; color:#fff; border:1px solid #dc2626; }
.btn-danger:hover{ background:#b91c1c; }

/* Sizes */
.btn-sm{ font-size:13px; padding:8px 12px; }
.btn-md{ font-size:14px; padding:10px 14px; }
.btn-lg{ font-size:16px; padding:12px 18px; }
.btn-block{ width:100%; }

/* Input / Select / Textarea */
.input,.select{ height:40px; padding:0 12px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-pill); font-size:var(--size-base); color:var(--text); }
.input::placeholder{ color:var(--muted); }
.textarea{ width:100%; min-height:140px; border:1px solid var(--hair); border-radius:var(--radius-m); padding:var(--space-4); background:var(--surface); resize:vertical; font-family:var(--font-sans); font-size:var(--size-base); color:var(--text); }
.form-help{ font-size:var(--size-sm); color:var(--muted); }
.form-error{ color:#b91c1c; font-size:var(--size-sm); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:980px){ .form-row{ grid-template-columns:1fr; } }

/* Settings layout */
.settings-grid{ display:grid; grid-template-columns:260px 1fr; gap:var(--space-8); }
@media (max-width:980px){ .settings-grid{ grid-template-columns:1fr; } }
.settings-nav{ position:sticky; top:92px; }
.settings-nav-link{ display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--text); font-weight:600; transition:background var(--dur-med) var(--ease); }
.settings-nav-link:hover{ background:var(--surface-3); }
.settings-nav-link.active{ background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-200); }

/* Toolbar */
.toolbar{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; justify-content:space-between; padding:var(--space-4); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow-s); }
.toggle{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; }
.toggle input{ width:18px; height:18px; }

/* Status indicators */
.status-paid{ color:#059669; font-weight:600; }
.status-pending{ color:#d97706; font-weight:600; }
.status-failed{ color:#dc2626; font-weight:600; }

/* Table styles */
.table-container{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; }
.table th{ text-align:left; padding:12px 16px; font-weight:600; color:#374151; border-bottom:1px solid #e5e7eb; }
.table td{ padding:12px 16px; border-bottom:1px solid #f3f4f6; }
.table tr:last-child td{ border-bottom:none; }

/* Result card */
.result-card{ background:var(--surface); border:1px solid var(--border); border-left:5px solid var(--brand-700); border-radius:14px; padding:var(--space-4); box-shadow:var(--shadow-s); }
.result-card .title{ font-weight:800; font-size:var(--size-xl); letter-spacing:-0.01em; margin:0 0 6px 0; }
.result-card .status{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:var(--muted); }
.result-card .snippet{ margin:10px 0 8px; color:var(--text); }
.result-card .evidence{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.result-card .chip{ background:var(--surface-3); color:var(--text); border:1px solid var(--hair); border-radius:var(--radius-pill); padding:4px 10px; font-size:var(--size-sm); }
.dot{ width:8px; height:8px; border-radius:999px; display:inline-block; margin-right:6px; background:#9ca3af; }
.dot.open{ background:var(--brand-600); }
.dot.upcoming{ background:var(--warning); }

/* Tabs */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--hair); }
.tabs .tab{ padding:10px 12px; border-radius:10px 10px 0 0; background:transparent; border:1px solid transparent; font-weight:700; }
.tabs .tab[aria-selected="true"]{ border-color:var(--border); background:var(--surface); border-bottom-color:var(--surface); }

/* Breadcrumbs & Pagination */
.breadcrumbs{ display:flex; gap:8px; align-items:center; font-size:14px; }
.pagination{ display:flex; gap:8px; align-items:center; }

/* Dropdown (simple) */
.dropdown{ position:relative; display:inline-block; }
.dropdown-menu{ display:none; position:absolute; top:100%; left:0; min-width:200px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-m); padding:8px; }
.dropdown.open .dropdown-menu{ display:block; }
.dropdown-menu a{ display:block; padding:8px 10px; color:var(--text); text-decoration:none; border-radius:8px; }
.dropdown-menu a:hover{ background:var(--surface-3); }

/* Modal & Toast */
.modal-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); }
.modal{ max-width:520px; margin:10vh auto; }
.toast{ display:none; position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--border); padding:10px 14px; border-radius:12px; box-shadow:var(--shadow-l); }

/* Cards & lists */
.cards{ display:grid; gap:var(--space-4); }
.cards.grid{ grid-template-columns:repeat(2,1fr); }
.list-row{ display:grid; grid-template-columns: 1fr 120px 160px 120px; gap:0; border-bottom:1px solid var(--hair); padding:12px 16px; }

/* KPI tiles (separate band) */
.kpi{ display:grid; gap:4px; }
.kpi .num{ font-size:28px; font-weight:800; letter-spacing:-0.02em; }
.kpi .sub{ font-size:var(--size-sm); color:var(--muted); }

/* Misc */
.eyebrow{ font-size: var(--size-sm); color: var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.separator{ width:100%; height:1px; background:var(--hair); margin: var(--space-5) 0; }
.sample-list{ list-style:none; padding:0; margin: var(--space-3) 0 0; }
.sample-list li{ padding: 6px 0; border-bottom: 1px dashed var(--hair); font-size: var(--size-sm); }
.sample-list li:last-child{ border-bottom: none; }

/* Responsive */
@media (max-width:980px){
  .cards.grid{ grid-template-columns:1fr; }
}

a.btn, .btn a{ text-decoration:none !important; }
.btn:hover, a.btn:hover{ text-decoration:none !important; }