:root {
  --topnav-height: 56px;
  --page-header-height: 64px;
  --form-toolbar-height: 78px;
  --marketing-topbar-height: 60px;
  --signup-toolbar-height: 60px;
  --footer-height: 44px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { scrollbar-gutter: stable; }
body {
  margin: 0; font-family: system-ui, sans-serif; color: #1a1a1a; background: #fafafa;
  padding-top: var(--topnav-height);
}

.topnav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: var(--topnav-height);
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}
.topnav-logo { font-weight: 600; font-size: 15px; color: inherit; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.topnav-logo-img { height: 28px; width: auto; max-width: 112px; object-fit: contain; }
.topnav-company-brand span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topnav-modules { display: flex; gap: 18px; flex: 1; }
.topnav-modules a { color: #444; text-decoration: none; font-size: 14px; }
.topnav-modules a:hover { color: #111; }

.avatar-menu { position: relative; }
.avatar-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.avatar-menu summary::-webkit-details-marker { display: none; }
.avatar-initials {
  width: 26px; height: 26px; border-radius: 50%;
  background: #eef1ff; color: #3949ab;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.avatar-menu-panel {
  position: absolute; top: 32px; right: 0; width: 220px;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 6px; z-index: 10;
}
.avatar-menu-panel a, .avatar-menu-panel button {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; font-size: 14px; color: #333;
  text-decoration: none; background: none; border: none; cursor: pointer;
}
.avatar-menu-panel hr { border: none; border-top: 1px solid #eee; margin: 4px 0; }
.link-danger {
  color: #a32d2d;
  background: none; border: none; padding: 0;
  font: inherit; cursor: pointer; text-decoration: underline;
}
.link-danger:hover { color: #7a2020; }

.icon-btn-danger {
  background: #fff; border: 1px solid #d0d0d0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: #999; height: 34px; width: 34px; box-sizing: border-box;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn-danger:hover { background: #fdecea; color: #a32d2d; border-color: #f5c6cb; }

.avatar-submenu summary { list-style: none; padding: 8px 10px; font-weight: 500; }
.avatar-submenu summary::-webkit-details-marker { display: none; }
.avatar-submenu-panel { margin-left: 14px; border-left: 1px solid #eee; padding-left: 10px; }

.page-content { padding: 24px; padding-top: var(--page-header-height); padding-bottom: calc(var(--footer-height) + 24px); }

.flash { padding: 10px 16px; font-size: 14px; border-radius: 6px; margin-bottom: 12px; }
.flash-success { background: #e6f4ea; color: #1e7e34; }
.flash-error { background: #fdecea; color: #a32d2d; }
.flash-warning { background: #fff4e0; color: #a36b00; }

.auth-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--marketing-topbar-height) - var(--footer-height)); padding: 20px; }
.auth-card {
  width: 100%; max-width: 340px;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.auth-card h1 { font-size: 18px; margin: 0 0 4px; }
.auth-card p { font-size: 13px; color: #666; margin: 0 0 4px; }
.auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
.auth-card input {
  padding: 9px 10px; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 14px;
}
.auth-card button {
  margin-top: 6px; padding: 10px; border: none; border-radius: 6px;
  background: #3949ab; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
}
.auth-card button:hover { background: #2f3c99; }

.page-header {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--page-header-height);
  position: fixed; top: var(--topnav-height); left: 0; right: 0;
  z-index: 90;
  background: #fafafa;
  border-bottom: 1px solid #eee;
  padding: 0 24px;
}
.page-header h1 { margin: 0; font-size: 22px; }
.btn-primary, .btn-secondary {
  font-family: inherit;
  line-height: 1.2;
  vertical-align: middle;
}

.btn-primary {
  display: inline-block; padding: 9px 14px; border-radius: 6px; border: 1px solid transparent;
  background: #3949ab; color: #fff; font-size: 14px; text-decoration: none; cursor: pointer;
}
.btn-primary:hover { background: #2f3c99; }
.btn-primary:disabled { background: #c7cbe0; cursor: not-allowed; }

.data-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; }
.data-table th, .data-table td { text-align: left; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid #eee; }
.data-table .text-right { text-align: right; }
.data-table th { background: #f5f5f5; color: #666; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; position: sticky; top: calc(var(--topnav-height) + var(--page-header-height) - 1px); z-index: 10; }
.data-table thead tr:first-child th:first-child { border-top-left-radius: 8px; }
.data-table thead tr:first-child th:last-child { border-top-right-radius: 8px; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table select, .data-table input[type="number"], .data-table input[type="text"], .data-table input[type="date"] {
  padding: 6px 8px; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 13px; width: 100%; box-sizing: border-box;
}

.data-table tbody tr:hover { background: #f8f9fb; }

[data-tooltip] { position: relative; cursor: help; text-decoration: underline dotted #999; text-underline-offset: 3px; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; padding: 6px 10px; border-radius: 4px;
  font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; width: max-content; max-width: 240px;
  text-align: center; text-transform: none;
  opacity: 0; pointer-events: none; transition: opacity 0.12s ease-in-out 0.1s;
  z-index: 1000;
}
[data-tooltip]:hover::after { opacity: 1; }
/* For a trigger sitting near the right edge of the page (e.g. the
   last button in a right-aligned row) — the default centered tooltip
   overflows past the viewport edge and gets clipped there. This
   anchors the tooltip's own right edge to the trigger's right edge
   instead, so it always opens leftward and stays on-screen. */
[data-tooltip].tooltip-align-right::after { left: auto; right: 0; transform: none; }
/* Set on hover by /js/tooltipPlacement.js when a centred tooltip wouldn't fit —
   against the screen edge or a scrolling card's edge. A trigger's own
   tooltip-align-right always wins; the script never touches those. */
[data-tooltip].tooltip-auto-right::after { left: auto; right: 0; transform: none; }
[data-tooltip].tooltip-auto-left::after { left: 0; right: auto; transform: none; }

.icon-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; font-size: 15px;
  border: none; background: transparent; cursor: pointer;
  border-radius: 6px; text-decoration: none; color: #444;
}
.icon-action:hover { background: #f0f0f0; }
.icon-action-danger:hover { background: #fbe9e9; }
.icon-action:disabled, .icon-action.icon-action-disabled { color: #ccc; cursor: not-allowed; }
.icon-action:disabled:hover, .icon-action.icon-action-disabled:hover { background: transparent; }
.tree-toggle { display: inline-block; width: 14px; cursor: pointer; color: #888; user-select: none; }
.tree-toggle-spacer { display: inline-block; width: 14px; }

.quick-search-input { padding: 9px 10px; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 14px; width: 220px; }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: #333; }
.sort-indicator { font-size: 10px; }

#coa-table { table-layout: fixed; }
#coa-table th:nth-child(1) { width: 8%; }
#coa-table th:nth-child(2) { width: 42%; }
#coa-table th:nth-child(3) { width: 12%; }
#coa-table th:nth-child(4) { width: 13%; }
#coa-table th:nth-child(5) { width: 10%; }
#coa-table th:nth-child(6) { width: 15%; }
#coa-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#coa-templates-table { table-layout: fixed; }
#coa-templates-table th:nth-child(1) { width: 8%; }
#coa-templates-table th:nth-child(2) { width: 22%; }
#coa-templates-table th:nth-child(3) { width: 10%; }
#coa-templates-table th:nth-child(4) { width: 12%; }
#coa-templates-table th:nth-child(5) { width: 14%; }
#coa-templates-table th:nth-child(6) { width: 8%; }
#coa-templates-table th:nth-child(7) { width: 8%; }
#coa-templates-table th:nth-child(8) { width: 8%; }
#coa-templates-table th:nth-child(9) { width: 10%; }
#coa-templates-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 500; line-height: 1.4; }
.badge-success { background: #e6f4ea; color: #1e7e34; }
.badge-muted { background: #eee; color: #777; }
.badge-danger { background: #fdecea; color: #a32d2d; }
/* Transaction-status specific badges — a finer-grained palette than the
   three generic ones above, so "paid" (money genuinely settled) reads
   as visually distinct from "posted" (finalized in the ledger, but not
   necessarily paid) rather than both competing for the same green. */
.badge-paid { background: #e6f4ea; color: #137333; }
.badge-posted { background: #e8eaf6; color: #283593; }
.badge-pending { background: #fef7e0; color: #b06000; }
.badge-unpaid { background: #fce8e6; color: #c5221f; }
.badge-draft { background: #f1f3f4; color: #3c4043; }
.badge-warning { background: #fff4e0; color: #a36b00; }

.link-action {
  color: #3949ab;
  background: none; border: none; padding: 0;
  font: inherit; cursor: pointer; text-decoration: underline;
}
.link-action:hover { color: #2f3c99; }

.row-actions { display: flex; gap: 12px; align-items: center; }
.row-subtext { font-size: 11px; color: #999; margin-top: 2px; }

.form-toolbar {
  display: flex; align-items: flex-end; gap: 24px;
  height: var(--form-toolbar-height);
  position: fixed; top: calc(var(--topnav-height) + var(--page-header-height)); left: 0; right: 0;
  z-index: 80;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 18px 24px 12px;
}
.form-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
.form-toolbar input, .form-toolbar select {
  padding: 8px 10px; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 14px;
}
.form-toolbar .field-name { flex: 0 1 320px; }
.form-toolbar .field-module { flex: 0 1 220px; }
.form-toolbar .toolbar-back { margin-left: auto; }

.btn-secondary {
  display: inline-block; padding: 9px 14px; border-radius: 6px;
  border: 1px solid #d0d0d0; background: #fff; color: #444;
  font-size: 14px; text-decoration: none; cursor: pointer;
}
.btn-secondary:hover { background: #f5f5f5; }
.btn-secondary:disabled { color: #aaa; background: #f5f5f5; border-color: #e0e0e0; cursor: not-allowed; }
.btn-secondary:disabled:hover { background: #f5f5f5; }

.permissions-fieldset {
  margin: calc(var(--form-toolbar-height) + 16px) 0 16px;
  border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px 18px;
  background: #fff;
}
.permissions-fieldset legend { font-size: 13px; font-weight: 500; padding: 0 6px; }

.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px 24px;
}
.permission-group-title { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.checkbox-label { align-items: flex-start; gap: 6px; font-size: 13px; display: flex; padding: 2px 0; }
.simple-form .checkbox-label { flex-direction: row; }

form > .flash { max-width: 600px; }
form > .btn-primary { margin-top: 4px; }

.simple-form { display: flex; flex-direction: column; gap: 16px; max-width: 480px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.filter-bar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.filter-bar label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
.filter-bar input, .filter-bar select {
  padding: 9px 10px; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 14px;
  width: 100%; box-sizing: border-box;
}
.info-item { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #666; min-width: 0; }
.info-item strong { font-size: 14px; color: #222; font-weight: 600; overflow-wrap: anywhere; }
/* For a value that's routinely longer than one grid column (an email address) — two columns' width
   where there's room for it; on a phone-width screen it stays one column and wraps instead. */
@media (min-width: 480px) { .info-item-wide { grid-column: span 2; } }
.settings-card { max-width: none; height: 340px; overflow-y: auto; }
.settings-card.has-scroll-region { overflow-y: hidden; }
.settings-card-scroll-region { flex: 1; overflow-y: auto; }
.settings-card-scroll-region .data-table th { top: 0; }
.settings-card-scroll-region .data-table th, .settings-card-scroll-region .data-table td { font-size: 12px; padding: 7px 10px; }

/* Quote detail/edit/new pages insert an extra fixed section (the
   quote-level info: customer/date/currency) above their scrollable
   parts area, on top of the standard topnav+page-header. The global
   .data-table th sticky offset above doesn't account for that extra
   section's height, so it sticks too high — overlapping the fixed
   section and hiding each part table's first row. Each part's table
   is short (2-4 rows), so sticky headers add little value here;
   simplest fix is to disable sticky entirely within this container. */
.quote-parts-scroll .data-table th { position: static; }
/* Same situation as .quote-parts-scroll above: the PO detail page's
   lines table lives in its own internally-scrolling wrapper (the page
   itself doesn't scroll at all), so the global .data-table th sticky
   offset — calculated for a table scrolling with the page's own
   topnav+header — has nothing correct to anchor to here and just
   detaches oddly mid-scroll. The Advance Payments table sharing this
   same wrapper is short enough that sticky adds little anyway. */
#po-lines-table-wrapper .data-table th { position: static; }
.simple-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
.simple-form input, .simple-form select, .simple-form textarea {
  padding: 9px 10px; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 14px;
  width: 100%; box-sizing: border-box; font-family: inherit;
}
.simple-form input[type="checkbox"] { width: auto; flex: 0 0 auto; padding: 0; }
.simple-form input[readonly] { background: #f0f0f0; color: #777; cursor: not-allowed; }
.form-hint { font-size: 12px; color: #777; margin: 0; }
/* Marks an amount denominated in a currency other than the document's
   own invoice/PO currency — local currency (tax), base currency (cost
   basis), or a related transaction's own currency — so it's visually
   distinct at a glance from the amounts that share the document's
   primary currency. Reuses btn-primary's own blue for consistency. */
.currency-foreign { color: #3949ab !important; }
.form-actions { display: flex; gap: 12px; }

.simple-form.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; max-width: 720px;
  align-items: end;
}
.simple-form.two-col .span-2 { grid-column: 1 / -1; }

.simple-form.four-col {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 20px; max-width: none;
  align-items: start;
}
.simple-form.four-col .span-2 { grid-column: span 2; }

.field-error { font-size: 12px; color: #a32d2d; min-height: 36px; display: block; line-height: 1.4; }

.part-fields-grid {
  display: grid;
  grid-template-columns: minmax(190px, 2fr) minmax(150px, 1.4fr) minmax(70px, 0.55fr) minmax(85px, 0.75fr) minmax(105px, 0.5fr) minmax(140px, 0.65fr) minmax(90px, 0.75fr) minmax(80px, 0.65fr) minmax(80px, 0.65fr) minmax(44px, 0.35fr);
  gap: 10px;
  align-items: start;
}
.part-fields-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #444; }
.part-fields-grid input, .part-fields-grid select {
  padding: 8px 9px; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 13px;
  width: 100%; box-sizing: border-box; font-family: inherit;
}
/* Aligns the remove-part button with the row's inputs — a hidden
   spacer matches the label height above every other field, since
   the button itself has no label. */
.part-fields-grid .field-spacer-col { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; grid-column: -2 / -1; }
.part-fields-grid .field-spacer-col span { font-size: 13px; visibility: hidden; }

.part-info-grid {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(130px, 1.4fr) minmax(60px, 0.6fr) minmax(80px, 0.8fr) minmax(60px, 0.6fr) minmax(75px, 0.7fr) minmax(85px, 0.8fr);
  gap: 14px 12px;
}
.field-ok { font-size: 12px; color: #1e7e34; min-height: 36px; display: block; line-height: 1.4; }
.field-hint { font-size: 12px; color: #999; min-height: 36px; display: block; line-height: 1.4; }
#name-feedback, #regnum-feedback { display: block; min-height: 36px; }
.plan-limits-preview { font-size: 13px; color: #555; background: #f5f5f5; border-radius: 6px; padding: 10px 12px; }

#modal:empty { display: none; }
#modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,20,30,0.45);
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: #fff; border-radius: 10px; padding: 24px;
  max-width: 440px; width: 90%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.modal-box h2 { font-size: 17px; margin: 0 0 10px; }
.modal-box p { font-size: 14px; color: #555; margin: 0 0 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

.inline-hero {
  background:
    linear-gradient(180deg, rgba(20,20,30,0.55), rgba(20,20,30,0.65)),
    linear-gradient(135deg, #232946 0%, #3949ab 100%);
  color: #fff; border-radius: 12px; padding: 48px 32px; text-align: center;
}
.inline-hero h2 { font-size: 28px; margin: 0 0 12px; }
.inline-hero p { font-size: 15px; color: #d8dcf5; margin: 0 0 24px; max-width: 520px; margin-left: auto; margin-right: auto; }

.inline-hero.full-bleed {
  margin: calc(-1 * (var(--page-header-height) + 24px)) -24px calc(-1 * (var(--footer-height) + 24px));
  min-height: calc(100vh - var(--topnav-height) - var(--footer-height));
  border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(20,20,30,0.55), rgba(20,20,30,0.65)),
    url('/images/hero.jpg') center/cover no-repeat,
    linear-gradient(135deg, #232946 0%, #3949ab 100%);
}
.inline-hero.full-bleed h2 { font-size: 42px; }
.inline-hero.full-bleed p { font-size: 17px; max-width: none; }

/* Marketing / public pages */
.marketing-body { margin: 0; font-family: system-ui, sans-serif; color: #1a1a1a; background: #fafafa; padding-top: var(--marketing-topbar-height); padding-bottom: var(--footer-height); }
.marketing-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: var(--marketing-topbar-height);
  background: #fff; border-bottom: 1px solid #e0e0e0;
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
}
.marketing-logo { font-weight: 600; font-size: 15px; }
.marketing-logo-img { height: 32px; width: auto; max-width: 128px; object-fit: contain; vertical-align: middle; }
.marketing-nav { display: flex; align-items: center; gap: 18px; }
.marketing-nav a:not(.btn-primary) { color: #444; text-decoration: none; font-size: 14px; }
.marketing-nav a:not(.btn-primary):hover { color: #111; }

.hero {
  min-height: calc(100vh - var(--marketing-topbar-height) - var(--footer-height));
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(20,20,30,0.55), rgba(20,20,30,0.65)),
    url('/images/hero.jpg') center/cover no-repeat,
    linear-gradient(135deg, #232946 0%, #3949ab 100%);
  text-align: center; padding: 40px 20px;
}
.hero-overlay { color: #fff; }
.hero h1 { font-size: 42px; line-height: 1.2; margin: 0 0 16px; }
.hero p { font-size: 17px; color: #e4e6f5; margin: 0 0 28px; }
.hero-cta { font-size: 16px; padding: 13px 28px; }

.signup-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--signup-toolbar-height);
  position: fixed; top: var(--marketing-topbar-height); left: 0; right: 0; z-index: 90;
  background: #fff; border-bottom: 1px solid #e0e0e0; padding: 0 32px;
}
.signup-toolbar-title { font-weight: 600; font-size: 15px; }

.signup-page { box-sizing: border-box; max-width: 720px; margin: 0 auto; width: 100%; padding: calc(var(--signup-toolbar-height) + 24px) 20px 24px; }
.signup-page h1 { font-size: 26px; margin-bottom: 6px; }
.signup-subtitle { color: #666; margin-top: 0; margin-bottom: 24px; }
.form-section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; color: #888; margin: 8px 0 -4px; }
.signup-page .simple-form { max-width: none; }

.plan-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.plan-choice {
  display: flex !important; flex-direction: column !important; gap: 4px;
  border: 1px solid #d0d0d0; border-radius: 8px; padding: 12px 14px; cursor: pointer;
}
.plan-choice:has(input:checked) { border-color: #3949ab; background: #f5f6fc; }
.plan-choice input { width: auto; margin-bottom: 4px; }
.plan-choice-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.plan-choice-limits { font-size: 12px; color: #666; }
.plan-choice-note { font-size: 11px; color: #a36b00; }
.simple-form input:invalid:not(:placeholder-shown) { border-color: #d0d0d0; } /* don't rely on native styling */

.app-footer {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--footer-height);
  padding: 0 24px;
  border-top: 1px solid #e0e0e0;
  background: #fff;
  font-size: 12px; color: #888;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
}
.app-footer-links { display: flex; gap: 16px; }
.app-footer-links a { color: #888; text-decoration: none; }
.app-footer-links a:hover { color: #444; }