.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding: 20px 22px 16px; }
.panel-head h2, .panel-head h3 { margin: 4px 0 3px; font-size: 1rem; }
.panel-head p { margin: 0; color: var(--text-soft); font-size: .82rem; line-height: 1.5; }
/* Right-hand side of a panel head: a count chip and the page's add action. */
.panel-head { flex-wrap: wrap; }
.panel-head-actions { display: flex; flex: none; align-items: center; gap: 10px; margin-left: auto; }
.refresh-button { gap:8px; }
.refresh-button svg { width:16px; height:16px; }
.refresh-button.refreshing svg { animation:refreshSpin .8s linear infinite; }
@keyframes refreshSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .refresh-button.refreshing svg { animation:none; } }
.add-new-icon { display: grid; place-items: center; }
.add-new-icon svg { width: 15px; height: 15px; }
.panel-kicker, .eyebrow { display: block; color: var(--primary); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 12px; margin-bottom: 18px; }
.metric-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.metric-card small, .metric-card strong, .metric-card span { display: block; }
.metric-card small { color: var(--text-soft); font-size: .76rem; font-weight: 700; }
.metric-card strong { margin: 9px 0 6px; overflow: hidden; font-size: clamp(1.15rem, 1.8vw, 1.55rem); text-overflow: ellipsis; white-space: nowrap; }
.metric-card span { color: var(--text-muted); font-size: .72rem; }
.metric-card.featured { color: #eaf7f4; border-color: transparent; background: linear-gradient(145deg, #0c3c37, #0b6b61); }
.metric-card.featured small, .metric-card.featured span { color: #a9cec7; }

.content-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 18px; }
.page-grid { display: grid; gap: 18px; }
.page-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.page-grid.single { grid-template-columns: minmax(0, 860px); }
.span-2 { grid-column: 1 / -1; }

.hero-panel { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 18px; padding: clamp(24px, 4vw, 38px); border-radius: var(--radius-lg); color: #fff; background: radial-gradient(circle at 82% 12%, rgba(91,206,184,.18), transparent 28%), linear-gradient(145deg, #0b2724 0%, #0c3c37 58%, #0a574f 100%); box-shadow: var(--shadow-md); }
.hero-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom right, #000, transparent 75%); }
.hero-panel > * { position: relative; z-index: 1; }
.hero-panel .eyebrow { color: #86d7c8; }
.hero-panel h2 { max-width: 780px; margin: 10px 0 12px; font-size: clamp(1.7rem, 3.2vw, 2.8rem); line-height: 1.02; letter-spacing: -.05em; }
.hero-panel p { max-width: 760px; margin: 0; color: #bdd3ce; line-height: 1.62; }
.hero-action { flex: none; min-width: 160px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); font-weight: 750; }
.hero-action:hover { background: rgba(255,255,255,.14); }

.form-panel form, .stack-form { padding: 0 22px 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.form-grid.compact { gap: 13px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 5px; }
.input-action, .state-pair { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.state-pair { grid-template-columns: minmax(0,1fr) 74px; }
.field-help { display:block; margin-top:6px; color:var(--text-muted); font-size:.76rem; line-height:1.45; }
.field-help.success,.field-help.warning,.field-help.error,.field-help.info { display:block; margin-top:8px; padding:10px 12px; border:1px solid var(--feedback-line); border-left:4px solid var(--feedback-text); border-radius:9px; color:var(--feedback-text); background:var(--feedback-bg); }
.secure-chip, .badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 4px 9px; color: var(--primary-dark); background: var(--primary-soft); font-size: .72rem; font-weight: 800; white-space: nowrap; }

/* GSTIN verify button. The button keeps its plain .secondary appearance while
   the GSTIN is invalid; trackGstinVerifyButton() adds .is-ready the moment the
   entered value is a valid GSTIN and flashes it once per valid transition.
   Stays a secondary button so it never competes with the primary Save CTA. */
.verify-gstin.is-ready {
  color: var(--primary-dark);
  border-color: var(--teal-line);
  background: var(--primary-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.verify-gstin.is-ready:hover { border-color: var(--primary); background: var(--primary-soft); }
@keyframes gstinReadyFlash {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 46%, transparent); }
  45%  { transform: scale(1.045); box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 0%, transparent); }
  100% { transform: scale(1);    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
}
.verify-gstin.flash { animation: gstinReadyFlash .58s cubic-bezier(.2,.8,.2,1) 1; }
@media (prefers-reduced-motion: reduce) { .verify-gstin.flash { animation: none; } }

.filter-row { display: grid; grid-template-columns: minmax(220px,1fr) 190px; gap: 10px; padding: 0 20px 15px; }
.item-toolbar { grid-template-columns:minmax(180px,1fr) 160px auto; align-items:center; }
.item-toolbar > input { min-width:0; }
.item-toolbar .panel-head-actions { flex:none; margin-left:0; }
@media (max-width:1000px) and (min-width:761px) {
  .item-toolbar { grid-template-columns:minmax(0,1fr) minmax(130px,.55fr); }
  .item-toolbar .panel-head-actions { grid-column:1/-1; justify-content:flex-end; }
}
.table-wrap { width: 100%; overflow-x: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th { padding: 11px 14px; color: var(--text-muted); background: var(--surface-soft); text-align: left; font-size: .7rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
td { padding: 12px 14px; border-top: 1px solid var(--line); color: var(--text-soft); vertical-align: middle; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: var(--surface-soft); }
td strong, td small { display: block; }
td strong { color: var(--text); font-size: .84rem; }
td small { margin-top: 3px; font-size: .72rem; }
td.amount { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.empty-state { min-height: 150px; padding: 32px !important; color: var(--text-muted); text-align: center; }
.empty-card { display: grid; place-items: center; min-height: 220px; padding: 26px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 13px; color: var(--text-muted); background: var(--surface-muted); }
.empty-card h3 { margin-bottom: 5px; font-size: .92rem; }
.empty-card p { max-width: 360px; margin: 0; color: var(--text-muted); font-size: .78rem; line-height: 1.5; }

/* Blocking setup prerequisites. Shared markup comes from ui/setup-required.js
   and is rendered either as a full page or inside a dialog, so the two stay
   identical. Rules live in core/setup.js. */
.setup-chip { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 6px 14px; color: var(--primary-dark); background: var(--primary-soft); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.setup-title { margin: 18px 0 8px; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.06; letter-spacing: -.03em; }
.setup-message { margin: 0 0 26px; max-width: 60ch; color: var(--text-soft); font-size: .92rem; line-height: 1.6; }
.action-cards { display: grid; gap: 10px; max-width: 760px; }
.action-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.action-card:hover { transform: translateY(-1px); border-color: var(--teal-line); background: var(--primary-soft); box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 12%, transparent); }
.action-card-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--teal-line); border-radius: 13px; color: var(--primary); background: var(--surface); }
.action-card-icon svg { width: 22px; height: 22px; }
.action-card-copy { display: grid; gap: 3px; min-width: 0; }
.action-card-copy strong { font-size: .95rem; }
.action-card-copy small { color: var(--text-soft); font-size: .78rem; line-height: 1.45; }
.action-card-arrow { color: var(--primary); font-size: 1.1rem; transition: transform .16s ease; }
.action-card:hover .action-card-arrow { transform: translateX(3px); }
.setup-page { display: grid; place-items: center; min-height: 60vh; padding: clamp(24px, 5vw, 56px) 20px; text-align: center; }
.setup-page .setup-required { width: 100%; max-width: 760px; }
.setup-page .setup-message { margin-inline: auto; }

/* Empty states sit inside the page panel, in place of the table, so the panel
   head and the period filter stay usable. Markup from ui/empty-state.js. */
/* Editable combobox dropdown. The native <select> is kept in the DOM as the
   real form control (see js/ui/select.js) and only hidden, so it still fills the
   wrapper's box and validation bubbles anchor correctly. The visible control is
   an <input> that doubles as the search box and keeps focus throughout. */
.select { position: relative; display: block; width: 100%; min-width: 0; }
.select-native { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; appearance: none; pointer-events: none; }
.select-trigger { display: block; width: 100%; min-height: 41px; padding: 11px 36px 11px 12px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--text); background: var(--surface); font-size: 1rem; line-height: 1.25; text-overflow: ellipsis; transition: border-color .16s ease, box-shadow .16s ease; }
.select-trigger::placeholder { color: var(--text-muted); }
.select-trigger:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line-strong)); }
.select-trigger:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); outline: none; }
.select-trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 26%, transparent); outline-offset: 2px; }
.select-trigger.is-placeholder { color: var(--text-muted); }
.select-arrow { position: absolute; top: 50%; right: 9px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; color: var(--text-muted); background: transparent; transform: translateY(-50%); transition: transform .16s ease, color .16s ease; }
.select-arrow svg { width: 15px; height: 15px; }
.select-arrow:hover { color: var(--primary); }
.select.is-open .select-arrow { transform: translateY(-50%) rotate(180deg); color: var(--primary); }

.select-menu { position: fixed; z-index: 300; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 20px 50px rgba(8, 31, 26, .2); animation: selectMenuIn .14s ease both; }
.select-info { display: flex; align-items: center; gap: 7px; padding: 6px 11px 8px; margin-bottom: 2px; border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.select-info svg { width: 13px; height: 13px; }
.select-empty { padding: 14px 11px; color: var(--text-muted); font-size: .84rem; }
.select-option { padding: 9px 11px; border-radius: 8px; color: var(--text); font-size: .86rem; line-height: 1.35; cursor: pointer; }
.select-option:hover { background: var(--surface-soft); }
.select-option.is-active { color: var(--primary-dark); background: var(--primary-soft); }
.select-option.is-selected { color: var(--primary-dark); font-weight: 750; }
.select-option.is-selected::after { content: ' \2713'; }
.select-option.is-disabled { opacity: .45; cursor: not-allowed; }
@keyframes selectMenuIn { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .select-menu { animation: none; } .select-arrow { transition: none; } }

/* Period control overrides target the enhanced wrapper/visible combobox, never
   the hidden native select layered underneath it. */
.period-value > .select { width: 100%; min-width: 0; }
.period-value > .select .select-trigger { display: block; width: 100%; min-width: 0; min-height: 40px; padding: 8px 36px 8px 11px; font-size: .84rem; line-height: 1.2; }
.period-value > .select .select-arrow { right: 7px; }

.empty-host { padding: 8px 0 4px; }
.empty-state-body { display: grid; justify-items: center; gap: 4px; padding: clamp(20px, 4vw, 34px) 20px clamp(26px, 5vw, 44px); text-align: center; }
.empty-state-title { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.15; letter-spacing: -.02em; }
.empty-state-message { margin: 8px 0 24px; max-width: 56ch; color: var(--text-soft); font-size: .86rem; line-height: 1.6; }
.empty-state-body .action-cards { width: 100%; }

.activity-list { padding: 0 12px 12px; }
.activity-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 11px; align-items: center; min-height: 62px; padding: 10px; border-bottom: 1px solid var(--line); }
.activity-row:last-child { border-bottom: 0; }
.activity-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-weight: 850; }
.activity-row b, .activity-row small { display: block; }
.activity-row b { font-size: .84rem; }
.activity-row small { margin-top: 3px; font-size: .72rem; }
.activity-row > strong { font-size: .82rem; }
.setup-list { display: grid; padding: 0 12px 12px; }
.setup-list a { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; padding: 12px 10px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.setup-list a:last-child { border-bottom: 0; }
.setup-list a:hover { border-radius: 9px; background: var(--surface-soft); }
.setup-list a > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: .76rem; font-weight: 850; }
.setup-list b, .setup-list small { display: block; }
.setup-list b { font-size: .82rem; }
.setup-list small { margin-top: 3px; font-size: .72rem; line-height: 1.4; }

.report-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 18px; }
.report-intro h2 { margin: 8px 0 7px; font-size: 1.45rem; }
.report-intro p { max-width: 760px; margin: 0; color: var(--text-soft); font-size: .84rem; line-height: 1.55; }
.report-intro label { min-width: 190px; }
.report-lines { display: grid; padding: 0 20px 18px; }
.report-line { display: flex; justify-content: space-between; gap: 20px; padding: 11px 2px; border-bottom: 1px solid var(--line); color: var(--text-soft); font-size: .82rem; }
.report-line:last-child { border-bottom: 0; }
.report-line strong { color: var(--text); }
.future-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 0 20px 20px; }
.future-grid div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.future-grid b, .future-grid small { display: block; }
.future-grid b { font-size: .82rem; }
.future-grid small { margin-top: 4px; line-height: 1.4; }

.secret-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 20px 11px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.secret-row div { min-width: 0; }
.secret-row code { display: block; max-width: 580px; margin-top: 4px; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.masked-secret { filter: blur(5px); transition: filter .16s ease; }
.secret-row:hover .masked-secret { filter: blur(2px); }
.warning-box { margin: 14px 20px 20px; padding: 12px 13px; border: 1px solid color-mix(in srgb, var(--pending) 28%, var(--line)); border-radius: 10px; background: var(--pending-soft); }
.warning-box strong { color: var(--pending); font-size: .8rem; }
.warning-box p { margin: 5px 0 0; color: var(--text-soft); font-size: .76rem; line-height: 1.48; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(6,22,18,.52); backdrop-filter: blur(8px); animation: modal-fade .18s ease both; }
.modal-card { width: min(100%, 640px); max-height: min(88vh, 900px); overflow: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.28); animation: modal-rise .22s cubic-bezier(.2,.8,.2,1) both; }
.modal-card.wide { width: min(100%, 1040px); }
.modal-head { position: sticky; z-index: 2; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 19px 20px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); }
.modal-head h3 { margin: 4px 0 0; font-size: 1.12rem; }
.modal-body { padding: 18px 20px 20px; }
.modal-body form { padding: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.invoice-lines-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 10px; }
.invoice-lines-head h4 { margin: 4px 0 0; font-size: .9rem; }
.invoice-lines-head > div { min-width:0; }
.invoice-lines-head > button { flex:none; white-space:nowrap; }
.invoice-lines { display: grid; gap: 9px; }
.invoice-line { display:grid; gap:12px; min-width:0; padding:14px; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); }
.line-identity { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) 140px 40px; gap:10px; align-items:end; }
.line-amounts { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.1fr); gap:10px; align-items:end; }
.line-amounts.has-discount { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.1fr); }
.line-amounts.has-tds { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.1fr); }
.line-amounts.has-discount.has-tds { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.1fr); }
.invoice-line label { min-width:0; }
.invoice-line label > span { margin-bottom:6px; font-size:.72rem; line-height:1.3; }
.invoice-line label > .select { margin-bottom:0; font-size:inherit; line-height:normal; }
.invoice-line input,.invoice-line select { min-width:0; height:42px; padding:9px 10px; font-size:.86rem; }
.invoice-line .select-trigger { padding-right:32px; min-height:42px; }
.invoice-line input[type=number] { font-variant-numeric:tabular-nums; }
.invoice-line .select-native { height:100%; padding:0; }
.invoice-line :is(.line-tds-field,.line-discount-field)[hidden] { display:none; }
.invoice-line .remove-line { width:40px; height:42px; border-radius:8px; color:var(--danger); background:var(--danger-soft); font-size:1.15rem; }

.invoice-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 15px 0; }
.invoice-summary.has-tds { grid-template-columns:repeat(4,minmax(0,1fr)); }
.invoice-summary > div { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.invoice-summary span, .invoice-summary strong { display: block; }
.invoice-summary span { color: var(--text-muted); font-size: .7rem; }
.invoice-summary strong { margin-top: 5px; font-size: .84rem; }
.invoice-summary .total { color: #eaf7f4; border-color: transparent; background: var(--primary-dark); }
.invoice-summary .total span { color: #b9d9d3; }

.toast-region { position: fixed; z-index: 120; top: 18px; right: 18px; display: grid; gap: 8px; pointer-events: none; }
.toast { max-width:400px;box-shadow:var(--shadow-md);animation:toast-in .2s ease-out; }
.toast strong, .toast span { display: block; }
.toast span { margin-top:3px;color:inherit; }
@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-panel { display: block; }
  .hero-action { margin-top: 20px; }
  .panel-head { padding: 17px 16px 13px; }
  .filter-row { grid-template-columns: 1fr; padding: 0 13px 13px; }
  .item-toolbar { grid-template-columns:minmax(0,1fr) minmax(110px,.55fr); }
  .item-toolbar .panel-head-actions { grid-column:1/-1; justify-content:space-between; }
  .item-toolbar .panel-head-actions .primary { flex:1; }
  .form-panel form, .stack-form { padding: 0 16px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .report-intro { display: grid; align-items: start; }
  .report-intro label { min-width: 0; }
  .line-identity { grid-template-columns:minmax(0,1fr) 40px; }
  .line-identity .line-main { grid-column:1; }
  .line-identity .remove-line { grid-column:2; grid-row:1; }
  .line-description-field,.line-type-field { grid-column:1/-1; }
  .line-amounts,.line-amounts.has-discount,.line-amounts.has-tds,.line-amounts.has-discount.has-tds { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .invoice-summary,.invoice-summary.has-tds { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .invoice-summary .total { grid-column: 1 / -1; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal-card, .modal-card.wide { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .future-grid { grid-template-columns: 1fr; }
  .secret-row { align-items: flex-start; }
}

/* SPA route feedback */
.route-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:2000;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .18s ease}
.route-progress i{display:block;height:100%;width:32%;background:var(--primary);transform:translateX(-120%);box-shadow:0 0 16px color-mix(in srgb,var(--primary) 65%,transparent)}
.route-progress.active{opacity:1}
.route-progress.active i{animation:routeProgress 1s ease-in-out infinite}
.route-loading{min-height:42vh;display:grid;place-items:center;align-content:center;gap:12px;color:var(--text-soft)}
.route-loading span{width:28px;height:28px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);animation:spin .8s linear infinite}
.route-error{max-width:720px;margin:8vh auto}
@keyframes routeProgress{0%{transform:translateX(-120%)}55%{transform:translateX(170%)}100%{transform:translateX(330%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Persistent top-bar quick add menu */
.quick-add { position: relative; }
.quick-add-button .quick-add-chevron { width: 14px; height: 14px; margin-left: 1px; transition: transform .16s ease; }
.quick-add.open .quick-add-chevron { transform: rotate(180deg); }
.quick-add-menu { position: absolute; z-index: 70; top: calc(100% + 9px); right: 0; width: min(310px, calc(100vw - 24px)); padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 20px 55px rgba(8, 31, 26, .18); opacity: 0; visibility: hidden; transform: translateY(-5px) scale(.985); transform-origin: top right; transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.quick-add.open .quick-add-menu { opacity: 1; visibility: visible; transform: none; }
.quick-add-item { width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 9px; color: var(--text); background: transparent; text-align: left; }
.quick-add-item:hover { background: var(--primary-soft); }
.quick-add-item > svg { width: 19px; height: 19px; padding: 7px; box-sizing: content-box; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.quick-add-item span, .quick-add-item strong, .quick-add-item small { display: block; }
.quick-add-item strong { font-size: .82rem; }
.quick-add-item small { margin-top: 2px; color: var(--text-muted); font-size: .7rem; font-weight: 600; }
.quick-add-separator { height: 1px; margin: 5px 6px; background: var(--line); }

/* Party billing + verified GST details */
.form-section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin: 2px 0 13px; }
.form-section-head h4 { margin: 3px 0 0; font-size: .98rem; }
.form-section-head p { max-width: 510px; margin: 0; color: var(--text-muted); font-size: .75rem; line-height: 1.45; text-align: right; }
.billing-section-head { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.verified-gst { padding: 13px; }
.verified-heading { display:flex;gap:9px;align-items:flex-start;margin:0 0 10px;padding:0;border:0;border-radius:0;border-left:0;background:none;font-size:inherit;line-height:normal; }
.verified-heading .verified-dot { width: 8px; height: 8px; flex: none; margin-top: 5px; border-radius: 999px; background: var(--accepted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accepted) 13%, transparent); }
.verified-heading strong, .verified-heading small { display: block; }
.verified-heading strong { color:inherit;font-size:.8rem; }
.verified-heading small { margin-top:3px;color:inherit;font-size:.72rem; }
.verified-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 11px; }
.verified-grid > div { padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--accepted) 15%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.verified-grid > div.wide { grid-column: 1 / -1; }
.verified-grid small, .verified-grid strong { display: block; }
.verified-grid small { color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.verified-grid strong { margin-top: 4px; color: var(--text); font-size: .78rem; line-height: 1.4; }
.billing-warning { margin-bottom:12px; }
.billing-warning strong { color:inherit;font-size:.79rem; }
.billing-warning p { margin:4px 0 0;color:inherit;font-size:.74rem;line-height:1.45; }
.field-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 10%, transparent) !important; }

@media (max-width: 760px) {
  .quick-add-button { min-width: 84px; }
  .quick-add-menu { position: fixed; top: 68px; right: 10px; }
  .form-section-head { display: block; }
  .form-section-head p { margin-top: 5px; text-align: left; }
  .verified-grid { grid-template-columns: 1fr; }
  .verified-grid > div.wide { grid-column: auto; }
}


/* Party GST/manual mutual-exclusion workflow */
.party-mode-note { display:flex;align-items:flex-start;gap:10px;margin-bottom:12px; }
.party-mode-note::before { content:'';width:8px;height:8px;flex:none;margin:5px 2px 0;border-radius:999px;background:var(--feedback-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--feedback-text) 10%,transparent); }
.party-mode-note strong, .party-mode-note span { display: block; }
.party-mode-note strong { min-width:128px;color:inherit;font-size:.78rem; }
.party-mode-note span { color:inherit;font-size:.75rem;line-height:1.45; }
.party-mode-actions { min-height: 24px; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--primary); cursor: pointer; font-size: .76rem; font-weight: 800; text-align: left; }
.text-button:hover { text-decoration: underline; }
.fields-locked { opacity: .86; }
.fields-locked input:disabled, .fields-locked textarea:disabled { color: var(--text); border-color: var(--line); background: var(--surface-muted); cursor: not-allowed; -webkit-text-fill-color: var(--text); }
/* The enhanced select hides the native control, so the locked look has to be
   applied to its visible trigger too. Without this a GST-verified billing state
   would stay fully editable-looking while actually being disabled. */
.fields-locked .select-trigger:disabled,
.select.is-disabled .select-trigger { color: var(--text); border-color: var(--line); background: var(--surface-muted); cursor: not-allowed; }
.select.is-disabled .select-trigger:hover { border-color: var(--line); }
.select.is-disabled .select-arrow { color: var(--text-muted); cursor: not-allowed; }
.party-warning { margin-bottom:12px; }
.party-warning strong { color:inherit;font-size:.79rem; }
.party-warning p { margin:4px 0 0;color:inherit;font-size:.74rem;line-height:1.45; }
.compact-verification { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tally-import-rule { min-width: min(340px, 100%); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.tally-import-rule strong, .tally-import-rule small { display: block; }
.tally-import-rule strong { color: var(--primary); font-size: .78rem; }
.tally-import-rule small { margin-top: 3px; color: var(--text-soft); font-size: .72rem; line-height: 1.45; }

@media (max-width: 760px) {
  .party-mode-note { display: block; }
  .party-mode-note strong { margin-bottom: 4px; }
}

/* Shared encrypted list period controls. Keep the tabs and selected date in one
   aligned desktop row; stack them before the sidebar leaves too little room. */
.period-filter-host { padding: 0 20px 14px; }
.period-filter { display: grid; grid-template-columns: max-content minmax(0,190px); align-items: center; justify-content: start; gap: 12px; width: 100%; min-width:0; }
.period-tabs { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,.75fr) minmax(0,1.35fr); align-items: center; min-height: 40px; min-width:0; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.period-tab { min-width: 0; min-height: 32px; padding: 5px 10px; border: 0; border-radius: 7px; color: var(--text-soft); background: transparent; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 750; line-height: 1.15; white-space: nowrap; }
.period-tab:hover { color: var(--text); background: var(--surface); }
.period-tab.active { color: #fff; background: var(--primary); box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent); }
.period-tab-short { display:none; }
.period-value { width: 100%; min-width: 0; }
.period-value > input[data-period-value] { display: block; width: 100%; min-width: 0; min-height: 40px; padding: 8px 11px; font-size: .84rem; line-height: 1.2; }
.period-value > select[data-period-value]:not(.select-native) { display: block; width: 100%; min-width: 0; min-height: 40px; padding: 8px 11px; font-size: .84rem; line-height: 1.2; }
.list-load-footer { display: flex; justify-content: center; min-height: 28px; padding: 10px 18px 15px; }
.list-load-footer .secondary { min-height: 32px; padding: 5px 11px; font-size: .74rem; }

/* Lazy full-record loading and view panels */
.record-loading { display:flex;align-items:center;gap:14px;min-height:70px;margin:0 0 14px; }
.record-loading strong, .record-loading p { display: block; }
.record-loading p { margin:4px 0 0;color:inherit;font-size:.76rem;line-height:1.5; }
.loading-ring { width: 30px; height: 30px; flex: none; border: 3px solid var(--primary-soft); border-top-color: var(--primary); border-radius: 999px; animation: recordSpin .75s linear infinite; }
@keyframes recordSpin { to { transform: rotate(360deg); } }
.record-load-error { margin:0 0 14px; }
.record-load-error strong { color:inherit; }
.record-load-error p { margin:5px 0 0;color:inherit;font-size:.78rem; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.detail-cell { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.detail-cell small, .detail-cell strong { display: block; }
.detail-cell small { color: var(--text-muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.detail-cell strong { margin-top: 4px; color: var(--text); font-size: .8rem; line-height: 1.48; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-cell.span-2 { grid-column: 1 / -1; }
.detail-lines { margin-top: 18px; }
.detail-lines .form-section-head { margin-bottom: 8px; }
.compact-detail-table { border: 1px solid var(--line); border-radius: 11px; }
.detail-note { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.detail-note small { color: var(--text-muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; }
.detail-note p { margin: 5px 0 0; color: var(--text-soft); font-size: .78rem; line-height: 1.55; white-space: pre-wrap; }

@media (max-width: 820px) {
  .period-filter { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .period-tabs { width: 100%; }
}
@media (max-width: 760px) {
  .period-filter-host { padding: 0 15px 12px; }
  .period-tabs { grid-template-columns: minmax(0,.9fr) minmax(0,.75fr) minmax(0,1fr); }
  .period-tab { min-width:0; padding-inline:3px; font-size:.72rem; }
  .period-value { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-cell.span-2 { grid-column: auto; }
}
@media (max-width:480px) {
  .period-tabs { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr); }
  .period-tab[data-period-scope="financial-year"] .period-tab-label { display:none; }
  .period-tab[data-period-scope="financial-year"] .period-tab-short { display:inline; }
}
@media (prefers-reduced-motion: reduce) { .loading-ring { animation: none; } }

/* Consistent content spacing after account/onboarding expansion. */
.panel-head { padding:18px 20px 14px; }
.form-panel form,.stack-form { padding:0 20px 20px; }
.metric-grid { gap:10px; margin-bottom:16px; }
.metric-card { padding:16px; }
.content-grid,.page-grid { gap:16px; }
.hero-panel { margin-bottom:16px; padding:clamp(22px,3vw,32px); }
@media (max-width:760px) { .panel-head{padding:16px 15px 12px}.form-panel form,.stack-form{padding:0 15px 15px}.metric-card{padding:14px}.content-grid,.page-grid{gap:13px} }

/* v8 accounting workflow: GST/TDS live line editing, money entries and ledger statements. */
.invoice-summary .net-total { background:linear-gradient(145deg,#0c3c37,#0b6b61); }
.ledger-statement-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:8px; margin-bottom:16px; }
.ledger-statement-summary>div { padding:11px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.ledger-statement-summary small,.ledger-statement-summary strong,.ledger-statement-summary span { display:block; }
.ledger-statement-summary small,.ledger-statement-summary span { color:var(--text-muted); font-size:.7rem; }
.ledger-statement-summary strong { margin:5px 0 2px; font-size:.92rem; }


/* Subscription tiers. Shared by Getting Started and /coins. The live plan
   badge sits inside the title row so all three cards keep identical vertical
   rhythm; it must never create an extra grid row on only one card. */
.tier-chooser { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:0; padding:0; border:0; align-items:stretch; }
.tier-chooser-host .tier-chooser { margin:20px 26px 0; }
.tier-card { position:relative; display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; min-width:0; padding:17px; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); cursor:pointer; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease; }
.tier-card:hover { border-color:color-mix(in srgb,var(--primary) 36%,var(--line)); transform:translateY(-1px); }
.tier-card.current:not(.selected) { border-color:color-mix(in srgb,var(--primary) 24%,var(--line)); }
.tier-card.selected { border-color:var(--primary); background:color-mix(in srgb,var(--primary-soft) 72%,var(--surface)); box-shadow:0 9px 24px color-mix(in srgb,var(--primary) 13%,transparent); }
.tier-card-head { display:flex; align-items:flex-start; gap:12px; }
/* The radio stays in the DOM and keeps its focus ring; only its box is hidden,
   so keyboard and form behaviour are untouched. */
.tier-card-input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.tier-card-input:focus-visible + .tier-card-title .tier-card-name-line { outline:2px solid var(--primary); outline-offset:4px; border-radius:5px; }
.tier-card-title { min-width:0; flex:1; }
.tier-card-name-line { display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-width:0; }
.tier-card-title strong,.tier-card-title small { display:block; }
.tier-card-title strong { color:var(--text); font-size:.98rem; letter-spacing:-.015em; }
.tier-card-title small { margin-top:5px; color:var(--text-soft); font-size:.76rem; line-height:1.48; }
.tier-card-current { display:inline-flex; align-items:center; min-height:20px; padding:3px 8px; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line)); border-radius:999px; color:var(--primary-dark); background:var(--primary-soft); font-size:.58rem; font-weight:850; text-transform:uppercase; letter-spacing:.065em; white-space:nowrap; }
.tier-card-cost { flex:none; min-width:62px; text-align:right; }
.tier-card-cost b { display:block; color:var(--primary-dark); font-size:1.45rem; font-weight:900; line-height:1; letter-spacing:-.04em; }
.tier-card-cost small { display:block; margin-top:4px; color:var(--text-muted); font-size:.61rem; text-transform:uppercase; letter-spacing:.055em; white-space:nowrap; }
.tier-card-trial { padding:8px 10px; border-radius:9px; color:var(--text-soft); background:var(--surface-muted); font-size:.71rem; font-weight:750; line-height:1.35; }
.tier-card-features { display:grid; align-content:start; gap:7px; padding-top:2px; }
.tier-feature { display:flex; align-items:flex-start; gap:8px; color:var(--text-muted); font-size:.76rem; line-height:1.35; }
.tier-feature i { flex:none; width:14px; font-style:normal; font-weight:900; text-align:center; }
.tier-feature.on { color:var(--text-soft); }
.tier-feature.on i { color:var(--accepted); }
.tier-feature.off { opacity:.78; }
.tier-feature.off i { color:var(--text-muted); }
.tier-card-always { padding-top:10px; border-top:1px solid var(--line); color:var(--text-muted); font-size:.67rem; line-height:1.45; }
/* Self-contained: .tier-actions must not borrow .setup-actions from pages.css,
   which loads later and would win the cascade. */
.tier-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:18px 0 0; }
.tier-action-note { margin:0; color:var(--text-soft); font-size:.78rem; line-height:1.45; }
.tier-required-page { width:min(760px,100%); margin:0 auto; }
.tier-chip { display:inline-flex; align-items:center; padding:5px 10px; border:1px solid color-mix(in srgb,var(--primary) 28%,var(--line)); border-radius:999px; color:var(--primary-dark); background:var(--primary-soft); font-size:.62rem; font-weight:850; text-transform:uppercase; letter-spacing:.075em; white-space:nowrap; }
.tier-title { margin:12px 0 8px; font-size:1.5rem; letter-spacing:-.035em; }
.tier-message { max-width:620px; margin:0; color:var(--text-soft); font-size:.88rem; line-height:1.55; }
.tier-note { max-width:620px; margin:10px 0 0; color:var(--text-muted); font-size:.78rem; line-height:1.5; }
.tier-locked .action-cards,.tier-required-page .action-cards { margin-top:20px; }
.sidebar-plan-label { color:#829c95; font-size:.65rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.sidebar-plan-cost { color:#829c95; font-size:.68rem; white-space:nowrap; }
.sidebar-plan-line { grid-column:1/-1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar-plan-line strong { min-width:0; overflow:hidden; color:#e7f0ee; font-size:.81rem; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:900px) { .tier-actions { flex-direction:column; align-items:stretch; } .tier-actions .primary { width:100%; } }
@media (max-width:520px) { .tier-card-head { flex-wrap:wrap; } .tier-card-cost { width:100%; text-align:left; } .tier-card-cost b,.tier-card-cost small { display:inline; } .tier-card-cost small { margin-left:5px; } }
@media (prefers-reduced-motion:reduce) { .tier-card { transition:none; } }

/* Standalone service notice: no signed-in shell or auth page layout required. */
.service-down-view { display: grid; place-items: center; min-height: 100dvh; padding: 24px; background: var(--surface-soft); }
.service-down-card { width: min(100%, 480px); padding: clamp(24px, 5vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); text-align: center; }
.service-down-brand { display: flex; justify-content: center; margin-bottom: 24px; }
.service-down-brand img { width: min(210px, 100%); height: auto; }
.service-down-symbol { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%; color: var(--pending); background: var(--pending-soft); font-size: 1.5rem; font-weight: 850; }
.service-down-card h1 { margin: 12px 0; font-size: 1.6rem; }
.service-down-card p { color: var(--text-soft); line-height: 1.55; }
.service-down-card .inline-status { margin: 12px 0 0; }