/* TOKENS */
:root {
  --bg:#FAF7F2; --surface:#FFFFFF; --surface-2:#F4F1EC;
  --border:#E9E4DC; --border-strong:#DAD4CA; --border-hover:#BEB6AA;
  --text:#141414; --text-2:#57534E; --text-3:#706A62;
  --coral:#FF5A36; --coral-ink:#C93B1C;
  --accent:#141414; --accent-hover:#2A2A2A; --accent-active:#000000;
  --accent-soft:#FFF1EC; --accent-ring:rgba(20,20,20,.18);
  --draft-bg:#F4F1EC; --draft-text:#57534E; --draft-dot:#8C867E;
  --sent-bg:#EEF4FF; --sent-text:#2450B8; --sent-dot:#3B6FE0;
  --overdue-bg:#FFF1F1; --overdue-text:#B42332; --overdue-dot:#E5484D;
  --paid-bg:#ECF8F1; --paid-text:#1E7A4C; --paid-dot:#30A46C;
  --row-hover:#FAF7F2; --shimmer:#E9E4DC;
  --topbar-bg:rgba(255,255,255,.94); --action-bg:rgba(250,247,242,.95);
  --mobile-nav-bg:rgba(255,255,255,.95); --button-highlight:rgba(255,255,255,.08);
  --paper-ring:rgba(0,0,0,.04);
  --doc-ink:#1C1B22; --doc-muted:#6B6878; --doc-line:#E3E1EA;
  --doc-tint:#F5F4F8; --doc-paper:#FFFFFF;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --shadow-xs:0 1px 2px rgba(20,20,20,.05);
  --shadow-sm:0 1px 3px rgba(20,20,20,.06),0 1px 2px rgba(20,20,20,.04);
  --shadow-md:0 4px 12px -2px rgba(20,20,20,.08),0 2px 4px -2px rgba(20,20,20,.05);
  --shadow-pop:0 12px 32px -8px rgba(20,20,20,.18),0 0 0 1px rgba(20,20,20,.05);
  --shadow-up:0 -6px 16px rgba(20,20,20,.06);
  --mobile-totals-height:68px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:48px;
  --ease:cubic-bezier(.2,.7,.2,1); --fast:120ms; --base:180ms;
}
/* Base */
* { box-sizing:border-box }
:root {
  font-family:"Inter var",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-feature-settings:"cv11","ss01","ss03"; font-synthesis:none;
  -webkit-font-smoothing:antialiased; font-size:14px; color:var(--text-2); background:var(--bg);
}
body { margin:0; line-height:20px }
button,input,textarea,select { font:inherit }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color:transparent }
button,summary { cursor:pointer }
a { color:var(--accent); text-decoration:none; text-underline-offset:3px }
a:hover { text-decoration:underline }
h1,h2,h3,p { margin:0 }
h1 { font-size:22px; line-height:28px; font-weight:600; letter-spacing:-.02em; color:var(--text) }
h2 { font-size:15px; line-height:22px; font-weight:600; letter-spacing:-.01em; color:var(--text) }
h3 { font-size:14px; color:var(--text) }
[hidden] { display:none!important }
.eyebrow { display:none }
.muted,.field-note { color:var(--text-3) }
.field-note { font-size:12px; line-height:18px; margin:8px 0 16px }
.right { text-align:right }
.numeric,output,.kpi-value,.date-cell,input[type="date"],#editor-number,.paper-table,.paper-totals { font-variant-numeric:tabular-nums }
.screen-reader { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }
.skip-link { position:fixed; left:16px; top:-80px; z-index:100; padding:12px 20px; border-radius:8px; background:var(--surface) }
.skip-link:focus { top:16px }
:focus:not(:focus-visible) { outline:none }
:focus-visible { outline:1px solid var(--accent); outline-offset:0; box-shadow:0 0 0 3px var(--accent-ring)!important; border-color:var(--accent)!important }
body.pointer-focus :focus-visible { box-shadow:none!important; outline:none }
button,a,summary,.invoice-table tbody tr {
  transition:background-color var(--base) var(--ease),border-color var(--base) var(--ease),box-shadow var(--base) var(--ease),color var(--base) var(--ease),transform var(--base) var(--ease);
}
svg { flex-shrink:0; vertical-align:middle; max-width:64px; max-height:64px }
/* Shell */
.sidebar { width:240px; position:fixed; inset:0 auto 0 0; background:var(--bg); border-right:1px solid var(--border); padding:0 16px 24px; display:flex; flex-direction:column; z-index:40 }
.brand { height:56px; display:flex; align-items:center; gap:8px; padding:0 8px; color:var(--text); text-decoration:none; font-size:22px; font-weight:700; letter-spacing:-.04em }
.brand-icon { width:91px; height:22px; max-width:none }
.beta { font-size:10px; line-height:16px; letter-spacing:.08em; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); padding:0 4px; border-radius:4px }
.app-nav { display:flex; flex-direction:column; gap:4px; margin-top:24px }
.app-nav a { font-size:14px; display:flex; align-items:center; gap:12px; border:1px solid transparent; border-radius:8px; padding:0 12px; height:32px; position:relative; color:var(--text-2); text-decoration:none; font-weight:500 }
.app-nav a:hover { background:var(--surface-2) }
.app-nav a[aria-current="page"] { background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-xs); color:var(--text) }
.app-nav svg { width:16px; height:16px; color:var(--text-3); stroke-width:1.5 }
.app-nav a[aria-current="page"] svg { color:var(--text) }
.app-nav a[aria-current="page"]::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--coral) }
.sidebar-foot { position:relative; margin-top:auto; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:12px; color:var(--text-2); font-size:12px }
.sidebar-foot::before { content:""; position:absolute; top:-8px; left:0; right:0; border-top:1px solid var(--border) }
.sidebar-foot p { margin-top:4px; font-size:12px; color:var(--text-3) }
.local-dot { display:inline-block; flex-shrink:0; width:6px; height:6px; border-radius:999px; background:var(--paid-dot); margin-right:4px }
.app-main { margin-left:240px; min-width:0 }
.topbar { position:sticky; top:0; z-index:35; height:56px; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 32px; background:var(--topbar-bg); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--border) }
.topbar-actions { display:flex; align-items:center; gap:20px }
#save-state { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-3) }
.app-main:has(.skeleton-table) #save-state { font-size:0 }
.app-main:has(.skeleton-table) #save-state::before { background:var(--shimmer); animation:pulse 1.2s var(--ease) infinite }
#save-state::before { content:""; width:6px; height:6px; border-radius:999px; background:var(--paid-dot); flex-shrink:0 }
main { max-width:1200px; margin:0 auto; padding:32px 32px 48px; min-width:0 }
.workspace-status { display:none }
/* Components */
button,.action-menu summary { border:1px solid transparent; border-radius:8px; padding:0 16px; min-height:36px; font-weight:500; line-height:20px; background:transparent; color:var(--text-2) }
button { display:inline-flex; align-items:center; justify-content:center; gap:8px }
button:disabled { opacity:.45; cursor:default }
button:hover:not(:disabled),summary:hover { background:var(--surface-2) }
.primary { background:var(--accent); color:var(--bg); box-shadow:inset 0 1px 0 var(--button-highlight),var(--shadow-xs) }
.primary:hover:not(:disabled) { background:var(--accent-hover) }
.primary:active:not(:disabled) { background:var(--accent-active) }
button:active:not(:disabled),.action-menu summary:active { transform:translateY(.5px) }
.icon-button:active:not(:disabled),.row-actions summary:active { transform:scale(.98) }
.secondary,.action-menu summary { background:var(--surface); border-color:var(--border-strong); box-shadow:var(--shadow-xs) }
.secondary:hover:not(:disabled),.action-menu summary:hover { border-color:var(--border-strong) }
.text-button { padding:0 8px; color:var(--accent); font-size:13px }
.danger { color:var(--text-2) }
.danger:hover:not(:disabled) { color:var(--overdue-text); background:var(--overdue-bg) }
.icon-button { width:28px; min-height:28px; padding:4px; color:var(--text-3) }
label { display:block; font-size:13px; font-weight:500; color:var(--text-2); margin:0 0 16px; min-width:0 }
input,textarea,select { font-weight:400; display:block; width:100%; min-width:0; max-width:100%; margin-top:8px; border:1px solid var(--border-strong); border-radius:8px; padding:8px 12px; background:var(--surface); color:var(--text); min-height:36px; line-height:20px; transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease) }
input:hover,textarea:hover,select:hover { border-color:var(--border-hover) }
input::placeholder,textarea::placeholder { color:var(--text-3) }
textarea { resize:vertical; min-height:72px }
select { appearance:none; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center }
input[type="checkbox"] { appearance:none; -webkit-appearance:none; width:16px; height:16px; min-height:0; padding:0; margin:0; border-radius:6px; border:1px solid var(--border-strong); background:var(--surface); flex-shrink:0 }
input[type="checkbox"]:checked { background-color:var(--accent); border-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8 3 3 5-6'/%3E%3C/svg%3E"); background-position:center; background-repeat:no-repeat }
input[type="radio"] { accent-color:var(--accent) }
.check-label { display:flex; align-items:center; gap:8px; min-height:28px }
.fields { display:grid; gap:0 16px }
.fields.two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.list-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-xs); overflow:clip }
.list-card:has(details[open]) { overflow:visible }
.filter-chips,.mobile-tabs { display:flex; gap:4px; background:var(--surface-2); border-radius:8px; padding:4px; min-width:0 }
.filter-chips button { font-size:13px; min-height:28px; padding:0 8px; white-space:nowrap; color:var(--text-2); border-radius:6px }
.filter-chips button[aria-pressed="true"],.mobile-tabs button[aria-selected="true"] { background:var(--surface); box-shadow:var(--shadow-xs); color:var(--text) }
.pill { --status-bg:var(--draft-bg); --status-text:var(--draft-text); --status-dot:var(--draft-dot); display:inline-flex; align-items:center; gap:8px; height:22px; border-radius:999px; padding:0 8px; font-size:12px; font-weight:500; white-space:nowrap; background:var(--status-bg); color:var(--status-text) }
.pill::before { content:""; width:6px; height:6px; border-radius:999px; background:var(--status-dot) }
.pill.sent { --status-bg:var(--sent-bg); --status-text:var(--sent-text); --status-dot:var(--sent-dot) }
.pill.overdue { --status-bg:var(--overdue-bg); --status-text:var(--overdue-text); --status-dot:var(--overdue-dot) }
.pill.paid,.pill.partial,.pill.credit { --status-bg:var(--paid-bg); --status-text:var(--paid-text); --status-dot:var(--paid-dot) }
.pill.partial,.pill.credit { box-shadow:inset 0 0 0 1px var(--paid-dot) }
.action-menu { position:relative; width:max-content }
.action-menu summary { list-style:none; display:flex; align-items:center; justify-content:center; gap:8px }
.action-menu summary::-webkit-details-marker { display:none }
.menu-panel,.combo-options { position:absolute; z-index:30; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow-pop); padding:4px; animation:menu-in var(--fast) var(--ease); transform-origin:top right }
.action-menu:not([open]) > .menu-panel { display:none }
.menu-panel { max-width:calc(100vw - 32px); right:0; top:calc(100% + 4px); width:208px }
.menu-panel button { display:flex; justify-content:flex-start; width:100%; min-height:32px; text-align:left; font-size:13px; border-radius:var(--r-sm) }
.empty-state { text-align:center; padding:64px 24px }
.empty-icon { position:relative; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; width:48px; height:48px; border-radius:10px; background:var(--accent-soft); color:var(--coral-ink) }
.empty-icon::before { content:""; position:absolute; inset:-8px; border:1px dashed var(--border-strong); border-radius:14px }
.empty-icon svg { width:26px; height:26px }
.empty-state h2 { font-size:15px; margin-bottom:8px }
.empty-state p { color:var(--text-2); max-width:360px; margin:0 auto 24px; font-size:14px }
.form-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:20px }
.empty-state .form-actions { justify-content:center }
.form-card { padding:24px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow-xs); margin-bottom:24px; min-width:0 }
.form-card>h2,.section-heading { margin-bottom:16px }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px }
.section-heading .muted { font-size:12px }
.notice { font-size:13px; border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:16px; overflow-wrap:anywhere }
.notice.error { color:var(--overdue-text); background:var(--overdue-bg); border-color:var(--overdue-dot) }
.notice ul { padding-left:20px; margin-bottom:0 }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:100; max-width:calc(100vw - 32px); width:max-content; background:var(--text); color:var(--surface); padding:12px 20px; border-radius:var(--r-md); font-size:13px; box-shadow:var(--shadow-pop); animation:toast-in var(--base) var(--ease) }
.toast::before { content:"✓"; color:var(--paid-dot); margin-right:8px }
.skeleton { display:block; height:14px; border-radius:var(--r-sm); background:linear-gradient(90deg,var(--surface-2) 25%,var(--shimmer) 50%,var(--surface-2) 75%); background-size:200% 100%; animation:shimmer 1.2s linear infinite }
.skeleton-value { height:34px; width:65% }
.skeleton-row { display:grid; grid-template-columns:1fr 1.4fr 1fr .8fr; gap:24px; height:52px; padding:16px; border-bottom:1px solid var(--border) }
.skeleton-header { display:grid; grid-template-columns:1fr 1.4fr 1fr .8fr; align-items:center; gap:24px; height:36px; padding:0 16px; background:var(--surface-2); border-bottom:1px solid var(--border) }
.skeleton-header .skeleton { width:40%; height:8px; background:var(--shimmer) }
.skeleton-row .skeleton:nth-child(1) { width:30% }
.skeleton-row .skeleton:nth-child(2) { width:55% }
.skeleton-row .skeleton:nth-child(3) { width:40% }
.skeleton-row .skeleton:last-child { width:25%; margin-left:auto }
.skeleton-row:last-child { border-bottom:0 }
@keyframes shimmer { to { background-position:-200% 0 } }
@keyframes menu-in { from { opacity:0; transform:scale(.98) } to { opacity:1; transform:scale(1) } }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,8px) } to { opacity:1; transform:translate(-50%,0) } }
@keyframes pulse { 50% { opacity:.5 } }
/* Pages: invoices */
.kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.kpi { border:1px solid var(--border); background:var(--surface); border-radius:var(--r-md); padding:20px; min-width:0; box-shadow:var(--shadow-xs) }
.kpi h2 { display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:13px; font-weight:500; margin-bottom:12px }
.kpi h2::before { content:""; width:8px; height:8px; border-radius:999px; background:var(--sent-dot) }
.kpi:nth-child(2) h2::before { background:var(--overdue-dot) }
.kpi:nth-child(3) h2::before { background:var(--paid-dot) }
.kpi-value { font-size:28px; line-height:34px; font-weight:600; letter-spacing:-.025em; overflow-wrap:anywhere; color:var(--text) }
.kpi-value:not(:has(.cur)) { font-size:22px; font-weight:400; color:var(--text-3) }
.kpi-value>span { display:block }
.kpi-value .cur { display:inline; font-size:12px; font-weight:500; color:var(--text-3); margin-right:8px }
.kpi p { font-size:12px; color:var(--text-3); margin-top:8px; line-height:18px }
#kpi-note { margin:12px 0 24px; padding-left:20px; position:relative }
#kpi-note::before { content:"ⓘ"; position:absolute; left:0 }
.list-toolbar { padding:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--border) }
.list-title { font-size:15px; font-weight:600; margin-right:auto }
.list-title .muted { font-size:13px; font-weight:400; margin-left:8px }
.search-label { position:relative; margin:0; width:280px; max-width:100%; min-width:180px }
.search-label>svg { position:absolute; left:12px; top:10px; color:var(--text-3) }
.search-label input { margin:0; padding-left:36px }
.invoice-table { width:100%; border-collapse:collapse; font-size:14px; table-layout:auto }
.invoice-table th { font-size:12px; line-height:16px; letter-spacing:.01em; text-align:left; font-weight:500; color:var(--text-3); height:36px; padding:8px 16px; background:var(--surface-2); border-bottom:1px solid var(--border) }
.invoice-table th.right { text-align:right }
.invoice-table td { height:52px; padding:8px 16px; border-bottom:1px solid var(--border); overflow-wrap:anywhere; max-width:240px }
.invoice-table td:nth-child(2) { color:var(--text) }
.invoice-table tr:last-child td { border-bottom:0 }
.invoice-table tbody tr { transition:background-color var(--fast) var(--ease) }
.invoice-table tbody tr:hover { background:var(--row-hover); cursor:pointer }
.invoice-link { color:var(--text); font-weight:500; text-decoration:none }
.invoice-link:hover { text-decoration:underline }
.date-cell { font-size:14px; line-height:18px; white-space:nowrap }
.date-cell span { display:block; color:var(--text-3); font-size:12px; line-height:16px }
.sample-label { display:inline-block; font-weight:500; border:1px solid var(--border); color:var(--text-3); background:var(--surface-2); font-size:11px; padding:0 4px; border-radius:6px; margin-left:8px; line-height:18px }
.cur { color:var(--text-3); font-size:12px }
.row-actions .action-menu summary { border-color:transparent; background:transparent; box-shadow:none; width:28px; min-height:28px; padding:4px; opacity:.4 }
.invoice-table tr:hover summary,.invoice-table tr:focus-within summary,.row-actions details[open] summary { opacity:1 }
/* Pages: editor */
.editor-toolbar { position:sticky; top:56px; z-index:25; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; margin-bottom:24px; background:var(--action-bg); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--border) }
.editor-heading { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0 }
.editor-heading>div { display:flex; align-items:center; gap:12px; min-width:0 }
.editor-heading h2 { font-size:18px; font-weight:600; overflow-wrap:anywhere }
.back-link { display:inline-flex; align-items:center; gap:4px; color:var(--text-2); font-size:13px; text-decoration:none; border-radius:6px }
.document-actions { display:flex; align-items:center; gap:8px }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start }
.editor { min-width:0 }
.form-tabs { display:flex; gap:24px; margin-bottom:24px; border-bottom:1px solid var(--border) }
.form-tabs button { border-radius:0; padding:0 4px; height:36px; color:var(--text-3); border-bottom:2px solid transparent }
.form-tabs button[aria-selected="true"] { color:var(--text); border-bottom-color:var(--accent) }
.seller-details { border-top:1px solid var(--border); margin-top:16px; padding-top:16px }
details:not(.action-menu)>summary { display:flex; align-items:center; gap:4px; list-style:none; color:var(--text-2); font-size:13px; font-weight:500; padding:4px 0; overflow-wrap:anywhere }
details:not(.action-menu)>summary::-webkit-details-marker { display:none }
details:not(.action-menu)>summary::before { content:""; flex:0 0 16px; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform 180ms var(--ease) }
details[open]:not(.action-menu)>summary::before { transform:rotate(90deg) }
details:not(.action-menu)>summary:hover { color:var(--text) }
.seller-details[open] summary { margin-bottom:16px }
.item-labels,.item-main { display:grid; grid-template-columns:minmax(80px,1fr) 56px 88px 24px 72px 28px; gap:4px; align-items:center }
.item-labels { font-size:12px; color:var(--text-3); margin-bottom:8px }
.item { border-bottom:1px solid var(--border); padding:12px 0 }
.item-main input:not([type="checkbox"]) { margin:0; padding:8px 8px; font-variant-numeric:tabular-nums }
.item-main .line-field { margin:0 }
.line-field>span,.item-tax>span { display:none }
.item-main .item-tax { margin:0; justify-content:center }
.line-field input { text-align:right; font-variant-numeric:tabular-nums }
.item-labels>span:nth-child(2),.item-labels>span:nth-child(3) { text-align:right; padding-right:8px }
.remove-item:hover:not(:disabled) { color:var(--overdue-text); background:var(--overdue-bg) }
.item-amount { text-align:right; font-size:14px; color:var(--text); font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.combo { position:relative; margin-bottom:16px }
.combo>label { margin-bottom:0 }
.combo input { margin-top:8px }
.item-description.combo,.item-description.combo input { margin:0 }
.combo-options { inset:calc(100% + 4px) 0 auto; max-height:256px; overflow-y:auto }
.combo-options [role="option"] { padding:8px 12px; min-height:32px; cursor:pointer; border-radius:var(--r-sm); overflow-wrap:anywhere }
.combo-options [aria-selected="true"],.combo-options [role="option"]:hover { background:var(--accent-soft); color:var(--accent) }
.combo-options small { display:block; color:var(--text-3) }
.form-totals { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 24px; font-size:12px; color:var(--text-3) }
.form-totals strong { display:block; font-size:15px; font-weight:600; color:var(--text); margin-top:4px; font-variant-numeric:tabular-nums }
.form-totals>span:last-child { text-align:right }
.preview-panel { min-width:0; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-2); padding:24px }
.preview-heading { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--text-3); margin-bottom:16px }
.preview-heading .local-dot { animation:pulse 2s ease-in-out infinite }
.preview-heading>span:last-child { margin-left:auto }
.preview-footnote { font-size:11px; text-align:center; color:var(--text-3); margin-top:16px }
.mobile-tabs { display:none }
.items-card { container-type:inline-size }
@container(max-width:420px) {
  .item-labels { display:none }
  .item-main { grid-template-columns:64px 104px minmax(24px,1fr) 28px; gap:4px; align-items:end }
  .item-description { grid-column:1/-1 }
  .item-main .line-field>span { display:block; font-size:12px; text-align:right; padding-right:8px; margin-bottom:8px }
  .item-tax { min-height:36px }
  .item-amount { grid-column:1/4; grid-row:3 }
  .item-main .remove-item { grid-column:4; grid-row:2 }
}
/* Pages: catalogue and settings */
.page-intro { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 24px; color:var(--text-2); font-size:14px }
.catalog-row { display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 16px; border-bottom:1px solid var(--border) }
.catalog-row:last-child { border:0 }
.catalog-row .catalog-info { flex:1; min-width:0; overflow-wrap:anywhere }
.catalog-row strong { display:block; font-size:14px; color:var(--text); font-weight:500 }
.catalog-row .catalog-info>span { display:block; color:var(--text-3); font-size:13px; white-space:pre-line }
.avatar { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:999px; background:var(--accent-soft); color:var(--coral-ink); font-size:12px; font-weight:600; flex-shrink:0 }
.row-buttons { display:flex; gap:4px; flex-shrink:0 }
.row-buttons button { min-height:30px; padding:0 8px; font-size:13px }
.row-buttons .secondary { background:transparent; box-shadow:none; border-color:transparent }
.catalog-form,.settings-form,.settings-backup,#settings-page { max-width:720px }
.settings-backup { margin-top:24px }
.settings-backup p { font-size:13px; color:var(--text-3); margin-bottom:16px }
.card-description { color:var(--text-3); font-size:13px; margin:-8px 0 16px }
/* Invoice document */
.invoice-paper {
  background:var(--doc-paper);
  min-height:570px;
  padding:36px 32px 24px;
  box-shadow:var(--shadow-md);
  color:var(--doc-ink);
  font-size:11px;
  position:relative;
  overflow-wrap:anywhere
}
.paper-header {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-bottom:24px;
  border-bottom:1px solid var(--doc-line)
}
.paper-brand {
  font-size:15px;
  letter-spacing:-.4px;
  font-weight:700;
  max-width:55%
}
.paper-brand .seller-contact {
  font-size:11px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.6;
  color:var(--doc-muted);
  margin-top:8px;
  white-space:pre-line
}
.paper-invoice-title {
  text-align:right
}
.paper-invoice-title h2 {
  font-size:22px;
  font-weight:500;
  letter-spacing:-1px
}
.paper-number {
  color:var(--doc-muted);
  font-size:11px;
  margin-top:4px
}
.paper-parties {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:24px 0
}
.paper-client {
  max-width:55%;
  line-height:1.65
}
.paper-kicker {
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--doc-muted);
  font-weight:600;
  margin-bottom:8px
}
.paper-client strong {
  font-size:11px;
  font-weight:600
}
.paper-client div:not(:first-child) {
  white-space:pre-line;
  color:var(--doc-muted);
  font-size:11px
}
.paper-dates {
  font-size:11px;
  line-height:2.2;
  min-width:130px
}
.paper-dates div {
  display:flex;
  justify-content:space-between;
  gap:12px
}
.paper-dates span {
  color:var(--doc-muted)
}
.paper-table {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:11px
}
.paper-table th {
  background:var(--doc-tint);
  font-size:11px;
  letter-spacing:1px;
  text-align:left;
  color:var(--doc-muted);
  font-weight:600;
  padding:8px 8px
}
.paper-table th:first-child {
  width:47%
}
.paper-table th:nth-child(2) {
  width:12%
}
.paper-table th:nth-child(3) {
  width:19%
}
.paper-table th:last-child {
  width:22%
}
.paper-table td {
  padding:12px 8px;
  border-bottom:1px solid var(--doc-line);
  vertical-align:top;
  white-space:pre-line
}
.paper-table .right {
  text-align:right
}
.paper-table .tax-detail {
  font-size:11px;
  color:var(--doc-muted);
  display:block;
  margin-top:4px
}
.paper-totals {
  max-width:236px;
  margin:20px 0 24px auto;
  line-height:2.3;
  font-size:11px
}
.paper-totals>div {
  display:flex;
  justify-content:space-between;
  gap:16px
}
.paper-totals span {
  color:var(--doc-muted)
}
.paper-totals .grand-total {
  border-top:1px solid var(--doc-line);
  margin-top:8px;
  padding-top:8px;
  font-weight:700
}
.paper-totals .balance {
  background:var(--doc-tint);
  margin:8px -8px 0;
  padding:8px 8px;
  font-size:13px;
  font-weight:700;
  border-radius:6px
}
.paper-totals .balance span {
  color:var(--doc-ink)
}
.paper-note {
  border-top:1px solid var(--doc-line);
  padding-top:16px;
  margin-top:16px;
  white-space:pre-line;
  font-size:11px;
  color:var(--doc-muted);
  line-height:1.65
}
.paper-note .paper-kicker {
  margin-bottom:4px;
  white-space:normal
}
.paper-currency {
  font-size:11px;
  color:var(--doc-muted);
  margin-top:16px;
  line-height:1.6
}
/* Invoice colours stay neutral so future customer templates own the document. */
.invoice-paper {
  color:var(--doc-ink);
  box-shadow:var(--shadow-md);
  border-radius:6px;
  width:100%;
  min-height:660px;
  aspect-ratio:210/297;
  padding:36px 24px
}
.paper-brand {
  color:var(--doc-ink)
}
.paper-table th {
  background:var(--doc-tint)
}
.paper-totals .balance {
  background:var(--doc-tint)
}
.paper-totals .balance span {
  color:var(--doc-ink)
}
.paper-header,.paper-totals .grand-total {
  border-color:var(--doc-line)
}
.paper-table td,.paper-note {
  border-color:var(--doc-line)
}
.paper-currency,.paper-kicker,.paper-number,.paper-client div:not(:first-child),.paper-brand .seller-contact,.paper-dates span,.paper-table th,.paper-table .tax-detail,.paper-totals span,.paper-note {
  color:var(--doc-muted)
}

/* Responsive */
@media(min-width:760px) {
  .list-title { order:0 }
  .list-toolbar .search-label { order:1 }
  .list-toolbar .filter-chips { order:2; flex-basis:100%; width:max-content; flex-grow:0 }
}
@media(min-width:1100px) {
  .list-toolbar .filter-chips { order:1; flex-basis:auto; width:auto }
  .list-toolbar .search-label { order:2; width:220px }

  .workspace-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .preview-panel { position:sticky; top:164px }
  .invoice-paper { min-height:540px; padding:28px 24px }
  .paper-dates { min-width:110px }
}
@media(min-width:1440px) {
  .item-labels,.item-main { grid-template-columns:minmax(80px,1fr) 56px 88px 24px 80px 28px; gap:8px }
  .invoice-paper { padding:40px 24px; min-height:660px }
}
@media(min-width:760px) and (max-width:1099px) {
  .editor-toolbar { flex-wrap:wrap }
  .preview-panel { max-width:720px; width:100%; margin:auto }
  .invoice-table th,.invoice-table td { padding-left:8px; padding-right:8px }
  .kpi-value { font-size:22px }
}
@media(hover:hover) and (pointer:fine) {
  .row-buttons { opacity:.6; transition:color var(--base) var(--ease) }
  .catalog-row:hover .row-buttons,.catalog-row:focus-within .row-buttons { opacity:1 }
}
@media(hover:none) {
  .row-actions .action-menu summary { opacity:1 }
}
@media(max-width:759px) {
  button,.action-menu summary { min-height:40px }
  input,select { min-height:40px; font-size:18px }
  textarea { font-size:18px }
  .sidebar { inset:auto 0 0; width:100%; height:calc(56px + env(safe-area-inset-bottom)); padding:0 8px env(safe-area-inset-bottom); border-right:0; border-top:1px solid var(--border); background:var(--mobile-nav-bg); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px) }
  .sidebar>.brand,.sidebar-foot { display:none }
  .app-nav { flex-direction:row; margin:0; gap:4px; justify-content:space-around }
  .app-nav a { flex:1; min-width:0; height:55px; flex-direction:column; gap:4px; padding:8px 4px; font-size:11px; line-height:16px; color:var(--text-3); border:0; border-radius:0 }
  .app-nav a[aria-current="page"] { background:transparent; box-shadow:none; color:var(--text) }
  .app-nav a[aria-current="page"]::before { display:none }
  .app-nav a[aria-current="page"]::after { content:""; position:absolute; bottom:2px; left:calc(50% - 2px); width:4px; height:4px; border-radius:50%; background:var(--coral) }
  .app-nav svg { width:16px; height:16px }
  .app-main { margin:0 }
  .topbar { height:52px; padding:0 16px; gap:12px }
  .topbar .primary { min-height:36px; padding:0 12px; font-size:13px; white-space:nowrap }
  .new-label { display:none }
  .new-label-mobile { display:inline }
  .topbar-actions { gap:12px }
  .topbar h1 { font-size:20px; font-weight:600; letter-spacing:-.02em }
  #save-state { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }
  main { padding:24px 16px calc(56px + var(--mobile-totals-height) + 16px + env(safe-area-inset-bottom)) }
  .kpi-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:12px; padding-bottom:4px }
  .kpi-grid::-webkit-scrollbar { display:none }
  .kpi { flex:0 0 78%; scroll-snap-align:start; padding:16px }
  .kpi h2 { font-size:12px; margin-bottom:8px }
  .kpi p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .kpi-grid,.filter-chips { -webkit-mask-image:linear-gradient(to right, #000 85%, transparent); mask-image:linear-gradient(to right, #000 85%, transparent) }
  .kpi-value,.kpi-value:not(:has(.cur)) { font-size:22px; line-height:28px; font-weight:600 }
  .skeleton-header { display:none }
  .skeleton-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); height:auto; padding:16px; gap:12px }
  .skeleton-row .skeleton:nth-child(3),.skeleton-row .skeleton:nth-child(4) { display:none }
  .skeleton-row .skeleton:nth-child(2) { margin-left:auto }
  .list-title { display:none }
  .list-toolbar { padding:12px; gap:12px }
  .filter-chips { width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none }
  .filter-chips button { flex-shrink:0 }
  .search-label { width:100%; min-width:0 }
  .search-label>svg { top:12px }
  .invoice-table,.invoice-table tbody { display:block }
  .invoice-table thead { display:none }
  .invoice-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto 28px; padding:14px 16px; gap:8px; border-bottom:1px solid var(--border); align-items:start }
  .invoice-table tr:last-child { border:0 }
  .invoice-table td { display:block; border:0; padding:0; height:auto; max-width:none; min-width:0; font-size:14px }
  .invoice-table td:nth-child(1) { grid-column:1; grid-row:1; display:flex; align-items:center; gap:4px }
  .invoice-link { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .sample-label { flex-shrink:0; margin-left:0 }
  .invoice-table td:nth-child(2) { grid-column:1; grid-row:2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .invoice-table td:nth-child(3) { grid-column:1/3; grid-row:3; font-size:12px; color:var(--text-3); display:flex; gap:12px; flex-wrap:wrap }
  .invoice-table td:nth-child(3) span { font-size:12px }
  .invoice-table td:nth-child(4) { grid-column:2; grid-row:1; font-weight:500 }
  .invoice-table td:nth-child(5) { grid-column:2; grid-row:2; text-align:right }
  .invoice-table td:nth-child(6) { grid-column:3; grid-row:1/3; align-self:center }

  .empty-state { padding:32px 16px }
  .editor-toolbar { display:contents }
  .editor-heading { flex-direction:column; align-items:flex-start; width:100%; margin-bottom:12px }
  .editor-heading>div { gap:8px }
  .editor-heading h2 { font-size:18px; font-weight:600 }
  .document-actions { position:sticky; top:52px; z-index:25; width:calc(100% + 32px); gap:8px; margin:0 -16px 24px; padding:12px 16px; background:var(--action-bg); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--border) }
  #share-button,#print-button,#more-menu summary { width:40px; height:40px; min-height:40px; flex:0 0 40px; padding:0 }
  #share-button:active,#print-button:active,#more-menu summary:active { transform:scale(.98) }
  #more-menu { flex:0 0 40px; min-width:0 }
  .document-actions .action-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }
  .document-actions button,.document-actions summary { padding:0 8px; font-size:12px }
  .document-actions .primary { flex:1; white-space:nowrap }
  .mobile-tabs { display:flex; margin-bottom:16px }
  .mobile-tabs button { flex:1; min-height:36px; color:var(--text-3) }
  .workspace-grid { display:block }
  .preview-panel { display:none; padding:24px }
  .view-preview .preview-panel { display:block }
  .view-preview .editor { display:none }
  .form-card { padding:24px 16px }
  .fields.two { gap:0 12px }
  .seller-details .fields.two { grid-template-columns:1fr }
  .item-labels { display:none }
  .item { padding:16px 0 }
  .item-main { grid-template-columns:64px 104px minmax(24px,1fr) 28px; gap:8px; align-items:end }
  .item-description { grid-column:1/-1 }
  .item-main .line-field>span { display:block; text-align:right; padding-right:8px; font-size:12px; color:var(--text-3); margin-bottom:8px }
  .item-main input:not([type="checkbox"]) { padding:8px 8px }
  .item-main .item-tax { min-height:40px }
  .item-main .item-tax>span { display:none }
  .item-main .item-tax input { width:16px; min-height:0 }
  .item-main .item-amount { grid-column:1/4; grid-row:3; min-height:40px; display:flex; align-items:center; justify-content:flex-end; font-size:14px }
  .item-main .icon-button { width:28px; height:28px; min-height:28px; grid-column:4; grid-row:2; align-self:center }
  .combo-options [role="option"] { min-height:40px }
  .form-totals { position:fixed; bottom:calc(56px + env(safe-area-inset-bottom)); left:0; right:0; height:var(--mobile-totals-height); z-index:40; padding:12px 16px; box-shadow:var(--shadow-up); border-radius:0; border:0; margin:0; font-size:12px; color:var(--text-3) }
  .form-totals strong { font-size:18px; font-weight:600; line-height:20px; margin-top:4px }
  .invoice-paper { padding:24px; min-height:460px; font-size:11px }
  .paper-brand { font-size:13px }
  .paper-brand .seller-contact { font-size:11px }
  .paper-invoice-title h2 { font-size:22px }
  .paper-header { gap:8px; padding-bottom:20px }
  .paper-parties { gap:8px; padding:20px 0 }
  .paper-dates { min-width:102px; font-size:11px }
  .paper-client { max-width:52% }
  .paper-client strong { font-size:11px }
  .paper-client div:not(:first-child) { font-size:11px }
  .paper-table { font-size:11px }
  .paper-table th { font-size:11px }
  .paper-table th,.paper-table td { padding:8px 4px }
  .paper-table .tax-detail { font-size:11px }
  .paper-totals { font-size:11px; max-width:200px }
  .paper-totals .balance { font-size:11px }
  .paper-note { font-size:11px }
  .page-intro { align-items:flex-start }
  .page-intro button { font-size:13px; white-space:nowrap }
  .catalog-row { gap:8px; flex-wrap:wrap; padding:12px }
  .catalog-info { min-width:100px }
  .row-buttons { margin-left:auto }
  .catalog-form .fields.two,.settings-form .fields.two { grid-template-columns:1fr }
  .toast { bottom:calc(72px + env(safe-area-inset-bottom)); font-size:12px }
}
@media(min-width:760px) { .new-label-mobile { display:none } }
@media(max-width:380px) {
  .fields.two { grid-template-columns:1fr }
  .document-actions { gap:4px }
  .item-main { gap:4px }
  .paper-dates { min-width:96px; font-size:11px }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --topbar-bg:var(--surface); --mobile-nav-bg:var(--surface); --action-bg:var(--bg) }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important }
}
@media print {
  body {
    background:var(--doc-paper)
  }
  .sidebar,.topbar,.workspace-status,.editor-toolbar,.editor-heading,.document-actions,.mobile-tabs,.editor,.preview-heading,.notice,.preview-footnote,.toast,.skip-link {
    display:none!important
  }
  .app-main {
    margin:0
  }
  main {
    padding:0!important;
    margin:0;
    max-width:none
  }
  #invoice-page {
    display:block!important
  }
  #invoices-page,#clients-page,#items-page,#settings-page {
    display:none!important
  }
  .workspace-grid {
    display:block
  }
  .preview-panel {
    display:block!important;
    background:var(--doc-paper);
    border:0;
    padding:0;
    position:static;
    max-width:none
  }
  .invoice-paper {
    box-shadow:none;
    aspect-ratio:auto;
    min-height:0;
    padding:0;
    font-size:11px
  }
  .paper-table {
    font-size:11px
  }
  .paper-table thead {
    display:table-header-group
  }
  .paper-table tr {
    break-inside:avoid
  }
  .paper-header,.paper-parties,.paper-totals,.paper-note {
    break-inside:avoid
  }
  .paper-totals,.paper-note {
    font-size:11px
  }
  .paper-currency {
    font-size:11px
  }
  @page {
    size:A4;
    margin:18mm
  }
}