/* MapleStory in a clear sky palette; mobile layout and behavior stay in mobile.css. */
:root {
  --ink: #264b67;
  --muted: #6e8c9f;
  --paper: #f1f8fd;
  --card: #fff;
  --green: #32896c;
  --green-dark: #297aaa;
  --mint: #edf8f3;
  --orange: #bd754b;
  --red: #b45c5f;
  --line: #d9e9f3;
  --shadow: 0 4px 18px #548bb00b;
  --nav-height: 78px;
  --blue: #328fc4;
}
html { background: #e8f5ff; }
body { background: var(--paper); }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: #399cd3; }
.app-shell {
  background: url('assets/maple/sky-clouds.svg') center top / 560px 300px no-repeat,
    linear-gradient(180deg, #d2edff 0, #e8f5ff 300px, #f1f8fd 540px);
}
.topbar { padding-bottom: 23px; }
.brand { gap: 10px; }
.brand > div { min-width: 0; }
.brand-mark {
  width: 42px;
  height: 44px;
  border: 1px solid #ffffffd9;
  border-radius: 13px;
  background: #ffffffdb;
  box-shadow: 0 3px 9px #69a7cd13;
}
.brand-mark img { object-fit: contain; image-rendering: pixelated; }
.brand h1 { color: #295777; font-size: 20px; font-weight: 700; letter-spacing: 0; }
.brand p { color: #688ba4; letter-spacing: .3px; }
.topbar-actions { gap: 5px; }
.icon-button {
  border: 1px solid #c9e3f2;
  border-radius: 13px;
  background: #ffffffd9;
  color: #5688a7;
  box-shadow: 0 2px 6px #82b7d20b;
}
.hero-card {
  padding: 0 21px 20px;
  border: 1px solid #fff;
  border-radius: 19px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 26px #5596bb10;
}
.hero-card:after { display: none; }
.hero-art {
  height: clamp(124px, 37vw, 168px);
  margin: 3px -18px 18px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  pointer-events: none;
}
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 53%; }
.hero-head { color: #708da1; font-size: 12px; }
.status-dot { color: #578d77; font-size: 10px; }
.status-dot i { background: #7eb49e; box-shadow: 0 0 0 3px #eef8f3; }
.status-dot.offline { color: #a27c61; }
.status-dot.offline i { background: #cea889; box-shadow: 0 0 0 3px #fbf3e9; }
.hero-card > strong { color: #2d678d; margin: 7px 0 17px; font-weight: 650; }
.hero-stats { border-top-color: #e5f0f7; padding-top: 14px; }
.hero-stats span { color: #7693a6; }
.hero-stats b { color: #416b89; font-weight: 600; }
.hero-stats > div:first-child b { color: var(--green); }
.hero-stats > div:nth-child(2) b { color: var(--orange); }
.section-title { margin-top: 26px; }
.section-title h2 { font-size: 19px; color: #345f7d; font-weight: 650; letter-spacing: 0; }
#ledgerView .section-title h2 { display: flex; align-items: center; gap: 9px; }
#ledgerView .section-title h2:before {
  content: "";
  display: inline-block;
  width: 29px;
  height: 28px;
  background: url('assets/maple/sprites/orange-mushroom.png') center / contain no-repeat;
  image-rendering: pixelated;
}
.eyebrow { color: #7895a8; letter-spacing: .3px; }
.text-button { color: #3a92c1; }
.period-badge { border-color: #d0e7f4; background: #f4fbff; color: #658fa8; }
.filter-row, .stats-range, .segmented {
  padding: 4px;
  border: 1px solid #d0e6f4;
  background: #e5f2fb;
  border-radius: 12px;
  box-shadow: none;
}
.chip, .stats-range button, .segmented button { color: #7393ab; border: 1px solid transparent; }
.chip.active, .stats-range button.active, .segmented button.active {
  border-color: #c9e3f4;
  color: #287fac;
  background: #fff;
  box-shadow: 0 2px 5px #66a3c714;
  font-weight: 650;
}
.timeline-date b { color: #57788f; }
.timeline-date small, .timeline-day-summary { color: #7994a7; }
.timeline-content {
  border-color: #dfedf5;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow);
}
.transaction-item { border-bottom-color: #ebf3f8; padding-top: 16px; padding-bottom: 13px; }
.transaction-icon { border-radius: 10px; border: 1px solid #e1edf3; font-size: 0; }
.transaction-icon.income { background: url('assets/maple/sprites/coin-pouch.png') center / 27px no-repeat, #f1f8f5; }
.transaction-icon.expense { background: url('assets/maple/sprites/red-potion.png') center / 25px no-repeat, #f4f8fc; }
.transaction-icon { image-rendering: pixelated; }
.transaction-main b { color: #3d5a70; }
.transaction-main span, .transaction-time { color: #7e98ab; }
.transaction-amount span { color: #8da5b6; }
.transaction-amount b.expense { color: #9c755c; }
.timeline-load-hint { border-color: #d5e9f6; background: #eaf5fd; color: #5b91b2; }
.timeline-end { color: #91a7b7; }
.empty-state { border-color: var(--line); background: #fff; color: #8ca3b2; }
.empty-state:before { content: ""; display: block; width: 57px; height: 41px; margin: 0 auto 13px; background: url('assets/maple/sprites/slime.png') center / contain no-repeat; image-rendering: pixelated; }
.empty-state b { color: #5d8195; }
.lock-node { border: 1px solid #d4e7f2; background: #eaf5fc; color: #568da9; }
.timeline-content > .lock-node + .transaction-item { border-top: 1px solid #dbeaf4; }
.timeline-content > .transaction-item + .lock-node { border-top: 1px solid #dbeaf4; }
.lock-icon { background: #daedf8; color: #5e95b4; }
.lock-main small { color: #7c9aaf; }
.profit-panel {
  border-color: #fff;
  background: linear-gradient(135deg, #fff, #f0f9ff);
  box-shadow: 0 7px 23px #5695b80b;
  border-radius: 18px;
  padding: 23px 18px;
}
.profit-panel:before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 9px; background: url('assets/maple/sprites/coin-pouch.png') center / 32px no-repeat; image-rendering: pixelated; }
.profit-panel > span { color: #789ab0; }
.profit-panel strong { color: #347ba5; }
.profit-panel p { color: #7d9aac; }
.subheading { color: #54788f; }
.member-card, .transfer-item, .summary-card, .member-profit-summary, .history-item, .stats-kpi, .chart-panel {
  background: #fff;
  border-color: #deedf6;
  border-radius: 15px;
  box-shadow: var(--shadow);
}
.avatar { border: 1px solid #d4e7f3; color: #6896b0; background: #edf6fc; }
.member-breakdown, .history-item > small, .member-profit-card, .rank-row { border-color: #eaf2f8; }
.member-breakdown span, .history-head span, .history-item p, .summary-card > span, .member-profit-summary > span { color: #7c96a9; }
.arrow { color: #97b3c5; }
.settle-actions p, .helper { color: #7992a3; }
.summary-card:nth-child(2) { background: #f6fbff; border-color: #d8eaf7; }
.member-profit-card > span:before { background: #67af9d; box-shadow: 0 0 0 3px #edf7f3; }
.member-profit-card.tone-2 > span:before { background: #d4a377; box-shadow: 0 0 0 3px #fcf5ed; }
.member-profit-card.tone-3 > span:before { background: #7aaad0; box-shadow: 0 0 0 3px #eff6fc; }
.stats-kpi span { color: #7b99ac; }
.stats-kpi.profit { background: linear-gradient(120deg, #fff, #edf8ff); border-color: #fff; }
.stats-kpi.profit span:before { content: ""; display: inline-block; width: 17px; height: 18px; vertical-align: -4px; margin-right: 6px; background: url('assets/maple/sprites/maple-leaf.png') center / contain no-repeat; image-rendering: pixelated; }
.stats-kpi.profit b { color: #347ba5; }
.chart-heading b { color: #3e6b87; }
.chart-heading span, .chart-legend { color: #7894a7; }
.category-switch { background: #eef6fc; border: 1px solid #dcecf7; }
.category-switch button { color: #82a0b5; }
.category-switch button.active { background: #fff; color: #388cb9; box-shadow: 0 1px 3px #7aaac21a; }
.rank-row i { background: #edf6fc; color: #6f9fbb; border: 1px solid #dcebf6; }
.category-empty, .stats-empty { background: #f5faff; color: #8ba3b5; }
.bottom-nav {
  border-top: 1px solid #deedf7;
  background: #fbfdffed;
  box-shadow: 0 -5px 20px #70a4c10a;
  padding-top: 5px;
}
.nav-item { gap: 2px; color: #87a3b5; font-size: 11px; position: relative; }
.nav-icon { display: grid; place-items: center; width: 46px; height: 39px; border: 1px solid transparent; border-radius: 11px; }
.nav-icon img { object-fit: contain; image-rendering: pixelated; filter: saturate(.8); opacity: .85; }
.nav-item.active { color: #328fc4; font-weight: 650; }
.nav-item.active .nav-icon { border-color: #d0e9f9; background: #e8f5ff; box-shadow: inset 0 1px #fff; }
.nav-item.active img { opacity: 1; filter: none; }
.primary-button, .fab {
  border: 1px solid #3298ce;
  background: linear-gradient(135deg, #57b8e4, #3b9dd3);
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff40, 0 4px 12px #3c9dd326;
  font-weight: 600;
  border-radius: 12px;
}
.fab { border-radius: 16px; padding-left: 18px; padding-right: 20px; }
.fab > span { font-weight: 500; }
.secondary-button { background: #f4faff; border-color: #d5e8f5; color: #558cad; }
.danger-button { background: #fff5f2; border-color: #f0dfd9; }
.pull-refresh-indicator { border-color: #d2e8f5; background: #fff; color: #6099ba; box-shadow: 0 5px 18px #6296b31c; }
.pull-refresh-indicator.ready { background: #edf8ff; color: #328fc4; }
dialog::backdrop { background: #25445c57; }
.sheet { border-color: #e1edf6; background: #fff; border-radius: 22px 22px 0 0; }
.sheet-handle { background: #d3e5f1; }
.sheet-header { background: #fff; border-bottom: 1px solid #e9f2f8; padding-bottom: 14px; }
.sheet h2 { color: #345f7b; font-weight: 650; letter-spacing: 0; }
.close-button { border: 1px solid #e0edf6; border-radius: 12px; color: #729ab3; background: #f0f8fe; }
label > span, .person-field > span, .quick-note-field > span { color: #6e8c9f; }
.sheet input, .sheet select, .sheet textarea, .unlock-card input {
  border-color: #d9e9f3;
  background: #f9fcff;
  border-radius: 10px;
  box-shadow: none;
}
.sheet input:focus, .sheet textarea:focus { border-color: #87bddd; background: #fff; }
.sheet input::placeholder, .sheet textarea::placeholder { color: #a0b5c5; }
.amount-field > div { border-color: #dfedf6; }
.amount-field i { color: #94b7ce; }
.sheet .amount-field input { box-shadow: none; color: #367fa8; }
.sheet .amount-field input::placeholder { color: #b4cddd; }
.person-option { background: #fbfdff; border-color: #e0edf6; }
.person-option.active { border-color: #8fc8e7; background: #edf8ff; }
.person-option.active:after { color: #388fbd; }
.person-option small { color: #87a2b5; }
.person-avatar { background: #e7f3fa; color: #619abd; }
.person-avatar.tone-2 { background: #f9eee3; color: #bf966d; }
.person-avatar.tone-3 { background: #eaf5ef; color: #83ac95; }
.quick-note { color: #6f94ae; background: #f7fbff; border-color: #deecf6; }
.quick-note.active { border-color: #90c5e4; background: #eaf6ff; color: #328fc4; }
.no-quick-notes, .empty-tags { color: #91a8b8; }
.settings-divider { background: #e2eef6; }
.tag-settings-head > span { background: #edf7fe; color: #73a0ba; border: 1px solid #dbecf7; }
.tag-add-row button { background: #eaf6ff; border-color: #cde6f5; color: #398bb9; }
.settings-tag { border-color: #deedf7; background: #f7fbff; }
.ratio-wrap i { color: #8da8bc; }
.detail-row { border-color: #e4eff7; }
.detail-row > span { color: #7f9bad; }
.settlement-detail-hero { background: linear-gradient(#e9f6ff, #f5fbff); border: 1px solid #d2e9f8; color: #347ca7; }
.settlement-detail-hero > span, .settlement-detail-hero > p, .settlement-detail-hero > div span { color: #7da1b9; }
.settlement-detail-hero > div { border-color: #d4e8f6; }
.settlement-detail-hero > div b { color: #4a83a6; }
.snapshot-transfer, .snapshot-person, .settlement-entry { background: #fbfdff; }
.snapshot-transfer i, .snapshot-person-head span, .snapshot-person-grid span, .settlement-entry small, .snapshot-missing { color: #89a1b2; }
.no-transfer { background: #eef8f4; }
.no-transfer span { color: #80a598; }
.settlement-entries { border-color: #e0edf6; }
.mini-type.income { background: #edf8f3; }
.mini-type.expense { background: #fcf3ea; }
.unlock-card { background: url('assets/maple/sky-clouds.svg') center top / 420px auto no-repeat, linear-gradient(#e0f2ff, #fff 55%); border: 1px solid #fff; box-shadow: 0 15px 60px #376b9126; }
.unlock-mark { width: 80px; height: 72px; background: transparent; margin-bottom: 18px; }
.unlock-mark img { image-rendering: pixelated; }
.unlock-card > p:not(.eyebrow) { color: #819eaf; }
.toast { background: #3f6b88; border-color: #6d97b1; color: #fff; box-shadow: 0 5px 20px #38627b26; }
.coin-celebration span { border: 0; border-radius: 0; background: url('assets/maple/sprites/coin-pouch.png') center / contain no-repeat; color: transparent; image-rendering: pixelated; }
@media (max-width: 360px) {
  .brand h1 { font-size: 18px; }
  .brand p { font-size: 9px; letter-spacing: 0; }
  .brand-mark { width: 34px; height: 39px; border-radius: 11px; }
  .brand-mark img { width: 27px; height: 29px; }
  .topbar-actions { gap: 3px; }
  .hero-card { padding: 0 17px 18px; }
  .hero-art { margin-left: -14px; margin-right: -14px; }
  .hero-head { font-size: 11px; gap: 7px; }
  .status-dot { font-size: 9px; }
  .transaction-icon.income { background-size: 24px; }
  .transaction-icon.expense { background-size: 22px; }
  .section-title h2 { font-size: 18px; }
}
@media (min-width: 700px) {
  body { background: linear-gradient(#def2ffc7, #f0f8ffeb), url('assets/maple/village-backdrop.webp') center / cover fixed; }
  .app-shell { border-color: #fff; box-shadow: 0 18px 80px #689cc323; }
  .sheet { border-radius: 22px; border-bottom-color: #e1edf6; }
}