
:root {
  color-scheme: dark;
  accent-color: var(--accent);
  --page: #0e1617;
  --surface: #182425;
  --surface-high: #233332;
  --border: #3d5754;
  --ink: #eff7f5;
  --muted: #b3c3c0;
  --accent: #8de7d0;
  --accent-hover: #c3f5e8;
  --good: #9fe3c7;
  --bad: #ffb4c1;
  --gutter: clamp(19px, 5vw, 78px);
  --width: 1430px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); line-height: 1.6; }
::selection { color: var(--page); background-color: var(--accent); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.04em; font-weight: 650; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px;
}
[hidden] { display: none !important; }
input, textarea, button { font: inherit; }
input:not([type=file]), textarea {
  display: block; min-width: 0; width: 100%; color: var(--ink); background: var(--page);
  border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px;
}
input:not([type=file]) { min-height: 46px; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #a1b5b2; }
label { display: block; font-size: .86rem; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .57; }
img { display: block; }
.skip-link { position: fixed; z-index: 5; top: 10px; left: 10px; background: var(--accent); color: var(--page); padding: 10px 18px; clip-path: inset(50%); }
.skip-link:focus { clip-path: none; }
.site-header, .site-footer { width: min(100%, var(--width)); margin: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header { min-height: 80px; }
.brand { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; font-weight: 700; font-size: 1.21rem; letter-spacing: -.03em; }
.brand img { border-radius: 20%; }
.site-header nav, .site-footer nav { display: flex; gap: 24px; align-items: center; font-size: .9rem; color: var(--muted); }
.site-header nav a[aria-current], .nav-workspace { color: var(--accent); }
.nav-workspace { border: 1px solid var(--border); padding: 8px 13px; border-radius: 6px; }
.nav-workspace:hover { background: var(--surface); }
.site-footer { min-height: 100px; color: var(--muted); }
.site-footer > span { font-size: .89rem; }
.site-footer .brand { color: var(--ink); }
.home-page, .workspace, .docs-layout { max-width: var(--width); margin: auto; padding-inline: var(--gutter); }
.hero { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr); align-items: center; gap: clamp(20px, 5vw, 92px); padding: clamp(32px, 6vw, 83px) 0 76px; }
.hero h1 { font-size: clamp(2.85rem, 6.3vw, 6.1rem); line-height: .99; letter-spacing: -.067em; margin-bottom: 24px; }
.hero p { max-width: 33ch; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.24rem); }
.hero-actions { display: flex; gap: 21px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.button { min-height: 45px; padding: 10px 16px; border: 1px solid transparent; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .88rem; font-weight: 650; text-align: center; transition: background-color .16s, color .16s, border-color .16s; }
.primary { background: var(--accent); color: #122522; }
.primary:not(:disabled):hover { background: var(--accent-hover); color: #122522; }
.secondary { background: var(--surface-high); color: var(--accent); border-color: var(--border); }
.secondary:not(:disabled):hover { background: #304541; }
.quiet-link, .text-button { color: var(--accent); font-weight: 550; font-size: .88rem; }
.quiet-link:hover, .text-button:not(:disabled):hover { color: var(--accent-hover); }
.quiet-link span { margin-left: 6px; }
.text-button { background: none; border: 0; padding: 4px 0; }
.full { width: 100%; }
.hero-art {
  aspect-ratio: 1.23; min-height: 255px; border-radius: 10px;
  background: linear-gradient(90deg, var(--page) 0, transparent 18%),
    url("/assets/settline-hero-v5.webp") right center / cover no-repeat;
  mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 88%, transparent 100%);
}
.receipt-desk { scroll-margin: 20px; background: var(--surface); padding: clamp(18px, 3vw, 40px); border-radius: 10px; }
.workbench-heading { margin-bottom: 25px; }
.workbench-heading h2, .workflow h2 { font-size: clamp(1.75rem, 3.6vw, 3rem); margin-bottom: 10px; }
.workbench-heading p, .workflow p { color: var(--muted); font-size: .94rem; }
.quick-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(126px, .45fr); gap: 16px; align-items: end; }
.quick-fields label { margin-bottom: 5px; }
.hash-field { grid-column: span 2; }
.check-status { display: flex; min-height: 24px; gap: 9px; align-items: baseline; margin-top: 16px; font-size: .82rem; color: var(--muted); }
.status-dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; flex: 0 0 auto; align-self: center; }
.network-text { margin-left: auto; white-space: nowrap; }
.check-status.is-error, .error { color: var(--bad); }
.check-status.is-verified, .success, .result-state { color: var(--good); }
.quick-result { display: grid; grid-template-columns: minmax(90px,.75fr) minmax(0,1.45fr) auto; gap: 20px; align-items: center; margin-top: 22px; padding: 20px; background: #1d3734; border-radius: 7px; }
.quick-result h3 { margin-top: 4px; overflow-wrap: anywhere; }
.quick-result dl, .quick-result dd { margin: 0; overflow-wrap: anywhere; }
.quick-result dt { color: var(--muted); }
.quick-result dl, .quick-result a, .result-state { font-size: .82rem; }
.workflow { padding: 75px 0 60px; }
.workflow ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding-left: 24px; margin: 22px 0; }
.workflow li::marker { color: var(--accent); }
.workflow li strong { display: block; margin-bottom: 5px; }
.workspace { padding-top: 38px; padding-bottom: 35px; }
.workspace-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.workspace-heading h1, .docs-copy h1 { font-size: clamp(2.2rem, 5vw, 4.25rem); margin-bottom: 12px; }
.workspace-heading p, .quiet, .wallet-text, .field-help, .payment-notice, .privacy-details { color: var(--muted); }
.work-grid { display: grid; grid-template-columns: minmax(225px, .75fr) minmax(0, 1.45fr); align-items: start; gap: clamp(20px, 3vw, 42px); }
.plan-editor, .plan-surface { padding: clamp(16px, 2.4vw, 30px); background: var(--surface); border-radius: 10px; min-width: 0; }
.plan-editor label { margin-top: 14px; margin-bottom: 5px; }
.editor-heading, .list-label, .field-detail, .block-input, .plan-title-row, .verified-line, .queue-heading, .payment-row-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.editor-heading h2, .plan-title-row h2 { font-size: 1.45rem; }
.editor-heading span { color: var(--accent); }
.file-button, .editor-guide { color: var(--accent); cursor: pointer; font-size: .8rem; }
.field-help, .quiet, .wallet-text, .payment-notice, .privacy-details { font-size: .82rem; }
.field-help { margin-top: 5px; }
.editor-guide { display: inline-block; margin-top: 12px; }
.plan-editor .full { margin-top: 17px; }
.plan-editor textarea { min-height: 140px; }
.block-input .text-button, .field-detail .text-button { white-space: nowrap; }
.empty-ledger-header { display: grid; grid-template-columns: 1fr auto auto; gap: 30px; border-bottom: 1px solid var(--border); padding-bottom: 13px; color: var(--muted); font-size: .84rem; }
.empty-copy { padding: clamp(32px, 6vw, 90px) 0; }
.empty-copy h2 { margin-bottom: 11px; font-size: clamp(1.45rem, 3vw, 2.7rem); }
.empty-copy p { color: var(--muted); }
.empty-copy > span { display: block; margin-top: 18px; color: var(--muted); font-size: .83rem; }
.plan-budget { text-align: right; min-width: 0; }
.plan-budget span, .plan-budget strong { display: block; }
.plan-budget span, .queue-heading > span { color: var(--muted); font-size: .8rem; }
.plan-title-row h2, .wallet-text, .plan-budget strong, .verified-line strong, .queue-heading strong, .row-amount { overflow-wrap: anywhere; }
.plan-budget strong, .row-amount, .verified-line strong { font-variant-numeric: tabular-nums; }
.verification-progress { margin: 25px 0; }
.verified-line span { color: var(--muted); font-size: .85rem; }
.verified-line strong { color: var(--good); }
.progress-track { height: 7px; margin: 8px 0; background: var(--surface-high); overflow: hidden; border-radius: 4px; }
#progress-fill { background: var(--accent); width: 0; height: 100%; transition: width .25s ease; }
.payment-notice { margin: 8px 0 15px; }
.payment-rows { display: grid; gap: 9px; }
.payment-row { padding: 15px; border-radius: 7px; background: var(--surface-high); }
.payment-row-heading { margin-bottom: 12px; }
.payment-row-heading > div { min-width: 0; }
.payment-row h3 { font-size: 1.02rem; overflow-wrap: anywhere; }
.row-amount { font-size: .94rem; text-align: right; }
.receipt-controls { display: flex; gap: 8px; }
.receipt-controls button { flex: 0 0 auto; }
.row-status, .message { font-size: .82rem; margin-top: 8px; overflow-wrap: anywhere; }
.row-status { color: var(--muted); }
.row-status.success { color: var(--good); }
.row-status.error { color: var(--bad); }
.message:empty { display: none; }
.plan-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 20px 0 14px; }
.privacy-details summary { cursor: pointer; color: var(--accent); }
.privacy-details p { margin-top: 8px; }
.danger { color: var(--bad); }
.docs-layout { display: grid; grid-template-columns: 165px minmax(0, 700px); gap: clamp(18px, 5vw, 80px); padding-top: 38px; padding-bottom: 40px; }
.docs-nav { display: grid; align-content: start; gap: 9px; font-size: .91rem; color: var(--muted); }
.docs-copy { min-width: 0; }
.docs-copy h2 { font-size: clamp(1.45rem, 3vw, 2.2rem); margin: 30px 0 12px; }
.docs-copy p, .docs-copy li { color: var(--muted); }
.docs-copy p { margin-bottom: 12px; }
.docs-copy a:not(.button) { color: var(--accent); }
.docs-copy pre { overflow: auto; background: var(--surface); padding: 14px; border-radius: 6px; font-size: .8rem; }
.docs-copy .button { margin-top: 16px; }
.payment-dialog { position: fixed; max-width: min(91vw, 520px); max-height: 91vh; padding: 28px; overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; }
.payment-dialog::backdrop { background: #071312b0; }
.payment-dialog h2 { margin: 14px 0 10px; }
.payment-dialog form { text-align: right; }
.dialog-close { border: 0; background: var(--surface-high); color: var(--ink); border-radius: 4px; width: 36px; height: 36px; }
.payment-dialog dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; }
.payment-dialog dd { margin: 0; overflow-wrap: anywhere; }
.payment-dialog p { margin: 10px 0; }
@media (max-width: 850px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-bottom: 30px; }
  .hero-art { max-width: 520px; width: 100%; min-height: 0; aspect-ratio: 1.64; }
  .work-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .site-header { gap: 10px; min-height: 64px; }
  .brand { font-size: 1.02rem; gap: 5px; }
  .brand img { width: 24px; height: 24px; }
  .site-header nav, .site-footer nav { gap: 10px; font-size: .78rem; }
  .nav-workspace { padding: 6px 8px; }
  .hero { padding-top: 30px; gap: 25px; }
  .hero h1 { font-size: clamp(2.27rem, 8.3vw, 3.35rem); margin-bottom: 16px; }
  .hero-actions { margin-top: 21px; gap: 12px; }
  .quick-fields, .quick-result, .workflow ol, .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .hash-field { grid-column: auto; }
  .network-text { display: none; }
  .workflow { padding-top: 45px; padding-bottom: 30px; }
  .workflow ol { gap: 13px; }
  .site-footer { flex-wrap: wrap; gap: 11px; min-height: 90px; padding-block: 15px; }
  .site-footer > span { display: none; }
  .empty-ledger-header { gap: 10px; }
  .payment-row-heading { align-items: flex-start; }
  .row-amount { max-width: 45%; }
  .receipt-controls { flex-wrap: wrap; }
  .receipt-controls input { flex: 1 1 145px; }
  .docs-nav { display: flex; flex-wrap: wrap; gap: 9px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

