/* "أعمالي" (My business) + expenses/income, suppliers, installments — V5 "calm and simple".
   The one memorable thing is the month written as a sum in the shop's notebook: دخل, minus صرف, a double rule,
   الصافي — tabular figures aligned at the end like a column of numbers. Everything around it stays quiet.
   Colors: tokens only — teal = money in, brick (debt) = money out / owed / late, amber = Pro and installments.
   Logical properties (RTL first), Latin digits, no entrance animations, spacing from the V5 --sp-* scale. */

.biz { padding-top: var(--sp-1); }
.biz .money, .biz-sum .money { font-variant-numeric: tabular-nums; }

/* ----- one centred column (also on desktop) ----- */
.biz-hub, .cash-page, .sup-page, .sup-detail, .inst-page { width: 100%; max-width: 640px; margin-inline: auto; }
.biz-hub { display: flex; flex-direction: column; gap: var(--sp-5); padding-bottom: 72px; }
@media (min-width: 900px) { .biz-hub { padding-bottom: var(--sp-7); } }
.page.biz > .biz-lock.compact { margin-bottom: var(--sp-4); }
.biz-hub > .biz-lock.compact { margin-bottom: 0; }

/* ----- compact month ‹ › ----- */
.biz-month { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 40px; }
.biz-hub > .biz-month { margin-bottom: calc(-1 * var(--sp-2)); }
.biz-step {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--text-2); background: transparent; border: 1px solid var(--border);
  transition: background var(--dur), color var(--dur), transform 80ms var(--ease);
}
.biz-step:hover:not(:disabled) { background: var(--brand-softer); color: var(--brand-strong); }
.biz-step:active:not(:disabled) { transform: scale(.94); }
.biz-step:disabled { opacity: .3; cursor: default; }
.biz-chev-prev { transform: scaleX(-1); }
[dir='rtl'] .biz-chev-prev { transform: none; }
.biz-month-main { min-width: 9.5em; text-align: center; font-size: var(--fs-md); font-weight: 800; line-height: 1.3; }

/* ----- the sum ----- */
.biz-sum { border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.biz-sum-btn {
  display: flex; flex-direction: column; width: 100%; padding: var(--sp-4) var(--sp-5) var(--sp-3);
  border-radius: inherit; color: var(--text); text-align: start; transition: background var(--dur);
}
.biz-sum-btn:not(:disabled):hover { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.biz-sum-btn:disabled { cursor: default; opacity: 1; }
.biz-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--sp-3); padding-block: var(--sp-2); }
.biz-line-label { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-md); color: var(--text-2); }
.biz-line-name { display: inline-flex; flex-direction: column; line-height: 1.3; }
.biz-line-hint { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
.biz-line-val { margin-inline-start: auto; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; text-align: end; white-space: nowrap; }
.biz-minus { margin-inline-end: 3px; color: var(--text-3); font-weight: 700; }
.biz-key-in, .biz-key-out { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.biz-key-in { background: var(--payment); }
.biz-key-out { background: var(--debt); }
/* the total line of a sum: a double rule above it, as written in a notebook */
.biz-line.biz-net { position: relative; margin-top: var(--sp-2); padding-top: var(--sp-4); }
.biz-line.biz-net::before { content: ''; position: absolute; inset-inline: 0; top: 2px; height: 4px; border-top: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); }
.biz-net .biz-line-label { color: var(--text); font-weight: 800; font-size: var(--fs-lg); }
.biz-net .biz-line-val { font-size: clamp(28px, 8.4vw, 36px); letter-spacing: -0.02em; }
.biz-net.pos .biz-line-val { color: var(--payment); }
.biz-net.neg .biz-line-val, .biz-net.neg .biz-line-label { color: var(--debt); }
/* the parts of a line (folded by default) */
.biz-line-sub { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--sp-2); padding-inline-start: var(--sp-4); border-inline-start: 2px solid var(--border); }
.biz-part { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); line-height: 1.7; }
.biz-part-label { color: var(--text-3); font-weight: 600; }
.biz-part-val { color: var(--text-2); font-weight: 700; white-space: nowrap; }
.biz-sum-more { display: inline-flex; align-items: center; justify-content: center; gap: 4px; align-self: center; margin-top: var(--sp-2); padding: 4px 10px; border-radius: var(--r-pill); color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; }
.biz-sum-chev { transition: transform var(--dur) var(--ease); }
.biz-sum.open .biz-sum-chev { transform: rotate(180deg); }

/* ----- the four add tiles ----- */
.biz-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.biz-tile {
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0; min-height: 68px; padding: var(--sp-3);
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-align: start;
  transition: background var(--dur), border-color var(--dur), transform 90ms var(--ease);
}
.biz-tile:hover { background: var(--surface-2); }
.biz-tile:active { transform: scale(.975); }
.biz-tile-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto; }
.biz-tile-label { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: var(--fs-lg); line-height: 1.25; }
/* a small "+" on the icon: these tiles add something */
.biz-tile-plus {
  position: absolute; inset-inline-end: -5px; bottom: -5px; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--surface); background: var(--text-2); color: var(--surface);
}
.biz-tile-plus .icon { width: 12px; height: 12px; }
.tone-out .biz-tile-icon { background: var(--debt-soft); color: var(--debt); }
.tone-out .biz-tile-plus { background: var(--debt-solid); color: #fff; }
.tone-in .biz-tile-icon { background: var(--payment-soft); color: var(--payment); }
.tone-in .biz-tile-plus { background: var(--brand); color: var(--brand-ink); }
.tone-sup .biz-tile-icon { background: var(--surface-3); color: var(--text-2); }
.tone-inst .biz-tile-icon { background: var(--accent-soft); color: var(--accent-strong); }
.tone-inst .biz-tile-plus { background: var(--accent); color: #2B1600; }
@media (max-width: 374px) { .biz-tile { gap: 10px; padding-inline: 10px; } .biz-tile-icon { width: 40px; height: 40px; } .biz-tile-label { font-size: var(--fs-md); } }
@media (min-width: 560px) {
  .biz-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .biz-tile { flex-direction: column; justify-content: center; text-align: center; min-height: 112px; }
  .biz-tile-label { flex: 0 0 auto; }
}

/* ----- the three rows ----- */
.biz-rows { overflow: hidden; }
.biz-row { gap: var(--sp-3); min-height: var(--row-min); padding: var(--sp-3) var(--sp-4); }
.biz-row-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); flex: 0 0 auto; }
.biz-row-sup .biz-row-icon { background: var(--surface-3); }
.biz-row-inst .biz-row-icon { background: var(--accent-soft); color: var(--accent-strong); }
.biz-row-title { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: var(--fs-md); line-height: 1.35; }
.biz-row-val { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: 0 0 auto; text-align: end; font-weight: 800; font-size: var(--fs-md); }
.biz-row-small { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); line-height: 1.3; }
.biz-row-count { font-weight: 700; color: var(--text-2); font-size: var(--fs-sm); }
.biz-row-quiet { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--fs-sm); color: var(--text-3); }
.biz-row-quiet.ok { color: var(--payment); }
.biz-row-chev { color: var(--text-3); flex: 0 0 auto; }
.biz-soon { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3); color: var(--text-3); font-size: var(--fs-sm); font-weight: 700; text-align: center; }
.biz-soon .icon { color: var(--accent-strong); }
.biz-calm { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.biz-clear { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.biz-section { margin: var(--section-gap) 4px var(--sp-3); font-size: var(--fs-md); font-weight: 800; color: var(--text-2); }

/* ----- Pro lock ----- */
.biz-lock {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); padding: var(--sp-5); border-radius: var(--r-xl);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--text);
}
.biz-lock-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--surface); color: var(--accent-strong); }
.biz-lock-title { font-weight: 800; font-size: var(--fs-lg); line-height: 1.4; }
.biz-lock-text { color: var(--text-2); margin-top: var(--sp-1); line-height: 1.65; }
.biz-lock-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.biz-lock-list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-weight: 600; line-height: 1.55; }
.biz-lock-list .icon { color: var(--accent-strong); margin-top: 3px; flex: 0 0 auto; }
.biz-lock-cta { grid-column: 1 / -1; margin-top: var(--sp-1); }
.biz-lock.compact { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-lg); }
.biz-lock.compact .biz-lock-icon { width: 36px; height: 36px; border-radius: 10px; }
.biz-lock.compact .biz-lock-title { font-size: var(--fs-md); }
.biz-lock.compact .biz-lock-text { font-size: var(--fs-xs); margin-top: 0; line-height: 1.5; }
.biz-lock.compact .biz-lock-cta { grid-column: auto; margin-top: 0; }
@media (max-width: 420px) { .biz-lock.compact { grid-template-columns: auto minmax(0, 1fr); } .biz-lock.compact .biz-lock-cta { grid-column: 1 / -1; } }

/* the locked preview: what the tab looks like, clearly an example */
.biz-preview { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); opacity: .72; pointer-events: none; }
.biz-preview-tag { align-self: flex-start; padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); font-weight: 800; }
.biz-preview .biz-sum-btn { padding-bottom: var(--sp-4); }

/* ----- chart (rendered by Reports) ----- */
.biz-legend { display: inline-flex; gap: 12px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }
.biz-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.biz-chart-box { position: relative; width: 100%; }
.biz-svg { display: block; width: 100%; height: auto; overflow: visible; direction: ltr; -webkit-user-select: none; user-select: none; }
.biz-svg text { font-family: var(--font); }
.biz-gridline { stroke: var(--border); stroke-width: 1; }
.biz-axis { stroke: var(--border-strong); stroke-width: 1; }
.biz-ymax { fill: var(--text-3); font-size: 11px; font-weight: 700; }
.biz-bar-in { fill: var(--payment); }
.biz-bar-out { fill: var(--debt); }
.biz-slot { cursor: pointer; }
.biz-hit { fill: transparent; transition: fill var(--dur); }
.biz-slot.hov .biz-hit { fill: var(--surface-2); }
.biz-slot.sel .biz-hit { fill: var(--brand-softer); }
.biz-xl { fill: var(--text-3); font-size: 11.5px; font-weight: 700; }
.biz-xl2 { font-size: 10.5px; font-weight: 600; }
.biz-slot.sel .biz-xl { fill: var(--brand-strong); font-weight: 800; }
.biz-chart-empty { position: absolute; inset: 0 0 36px; display: flex; align-items: center; justify-content: center; padding: 0 12px; text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); }
.biz-readout { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; margin-top: 8px; font-size: var(--fs-sm); }
.biz-readout-m { font-weight: 800; color: var(--text); }
.biz-readout-v { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-2); }

/* ----- where the money goes (rendered by Reports) ----- */
.biz-where-list { display: flex; flex-direction: column; gap: 2px; }
.biz-where-row { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 8px 6px; border-radius: var(--r-md); text-align: start; color: var(--text); transition: background var(--dur); }
.biz-where-row:hover { background: var(--surface-2); }
.biz-where-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.biz-where-name { font-weight: 700; min-width: 0; }
.biz-where-amt { display: inline-flex; align-items: baseline; gap: 8px; flex: 0 0 auto; font-weight: 800; }
.biz-where-pct { min-width: 34px; text-align: end; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.biz-where-track { display: block; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.biz-where-track > span { display: block; height: 100%; border-start-end-radius: 4px; border-end-end-radius: 4px; background: var(--debt); }

/* ----- forms (sheets) ----- */
.biz-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.biz-who { display: flex; align-items: center; gap: 10px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); }
.biz-who .grow { display: flex; flex-direction: column; min-width: 0; }
.biz-amount { display: flex; flex-direction: column; gap: var(--sp-2); }
.biz-amount-chips .chip { min-height: 36px; }
.biz-after { margin: 0; padding-top: var(--sp-3); border-top: 1px dashed var(--border); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.biz-detail-amount { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.02em; }
.cash-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cash-chips .chip { min-height: 40px; padding: 0 14px; font-size: var(--fs-md); }
.cash-chips .chip .icon { width: 15px; height: 15px; }
.biz-date-chips { flex-wrap: wrap; overflow: visible; }
.biz-date-chips .chip { min-height: 38px; padding: 0 14px; }
.sheet button.chip.active, .sheet button.chip.active:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* reminder switch row */
.biz-remind {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
}
.biz-remind.on { background: var(--brand-softer); border-color: color-mix(in srgb, var(--brand) 25%, var(--border)); }
.biz-remind-icon { display: inline-flex; color: var(--text-3); flex: 0 0 auto; }
.biz-remind.on .biz-remind-icon { color: var(--brand-strong); }
.biz-remind-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.biz-remind-label { font-weight: 700; line-height: 1.4; }
.biz-remind-sub { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); line-height: 1.5; }
.biz-remind:has(.switch:disabled) { cursor: default; opacity: .6; }

/* ----- expenses / income list ----- */
.cash-head { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.cash-totals { display: flex; justify-content: center; gap: var(--sp-6); flex-wrap: wrap; }
.cash-total { display: flex; flex-direction: column; align-items: center; gap: 0; }
.cash-total-label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.cash-total .money { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.cash-search { margin-top: var(--sp-4); }
.cash-filter { margin-top: var(--sp-3); }
.cash-filter .chip { gap: 6px; }
.cash-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-3) 4px 0; font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.cash-day { margin-top: var(--sp-5); }
.cash-day-head { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 4px var(--sp-2); font-size: var(--fs-sm); font-weight: 800; }
.cash-day-date { font-weight: 600; color: var(--text-3); }
.cash-row { min-height: var(--row-min); }
.cash-row .list-trailing { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cash-ro .list-title { color: var(--text-2); }
.icon-btn.active { background: var(--brand-softer); color: var(--brand-strong); }

/* ----- suppliers ----- */
.sup-owe { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-5) var(--sp-4); margin-bottom: var(--sp-4); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); text-align: center; }
.sup-owe-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }
.sup-owe-val { font-size: clamp(28px, 8vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.sup-owe-sub { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
.sup-search { margin-bottom: var(--sp-4); }
.sup-row { min-height: var(--row-min); }
.sup-tag { display: flex; flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.3; }
.sup-tag-label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.sup-tag-ok { flex-direction: row; align-items: center; gap: 4px; color: var(--payment); font-weight: 800; font-size: var(--fs-sm); }

.sup-hero { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-5) var(--sp-5); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.sup-hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 40px; }
.sup-hero-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }
.sup-amount { font-size: clamp(30px, 9vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.sup-hero-ok { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); color: var(--payment); font-size: var(--fs-xl); font-weight: 800; }
.sup-contact { display: inline-flex; gap: var(--sp-2); flex: 0 0 auto; }
.sup-contact-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); text-decoration: none; transition: background var(--dur); }
.sup-contact-btn:hover { background: var(--brand-softer); color: var(--brand-strong); text-decoration: none; }
.sup-contact-btn.wa { color: var(--brand-strong); }
.sup-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.sup-actions .btn { min-width: 0; padding-inline: 10px; }
.sup-actions .btn { height: auto; min-height: 52px; padding-block: 8px; }
.sup-actions .btn-label { white-space: normal; line-height: 1.25; text-align: center; }
.sup-buy .icon { color: var(--debt); }
.sup-note { margin: var(--sp-3) 4px 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.sup-month { margin-top: var(--sp-4); }
.sup-month-name { margin: 0 4px var(--sp-2); font-size: var(--fs-sm); font-weight: 800; color: var(--text-3); }
.sup-entry { min-height: var(--row-min); }
.sup-entry .list-subtitle { white-space: normal; }

/* ----- installments: list ----- */
.inst-list + .inst-toggle, .inst-toggle + .inst-list, .biz-clear + .inst-toggle { margin-top: var(--sp-4); }
.inst-toggle { display: block; }
.inst-row { align-items: flex-start; min-height: var(--row-min); }
.inst-row .list-leading { padding-top: 2px; }
.inst-row .list-trailing { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.inst-progress { display: flex; flex-direction: column; gap: 5px; margin-top: var(--sp-2); }
.inst-bar { display: block; height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.inst-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--payment); transition: width 220ms var(--ease); }
.inst-progress-text { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.inst-progress.big .inst-bar { height: 10px; }
.inst-progress.big .inst-progress-text { font-size: var(--fs-sm); color: var(--text-2); }

/* new plan */
.inst-count { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inst-count .chip-row { flex: 1 1 auto; }
.inst-count .chip { min-width: 44px; min-height: 40px; justify-content: center; font-size: var(--fs-md); }
.inst-stepper { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.inst-stepper .icon-btn:disabled { opacity: .35; }
.inst-stepper-n { min-width: 32px; text-align: center; font-weight: 800; font-size: var(--fs-lg); }
.inst-preview { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.inst-preview-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-3); }
.inst-preview-big { font-weight: 800; font-size: var(--fs-lg); color: var(--text); }

/* the schedule (preview + one plan) */
.inst-sched { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.inst-sched-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: var(--sp-2) var(--sp-3); }
.inst-sched-row + .inst-sched-row, .inst-sched-gap + .inst-sched-row { border-top: 1px solid var(--border); }
.inst-sched-gap { padding: 0 12px; text-align: center; color: var(--text-3); font-weight: 800; line-height: 1.2; border-top: 1px solid var(--border); }
.inst-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: 800; flex: 0 0 auto; }

.inst-sched.full .inst-sched-row { padding: 0; min-height: 0; }
.inst-sched-btn { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--row-min); padding: var(--sp-2) var(--sp-4); color: var(--text); text-align: start; }
button.inst-sched-btn { cursor: pointer; transition: background var(--dur); }
button.inst-sched-btn:hover { background: var(--surface-2); }
button.inst-sched-btn:active { background: var(--surface-3); }
.inst-sched-when { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.inst-sched-name { font-weight: 700; }
.inst-sched-state { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.inst-sched-amt { font-weight: 700; white-space: nowrap; }
.inst-undo-mark { display: inline-flex; color: var(--text-3); }
/* states: ✓ paid (teal) · partial (amber) · late (brick text) · next (highlighted) · later (muted) */
.st-paid .inst-n { background: var(--payment); color: var(--brand-ink); }
.st-paid .inst-sched-state { color: var(--payment); }
.st-paid .inst-sched-amt { color: var(--text-3); }
.st-partial .inst-n { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent); }
.st-partial .inst-sched-state { color: var(--accent-strong); }
.st-overdue .inst-n { background: var(--debt-soft); color: var(--debt); }
.st-overdue .inst-sched-state, .st-overdue .inst-sched-amt { color: var(--debt); }
.inst-sched-row.is-next { background: var(--brand-softer); }
.inst-sched-row.is-next .inst-n { background: var(--brand); color: var(--brand-ink); }
.inst-sched-row.is-next .inst-sched-state { color: var(--brand-strong); }
.inst-sched-row.is-next button.inst-sched-btn:hover { background: var(--brand-soft); }
.inst-sched-row.later .inst-sched-name, .inst-sched-row.later .inst-sched-amt { color: var(--text-2); font-weight: 600; }

/* one plan */
.inst-view { display: flex; flex-direction: column; gap: var(--sp-4); }
.inst-view-lock { margin-bottom: 0; }
.inst-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.inst-head-top { display: flex; align-items: center; gap: var(--sp-2); }
.inst-head-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }
.inst-head-amount { font-size: clamp(28px, 8vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.inst-head-ok { color: var(--payment); }
.inst-head-meta { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
.inst-alert { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: var(--accent-strong); }
.inst-hint { display: flex; align-items: center; gap: 6px; margin: 0 2px calc(-1 * var(--sp-2)); font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.inst-view-foot { display: flex; flex-direction: column; gap: var(--sp-2); }
.inst-view-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); }

/* pay / undo step */
.inst-pay { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.inst-pay-name { font-weight: 800; color: var(--text-2); }
.inst-pay-amount { font-size: clamp(32px, 10vw, 42px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--payment); }
.inst-pay-due { font-size: var(--fs-sm); font-weight: 700; color: var(--text-3); margin-top: calc(-1 * var(--sp-2)); }
.inst-pay-due.late { color: var(--debt); }
.inst-pay .field { margin-top: var(--sp-1); }
.inst-other, .inst-undo-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.inst-undo-link { margin-top: var(--sp-2); }
.inst-pay-hint { margin: 0; color: var(--text-2); line-height: 1.6; }
.inst-pay-foot { display: flex; gap: var(--sp-2); }
.inst-pay-foot > .btn:first-child { flex: 0 0 auto; }

/* the plans of one customer (customer file) */
.inst-cplans { display: flex; flex-direction: column; gap: var(--sp-3); }
.inst-cplan { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.inst-cplan-main { display: flex; flex-direction: column; gap: 2px; margin: calc(-1 * var(--sp-2)); padding: var(--sp-2); width: calc(100% + 2 * var(--sp-2)); border-radius: var(--r-md); color: var(--text); text-align: start; transition: background var(--dur); }
.inst-cplan-main:hover { background: var(--surface-2); }
.inst-cplan-top { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.inst-cplan-title { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: var(--fs-md); }
.inst-cplan-chev { color: var(--text-3); flex: 0 0 auto; }
.inst-cplan-next { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.inst-cplan.is-done { box-shadow: none; background: var(--surface-2); }
.inst-cplan.is-done .inst-cplan-title { color: var(--text-2); }
.inst-cplans-new { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: var(--sp-1); }

@media (prefers-reduced-motion: reduce) {
  .biz-sum-chev, .inst-bar > span, .biz-tile, .biz-step { transition: none; }
}