:root {
  color-scheme: light;
  --ink: #402b4c;
  --muted: #79647f;
  --paper: #fff9fd;
  --pink: #f45da7;
  --pink-dark: #b93678;
  --lilac: #a576d6;
  --line: #d7a8cf;
  --soft: #fbe5f4;
  --soft-purple: #eee1fa;
  --warning: #a64461;
  --shadow: 4px 4px 0 rgba(93, 54, 105, 0.16);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Microsoft YaHei", monospace;
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  color: var(--ink);
  background:
    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(145deg, #f8d9f1, #e8d9f8);
  background-size: 18px 18px, 18px 18px, auto;
}

button, select, input { font: inherit; }

.chip-shell {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 14px max(30px, env(safe-area-inset-bottom));
}

.topbar,
.subject-control,
.balance-summary,
.bankruptcy-compact,
.module-intro,
.reward-row,
.module-heading,
.placeholder-actions {
  display: flex;
  align-items: center;
}

.topbar {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.eyebrow,
.section-kicker {
  margin: 0 0 3px;
  color: var(--pink-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.55rem, 7vw, 2rem); }
h2 { margin-bottom: 3px; font-size: 1rem; }

.status-pill,
.readonly-tag {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(64, 43, 76, 0.18);
  font-size: 0.78rem;
  font-weight: 800;
}

.notice {
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 2px solid var(--pink-dark);
  background: #fff2f8;
  font-size: 0.88rem;
  font-weight: 700;
}

.notice.error { border-color: var(--warning); background: #fff0f0; }
.hidden { display: none !important; }

.balance-strip,
.module-card,
footer {
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow: var(--shadow);
}

.balance-summary {
  justify-content: space-between;
  gap: 12px;
}

.balance-strip {
  padding: 14px;
  color: #fff;
  background: linear-gradient(115deg, #b44b9c, #754da8);
}

.subject-control {
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.55);
}

.subject-control label {
  flex: 0 0 auto;
  color: #ffe2f4;
  font-size: 0.76rem;
  font-weight: 800;
}

.subject-control select {
  min-width: 0;
  width: min(240px, 100%);
  padding: 6px 28px 6px 8px;
  border: 2px solid #e8bcdc;
  border-radius: 3px;
  color: var(--ink);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}

.readonly-tag {
  flex: 0 0 auto;
  padding: 3px 5px;
  color: var(--ink);
  background: #fff6cc;
  font-size: 0.68rem;
}

.balance-strip .section-kicker { color: #ffe2f4; }
.balance-line { margin: 0; line-height: 1; }
.balance-line strong { font-size: clamp(2rem, 13vw, 3.25rem); }
.balance-line span { margin-left: 5px; font-weight: 800; }
.status-stack { display: grid; justify-items: end; gap: 7px; text-align: right; }
.status-pill { padding: 5px 7px; color: var(--ink); }
.status-pill.active { color: #fff; background: var(--pink-dark); }
.count-label { color: #ffeafa; font-size: 0.8rem; font-weight: 700; }

.bankruptcy-compact {
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.55);
}

.bankruptcy-compact strong { display: block; font-size: 0.78rem; }
.bankruptcy-compact p {
  margin: 2px 0 0;
  color: #f8e6f5;
  font-size: 0.7rem;
  line-height: 1.4;
}

.bankruptcy-compact .button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 9px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.module-switcher { margin-top: 14px; }
.module-intro { justify-content: space-between; gap: 12px; margin: 0 2px 7px; }
.module-intro .section-kicker { margin-bottom: 1px; }
.module-intro h2 { margin-bottom: 0; }
.module-intro > span { color: var(--muted); font-size: 0.7rem; white-space: nowrap; }

.module-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 5px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: rgba(255, 249, 253, 0.72);
  box-shadow: var(--shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--lilac) transparent;
}

.module-tab {
  flex: 1 0 auto;
  min-width: max-content;
  min-height: 40px;
  padding: 7px 10px;
  border: 2px solid transparent;
  border-radius: 3px;
  color: var(--muted);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}
.unread-badge {
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 1px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #d72f65;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.module-tab[aria-selected="true"] {
  border-color: var(--ink);
  color: #fff;
  background: linear-gradient(115deg, var(--pink), var(--lilac));
  box-shadow: 2px 2px 0 rgba(64, 43, 76, 0.25);
}

.module-tab:focus-visible { outline: 3px solid #ffd246; outline-offset: -1px; }
.module-panels { margin-top: 8px; }
.module-panel[hidden] { display: none; }
.module-card { padding: 12px; background: var(--paper); }
.module-heading { gap: 9px; }
.module-heading p { margin-bottom: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.module-heading > div { min-width: 0; }

.panel-state {
  margin-left: auto;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--pink-dark);
  background: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.pixel-icon {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--soft);
  box-shadow: 2px 2px 0 var(--line);
  color: var(--pink-dark);
  font-weight: 900;
}

.button {
  min-height: 40px;
  padding: 8px 11px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(64, 43, 76, 0.2);
  font-weight: 800;
  cursor: pointer;
}

.button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(64, 43, 76, 0.2); }
.button:focus-visible, select:focus-visible { outline: 3px solid #ffd246; outline-offset: 2px; }
.button:disabled { cursor: not-allowed; box-shadow: none; opacity: 0.52; }
.button.primary { color: #fff; background: var(--pink); }
.button.danger { color: #fff; background: var(--warning); }
.button.ghost { background: var(--soft-purple); }

.checkin-card { background: #fff8d9; }
.reward-row { flex-wrap: wrap; gap: 5px 8px; margin-top: 11px; }
.reward-row > strong { color: var(--pink-dark); font-size: 1.45rem; }
.reward-row > span { color: var(--muted); font-size: 0.78rem; }
.reward-row .button { flex: 1 0 100%; margin-top: 4px; }

.placeholder-card { background: rgba(255, 249, 253, 0.82); }
.placeholder-card > .button { width: 100%; margin-top: 11px; }
.placeholder-actions { gap: 8px; margin-top: 11px; }
.placeholder-actions .button { flex: 1; min-width: 0; padding-inline: 6px; font-size: 0.78rem; }

.exchange-card, .loans-card { background: rgba(255, 249, 253, 0.94); }
.exchange-boundary {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.4;
}
.exchange-limits {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.35;
}
.exchange-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
  padding: 3px;
  border: 1px solid var(--line);
  background: var(--soft-purple);
}
.exchange-tab {
  position: relative;
  min-height: 33px;
  padding: 5px 8px;
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}
.exchange-tab[aria-selected="true"] {
  border-color: var(--ink);
  color: #fff;
  background: linear-gradient(115deg, var(--pink), var(--lilac));
}
.exchange-tab:focus-visible { outline: 3px solid #ffd246; outline-offset: 1px; }
.exchange-badge {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 4px;
  place-items: center;
  border: 1px solid #7b173c;
  border-radius: 9px;
  color: #fff;
  background: #d8245d;
  font-size: 0.62rem;
  line-height: 1;
  vertical-align: middle;
}
.exchange-view { margin-top: 10px; }
.exchange-view[hidden] { display: none; }
.exchange-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.exchange-product {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  min-width: 0;
  min-height: 86px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 3px;
  color: var(--ink);
  background: #fff;
  box-shadow: 2px 2px 0 rgba(64, 43, 76, 0.14);
  text-align: left;
  cursor: pointer;
}
.exchange-product:focus-visible { outline: 3px solid #ffd246; outline-offset: 2px; }
.exchange-product:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(64, 43, 76, 0.14); }
.exchange-art {
  position: relative;
  display: grid;
  min-height: 100%;
  overflow: hidden;
  place-items: center;
  border-right: 2px dashed var(--line);
  color: var(--pink-dark);
  background:
    linear-gradient(45deg, rgba(255,255,255,.42) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.42) 75%),
    var(--soft-purple);
  background-size: 12px 12px;
  font-size: 1.65rem;
  font-weight: 900;
}
.exchange-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 3px;
  object-fit: contain;
  opacity: 0;
}
.exchange-art.has-image img { opacity: 1; }
.exchange-art.has-image .exchange-art-fallback { visibility: hidden; }
.exchange-copy { min-width: 0; padding: 9px 8px; }
.exchange-copy strong { display: block; font-size: 0.78rem; overflow-wrap: anywhere; }
.exchange-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.65rem; line-height: 1.4; }
.exchange-form {
  margin-top: 10px;
  padding: 11px;
  border: 2px solid var(--pink-dark);
  background: #fff;
  box-shadow: 2px 2px 0 rgba(64, 43, 76, 0.12);
}
.exchange-form-heading { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: center; }
.exchange-form-heading > div:first-child {
  display: grid; width: 38px; height: 38px; place-items: center;
  border: 2px solid var(--ink); color: var(--pink-dark); background: var(--soft-purple); font-weight: 900;
}
.exchange-form h3, .exchange-list-heading h3 { margin: 0; font-size: 0.85rem; }
.exchange-form-heading p { margin: 2px 0 0; color: var(--muted); font-size: 0.66rem; line-height: 1.35; }
.exchange-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.exchange-form > label, .exchange-form-grid label {
  display: grid; gap: 4px; margin-top: 9px; color: var(--muted); font-size: 0.68rem; font-weight: 800;
}
.exchange-form input, .exchange-form select, .exchange-form textarea {
  min-width: 0; width: 100%; min-height: 36px; padding: 6px 7px;
  border: 2px solid var(--ink); border-radius: 2px; color: var(--ink); background: #fff;
}
.exchange-form textarea { min-height: 62px; resize: vertical; line-height: 1.4; }
.form-error {
  margin: 9px 0 0;
  padding: 8px 9px;
  border: 2px solid var(--warning);
  color: var(--warning);
  background: #fff0f0;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.45;
}
.exchange-form-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 10px;
}
.exchange-form-actions .button {
  flex: 0 0 auto;
  min-width: 86px;
  min-height: 36px;
  padding: 6px 10px;
  white-space: nowrap;
}
.exchange-request-group + .exchange-request-group { margin-top: 15px; padding-top: 13px; border-top: 2px dashed var(--line); }
.exchange-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-state.urgent { border-color: #b51f55; color: #fff; background: #d8245d; }
.panel-state.quiet { color: var(--muted); background: #fff; }
.exchange-list { display: grid; gap: 8px; margin-top: 7px; }
.exchange-empty { margin: 0; padding: 11px; border: 1px dashed var(--line); color: var(--muted); font-size: 0.72rem; }
.exchange-request {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 9px;
  padding: 9px;
  border: 2px solid var(--ink);
  background: #fff;
  box-shadow: 2px 2px 0 rgba(64, 43, 76, 0.1);
}
.exchange-request-art {
  width: 52px;
  height: 52px;
  min-height: 52px;
  align-self: start;
  border: 1px dashed var(--line);
  font-size: 1.3rem;
}
.exchange-request-content { min-width: 0; }
.exchange-request.completed { border-color: #548565; background: #f3fff7; }
.exchange-request.rejected, .exchange-request.withdrawn, .exchange-request.expired { color: #6f6672; background: #f1edf0; }
.exchange-request-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.exchange-request-summary { flex: 1; min-width: 0; margin: 0; font-size: 0.73rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.exchange-request-summary strong { font-size: inherit; font-weight: 900; }
.exchange-request-machine { color: var(--ink); }
.exchange-request-amount { color: var(--pink-dark); white-space: nowrap; }
.exchange-status { flex: 0 0 auto; padding: 2px 5px; color: #fff; background: var(--lilac); font-size: 0.62rem; font-weight: 900; }
.exchange-request.completed .exchange-status { background: #4d8062; }
.exchange-request.rejected .exchange-status,
.exchange-request.withdrawn .exchange-status,
.exchange-request.expired .exchange-status { background: #776c78; }
.exchange-request-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 8px; margin-top: 6px; align-items: start; }
.exchange-request-label { padding: 1px 4px; color: var(--muted); background: var(--soft); font-size: 0.6rem; font-weight: 900; line-height: 1.4; white-space: nowrap; }
.exchange-request-details p { min-width: 0; margin: 0; font-size: 0.68rem; line-height: 1.4; overflow-wrap: anywhere; }
.exchange-request-time { margin: 6px 0 0; color: var(--muted); font-size: 0.61rem; line-height: 1.35; }
.exchange-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.exchange-actions .button { flex: 0 1 auto; min-width: 0; min-height: 32px; padding: 5px 8px; font-size: 0.68rem; white-space: nowrap; }

.loan-view-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 11px;
  padding: 3px;
  border: 1px solid var(--line);
  background: var(--soft-purple);
}
.loan-view-option {
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  font-size: 0.74rem;
  font-weight: 900;
  cursor: pointer;
}
.loan-view-option[aria-pressed="true"] {
  border-color: var(--ink);
  color: #fff;
  background: linear-gradient(115deg, var(--pink), var(--lilac));
  box-shadow: 2px 2px 0 rgba(64, 43, 76, 0.18);
}
.loan-view-option:disabled { cursor: not-allowed; opacity: 0.5; }
.loan-view-option:focus-visible { outline: 3px solid #ffd246; outline-offset: 1px; }
.loan-view-count {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  margin-left: 3px;
  padding: 0 4px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 10px;
  font-size: 0.64rem;
  line-height: 1;
}
.loan-view[hidden] { display: none; }
.loan-form { margin-top: 8px; padding: 9px; border: 2px solid var(--line); background: #fff; }
.loan-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.loan-form label, .loan-counter-form label, .loan-repay-form label {
  display: grid; gap: 4px; color: var(--muted); font-size: 0.68rem; font-weight: 800;
}
.loan-form input, .loan-form select,
.loan-counter-form input, .loan-repay-form input {
  min-width: 0; width: 100%; min-height: 34px; padding: 5px 7px;
  border: 2px solid var(--ink); border-radius: 2px; color: var(--ink); background: #fff;
}
.cap-choice { grid-template-columns: auto minmax(0, 1fr) !important; align-items: start; margin-top: 9px; }
.cap-choice input { width: 17px; min-height: 17px; margin: 1px 0 0; accent-color: var(--pink-dark); }
.loan-warning { margin: 8px 0 0 !important; padding: 7px; color: var(--warning) !important; background: #fff0f0; font-weight: 800; }
.loan-form > .button { width: 100%; margin-top: 9px; }
.loan-create-hint { margin: 6px 0 0; color: var(--muted); text-align: center; font-size: 0.64rem; }
.loan-list { display: grid; gap: 10px; margin-top: 8px; }
.loan-empty { margin: 0; padding: 12px; color: var(--muted); border: 1px dashed var(--line); font-size: 0.76rem; }
.loan-item { padding: 11px; border: 2px solid var(--ink); background: #fff; box-shadow: 2px 2px 0 rgba(64, 43, 76, 0.12); }
.loan-item.overdue { border-color: var(--ink); border-left: 5px solid var(--warning); background: #fffafa; }
.loan-item.repaid { border-color: #67937a; background: #f1fff6; }
.loan-item.rejected, .loan-item.withdrawn, .loan-item.expired {
  padding: 8px 9px;
  border-color: #b6aab7;
  color: #675d69;
  background: #f3eff2;
  box-shadow: 1px 1px 0 rgba(64, 43, 76, 0.08);
}
.loan-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.loan-title-row h4 { margin: 0; font-size: 0.84rem; line-height: 1.35; overflow-wrap: anywhere; }
.loan-status { flex: 0 0 auto; padding: 3px 6px; color: #fff; background: var(--lilac); font-size: 0.64rem; font-weight: 900; }
.loan-item.active .loan-status { background: var(--pink-dark); }
.loan-item.overdue .loan-status { background: var(--warning); }
.loan-item.repaid .loan-status { background: #4d8062; }
.loan-item.rejected .loan-status, .loan-item.withdrawn .loan-status, .loan-item.expired .loan-status { background: #776c78; }
.loan-waiting {
  margin: 8px 0 0;
  padding: 7px 8px;
  border-left: 4px solid var(--lilac);
  color: #66437f;
  background: var(--soft-purple);
  font-size: 0.74rem;
  font-weight: 900;
}
.loan-waiting.waiting-you { border-left-color: var(--pink-dark); color: var(--pink-dark); background: #fff0f8; }
.loan-counter-meta { margin: 7px 0 0; color: var(--muted); font-size: 0.63rem; }
.loan-proposal-details, .loan-compact-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  margin: 10px 0 0;
}
.loan-proposal-details div, .loan-compact-terms div { min-width: 0; }
.loan-proposal-details dt, .loan-compact-terms dt { color: var(--muted); font-size: 0.62rem; }
.loan-proposal-details dd, .loan-compact-terms dd {
  margin: 2px 0 0;
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.loan-proposal-details div:last-child { grid-column: 1 / -1; padding-top: 6px; border-top: 1px dashed var(--line); }
.loan-current-due {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(115deg, #fff0f8, #f2e8ff);
}
.loan-current-due span { align-self: flex-start; color: var(--pink-dark); font-size: 0.68rem; font-weight: 900; }
.loan-current-due strong { color: var(--pink-dark); font-size: clamp(1.9rem, 10vw, 2.55rem); line-height: 0.9; }
.loan-current-due small { color: var(--muted); font-size: 0.7rem; font-weight: 800; }
.loan-debt-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
.loan-debt-split > div { padding: 8px 9px; border: 1px solid var(--line); background: #fff; }
.loan-debt-split span { display: block; color: var(--muted); font-size: 0.62rem; }
.loan-debt-split strong { display: block; margin-top: 2px; font-size: 1rem; }
.loan-overdue-callout {
  width: max-content;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 4px 7px;
  color: #fff;
  background: var(--warning);
  font-size: 0.67rem;
  font-weight: 900;
}
.loan-cap-off { color: var(--warning); }
.loan-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.loan-actions .button { flex: 1 1 calc(50% - 3px); min-width: 92px; min-height: 38px; padding: 6px 8px; font-size: 0.72rem; }
.loan-counter-form, .loan-repay-form { display: grid; gap: 7px; width: 100%; padding: 9px; border: 1px dashed var(--line); background: var(--soft); }
.loan-counter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.loan-repaid-summary { margin-top: 9px; padding: 9px; border-left: 4px solid #4d8062; background: #e3f7e9; }
.loan-repaid-summary strong { color: #356847; font-size: 1.15rem; }
.loan-repaid-summary p { margin: 3px 0 0; font-size: 0.78rem; font-weight: 800; }
.loan-repaid-terms, .loan-key-date, .loan-history-meta { color: var(--muted); font-size: 0.65rem; line-height: 1.45; }
.loan-repaid-terms { margin: 8px 0 0; }
.loan-key-date { margin: 4px 0 0; }
.loan-history-meta { margin: 6px 0 0; }
.loan-interest-note { margin-top: 10px; color: var(--muted); font-size: 0.68rem; }
.loan-interest-note summary { width: max-content; cursor: pointer; font-weight: 800; }
.loan-interest-note p { margin: 6px 0 0; padding: 7px 8px; border: 1px dashed var(--line); line-height: 1.45; }

.achievements-card { background: rgba(255, 249, 253, 0.94); }
.achievements-card .module-heading p {
  font-size: clamp(0.7rem, 3.3vw, 0.78rem);
  white-space: nowrap;
}
.achievement-sections {
  display: grid;
  gap: 15px;
  max-height: clamp(20rem, 56vh, 40rem);
  margin-top: 13px;
  padding: 0 4px 4px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--lilac) transparent;
  -webkit-overflow-scrolling: touch;
}
.achievement-group h3 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 0 7px;
  padding-bottom: 5px;
  border-bottom: 2px dashed var(--line);
  color: var(--pink-dark);
  background: var(--paper);
  font-size: 0.84rem;
}
.achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.achievement-item {
  min-width: 0;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(64, 43, 76, 0.12);
}
.achievement-item.locked { color: #736b77; background: #eee9ed; filter: grayscale(0.72); }
.achievement-item.unlocked { border-color: var(--pink-dark); background: linear-gradient(145deg, #fff9d8, #ffe9f7); }
.achievement-title-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.achievement-title-row h4 { margin: 0; overflow-wrap: anywhere; font-size: 0.83rem; }
.achievement-state-icon { color: var(--pink-dark); font-size: 1rem; }
.achievement-reward { color: #7b438f; font-size: 0.72rem; font-weight: 900; white-space: nowrap; }
.achievement-condition { min-height: 2.7em; margin: 7px 0; font-size: 0.7rem; line-height: 1.35; }
.achievement-progress-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.achievement-progress-track { display: block; height: 8px; border: 1px solid var(--ink); background: #fff; }
.achievement-progress-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--lilac)); }
.achievement-progress-count { font-size: 0.66rem; font-weight: 800; white-space: nowrap; }
.achievement-unlocked-at { display: block; margin-top: 6px; color: var(--pink-dark); font-size: 0.64rem; }
.achievement-empty { margin: 0; color: var(--muted); font-size: 0.8rem; }
.achievement-group-hidden .achievement-item { border-color: #6d5290; background: linear-gradient(145deg, #f1e7ff, #fff1fa); }

.ledger-list {
  max-height: clamp(18rem, 52vh, 38rem);
  margin: 11px 0 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--lilac) transparent;
  -webkit-overflow-scrolling: touch;
}
.ledger-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  padding: 9px 2px;
  border-top: 1px dashed var(--line);
}

.ledger-list li:first-child { border-top: 0; }
.ledger-label { overflow-wrap: anywhere; font-size: 0.84rem; font-weight: 800; }
.ledger-amount { font-weight: 900; }
.ledger-amount.positive { color: #a42f73; }
.ledger-amount.negative { color: #32678a; }
.ledger-meta { grid-column: 1 / -1; color: var(--muted); font-size: 0.7rem; }
.ledger-empty { display: block !important; color: var(--muted); font-size: 0.82rem; }

footer { margin-top: 10px; padding: 10px 12px; background: #4a3553; color: #fff; }
footer strong { color: #ffd6ed; font-size: 0.78rem; }
footer p { margin: 3px 0 0; font-size: 0.75rem; line-height: 1.45; }

@media (min-width: 620px) {
  .chip-shell { padding-inline: 20px; }
  .module-tab { min-width: 0; }
  .reward-row .button { flex: 0 0 auto; margin: 0 0 0 auto; }
}

@media (max-width: 380px) {
  .bankruptcy-compact { align-items: flex-end; }
  .bankruptcy-compact p { max-width: 190px; }
}

@media (max-width: 540px) {
  .achievement-grid { grid-template-columns: minmax(0, 1fr); }
  .achievement-condition { min-height: 0; }
  .exchange-catalog, .exchange-form-grid,
  .loan-counter-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 350px) {
  .loan-form-grid, .loan-proposal-details, .loan-compact-terms { grid-template-columns: minmax(0, 1fr); }
  .loan-proposal-details div:last-child { grid-column: auto; }
  .exchange-request { grid-template-columns: 44px minmax(0, 1fr); gap: 7px; }
  .exchange-request-art { width: 44px; height: 44px; min-height: 44px; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}