/* 小孩記帳 — 視覺設計 by Gemini Canvas（2026-09-21），以下為接上邏輯後的版本。
   規則：直式單一螢幕不捲動（帳本列表除外）、注音直排在字右邊、禁止雙擊放大。 */

:root {
      --bg-canvas: #FFFDF7;
      --bg-card: #FFFFFF;
      --primary-orange: #FF7E36;
      --primary-orange-dark: #E05D17;
      --accent-yellow: #FFC02D;
      --accent-green: #2EC4B6;
      --accent-green-dark: #1F968B;
      --accent-red: #E63946;
      --accent-purple: #9D4EDD;
      --text-main: #2B2D42;
      --text-sub: #6C757D;
      --border-light: #FFEAD2;
      --shadow-soft: 0 10px 25px rgba(224, 93, 23, 0.08);
      --shadow-card: 0 8px 20px rgba(0, 0, 0, 0.06);
      --radius-xl: 28px;
      --radius-lg: 20px;
      --radius-md: 14px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang TC", "Noto Sans TC", sans-serif;
    }

    html, body {
      width: 100%;
      height: 100%;
      background-color: #F4EBE1;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    /* iPad 810 x 1080 Aspect Bounding */
    #appViewport {
      width: 100vw;
      height: 100vh;
      max-width: 810px;
      max-height: 1080px;
      background-color: var(--bg-canvas);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
    }

    section[id^="screen"] {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: max(24px, env(safe-area-inset-top)) 28px calc(24px + env(safe-area-inset-bottom));
      position: absolute;
      top: 0;
      left: 0;
      background-color: var(--bg-canvas);
      background-image: radial-gradient(#FFE5CA 1.8px, transparent 1.8px);
      background-size: 24px 24px;
    }

    section[hidden] {
      display: none !important;
    }

    /* Standardized Zhuyin (Ruby) Typography */
    ruby {
      ruby-position: inter-character;   /* 注音直排在字的右邊 */
      white-space: nowrap;              /* 整個詞不拆行，拆了會變直式中文 */
    }

    ruby rt {
      font-size: 0.42em;
      font-weight: 700;
      color: var(--text-sub);
      line-height: 1;
    }

    .nowrap {
      white-space: nowrap;
    }

    /* App Header Bar */
    .app-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      margin-bottom: 12px;
      flex-shrink: 0;
    }

    .btn-back {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 3.5px solid var(--border-light);
      box-shadow: var(--shadow-card);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 26px;
      font-weight: 900;
      color: var(--text-main);
      transition: transform 0.1s;
    }

    .btn-back:active {
      transform: scale(0.92);
    }

    /* Money Components ($100 Banknote & $50, $10, $5, $1 Coins) */
    .money-group {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      justify-content: center;
    }

    /* Banknote ($100) */
    .bill {
      width: 136px;
      height: 76px;
      background: linear-gradient(135deg, #FF6B6B 0%, #EE5253 100%);
      border: 3.5px solid #C0392B;
      border-radius: 12px;
      box-shadow: 0 6px 0 #962D22, 0 8px 15px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: #FFF;
      font-weight: 900;
      font-size: 24px;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }

    .bill::before {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      right: 3px;
      bottom: 3px;
      border: 2px dashed rgba(255,255,255,0.45);
      border-radius: 7px;
      pointer-events: none;
    }

    .bill.sm {
      width: 168px;
      height: 96px;
      border-width: 3px;
      font-size: 30px;
      box-shadow: 0 4px 0 #962D22;
      border-radius: 8px;
    }

    .bill.xs {
      width: 56px;
      height: 32px;
      border-width: 1.5px;
      font-size: 12px;
      box-shadow: 0 2px 0 #962D22;
      border-radius: 5px;
    }

    /* Coins Base */
    .coin {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      color: #FFF;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      position: relative;
      flex-shrink: 0;
    }

    /* $50 Coin - Gold */
    .coin.c50 {
      width: 70px;
      height: 70px;
      background: radial-gradient(circle at 35% 35%, #FFF2A1 0%, #FFC107 60%, #D48800 100%);
      border: 3.5px solid #B77900;
      box-shadow: 0 6px 0 #8C5C00, 0 6px 12px rgba(0,0,0,0.12);
      font-size: 26px;
      color: #5D3B00;
      text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    }
    .coin.c50.sm { width: 122px; height: 122px; font-size: 44px; border-width: 4px; box-shadow: 0 6px 0 #8C5C00; }
    .coin.c50.xs { width: 32px; height: 32px; font-size: 12px; border-width: 1.5px; box-shadow: 0 2px 0 #8C5C00; }

    /* $10 Coin - Silver Bi-Tone */
    .coin.c10 {
      width: 62px;
      height: 62px;
      background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #D1D5DB 60%, #9CA3AF 100%);
      border: 3.5px solid #6B7280;
      box-shadow: 0 5px 0 #4B5563, 0 6px 10px rgba(0,0,0,0.1);
      font-size: 23px;
      color: #374151;
      text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    }
    .coin.c10.sm { width: 110px; height: 110px; font-size: 40px; border-width: 4px; box-shadow: 0 6px 0 #4B5563; }
    .coin.c10.xs { width: 30px; height: 30px; font-size: 11px; border-width: 1.5px; box-shadow: 0 2px 0 #4B5563; }

    /* $5 Coin - Silver Small */
    .coin.c5 {
      width: 54px;
      height: 54px;
      background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #E5E7EB 60%, #9CA3AF 100%);
      border: 3.5px solid #9CA3AF;
      box-shadow: 0 4.5px 0 #6B7280;
      font-size: 21px;
      color: #4B5563;
    }
    .coin.c5.sm { width: 98px; height: 98px; font-size: 36px; border-width: 4px; box-shadow: 0 5px 0 #6B7280; }
    .coin.c5.xs { width: 26px; height: 26px; font-size: 10px; border-width: 1px; box-shadow: 0 2px 0 #6B7280; }

    /* $1 Coin - Bronze/Copper */
    .coin.c1 {
      width: 46px;
      height: 46px;
      background: radial-gradient(circle at 35% 35%, #FFB088 0%, #D97706 60%, #92400E 100%);
      border: 3px solid #78350F;
      box-shadow: 0 4px 0 #451A03;
      font-size: 18px;
      color: #FFF;
    }
    .coin.c1.sm { width: 88px; height: 88px; font-size: 32px; border-width: 3.5px; box-shadow: 0 5px 0 #451A03; }
    .coin.c1.xs { width: 22px; height: 22px; font-size: 9px; border-width: 1px; box-shadow: 0 1.5px 0 #451A03; }

    /* Screen ①: Entry / Select Kid */
    #screenEntry {
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 48px;
    }

    #entryTitle {
      font-size: 46px;
      font-weight: 900;
      color: var(--text-main);
      letter-spacing: 2px;
    }

    #peopleCards {
      display: flex;
      gap: 32px;
      width: 100%;
      max-width: 640px;
      justify-content: center;
    }

    .card-person {
      flex: 1;
      background: var(--bg-card);
      border: 4px solid var(--border-light);
      border-radius: var(--radius-xl);
      padding: 36px 20px;
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      cursor: pointer;
      transition: transform 0.15s ease, border-color 0.15s ease;
    }

    .card-person:active {
      transform: scale(0.96);
      border-color: var(--primary-orange);
    }

    .avatar-frame {
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: #FFF3E0;
      border: 6px solid #FFE0B2;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .avatar-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .person-name {
      font-size: 40px;
      font-weight: 900;
      color: var(--text-main);
    }

    .person-tag {
      font-size: 20px;
      font-weight: 800;
      color: var(--text-sub);
      background: #F3F4F6;
      padding: 6px 18px;
      border-radius: 20px;
    }

    /* Screen ②: Main Home */
    #screenHome {
      gap: 20px;
    }

    .home-user-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-card);
      padding: 12px 20px;
      border-radius: var(--radius-lg);
      border: 3.5px solid var(--border-light);
      box-shadow: var(--shadow-card);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .user-avatar-sm {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      border: 3.5px solid var(--primary-orange);
      overflow: hidden;
    }

    .user-avatar-sm img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #homeName {
      font-size: 32px;
      font-weight: 900;
      color: var(--text-main);
    }

    .btn-switch {
      background: #FFF0E6;
      color: var(--primary-orange-dark);
      border: 2.5px solid #FFD0B3;
      padding: 10px 22px;
      border-radius: 18px;
      font-size: 22px;
      font-weight: 800;
      cursor: pointer;
    }

    .btn-switch:active {
      transform: scale(0.95);
    }

    /* Total Box Display */
    #totalBox {
      background: linear-gradient(135deg, #FF9F43 0%, #FF5252 100%);
      border-radius: var(--radius-xl);
      padding: 24px;
      color: white;
      text-align: center;
      box-shadow: 0 12px 30px rgba(255, 107, 53, 0.25);
    }

    .total-label {
      font-size: 22px;
      font-weight: 800;
      opacity: 0.95;
      margin-bottom: 4px;
    }

    .total-amount {
      font-size: 72px;
      font-weight: 900;
      letter-spacing: 1px;
      line-height: 1.1;
      text-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    /* Real Cash Visual Box */
    #moneyBox {
      flex: 1;
      background: var(--bg-card);
      border: 4px dashed #FFD8A8;
      border-radius: var(--radius-xl);
      padding: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
      position: relative;
      overflow: hidden;
    }

    .money-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
      align-items: center;
    }

    /* Action Buttons Navigation Grid */
    .home-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      flex-shrink: 0;
    }

    .btn-action {
      background: var(--bg-card);
      border-radius: var(--radius-xl);
      border: 4px solid var(--border-light);
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      padding: 16px;
      transition: transform 0.1s ease;
    }

    .btn-action:active {
      transform: scale(0.96);
    }

    .btn-action.income {
      background: linear-gradient(180deg, #E8FCD8 0%, #FFFFFF 100%);
      border-color: #B7EB8F;
    }

    .btn-action.expense {
      background: linear-gradient(180deg, #FFE6E6 0%, #FFFFFF 100%);
      border-color: #FFBB96;
    }

    .btn-action.ledger {
      grid-column: span 2;
      background: linear-gradient(180deg, #E6F7FF 0%, #FFFFFF 100%);
      border-color: #91CAFF;
      flex-direction: row;
      justify-content: center;
      gap: 16px;
    }

    .action-icon {
      width: 68px;
      height: 68px;
      object-fit: contain;
    }

    .action-text {
      font-size: 28px;
      font-weight: 900;
      color: var(--text-main);
    }

    /* Screen ③: Form / Money Input Keypad */
    #screenForm {
      gap: 14px;
    }

    .form-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #formIcon {
      width: 68px;
      height: 68px;
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 3px solid var(--border-light);
      background: #FFF;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-card);
    }

    #formIcon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Income Source Selection Row */
    #sourceRow {
      display: flex;
      flex-direction: column;     /* 直式三個按鈕 */
      gap: 16px;
      width: 100%;
      flex: 1;
      min-height: 0;
    }

    .btn-src {
      flex: 1;
      min-height: 0;
      justify-content: flex-start;
      gap: 24px;
      padding: 0 28px;
      font-size: 38px;
      background: var(--bg-card);
      border: 3.5px solid var(--border-light);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 22px;
      font-weight: 900;
      color: var(--text-main);
      cursor: pointer;
      box-shadow: var(--shadow-card);
      padding: 0 8px;
    }

    .btn-src.active {
      border-color: var(--primary-orange);
      background: #FFF4EC;
      box-shadow: 0 0 0 3px rgba(255, 126, 54, 0.3);
    }

    .btn-src img {
      width: 108px;
      height: 108px;
      object-fit: contain;
      flex-shrink: 0;
    }

    /* 第一段只有三選一；選完整排收掉、只剩右上角那張小圖 */
    body.stage-1 #formMain,
    body.stage-1 #padBox,
    body.stage-1 #noteInput,
    body.stage-1 #submitBtn { display: none !important; }

    /* Main Form Display Area */
    #formMain {
      background: var(--bg-card);
      border: 3.5px solid var(--border-light);
      border-radius: var(--radius-xl);
      padding: 16px 20px;
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    #amountBox {
      font-size: 56px;
      font-weight: 900;
      color: var(--primary-orange-dark);
      text-align: center;
      line-height: 1;
    }

    /* Picked Money Sequence Visual Box */
    #pickedBox {
      min-height: 48px;
      background: #FFFDF9;
      border: 2px dashed #FFE0B2;
      border-radius: var(--radius-md);
      padding: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: center;
    }

    #formHint {
      min-height: 26px;
      font-size: 20px;
      font-weight: 800;
      color: var(--accent-red);
      text-align: center;
    }

    /* Keypad Grid Box */
    #padBox {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: minmax(0, 1fr);
      gap: 14px;
      flex: 1;
      min-height: 0;
    }

    .btn-pad {
      min-height: 0;
      background: var(--bg-card);
      border: 3.5px solid #FFE0B2;
      border-radius: var(--radius-lg);
      box-shadow: 0 6px 0 #FFCC80, var(--shadow-card);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.08s, box-shadow 0.08s;
    }

    .btn-pad:active {
      transform: translateY(4px);
      box-shadow: 0 2px 0 #FFCC80;
    }

    .btn-pad.back-btn {
      background: #FFF1F0;
      border-color: #FFA39E;
      box-shadow: 0 6px 0 #FF7875;
      font-size: 56px;
      font-weight: 900;
      color: var(--accent-red);
    }

    /* Note Input Box */
    #noteInput {
      width: 100%;
      height: 60px;
      background: var(--bg-card);
      border: 3.5px solid var(--border-light);
      border-radius: var(--radius-lg);
      padding: 0 20px;
      font-size: 22px;
      font-weight: 800;
      color: var(--text-main);
      outline: none;
    }

    #noteInput::placeholder {
      color: #C4C4C4;
    }

    #submitBtn {
      width: 100%;
      height: 72px;
      background: linear-gradient(135deg, #2EC4B6 0%, #1F968B 100%);
      border: none;
      border-radius: var(--radius-xl);
      color: white;
      font-size: 30px;
      font-weight: 900;
      box-shadow: 0 8px 0 #146B63, 0 10px 20px rgba(46, 196, 182, 0.3);
      cursor: pointer;
      flex-shrink: 0;
    }

    #submitBtn:active {
      transform: translateY(4px);
      box-shadow: 0 4px 0 #146B63;
    }

    /* Screen ④: Ledger List */
    #screenLedger {
      gap: 16px;
    }

    .ledger-header {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    #ledgerTitle {
      font-size: 38px;
      font-weight: 900;
      color: var(--text-main);
    }

    /* Ledger Scrollable Container (Only this section scrolls internal list) */
    #ledgerList {
      flex: 1;
      overflow-y: auto;
      padding-right: 6px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* Custom scrollbar styling for child usability */
    #ledgerList::-webkit-scrollbar { width: 0; height: 0; }
    #ledgerList { scrollbar-width: none; }

    .month-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .month-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 0 8px;
    }

    .month-title {
      font-size: 28px;
      font-weight: 900;
      color: var(--primary-orange-dark);
    }

    .month-balance {
      font-size: 22px;
      font-weight: 800;
      color: var(--text-sub);
    }

    .ledger-item {
      background: var(--bg-card);
      border: 3.5px solid var(--border-light);
      border-radius: var(--radius-lg);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--shadow-card);
    }

    .item-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .item-icon {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      object-fit: cover;
      border: 2px solid var(--border-light);
    }

    .item-details {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .item-date {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-sub);
    }

    .item-name {
      font-size: 24px;
      font-weight: 900;
      color: var(--text-main);
    }

    .item-amount {
      font-size: 30px;
      font-weight: 900;
    }

    .item-amount.in {
      color: var(--accent-green-dark);
    }

    .item-amount.out {
      color: var(--accent-red);
    }

    /* Empty Ledger State */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      gap: 16px;
      color: var(--text-sub);
    }

    .empty-state-text {
      font-size: 28px;
      font-weight: 900;
    }

    /* Screen ⑤ 家長模式 Banner (Design System Preview) */
    .parent-mode-banner {
      width: 100%;
      cursor: pointer;
      font: inherit;
      background: #F3F0FF;
      border: 3.5px dashed #B197FC;
      border-radius: var(--radius-lg);
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
    }
    .parent-mode-banner:active { transform: scale(0.98); }

    .parent-title {
      font-size: 22px;
      font-weight: 900;
      color: #6741D9;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .parent-lock-badge {
      background: #7950F2;
      color: white;
      padding: 6px 14px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 800;
    }

    /* Developer Screen Switcher Bar (Toolbar for Canvas previewing) */
    #previewToolbar {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(43, 45, 66, 0.92);
      backdrop-filter: blur(8px);
      padding: 6px 12px;
      border-radius: 30px;
      display: flex;
      gap: 8px;
      z-index: 9999;
      box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }

    .toolbar-btn {
      background: transparent;
      border: none;
      color: #D1D5DB;
      font-size: 13px;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
    }

    .toolbar-btn.active {
      background: var(--primary-orange);
      color: #FFF;
    }

/* ===== 接上邏輯後補的狀態樣式（沿用設計的色票與圓角） ===== */

[hidden] { display: none !important; }

/* 錢包：沒有零頭時放一個虛線空位，不要整排空白 */
.money-row.coins.is-empty::after {
  content: "";
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 3px dashed #FFD8A8;
}

/* 零頭湊滿一百：硬幣往上飛、合成一張新的一百 */
.money-row.coins.merging .coin {
  transform: translateY(-90px) scale(.2);
  opacity: 0;
  transition: transform .8s ease-in, opacity .8s ease-in;
}
.bill.pop { animation: billPop .55s ease-out; }
@keyframes billPop {
  0% { transform: scale(.2); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

/* 金額還沒按、或錢不夠時，送出鍵按不下去 */
#submitBtn:disabled {
  background: #E5E7EB;
  color: #9CA3AF;
  box-shadow: 0 8px 0 #D1D5DB;
  cursor: default;
}
#submitBtn:disabled:active { transform: none; box-shadow: 0 8px 0 #D1D5DB; }

/* 記一筆：整頁排版由 flex 決定，鍵盤吃掉剩下的高度 */
#screenForm { gap: 14px; }
#formMain { flex-shrink: 0; }
.btn-src span { white-space: nowrap; }

/* 帳本：家長專區是按鈕，本文靠左、徽章靠右 */
.parent-mode-banner { flex-shrink: 0; }

/* 第一段三選一：圖靠左、名字接著，不要整組浮在中間 */
#sourceRow .btn-src {
  justify-content: flex-start;
  gap: 28px;
  padding: 0 34px;
  font-size: 40px;
}
#sourceRow .btn-src img { width: 172px; height: 172px; }

/* ===== 2026-09-21 Adam 驗收第二輪：去字、單行橫幅、過場 ===== */

/* ① 入口：只有兩張人物卡 */
#screenEntry { gap: 0; }
#peopleCards { max-width: 700px; gap: 36px; }
.card-person { padding: 44px 24px; gap: 26px; }
.avatar-frame { width: 260px; height: 260px; }
.person-name { font-size: 52px; }

/* ② 主畫面 */
.btn-switch {                       /* 切換改圖示 */
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-switch svg { width: 34px; height: 34px; }

#totalBox { padding: 18px 24px; }   /* 只剩金額，不再有標題 */
.total-amount { font-size: 86px; }

.home-actions { grid-template-columns: 1fr 1fr; }
.btn-action.income, .btn-action.expense { padding: 10px; }
.action-icon { width: 100%; height: auto; max-height: 230px; aspect-ratio: 1; }

/* 我的帳本：單行橫幅 */
.btn-action.ledger {
  grid-column: auto;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  gap: 12px;
  flex-shrink: 0;
}
.btn-action.ledger .action-text { font-size: 32px; white-space: nowrap; }
.btn-action.ledger .chev { font-size: 34px; color: var(--text-sub); }

/* ④ 帳本：標題列＝一行橫幅，家長專區掛在標題列右邊（不置底） */
.ledger-header {
  background: var(--bg-card);
  border: 3.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 10px 16px;
  gap: 14px;
}
#ledgerTitle { font-size: 34px; white-space: nowrap; }
.ledger-header .parent-mode-banner {
  margin: 0 0 0 auto;
  width: auto;
  padding: 10px 14px;
  gap: 8px;
  flex-shrink: 0;
}
.ledger-header .parent-title { font-size: 20px; }

/* 月份與月底：同一行 */
.month-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  gap: 12px;
}
.month-title, .month-balance { white-space: nowrap; }

/* 明細：日期、圖、名稱、金額全部同一行 */
.ledger-item { padding: 12px 18px; }
.item-left { flex: 1; min-width: 0; gap: 14px; }
.item-details {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.item-date { flex-shrink: 0; font-size: 20px; }
.item-icon { flex-shrink: 0; object-fit: fill; }

/* ③ 記一筆：送出只留 OK */
#submitBtn { font-size: 34px; letter-spacing: 2px; }

/* 送出後的過場：先讓小孩看到自己記了什麼，再回主畫面 */
#confirm {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 45, 66, 0.55);
  backdrop-filter: blur(3px);
  animation: confirmIn .18s ease-out;
}
#confirm.is-out { animation: confirmOut .3s ease-in forwards; }
.confirm-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 40px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  animation: confirmPop .35s cubic-bezier(.2,1.3,.4,1);
}
.confirm-card img { width: 150px; height: 150px; border-radius: 26px; }
#confirmAmount { font-size: 68px; font-weight: 900; line-height: 1; }
#confirmAmount.in { color: var(--accent-green-dark); }
#confirmAmount.out { color: var(--accent-red); }

@keyframes confirmIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes confirmOut { to { opacity: 0 } }
@keyframes confirmPop { 0% { transform: scale(.7); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
/* 標題拿掉後，兩張人物卡放大填滿畫面 */
#peopleCards { max-width: 760px; }
.card-person { padding: 52px 28px; }
.avatar-frame { width: 320px; height: 320px; }
.person-name { font-size: 62px; }

/* 確認卡片的兩顆鍵：打叉回去改、打勾送出 */
#confirmNote {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-sub);
  max-width: 420px;
  text-align: center;
  overflow-wrap: anywhere;
}
#confirmNote:empty { display: none; }
.confirm-actions { display: flex; gap: 28px; margin-top: 6px; }
.confirm-btn {
  width: 116px;
  height: 116px;
  border: none;
  border-radius: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.confirm-btn svg { width: 56px; height: 56px; }
.confirm-btn.no {
  background: linear-gradient(135deg, #F0616B 0%, #E63946 100%);
  color: #fff;
  box-shadow: 0 7px 0 #A62430;
}
.confirm-btn.yes {
  background: linear-gradient(135deg, #2EC4B6 0%, #1F968B 100%);
  color: #fff;
  box-shadow: 0 7px 0 #146B63;
}
.confirm-btn:active { transform: translateY(4px); box-shadow: none; }

/* 帳本明細：寬度跟標題列一樣、固定不左右晃，只能上下捲 */
#ledgerList {
  padding-right: 0;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.ledger-item { width: 100%; }
.item-name { min-width: 0; flex: 1; }
.item-amount { flex-shrink: 0; }

/* 錢的增減：消失的淡出、新增的淡入 */
.money-leaving { animation: moneyOut .62s ease-in forwards; }
.money-entering { animation: moneyIn .62s ease-out backwards; }
/* 消失的錢：淡掉但位子留著，免得其他的錢跟著位移 */
@keyframes moneyOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.5); }
}
@keyframes moneyIn {
  0%   { opacity: 0; transform: scale(.55) translateY(18px); }
  70%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* 帳本列表：捲軸不佔位也不蓋住內容，最後一列要能完整看到 */
#ledgerList {
  padding-bottom: 20px;
  scroll-padding-bottom: 20px;
}
#ledgerList::-webkit-scrollbar { display: none; }

/* 月份列：月份與月底金額同一行，金額不被擠壓 */
.month-header { padding: 0 10px; }
.month-balance { flex-shrink: 0; }
.month-title { flex-shrink: 0; }

/* 千鈔：跟百鈔同一套設計，換成藍色 */
.bill.b1000 {
  background: linear-gradient(135deg, #5B8DEF 0%, #2F6BDB 100%);
  border-color: #1E4FA8;
  box-shadow: 0 6px 0 #16387A, 0 8px 15px rgba(0,0,0,0.1);
}
.bill.b1000.sm { box-shadow: 0 4px 0 #16387A; }
.bill.b1000.xs { box-shadow: 0 2px 0 #16387A; }
.bill.b1000::before { border-color: rgba(255,255,255,0.5); }

/* 鍵盤變七顆：退回鍵獨占最後一列 */
.btn-pad.back-btn { grid-column: 1 / -1; }
/* 退回鍵不需要跟金額鍵一樣高 */
#padBox { grid-template-rows: 1fr 1fr 0.5fr; grid-auto-rows: unset; }

/* 明細名稱：完整呈現，絕不截字。太長就換行（詞本身靠 ruby 的 nowrap 不會被拆開） */
.item-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}
.item-details { flex-wrap: wrap; }
/* 月份列：115/9 在左、結餘在右，右邊留一點呼吸空間 */
.month-header { padding: 0 20px 0 10px; }
/* 計算機恢復六顆：退回鍵不再獨占一列 */
#padBox { grid-template-rows: 1fr 1fr; }
.btn-pad.back-btn { grid-column: auto; }
/* 標了注音的詞：整個詞一定同一行，不准逐字斷行變直的 */
.zh-word { white-space: nowrap; display: inline-block; }

/* 結餘與明細金額：右邊對齊，預留到萬位，標籤和數字不擠在一起 */
.month-balance {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  min-width: 210px;
  text-align: right;
}
.month-balance b { font-size: 24px; color: var(--text-main); }
.item-amount {
  min-width: 210px;
  text-align: right;
}

/* 月份列保險：真的擠不下時讓結餘換到下一行，絕不重疊 */
.month-header { flex-wrap: wrap; gap: 8px 18px; }
.month-balance { flex: 0 1 auto; }
.month-balance b { min-width: 6ch; text-align: right; }
/* 錢包切左右：左邊是現在手上的錢，右邊放剛進來的錢（收入按進去的、支出找回來的）
   錢一律不准超出框線——塞不下就整邊一起縮（--k 由 ui.js 的 fitSide 算） */
#moneyBox {
  min-height: 0;              /* 錢再多也不准把框撐高、把下面的按鈕擠出畫面 */
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 20px;
}
.money-side {
  --k: 1;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(20px * var(--k));
  padding: 6px 10px 10px;     /* 留給陰影與彈跳，不被切到 */
}
.money-side.incoming {
  border-left: 3px dashed #FFD8A8;
  padding-left: 18px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: calc(14px * var(--k));
}
.money-side .money-row {
  flex-shrink: 0;             /* 排不准被壓扁，否則錢會疊在一起、縮放也量不出塞不下 */
  gap: calc(14px * var(--k));
  justify-content: flex-start;
  align-content: flex-start;
}
.money-side .money-row.bills { min-height: calc(82px * var(--k)); }
.money-row > .bill,
.money-row > .coin,
.money-row > .stack,
.money-side.incoming > *,
.money-side .money-row.coins.is-empty::after { zoom: var(--k); }

/* 每種硬幣外框都墊到跟鈔票一樣高（76px）：大硬幣加進同一行時行高不變，原本的錢才不會被擠得上下跳 */
.money-row > .coin.c50, .money-side.incoming > .coin.c50 { margin-block: 3px; }
.money-row > .coin.c10, .money-side.incoming > .coin.c10 { margin-block: 7px; }
.money-row > .coin.c5,  .money-side.incoming > .coin.c5  { margin-block: 11px; }
.money-row > .coin.c1,  .money-side.incoming > .coin.c1  { margin-block: 15px; }

/* 同一種錢超過 5 個：疊成一疊，右上角寫數量 */
.stack {
  position: relative;
  flex-shrink: 0;
  padding: 14px 26px 0 0;     /* 後面兩張往右上錯開，右上角留給數字 */
}
.stack > .bill,
.stack > .coin { box-shadow: none; }
.stack > .top { position: relative; z-index: 3; }
.stack > .layer { position: absolute; filter: brightness(.9); }
.stack > .layer:nth-child(1) { top: 0;   left: 14px; z-index: 1; }
.stack > .layer:nth-child(2) { top: 7px; left: 7px;  z-index: 2; }
.stack > .ghost { position: absolute; top: 14px; left: 0; z-index: 4; }
.stack-n {
  position: absolute;
  top: -2px;
  right: 0;
  z-index: 5;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border-radius: 22px;
  background: var(--text-main);
  border: 3px solid #FFF;
  color: #FFF;
  font-size: 24px;
  font-weight: 900;
  line-height: 38px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
/* 硬幣疊（只有右邊一次按很多枚才會出現）：數字縮小，別蓋住硬幣 */
.stack:has(> .coin) { padding: 10px 16px 0 0; }
.stack:has(> .coin) > .layer:nth-child(1) { top: 0;   left: 10px; }
.stack:has(> .coin) > .layer:nth-child(2) { top: 5px; left: 5px; }
.stack:has(> .coin) > .ghost { top: 10px; }
.stack:has(> .coin) > .stack-n {
  top: -6px; right: -4px;
  min-width: 32px; height: 32px; border-radius: 16px;
  font-size: 18px; line-height: 26px; padding: 0 6px; border-width: 3px;
}
/* 明細名稱那一格直接佔滿剩下的寬度，不照字去估：iPad Safari 估寬度時漏算右邊的注音，
   把逐字標注音的明細（小孩自己打的）算得太窄，就一個字一行變直的 */
.item-details { flex: 1 1 0; }
.item-name { flex: 1 1 0; }