:root { --bg:#fff; --surface:#fff; --ink:#171717; --soft:#6B6B6B; --faint:#9A9A9A; --panel:#F4F4F2; --panel-2:#FAFAF8; --panel-hover:#EAEAE7; --mint:#E9F5EE; --line:#E8E8E6; --forest:#124A30; --forest-2:#18593B; --green:#00B862; --green-soft:#E3F7EC; --amber:#A86400; --amber-soft:#FFF1DA; --red:#C2410C; --red-soft:#FDEBE3; --blue:#2F54D6; --blue-soft:#E9EEFF; --accent:#00B862; --accent-strong:#0E8A4F; --accent-ink:#124A30; --accent-muted:#4F7A63; --accent-soft:#E3F7EC; --accent-softer:#F2FBF6; --accent-line:#BFE8CF; --warn-soft:#FFFBF3; --warn-ink:#6B4000; --shadow:#0003; --shade:#17171730; --closing:#124A30; color-scheme:light; --sans:"Figtree",system-ui,sans-serif; }
/* Dark theme: chosen explicitly, or following the system unless light was chosen. */
:root[data-theme="dark"] { --bg:#131312; --surface:#1C1C1A; --ink:#EDECE8; --soft:#A6A5A0; --faint:#7C7B76; --panel:#24231F; --panel-2:#1A1A18; --panel-hover:#2E2D29; --mint:#14291D; --line:#33322D; --forest:#1F7A4D; --forest-2:#249159; --green:#22C77A; --green-soft:#12301F; --amber:#E0A040; --amber-soft:#33270F; --red:#F07A4A; --red-soft:#3A1A10; --blue:#8AA2FF; --blue-soft:#1B2340; --accent:#22C77A; --accent-strong:#2BD47F; --accent-ink:#9FE3BF; --accent-muted:#8FBFA4; --accent-soft:#12301F; --accent-softer:#0F2219; --accent-line:#24503A; --warn-soft:#2B2210; --warn-ink:#F2C879; --shadow:#000a; --shade:#0009; --closing:#0E2418; color-scheme:dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#131312; --surface:#1C1C1A; --ink:#EDECE8; --soft:#A6A5A0; --faint:#7C7B76; --panel:#24231F; --panel-2:#1A1A18; --panel-hover:#2E2D29; --mint:#14291D; --line:#33322D; --forest:#1F7A4D; --forest-2:#249159; --green:#22C77A; --green-soft:#12301F; --amber:#E0A040; --amber-soft:#33270F; --red:#F07A4A; --red-soft:#3A1A10; --blue:#8AA2FF; --blue-soft:#1B2340; --accent:#22C77A; --accent-strong:#2BD47F; --accent-ink:#9FE3BF; --accent-muted:#8FBFA4; --accent-soft:#12301F; --accent-softer:#0F2219; --accent-line:#24503A; --warn-soft:#2B2210; --warn-ink:#F2C879; --shadow:#000a; --shade:#0009; --closing:#0E2418; color-scheme:dark; } }

:root { --ink:#171717; --soft:#6B6B6B; --faint:#9A9A9A; --panel:#F4F4F2; --mint:var(--accent-soft); --line:#E8E8E6; --forest:var(--accent-ink); --forest-2:#18593B; --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; }
body { margin: 0; background:var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
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; }
.links a:hover, .links a.on { background: var(--panel); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px) 80px; }
.sub { color: var(--soft); margin-top: 6px; }
.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; }
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; }
.panelbox { background: var(--panel); border-radius: 14px; padding: 16px 18px; }
.note { background: var(--mint); color: var(--accent-ink); border-radius: 12px; padding: 12px 14px; margin-top: 16px; }
.warnbox { background: var(--amber-soft); color: var(--warn-ink); border-radius: 12px; padding: 12px 14px; margin-top: 16px; }
.empty { color: var(--soft); background: var(--panel); border-radius: 12px; padding: 18px; margin-top: 12px; }
label.f { display: grid; gap: 5px; font-size: 13px; font-weight: 500; }
input, select, textarea { font: 400 15px var(--sans); color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; background:var(--surface); width: 100%; }
/* Our own chevron, away from the edge (the browser's sits tight against it) */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,184,98,.18); }
input.unsure, select.unsure { border-color: #E5A33A; background: var(--warn-soft); }
.viewer iframe, .viewer img { width: 100%; height: 100%; border: 0; object-fit: contain; background:var(--surface); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
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; }
@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 var(--accent); 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; }
.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:var(--accent); }
.nav-button { font:500 14px var(--sans); padding:8px 12px; border:0; border-radius:9px; background:transparent; cursor:pointer; color:var(--ink); }
.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 var(--accent-line); border-radius:12px; background:var(--accent-softer); 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:var(--accent-ink); }
.request-panel { display:grid; grid-template-columns:1fr 1.15fr; gap:30px; background:var(--accent-soft); 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:var(--accent-muted); font-size:14px; max-width:320px; }
.request-panel .eyebrow { color:var(--accent-muted); }
.request-form { display:grid; gap:8px; }
.request-form textarea { resize:vertical; min-height:80px; border-color:var(--accent-line); 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:var(--panel-2); text-decoration:none; border:1px solid transparent; transition:border-color .15s; }
.stats .card:hover { border-color:var(--accent-line); }
.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:var(--red-soft); }
.stats .late-card b { color:var(--red); }
.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:var(--accent-ink); border-color:var(--accent); 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:var(--accent-strong); }
.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:var(--panel-2); 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:var(--accent-soft); color:var(--accent-strong); 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:var(--panel-2); 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:var(--accent-softer); border-radius:10px; color:var(--accent-ink); 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:var(--red); }
.item-settings { margin-top:20px; }
.summary-panel { background:var(--accent-soft); 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:var(--accent-line); }
.customer-avatar { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); 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 var(--shadow); }
.paper-heading { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--accent-ink); 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(4,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 .vat-table { width:100%; margin:0; border-collapse:collapse; }
.paper-totals .vat-table th, .paper-totals .vat-table td { padding:8px 0; font-size:13px; border-bottom:1px solid var(--line); background:none; }
.paper-totals .vat-table th { color:var(--soft); font-weight:500; text-align:left; }
.paper-totals .vat-table th.num, .paper-totals .vat-table td.num { text-align:right; padding-left:16px; }
.paper-totals .vat-table tbody tr:last-child td { border-bottom:0; }
.paper-totals .grand-total { border-top:1px solid var(--line); padding-top:18px; margin-top:18px; color:var(--accent-ink); 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:var(--panel-2); padding:14px 16px; margin-top:28px; border-radius:10px; font-size:12px; overflow-wrap:anywhere; }
.paper-payment b { font-weight:500; }
.draft-watermark { color:var(--accent-ink); 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:var(--accent); 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-panel { background:var(--panel); 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: var(--surface); 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: var(--ink); }
  .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: var(--ink); }

.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-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:var(--panel-2); }
.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:var(--surface); border:1px solid var(--line); border-radius:20px 20px 20px 6px; }
.demo-invoice { margin-top:12px; background:var(--panel-2); 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:var(--panel-hover); }
.demo-lines { display:grid; grid-template-columns:1fr auto; gap:9px; font-size:12px; margin:20px 0; border-top:1px solid var(--panel-hover); 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:var(--accent); 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:var(--accent); 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; } }
@media (max-width:1000px) { .request-panel { gap:20px; padding:22px; } .app-footer { margin:0 32px; } .hero { gap:20px; }  .hero h1 { font-size:60px; } }
@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; }  }
@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; grid-template-columns:1fr 1fr; } .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; } .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:var(--accent-soft); color:var(--accent-ink); }
.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:42mm; height:42mm; 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:42mm; font-size:10px; color:var(--soft); }
.fx-fields { margin-top:16px; }
.chat-shade { position:fixed; inset:0; z-index:50; background:var(--shade); }
.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:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 70px var(--shadow); overflow:hidden; }
.chat-top { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--line); background:var(--accent-softer); }
.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:var(--panel-2); }
.chat-user { align-self:flex-end; background:var(--accent-soft); color:var(--accent-muted); }
.chat-link { display:block; padding:8px 10px; background:var(--surface); border:1px solid var(--accent-line); border-radius:8px; text-decoration:none; margin-top:10px; color:var(--accent-ink); font-weight:500; }
.chat-link:hover { background:var(--accent-softer); }
.chat-suggestions { padding:0 16px 12px; display:flex; gap:7px; }
.chat-suggestions button { font:400 11px var(--sans); border:1px solid var(--line); background:var(--surface); 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 .chat-attach { cursor:pointer; padding:4px 8px; }
.request-panel { position:relative; }
.request-tools { display:flex; justify-content:flex-start; margin:8px 0; }
.request-attach { font-size:13px; cursor:pointer; }
.request-form .chat-file { margin-top:8px; }
.request-form .chat-file .warn { font-size:12px; }
.lang-switch { display:flex; align-items:center; gap:0; border:0; padding:0; margin:0 0 12px; }
.lang-switch legend { float:left; font-size:12px; color:var(--soft); margin-right:10px; }
.lang-switch label, .lang-buttons button, .lang-buttons span[aria-pressed] { display:inline-flex; }
.lang-switch label input { position:absolute; opacity:0; pointer-events:none; }
.lang-switch label span, .lang-buttons button, .lang-buttons span[aria-pressed] { padding:5px 12px; border:1px solid var(--line); background:var(--surface); color:var(--soft); font:600 12px var(--sans); cursor:pointer; }
.lang-switch label:first-of-type span, .lang-buttons > :first-child { border-radius:8px 0 0 8px; }
.lang-switch label:last-of-type span, .lang-buttons > :last-child { border-radius:0 8px 8px 0; margin-left:-1px; }
.lang-buttons > :only-child { border-radius:8px; margin-left:0; }
.lang-switch input:checked + span, .lang-buttons [aria-pressed="true"] { background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-line); }
.lang-switch input:focus-visible + span { outline:3px solid var(--accent); outline-offset:2px; }
.lang-switch small { margin-left:10px; font-size:11px; color:var(--faint); }
.lang-row { display:flex; justify-content:flex-end; margin:4px 0 -4px; }
.chat-context { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 16px; background:var(--accent-softer); border-bottom:1px solid var(--accent-line); font-size:12px; color:var(--accent-ink); }
.chat-context[hidden] { display:none; }
.chat-context span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-context button { border:0; background:none; color:var(--accent-ink); font:600 12px var(--sans); cursor:pointer; white-space:nowrap; text-decoration:underline; }
.chat-thinking { display:flex; align-items:center; gap:10px; }
.chat-dots { display:inline-flex; gap:4px; }
.chat-dots i { width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.35; animation:chat-dot 1.2s ease-in-out infinite; }
.chat-dots i:nth-child(2) { animation-delay:.15s; } .chat-dots i:nth-child(3) { animation-delay:.3s; }
.chat-status { font-size:13px; color:var(--soft); }
@keyframes chat-dot { 0%, 80%, 100% { opacity:.35; transform:none; } 40% { opacity:1; transform:translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .chat-dots i { animation:none; opacity:.7; } }
.chat-options { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.chat-options button { border:1px solid var(--accent-line); background:var(--surface); color:var(--accent-ink); border-radius:999px; padding:5px 12px; font:500 12px var(--sans); cursor:pointer; }
.chat-options button:hover { background:var(--accent-soft); }
.chat-sep { display:flex; align-items:center; gap:10px; margin:14px 0; font-size:11px; color:var(--faint); }
.chat-sep::before, .chat-sep::after { content:""; flex:1; height:1px; background:var(--line); }
.chat-drop { position:absolute; inset:10px; z-index:3; display:flex; align-items:center; justify-content:center; text-align:center; background:color-mix(in srgb, var(--accent-soft) 94%, transparent); border:2px dashed var(--accent); border-radius:14px; pointer-events:none; }
.chat-drop[hidden] { display:none; }
.chat-drop div { display:grid; justify-items:center; gap:6px; color:var(--accent-ink); }
.chat-drop b { font-size:15px; font-weight:600; }
.chat-drop span { font-size:12px; color:var(--accent-muted); }
.chat-file[hidden] { display:none; }
.chat-file { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; font-size:11px; color:var(--soft); }
.chat-chip { display:inline-flex; align-items:center; gap:4px; max-width:100%; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:2px 4px 2px 8px; }
.chat-chip span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:240px; }
.chat-chip button { border:0; background:none; color:var(--soft); cursor:pointer; font-size:14px; line-height:1; padding:2px 4px; border-radius:6px; }
.chat-chip button:hover { background:var(--panel-hover); color:var(--ink); }
.chat-file .warn { flex-basis:100%; margin:0; color:var(--red); }
#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; } }

.directory-result { width:100%; display:grid; gap:5px; padding:12px; text-align:left; font:400 13px/1.45 var(--sans); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:9px; cursor:pointer; overflow-wrap:anywhere; }
.directory-result:hover { border-color:var(--accent); background:var(--accent-softer); }
.directory-result b { font-weight:600; }
.directory-result span,.directory-result small { color:var(--soft); font-size:12px; }


/* Public pages follow Prejeto: sticky translucent bar, content aligned to its edges, dark closing band. */
.public .top { position:sticky; top:0; z-index:20; }
.public .bar { background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.public .wrap { max-width:calc(1240px + 2 * clamp(16px, 3vw, 32px)); padding-top:12px; padding-bottom:0; }
.public .links { gap:10px; }
.badge { display:inline-flex; align-items:center; gap:6px; background:var(--mint); color:var(--accent-ink); font-weight:600; font-size:14px; padding:5px 11px; border-radius:8px; }
.badge i { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.perks { list-style:none; margin:4px 0 22px; padding:0; display:grid; gap:8px; }
.perks li { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:500; }
.perks li::before { content:""; width:22px; height:22px; flex:none; border-radius:50%; background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23124A30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5'/%3E%3C/svg%3E") center / 14px no-repeat; }
/* Dark: a white check on the brand colour (the dark check on a dark tint did not show) */
:root[data-theme="dark"] .perks li::before { background-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .perks li::before { background-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5'/%3E%3C/svg%3E"); } }
.closing { background:var(--closing); color:#fff; margin-top:clamp(64px, 8vw, 112px); }
.closing .wrap { padding-top:clamp(56px, 7vw, 96px); padding-bottom:40px; }
.closing-text { max-width:640px; margin:0 auto; font-size:clamp(18px, 1.6vw, 21px); line-height:1.5; color:rgba(255,255,255,.88); }
.closing-text + .closing-text { margin-top:18px; }
.closing-text span { color:rgba(255,255,255,.5); }
.closing .footer { margin-top:56px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:12px; font-size:13px; color:rgba(255,255,255,.5); }
.closing .company { margin-top:10px; font-size:13px; color:rgba(255,255,255,.5); }
.upn-placeholder { float:right; display:grid; place-items:center; text-align:center; width:36mm; height:36mm; margin:0 0 14px 20px; padding:10px; border:1.5px dashed var(--accent-line); border-radius:8px; color:var(--soft); font-size:11px; }
@media (max-width:560px) { .public .links .btn { min-height:34px; padding:0 12px; font-size:13px; } .badge { display:none; } .perks li { font-size:16px; } .closing .footer { flex-direction:column; } }
@media (max-width:760px) { .table-shell table { min-width:0; } .table-shell td,.table-shell th { padding-left:6px; padding-right:6px; } }

.form-panel .fields { align-items:start; }
.panel-note { margin:-10px 0 18px; }
.form-panel .fields + .f { margin-top:16px; }
.paper-register + .paper-note { margin-top:6px; }
.legal { max-width:720px; margin:0 auto; padding:clamp(20px,4vw,48px) 0 0; }
.legal h1 { margin:12px 0 0; }
.legal h2 { margin:32px 0 8px; }
.legal p,.legal li { color:var(--ink); line-height:1.6; }
.legal p + p { margin-top:10px; }
.legal ul { padding-left:20px; margin:8px 0; }
.legal .panelbox { margin:4px 0 12px; }

.setup { max-width:880px; margin:4vh auto 0; }
.setup h1 { margin:12px 0 0; font-size:clamp(30px,4vw,44px); letter-spacing:-.03em; }
.setup-options { display:grid; grid-template-columns:1.2fr 1fr; gap:14px; margin-top:28px; }
.setup-card { display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); text-decoration:none; }
.setup-upload { background:var(--accent-soft); border-color:var(--accent-line); }
.setup-card h2 { margin:0; font-size:20px; font-weight:500; letter-spacing:-.02em; }
.setup-card p { color:var(--soft); font-size:14px; }
a.setup-card:hover { border-color:var(--accent-line); }
.setup-step { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--surface); color:var(--accent-strong); font-size:13px; font-weight:600; }
.setup-file { width:100%; display:grid; gap:6px; padding:14px; border:1.5px dashed var(--accent-line); border-radius:12px; background:var(--surface); font-size:12px; color:var(--soft); cursor:pointer; }
.setup-file input { border:0; padding:0; font-size:13px; }
.setup-notice p { margin-top:6px; }
.settings-form input.unsure, .settings-form textarea.unsure { border-color:#E5A33A; background:var(--warn-soft); }
@media (max-width:760px) { .setup-options { grid-template-columns:1fr; } }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.summary-panel .btn + .btn { margin-top:8px; }
.summary-panel .btn + p.meta { margin-top:10px; }

/* Invoice editor: three steps, defaults visible, rarely changed options folded away. */
.step-no { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:9px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong); font-size:12px; font-weight:600; vertical-align:2px; }
.items-foot { justify-content:space-between; margin-top:4px; }
.inline-select { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--soft); }
.inline-select select { width:auto; padding:6px 10px; font-size:13px; }
.tax-fields { gap:16px; }
.chip { font:500 12px var(--sans); border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:6px 10px; border-radius:8px; cursor:pointer; text-align:left; }
.chip:hover { border-color:var(--accent-line); background:var(--accent-softer); }
.clause-suggestions { display:grid; gap:6px; margin-top:8px; }
.clause-suggestions:empty { display:none; }
.due-quick { display:flex; gap:6px; margin-top:-4px; }
.fold { padding:0; }
.fold > summary { display:flex; align-items:center; gap:4px 14px; padding:18px 22px; cursor:pointer; list-style:none; }
.fold > summary::-webkit-details-marker { display:none; }
.fold-title { font-weight:600; font-size:17px; white-space:nowrap; }
.fold-summary { flex:1; min-width:0; color:var(--soft); font-size:14px; }
.fold-action { font-size:13px; font-weight:500; color:var(--accent-strong); }
.fold[open] .fold-action { visibility:hidden; }
.fold[open] > summary { border-bottom:1px solid var(--line); }
.fold-body { padding:18px 22px 22px; }
.fold-body > .fields + .fields, .fold-body > .fields + .f { margin-top:16px; }
.link-button { border:0; background:none; padding:0; font:500 13px var(--sans); color:var(--accent-strong); cursor:pointer; text-decoration:underline; text-underline-offset:3px; justify-self:start; }
.party-search .party-manual { margin-top:6px; }
.party-results { display:grid; gap:6px; margin:4px 0 8px; }
.party-card { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--line); }
.party-card-text { display:grid; gap:3px; min-width:0; }
.party-card-text b { font-weight:600; font-size:15px; }
.party-card-text span { color:var(--soft); font-size:13px; overflow-wrap:anywhere; }
.party .foreign-hint { margin-top:12px; }
.items-panel.compact .item-qty, .items-panel.compact .items-detail { display:none; }
.items-panel.compact .item-row { grid-template-columns:minmax(0,1fr) 130px 24px; }
.items-panel:not(.compact) .items-more { display:none; }
@media (max-width:480px) { .items-panel.compact .item-row { grid-template-columns:minmax(0,1fr) 22px; } .items-panel.compact .item-row .f:not(.item-desc) { grid-column:1; } .fold > summary { flex-wrap:wrap; } .fold-summary { order:3; flex-basis:100%; } .party-card { flex-direction:column; align-items:flex-start; } }
.foreign-hint { color:var(--warn-ink); background:var(--amber-soft); border-radius:8px; padding:8px 10px; }

/* Item rows: description, quantity and price share one height; the description grows downward. */
.item-row { align-items:start; }
.item-row input, .item-row textarea { line-height:20px; }
.item-row textarea { resize:none; overflow:hidden; min-height:40px; }
.remove-item { padding:0; height:40px; margin-top:23px; }
.member-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.btn.light.danger { color:var(--red); }

/* Sending by email and delivery state */
.send-panel { padding:0; margin-bottom:16px; }
.send-panel > summary { padding:18px 22px; cursor:pointer; font-weight:600; font-size:16px; }
.send-panel[open] > summary { border-bottom:1px solid var(--line); }
.send-card { padding:0; overflow:hidden; }
.send-card > summary { list-style:none; display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer; border-radius:14px; }
.send-card > summary::-webkit-details-marker { display:none; }
.send-card > summary:hover { background:var(--panel-hover); }
.send-card > summary:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.send-card[open] > summary { border-bottom:1px solid var(--line); border-radius:14px 14px 0 0; }
.send-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink); flex:none; }
.send-title { display:grid; gap:2px; flex:1; min-width:0; }
.send-title b { font-size:15px; font-weight:600; }
.send-title small { font-size:12.5px; color:var(--soft); }
.send-chevron { color:var(--soft); flex:none; transition:transform .2s; }
.send-card[open] .send-chevron { transform:rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .send-chevron { transition:none; } }
.send-body { padding:20px; }
.send-body > .note { margin:0 0 16px; }
.send-form { display:grid; gap:16px; max-width:none; padding:0; }
.send-form label.f { gap:6px; }
.send-form input, .send-form textarea { width:100%; box-sizing:border-box; }
.send-form .meta { margin:0; }
.send-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:8px; }
@media (max-width:560px) { .send-card > summary { padding:14px 16px; } .send-body { padding:16px; } .send-actions .btn { width:100%; } }
.shares { margin-bottom:16px; }
.shares h2 { margin-bottom:8px !important; }
.share-row { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line); }
.share-row > div { display:grid; gap:3px; align-content:start; }
.share-row b { font-weight:500; font-size:14px; }
.share-state { justify-items:end; text-align:right; }
.share-state .status { justify-self:end; }
.delivery { font-size:11px; margin-top:4px; }
.shared-wrap { max-width:960px; }
.shared-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:8px 0 8px; }
.shared-head h1 { margin-top:6px; }
.shared-foot { text-align:center; margin-top:24px; }
@media (max-width:560px) { .shared-head { flex-direction:column; align-items:flex-start; } .share-row { flex-direction:column; } .share-state { justify-items:start; text-align:left; } }
@media print { .shared-head, .shared-foot { display:none; } }

/* Service date or period */
.service-dates { margin-top:16px; display:grid; gap:10px; }
.f-label { font-size:12px; font-weight:500; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.service-dates:not(.is-period) .service-from { display:none; }
.service-dates:not(.is-period) .fields { grid-template-columns:1fr 1fr; }

/* Per-line VAT rate: shown in the detailed items view when VAT is charged */
.items-panel:not(.compact) .item-row { grid-template-columns:minmax(0,1fr) 80px 110px 92px 24px; }
.items-panel.compact .item-rate, .items-panel.no-vat .item-rate { display:none; }
.items-panel.no-vat:not(.compact) .item-row { grid-template-columns:minmax(0,1fr) 80px 110px 24px; }
.rate-hint { font-weight:400; }
@media (max-width:760px) { .items-panel:not(.compact) .item-row { grid-template-columns:minmax(0,1fr) 64px 92px 80px 20px; } }
@media (max-width:480px) { .items-panel:not(.compact) .item-row, .items-panel.no-vat:not(.compact) .item-row { grid-template-columns:1fr 1fr 22px; } .items-panel:not(.compact) .item-rate { grid-column:1 / 3; } }
.share-row.is-revoked { opacity:.6; }
.share-row form { margin-top:4px; }
.danger-zone { margin-top:20px; border-top:1px solid var(--line); padding-top:14px; }
.danger-zone summary { color:var(--red); cursor:pointer; }
.danger-zone form { margin-top:12px; }

/* The invoice is a printed document: it stays light in the dark theme. */
.invoice-paper { --bg:#fff; --surface:#fff; --ink:#171717; --soft:#6B6B6B; --faint:#9A9A9A; --panel:#F4F4F2; --panel-2:#FAFAF8; --line:#E8E8E6; --accent-ink:#124A30; --accent-strong:#0E8A4F; background:#fff; color:var(--ink); color-scheme:light; }
.theme-toggle { display:inline-grid; place-items:center; min-width:36px; }
.public .theme-toggle { padding:8px 10px; }

/* The phone mockup shows the light app, like the invoice paper. */

/* Account menu (avatar, theme, sign-out) */
.account { position:relative; margin-left:4px; }
.account > summary { list-style:none; cursor:pointer; }
.account > summary::-webkit-details-marker { display:none; }
.avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-size:12px; font-weight:600; letter-spacing:.02em; overflow:hidden; border:1px solid var(--line); }
.avatar:hover, .account[open] .avatar { box-shadow:0 0 0 3px var(--panel); }
.avatar-photo { width:100%; height:100%; object-fit:cover; display:block; }
.account-menu { position:absolute; right:0; top:calc(100% + 10px); z-index:40; width:280px; padding:8px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 48px -16px var(--shadow); }
.account-head { display:grid; gap:2px; padding:10px 10px 12px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.account-head b { font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; }
.account-head span { font-size:12px; color:var(--soft); }
.account-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); padding:4px 10px 6px; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:3px; margin:0 6px 8px; background:var(--panel); border-radius:10px; }
.segmented button { display:grid; justify-items:center; gap:3px; padding:7px 4px; border:0; border-radius:8px; background:transparent; color:var(--soft); font:500 11px var(--sans); cursor:pointer; }
.segmented button[aria-checked="true"] { background:var(--surface); color:var(--ink); box-shadow:0 1px 2px var(--shadow); }
.account-foot { border-top:1px solid var(--line); padding-top:6px; }
.account-item { width:100%; text-align:left; padding:10px; border:0; border-radius:9px; background:transparent; color:var(--ink); font:500 14px var(--sans); cursor:pointer; }
.account-item:hover { background:var(--panel); }
@media (max-width:480px) { .account-menu { position:fixed; left:8px; right:8px; top:70px; width:auto; } }

/* Public header: brand and audience on the left, actions on the right, theme last. */
.public .brand { margin-right:0; }
.public .bar > .badge { margin-left:4px; margin-right:auto; }
.nav-divider { width:1px; height:20px; background:var(--line); margin:0 2px 0 4px; }
.public .theme-toggle { color:var(--soft); }
.public .theme-toggle:hover { color:var(--ink); }

/* Inline edit: a value with a pen; the editor opens below it */
.inline-edit { position:relative; }
.inline-edit > summary { display:inline-flex; align-items:center; gap:8px; list-style:none; cursor:pointer; }
.inline-edit > summary::-webkit-details-marker { display:none; }
.edit-pen { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; color:var(--soft); }
.inline-edit > summary:hover .edit-pen, .inline-edit[open] .edit-pen { background:var(--panel); color:var(--ink); }
.inline-edit-form { position:absolute; z-index:30; top:calc(100% + 6px); left:0; width:300px; display:grid; gap:12px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 48px -16px var(--shadow); }
.inline-edit-form fieldset { border:0; margin:0; padding:0; display:grid; gap:6px; }
.inline-edit-form legend { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); margin-bottom:4px; }
.inline-edit-form label { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.inline-edit-form input[type=radio] { width:auto; accent-color:var(--accent-strong); }

/* /admin/emails */
.mail-sample { margin-top:32px; display:grid; gap:8px; }
.mail-frame { width:100%; max-width:640px; height:620px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.mail-text { white-space:pre-wrap; background:var(--panel); border-radius:12px; padding:12px; font:13px/1.5 ui-monospace,monospace; margin:8px 0 0; }

/* The confirmation dialog (public/confirm.js), the same as Prejeto's in Plačano's colours */
@keyframes confirm-pop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.confirm-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-weight:700; font-size:18px; margin-bottom:4px; }
.confirm-icon::before { content:"✓"; }
@media (max-width:480px) { dialog.confirm { margin:auto auto 16px; } }
@media (prefers-reduced-motion: reduce) { dialog.confirm[open] { animation:none; } }

/* Settings: a checkbox with its explanation (the IBAN takes foreign currencies) */
.check-row { display:flex; gap:12px; align-items:flex-start; margin-top:14px; border:1px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; }
.check-row input { width:18px; height:18px; margin:1px 0 0; flex:none; accent-color:var(--accent-ink); }
.check-row b { display:block; font-size:14px; font-weight:600; }
.check-row small { display:block; margin-top:2px; font-size:13px; color:var(--soft); line-height:1.45; }
/* The invoice: pay in the invoice currency, no conversion (edge to edge at the top of the payment block) */
.paper-currency { margin:-14px -16px 12px; padding:10px 16px; border-radius:10px 10px 0 0; background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }

/* Landing: ways to ask, after sending */
.hero-links { margin:26px 0 10px; color:var(--soft); font-size:14px; } .hero-links a { color:var(--ink); }
.hero-actions.stack { margin-top:0; } .hero-actions.stack .btn { min-width:240px; }
.ways { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:45px 0 30px; border-top:1px solid var(--line); }
.ways > .ways-head { grid-column:1/-1; max-width:560px; } .ways h2, .sent-section h2 { font-weight:500; font-size:25px; letter-spacing:-.025em; margin:14px 0 8px; } .ways-head p, .sent-copy p { color:var(--soft); margin:0; }
.way { display:flex; flex-direction:column; gap:10px; background:var(--panel); border-radius:16px; corner-shape:superellipse(1.17); padding:16px; }
.way-n { color:var(--accent); font-size:12px; } .way .bubble { font-size:14px; padding:10px 13px; } .way .bubble.bot { color:var(--soft); }
.way-file { align-self:flex-end; display:flex; align-items:center; gap:8px; font-size:13px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:7px 10px; }
.way-file b { font-size:10px; color:#fff; background:var(--accent); border-radius:5px; padding:2px 5px; }
.sent-section { display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:center; padding:40px 0 50px; border-top:1px solid var(--line); }
.sent-list { background:var(--panel); border-radius:16px; corner-shape:superellipse(1.17); padding:6px 16px; }
.sent-row { display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); } .sent-row:last-child { border:0; }
.sent-row b { font-weight:500; } .sent-row .meta { display:block; font-size:13px; } .sent-amount { font-variant-numeric:tabular-nums; }
@media (max-width:900px) { .ways { grid-template-columns:1fr 1fr; } .sent-section { grid-template-columns:1fr; gap:20px; } }
@media (max-width:560px) { .ways { grid-template-columns:1fr; } .hero-actions.stack .btn { width:100%; } }
/* /dostop */
.access { max-width:480px; margin:6vh auto 0; }
.access form { display:grid; gap:14px; margin-top:24px; }
.access .btn { width:100%; min-height:46px; }
.access .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* The super admin's pages: the bar inverted in the brand colour (as in Prejeto) */
.top.admin .bar { background:var(--forest); border-color:var(--forest); color:#fff; }
.top.admin .brand { color:#fff; }
.top.admin .links a { color:#fff; }
.top.admin .links a:hover { background:rgba(255,255,255,.14); }
.top.admin .links a.on { background:#fff; color:var(--forest); }
.top.admin .theme-toggle { color:#fff; }
.top.admin .mark circle { fill:#fff; }
.top.admin .mark path { stroke:var(--forest); }
.top.admin .account-menu { color:var(--ink); }
.admin-tag { margin-left:8px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.16); border-radius:6px; padding:2px 7px; }
.admin-stats { grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }