/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * genre: modern-minimal · macrostructure: Workbench/Bento
 * design-system: design.md · designed-as-app
 */
:root {
  color-scheme: light;
  --color-paper: #f3f4f0;
  --color-paper-2: #eceee8;
  --color-surface: #fcfdfb;
  --color-surface-strong: #fefefc;
  --color-ink: #141812;
  --color-ink-2: #343a32;
  --color-muted: #667064;
  --color-rule: #dce1d8;
  --color-rule-strong: #c8d0c4;
  --color-accent: #3f7d2c;
  --color-accent-strong: #285a1e;
  --color-accent-ink: #ffffff;
  --color-accent-soft: #e5f0dd;
  --color-highlight: #c3e66f;
  --color-highlight-soft: #f1f7df;
  --color-warning: #8a550d;
  --color-warning-soft: #fbefd8;
  --color-danger: #9f3434;
  --color-danger-soft: #f8e7e4;
  --color-info: #315a67;
  --color-info-soft: #e7f0f2;
  --color-on-dark: #f6f8f3;
  --color-on-dark-muted: #c9d0c6;
  --color-dark-rule: #424a40;
  --color-overlay: rgba(16, 22, 15, .58);
  --color-header: rgba(252, 253, 251, .94);
  --color-sticky: rgba(252, 253, 251, .96);
  --focus-ring: rgba(63, 125, 44, .18);
  --shadow-soft: 0 12px 32px rgba(30, 42, 27, .07);
  --shadow-float: 0 24px 70px rgba(18, 25, 17, .18);

  --font-display: ui-rounded, "Avenir Next", "Trebuchet MS", sans-serif;
  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --radius-control: 11px;
  --radius-card: 18px;
  --radius-large: 24px;
  --content: 1240px;
  --rail: 244px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --duration-short: 180ms;

  /* Alias de compatibilidad con componentes existentes. */
  --bg: var(--color-paper);
  --surface: var(--color-surface);
  --surface-2: var(--color-paper-2);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --line: var(--color-rule);
  --green: var(--color-accent);
  --green-dark: var(--color-accent-strong);
  --green-soft: var(--color-accent-soft);
  --lime: var(--color-highlight);
  --amber: var(--color-warning);
  --amber-soft: var(--color-warning-soft);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-soft);
  --shadow: var(--shadow-soft);
  --radius: var(--radius-card);
  --radius-sm: var(--radius-control);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; overflow-x: clip; background: var(--color-paper); }
html { color: var(--color-ink); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: 1000;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-on-dark);
}
.skip-link:focus { transform: none; }
.network-banner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-rule-strong);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  text-align: center;
  font-weight: 750;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
  align-items: stretch;
  padding: var(--space-md);
  background: var(--color-paper);
}
.login-screen::before {
  content: "Áche\A cuentas claras";
  white-space: pre;
  display: flex;
  align-items: flex-end;
  padding: clamp(32px, 7vw, 88px);
  border-radius: var(--radius-large) 0 0 var(--radius-large);
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.06em;
}
.login-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 62px);
  border: 1px solid var(--color-rule);
  border-left: 0;
  border-radius: 0 var(--radius-large) var(--radius-large) 0;
  background: var(--color-surface);
}
.brand-mark, .mini-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-weight: 850;
}
.brand-mark {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-lg);
  border-radius: 18px 18px 6px 18px;
  font-size: 30px;
}
.mini-mark { width: 38px; height: 38px; border-radius: 12px 12px 4px 12px; font-size: 19px; }
.eyebrow {
  margin: 0 0 6px;
  color: var(--color-accent-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-style: normal;
}
h1 { margin-bottom: 8px; font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -.045em; }
h2 { margin-bottom: 6px; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.1; letter-spacing: -.03em; }
h3 { margin-bottom: 12px; font-size: 18px; line-height: 1.2; }
.muted { color: var(--color-muted); }

.form-stack { display: grid; gap: 18px; margin-top: 30px; }
label { display: grid; gap: 7px; min-width: 0; color: var(--color-ink-2); font-size: 14px; font-weight: 700; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  outline: none;
  background: var(--color-surface-strong);
  color: var(--color-ink);
}
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: .82; }
textarea { min-height: 92px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--color-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
input:invalid:not(:placeholder-shown) { border-color: var(--color-danger); }
input[type="checkbox"], input[type="radio"] { width: 20px; min-height: 20px; accent-color: var(--color-accent); }
input[type="file"] { padding: 9px; }
input[type="file"]::file-selector-button {
  min-height: 38px;
  margin-right: 10px;
  padding: 7px 12px;
  border: 1px solid var(--color-rule);
  border-radius: 9px;
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-weight: 750;
}
.check-row { grid-template-columns: 22px minmax(0, 1fr); align-items: center; font-weight: 600; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 70px; }
.password-field .password-toggle { position: absolute; right: 2px; top: 2px; width: 62px; height: 44px; font-size: 12px; }
.form-message { min-height: 22px; margin: 14px 0 0; color: var(--color-danger); font-weight: 700; }

.button, .icon-button, .brand-button, .rail-brand, .rail-inventory, .side-nav button,
.mobile-nav button, .user-button, .notebook-card, .action-card, .text-button, .financial-toggle,
.debt-category-card, .debt-scope-summary button {
  border: 0;
  cursor: pointer;
}
.button {
  min-height: 46px;
  padding: 10px 16px;
  border-radius: var(--radius-control);
  font-weight: 800;
  white-space: nowrap;
  transition: transform var(--duration-short) var(--ease-out), background var(--duration-short) var(--ease-out), border-color var(--duration-short) var(--ease-out);
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(1px); }
.button:focus-visible, .icon-button:focus-visible, .brand-button:focus-visible, .rail-brand:focus-visible,
.rail-inventory:focus-visible, .side-nav button:focus-visible, .mobile-nav button:focus-visible,
.user-button:focus-visible, .notebook-card:focus-visible, .action-card:focus-visible,
.text-button:focus-visible, .financial-toggle:focus-visible, .debt-category-card:focus-visible,
.debt-scope-summary button:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 3px;
}
.button:disabled { cursor: wait; opacity: .62; transform: none; }
.button-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.button-primary:hover { background: var(--color-accent-strong); }
.button-dark { background: var(--color-ink); color: var(--color-on-dark); }
.button-dark:hover { background: var(--color-ink-2); }
.button-outline { border: 1px solid var(--color-rule-strong); background: var(--color-surface); color: var(--color-ink); }
.button-outline:hover { border-color: var(--color-accent); }
.button-quiet { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.button-small { min-height: 44px; padding: 9px 12px; font-size: 13px; }
.button-wide { width: 100%; }
.text-button {
  min-height: 44px;
  padding: 8px 0;
  background: transparent;
  color: var(--color-accent-strong);
  font-weight: 800;
  white-space: nowrap;
}
.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-control);
  background: transparent;
  font-weight: 800;
}
.icon-button:hover { background: var(--color-paper-2); }

.app { min-height: 100vh; }
.app-frame { min-height: 100vh; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
.side-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 18px;
  border-right: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.rail-brand {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px;
  background: transparent;
  text-align: left;
}
.rail-brand > span:last-child, .brand-button span:last-child { display: grid; line-height: 1.05; }
.rail-brand strong, .brand-button strong { font-family: var(--font-display); font-size: 19px; }
.rail-brand small, .brand-button small {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.side-nav { display: grid; gap: 6px; margin-top: 42px; }
.side-nav button, .rail-inventory {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-control);
  background: transparent;
  text-align: left;
}
.side-nav button span, .rail-inventory span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-rule);
  border-radius: 9px;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 850;
}
.side-nav button strong, .rail-inventory strong { min-width: 0; font-size: 14px; }
.side-nav button:hover, .rail-inventory:hover { background: var(--color-paper-2); }
.side-nav button.is-active { background: var(--color-ink); color: var(--color-on-dark); }
.side-nav button.is-active span { border-color: var(--color-dark-rule); color: var(--color-highlight); }
.rail-inventory { margin-top: var(--space-sm); border-top: 1px solid var(--color-rule); border-radius: 0; padding-top: 17px; }
.rail-note { margin: auto 10px 0; color: var(--color-muted); font-size: 12px; }
.workspace { min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px max(22px, calc((100vw - var(--rail) - var(--content)) / 2));
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-header);
  backdrop-filter: blur(14px);
}
.brand-button { min-height: 44px; display: none; align-items: center; gap: 10px; padding: 2px; background: transparent; text-align: left; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-search {
  width: min(390px, 42vw);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid var(--color-rule);
  border-radius: 11px;
  background: var(--color-surface);
  color: var(--color-muted);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.topbar-search:hover { border-color: var(--color-rule-strong); color: var(--color-ink); }
.topbar-search:focus-visible { outline: 3px solid var(--color-highlight); outline-offset: 3px; }
.user-button {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 11px 5px 5px;
  border: 1px solid var(--color-rule);
  border-radius: 13px;
  background: var(--color-surface);
  font-weight: 800;
}
.user-button:hover { border-color: var(--color-rule-strong); background: var(--color-paper-2); }
.user-button > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--color-ink); color: var(--color-on-dark); }
.user-menu {
  position: fixed;
  z-index: 60;
  top: 64px;
  right: max(20px, calc((100vw - var(--rail) - var(--content)) / 2));
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--color-rule);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}
.user-menu button { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.user-menu button:hover, .user-menu button:focus-visible { background: var(--color-paper-2); outline: none; }
.mobile-nav { display: none; }

.content { width: min(calc(100% - 44px), var(--content)); margin: 0 auto; padding: 38px 0 80px; }
.content:focus { outline: none; }
.view { animation: view-in 220ms var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
.welcome-row, .page-heading, .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.welcome-row { align-items: center; margin-bottom: 26px; }
.balance-pill {
  min-width: 220px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-variant-numeric: tabular-nums;
}
.balance-pill span { display: block; color: var(--color-on-dark-muted); font-size: 12px; }
.balance-pill strong { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 25px; }
.page-heading { margin-bottom: 28px; }
.section-heading { margin: 36px 0 16px; }
.section-heading h2 { margin: 0; }

.alert-stack { display: grid; gap: 8px; margin-bottom: 16px; }
.alert { padding: 12px 14px; border: 1px solid var(--color-rule); border-radius: 11px; background: var(--color-surface); color: var(--color-ink); font-weight: 650; }
.alert.warning { border-color: var(--color-rule-strong); background: var(--color-warning-soft); color: var(--color-warning); }
.alert.danger { border-color: var(--color-rule-strong); background: var(--color-danger-soft); color: var(--color-danger); }
.alert.info { border-color: var(--color-rule-strong); background: var(--color-info-soft); color: var(--color-info); }

.notebook-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr); grid-template-rows: repeat(2, minmax(168px, 1fr)); gap: 14px; }
.notebook-card {
  position: relative;
  min-width: 0;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  text-align: left;
  transition: transform var(--duration-short) var(--ease-out), border-color var(--duration-short) var(--ease-out), box-shadow var(--duration-short) var(--ease-out);
}
.notebook-card:hover { transform: translateY(-2px); border-color: var(--color-rule-strong); box-shadow: var(--shadow-soft); }
.notebook-card:active { transform: translateY(1px); }
.notebook-sales { grid-row: 1 / 3; min-height: 350px; background: var(--color-highlight-soft); }
.notebook-sales::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -45px;
  width: 180px;
  height: 180px;
  border: 30px solid var(--color-highlight);
  border-radius: 50%;
  opacity: .58;
}
.notebook-number { color: var(--color-muted); font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.notebook-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-top: 22px; border-radius: 14px; background: var(--color-ink); color: var(--color-on-dark); font-size: 22px; }
.notebook-sales .notebook-icon { background: var(--color-accent); color: var(--color-accent-ink); }
.notebook-copy { position: relative; z-index: 1; display: grid; gap: 5px; margin-top: auto; padding-top: 24px; }
.notebook-copy strong { max-width: 340px; font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 28px); line-height: 1.05; letter-spacing: -.025em; }
.notebook-copy small { max-width: 300px; color: var(--color-muted); font-size: 13px; }
.notebook-arrow { position: absolute; right: 18px; top: 17px; font-size: 19px; }

.quick-summary { margin-top: 14px; padding: 22px; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); }
.quick-summary .section-heading { margin-top: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-rule); border-left: 1px solid var(--color-rule); }
.metric-grid article { min-width: 0; padding: 18px; border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); background: var(--color-surface); }
.metric-grid span { display: block; color: var(--color-muted); font-size: 12px; }
.metric-grid strong { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.action-grid { display: grid; grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); gap: 10px; }
.action-card {
  min-width: 0;
  min-height: 126px;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 3px;
  padding: 16px;
  border: 1px solid var(--color-rule);
  border-radius: 15px;
  background: var(--color-surface);
  text-align: left;
  transition: border-color var(--duration-short) var(--ease-out), transform var(--duration-short) var(--ease-out);
}
.action-card:hover { transform: translateY(-2px); border-color: var(--color-accent); }
.action-card:active { transform: translateY(1px); }
.action-card.primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.action-card > span { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 10px; background: var(--color-paper-2); font-size: 18px; }
.action-card.primary > span { background: var(--color-accent-strong); color: var(--color-accent-ink); }
.action-card strong { font-family: var(--font-display); font-size: 16px; }
.action-card small { color: var(--color-muted); }
.action-card.primary small { color: var(--color-accent-ink); opacity: .82; }

.ledger-list { display: grid; gap: 7px; }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(62px, .65fr) minmax(190px, 2.3fr) repeat(3, minmax(90px, 1fr));
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background: var(--color-surface);
  font-variant-numeric: tabular-nums;
}
.ledger-row .code { width: fit-content; display: inline-flex; padding: 5px 8px; border-radius: 7px; background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 850; }
.ledger-row .detail { min-width: 0; }
.ledger-row .detail strong, .ledger-row .detail small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-row small, .ledger-label { color: var(--color-muted); font-size: 12px; }
.ledger-row .correction-link { display: block; min-height: 44px; padding: 8px 0 0; font-size: 12px; text-align: left; }
.ledger-row.is-reversed { background: var(--color-paper-2); color: var(--color-muted); }
.ledger-row.is-reversed .code { background: var(--color-surface); color: var(--color-muted); }
.ledger-row.is-reversed .ledger-value { text-decoration: line-through; text-decoration-thickness: 1px; }
.ledger-value { min-width: 0; text-align: right; }
.paid { color: var(--color-accent-strong); font-weight: 850; }
.interest-due { color: var(--color-warning); font-weight: 800; }
.interest-badge { width: fit-content; display: inline-flex; margin-top: 7px; padding: 3px 7px; border-radius: 99px; background: var(--color-paper-2); color: var(--color-muted); font-size: 10px; font-weight: 850; letter-spacing: .02em; }
.interest-badge.active { background: var(--color-warning-soft); color: var(--color-warning); }
.capital-adjustment-note, .settled-without-cash { display: block; width: fit-content; margin-top: 7px; padding: 5px 8px; border-radius: 8px; font-size: 11px; font-weight: 800; }
.capital-adjustment-note { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.settled-without-cash { background: var(--color-paper-2); color: var(--color-muted); border: 1px solid var(--color-rule); }
.debt-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.debt-links .correction-link { display: inline-flex; }
.split-ledger { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.empty-state { padding: 32px 20px; border: 1px dashed var(--color-rule-strong); border-radius: 14px; background: var(--color-surface); color: var(--color-muted); text-align: center; }
.closing-card { margin-top: 18px; padding: 18px; border-radius: 16px; background: var(--color-ink); color: var(--color-on-dark); }
.closing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.closing-grid div { padding: 10px 12px; border-left: 1px solid var(--color-dark-rule); }
.closing-grid div:nth-child(4n + 1) { border-left: 0; }
.closing-grid span { display: block; color: var(--color-on-dark-muted); font-size: 12px; }
.closing-grid strong { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 19px; font-variant-numeric: tabular-nums; }

.money-overview { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 10px; }
.money-card { padding: 20px; border: 1px solid var(--color-rule); border-radius: 15px; background: var(--color-surface); }
.money-card.primary { background: var(--color-ink); color: var(--color-on-dark); }
.money-card span { color: var(--color-muted); font-size: 12px; }
.money-card.primary span { color: var(--color-on-dark-muted); }
.money-card strong { display: block; margin-top: 8px; font-family: var(--font-display); font-size: clamp(24px, 4vw, 35px); font-variant-numeric: tabular-nums; }
.debt-book-section { min-width: 0; }
.debt-filter-panel { display: grid; gap: 12px; margin: 0 0 12px; padding: 15px; border: 1px solid var(--color-rule); border-radius: 15px; background: var(--color-surface); }
.debt-filter-search input { padding-left: 13px; }
.debt-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.debt-filter-grid label { font-size: 12px; }
.debt-filter-grid select { min-height: 44px; padding: 8px 10px; }
.debt-filter-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 3px; }
.debt-filter-footer strong { color: var(--color-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.debt-filter-footer .text-button { flex: 0 0 auto; }
.debt-overview-section { margin-top: 28px; }
.debt-overview-section > .section-heading { margin-bottom: 14px; }
.debt-overview { display: grid; grid-template-columns: minmax(250px, .82fr) minmax(0, 2fr); gap: 12px; }
.debt-total-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: 17px;
  background: var(--color-ink);
  color: var(--color-on-dark);
}
.debt-total-label { color: var(--color-highlight); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.debt-total-card > strong { margin-top: 9px; font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.debt-total-card > p { margin: 2px 0 18px; color: var(--color-on-dark-muted); font-size: 13px; }
.debt-total-card dl { display: grid; gap: 8px; margin: 0; }
.debt-total-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--color-dark-rule); }
.debt-total-card dt { color: var(--color-on-dark-muted); font-size: 12px; }
.debt-total-card dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.debt-scope-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: auto; padding-top: 20px; }
.debt-scope-summary > button { min-width: 0; min-height: 54px; padding: 10px; border: 1px solid var(--color-dark-rule); border-radius: 10px; background: transparent; color: inherit; text-align: left; }
.debt-scope-summary > button:hover { border-color: var(--color-highlight); }
.debt-scope-summary small, .debt-scope-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.debt-scope-summary small { color: var(--color-on-dark-muted); font-size: 10px; }
.debt-scope-summary strong { margin-top: 2px; font-size: 13px; font-variant-numeric: tabular-nums; }
.debt-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.debt-category-card { width: 100%; min-width: 0; padding: 16px; border: 1px solid var(--color-rule); border-radius: 15px; background: var(--color-surface); color: var(--color-ink); text-align: left; transition: transform var(--duration-short) var(--ease-out), border-color var(--duration-short) var(--ease-out); }
.debt-category-card:hover { transform: translateY(-2px); border-color: var(--color-accent); }
.debt-category-card header { display: grid; gap: 3px; }
.debt-category-card header span { color: var(--color-accent-strong); font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.debt-category-card header strong { overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; }
.debt-category-card p { min-height: 34px; margin: 6px 0 12px; color: var(--color-muted); font-size: 12px; }
.debt-progress { height: 7px; overflow: hidden; border-radius: 99px; background: var(--color-paper-2); }
.debt-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--color-highlight); }
.debt-category-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; color: var(--color-muted); font-size: 11px; }
.debt-category-card > small { display: block; margin-top: 8px; color: var(--color-warning); font-size: 11px; font-weight: 750; }
.debt-card-action { display: inline-block; margin-top: 10px; color: var(--color-accent-strong); font-size: 12px; font-weight: 850; }
.debt-view-all { width: 100%; margin-top: 12px; }
.goal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.goal-card { padding: 17px; border: 1px solid var(--color-rule); border-radius: 15px; background: var(--color-surface); }
.goal-card header { display: flex; justify-content: space-between; gap: 12px; }
.goal-card .goal-type { color: var(--color-accent-strong); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.progress { height: 9px; margin: 16px 0 8px; overflow: hidden; border-radius: 99px; background: var(--color-paper-2); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }
.goal-numbers { display: flex; justify-content: space-between; color: var(--color-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.goal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.financial-gate { margin-top: 28px; }
.financial-toggle { width: 100%; min-height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border: 1px solid var(--color-rule); border-radius: 15px; background: var(--color-surface); text-align: left; }
.financial-toggle:hover { border-color: var(--color-rule-strong); }
.financial-toggle span:first-child { display: grid; }
.financial-toggle small { color: var(--color-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.financial-toggle strong { font-family: var(--font-display); font-size: 18px; }
#financial-panel { margin-top: 10px; padding: 18px; border: 1px solid var(--color-rule); border-radius: 15px; background: var(--color-surface); }
.formula-note { padding: 13px; border-radius: 10px; background: var(--color-paper-2); color: var(--color-muted); font-size: 13px; }

.admin-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-card { min-width: 0; padding: 19px; border: 1px solid var(--color-rule); border-radius: 16px; background: var(--color-surface); }
.admin-card.full { grid-column: 1 / -1; }
.admin-card .button + .button { margin-left: 6px; }
.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 10px 8px; border-bottom: 1px solid var(--color-rule); text-align: left; font-size: 13px; }
.data-table th { color: var(--color-muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.export-details { margin-top: 16px; }
.export-details summary { cursor: pointer; color: var(--color-accent-strong); font-weight: 800; }
.export-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.export-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 10px; border-radius: 9px; background: var(--color-paper-2); color: var(--color-accent-strong); font-size: 12px; font-weight: 750; text-decoration: none; }

.opening-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.opening-section { margin-top: 12px; padding: 19px; border: 1px solid var(--color-rule); border-radius: 16px; background: var(--color-surface); }
.opening-section .section-heading, .admin-card .section-heading { margin: 0 0 16px; align-items: center; }
.opening-section h2, .admin-card .section-heading h2 { margin: 0; }
.opening-section .empty-state.small { padding: 20px; }
.defer-inventory-card {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
  margin-top: 15px;
  padding: 15px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 13px;
  background: var(--color-accent-soft);
  cursor: pointer;
}
.defer-inventory-card:hover { border-color: var(--color-accent); }
.defer-inventory-card input { margin: 2px 0 0; }
.defer-inventory-card span { display: grid; gap: 4px; }
.defer-inventory-card strong { color: var(--color-ink); font-size: 15px; }
.defer-inventory-card small { color: var(--color-muted); font-size: 13px; font-weight: 600; line-height: 1.45; }
.opening-preview { margin-top: 14px; }
.opening-preview .alert { margin: 0; }
.opening-preview ul { margin-bottom: 0; padding-left: 20px; }
.opening-actions { position: sticky; z-index: 20; bottom: 10px; display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid var(--color-rule); border-radius: 14px; background: var(--color-sticky); box-shadow: var(--shadow-soft); backdrop-filter: blur(12px); }
.opening-finished { max-width: 620px; margin: 7vh auto; padding: 42px; border: 1px solid var(--color-rule); border-radius: 22px; background: var(--color-surface); text-align: center; box-shadow: var(--shadow-soft); }
.opening-check { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 18px; background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: 30px; font-weight: 900; }
.opening-photo { width: 54px; height: 54px; border: 1px solid var(--color-rule); border-radius: 10px; object-fit: cover; }
.inventory-intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inventory-intro-actions .muted { margin-left: auto; font-size: 13px; font-weight: 700; }
.initial-stock-note { margin: 12px 0 15px; padding: 12px 13px; border-left: 3px solid var(--color-highlight); border-radius: 0 10px 10px 0; background: var(--color-paper-2); color: var(--color-muted); font-size: 13px; line-height: 1.5; }

.modal {
  position: fixed;
  inset: 0;
  width: min(760px, calc(100% - 28px));
  max-width: none;
  height: fit-content;
  max-height: min(880px, calc(100vh - 28px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}
.modal::backdrop { background: var(--color-overlay); backdrop-filter: blur(4px); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 21px 22px 12px; background: var(--color-surface); }
.modal-head h2 { margin: 0; }
.modal-body { max-height: calc(100vh - 140px); overflow: auto; display: grid; gap: 16px; padding: 10px 22px 24px; background: var(--color-surface); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.interest-rule-note { margin: -5px 0 0; padding: 11px 13px; border-left: 3px solid var(--color-highlight); border-radius: 0 9px 9px 0; background: var(--color-highlight-soft); line-height: 1.5; }
.payment-allocation { display: grid; gap: 7px; padding: 14px; border: 1px solid var(--color-rule); border-radius: 13px; background: var(--color-paper-2); }
.payment-allocation > strong { font-family: var(--font-display); }
.payment-allocation > span { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.payment-allocation small { color: var(--color-muted); }
.payment-allocation .payment-balance { margin-top: 3px; padding-top: 8px; border-top: 1px solid var(--color-rule-strong); }
.interest-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-rule); border-radius: 14px; overflow: hidden; }
.interest-summary > div { min-width: 0; padding: 14px; border-right: 1px solid var(--color-rule); background: var(--color-paper-2); }
.interest-summary > div:last-child { border-right: 0; }
.interest-summary small, .interest-current-rate span { display: block; color: var(--color-muted); font-size: 11px; }
.interest-summary strong { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-size: 19px; font-variant-numeric: tabular-nums; }
.interest-summary .total { background: var(--color-ink); color: var(--color-on-dark); }
.interest-summary .total small { color: var(--color-on-dark-muted); }
.interest-current-rate { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; border: 1px solid var(--color-rule); border-radius: 12px; }
.interest-current-rate strong { color: var(--color-accent-strong); font-size: 20px; font-variant-numeric: tabular-nums; }
.interest-history { display: grid; gap: 9px; }
.interest-history h3 { margin: 4px 0 2px; font-family: var(--font-display); font-size: 17px; }
.interest-month-row { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--color-rule); border-radius: 13px; background: var(--color-surface); }
.interest-month-row > div:first-child { display: grid; gap: 3px; }
.interest-month-row > div:first-child > strong { text-transform: capitalize; }
.interest-month-row > div:first-child small { color: var(--color-muted); font-size: 12px; }
.interest-month-row dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--color-rule); border-left: 1px solid var(--color-rule); }
.interest-month-row dl div { min-width: 0; padding: 8px; border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.interest-month-row dt { color: var(--color-muted); font-size: 10px; }
.interest-month-row dd { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; font-weight: 800; font-variant-numeric: tabular-nums; }
.interest-adjusted { width: fit-content; margin-top: 3px; padding: 3px 7px; border-radius: 7px; background: var(--color-warning-soft); color: var(--color-warning); font-size: 11px; font-weight: 750; }
.interest-adjustment-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.interest-adjustment-facts span { display: flex; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 10px; background: var(--color-paper-2); color: var(--color-muted); font-size: 12px; }
.interest-adjustment-facts strong { color: var(--color-ink); }
.capital-adjustment-facts, .no-cash-settlement-facts { display: grid; gap: 8px; }
.capital-adjustment-facts { grid-template-columns: 1fr 1fr; }
.capital-adjustment-facts span, .no-cash-settlement-facts span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; background: var(--color-paper-2); color: var(--color-muted); font-size: 12px; }
.capital-adjustment-facts strong, .no-cash-settlement-facts strong { color: var(--color-ink); text-align: right; }
.debt-edit-source { margin: 0; padding: 12px 13px; border-left: 3px solid var(--color-accent); border-radius: 0 10px 10px 0; background: var(--color-highlight-soft); }
.debt-edit-form input[readonly] { background: var(--color-paper-2); color: var(--color-muted); cursor: not-allowed; }
.debt-template-update { grid-template-columns: 24px minmax(0, 1fr); align-items: start; padding: 13px; border: 1px solid var(--color-rule); border-radius: 11px; background: var(--color-accent-soft); }
.debt-template-update input { margin-top: 2px; }
.debt-template-update span, .debt-template-update strong, .debt-template-update small { display: block; }
.debt-template-update small { margin-top: 3px; color: var(--color-muted); font-weight: 600; line-height: 1.4; }
.capital-history { padding: 11px 12px; border: 1px solid var(--color-rule); border-radius: 11px; }
.capital-history summary { cursor: pointer; font-weight: 800; }
.capital-history ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.capital-history li { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--color-rule); }
.capital-history small { color: var(--color-muted); }
.form-actions { position: sticky; bottom: -24px; display: flex; justify-content: flex-end; gap: 8px; margin: 4px -22px -24px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-rule); background: var(--color-sticky); }
.line-editor { display: grid; gap: 9px; }
.line-item { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(90px, .55fr) minmax(120px, 1fr) 44px; gap: 9px; align-items: end; padding: 13px; border: 1px solid var(--color-rule); border-radius: 13px; background: var(--color-paper); }
.line-item .icon-button { background: var(--color-surface); color: var(--color-danger); }
.form-hint { margin: -4px 0 0; color: var(--color-muted); font-size: 12px; font-weight: 500; }
.inline-total { display: flex; justify-content: space-between; gap: 16px; padding: 14px; border-radius: 11px; background: var(--color-highlight-soft); color: var(--color-accent-strong); font-variant-numeric: tabular-nums; }

.purchase-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.product-picker { position: relative; display: grid; gap: 8px; min-width: 0; }
.product-filter { min-height: 44px; padding-left: 38px; background-image: linear-gradient(var(--color-muted), var(--color-muted)); background-repeat: no-repeat; background-position: 16px center; background-size: 10px 1px; }
.product-picker::before { content: "⌕"; position: absolute; z-index: 1; left: 13px; top: 34px; color: var(--color-muted); font-size: 18px; pointer-events: none; }
.product-preview { min-height: 52px; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px; border: 1px solid var(--color-rule); border-radius: 10px; background: var(--color-surface); }
.product-preview.is-empty { grid-template-columns: 1fr; color: var(--color-muted); font-size: 12px; }
.product-preview img, .inventory-thumb { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: var(--color-paper-2); }
.product-placeholder { display: grid; place-items: center; color: var(--color-accent-strong); font-family: var(--font-display); font-weight: 850; }
.product-preview strong, .product-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-preview small { color: var(--color-muted); font-size: 11px; }
.quantity-shortcut { min-height: 44px; margin-top: 4px; padding: 7px 10px; border: 1px solid var(--color-rule); border-radius: 9px; background: var(--color-surface); color: var(--color-accent-strong); font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.quantity-shortcut:hover, .quantity-shortcut:focus-visible { border-color: var(--color-accent); outline: none; }
.photo-field { padding: 10px; border: 1px dashed var(--color-rule-strong); border-radius: 10px; background: var(--color-surface); }
.photo-status { min-height: 20px; color: var(--color-muted); font-size: 12px; }
.purchase-line > .product-picker { grid-column: 1; grid-row: 1 / 3; }
.purchase-line > .quantity-field { grid-column: 2; grid-row: 1; }
.purchase-line > .cost-field { grid-column: 3; grid-row: 1; }
.purchase-line > .photo-field { grid-column: 2 / 4; grid-row: 2; }
.purchase-line > .remove-line { grid-column: 4; grid-row: 1; }
.inventory-list .ledger-row { grid-template-columns: 58px 56px minmax(180px, 1fr) auto; }
.inventory-search-field { margin-bottom: 12px; }
.inventory-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.toast-region { position: fixed; z-index: 100; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: min(390px, calc(100% - 36px)); display: grid; gap: 8px; }
.toast { padding: 14px 16px; border-radius: 12px; background: var(--color-ink); color: var(--color-on-dark); box-shadow: var(--shadow-float); animation: toast-in 180ms var(--ease-out); }
.toast.error { background: var(--color-danger); color: var(--color-on-dark); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1080px) {
  .app-frame { grid-template-columns: 1fr; }
  .side-rail { display: none; }
  .brand-button { display: flex; }
  .topbar-search { margin-left: 12px; }
  .topbar { padding-inline: max(18px, calc((100vw - var(--content)) / 2)); }
  .user-menu { right: max(18px, calc((100vw - var(--content)) / 2)); }
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .notebook-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .notebook-sales { grid-row: auto; min-height: 180px; }
  .notebook-card { min-height: 145px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: center; column-gap: 14px; }
  .notebook-number { grid-column: 1 / -1; }
  .notebook-icon { grid-column: 1; grid-row: 2; margin: 0; }
  .notebook-copy { grid-column: 2; grid-row: 2; margin: 0; padding: 0; }
  .notebook-copy strong { font-size: 20px; }
  .notebook-arrow { position: static; grid-column: 3; grid-row: 2; }
  .notebook-sales::after { width: 120px; height: 120px; border-width: 20px; }
  .metric-grid, .closing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closing-grid div, .closing-grid div:nth-child(4n + 1) { border-left: 1px solid var(--color-dark-rule); border-top: 1px solid var(--color-dark-rule); }
  .closing-grid div:nth-child(2n + 1) { border-left: 0; }
  .closing-grid div:nth-child(-n + 2) { border-top: 0; }
  .split-ledger { grid-template-columns: 1fr; }
  .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debt-overview { grid-template-columns: 1fr; }
  .line-item { grid-template-columns: minmax(0, 1fr) 100px 44px; }
  .sale-line { grid-template-columns: minmax(0, 1fr) 120px 44px; }
  .sale-line > label:first-child { grid-column: 1 / -1; }
  .sale-line > label:nth-child(2) { grid-column: 1; }
  .sale-line > label:nth-child(3) { grid-column: 2; }
  .sale-line > .remove-line { grid-column: 3; grid-row: 2; }
  .purchase-line > .product-picker { grid-column: 1 / -1; grid-row: auto; }
  .purchase-line > .quantity-field { grid-column: 1; grid-row: auto; }
  .purchase-line > .cost-field { grid-column: 2; grid-row: auto; }
  .purchase-line > .photo-field { grid-column: 1 / -1; grid-row: auto; }
  .purchase-line > .remove-line { grid-column: 3; grid-row: 2; }
}

@media (max-width: 700px) {
  body { font-size: 17px; line-height: 1.55; }
  .topbar { min-height: 62px; padding: 8px 12px; }
  .brand-button small, #user-name, #install-button { display: none; }
  .topbar-search { display: none; }
  .user-button { padding-right: 5px; }
  .user-menu { top: 58px; right: 12px; }
  .mobile-nav {
    position: sticky;
    z-index: 35;
    top: 62px;
    width: 100%;
    min-height: 68px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--color-rule);
    background: var(--color-sticky);
    box-shadow: 0 8px 22px rgba(30, 42, 27, .08);
    backdrop-filter: blur(14px);
  }
  .mobile-nav button { min-width: 0; min-height: 56px; display: grid; place-items: center; align-content: center; gap: 1px; padding: 4px; border-radius: 11px; background: transparent; }
  .mobile-nav button span { color: var(--color-muted); font-size: 11px; font-weight: 850; }
  .mobile-nav button strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 14px; white-space: nowrap; }
  .mobile-nav button.is-active { background: var(--color-ink); color: var(--color-on-dark); }
  .mobile-nav button.is-active span { color: var(--color-highlight); }
  .content { width: min(calc(100% - 24px), var(--content)); padding: 25px 0 64px; }
  .welcome-row, .page-heading, .section-heading { align-items: flex-start; }
  .page-heading, .section-heading { gap: 12px; }
  .welcome-row { display: grid; }
  .balance-pill { width: 100%; }
  .page-heading { flex-direction: column; }
  .page-heading .button { width: 100%; }
  h1 { font-size: 36px; line-height: 1.05; }
  h2 { font-size: 26px; line-height: 1.15; }
  h3 { font-size: 20px; }
  .eyebrow, .notebook-number { font-size: 13px; line-height: 1.4; }
  .muted { line-height: 1.55; }
  label { font-size: 16px; }
  input, select, textarea { min-height: 52px; font-size: 17px; }
  .button, .text-button { font-size: 16px; line-height: 1.25; white-space: normal; }
  .button-small { font-size: 15px; }
  .alert, .empty-state { font-size: 16px; line-height: 1.5; }
  .notebook-copy small { font-size: 15px; line-height: 1.45; }
  .debt-filter-panel { padding: 14px; }
  .debt-filter-grid { grid-template-columns: 1fr; }
  .debt-filter-grid label { font-size: 16px; }
  .debt-filter-footer { align-items: stretch; flex-direction: column; gap: 3px; }
  .debt-filter-footer strong { font-size: 14px; }
  .debt-filter-footer .text-button { width: fit-content; font-size: 15px; }
  .quick-summary { padding: 15px; }
  .metric-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-grid article { padding: 16px; }
  .metric-grid span { font-size: 15px; }
  .metric-grid strong { font-size: 21px; overflow-wrap: anywhere; }
  .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .action-card { min-height: 128px; padding: 15px; }
  .action-card strong { font-size: 17px; line-height: 1.25; }
  .action-card small { font-size: 15px; line-height: 1.35; }
  .ledger-row { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 16px; }
  .ledger-row .code { grid-column: 1; }
  .ledger-row .detail { grid-column: 2; }
  .ledger-row .detail strong { font-size: 17px; line-height: 1.35; }
  .ledger-row .detail strong, .ledger-row .detail small { overflow: visible; text-overflow: clip; white-space: normal; }
  .ledger-row small, .ledger-label { font-size: 15px; line-height: 1.4; }
  .ledger-row .ledger-value { grid-column: 1 / -1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--color-rule); font-size: 17px; text-align: right; }
  .ledger-row .correction-link { grid-column: 1 / -1; font-size: 15px; }
  .interest-badge { font-size: 14px; line-height: 1.35; }
  .capital-adjustment-note, .settled-without-cash { max-width: 100%; font-size: 14px; line-height: 1.4; }
  .debt-links { display: grid; grid-template-columns: 1fr; gap: 0; }
  .inventory-list .ledger-row { grid-template-columns: 48px minmax(0, 1fr); }
  .inventory-list .inventory-thumb { grid-column: 1; grid-row: 1; }
  .inventory-list .code { grid-column: 2; width: fit-content; }
  .inventory-list .detail { grid-column: 1 / -1; }
  .inventory-actions { grid-column: 1 / -1; justify-content: stretch; }
  .inventory-actions .button { flex: 1 1 auto; }
  .money-overview { grid-template-columns: 1fr 1fr; }
  .money-card.primary { grid-column: 1 / -1; }
  .money-card { padding: 20px; }
  .money-card span { font-size: 15px; }
  .money-card strong { font-size: 30px; overflow-wrap: anywhere; }
  .closing-grid span { font-size: 15px; }
  .closing-grid strong { font-size: 22px; }
  .debt-total-label { font-size: 13px; }
  .debt-total-card > strong { font-size: 38px; overflow-wrap: anywhere; }
  .debt-total-card > p { font-size: 15px; }
  .debt-total-card dt { font-size: 15px; }
  .debt-total-card dd { font-size: 17px; text-align: right; }
  .debt-scope-summary small { font-size: 14px; }
  .debt-scope-summary strong { font-size: 16px; }
  .debt-category-card { padding: 18px; }
  .debt-category-card header span { font-size: 14px; }
  .debt-category-card header strong { font-size: 27px; }
  .debt-category-card p { min-height: 0; font-size: 16px; line-height: 1.45; }
  .debt-category-meta { flex-wrap: wrap; font-size: 14px; line-height: 1.4; }
  .debt-category-card > small { font-size: 14px; line-height: 1.4; }
  .debt-card-action { font-size: 14px; }
  .debt-edit-source, .debt-template-update small { font-size: 15px; line-height: 1.45; }
  .debt-category-grid { grid-template-columns: 1fr; }
  .goal-card .goal-type { font-size: 13px; }
  .goal-numbers { font-size: 15px; }
  .financial-toggle small { font-size: 13px; }
  .financial-toggle strong { font-size: 20px; }
  .formula-note { font-size: 16px; line-height: 1.5; }
  .goal-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-card.full { grid-column: auto; }
  .admin-card .section-heading { flex-direction: column; align-items: stretch; }
  .admin-card .section-heading .button { width: 100%; }
  .data-table.mobile-cards, .data-table.mobile-cards tbody, .data-table.mobile-cards tr, .data-table.mobile-cards td { display: block; width: 100%; }
  .data-table.mobile-cards thead { display: none; }
  .data-table.mobile-cards tbody { display: grid; gap: 10px; }
  .data-table.mobile-cards tr { padding: 12px; border: 1px solid var(--color-rule); border-radius: 12px; background: var(--color-surface); }
  .data-table.mobile-cards td { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--color-rule); font-size: 16px; text-align: right; }
  .data-table.mobile-cards td:last-child { border-bottom: 0; }
  .data-table.mobile-cards td::before { content: attr(data-label); flex: 0 0 auto; color: var(--color-muted); font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
  .data-table.mobile-cards td[colspan] { display: block; min-height: 0; text-align: left; }
  .data-table.mobile-cards td[colspan]::before { content: none; }
  .opening-intro { grid-template-columns: 1fr; }
  .opening-section { padding: 15px; }
  .opening-section .section-heading { flex-direction: column; align-items: stretch; }
  .opening-section .section-heading .button { width: 100%; }
  .inventory-intro-actions { display: grid; grid-template-columns: 1fr; }
  .inventory-intro-actions .button { width: 100%; }
  .inventory-intro-actions .muted { margin-left: 0; }
  .opening-actions { display: grid; grid-template-columns: 1fr; bottom: 82px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .interest-summary { grid-template-columns: 1fr 1fr; }
  .interest-summary > div { border-bottom: 1px solid var(--color-rule); }
  .interest-summary > div:nth-child(2) { border-right: 0; }
  .interest-summary > .total { grid-column: 1 / -1; border-bottom: 0; }
  .interest-month-row dl { grid-template-columns: 1fr 1fr; }
  .interest-adjustment-facts { grid-template-columns: 1fr; }
  .capital-adjustment-facts { grid-template-columns: 1fr; }
  .interest-summary small, .interest-current-rate span, .interest-month-row > div:first-child small, .interest-month-row dt { font-size: 14px; }
  .interest-adjustment-facts span, .capital-adjustment-facts span, .no-cash-settlement-facts span { font-size: 15px; line-height: 1.4; }
  .form-hint, .product-preview.is-empty, .product-preview small, .photo-status { font-size: 15px; line-height: 1.4; }
  .quantity-shortcut { font-size: 15px; }
  .line-item { grid-template-columns: minmax(0, 1fr) 76px; }
  .sale-line { grid-template-columns: minmax(0, 1fr) 76px; }
  .sale-line > label:first-child { grid-column: 1 / -1; grid-row: 1; }
  .sale-line > label:nth-child(2) { grid-column: 1; grid-row: 2; }
  .sale-line > label:nth-child(3) { grid-column: 1; grid-row: 3; }
  .sale-line > .remove-line { grid-column: 2; grid-row: 3; }
  .purchase-line > .product-picker, .purchase-line > .photo-field { grid-column: 1 / -1; }
  .purchase-line > .quantity-field { grid-column: 1; }
  .purchase-line > .cost-field { grid-column: 1; }
  .purchase-line > .remove-line { grid-column: 2; grid-row: 2; }
  .purchase-tools { align-items: stretch; flex-direction: column; }
  .purchase-tools .button, .purchase-tools .text-button { width: 100%; }
  .modal { width: 100%; max-height: calc(100vh - 8px); margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .modal-body { max-height: calc(100vh - 92px); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .form-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .login-screen { display: grid; grid-template-columns: 1fr; padding: 0; }
  .login-screen::before { min-height: 190px; align-items: flex-end; padding: 28px 24px; border-radius: 0; font-size: 48px; }
  .login-card { min-height: calc(100vh - 190px); padding: 28px 24px; border: 0; border-radius: 0; }
  .brand-mark { display: none; }
  .notebook-card { padding: 16px; }
  .notebook-icon { width: 46px; height: 46px; }
  .notebook-copy strong { font-size: 20px; }
  .action-grid { grid-template-columns: 1fr; }
  .action-card { min-height: 94px; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 14px; }
  .action-card > span { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .action-card strong { grid-column: 2; grid-row: 1; font-size: 18px; }
  .action-card small { grid-column: 2; grid-row: 2; font-size: 15px; }
  .money-overview { grid-template-columns: 1fr; }
  .money-card.primary { grid-column: auto; }
  .debt-scope-summary { grid-template-columns: 1fr; }
  .interest-summary { grid-template-columns: 1fr; }
  .interest-summary > div, .interest-summary > div:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--color-rule); }
  .interest-summary > .total { grid-column: auto; border-bottom: 0; }
  .closing-grid { grid-template-columns: 1fr; }
  .closing-grid div, .closing-grid div:nth-child(2n + 1), .closing-grid div:nth-child(-n + 2) { border-left: 0; border-top: 1px solid var(--color-dark-rule); }
  .closing-grid div:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}