:root { --ink:#171717; --soft:#6B6B6B; --faint:#9A9A9A; --panel:#F4F4F2; --mint:#FFF1E7; --line:#E8E8E6; --forest:#9A3412; --forest-2:#7C2D12; --green:#00B862; --green-soft:#E3F7EC; --amber:#A86400; --amber-soft:#FFF1DA; --red:#C2410C; --red-soft:#FDEBE3; --blue:#2F54D6; --blue-soft:#E9EEFF; --sans:"Figtree",system-ui,sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: inherit; }
a[href^="mailto:"] { white-space: nowrap; }
h1 { font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.025em; margin: 0; }
h2 { font-weight: 600; font-size: 17px; margin: 28px 0 10px; }
p { margin: 0; }
.top { padding: 12px clamp(16px, 3vw, 32px) 0; }
.bar { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 14px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; text-decoration: none; margin-right: auto; }
.mark { width: 24px; height: 24px; border-radius: 50%; background: #F97316; display: grid; place-items: center; }
.mark svg { width: 13px; height: 13px; }
.links { display: flex; gap: 4px; flex-wrap: wrap; }
.links a { text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 9px; }
.links a:hover, .links a.on { background: var(--panel); }
.links .switch select { min-height: 36px; padding: 6px 10px; font-size: 14px; width: auto; max-width: 220px; }
.links { align-items: center; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px) 80px; }
.sub { color: var(--soft); margin-top: 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer; font: 500 14px var(--sans); text-decoration: none; white-space: nowrap; background: var(--forest); color: #fff; }
.btn:hover { background: var(--forest-2); }
.btn.light { background: var(--panel); color: var(--ink); }
.btn.light:hover { background: #EAEAE7; }
.btn.small { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn.block { width: 100%; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 18px; }
.card { background: var(--panel); border-radius: 14px; padding: 14px 16px; }
.card b { display: block; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.card span { color: var(--soft); font-size: 13px; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--soft); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.link:hover td { background: #FAFAF8; cursor: pointer; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-ok { color: #00964F; background: var(--green-soft); }
.s-wait { color: var(--amber); background: var(--amber-soft); }
.s-warn { color: var(--red); background: var(--red-soft); }
.s-info { color: var(--blue); background: var(--blue-soft); }
.s-mute { color: var(--soft); background: var(--panel); }
.panelbox { background: var(--panel); border-radius: 14px; padding: 16px 18px; }
.note { background: var(--mint); color: #9A3412; border-radius: 12px; padding: 12px 14px; margin-top: 16px; }
.warnbox { background: var(--amber-soft); color: #6B4000; border-radius: 12px; padding: 12px 14px; margin-top: 16px; }
.empty { color: var(--soft); background: var(--panel); border-radius: 12px; padding: 18px; margin-top: 12px; }
form.stack { display: grid; gap: 12px; max-width: 460px; }
label.f { display: grid; gap: 5px; font-size: 13px; font-weight: 500; }
label.f small { color: var(--soft); font-weight: 400; }
input, select, textarea { font: 400 15px var(--sans); color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #F97316; box-shadow: 0 0 0 3px rgba(249,115,22,.14); }
input.unsure, select.unsure { border-color: #E5A33A; background: #FFFBF3; }
.review { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; align-items: start; }
.viewer { background: var(--panel); border-radius: 14px; overflow: hidden; height: calc(100vh - 150px); min-height: 520px; position: sticky; top: 12px; }
.viewer iframe, .viewer img { width: 100%; height: 100%; border: 0; object-fit: contain; background: #fff; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fields .wide { grid-column: 1 / -1; }
.meta { font-size: 13px; color: var(--soft); }
.meta b { color: var(--ink); font-weight: 500; }
.tag { display: inline-block; font-size: 12px; background: var(--panel); border-radius: 6px; padding: 2px 7px; margin: 2px 4px 2px 0; }
.missing { color: var(--red); }
.missing li { margin: 2px 0; }
ul.plain { margin: 6px 0 0; padding-left: 18px; }
pre.mail { white-space: pre-wrap; background: var(--panel); border-radius: 10px; padding: 12px; font: 13px/1.5 ui-monospace, monospace; margin: 6px 0 0; }
.sm-only { display: none; }
@media (max-width: 860px) { .sm-only { display: block; margin-top: 4px; } .cards { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .card { padding: 12px; } .card b { font-size: 22px; } .review { grid-template-columns: 1fr; } .viewer { position: static; height: 70vh; } .fields { grid-template-columns: 1fr; } table { font-size: 14px; display: block; overflow-x: auto; } .hide-sm { display: none; } }

html { scroll-behavior:smooth; }
:focus-visible { outline:3px solid #F97316; outline-offset:3px; }
button:disabled { opacity:.65; cursor:wait; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.btn { transition:background .15s; }
.brand .mark { background:#F97316; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; color:var(--soft); font-size:11px; font-weight:600; letter-spacing:.08em; }
.eyebrow i { width:6px; height:6px; border-radius:50%; background:#F97316; }
.nav-button { font:500 14px var(--sans); padding:8px 12px; border:0; border-radius:9px; background:transparent; cursor:pointer; color:var(--soft); }
.nav-button:hover { background:var(--panel); }
.app-footer { max-width:1176px; margin:0 auto; padding:24px 0 30px; display:flex; align-items:center; gap:14px; color:var(--soft); border-top:1px solid var(--line); font-size:12px; }
.app-footer span { margin-right:auto; color:var(--faint); }
.app-footer a { text-decoration:none; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:6px 0 24px; }
.page-heading h1 { margin-top:5px; }
.page-heading .eyebrow { font-size:10px; }
.setup-note { border:1px solid #FED7AA; border-radius:12px; background:#FFFAF5; padding:12px 16px; display:flex; justify-content:space-between; gap:20px; font-size:13px; margin-bottom:16px; }
.setup-note a { font-weight:600; white-space:nowrap; color:#9A3412; }
.request-panel { display:grid; grid-template-columns:1fr 1.15fr; gap:30px; background:#FFF1E7; border-radius:14px; padding:26px 28px; align-items:center; }
.request-panel h2 { margin:8px 0 6px; font-size:25px; font-weight:500; letter-spacing:-.025em; }
.request-panel p { color:#895E47; font-size:14px; max-width:320px; }
.request-panel .eyebrow { color:#A34A20; }
.request-form { display:grid; gap:8px; }
.request-form textarea { resize:vertical; min-height:80px; border-color:#F3D9C5; font-size:15px; line-height:1.5; }
.request-form .btn { justify-self:end; }
.stats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:20px; }
.stats .card { padding:18px; background:#F7F7F5; text-decoration:none; border:1px solid transparent; transition:border-color .15s; }
.stats .card:hover { border-color:#E6D4C7; }
.stats .card b { font-size:clamp(19px,2.4vw,28px); line-height:1.25; margin:12px 0 5px; overflow-wrap:anywhere; }
.stats .card small { font-size:12px; color:var(--faint); }
.stats .late-card { background:#FFF6F0; }
.stats .late-card b { color:#B94316; }
.ledger-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:32px; border-bottom:1px solid var(--line); }
.tabs { display:flex; gap:24px; overflow:auto; }
.tabs a { font-size:13px; text-decoration:none; white-space:nowrap; color:var(--soft); padding:12px 0; border-bottom:2px solid transparent; }
.tabs a.active { color:#9A3412; border-color:#EA580C; font-weight:600; }
.export-link { font-size:12px; color:var(--soft); white-space:nowrap; text-decoration:none; }
.ledger-search { margin:18px 0 14px; gap:8px; }
.ledger-search input[name=q] { max-width:380px; font-size:13px; }
.ledger-search input[type=month] { width:170px; font-size:13px; }
.table-shell { overflow-x:auto; }
.table-shell table { min-width:630px; }
td { padding-top:16px; padding-bottom:16px; vertical-align:middle; font-size:13px; }
.invoice-link { font-weight:600; text-decoration:none; }
.invoice-link:hover { color:#C2410C; }
.clip { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; margin-top:4px; }
.customer-name { font-weight:500; }
.table-shell td.num b { font-weight:500; }
.ledger-empty { text-align:center; padding:50px 20px; background:#FAFAF8; border:1px dashed var(--line); }
.ledger-empty h2 { color:var(--ink); margin:12px 0 7px; font-weight:500; }
.ledger-empty p { font-size:14px; }
.empty-icon { margin:auto; display:grid; place-items:center; height:40px; width:40px; background:#FFF1E7; color:#C2410C; border-radius:12px; font-size:23px; }
.login { max-width:440px; margin:10vh auto 13vh; }
.login h1 { margin:12px 0 10px; }
.login-form { margin-top:24px; }
.settings-form { max-width:780px; margin-top:24px; }
.form-panel { background:#FAFAF8; border:1px solid var(--line); border-radius:14px; padding:22px; margin-bottom:16px; }
.form-panel h2 { margin:0 0 20px; font-size:17px; }
.form-panel .fields { gap:16px; }
.form-panel .fields + p { margin-top:16px; }
.form-panel .f { margin-bottom:10px; font-size:12px; }
.form-panel .fields .f { margin-bottom:0; }
.form-panel input,.form-panel textarea,.form-panel select { font-size:14px; border-width:1px; }
.form-panel textarea { resize:vertical; }
.editor-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:start; gap:20px; }
.editor-grid aside { position:sticky; top:20px; }
.prompt-source { padding:12px 16px; background:#FFF6EF; border-radius:10px; color:#9A3412; margin-bottom:20px; font-size:14px; }
.item-row { display:grid; grid-template-columns:minmax(0,1fr) 80px 110px 24px; gap:8px; margin-bottom:14px; align-items:start; }
.item-row .f { margin:0; }
.remove-item { border:0; background:transparent; font-size:21px; padding:25px 0 0; color:var(--soft); cursor:pointer; }
.remove-item:hover { color:#C2410C; }
.item-settings { margin-top:20px; }
.summary-panel { background:#FFF1E7; border:0; }
.summary-panel .btn { margin-top:12px; }
.summary-panel > a.meta { display:block; margin-top:20px; }
.editor-total { font-size:32px; letter-spacing:-.03em; margin:12px 0; }
.customer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.customer-card { padding:24px; background:var(--panel); border-radius:14px; position:relative; text-decoration:none; border:1px solid transparent; }
.customer-card:hover { border-color:#F5C6A4; }
.customer-avatar { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#FFE6D2; color:#9A3412; font-size:13px; font-weight:600; }
.customer-card h2 { margin:18px 0 8px; }
.customer-card p + p { margin-top:8px; }
.customer-arrow { position:absolute; top:24px; right:24px; color:var(--soft); }
.invoice-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.invoice-paper { margin:26px auto 0; padding:48px; max-width:880px; border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 44px -28px #0003; }
.paper-heading { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#9A3412; letter-spacing:.08em; }
.paper-brand { font-size:17px; font-weight:600; letter-spacing:-.03em; }
.invoice-paper > h2 { font-size:32px; margin:26px 0 32px; font-weight:500; }
.paper-parties { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.paper-parties h3 { margin:12px 0 8px; font-size:16px; font-weight:600; }
.paper-parties p { color:var(--soft); font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; }
.paper-dates { display:grid; grid-template-columns:repeat(3,1fr); margin:32px 0; gap:20px; }
.paper-dates span,.paper-dates b { display:block; font-size:12px; }
.paper-dates span { color:var(--soft); margin-bottom:6px; }
.paper-dates b { font-weight:500; }
.invoice-paper td { font-size:12px; }
.paper-description { white-space:pre-wrap; overflow-wrap:anywhere; max-width:350px; }
.paper-totals { margin:26px 0 0 auto; max-width:400px; }
.paper-totals > div { display:flex; justify-content:space-between; gap:24px; margin:10px 0; font-size:13px; }
.paper-totals b { font-weight:500; }
.paper-totals .grand-total { border-top:1px solid var(--line); padding-top:18px; margin-top:18px; color:#9A3412; align-items:center; }
.grand-total b { font-size:25px; white-space:nowrap; }
.paper-note { color:var(--soft); font-size:12px; margin-top:24px; overflow-wrap:anywhere; }
.paper-payment { background:#FAFAF8; padding:14px 16px; margin-top:28px; border-radius:10px; font-size:12px; overflow-wrap:anywhere; }
.paper-payment b { font-weight:500; }
.draft-watermark { color:#9A3412; font-size:11px; text-align:center; margin-top:26px; }
.invoice-history { max-width:880px; margin:30px auto 0; }
.invoice-history h2 { margin-top:0; }
.invoice-history details { margin-top:20px; font-size:12px; color:var(--soft); }
.invoice-history details p { margin:12px 0; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:35px; align-items:center; min-height:690px; padding:12px 0 36px; }
.hero-copy .eyebrow { font-size:11px; letter-spacing:.02em; padding:5px 9px; border:1px solid var(--line); border-radius:7px; }
.hero h1 { font-size:clamp(48px,6vw,78px); line-height:.98; font-weight:500; letter-spacing:-.045em; margin:26px 0 24px; }
.hero h1 em { color:#F36D15; font-style:normal; }
.hero-sub { color:var(--soft); font-size:17px; max-width:430px; line-height:1.55; }
.hero-actions { margin-top:28px; }
.hero-actions .btn { min-height:46px; padding:0 20px; font-size:15px; }
.hero-perks { margin:24px 0 0; padding:0; list-style:none; display:grid; gap:8px; font-size:14px; }
.hero-perks li:before { content:'✓'; display:inline-grid; place-items:center; height:19px; width:19px; background:#FFF1E7; color:#C2410C; border-radius:50%; margin-right:8px; font-size:11px; }
.hero-panel { background:#F4F4F2; border-radius:14px; padding:clamp(24px,4vw,48px) 20px; display:grid; place-items:center; overflow:hidden; }
  /* Device frame ported from phone-rig: 393×852 screen + 14px frame, scaled with --s */
  .rig { --s: .8; width: calc(421px * var(--s)); height: calc(880px * var(--s)); position: relative; }
  .rig-phone { position: absolute; top: 0; left: 0; width: 421px; height: 880px; transform: scale(var(--s)); transform-origin: top left; padding: 11px; border-radius: 68px; background: linear-gradient(150deg, #69717a, #2b3037 25%, #11151c 60%, #444b55); box-shadow: 0 40px 85px -25px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08); }
  .rig-bezel { padding: 3px; border-radius: 57px; overflow: hidden; background: #000; height: 100%; }
  .rig-btn { position: absolute; left: -3px; width: 3px; background: linear-gradient(#444c55, #222930); border-radius: 3px 0 0 3px; }
  .rig-btn.mute { top: 150px; height: 30px; } .rig-btn.up { top: 196px; height: 56px; } .rig-btn.down { top: 262px; height: 56px; }
  .rig-btn.power { left: auto; right: -3px; top: 210px; height: 84px; border-radius: 0 3px 3px 0; }
  .rig-screen { position: relative; width: 393px; height: 852px; border-radius: 54px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
  .rig-status { height: 59px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 33px 5px 38px; color: #111218; }
  .rig-time { font: 590 17px/22px system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; letter-spacing: -.3px; }
  .rig-icons { display: flex; align-items: center; gap: 6px; }
  .rig-icons svg { display: block; flex: none; fill: currentColor; overflow: visible; }
  .rig-signal { width: 18px; height: 12px; }
  .rig-wifi { width: 17px; height: 12px; stroke: currentColor; stroke-width: .35; stroke-linejoin: round; }
  .rig-battery { width: 27px; height: 13px; }
  .rig-battery-outline { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .55; }
  .rig-battery-cap { opacity: .55; }
  .rig-island { position: absolute; top: 11px; left: 50%; width: 125px; height: 37px; transform: translateX(-50%); border-radius: 999px; background: #000; }
  .rig-island::after { content: ""; position: absolute; right: 14px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #17243d, #040609 70%); }
  .rig-home { position: absolute; bottom: 8px; left: 50%; width: 139px; height: 5px; transform: translateX(-50%); border-radius: 999px; background: #111218; }

.demo-head { display:flex; align-items:center; gap:12px; padding:6px 20px 14px; border-bottom:1px solid var(--line); }
.demo-head .mark { width:38px; height:38px; flex:none; }
.demo-head .mark svg { width:19px; height:19px; }
.demo-title { display:grid; gap:2px; }
.demo-title b { font-size:18px; font-weight:600; }
.demo-title span { font-size:14px; color:var(--soft); }
.demo-chat { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:10px; padding:14px 16px; background:#FAFAF8; }
.bubble { flex:none; font-size:16px; line-height:1.4; padding:12px; }
.bubble.me { align-self:flex-end; max-width:86%; background:var(--forest); color:#fff; padding:11px 14px; border-radius:20px 20px 6px 20px; }
.bubble.bot { align-self:flex-start; background:#fff; border:1px solid var(--line); border-radius:20px 20px 20px 6px; }
.demo-invoice { margin-top:12px; background:#F5F5F2; border-radius:10px; padding:14px; }
.demo-invoice .row { justify-content:space-between; }
.demo-invoice h3 { font-size:18px; margin:18px 0 4px; font-weight:500; }
.demo-amount { display:block; font-size:36px; font-weight:500; letter-spacing:-.025em; }
.demo-invoice .meta { font-size:13px; }
.demo-invoice .status { font-size:12px; background:#EAEAE6; }
.demo-lines { display:grid; grid-template-columns:1fr auto; gap:9px; font-size:12px; margin:20px 0; border-top:1px solid #E4E4E0; padding-top:14px; }
.demo-lines span { color:var(--soft); }
.demo-lines b { font-weight:500; }
.demo-invoice .btn { font-size:15.5px; min-height:44px; border-radius:12px; }
.demo-note { align-self:center; font-size:13px; color:var(--soft); display:flex; align-items:center; gap:5px; }
.paid-dot { width:5px; height:5px; background:#F97316; border-radius:50%; }
.composer { display:flex; align-items:center; gap:8px; margin:10px 16px 34px; padding:7px 7px 7px 16px; border:1px solid var(--line); border-radius:22px; font-size:16px; }
.composer-text { flex:1; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.send { width:34px; height:34px; border-radius:50%; background:#F97316; display:grid; place-items:center; flex:none; }
.send svg { width:16px; height:16px; }
@media (max-height:860px) and (min-width:961px) { .rig { --s:.72; } }
@media (max-width:960px) { .hero { grid-template-columns:1fr; gap:28px; min-height:0; } }
@media (max-width:560px) { .rig { --s:.56; } }
.how { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; padding:45px 0 20px; border-top:1px solid var(--line); }
.how h2 { font-weight:500; font-size:25px; letter-spacing:-.025em; margin:14px 0; }
.how-card > span { color:#F97316; font-size:12px; }
.how-card h3 { font-size:15px; font-weight:500; margin:18px 0 9px; }
.how-card p { color:var(--soft); font-size:13px; }
@media (max-width:1000px) { .request-panel { gap:20px; padding:22px; } .app-footer { margin:0 32px; } .hero { gap:20px; }  .hero h1 { font-size:60px; } .how { gap:20px; grid-template-columns:1fr 1fr 1fr; } .how > div:first-child { grid-column:1/-1; } }
@media (max-width:760px) { .bar { flex-wrap:wrap; } .links { gap:0; } .links a,.nav-button { font-size:12px; padding:8px; } .page-heading { align-items:flex-start; } .page-heading h1 { font-size:27px; } .page-heading > .btn { font-size:12px; padding:0 10px; } .request-panel { grid-template-columns:1fr; gap:18px; } .request-panel h2 { font-size:24px; } .request-panel p { max-width:none; } .stats { grid-template-columns:1fr 1fr; } .stats .card { padding:15px; } .stats .card b { font-size:24px; } .ledger-heading { align-items:flex-start; flex-direction:column; gap:0; } .tabs { gap:20px; max-width:100%; } .export-link { padding:10px 0; align-self:flex-end; } .editor-grid { grid-template-columns:1fr; } .editor-grid aside { position:static; display:grid; grid-template-columns:1fr 1fr; gap:14px; } .item-row { grid-template-columns:minmax(0,1fr) 65px 95px 20px; } .form-panel { padding:18px; } .invoice-paper { padding:28px 20px; } .setup-note { flex-direction:column; gap:8px; } .hero { grid-template-columns:1fr; gap:28px; min-height:0; } .hero h1 { font-size:62px; } .hero-copy { padding:12px 0; } .hero-sub { max-width:540px; }  .how { margin-top:20px; } }
@media (max-width:480px) { .top { padding-top:8px; } .brand { font-size:17px; gap:6px; } .bar { padding-left:10px; gap:0; } .links a,.nav-button { padding:8px 6px; font-size:11px; } .wrap { padding-top:22px; } .page-heading { gap:10px; } .page-heading h1 { font-size:24px; } .page-heading .sub { font-size:12px; } .page-heading > .btn { font-size:11px; } .eyebrow { font-size:9px; } .stats .card b { font-size:22px; } .stats .card span,.stats .card small { font-size:11px; } .ledger-search input[name=q] { max-width:none; } .ledger-search input[type=month] { flex:1; } .tabs { gap:16px; } .tabs a { font-size:12px; } .item-row { grid-template-columns:1fr 1fr 22px; } .item-desc { grid-column:1/-1; } .remove-item { padding-top:20px; } .editor-grid aside { grid-template-columns:1fr; gap:0; } .invoice-paper { padding:24px 16px; } .paper-parties { gap:18px; } .paper-parties h3 { font-size:14px; } .paper-parties p { font-size:11px; } .paper-dates { gap:12px; } .paper-dates span { font-size:10px; } .invoice-paper table { overflow-x:auto; } .invoice-paper th,.invoice-paper td { padding-left:4px; padding-right:4px; font-size:10px; } .grand-total b { font-size:21px; } .paper-heading { font-size:9px; } .paper-brand { font-size:15px; } .app-footer { margin:0 16px; gap:10px; } .app-footer span { font-size:10px; } .hero h1 { font-size:54px; } .hero-copy .eyebrow { font-size:9px; } .hero-sub { font-size:16px; } .how { grid-template-columns:1fr; padding-top:30px; gap:26px; } .how-card h3 { margin-top:10px; } .hero-panel { padding:16px; } }
@media print { .top,.app-footer,.page-heading,.invoice-actions,.invoice-history,.warnbox { display:none; } .wrap { padding:0; } .invoice-paper { border:0; box-shadow:none; max-width:none; padding:20px; margin:0; } }

.workspace-link { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-toggle { background:#FFF1E7; color:#9A3412; }
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.workspace-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); }
.workspace-row b { font-weight:500; font-size:14px; }
.upn-qr { width:36mm; height:36mm; float:right; margin:0 0 14px 20px; }
.paper-payment:after { content:''; display:block; clear:both; }
.qr-label { float:right; clear:right; text-align:center; width:36mm; font-size:10px; color:var(--soft); }
.fx-fields { margin-top:16px; }
.chat-shade { position:fixed; inset:0; z-index:50; background:#17171730; }
.chat-drawer { position:fixed; top:16px; right:16px; bottom:16px; z-index:51; width:410px; max-width:calc(100vw - 24px); display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 70px #0003; overflow:hidden; }
.chat-top { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--line); background:#FFF7F1; }
.chat-top b { font-size:17px; font-weight:600; }
.chat-top p { color:var(--soft); font-size:12px; margin-top:5px; }
.chat-close { font-size:24px; }
.chat-messages { overflow-y:auto; padding:20px 16px; flex:1; display:flex; flex-direction:column; gap:16px; }
.chat-message { font-size:13px; line-height:1.6; max-width:95%; border-radius:12px; padding:12px 14px; }
.chat-message p { white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-assistant { align-self:flex-start; background:#F6F6F3; }
.chat-user { align-self:flex-end; background:#FFF0E4; color:#753D20; }
.chat-link { display:block; padding:8px 10px; background:#fff; border:1px solid #E8DDD4; border-radius:8px; text-decoration:none; margin-top:10px; color:#9A3412; font-weight:500; }
.chat-link:hover { background:#FFF5ED; }
.chat-suggestions { padding:0 16px 12px; display:flex; gap:7px; }
.chat-suggestions button { font:400 11px var(--sans); border:1px solid var(--line); background:white; color:var(--soft); padding:6px 9px; border-radius:7px; cursor:pointer; }
#chat-form { border-top:1px solid var(--line); padding:14px 16px; }
#chat-form textarea { font-size:13px; resize:none; }
#chat-form .row { justify-content:space-between; margin-top:10px; }
#chat-form .meta { font-size:10px; max-width:220px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
@media(max-width:760px) { .admin-grid { grid-template-columns:1fr; } .workspace-link { max-width:130px; } .links { justify-content:flex-end; } .bar .brand { margin-right:16px; } }
@media(max-width:480px) { .bar { align-items:center; } .links { flex:1; } .workspace-link { max-width:105px; } .chat-drawer { top:8px; right:8px; bottom:8px; max-width:calc(100vw - 16px); } }
@media print { .chat-drawer,.chat-shade { display:none !important; } }

.company-lookup { padding:16px; border:1px solid #F4D4BB; border-radius:12px; background:#FFF7F0; margin-bottom:22px; }
.lookup-input { display:flex; gap:8px; align-items:center; }
.lookup-input input { min-width:0; flex:1; background:#fff; }
.lookup-input .btn { flex:none; }
.directory-status:not(:empty) { margin-top:10px; font-size:12px; }
.directory-results { margin-top:12px; display:grid; gap:6px; max-height:360px; overflow:auto; }
.directory-result { width:100%; display:grid; gap:5px; padding:12px; text-align:left; font:400 13px/1.45 var(--sans); color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:9px; cursor:pointer; overflow-wrap:anywhere; }
.directory-result:hover { border-color:#F97316; background:#FFFAF6; }
.directory-result b { font-weight:600; }
.directory-result span,.directory-result small { color:var(--soft); font-size:12px; }
.lookup-source { font-size:10px; line-height:1.6; margin-top:12px; color:var(--soft); }
.lookup-source a { text-decoration:underline; text-underline-offset:2px; }