html {
  font-size: 14px;
}

:root { --ink:#17202a; --muted:#68727d; --brand:#b21f35; --soft:#f4f1ec; --line:#ded8ce; }
body { background:#f7f5f1; color:var(--ink); font-family:Inter,Segoe UI,sans-serif; }
.container { max-width:1180px; }
.hero { display:flex; justify-content:space-between; align-items:end; gap:2rem; padding:4rem 0 2.5rem; }
.hero h1 { max-width:760px; font-size:clamp(2.2rem,5vw,4.3rem); line-height:1.02; letter-spacing:-.045em; margin:.5rem 0 1rem; }
.hero p { max-width:720px; color:var(--muted); font-size:1.08rem; }
.eyebrow { color:var(--brand); font-weight:800; letter-spacing:.14em; font-size:.75rem; }
.status-card { min-width:210px; background:var(--ink); color:white; border-radius:18px; padding:1.3rem; }
.status-card span { display:block; color:#bbc3ca; font-size:.8rem; margin-bottom:.4rem; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.panel { background:white; border:1px solid var(--line); border-radius:20px; padding:1.5rem; box-shadow:0 12px 35px rgba(33,29,24,.05); }
.panel h2 { font-size:1.2rem; margin:0 0 .35rem; }.muted { color:var(--muted); }
label { display:block; font-weight:700; margin:.9rem 0 .35rem; }
input { width:100%; border:1px solid var(--line); border-radius:10px; padding:.75rem .9rem; }
button { width:100%; border:0; border-radius:10px; padding:.78rem 1rem; font-weight:700; margin-top:1rem; }
.primary { background:var(--brand); color:white; }.secondary { background:var(--soft); color:var(--ink); border:1px solid var(--line); }
.invoices { margin-top:1.25rem; }.section-heading { display:flex; justify-content:space-between; align-items:center; }
.count { background:var(--soft); border-radius:999px; padding:.4rem .75rem; font-weight:800; }
.empty { border:1px dashed var(--line); border-radius:12px; color:var(--muted); padding:2rem; text-align:center; margin-top:1rem; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; margin-top:1rem; } th,td { border-bottom:1px solid var(--line); padding:.8rem; text-align:left; } .money { text-align:right; }
.field-validation-error { color:var(--brand); font-size:.82rem; }
.sync-note { margin:1rem 0 0; padding:.8rem; background:var(--soft); border-radius:10px; color:var(--muted); font-size:.9rem; }
.captcha-form { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.captcha-image { display:block; max-width:100%; min-width:180px; min-height:54px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:10px; padding:.4rem; }
.api-panel { margin-top:1.25rem; display:grid; grid-template-columns:2fr 1fr; gap:1rem; align-items:center; }
.api-key-box { background:#e8f7ef; border:1px solid #9ad5b5; border-radius:12px; padding:1rem; margin-bottom:1rem; }
.api-key-box code { display:block; margin-top:.5rem; overflow-wrap:anywhere; color:#135b35; }
@media(max-width:760px){ .hero{display:block;padding-top:2rem}.status-card{margin-top:1rem}.dashboard-grid{grid-template-columns:1fr} }

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}