/* styles.css — 記帳 PWA 麥塊（Minecraft）風設計系統
   （T-記帳06 換皮，2026-07-08 約小伯[IT大隊長]；Peter 拍板「麥塊像素風很好」）
   大地暖色系取代舊深藍紫冷調：泥土磚地／灰石物品欄面板／內凹格子 chips／
   經驗條預算／愛心淨額／石紋按鈕／木板交易列／hotbar 分頁列／紫邊 tooltip。
   版權紀律：所有材質為 gen_mc_assets.py Python 亂數自繪 16x16 PNG（base64 內嵌），
   零 Mojang 官方資產；愛心為 CSS box-shadow 自繪；字型 Cubic 11（OFL）本地自載、禁 CDN。
   鐵三約束不變：vanilla no-build、渲染走 dom.js（textContent 零 innerHTML）、不引框架。
   ★ 類名全部沿用 T-記帳04 版（app.js 不改結構），僅換視覺語彙。 */

/* ---- Cubic 11（俐方體11號）OFL 開源繁中像素字型，自載 woff2、離線可用、禁 CDN 熱鏈 ---- */
@font-face {
  font-family: 'Cubic 11';
  src: url('fonts/Cubic_11.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- 自繪材質（gen_mc_assets.py 產物，非 Mojang 資產）---- */
  --tex-stone: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAu0lEQVR42nWSwRXDMAhDWToLsEDuvnvPqpbfj+K+ciDgIEBAdfe95LquO8Su/spwjPQYo+639BIbhoFRtF5KH/7NOW04vfRYkmUL34a0YJkFpF82wI5C3dIvhpjCdz/WVANsd5NOfjDGIOMLcMxOWaFOWTOpHIKRsHJKBmqpoxlGDoBcew+u66IHHwaVpYrWjYGla7KHp0IOMdecSFb0BbAsrlDIf5f3HB+jPA6RE3LAJp3bSa5wg0B3fwAmhaJLI/81xgAAAABJRU5ErkJggg==");
  --tex-dirt: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAyklEQVR42m2Suw0CQQxE3Q0FkJKSECEaIEUiJKMECiCmVOb0Vk/GQrLuvP7MjNdb79vpdT3k+7zs48Q+jzO+QVOxSpQeLDmOthHEtga80ZNqfOKdp0j/BbP6ftz9NCgXqqTRyVFy2io/vE5NHZ196DhFyJyQFCUOc5woT6pEApicF+XodG6SgHEsDDCZvcbFoIAxnw46lyRJx7KpcBILqq+s706gvqU1g3vo2wCYai2REsY0F4IGb1nE6kqU1+eZb2nM2h9sfzVSfQHuvSEhv5Z2hQAAAABJRU5ErkJggg==");
  --tex-grass: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAyklEQVR42l2Syw0CMQwFXRVXCuAKZw4UQAE0gKiBHmiA+7bFk2Y1+1gpshLHn3lO5vG9ZN0/p+v7GOs6vw5uEpDbrOyHuFjSYuPlmmgSnssNOxamTDbxmm8yDeMckaSylcemGCPkFsO4ljfNA2hX3XVeOzTxDoyrFNo00F0k7lBpvgEbkmAyMF8so1sTshNdlaYRp7B1rGBw9o1aNH3w/2ngyajt16CcYcNBoQ3gsbWNrKrsz9JPhH90sbigW2s1f5ygs+uv2r8I8h+7X2E4V7kQcQAAAABJRU5ErkJggg==");
  --tex-planks: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAi0lEQVR42mNY0ewPQbUxZnA2HsTQn2O7oSsUiIAaIAwI2j0lDpkLRwzzqtwhCKgBwgAqhQtiIoa8IAOSEAN+FwMdDLQZaCeEC2Qg/IALIfsNpAGPc9H8BjSaAj8AdWN1NJosSjzAAx7iaFx+Y8DlaIiLkRk0iwfklIYvHtDE4bGB8AP+JASPDZL9AACoS08d96fZbwAAAABJRU5ErkJggg==");
  /* ---- 五分頁世界觀材質（T-記帳材質多樣化 2026-07-11；同 gen_mc_assets.py 自繪，非 Mojang）---- */
  --tex-oak-floor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAvElEQVR42p2SsQ3CQBRDPQ4lG1BTQUERMQAlA2QESugoqFPS01AwACPhyMgyPyESSNbpfPe/4vcvuB1Xqf16lvbSLsoGj3ND8+x23FBsoNU+zyVaXA/LFBvSsqIU4H7aWLxmQznhyk9RsphmoFiUSHBiMyir1sJAvRnYlgy25baP1G7nPwnDrB75KBgcTjBsK1QCMw80shJ64nGgMefsZfPQj9OPdThspUr7weDo/lscMhlsMTrvbwz/vMMLiVR82NZTPVcAAAAASUVORK5CYII=");
  --tex-deepslate: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAxElEQVR42mWSMQ4DMQgE+c9VuS5u79qTUuf/D8laY42QI2ELwwILuMa4r+uTG4l+HK9IdO7zfD/PF2/0ysER0YEv9txJkdu81ZOBUEGCIxGusq6UrGBAT1p5A+p8aCMW40HnWVLcuozeXaBn0xuNTm9DrylBJsJYSANPh2PTkxJ0cRNGMnGWwlLW0kqwy7FdjLUt6z9A9Arob4oK7Z24+PL/9H2LdhW0OgOwOge/Rqdk/Np0f3fZ9sjuS7TSN+WHZfRj3D98VbZCLB3cGwAAAABJRU5ErkJggg==");
  --tex-gold-ore: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAA1UlEQVR42mWSwQ1CMQxDMwr3f+Lf+OL2OXJgB2ZjB1ZgA7gxAwuAvxw9WUWKqrapHTtpretlWU5e5/ngdZr2Ct/r6KyjnPBTJRTv+/H7vOYjUhuAc6ZNYW4xQqd9UdQbwEnhvZE1UCYAG8m1eaCIMQrZyE441RUMwJOZZDrpU1jhjEChdaeT9kAfBlYm4AdW1QAL017qcQ8FLe45UBe5xr9uO5lBjC+Lj4AM6GlGRlkfE/3/PNjoOTAXA4Dla2lDauW/UEJBlxjw53Gm45UNyVLDX2QOP7jnwEkUn0chAAAAAElFTkSuQmCC");
  --tex-meadow: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAA+UlEQVR42l2SMQ7CMBAE71W0PIAWGhoKGjpKCh4Ayg+QeEA6Wgp6JF7FRBOtTpEcx2ff7u2tXeNtvx1Wh+f6/j0yzq8NITPj+tkxu0mCYZlt4IL5N16EETLAwDsD+N6Pk4FgFgCy40IKTosPtPQwmcqZSixoZXYmABn8wh2kxIIlFVniVIw212mJPMEi5x7iD9UsaF6IYhqjZFK0ihdzTDezFECsV1Sw9TTQnSWsqDQpd6JUnSAPOvuuuC6ZVpAa3xQT8ATwHswmT+TiBThDXSrJMaX7G4mB7kyA/sjUk3tIo52iYrBFlNSvv79LKEo9GpUGFB0ihy79AbR0bDMYPHgAAAAAAElFTkSuQmCC");
  --tex-obsidian: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAA1ElEQVR42k2SQQoCUQxDsxdERERBmK3oxrV7b+H9z2HkfR6Fz0x/Jk3bdPJ+fve7y/V459nrY/ucDhtXTuMiDfopfd3OL9J6GkBqUJzTaxN6CqakQrAJ+AxCNahkRm07oTqZUwJmCqFBGlR44MojtGZAQ9Q6do9cgygMg5wpqSJCwSw7aTxd9jhMNK5UYsx1Fe6HmtG4uSOqicyCcdNo4K9rmZOsBGWU1Bb7tnKRuObZmKaZSan/v8QMs10MmIuHumy1mflHUB2X1YKZaZ/e2YaBY/wAYC5UkOPSAcQAAAAASUVORK5CYII=");
  --tex-stone-bricks: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAq0lEQVR42pWSMRIEIQgEeZ8PM93oEl9747XXxW62BBYCMwNofZpdP5tzjjG8mkp8rVXrbyQSTS4AKmIJJkv1BninFCcAKFTQLxPq5AwASoklPQpXMxQsVfwo9BZNMMNjGVhZ7SrioECfOLZd46VVl3ZuWXsQ5TLnAHZC0K2wjOLCKZ9IW8c5AEXN9U3guL1C9EHfP1iPbAAcfhvb6MQ3hf7nRDoYCp4b8PYdvj/3jpjs9RaKAAAAAElFTkSuQmCC");
  --tex-crafting: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAd0lEQVR42mOIcVAiCTEA8ZR8uwVVHlv7w1c0+wO5QPa8KlcgGygO5MLZQHGoBvwq4GygiVANuFQAxeH2Q9RANeBSATESzX4GcjxNpB8g9lPVD1hDmYGgCizxQLKnifEDPB2ANAA5lPoBYh6ZaQliP5BExANJngYApVwZ7HY7v7EAAAAASUVORK5CYII=");

  /* ---- GUI 色（麥塊經典灰面板系）---- */
  --panel: #c6c6c6;       /* 物品欄面板灰 */
  --panel-hi: #ffffff;    /* 面板亮邊（左上高光） */
  --panel-lo: #555555;    /* 面板暗邊（右下陰影） */
  --slot: #8b8b8b;        /* 格子內灰 */
  --slot-dark: #373737;   /* 格子內凹暗邊（上左） */
  --black: #1b1b1b;       /* 外框黑 */

  /* ---- 文字（在亮灰面板上）---- */
  --txt: #373737;         /* 主文字 */
  --txt2: #5c5c5c;        /* 次要文字 */

  /* ---- 語意色（大地色系強調，皆選亮灰底可讀深色版，維持 WCAG AA）---- */
  --gold: #b57614;        /* 金錠黃（暗版，亮底可讀＝主強調） */
  --gold-bright: #ffd83d; /* 金錠黃（亮版，深底用） */
  --grass: #4e8a34;       /* 草綠 */
  --xp: #5cbf22;          /* 經驗條綠 */
  --xp-text: #2f6b12;     /* 經驗字（亮底可讀深綠） */
  --exp: #1c6b1c;         /* 支出綠（Peter 台股慣例：收入紅/支出綠，2026-07-10） */
  --inc: #9b1c1c;         /* 收入紅（同上） */
  --danger: #c62828;      /* 超支紅 */

  /* ---- tooltip（麥塊物品懸浮框）---- */
  --tip-bg: #160b1f;
  --tip-border: #5f3ab5;

  /* ---- 像素網格間距（4/8 的倍數）---- */
  --s1: 8px; --s2: 12px; --s3: 20px; --s4: 28px;
  --u: 2px;               /* 邊框基本單位 */
  --bd: 3px;              /* 像素框線寬 */
}

/* 行動瀏覽器（尤其 iOS Safari／Chrome Android）會對「它認為太小」的文字自動放大，
   像素字型的版面對字寬很敏感，被放大就會撐破格線與 hotbar。100% ＝ 照我們寫的來。
   2026-08-17 約小伯移植自 AI 辦公室（該處 3 用，源自 Err-150 的 font-boosting 教訓）。*/
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  color: var(--txt);
  font-family: 'Cubic 11', "Microsoft JhengHei", "PingFang TC", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  /* 像素字型關閉抗鋸齒，保持點陣銳利 */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  /* 泥土磚背景（自繪 16x16 放大，硬邊） */
  background-color: #5a3d22;
  background-image: var(--tex-dirt);
  background-size: 64px 64px;
  image-rendering: pixelated;
}
button, input, select { font-family: inherit; font-size: inherit; }
img { image-rendering: pixelated; }

/* 置中容器：手機滿版、桌機置中窄欄。內容文字/emoji 不受 pixelated 影響 */
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; }
#app :not(.topbar):not(.btn):not(.txrow):not(.tabbar):not(.tabbody) { image-rendering: auto; }
@media (min-width: 768px) { #app { border-left: var(--bd) solid var(--black); border-right: var(--bd) solid var(--black); } }

/* ---- 麥塊 GUI 面板（灰面板＋左上亮右下暗 3D 邊）＝卡片 ---- */
.card {
  background: var(--panel);
  border: var(--u) solid var(--black);
  box-shadow:
    inset  var(--bd)  var(--bd) 0 0 var(--panel-hi),
    inset calc(-1 * var(--bd)) calc(-1 * var(--bd)) 0 0 var(--panel-lo);
  padding: var(--s3);
  margin: var(--s3) var(--s2) 0;
}
h1, h2 { margin: 0 0 var(--s1); font-size: 20px; font-weight: 700; letter-spacing: .5px; color: var(--txt2); }
h2::before { content: "▌"; color: var(--grass); margin-right: 6px; }
.muted { color: var(--txt2); font-size: 14px; }
.err { color: #9b1c1c; /* 錯誤=警示紅，獨立於收支語意色 */ min-height: 16px; font-size: 15px; margin-top: var(--s1); }   /* 2026-07-14 Peter：字太小，13→15 */

/* ---- 表單欄位：內凹深底格（麥塊輸入框語彙）---- */
.fld {
  width: 100%; padding: 11px 12px; margin: 5px 0;
  background: #3b3b3b; color: #f4f4f4;
  border: var(--u) solid var(--black);
  box-shadow: inset var(--u) var(--u) 0 0 rgba(0,0,0,.55), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 rgba(255,255,255,.12);
  border-radius: 0;
}
.fld::placeholder { color: #9a9a9a; }
.fld:focus { outline: none; box-shadow: inset var(--u) var(--u) 0 0 rgba(0,0,0,.55), 0 0 0 var(--bd) var(--gold-bright); }
select.fld { -webkit-appearance: none; appearance: none; background-image: none; }
.row { display: flex; gap: var(--s1); }
.row .fld { flex: 1; }
/* AI 輸入排：解析鈕改佔內容寬，否則 .btn 的 width:100% 會把同排輸入框擠扁（2026-07-10 修） */
.airow { align-items: center; }
.airow .btn { width: auto; flex: 0 0 auto; margin-top: 0; padding: 11px 14px; }

/* ---- UIUX02 ③：記一筆 AI 快速記帳區視覺分流 ---- */
/* AI 區高亮框：工作台世界觀綠邊＋微光（不搶過金色送出鈕）*/
.aiquick { padding: var(--s1); border: var(--u) solid var(--grass);
  box-shadow:
    inset var(--u) var(--u) 0 0 rgba(78,138,52,.45),
    inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 rgba(0,0,0,.25),
    0 0 8px 1px rgba(78,138,52,.4); }
/* AI 區與手動欄位之間的像素分隔線：兩側點陣線＋中央標籤「或 手動填寫欄位」*/
.orsep { display: flex; align-items: center; gap: var(--s1); margin: var(--s3) 0 var(--s1); }
.orsep::before, .orsep::after { content: ''; flex: 1; height: var(--u);
  background: repeating-linear-gradient(90deg, var(--panel-lo) 0 4px, transparent 4px 8px); }
.orseplbl { font-size: 13px; color: var(--txt2); white-space: nowrap; letter-spacing: .5px; }

/* ---- 石頭按鈕：石紋底＋雙層斜面邊＋按下位移 2px ---- */
.btn {
  width: 100%; min-height: 44px; padding: 13px; margin-top: var(--s2);
  cursor: pointer; border-radius: 0;
  font-size: 17px; font-weight: 700; letter-spacing: 1px;
  color: #ffffff; text-shadow: 2px 2px 0 rgba(0,0,0,.55);
  background-image: var(--tex-stone); background-size: 64px 64px;
  border: var(--u) solid var(--black);
  box-shadow:
    inset 0  var(--bd) 0 0 rgba(255,255,255,.42),
    inset  var(--bd) 0 0 0 rgba(255,255,255,.22),
    inset 0 calc(-1 * var(--bd)) 0 0 rgba(0,0,0,.38),
    inset calc(-1 * var(--bd)) 0 0 0 rgba(0,0,0,.22);
}
.btn.primary { background-image: none; background-color: #e8b64a; color: #4a2f00; text-shadow: 1px 1px 0 rgba(255,255,255,.4); }
.btn.ghost { opacity: .95; font-weight: 400; }
.btn:hover { outline: var(--bd) solid #ffffff; outline-offset: -1px; color: #ffffa0; }
.btn.primary:hover { color: #4a2f00; }
.btn:active { transform: translate(0, var(--u));
  box-shadow: inset 0 var(--bd) 0 0 rgba(0,0,0,.40), inset var(--bd) 0 0 0 rgba(0,0,0,.22), inset 0 calc(-1 * var(--u)) 0 0 rgba(255,255,255,.16); }
.btn:disabled { opacity: .5; }
.btn > * { image-rendering: auto; }
.link { background: none; border: 0; color: var(--gold); cursor: pointer; font-size: 13px; padding: 4px;
  text-decoration: underline; text-underline-offset: 3px; }
:is(button, a):focus-visible { outline: var(--bd) solid var(--gold-bright); outline-offset: 2px; }
.chkrow { display: flex; align-items: center; gap: var(--s1); margin: var(--s1) 0; font-size: 15px; }

/* 登入 */
.login { margin: 16vh var(--s2) 0; text-align: center; }
.login h1 { font-size: 24px; margin-bottom: var(--s3); color: var(--gold); text-shadow: 1px 1px 0 var(--panel-hi); }
.login h1::before { content: none; }

/* ---- 頂列：木板橫樑 ---- */
.topbar { display: flex; justify-content: space-between; align-items: center;
  padding: var(--s2) var(--s3); position: sticky; top: 0; z-index: 5;
  background-image: var(--tex-planks); background-size: 64px 64px;
  border-bottom: var(--bd) solid var(--black);
  box-shadow: inset 0 -3px 0 0 rgba(0,0,0,.3), inset 0 3px 0 0 rgba(255,255,255,.18); }
.topbar > * { image-rendering: auto; }
.topbar > span { font-size: 18px; color: #ffffff; text-shadow: 2px 2px 0 #3f3f3f; }
.toprt { display: flex; gap: var(--s2); }
.topbar .link, .toprt .link { color: #ffe9a8; text-shadow: 1px 1px 0 #3f3f3f; min-height: 44px; }

/* ---- 底部快捷欄（hotbar）＝分頁列，中央凸起金格 ＋ 按鈕 ---- */
.tabbody { padding-bottom: 96px; }
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 10; display: flex; gap: 6px; align-items: stretch;
  background: var(--panel); border-top: var(--bd) solid var(--black);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  box-shadow: inset 0 3px 0 0 var(--panel-hi); }
.tabbar > * { image-rendering: auto; }
/* 分頁格＝物品欄格子（內凹） */
.tab { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--slot); border: 0; cursor: pointer;
  color: #f4f4f4; font-size: 12px; text-shadow: 1px 1px 0 #373737;
  box-shadow:
    inset  var(--u)  var(--u) 0 0 var(--slot-dark),
    inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--panel-hi); }
.tab .ti { font-size: 20px; line-height: 1; }
/* 選中格：白色粗框（麥塊快捷欄語彙） */
.tab.active { outline: var(--bd) solid #ffffff; outline-offset: -1px; z-index: 1; color: #ffffa0; }
/* 中央凸起金格 */
.tab.addbtn { flex: 0 0 auto; background: none; box-shadow: none; }
.tab.addbtn .plus { width: 56px; height: 56px; margin-top: 0;  /* Q6 2026-08-17 Peter 選 A：原本 60x60＋上凸 18px，比其他格（min-height 56）大一圈。     改成 56 齊平、不上凸。*/
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #4a2f00; background: #e8b64a;
  box-shadow:
    inset var(--u) var(--u) 0 0 #fff0c0,
    inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 #8a5f16,
    0 0 0 var(--u) var(--black); }
.tab.addbtn:active .plus { transform: translateY(var(--u)); }

/* ---- Hero 月總覽（草地屋簷卡）---- */
.ovcard { position: relative; padding-top: 20px; overflow: hidden; }
.ovcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  background-image: var(--tex-grass); background-size: 48px 48px; image-rendering: pixelated;
  border-bottom: var(--u) solid var(--black); }
.ovtitle { font-size: 16px; color: var(--txt2); letter-spacing: .5px; font-weight: 700; }
.ovhero { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
.ovhero .big { font-size: 34px; color: var(--exp); letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.ovhero .cur { font-size: 13px; color: var(--txt2); }
.ovsub { display: flex; gap: var(--s3); margin-top: 6px; }
.ovsub .k { font-size: 14px; color: var(--txt2); }
.ovsub .v { font-size: 16px; font-variant-numeric: tabular-nums; }
.ovsub .v.inc { color: var(--inc); }

/* ---- 經驗條（XP bar）＝月預算進度：綠分段刻痕＋上緣高光；超支紅硬閃 ---- */
.barbg { position: relative; height: 16px; margin-top: 14px;
  background: #2e2e2e; border: var(--u) solid var(--black);
  box-shadow: inset 0 var(--u) 0 0 rgba(0,0,0,.6), 0 var(--u) 0 0 rgba(255,255,255,.35); overflow: hidden; }
.barfill { height: 100%; background-color: var(--xp);
  background-image:
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,0) 45%),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(0,0,0,.35) 16px 19px);
  transition: width .3s steps(8); }
.barfill.over { background-color: var(--danger); animation: xpblink 1.1s steps(1) infinite; }
@keyframes xpblink { 0%, 54% { background-color: var(--danger); } 55%, 100% { background-color: #e05a2b; } }
@media (prefers-reduced-motion: reduce) { .barfill.over { animation: none; } }
.budline { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.budline .muted { color: var(--xp-text); }

/* ---- P-B 分類預算設定（設定頁）：分類標籤＋右側上限輸入 ---- */
.cbudrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cbudrow .cbudlbl { flex: 1; font-size: 15px; }
.cbudrow .cbud { width: 120px; text-align: right; }
.cbudsave { margin-top: 12px; }
/* UIUX02 ⑥①：未設限 placeholder 降透明度（讓已填金額更凸顯）*/
.cbud::placeholder { opacity: .7; }
/* UIUX02 ⑥②：已填入金額＝加亮加粗（綠系，照支出=綠慣例；深底格上亮綠可讀）*/
.cbud.filled { color: var(--xp); font-weight: 700; }
/* UIUX02 ⑥③：分類預算卡標題列（標題＋「只顯示有設限」過濾開關）*/
.cbudhdr { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); flex-wrap: wrap; }
.cbudhdr .ovtitle { flex: 1 1 auto; }
.cbfilter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--txt2); cursor: pointer; }
.cbfilter input { width: 18px; height: 18px; }

/* ---- P-B 分類預算進度（圖表頁）：沿用經驗條 .barbg/.barfill；超支值文字 --danger ---- */
.catbudrow { margin-top: 12px; }
.catbudline { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.catbudlbl { font-size: 15px; }
.catbudval { font-size: 13px; color: var(--txt2); font-variant-numeric: tabular-nums; }
.catbudval.over { color: var(--danger); }

/* ---- 拍票上傳進度（沿用經驗條 .barbg/.barfill；分段：上傳中→AI辨識中→完成→去看看鈕/重拍鈕） ---- */
.upprog { margin-top: 10px; }
.upprog .barbg { margin-top: 6px; }
.upstep { font-size: 13px; color: var(--txt2); font-variant-numeric: tabular-nums; }
.upstep.err { color: var(--danger); }
.upgo { margin-top: 0; }        /* 進度條原地換鈕，貼齊不留多餘空隙 */
.upwarn { font-size: 13px; color: var(--danger); margin-top: 8px; }

/* ---- 愛心列（半顆制，CSS box-shadow 自繪）＝本月淨額健康度 ---- */
.hearts { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.heartrow { display: flex; gap: 6px; }
.heart { width: 21px; height: 18px; position: relative; }
.heart i { position: absolute; left: 0; top: 0; width: 3px; height: 3px; background: transparent; }
.heart.full i  { box-shadow:3px 0px 0 0 #d02a2a, 6px 0px 0 0 #d02a2a, 12px 0px 0 0 #d02a2a, 15px 0px 0 0 #d02a2a, 0px 3px 0 0 #d02a2a, 3px 3px 0 0 #ff7a6e, 6px 3px 0 0 #ff7a6e, 9px 3px 0 0 #d02a2a, 12px 3px 0 0 #d02a2a, 15px 3px 0 0 #d02a2a, 18px 3px 0 0 #d02a2a, 0px 6px 0 0 #d02a2a, 3px 6px 0 0 #d02a2a, 6px 6px 0 0 #d02a2a, 9px 6px 0 0 #d02a2a, 12px 6px 0 0 #d02a2a, 15px 6px 0 0 #d02a2a, 18px 6px 0 0 #d02a2a, 3px 9px 0 0 #d02a2a, 6px 9px 0 0 #d02a2a, 9px 9px 0 0 #d02a2a, 12px 9px 0 0 #d02a2a, 15px 9px 0 0 #d02a2a, 6px 12px 0 0 #d02a2a, 9px 12px 0 0 #d02a2a, 12px 12px 0 0 #d02a2a, 9px 15px 0 0 #d02a2a; }
.heart.half i  { box-shadow:3px 0px 0 0 #d02a2a, 6px 0px 0 0 #d02a2a, 12px 0px 0 0 #4a4a4a, 15px 0px 0 0 #4a4a4a, 0px 3px 0 0 #d02a2a, 3px 3px 0 0 #ff7a6e, 6px 3px 0 0 #ff7a6e, 9px 3px 0 0 #d02a2a, 12px 3px 0 0 #4a4a4a, 15px 3px 0 0 #4a4a4a, 18px 3px 0 0 #4a4a4a, 0px 6px 0 0 #d02a2a, 3px 6px 0 0 #d02a2a, 6px 6px 0 0 #d02a2a, 9px 6px 0 0 #d02a2a, 12px 6px 0 0 #4a4a4a, 15px 6px 0 0 #4a4a4a, 18px 6px 0 0 #4a4a4a, 3px 9px 0 0 #d02a2a, 6px 9px 0 0 #d02a2a, 9px 9px 0 0 #d02a2a, 12px 9px 0 0 #4a4a4a, 15px 9px 0 0 #4a4a4a, 6px 12px 0 0 #d02a2a, 9px 12px 0 0 #d02a2a, 12px 12px 0 0 #4a4a4a, 9px 15px 0 0 #d02a2a; }
.heart.empty i { box-shadow:3px 0px 0 0 #4a4a4a, 6px 0px 0 0 #4a4a4a, 12px 0px 0 0 #4a4a4a, 15px 0px 0 0 #4a4a4a, 0px 3px 0 0 #4a4a4a, 3px 3px 0 0 #4a4a4a, 6px 3px 0 0 #4a4a4a, 9px 3px 0 0 #4a4a4a, 12px 3px 0 0 #4a4a4a, 15px 3px 0 0 #4a4a4a, 18px 3px 0 0 #4a4a4a, 0px 6px 0 0 #4a4a4a, 3px 6px 0 0 #4a4a4a, 6px 6px 0 0 #4a4a4a, 9px 6px 0 0 #4a4a4a, 12px 6px 0 0 #4a4a4a, 15px 6px 0 0 #4a4a4a, 18px 6px 0 0 #4a4a4a, 3px 9px 0 0 #4a4a4a, 6px 9px 0 0 #4a4a4a, 9px 9px 0 0 #4a4a4a, 12px 9px 0 0 #4a4a4a, 15px 9px 0 0 #4a4a4a, 6px 12px 0 0 #4a4a4a, 9px 12px 0 0 #4a4a4a, 12px 12px 0 0 #4a4a4a, 9px 15px 0 0 #4a4a4a; }
.hearts .cap { font-size: 14px; color: var(--txt2); }

/* ---- 交易列表：木板告示牌列＋物品格圖示 ---- */
.txlist { margin: var(--s3) var(--s2) 0; display: flex; flex-direction: column; gap: var(--s1); }
.txrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 56px;
  background-image: var(--tex-planks); background-size: 64px 64px;
  border: var(--u) solid var(--black);
  box-shadow: inset 0 var(--u) 0 0 rgba(255,255,255,.22), inset 0 calc(-1 * var(--u)) 0 0 rgba(0,0,0,.28); }
.txrow > * { image-rendering: auto; }
/* 交易列品項圖示裝在物品格裡（內凹灰格） */
.txicon { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--slot);
  box-shadow: inset var(--u) var(--u) 0 0 var(--slot-dark), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--panel-hi); }
.txmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txitem { font-size: 16px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #4a3418; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txcat { font-size: 13px; color: #ffe9c4; text-shadow: 1px 1px 0 rgba(74,52,24,.8); }
.txmeta { text-align: right; display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.txamt { font-size: 18px; color: #b6f7a0; /* 支出=綠 */ text-shadow: 1px 1px 0 #4a3418; font-variant-numeric: tabular-nums; }
.txamt.income { color: #ffb3a6; } /* 收入=紅 */
.txdate { font-size: 12px; color: #ffe9c4; text-shadow: 1px 1px 0 rgba(74,52,24,.8); }

/* ---- chips / 最近常用：物品欄格子＋金額堆疊數字 ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 6px 0 10px; }
.chip { position: relative; min-width: 74px; padding: 10px 12px 14px; cursor: pointer;
  background: var(--slot); border: 0; color: var(--txt); font-size: 14px; text-align: left;
  box-shadow:
    inset  var(--u)  var(--u) 0 0 var(--slot-dark),
    inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--panel-hi); }
.chip:hover { background: #9d9d9d; }
.chip:active { transform: translate(0, var(--u)); }
.chip .chiplbl { color: #f0f0f0; text-shadow: 1px 1px 0 #373737; }
/* 金額＝物品堆疊數字（格內右下白字黑影，麥塊語彙） */
.chip .stack { position: absolute; right: 5px; bottom: 3px; font-size: 13px; line-height: 1;
  color: #ffffff; text-shadow: 1px 1px 0 #3f3f3f; font-variant-numeric: tabular-nums; }

/* ---- 待確認 / 通用列 ---- */
.banner { border-color: var(--gold);
  box-shadow: inset var(--bd) var(--bd) 0 0 var(--gold), inset calc(-1 * var(--bd)) calc(-1 * var(--bd)) 0 0 var(--panel-lo); }
.confirmcard .cbadge { font-size: 13px; color: var(--gold); margin-bottom: 6px; font-weight: 700; }
.confirmcard .row { margin-top: 10px; }
.confirmcard .row .btn { flex: 1; margin-top: 0; }
.setrow { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.setrow > span:first-child { color: var(--txt); font-weight: 700; }
.setrow:active { transform: translate(0, var(--u)); }

/* ---- 分段切換 / 庫存 / 週期 列 ---- */
.seg { display: flex; margin: var(--s3) var(--s2) 0; border: var(--u) solid var(--black); }
.segbtn { flex: 1; padding: 10px; cursor: pointer; border: 0;
  background: var(--slot); color: #f0f0f0; text-shadow: 1px 1px 0 #373737;
  box-shadow: inset var(--u) var(--u) 0 0 var(--slot-dark), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--panel-hi); }
.segbtn + .segbtn { border-left: var(--u) solid var(--black); }
.segbtn.active { background: #e8b64a; color: #4a2f00; text-shadow: none; }
.invlist { margin-top: var(--s1); }
/* UIUX02 ⑤：庫存新增表單手風琴觸發鈕（卡片同寬、石鈕；點擊展開/收合下方表單）*/
.accbtn { display: block; width: auto; margin: var(--s3) var(--s2) 0; }
/* 庫存列＝灰面板列（可讀深字），與交易木板列區隔 */
.invrow { display: flex; align-items: center; gap: 8px; padding: 9px 11px; margin: var(--s1) var(--s2) 0;
  background: var(--panel); border: var(--u) solid var(--black);
  box-shadow: inset var(--u) var(--u) 0 0 var(--panel-hi), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--panel-lo); }
.invthumb { width: 44px; height: 44px; object-fit: cover; flex: 0 0 auto;
  background: var(--slot); box-shadow: inset var(--u) var(--u) 0 0 var(--slot-dark), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--panel-hi); }
.invthumb.ph { display: flex; align-items: center; justify-content: center; font-size: 20px; }
.invmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invname { font-size: 18px; font-weight: 700; color: var(--txt); }   /* 2026-07-14 Peter：字太小，16→18 */
.invmeta { font-size: 15px; color: var(--txt2); }                    /* 2026-07-14 Peter：字太小，13→15 */
.invqtybox { display: flex; align-items: center; gap: var(--s1); }
/* 小方按鈕＝石頭鈕縮版 */
.qbtn { width: 44px; height: 44px; flex: 0 0 auto; cursor: pointer; font-size: 18px;
  color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.55);
  background-image: var(--tex-stone); background-size: 64px 64px;
  border: var(--u) solid var(--black);
  box-shadow: inset 0 var(--u) 0 0 rgba(255,255,255,.4), inset 0 calc(-1 * var(--u)) 0 0 rgba(0,0,0,.38); }
.qbtn:active { transform: translate(0, var(--u)); }
.invqty { min-width: 20px; text-align: center; font-size: 17px; color: var(--txt); font-variant-numeric: tabular-nums; }
/* 2026-07-14 修正：編輯鈕沿用 .btn 卻沒蓋掉 width:100%/min-height:44px 的整排大按鈕預設，
   在 .invrow 這種緊密 flex 列裡撐爆版面（Peter 抓到「字加大後版面大亂」，根因其實是這顆按鈕，
   不是字級本身）。改成跟 .qbtn 一樣的固定小方塊，不佔滿列寬。*/
.invedit { width: 44px; height: 44px; min-height: 0; flex: 0 0 auto; padding: 0; margin-top: 0; font-size: 16px; }
/* 2026-07-18 Peter「庫存有字擋住」：原單行 nowrap 硬截讓中文品名只剩 2~3 字＋徽章被吞——
   改最多兩行折行再截（line-clamp），右側按鈕群維持 44px 可點面積不縮；列高允許自然長高 */
.invname, .invmeta { overflow: hidden; text-overflow: ellipsis; white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }

/* ---- 庫存第一期（2026-07-18 Peter）：效期徽章＋照片牆＋詳情＋原圖燈箱 ---- */
.metaseg { display: inline-block; white-space: nowrap; margin-right: 10px; }   /* 折行只發生在單元之間，不拆「門檻 3 包」 */
.invexp { font-size: 15px; font-weight: 700; }
.invexp.expbad { color: #ff6b5e; }
.invexp.expwarn { color: #ffb84d; }
.invexp.expsoon { color: #ffe9a8; }
.invexp.expok { color: var(--txt2); font-weight: 400; }
.modeseg { margin-top: var(--s1); }
.invgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); margin: var(--s1) var(--s2) 0; }
.invtile { position: relative; padding: 0; cursor: pointer; text-align: left; overflow: hidden;
  background: var(--panel); border: var(--u) solid var(--black);
  box-shadow: inset var(--u) var(--u) 0 0 var(--panel-hi), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--panel-lo); }
.tileimg { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--slot); }
.invtile .tileimg.ph { display: flex; align-items: center; justify-content: center; font-size: 40px;
  box-shadow: inset var(--u) var(--u) 0 0 var(--slot-dark); }
.tileqty { position: absolute; top: 4px; right: 4px; min-width: 26px; text-align: center; padding: 1px 5px;
  font-size: 15px; font-weight: 700; color: #fff; background: rgba(0,0,0,.62); border: var(--u) solid var(--black); }
.tileexp { position: absolute; top: 4px; left: 4px; padding: 1px 5px; font-size: 13px; font-weight: 700;
  color: #fff; background: rgba(0,0,0,.62); border: var(--u) solid var(--black); }
.tileexp.expbad { background: rgba(170,30,20,.85); }
.tileexp.expwarn { background: rgba(190,110,10,.85); }
.tileexp.expsoon { background: rgba(120,90,10,.85); }
.tilename { padding: 4px 6px; font-size: 15px; font-weight: 700; color: var(--txt); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  min-height: 2.5em; }
/* 詳情浮層：半透明底＋置中卡（大照片＋原本的列＋關閉） */
.sheetov { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.66);
  display: flex; align-items: center; justify-content: center; padding: var(--s2); }
.sheetcard { width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; }
.sheetimg { display: block; width: 100%; max-height: 46vh; object-fit: contain; background: var(--slot); cursor: zoom-in; }
.sheetcard .sheetimg.ph { display: flex; align-items: center; justify-content: center; font-size: 64px; height: 30vh; }
.sheethint { text-align: center; margin: 4px 0; }
.sheetcard .invrow { margin: var(--s1) 0 0; }
.sheetcard .invthumb { display: none; }   /* 大照片已在上方，詳情列的小縮圖冗餘、藏掉騰位給文字 */
.sheetcard .invexp { white-space: nowrap; }
.sheetcard .btn { margin-top: var(--s1); }
/* 原圖燈箱：點任意處關閉 */
.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; }

/* ---- 全站體檢 2026-07-18（Peter「空白處過多＋挑未知問題」）---- */
/* 分類管理/週期性支出列密度收緊（.txlist 家族；庫存 .invlist 不受影響） */
.txlist .invrow { padding: 6px 9px; }
.txlist .invrow .invmain { gap: 0; }
/* 照片牆「＋ 新增」ghost 磚：虛線框、不搶實體磚視覺 */
.addtile { background: transparent; box-shadow: none; border: 2px dashed rgba(0,0,0,.4); }
.addtile .addph { background: transparent; box-shadow: none; color: var(--txt2); font-size: 44px; }
.addtile .addname { color: var(--txt2); text-align: center; }
/* 待確認卡快速分類列 */
.qcatrow { align-items: center; gap: var(--s1); }
.qcatlbl { flex: 0 0 auto; }
.qcat { flex: 1; min-height: 40px; }

/* ---- 統計（分類占比條＝沉底像素方塊填色）---- */
.sharerow { display: flex; align-items: center; gap: var(--s1); margin: 8px 0; }
.sharelbl { width: 100px; font-size: 15px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 2026-07-14 Peter：字太小，13→15；寬度92→100配合 */
/* 「這個月要注意」的提醒句（2026-08-21）：整句要能完整讀完，所以刻意**不**沿用 .sharelbl
   的定寬＋nowrap＋ellipsis——那是給分類名用的，套到句子上會把後半截吃掉。字級同 15px。 */
.insighttxt { flex: 1; min-width: 0; font-size: 15px; line-height: 1.55; color: var(--txt); word-break: break-word; }
.sharebar { flex: 1; height: 16px; background: #2e2e2e; border: var(--u) solid var(--black);
  box-shadow: inset 0 var(--u) 0 0 rgba(0,0,0,.6); overflow: hidden; }
.sharefill { height: 100%; }
.sharepct { width: 90px; text-align: right; font-size: 15px; color: var(--txt2); font-variant-numeric: tabular-nums; }   /* 2026-07-14 Peter：字太小，13→15；寬度84→90配合 */

/* ---- P-C 圖表分析報表中心（2026-07-10）---- */
/* 純 SVG 圖表：撐滿卡片寬、方角像素感 */
.card > svg { display: block; width: 100%; height: auto; margin-top: var(--s1); shape-rendering: crispEdges; }
.card > svg text { shape-rendering: auto; font-variant-numeric: tabular-nums; }
/* 圖表控制項（UIUX02 ④：拆 .statsbar，區間段切/月份導航就近綁定各受控卡）*/
.statsseg { margin: var(--s1) 0 0; }
.statscap { font-size: 12px; margin-top: 6px; }
/* 「淨值曲線」卡標題列：標題（左）＋ 區間段切（右）；窄螢幕自動換行 */
.statshdr { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); flex-wrap: wrap; }
.statshdr .ovtitle { flex: 1 1 auto; }
.statshdr .statsseg { margin: 0; flex: 0 0 auto; }
/* 月份導航下放到「逐日現金流」卡頂部：置中、與標題留間距 */
.statsmonth { margin-bottom: var(--s1); }
.statval { font-variant-numeric: tabular-nums; }
.statsloading { text-align: center; }
/* 色語圖例（分類趨勢/收支雙柱共用）*/
.catleg { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 4px; }
.legitem { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--txt2); }
.legdot { width: 12px; height: 12px; border: var(--u) solid var(--black); flex: none; }
.leglbl { line-height: 1; }

/* ---- 自由浮動返回連結（在泥土背景上，非面板內）：改亮色可讀 ---- */
.tabbody > div > .link { color: #ffe9a8; text-shadow: 1px 1px 0 #3f3f3f; }
.backrow { margin: var(--s2) var(--s2) 0; }
.backrow .link { color: #ffe9a8; text-shadow: 1px 1px 0 #3f3f3f; }

/* ============================================================
   P-A 帳戶本質重建（2026-07-10 約小伯[IT大隊長]）
   沿用既有設計系統變數，不引新資產、不動色票
   ============================================================ */

/* ---- 淨值 hero：正=紅／負=綠（Peter 2026-07-10「負的是綠色」，台股慣例；負號照顯不藏）---- */
.ovhero .big.networth { color: var(--inc); }
.ovhero .big.networth.neg { color: var(--exp); }
.ovsub .v.out { color: var(--exp); }   /* 負債/支出側＝綠（台股慣例） */

/* ---- 帳戶分區小標（資產箱／負債箱／交易流水）---- */
.secttl { margin: var(--s3) var(--s2) 0; font-size: 17px; font-weight: 700;
  color: #ffe9a8; text-shadow: 1px 1px 0 #3f3f3f;
  display: flex; justify-content: space-between; align-items: baseline; }
.secttl.debt { color: #ffb3a6; }
.secttl .sum { font-variant-numeric: tabular-nums; font-size: 15px; }
.secttl.txsec { color: #ffe9c4; }

/* ---- 儲物箱格陣（麥塊 chest 語彙，移植自畫面稿）---- */
.chestgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); margin: var(--s1) var(--s2) 0; }
/* 資產箱＝木箱（planks 材質） */
.chest { position: relative; min-height: 82px; padding: 8px 8px 22px; cursor: pointer; text-align: left;
  border: var(--u) solid var(--black); border-radius: 0;
  background-image: var(--tex-planks); background-size: 64px 64px; image-rendering: pixelated;
  box-shadow: inset 0 var(--u) 0 0 rgba(255,255,255,.25), inset 0 calc(-1*var(--u)) 0 0 rgba(0,0,0,.3); }
.chest > * { image-rendering: auto; }
/* 箱蓋橫閂＋鎖釦（麥塊儲物箱語彙）*/
.chest::before { content: ''; position: absolute; left: 0; right: 0; top: 26px; height: var(--u); background: rgba(0,0,0,.45); }
.chest::after { content: ''; position: absolute; left: 50%; top: 21px; width: 10px; height: 12px; margin-left: -5px;
  background: #8b8b8b; border: var(--u) solid var(--black); box-shadow: inset 1px 1px 0 0 #cfcfcf; }
.chest:active { transform: translate(0, var(--u)); }
.chest:hover { outline: var(--bd) solid #fff; outline-offset: -1px; }
.chest:focus-visible { outline: var(--bd) solid var(--gold-bright); outline-offset: -1px; }
.chesticon { font-size: 20px; line-height: 1; }
.chestname { display: block; margin-top: 16px; font-size: 14px; font-weight: 700;
  color: #fff; text-shadow: 1px 1px 0 #4a3418;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 餘額＝物品堆疊數字（右下白字黑影）*/
.cheststack { position: absolute; right: 5px; bottom: 4px; font-size: 14px; line-height: 1;
  color: #ffffff; text-shadow: 1px 1px 0 #3f3f3f; font-variant-numeric: tabular-nums; }
/* 負債箱＝下界紅箱 */
.chest.debt { background-color: #7a1f1f; background-blend-mode: multiply; }
.chest.debt .chestname { text-shadow: 1px 1px 0 #4a0f0f; }
.chest.debt .cheststack { text-shadow: 1px 1px 0 #4a0f0f; }
.chest.debt::after { background: #b05555; }

/* ---- 單帳戶頁：餘額走勢（純 SVG 自繪、無 CDN）---- */
.trend { margin-top: var(--s2); background: #2e2e2e; border: var(--u) solid var(--black);
  box-shadow: inset 0 var(--u) 0 0 rgba(0,0,0,.6); padding: 6px; }
.trend svg { display: block; width: 100%; height: 72px; }

/* ---- ＋記帳分頁標頭 ---- */
.addhdr h2 { color: var(--txt2); }

/* ============================================================
   ⑥ 分頁材質世界觀（T-記帳材質多樣化 2026-07-11 約小伯[IT大隊長]）
   治「全站同一泥土背景、畫面都長一樣」：每分頁一個全幅材質世界觀。
   手法：.tabbody 鋪全幅自繪材質（覆蓋 body 泥土）＋各自標誌橫帶＋世界觀點綴；
   卡片內部灰面板一律不動（保 WCAG 對比不回退，深底文字靠既有亮色＋陰影）。
   ①📖帳本=圖書館(橡木地板) ②👛錢包=礦坑寶庫(深板岩+金礦) ③＋記帳=工作台(草原+格紋)
   ④📊圖表=附魔台(黑曜石+紫光) ⑤⋯更多=儲物室(石磚+木箱)
   ============================================================ */
/* 全幅材質底：tabbody 自身像素化（reset 規則已排除 .tabbody，此處生效不被抹平）；
   min-height 確保內容少時材質仍鋪滿視窗 */
.tabbody { position: relative; background-size: 64px 64px; image-rendering: pixelated;
  min-height: calc(100vh - 116px); }
/* 頂部標誌橫帶（各世界觀在下方各自覆材質）*/
.tabbody::before { content: ''; display: block; height: 14px; margin: var(--s2) var(--s2) 0;
  border: var(--u) solid var(--black); image-rendering: pixelated; }

/* ①📖 帳本＝圖書館：橡木地板全幅；交易列＝書架（金木書脊邊）；羊皮紙感標籤 */
.skin-ledger { background-color: #6e5028; background-image: var(--tex-oak-floor); }
.skin-ledger::before { background-image: var(--tex-oak-floor); background-size: 48px 48px; }
/* 亮橡木上浮動標籤改深棕＋淺暈，保對比（其餘卡內文字不受影響）*/
.skin-ledger .secttl, .skin-ledger .ymlabel { color: #3f2d15; text-shadow: 1px 1px 0 rgba(255,240,205,.65); }
/* 交易木列＝書架上的書：加金木書脊左邊 */
.skin-ledger .txrow { border-left: var(--bd) solid #c9a86a; }

/* ②👛 錢包＝礦坑寶庫：深板岩全幅；金礦石點綴橫帶；資產箱維持木箱(.chest 不動) */
.skin-wallet { background-color: #2b2b31; background-image: var(--tex-deepslate); }
.skin-wallet::before { background-image: var(--tex-gold-ore); background-size: 32px 32px; }
.walletHdr h2 { color: var(--txt2); }

/* ③＋ 記帳＝工作台：草原全幅；輸入區工作台格紋（addform 標頭條）*/
.skin-add { background-color: #4e7a34; background-image: var(--tex-meadow); }
.skin-add::before { background-image: var(--tex-crafting); background-size: 48px 48px; }
.skin-add .addform { position: relative; padding-top: calc(var(--s3) + 12px); overflow: hidden; }
.skin-add .addform::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  background-image: var(--tex-crafting); background-size: 32px 32px; image-rendering: pixelated;
  border-bottom: var(--u) solid var(--black); }
.skin-add .addform > * { image-rendering: auto; }

/* ④📊 圖表＝附魔台：黑曜石全幅；卡片附魔紫光邊 */
.skin-stats { background-color: #14101f; background-image: var(--tex-obsidian); }
.skin-stats::before { background-image: var(--tex-obsidian); background-size: 48px 48px; }
.skin-stats .card { box-shadow:
    inset var(--bd) var(--bd) 0 0 var(--panel-hi),
    inset calc(-1 * var(--bd)) calc(-1 * var(--bd)) 0 0 var(--panel-lo),
    0 0 0 var(--u) var(--tip-border), 0 0 12px 2px rgba(124, 77, 255, .5); }

/* ⑤⋯ 更多＝儲物室：石磚全幅；列表項木桶/箱子感（木質左閂）*/
.skin-more { background-color: #7f7f7f; background-image: var(--tex-stone-bricks); }
.skin-more::before { background-image: var(--tex-stone-bricks); background-size: 48px 48px; }
.skin-more .setrow { position: relative; padding-left: calc(var(--s3) + 12px); }
.skin-more .setrow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background-image: var(--tex-planks); background-size: 24px 24px; image-rendering: pixelated;
  border-right: var(--u) solid var(--black); }

/* ---- 更多分頁下的次頁（待確認/庫存/設定）：各給全幅材質，不回退泥土同質 ---- */
/* 待確認＝告示牌牆：木板全幅＋卡片鑲金邊＋圖釘 */
.skin-confirm { background-color: #6e5230; background-image: var(--tex-planks); }
.skin-confirm::before { background: #e8b64a;
  box-shadow: inset 0 var(--u) 0 0 #fff0c0, inset 0 calc(-1*var(--u)) 0 0 #8a5f16; }
.skin-confirm .card { position: relative; border-color: var(--gold);
  box-shadow: inset var(--bd) var(--bd) 0 0 var(--gold), inset calc(-1*var(--bd)) calc(-1*var(--bd)) 0 0 #8a5f16; }
.skin-confirm .card::after { content: '📌'; position: absolute; top: -9px; left: 50%; margin-left: -9px; font-size: 15px; }
/* 庫存＝儲物室石磚（與「更多」同世界觀）＋分段鈕加重 */
.skin-inventory { background-color: #7f7f7f; background-image: var(--tex-stone-bricks); }
.skin-inventory::before { background-image: var(--tex-stone-bricks); background-size: 48px 48px; }
.skin-inventory .seg { box-shadow: inset 0 0 0 var(--u) var(--slot-dark); }
/* 設定＝石質工作台：石紋全幅＋卡片石質屋簷 */
.skin-settings { background-color: #757575; background-image: var(--tex-stone); }
.skin-settings::before { background-image: var(--tex-stone); background-size: 48px 48px; }
.skin-settings .card { position: relative; padding-top: calc(var(--s3) + 10px); overflow: hidden; }
.skin-settings .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background-image: var(--tex-stone); background-size: 48px 48px; image-rendering: pixelated;
  border-bottom: var(--u) solid var(--black); }
.skin-settings .card > * { image-rendering: auto; }

/* ============================================================
   P-D 資料可信（2026-07-10 約小伯[IT大隊長]）
   編輯/刪除視圖、帳本搜尋＋月份切換——沿用既有設計系統變數
   ============================================================ */

/* ---- 帳本流水控制列：月份切換 ◀ YYYY-MM ▶ ＋ 搜尋框 ---- */
.ledgerctrl { margin: var(--s1) var(--s2) 0; }
.monthrow { display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.ymlabel { min-width: 96px; text-align: center; font-size: 17px; font-weight: 700;
  color: #ffe9a8; text-shadow: 1px 1px 0 #3f3f3f; font-variant-numeric: tabular-nums; }
/* 月份箭頭＝石頭鈕縮版（同 .qbtn 語彙） */
.monthnav { width: 44px; height: 40px; flex: 0 0 auto; cursor: pointer; font-size: 16px;
  color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.55);
  background-image: var(--tex-stone); background-size: 64px 64px;
  border: var(--u) solid var(--black);
  box-shadow: inset 0 var(--u) 0 0 rgba(255,255,255,.4), inset 0 calc(-1 * var(--u)) 0 0 rgba(0,0,0,.38); }
.monthnav:active { transform: translate(0, var(--u)); }
.monthnav:hover { outline: var(--bd) solid #fff; outline-offset: -1px; }
.ledgerctrl .fld { margin-top: var(--s1); }
/* type=search 的原生清除鈕在深底看不清，統一外觀 */
.ledgerctrl input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ============================================================
   拆帳＋UI 結構重構（2026-07-10 約小伯[IT大隊長]）
   四分頁徽章／拆帳群組卡／新分頁材質帶——沿用既有設計系統變數
   ============================================================ */

/* ---- 底部分頁徽章＝物品堆疊紅數字（麥塊語彙）：更多分頁待確認未讀數 ---- */
.tabbar .tab { position: relative; }
.tabbadge { position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: #fff; text-shadow: 1px 1px 0 #4a0f0f;
  background: var(--danger); border: var(--u) solid var(--black);
  box-shadow: inset 1px 1px 0 0 rgba(255,255,255,.35); font-variant-numeric: tabular-nums; }
/* 更多頁選單列右側的行內徽章 */
.morert { display: flex; align-items: center; gap: var(--s1); }
.tabbadge.inline { position: static; }

/* ---- 拆帳群組卡（一拍多筆）：告示牌感標頭＋逐項列 ---- */
.grpcard .grphdr { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1);
  margin: 4px 0 8px; flex-wrap: wrap; }
.grpstore { font-size: 16px; font-weight: 700; color: var(--txt); }
.grptotal { font-size: 16px; font-weight: 700; color: var(--exp); font-variant-numeric: tabular-nums; }
.grplines { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
/* 逐項列＝內凹灰格列，可點入編輯 */
.grpline { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer;
  background: var(--slot); border: var(--u) solid var(--black);
  box-shadow: inset var(--u) var(--u) 0 0 var(--slot-dark), inset calc(-1*var(--u)) calc(-1*var(--u)) 0 0 var(--panel-hi); }
.grpline:hover { outline: var(--u) solid var(--gold-bright); outline-offset: -2px; }
.grpline:active { transform: translate(0, 1px); }
.grpline:focus-visible { outline: var(--bd) solid var(--gold-bright); outline-offset: -1px; }
.grpicon { width: 28px; height: 28px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.grplbl { flex: 1; min-width: 0; font-size: 15px; color: #f0f0f0; text-shadow: 1px 1px 0 #373737;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grpamt { font-size: 16px; color: #b6f7a0; text-shadow: 1px 1px 0 #373737; font-variant-numeric: tabular-nums; }

/* （舊「新分頁材質帶」錢包金橫帶/圖表石板/更多泥土 已由上方 ⑥ 全幅世界觀系統取代，2026-07-11）*/

/* ---- 交易列可點入編輯：游標＋hover 高光提示可互動 ---- */
.txrow.tapedit { cursor: pointer; }
.txrow.tapedit:hover { outline: var(--u) solid var(--gold-bright); outline-offset: -2px; }
.txrow.tapedit:active { transform: translate(0, 1px); }
.txrow.tapedit:focus-visible { outline: var(--bd) solid var(--gold-bright); outline-offset: -1px; }

/* ---- 編輯視圖：刪除鈕（兩段式，比照 ops task-delete）---- */
.delrow { margin-top: var(--s3); }
.btn.del { background-image: none; background-color: #6b2020; color: #ffd9d2;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
.btn.del:hover { color: #fff; outline-color: #ffb3a6; }
/* armed＝已進入確認狀態（第一次點）：整鈕轉超支紅硬閃，提示「再按一次才真刪」 */
.btn.del.armed { background-color: var(--danger); color: #fff;
  animation: xpblink 1.1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .btn.del.armed { animation: none; } }

/* ---- P-E 進階：逐品項手動拆分視圖 ---- */
.splitentry { margin-top: var(--s2); }                 /* 編輯視圖「✂️ 拆分這筆」入口列 */
.splithead { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s1); margin-bottom: var(--s1); flex-wrap: wrap; }
.splithead .splititem { font-weight: 700; color: var(--txt); overflow-wrap: anywhere; min-width: 0; }
.splithead .splitorig { color: var(--txt2); font-size: 14px; white-space: nowrap; }
/* 即時分配進度：分滿=經驗綠字、超過=超支紅字（不套收支語意色，避免與帳本綠紅混淆） */
.splitprog { display: flex; justify-content: space-between; gap: var(--s1);
  padding: var(--s1) var(--s2); margin-bottom: var(--s2);
  background: var(--slot); border: var(--u) solid var(--black);
  box-shadow: inset var(--u) var(--u) 0 0 var(--slot-dark); color: #e8e8e8; font-size: 14px; }
.splitprog .splithint { white-space: nowrap; }
.splitprog.ok .splithint { color: var(--xp); font-weight: 700; }
.splitprog.over .splithint { color: #ff9a8a; font-weight: 700; }
.splitrow { margin-bottom: var(--s2); padding-bottom: var(--s1);
  border-bottom: var(--u) dashed var(--panel-lo); }
.splitrow .row { margin-top: 0; }
.splitrow .row + .row { margin-top: var(--s1); }
.btn.splitdel { flex: 0 0 auto; width: auto; margin-top: 0; padding: 11px 14px;
  background-color: #6b2020; color: #ffd9d2; }

/* ============================================================
   T-記帳UI03 帳本三連＋錢包資產負債分箱（2026-07-17 約小伯[IT大隊長]）
   全沿用既有設計系統變數（麥塊灰面板/像素框/大地語意色），無自創視覺變體
   ============================================================ */

/* ---- 1-2 分類預算滑條（月總覽卡下方）：一次一條全寬、左右滑切換分類（輪播式）——
   Peter 2026-07-17 指正「需要是一行，可以左右滑，現在是都秀出來」；snap mandatory＝每滑必停整條 ---- */
.catbudstripwrap { margin: var(--s1) var(--s2) 0; }
.catbudempty { margin: var(--s1) 0 0; }
.catbudstrip { display: flex; gap: var(--s1); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.catbudstrip::-webkit-scrollbar { display: none; }
/* 一卡＝全寬一條預算（同物品欄格語彙）；flex 0 0 100% → 畫面上永遠只有一條，滑動換分類 */
.catbudmini { scroll-snap-align: center; flex: 0 0 100%; width: auto; padding: var(--s1) 10px;
  background: var(--panel); border: var(--u) solid var(--black);
  box-shadow: inset var(--u) var(--u) 0 0 var(--panel-hi), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--panel-lo); }
.catbudmini.over { outline: var(--u) solid var(--danger); outline-offset: -3px; }
.cbmlbl { font-size: 15px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; justify-content: space-between; align-items: baseline; }
.cbmidx { font-size: 12px; color: var(--txt2); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 4px; }                               /* 位置指示 ‹ i/N › */
.cbmnav { font-size: 14px; line-height: 1; padding: 1px 7px; cursor: pointer; color: var(--txt);
  background: var(--panel-hi); border: var(--u) solid var(--black);
  box-shadow: inset var(--u) var(--u) 0 0 rgba(255,255,255,.4); }                      /* 電腦版可點切換（手機也能點）*/
.cbmnav:active { background: var(--panel-lo); }
/* 分類管理列的本月進度（Peter 2026-07-17）：沿用輪播語彙，條矮一階塞進列內 */
.catmgprog { margin-top: 4px; width: 100%; }
.catmgprog .barbg { height: 10px; margin-top: 2px; }
.cbmval { font-size: 13px; color: var(--txt2); font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.catbudmini .barbg { margin-top: 4px; height: 12px; }
.cbmpct { font-size: 12px; color: var(--txt2); font-variant-numeric: tabular-nums; margin-top: 3px; }
.cbmpct.over { color: var(--danger); font-weight: 700; }
/* T-記帳UI04 ②：未設預算小卡——視覺淡一階但仍可讀（已用金額＋空進度槽），與有設卡並列可滑動 */
.catbudmini.unset { opacity: .82; }
.catbudmini.unset .cbmlbl { color: var(--txt2); }

/* ---- 1-1 檢視切換段控件：沿用 .seg/.segbtn，僅補間距 ---- */
.seg.ledgerview { margin: var(--s1) var(--s2) 0; }

/* ---- 1-3 日期群組：組頭＝羊皮紙告示條（可點展開收合，無當日小計）＋群組列容器 ---- */
.daygroup { margin: var(--s1) var(--s2) 0; }
.daygrphdr { display: flex; align-items: center; gap: var(--s1); padding: 6px 10px; cursor: pointer;
  background: var(--slot); border: var(--u) solid var(--black);
  box-shadow: inset var(--u) var(--u) 0 0 var(--slot-dark), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--panel-hi); }
.daygrphdr:hover { outline: var(--u) solid var(--gold-bright); outline-offset: -2px; }
.daygrphdr:focus-visible { outline: var(--bd) solid var(--gold-bright); outline-offset: -1px; }
.daygrparw { width: 16px; flex: 0 0 auto; text-align: center; color: #ffe9a8; text-shadow: 1px 1px 0 #373737; }
.daygrpdate { flex: 1; font-size: 15px; font-weight: 700; color: #f0f0f0; text-shadow: 1px 1px 0 #373737;
  font-variant-numeric: tabular-nums; }
.daygrprows { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s1); }
.daygrprows:empty { margin-top: 0; }
/* 群組內交易列去掉 .txlist 的整體邊距（改由 .daygroup 統一負責，避免雙重縮排） */
.daygrprows .txrow { margin: 0; }

/* ---- 1-1 日曆（T-記帳UI04 ① 重設計）：整個日曆包進 .calcard 灰木卡；星期列＝grid 第一列深槽底置中、
   週末暖橘；日格正方、日數 15px 置中偏上、當天 gold 外框常駐、選中日白框；有交易日金木格＋右下綠 chip ---- */
.calcard { position: relative; }                                        /* .card 已給 padding/margin；下方歸零內部邊距 */
.calcard .calgrid { margin: 0; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: var(--s1) var(--s2) 0; }
/* 星期列：深色槽底整條（每格填 var(--slot) 內凹）、置中、14px 粗體 #ffe9a8；週末（日/六）暖橘區別 */
.calwk { display: flex; align-items: center; justify-content: center; min-height: 26px;
  font-size: 14px; font-weight: 700; color: #ffe9a8; text-shadow: 1px 1px 0 #373737;
  background: var(--slot);
  box-shadow: inset var(--u) var(--u) 0 0 var(--slot-dark), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--panel-hi); }
.calwk.wkend { color: #f2a65a; }                                        /* 週末暖橘（大地色系，深槽底上可讀） */
.calcell { position: relative; aspect-ratio: 1 / 1; min-height: 40px; padding: 3px; border: var(--u) solid var(--black);
  background: var(--slot); color: #d7d7d7; cursor: default;
  box-shadow: inset var(--u) var(--u) 0 0 var(--slot-dark), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 var(--panel-hi);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }   /* 置中偏上 */
.calcell.blank { background: transparent; border-color: transparent; box-shadow: none; }
.calcell .calday { font-size: 15px; font-weight: 700; line-height: 1; margin-top: 1px; font-variant-numeric: tabular-nums; }
/* 有交易的日：可點＝金木格＋游標手指 */
.calcell.has { cursor: pointer; background: #e8b64a; color: #4a2f00;
  box-shadow: inset var(--u) var(--u) 0 0 #fff0c0, inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 0 #8a5f16; }
.calcell.has:hover { outline: var(--bd) solid #fff; outline-offset: -1px; }
.calcell.today { outline: var(--bd) solid var(--gold-bright); outline-offset: -1px; z-index: 1; }   /* 當天常駐金框 */
.calcell.sel { outline: var(--bd) solid #ffffff; outline-offset: -1px; z-index: 2; }                /* 選中白框（勝過當天） */
.calcell:focus-visible { outline: var(--bd) solid var(--gold-bright); outline-offset: -1px; }
/* 交易標記：點（單筆）或小數字（多筆），沉在格右下角＝深綠支出感圓標（UI04：chip ≥16px、字 11px） */
.caldot { position: absolute; right: 3px; bottom: 2px; min-width: 16px; height: 16px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1;
  color: #fff; background: var(--exp); border: 1px solid var(--black); font-variant-numeric: tabular-nums; }
.caldot:empty { min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 0; }
/* 明細標頭與月曆格之間的像素分隔線（暗線＋下緣微高光） */
.caldivider { height: var(--u); margin: var(--s2) 0 0; background: var(--slot-dark);
  box-shadow: 0 var(--u) 0 0 rgba(255,255,255,.25); }
.caldaylist { margin-top: var(--s1); display: flex; flex-direction: column; gap: var(--s1); }
.caldaylist .secttl.caldayttl { margin: var(--s1) 0 0; }                /* 卡內標頭：去掉 secttl 外側邊距 */
.calhint { margin: var(--s2) 0 0; text-align: center; }                 /* 卡內提示：只留上邊距 */

/* ---- 2-1/2-2 錢包 subtype 分組：小標（icon＋名稱＋小計）＋該組箱格陣 ---- */
.subgrp { margin-top: var(--s1); }
.subgrphdr { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1);
  margin: var(--s1) var(--s2) 0; }
.subgrplbl { font-size: 15px; font-weight: 700; color: #ffe9c4; text-shadow: 1px 1px 0 #3f3f3f; }
.subgrphdr.debt .subgrplbl { color: #ffb3a6; }
.subgrpsum { font-size: 14px; color: #d7d7d7; text-shadow: 1px 1px 0 #2a2a2a; font-variant-numeric: tabular-nums; }

/* 更多頁頁尾一行簡易說明（2026-07-18 Peter：大說明卡撤掉降級到底部；v55 補對比——灰字壓木紋隱形） */
.morehint { text-align: center; font-size: 14px; margin: var(--s2) var(--s2); padding: 5px 8px;
  color: #e8e8e8; background: rgba(0,0,0,.5); border: var(--u) solid var(--black); }
/* 分類管理群組標題（v54 加、v55 補對比——淡字壓石磚看不清）：深色底條＋亮字 */
.catgrp { margin: var(--s2) var(--s2) 0; padding: 6px 10px; font-size: 16px; font-weight: 700;
  color: #ffe9a8; background: rgba(0,0,0,.55); border: var(--u) solid var(--black);
  text-shadow: 1px 1px 0 rgba(0,0,0,.8); }
/* 空狀態提示：裸字壓材質底看不清（v55，與 morehint 同病灶）——深色底條 */
.emptyhint { margin: var(--s2) var(--s2); padding: 8px 10px; text-align: center;
  color: #e8e8e8; background: rgba(0,0,0,.5); border: var(--u) solid var(--black); }

/* ---- 待確認三分區標頭（C 案 2026-08-18，Peter 令「做成比現在好用的」）---- */
/* 三種性質混在一長串清單＝每張卡都要重新判斷「這張要我做什麼」；分區後同區動作一致。 */
.secthdr { padding: 10px var(--s2); }
.secthdr .secttitle { color: var(--gold); font-weight: 700; font-size: 16px; }
.secthdr .muted { margin-top: 4px; font-size: 13px; line-height: 1.55; }
/* 清單內部撞號（同日+同額+同帳戶）：批次一鍵下去就是帳目虛增，所以用超支紅＋粗體 */
.dupselfwarn { color: var(--danger); font-weight: 700; line-height: 1.5; }