.workspace {
  min-height: 100svh;
  display: grid;
  grid-template-columns: clamp(205px, 19vw, 256px) minmax(0, 1fr);
}

.workspace-sidebar {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  gap: 33px;
  padding: 26px 18px 18px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.workspace-sidebar .wordmark { padding-inline: 7px; }
.folio-label { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .1em; }
.sidebar-section { min-height: 0; overflow: auto; padding: 4px; }
.sidebar-section .folio-label { margin: 0 5px 11px; }
.ledger-switch { display: grid; gap: 6px; }

.ledger-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.ledger-tab:hover, .ledger-tab[aria-pressed="true"] { color: var(--blue-dark); background: var(--blue-soft); }
.ledger-tab[aria-pressed="true"] { border-color: #d7dafc; }
.ledger-tab-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; background: #eeedf2; color: #555d7a; font-size: 12px; font-weight: 700; }
.ledger-tab[aria-pressed="true"] .ledger-tab-icon { color: #fff; background: var(--blue); }
.ledger-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; }
.ledger-tab small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.sidebar-foot { display: grid; justify-items: start; gap: 8px; margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--line); }
.sync-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.sync-label span { width: 7px; height: 7px; border-radius: 50%; background: #47735e; }
.sidebar-foot .button-quiet { padding-inline: 7px; margin-left: -7px; }

.workspace-main { width: min(100%, 1340px); margin-inline: auto; padding: 28px clamp(22px, 4.2vw, 64px) 40px; }
.workspace-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 19px; color: var(--muted); font-size: 12px; }
.workspace-kicker span { color: #767e9a; }
.workspace-heading {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  min-height: 178px;
  margin-bottom: 23px;
  padding: clamp(18px, 2.8vw, 38px);
  overflow: hidden;
  border-radius: 16px;
  color: #fff9e8;
  background: linear-gradient(115deg, #303bce, #3b47d7);
}

.workspace-heading::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    repeating-linear-gradient(0deg, #e9ebff37 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, #e9ebff37 0 1px, transparent 1px 20px);
  mask-image: linear-gradient(100deg, transparent 40%, black);
}

.workspace-heading::after {
  position: absolute;
  z-index: -1;
  top: -57px;
  right: 8%;
  width: 138px;
  height: 180px;
  content: "";
  transform: rotate(26deg);
  border: 1px solid #bec5ff78;
  border-radius: 10px;
  box-shadow: 12px 9px 0 -1px #3b47d7, 12px 9px 0 #bec5ff78;
}

.heading-copy { min-width: 0; }
.ledger-scope { display: inline-block; padding: 4px 8px; border-radius: 5px; background: #e7e9ff; color: #242e9f; font-size: 12px; font-weight: 700; }
.ledger-scope:empty { display: none; }
.workspace-heading h1 { margin-top: 9px; overflow-wrap: anywhere; font-size: clamp(31px, 4.3vw, 58px); font-weight: 780; line-height: 1.13; letter-spacing: -.045em; }
.workspace-heading .button-primary { flex: none; min-height: 44px; color: var(--ink); background: var(--lime); }
.workspace-heading .button-primary:hover { background: #edf6b5; }
.workspace-heading .button-primary:focus-visible { outline-color: white; }

.bill-sheet { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.sheet-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 21px; }
.sheet-header h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -.02em; }
.sheet-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: var(--blue); background: var(--blue-soft); }
.sheet-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13px; }
.sheet-tools .button-outline { min-height: 40px; }
.workspace input, .bill-dialog input, .bill-dialog select {
  width: 100%;
  min-height: 40px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #d5d7e2;
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  font-size: 14px;
}
.sheet-tools input { width: auto; }
.ledger-status { padding: 34px 16px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 14px; }
.ledger-status:empty, .editor-error:empty { display: none; }

.bill-table { width: 100%; border-collapse: collapse; text-align: left; }
.bill-table thead { background: #eff0fa; color: #48506d; }
.bill-table th { padding: 10px 12px; font-size: 12px; font-weight: 650; }
.bill-table td { padding: 10px 12px; border-top: 1px solid #eaebf0; font-size: 14px; }
.bill-table tbody tr:first-child td { border-top: 0; }
.bill-table tbody tr:focus-within, .bill-table tbody tr:hover { background: #f8f8ff; }
.bill-table th:first-child, .bill-table td:first-child { padding-left: 21px; }
.bill-table th:last-child, .bill-table td:last-child { padding-right: 21px; text-align: right; }
.bill-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.bill-day { font: 650 14px var(--mono); white-space: nowrap; }
.bill-entry { display: flex; align-items: center; gap: 10px; }
.bill-entry-copy { min-width: 0; overflow-wrap: anywhere; }
.bill-stamp { display: grid; flex: none; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #333c9e; background: #e9eaff; font-size: 13px; font-weight: 700; }
.bill-stamp.income { color: #275344; background: #e0f0df; }
.bill-stamp.refund { color: #87384b; background: #ffe6eb; }
.bill-account { color: #48506d; overflow-wrap: anywhere; }
.bill-table td .bill-mobile-account { display: none; }
.bill-table .bill-money { white-space: nowrap; font: 700 15px var(--mono); font-variant-numeric: tabular-nums; }
.bill-income { color: #28624c; }
.bill-refund { color: #87384b; }
.bill-title-button {
  display: block;
  max-width: 100%;
  min-height: 30px;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  overflow-wrap: anywhere;
  font-weight: 650;
  line-height: 1.35;
}
.bill-title-button:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.bill-more { display: flex; margin: 14px auto; }

.bill-dialog {
  width: min(520px, calc(100% - 24px));
  max-height: calc(100svh - 24px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 18px 70px #171b4755;
}
.bill-dialog::backdrop { background: #1a204575; }
.editor-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding: 18px 22px; border-bottom: 1px solid #dedfff; background: var(--blue-soft); }
.editor-heading h2 { margin-top: 4px; font-size: 25px; letter-spacing: -.03em; }
.icon-button { width: 38px; min-height: 38px; padding: 0; }
.editor-error { padding: 14px 22px 0; color: #87384b; font-size: 14px; }
.editor-error:last-of-type { padding-bottom: 14px; }
#bill-form, .bill-detail { padding: 17px 22px 21px; }
.editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.editor-fields label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; font-weight: 600; }
.wide-field { grid-column: 1 / -1; }
.amount-field { padding: 11px 13px; border-radius: 10px; background: #f0f1ff; }
.amount-input { display: flex; align-items: center; gap: 7px; color: var(--blue-dark); font: 700 24px var(--mono); }
.bill-dialog .amount-input input { padding: 2px 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; font: 700 26px var(--mono); }
.editor-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }
.editor-actions .button-primary { min-width: 110px; }
.editor-fields + .muted { margin-top: 10px; color: var(--muted); font-size: 13px; }
.bill-detail { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 11px 16px; margin: 0; }
.bill-detail dt { color: var(--muted); font-size: 13px; }
.bill-detail dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; }

@media (max-width: 760px) {
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .workspace-sidebar { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; height: auto; align-items: center; gap: 11px; padding: 12px 14px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .workspace-sidebar .wordmark { padding: 0; }
  .sidebar-section { grid-column: 1 / -1; grid-row: 2; }
  .sidebar-section .folio-label { margin: 0 0 5px; }
  .ledger-switch { display: flex; flex-wrap: wrap; }
  .ledger-tab { max-width: 100%; min-height: 41px; }
  .sidebar-foot { display: flex; align-items: center; margin-top: 0; padding: 0; border: 0; }
  .sync-label { display: none; }
  .workspace-main { padding: 16px 13px 28px; }
  .workspace-kicker { margin-bottom: 11px; }
  .workspace-heading { min-height: 130px; margin-bottom: 15px; }
  .sheet-header { padding: 11px; }
  .bill-table th, .bill-table td { padding-inline: 7px; }
  .bill-table th:first-child, .bill-table td:first-child { padding-left: 11px; }
  .bill-table th:last-child, .bill-table td:last-child { padding-right: 11px; }
}

@media (max-width: 520px) {
  .bill-table .bill-account { display: none; }
  .bill-table td .bill-mobile-account { display: block; }
  .bill-entry { gap: 6px; }
  .bill-stamp { display: none; }
  .bill-table .bill-money { font-size: 13px; }
  .sheet-tools input, .bill-dialog input, .bill-dialog select { font-size: 16px; }
}