:root {
  color-scheme: light;
  --ink: #162321;
  --muted: #677571;
  --soft: #edf4f1;
  --line: #dce6e2;
  --green: #0b806a;
  --green-dark: #063c35;
  --cream: #fbfcfa;
  --danger: #b3423d;
  font-family: "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 52% 40%, #f5f9f6 0, #f2f7f4 34%, #f7f9f7 76%); color: var(--ink); }
button, textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1150px, calc(100% - 40px)); margin: 0 auto; }

.site-header { background: rgba(255, 255, 255, .78); border-bottom: 1px solid var(--line); padding: 23px 0 18px; }
.topbar { display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; min-width: 260px; }
.brand-mark { display: grid; place-items: center; width: 49px; height: 49px; color: white; border-radius: 16px; font: 700 15px "DM Mono", monospace; background: linear-gradient(145deg, #0d5b4f, #168c7b); box-shadow: 0 10px 20px #0b806a29; }
.brand small, .card-heading small, .hero p, .section-top p, .result-intro p, .result-card-head small { display: block; color: #08725f; font: 800 11px "DM Mono", monospace; letter-spacing: .04em; }
.brand strong { display: block; margin-top: 1px; font-size: 25px; line-height: 1.2; letter-spacing: -.06em; }
.nav { margin-left: auto; display: flex; min-height: 69px; padding: 4px; border-radius: 19px; background: #fff; box-shadow: 0 12px 34px #173c3420; }
.nav > * { display: flex; flex-direction: column; justify-content: center; min-width: 112px; padding: 8px 17px; color: #5b6a66; text-decoration: none; border-radius: 15px; font-size: 13px; }
.nav b { font-size: 15px; }.nav span { margin-top: 1px; font-size: 12px; }
.nav-active { color: #075d4e; background: #ebf5f1; border: 1px solid #bdd8ce; }
.local-badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #47615b; font-size: 12px; }.local-badge i { width: 7px; height: 7px; border-radius: 50%; background: #24ab78; box-shadow: 0 0 0 3px #d9f4e8; }
.crumb { display: flex; align-items: center; gap: 11px; min-height: 46px; margin-top: 15px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 14px; color: #5b6965; font-weight: 600; font-size: 13px; }.crumb span { padding: 3px 7px; color: #2c5f5a; border-radius: 7px; background: #e3efeb; font: 700 12px "DM Mono", monospace; }

.page { padding: 32px 0 40px; }.hero { position: relative; overflow: hidden; min-height: 124px; padding: 26px 27px; color: #fff; border-radius: 21px; background: linear-gradient(110deg, #102c26, #07564c 45%, #276d78); box-shadow: 0 20px 36px #1b574521; }.hero::after { content: ""; position: absolute; right: -60px; top: -110px; width: 310px; height: 310px; border: 1px solid #bcf2e04f; border-radius: 50%; box-shadow: inset 0 0 0 35px #d7ffef0b; }.hero p { margin: 0; color: #b3ddd2; }.hero h1 { margin: 4px 0 2px; color: #fff; font-size: 30px; letter-spacing: -.06em; }.hero > span { position: relative; z-index: 1; color: #b5d3cc; font-size: 13px; }
.workspace { display: grid; grid-template-columns: 300px 1fr; gap: 18px; margin-top: 17px; }.flow-card, .query-card, .result-card { border: 1px solid rgba(220,230,226,.86); border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 16px 34px #1f494016; }.flow-card { padding: 25px 17px 17px; }.card-heading { display: flex; align-items: center; gap: 12px; padding: 0 4px 15px; border-bottom: 1px solid var(--line); }.card-icon { display: grid; place-items: center; width: 44px; height: 41px; color: #fff; border-radius: 12px; background: linear-gradient(135deg,#087767,#2c8f99); font: 700 13px "DM Mono", monospace; }.card-heading h2 { margin: 1px 0 0; font-size: 22px; letter-spacing: -.06em; }
.account-chip { display: grid; gap: 3px; margin: 14px 0; padding: 13px; border: 1px solid #cddfd8; border-radius: 14px; background: linear-gradient(120deg,#f9fdfb,#edf7f2); }.account-chip span, .account-chip em { color: var(--muted); font-size: 12px; font-style: normal; }.account-chip strong { overflow: hidden; color: #20332f; font: 700 12px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.flow-list { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }.flow-list li { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 68px; color: #66736f; border: 1px solid #e4ebe8; border-radius: 13px; }.flow-list li.active { color: #183d36; border-color: #b7d2c9; background: #f0f8f5; }.flow-list li.done { color: #195c4f; background: #f4faf7; }.flow-list li span { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #eef3f0; font: 700 13px "DM Mono", monospace; }.flow-list .active span, .flow-list .done span { color: white; background: linear-gradient(135deg,#137d6d,#368594); }.flow-list b, .flow-list small { display: block; }.flow-list b { font-size: 13px; }.flow-list small { margin-top: 2px; font-size: 11px; color: #81908b; }.privacy-note { display: flex; gap: 8px; margin-top: 15px; padding: 11px; color: #64726f; border-radius: 12px; background: #f6f9f7; font-size: 11px; line-height: 1.55; }.privacy-note span { color: var(--green); }.privacy-note p { margin: 0; }.privacy-note b { color: #42534e; }

.query-card { padding: 26px; }.section-top, .result-intro, .result-card-head, .action-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.section-top p, .result-intro p { margin: 0; }.section-top h2, .result-intro h2 { margin: 3px 0 0; font-size: 25px; letter-spacing: -.06em; }.status-pill, .result-state { flex: 0 0 auto; padding: 5px 10px; color: #687671; border: 1px solid #e2e8e5; border-radius: 12px; background: #f7f9f8; font-size: 12px; font-weight: 700; }.status-pill.loading { color: #097263; border-color: #a9d4c8; background: #eaf7f1; }.status-pill.error { color: var(--danger); border-color: #edc9c7; background: #fff4f3; }.divider { height: 1px; margin: 19px 0 24px; background: var(--line); }.query-card label { display: block; margin-bottom: 10px; color: #53615e; font-size: 13px; font-weight: 700; }.query-card textarea { display: block; width: 100%; min-height: 276px; padding: 16px; resize: vertical; color: #19332c; border: 1px solid #d8e2de; outline: none; border-radius: 14px; background: #fcfdfc; font: 13px/1.7 "DM Mono", monospace; transition: box-shadow .2s,border-color .2s; }.query-card textarea:focus { border-color: #64a998; box-shadow: 0 0 0 4px #dff4ec; }.query-card textarea::placeholder { color: #abb6b2; }.input-meta { display: flex; justify-content: space-between; gap: 10px; padding: 9px 1px 0; color: #82908c; font-size: 11px; }.text-button { padding: 0; color: #39746a; border: 0; background: none; font-size: 12px; text-decoration: underline; }.parse-message { min-height: 22px; padding-top: 8px; color: #39746a; font-size: 12px; }.parse-message.error { color: var(--danger); }.action-row { margin-top: 3px; }.action-row p { margin: 0; color: #82908c; font-size: 11px; }.action-row code { padding: 2px 4px; color: #52716a; background: #eef4f1; border-radius: 4px; font-family: "DM Mono", monospace; }.primary-button, .outline-button { display: inline-flex; align-items: center; justify-content: center; min-width: 95px; min-height: 43px; padding: 0 17px; color: white; border: 0; border-radius: 12px; background: linear-gradient(135deg,#07816c,#09735f); box-shadow: 0 10px 18px #087f6a2c; font-weight: 800; font-size: 13px; }.primary-button:disabled { cursor: wait; opacity: .65; }.spinner { display: none; width: 14px; height: 14px; border: 2px solid #ffffff80; border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; }.primary-button.is-loading .spinner { display: inline-block; }.primary-button.is-loading .button-label { display: none; }@keyframes spin { to { transform: rotate(360deg); } }

.results { margin-top: 22px; }.result-intro { margin: 0 4px 14px; }.result-intro h2 { font-size: 24px; }.outline-button { min-height: 36px; color: #286d60; border: 1px solid #bbd9cf; background: #f8fcfa; box-shadow: none; }.result-alert { margin-bottom: 14px; padding: 12px 14px; color: #8b3b37; border: 1px solid #efd0cd; border-radius: 13px; background: #fff6f5; font-size: 13px; }.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.result-card { padding: 21px; }.subscription-card { background: linear-gradient(135deg,#fff,#f4fbf8); }.result-card-head { align-items: flex-start; }.result-card-head > div { margin-right: auto; }.result-card-head small { font-size: 10px; }.result-card-head h3 { margin: 2px 0 0; font-size: 18px; letter-spacing: -.05em; }.mini-icon { display: grid; place-items: center; width: 35px; height: 35px; color: #09725f; border-radius: 11px; background: #e7f4ef; font-weight: 900; }.result-state.ready { color: #08705e; border-color: #b5dfd2; background: #edfaf4; }.result-state.problem { color: #ad4c45; border-color: #eccac8; background: #fff4f3; }.data-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 19px 0 0; }.data-list div { padding: 10px 12px; border-radius: 11px; background: #ffffffaa; }.data-list dt { color: #7c8a86; font-size: 11px; }.data-list dd { overflow: hidden; margin: 4px 0 0; color: #263c36; font: 600 12px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }.payment-list, .invoice-list { display: grid; gap: 9px; margin-top: 18px; }.payment-row, .invoice-row { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 12px; background: #f7faf8; }.payment-brand { display: grid; place-items: center; width: 33px; height: 28px; color: #186c5f; border-radius: 8px; background: #dff0e9; font: 700 10px "DM Mono", monospace; }.row-copy { min-width: 0; margin-right: auto; }.row-copy b, .row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.row-copy b { font-size: 12px; }.row-copy small { margin-top: 2px; color: #778580; font-size: 11px; }.row-value { text-align: right; color: #445a54; font: 500 11px "DM Mono", monospace; }.empty-row { padding: 18px 5px; color: #81908b; text-align: center; font-size: 12px; }.invoices-card { margin-top: 18px; }.invoice-list { grid-template-columns: 1fr; }.invoice-row { align-items: stretch; }.invoice-main small { white-space: normal; }.invoice-amount { min-width: 105px; align-self: center; }.invoice-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 7px; margin-left: auto; }.invoice-link { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px; color: #08705e; border: 1px solid #b5dfd2; border-radius: 10px; background: #edfaf4; font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }.invoice-link:hover { border-color: #74bfae; background: #e0f5ee; }.invoice-link.disabled { color: #96a49f; border-color: #dde6e2; background: #f5f8f6; cursor: not-allowed; }.raw-data { margin-top: 17px; padding: 14px 17px; color: #4b625b; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfb; }.raw-data summary { cursor: pointer; font-size: 13px; font-weight: 700; }.raw-data summary span { margin-left: 6px; color: #8a9893; font-size: 11px; font-weight: 400; }.raw-data pre { overflow: auto; max-height: 340px; margin: 13px 0 0; padding: 14px; color: #c8f1e4; border-radius: 10px; background: #173c34; font: 11px/1.6 "DM Mono", monospace; }.footer { padding: 0 0 25px; color: #84928e; font-size: 11px; text-align: center; }.footer span { padding: 0 7px; color: #0c8a72; }

.payment-row.is-default { border: 1px solid #9fd7c7; background: linear-gradient(120deg,#edf9f4,#f8fcfa); }
.payment-tip, .status-badge { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; padding: 2px 7px; border-radius: 999px; font: 800 10px "Noto Sans SC", system-ui, sans-serif; vertical-align: middle; }
.payment-tip { color: #075d4e; border: 1px solid #a8daca; background: #e6f7f0; }
.status-badge { color: #53615e; border: 1px solid #d5e1dc; background: #fff; }
.status-badge.paid { color: #06735f; border-color: #9fd7c7; background: #e7f8f1; }
.status-badge.paid::before { content: "?"; margin-right: 4px; font-weight: 900; }

.data-list .billing-profile { grid-column: 1 / -1; background: linear-gradient(120deg,#f4fbf8,#fff); border: 1px solid #dbe9e4; }
.payment-row.is-default { border: 1px solid #9fd7c7; background: linear-gradient(120deg,#edf9f4,#f8fcfa); }
.payment-tip, .status-badge { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; padding: 2px 7px; border-radius: 999px; font: 800 10px "Noto Sans SC", system-ui, sans-serif; vertical-align: middle; }
.payment-tip { color: #075d4e; border: 1px solid #a8daca; background: #e6f7f0; }
.status-badge { color: #53615e; border: 1px solid #d5e1dc; background: #fff; }
.status-badge.paid { color: #06735f; border-color: #9fd7c7; background: #e7f8f1; }
.status-badge.paid::before { content: "?"; margin-right: 4px; font-weight: 900; }

.data-list .billing-profile dd { overflow: visible; white-space: normal; text-overflow: clip; }
.billing-profile strong { display: block; color: #1f3933; font: 800 14px "Noto Sans SC", system-ui, sans-serif; }
.billing-profile em { display: block; margin-top: 4px; color: #61716c; font: italic 12px/1.5 "Noto Sans SC", system-ui, sans-serif; }

@media (max-width: 960px) { .topbar { flex-wrap: wrap; }.nav { order: 3; width: 100%; margin: 0; }.nav > * { flex: 1; min-width: 0; }.local-badge { margin-left: auto; }.workspace { grid-template-columns: 250px 1fr; }.invoice-list { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .invoice-row { flex-wrap: wrap; }.invoice-actions { width: 100%; justify-content: flex-start; }.invoice-amount { text-align: left; } .shell { width: min(100% - 26px, 550px); }.site-header { padding-top: 14px; }.brand { min-width: 0; }.brand strong { font-size: 22px; }.local-badge { display: none; }.nav { min-height: 55px; overflow-x: auto; }.nav > * { min-width: 95px; padding: 5px 9px; }.nav b { font-size: 13px; }.nav span { font-size: 10px; }.crumb { margin-top: 11px; }.page { padding-top: 20px; }.hero { min-height: 112px; padding: 23px 20px; }.hero h1 { font-size: 26px; }.workspace, .result-grid { grid-template-columns: 1fr; }.flow-card { padding-bottom: 14px; }.flow-list { grid-template-columns: 1fr 1fr; }.flow-list li { min-height: 62px; padding: 9px; gap: 8px; }.flow-list li span { width: 26px; height: 26px; }.flow-list b { font-size: 12px; }.query-card { padding: 20px; }.section-top h2 { font-size: 22px; }.query-card textarea { min-height: 220px; }.action-row { align-items: flex-end; }.action-row p { max-width: 180px; }.data-list { grid-template-columns: 1fr 1fr; }.invoice-list { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .brand small { font-size: 9px; }.nav > * { min-width: 80px; }.nav > *:not(.nav-active) { display: none; }.flow-list { grid-template-columns: 1fr; }.flow-list li { min-height: 52px; }.privacy-note { display: none; }.input-meta { align-items: flex-start; }.query-card textarea { min-height: 185px; }.data-list { grid-template-columns: 1fr; } }