/* MY MONEY V6.13.0 — Sage Noir Design System
   載入於原版樣式之後，只覆寫外觀；原版的版面機制（.hidden、.screen、dialog、表單）保持不變。 */
:root {
  color-scheme: dark;
  --sn-bg: #0D1114; --sn-bg2: #12181C; --sn-card: #252A26;
  --sn-sage: #91AA93; --sn-sage-d: #566E5D; --sn-sage-ink: #102016;
  --sn-ink: #E3EAE1; --sn-ink2: #B7BFBB; --sn-ink3: #8D9792;
  --sn-inc: #8FC7A3; --sn-exp: #D98F8F; --sn-warn: #D5B06A;
  --sn-glass: linear-gradient(180deg, rgba(205, 228, 210, .085) 0%, rgba(160, 190, 168, .045) 38%, rgba(120, 150, 128, .035) 100%);
  --sn-glass2: linear-gradient(180deg, rgba(220, 238, 224, .11) 0%, rgba(170, 196, 176, .06) 100%);
  --sn-tint: rgba(28, 37, 35, .62);
  --sn-edge: rgba(210, 232, 214, .12); --sn-edge-hi: rgba(235, 245, 236, .2); --sn-sage-edge: rgba(160, 192, 164, .36);
  --sn-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 14px 34px rgba(0, 0, 0, .42), 0 2px 6px rgba(0, 0, 0, .25);
  --sn-blur: blur(16px) saturate(130%);
  --sn-nav-h: 76px; --sn-safe-b: env(safe-area-inset-bottom, 0px);
  --ink: var(--sn-ink); --ink2: var(--sn-ink2); --muted: var(--sn-ink2); --green: var(--sn-inc); --red: var(--sn-exp); --line: rgba(210, 232, 214, .1);
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
}
html { background: var(--sn-bg); }
body { background: transparent !important; color: var(--sn-ink); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.sn-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(85% 38% at 18% -4%, rgba(84, 116, 94, .42), transparent 72%),
  radial-gradient(60% 34% at 100% 30%, rgba(70, 98, 82, .22), transparent 70%),
  radial-gradient(70% 40% at 0% 78%, rgba(58, 84, 70, .2), transparent 70%),
  radial-gradient(80% 30% at 60% 108%, rgba(80, 110, 92, .22), transparent 70%),
  linear-gradient(180deg, #111A1A 0%, #0E1416 42%, #0C1113 100%); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--sn-sage) !important; outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sn-ico { width: 22px; height: 22px; flex: none; }

/* ---------- 版面 ---------- */
.app { max-width: 1180px; padding: env(safe-area-inset-top, 0px) 14px calc(var(--sn-nav-h) + var(--sn-safe-b) + 24px); }
.head { display: none; }
.cloud-appbar { margin: 8px 0 4px; padding: 6px 12px; min-height: 36px; border-radius: 999px; font-size: 12px; background: rgba(143, 199, 163, .08); border: 1px solid rgba(143, 199, 163, .22); color: var(--sn-ink2); }
.cloud-appbar[data-state="pending"] { background: rgba(213, 176, 106, .1); border-color: rgba(213, 176, 106, .35); color: #E8CD93; }
.cloud-appbar[data-state="error"] { background: rgba(217, 143, 143, .12); border-color: rgba(217, 143, 143, .4); color: #F0B3B3; }
.cloud-appbar button { color: inherit; min-height: 36px; }

/* 頁首：標題置中 */
.sn-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 60px; margin: 0 0 6px; }
.sn-top h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: .06em; text-align: center; }
.sn-top-act { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.sn-top-home { grid-template-columns: 1fr auto; min-height: 72px; }
.sn-top-home h1 { text-align: left; font-size: 25px; letter-spacing: .04em; }
.sn-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--sn-ink2); }
.sn-ibtn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--sn-ink); }
.sn-ibtn:hover { background: rgba(227, 234, 225, .07); }

/* ---------- 底部導覽：首頁｜明細｜記一筆｜投資｜設定 ---------- */
.nav { background: linear-gradient(180deg, rgba(30, 40, 38, .72), rgba(14, 20, 21, .92)) !important; -webkit-backdrop-filter: var(--sn-blur); backdrop-filter: var(--sn-blur); border-top: 1px solid var(--sn-edge) !important; box-shadow: 0 -10px 28px rgba(0, 0, 0, .35); padding: 0 max(4px, env(safe-area-inset-left)) var(--sn-safe-b) max(4px, env(safe-area-inset-right)) !important; }
.navinner { max-width: 640px; gap: 0; align-items: end; }
.sn-brand, .sn-nav-foot { display: none; }
.navbtn { min-height: var(--sn-nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px 0 !important; border-radius: 12px; color: var(--sn-ink2) !important; font-size: 12px !important; font-weight: 500 !important; background: none !important; }
.navbtn .sn-nico { display: grid !important; place-items: center; margin: 0 !important; font-size: inherit !important; }
.navbtn .sn-nico svg { width: 25px; height: 25px; }
.navbtn.active { color: #F2F6F1 !important; font-weight: 800 !important; }
.navbtn.active .sn-nico svg { stroke-width: 2.1; }
.sn-nav-add .sn-nico { width: 54px; height: 54px; margin-top: -14px !important; border-radius: 50%; color: var(--sn-sage-ink);
  background: radial-gradient(130% 120% at 30% 15%, #C5D6C6 0%, #9FB7A1 38%, #7F9A82 75%, #6E8A72 100%);
  box-shadow: 0 0 0 5px rgba(13, 18, 19, .92), 0 0 0 6px rgba(160, 192, 164, .22), 0 10px 24px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -2px 4px rgba(40, 60, 45, .35); }
.sn-nav-add .sn-nico svg { width: 28px; height: 28px; stroke-width: 2.4 !important; }
@media (min-width: 768px) {
  .app { padding: 12px 28px 40px 124px; }
  .nav { top: 0; right: auto; width: 96px; height: 100vh; border-top: 0 !important; border-right: 1px solid var(--sn-edge); box-shadow: none; padding: 20px 10px !important; }
  .navinner { display: flex; flex-direction: column; align-items: stretch; gap: 8px; height: 100%; }
  .navbtn { min-height: 66px; padding: 0 !important; }
  .navbtn.active:not(.sn-nav-add) { background: rgba(160, 192, 164, .12) !important; box-shadow: inset 0 0 0 1px var(--sn-edge); }
  .sn-nav-add .sn-nico { width: 46px; height: 46px; margin: 0 !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px 1px rgba(255, 255, 255, .5); }
  .toast { bottom: 24px !important; }
}
@media (min-width: 1200px) {
  .app { padding-left: 276px; }
  .nav { width: 236px; padding: 26px 14px !important; }
  .sn-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 24px; font-weight: 800; letter-spacing: .16em; font-size: 15px; }
  .sn-brand i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; font-style: normal; background: linear-gradient(145deg, #B5CAB6, #6E8A72); color: var(--sn-sage-ink); }
  .navbtn { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 50px; padding: 0 14px !important; font-size: 16px !important; }
  .sn-nav-add { background: linear-gradient(180deg, #A9BFAB, #7F9A82) !important; color: var(--sn-sage-ink) !important; font-weight: 800 !important; margin: 6px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 20px rgba(0, 0, 0, .35); }
  .sn-nav-add .sn-nico { width: 24px; height: 24px; background: none; box-shadow: none; color: inherit; }
  .sn-nav-foot { display: flex; margin-top: auto; padding: 12px; color: var(--sn-ink2); font-size: 12px; }
}

/* ---------- 共用表面 ---------- */
.card, .bookcard, .install-summary-btn, .cloud-tool, .stat, .install-plan, .install-invoice, .account-detail, .reconcile-result, .sn-tile, .sn-group, .cloud-panel {
  position: relative; background: var(--sn-glass), var(--sn-tint) !important; color: var(--sn-ink); border: 1px solid var(--sn-edge) !important; border-radius: 20px; box-shadow: var(--sn-shadow); -webkit-backdrop-filter: var(--sn-blur); backdrop-filter: var(--sn-blur); }
.card { padding: 14px 16px; }
.card .card { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.card[style*="background:#f5f9f6"] { background: var(--sn-glass2) !important; }
.sn-lite .card, .sn-lite .bookcard, .sn-lite .install-summary-btn, .sn-lite .cloud-tool, .sn-lite .sn-tile, .sn-lite .sn-group, .sn-lite .nav, .sn-lite .hero { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.sn-lite .card, .sn-lite .sn-tile, .sn-lite .sn-group, .sn-lite .bookcard, .sn-lite .install-summary-btn { background: linear-gradient(180deg, #243029, #1C2522) !important; }
.sectiontop { margin: 20px 2px 10px; }
.sectiontop h2 { font-size: 17px; font-weight: 700; color: var(--sn-ink); }
.sub, .sm, .fine, .hint, .booklabel, .txmeta, .acctname, .account-hint, .savings-item-meta, .install-hint { color: var(--sn-ink2) !important; }
.fine { font-size: 12.5px; }
.eyebrow { color: var(--sn-ink2); }
.chip, .badge, .cat-pill { background: rgba(145, 170, 147, .14) !important; color: #CFE0D1 !important; border: 1px solid var(--sn-sage-edge); }
.badge.warn { background: rgba(213, 176, 106, .16) !important; color: #EBCB8B !important; border-color: rgba(213, 176, 106, .45); }
.note, .install-hint, .cloud-status { background: rgba(145, 170, 147, .08) !important; color: var(--sn-ink2) !important; border: 1px solid var(--sn-edge); }
.warning, .cloud-alert, .cloud-bad { background: rgba(213, 176, 106, .1) !important; color: #EBCB8B !important; border: 1px solid rgba(213, 176, 106, .35) !important; }
.pos { color: var(--sn-inc) !important; } .neg { color: var(--sn-exp) !important; }
.sep { border-top-color: var(--sn-edge) !important; }
.empty { color: var(--sn-ink2); }

/* ---------- 按鈕 ---------- */
.primary { min-height: 52px; border-radius: 999px !important; border: 1px solid rgba(220, 236, 222, .45) !important; color: #13211A !important; font-weight: 800 !important; font-size: 17px !important; letter-spacing: .03em;
  background: linear-gradient(180deg, #B3C7B4 0%, #97AF99 48%, #7F9A82 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 4px rgba(40, 62, 46, .28), 0 8px 22px rgba(0, 0, 0, .38); }
.primary:disabled { opacity: 1 !important; color: rgba(19, 33, 26, .55) !important; filter: saturate(.5) brightness(.78); }
.secondary, .pillbutton, .preview-remove, .icon-close { min-height: 44px; border-radius: 999px !important; background: var(--sn-glass2), rgba(30, 40, 38, .6) !important; border: 1px solid var(--sn-edge) !important; color: var(--sn-ink) !important; font-weight: 700 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.icon-close { width: 44px; height: 44px; border-radius: 50% !important; }
.pillbutton { padding: 0 16px; font-size: 13px; }
.primary-pill { background: linear-gradient(180deg, #A9BFAB, #7F9A82) !important; color: #13211A !important; border-color: rgba(220, 236, 222, .45) !important; }
.danger, .secondary.danger, .pillbutton.danger { color: var(--sn-exp) !important; border-color: rgba(217, 143, 143, .45) !important; background: rgba(217, 143, 143, .08) !important; }
.edit-tx, .delete, .small-action { min-height: 44px; min-width: 44px; color: var(--sn-sage) !important; font-weight: 700; }
.delete { color: var(--sn-exp) !important; }

/* ---------- 表單 ---------- */
.field label { color: var(--sn-ink2); font-size: 13px; font-weight: 600; }
.field textarea, .field input, .field select, input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], input[type="search"], select, textarea {
  background: rgba(8, 12, 13, .45) !important; color: var(--sn-ink) !important; border: 1px solid var(--sn-edge) !important; border-radius: 12px; min-height: 44px; }
input[type="date"], input[type="month"] { color-scheme: dark; }
select option, select optgroup { background: #182120; color: var(--sn-ink); }
::placeholder { color: var(--sn-ink2) !important; opacity: .8; }
input[type="file"] { color: var(--sn-ink2); }
input[type="checkbox"] { accent-color: var(--sn-sage) !important; width: 22px; height: 22px; }
.tabs { background: linear-gradient(180deg, rgba(200, 225, 205, .07), rgba(150, 180, 158, .03)), rgba(20, 28, 27, .7) !important; border: 1px solid var(--sn-edge); border-radius: 16px; padding: 4px; gap: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 16px rgba(0, 0, 0, .25); }
.tab { min-height: 44px; color: var(--sn-ink) !important; font-size: 16px; font-weight: 600 !important; border-radius: 12px; }
.tab.active { color: #F4F8F3 !important; font-weight: 800 !important; background: linear-gradient(180deg, #6F8C74 0%, #587560 55%, #4B6553 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(170, 205, 175, .38), 0 4px 12px rgba(0, 0, 0, .3) !important; }

/* ---------- 記一筆 ---------- */
.sn-add-grid, .sn-home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 22px; }
@media (min-width: 1024px) { .sn-add-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } .sn-add-grid > div:first-child { position: sticky; top: 16px; } .sn-home-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } }
.sn-compose { margin-top: 14px; }
.sn-compose .field { margin: 0; }
.sn-compose label { font-size: 17px !important; font-weight: 700 !important; color: var(--sn-ink) !important; }
.sn-compose-in { position: relative; }
.sn-compose-in textarea { min-height: 52px !important; height: 52px; padding: 13px 58px 13px 16px !important; font-size: 17px !important; line-height: 1.5 !important; resize: none !important; overflow: hidden; border-radius: 14px !important; background: linear-gradient(180deg, rgba(210, 230, 214, .1), rgba(170, 196, 176, .06)), rgba(30, 40, 38, .7) !important; }
.sn-go { position: absolute; right: 5px; top: 5px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(220, 236, 222, .45); border-radius: 50%; color: #13211A; background: linear-gradient(180deg, #B3C7B4, #7F9A82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 12px rgba(0, 0, 0, .35); }
.sn-tips { margin-top: 12px; }
.sn-tips summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--sn-ink); }
.sn-results { margin-top: 14px; }
.sn-results > .row strong { font-size: 17px; }
.preview { background: rgba(227, 234, 225, .035) !important; border: 1px solid var(--sn-edge) !important; border-radius: 16px !important; padding: 12px !important; }
.preview.warn { border-color: rgba(213, 176, 106, .45) !important; background: rgba(213, 176, 106, .05) !important; }
.pvtitle { color: var(--sn-ink2); font-weight: 600 !important; }
.auto-default { color: var(--sn-sage) !important; font-weight: 600; margin-top: 6px; }
.learn-panel { background: rgba(145, 170, 147, .08) !important; border: 1px solid var(--sn-edge) !important; color: var(--sn-ink); }
.reserve-tag { background: rgba(145, 170, 147, .14) !important; color: #CFE0D1 !important; min-height: 40px; }
#saveBtn { position: sticky; bottom: calc(var(--sn-nav-h) + var(--sn-safe-b) + 10px); z-index: 5; }
@media (min-width: 768px) { #saveBtn { bottom: 14px; } }

/* ---------- 首頁 ---------- */
.hero.sn-wallet { min-height: 0; display: block; padding: 14px 18px 4px; border-radius: 20px; color: var(--sn-ink); border: 1px solid rgba(175, 205, 180, .34);
  background: radial-gradient(120% 90% at 0% 0%, rgba(150, 185, 156, .34), transparent 60%), linear-gradient(160deg, rgba(110, 145, 118, .42) 0%, rgba(68, 98, 78, .38) 45%, rgba(38, 56, 48, .5) 100%), rgba(22, 32, 29, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 40px rgba(0, 0, 0, .45); -webkit-backdrop-filter: var(--sn-blur); backdrop-filter: var(--sn-blur); }
.hero.sn-wallet:after { display: none; }
.sn-wrow { display: flex; justify-content: space-between; align-items: center; }
.sn-wallet .mutewhite { color: var(--sn-ink) !important; font-size: 16px; font-weight: 700; }
.sn-wallet .balance { margin: 4px 0 12px; font-size: clamp(36px, 11vw, 46px); font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.sn-wallet .balance small { font-size: .5em; font-weight: 800; }
.sn-wbar { height: 8px; margin-bottom: 14px; border-radius: 4px; background: rgba(8, 14, 12, .45); overflow: hidden; }
.sn-wbar span { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #A9BFAB, #D9E6DA); }
.sn-wtwo { display: grid; grid-template-columns: 1fr 1fr; }
.sn-wtwo > div + div { padding-left: 18px; border-left: 1px solid rgba(220, 238, 224, .22); }
.sn-wl { color: var(--sn-ink2); font-size: 14px; }
.sn-wtwo .savings-value { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; }
.sn-def { margin-top: 10px; border-top: 1px solid rgba(220, 238, 224, .16); }
.sn-def summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-size: 15px; }
.sn-def ul { margin: 0 0 12px; padding-left: 18px; color: var(--sn-ink2); font-size: 13px; line-height: 1.7; }
.sn-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 0; }
.sn-tile { min-width: 0; min-height: 86px; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; text-align: left; color: var(--sn-ink); font: inherit; }
.sn-ti { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sn-glass2), rgba(40, 54, 49, .85); box-shadow: inset 0 0 0 1px var(--sn-edge-hi); }
.sn-ti.inc { color: #BEE3C9; background: radial-gradient(120% 120% at 30% 20%, rgba(143, 199, 163, .35), rgba(60, 100, 76, .35)); }
.sn-ti.exp { color: #F2B9B9; background: radial-gradient(120% 120% at 30% 20%, rgba(217, 143, 143, .32), rgba(110, 60, 60, .32)); }
.sn-tt { min-width: 0; display: flex; flex-direction: column; }
.sn-tl { color: var(--sn-ink2); font-size: 14px; }
.sn-tv { font-size: clamp(16px, 4.8vw, 20px); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 379px) { .sn-tile { gap: 8px; padding: 10px; } .sn-ti { width: 38px; height: 38px; } .sn-tv { font-size: 16px; } }
/* 帳戶：直式清單 */
.accounts { display: flex !important; flex-direction: column; gap: 0 !important; }
button.account { display: flex !important; align-items: center; gap: 12px; min-height: 62px; padding: 8px 2px !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid rgba(210, 232, 214, .08) !important; color: var(--sn-ink); }
.accounts button.account:first-child { border-top: 0 !important; }
button.account:hover { background: rgba(227, 234, 225, .03) !important; }
.account .acctname { flex: 1; min-width: 0; color: var(--sn-ink) !important; font-size: 16px !important; font-weight: 700; white-space: nowrap; }
.account .acctname span:last-child { overflow: hidden; text-overflow: ellipsis; word-break: normal; }
.account .acctnum { margin: 0 !important; font-size: 18px !important; letter-spacing: 0 !important; white-space: nowrap; }
.account .account-hint { display: none; }
.sn-zero { border-top: 1px solid rgba(210, 232, 214, .08); }
.sn-zero summary { min-height: 56px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--sn-sage); font-weight: 700; }
.sn-zero summary small { display: block; color: var(--sn-ink2); font-weight: 500; }
.bank-logo { border-radius: 50% !important; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.bank-logo-cash, .bank-logo-other, .bank-logo-credit { background: var(--sn-glass2), rgba(40, 52, 48, .85) !important; border-color: var(--sn-edge-hi) !important; border-radius: 14px !important; }
.bank-fallback { color: var(--sn-ink) !important; }
.savings-panel { padding: 14px 16px !important; }
.savings-item { border-bottom-color: rgba(210, 232, 214, .08) !important; }
.savings-add { background: rgba(145, 170, 147, .06) !important; border-style: dashed !important; }
.install-summary-btn { padding: 14px 16px; margin-bottom: 12px; text-align: left; }
.category-stat { background: rgba(227, 234, 225, .04) !important; border: 1px solid var(--sn-edge) !important; color: var(--sn-ink); }
.sn-net { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 0 6px; }
.sn-net strong { font-size: 20px; }

/* ---------- 明細 ---------- */
.sn-search { position: relative; display: block; }
.sn-search svg { position: absolute; left: 16px; top: 13px; width: 22px; height: 22px; color: var(--sn-ink); pointer-events: none; }
.sn-search input { width: 100%; min-height: 48px !important; padding: 0 14px 0 48px; border-radius: 16px !important; font-size: 15px; background: linear-gradient(180deg, rgba(200, 225, 205, .07), rgba(150, 180, 158, .03)), rgba(20, 28, 27, .65) !important; }
.sn-pills { position: relative; display: flex; gap: 8px; overflow-x: auto; margin: 12px -14px 0; padding: 2px 14px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.sn-pills::-webkit-scrollbar { display: none; }
.sn-pills .field { margin: 0; flex: none; }
.sn-pills select { min-height: 44px; padding: 0 34px 0 16px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 600; -webkit-appearance: none; appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3EAE1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px, linear-gradient(180deg, rgba(200, 225, 205, .09), rgba(150, 180, 158, .04)), rgba(22, 30, 29, .7) !important; }
@media (min-width: 768px) { .sn-pills { margin: 12px 0 0; padding: 2px 0; flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; } }
.history-range { margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--sn-edge); background: var(--sn-glass), var(--sn-tint); }
.warn-text { color: var(--sn-warn) !important; }
.history-sum { margin: 14px 0 12px; }
.history-sum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; padding: 14px 6px; border-radius: 20px; border: 1px solid var(--sn-edge); background: var(--sn-glass), var(--sn-tint); box-shadow: var(--sn-shadow); }
.history-sum-grid > div { min-width: 0; padding: 0 4px; }
.history-sum-grid > div + div { border-left: 1px solid var(--sn-edge); }
.history-sum-grid .sm { display: block; font-size: 14px; }
.history-sum-grid strong { font-size: clamp(18px, 5.4vw, 22px); font-weight: 800; white-space: nowrap; }
.history-sum .fine { text-align: center; margin-top: 6px; }
#historyList { margin-top: 4px !important; }
.day-group { margin-bottom: 14px; padding: 4px 14px 2px; border-radius: 20px; border: 1px solid var(--sn-edge); background: var(--sn-glass), var(--sn-tint); box-shadow: var(--sn-shadow); }
.day-head { display: flex; justify-content: space-between; align-items: center; min-height: 46px; border-bottom: 1px solid rgba(210, 232, 214, .08); font-size: 16px; font-weight: 700; }
.tx { padding: 12px 0 !important; border-bottom: 1px solid rgba(210, 232, 214, .08) !important; }
.tx:last-child { border-bottom: 0 !important; }
.txicon { width: 46px !important; height: 46px !important; border-radius: 14px !important; background: var(--sn-glass2), rgba(36, 47, 44, .85) !important; box-shadow: inset 0 0 0 1px var(--sn-edge); }
.txtitle { font-size: 16px !important; font-weight: 700 !important; color: var(--sn-ink); }
.txmeta { font-size: 13px !important; }
.txamt { font-size: 18px !important; font-weight: 800 !important; }
#homeRecent .tx-actions { display: none; }

/* ---------- 投資 ---------- */
.sn-seg { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.invest-metrics { gap: 0 !important; margin-top: 10px !important; }
.invest-metrics .bookcard { background: none !important; border: 0 !important; box-shadow: none !important; padding: 8px 4px !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.invest-metrics .bookcard:nth-child(2n) { border-left: 1px solid var(--sn-edge) !important; padding-left: 16px !important; }
.invest-metrics .bookvalue { font-size: clamp(22px, 6.6vw, 28px) !important; font-weight: 800; }
.sn-stock { margin: 0 0 14px; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--sn-edge); background: var(--sn-glass), var(--sn-tint); box-shadow: var(--sn-shadow); }
.sn-stock-h { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.sn-stock-h b { font-size: 21px; font-weight: 800; }
.sn-stock-h .sn-sname { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invest-row { border-bottom-color: rgba(210, 232, 214, .08) !important; }
.sn-stock .invest-row { position: relative; padding: 10px 0 10px 24px !important; }
.sn-stock.multi .invest-row::before { content: ""; position: absolute; left: 3px; top: 16px; width: 11px; height: 11px; border-radius: 50%; background: #B8CDBA; box-shadow: 0 0 0 3px rgba(145, 170, 147, .25); }
.sn-stock.multi .invest-row:nth-of-type(2n)::before { background: #DDBB78; box-shadow: 0 0 0 3px rgba(213, 176, 106, .22); }
.sn-stock:not(.multi) .invest-row { padding-left: 0 !important; }
.sn-pl { font-size: 13px; font-weight: 700; }
.invest-control .chip { min-height: 30px; }
.invest-control .pillbutton { min-height: 40px; }

/* ---------- 設定 ---------- */
.sn-settings-search { margin-bottom: 14px; }
.sn-group { margin-bottom: 10px; border-radius: 20px; }
.sn-group > summary { list-style: none; display: flex; align-items: center; gap: 14px; min-height: 78px; padding: 10px 14px; cursor: pointer; }
.sn-group > summary::-webkit-details-marker { display: none; }
.sn-gi { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sn-glass2), rgba(38, 50, 46, .85); box-shadow: inset 0 0 0 1px var(--sn-edge-hi), 0 4px 10px rgba(0, 0, 0, .35); }
.sn-gt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sn-gt strong { font-size: 18px; }
.sn-gt span { color: var(--sn-ink2); font-size: 14px; }
.sn-gchev { transition: transform .18s; }
.sn-group[open] .sn-gchev { transform: rotate(90deg); }
.sn-gb { padding: 0 14px 14px; border-top: 1px solid var(--sn-edge); }
.sn-gb > .card, .sn-gb > .cloud-tool { background: rgba(227, 234, 225, .03) !important; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin-top: 12px; }
.sn-gb > .sectiontop { margin: 14px 2px 0; }
.sn-gb > .sectiontop:first-child h2 { font-size: 15px; color: var(--sn-ink2); }
.sn-group.sn-danger > summary .sn-gt strong { color: #F0A3A3; }
.sn-group.sn-danger .sn-gi { background: radial-gradient(120% 120% at 30% 20%, rgba(217, 143, 143, .35), rgba(120, 60, 60, .35)); color: #F0B3B3; }
.sn-group.sn-danger { border-color: rgba(217, 143, 143, .35) !important; }
.sn-hide { display: none !important; }
.sn-settings-empty { text-align: center; color: var(--sn-ink2); padding: 16px; }

/* ---------- 對話框、登入、提示 ---------- */
.edit-dialog { background: #17201E !important; color: var(--sn-ink) !important; border: 1px solid var(--sn-edge) !important; }
.edit-dialog::backdrop { background: rgba(0, 0, 0, .6) !important; }
.edit-foot { background: linear-gradient(to bottom, rgba(23, 32, 30, .9), #17201E 24%) !important; }
.cloud-gate { background: radial-gradient(85% 40% at 18% -4%, rgba(84, 116, 94, .42), transparent 72%), linear-gradient(180deg, #111A1A, #0C1113) !important; }
.cloud-panel { padding: 24px !important; }
.cloud-title { color: var(--sn-ink); }
.cloud-desc { color: var(--sn-ink2) !important; }
.cloud-import { background: rgba(227, 234, 225, .04) !important; border-color: var(--sn-edge) !important; }
.toast { background: #E3EAE1 !important; color: #0D1114 !important; font-weight: 700; bottom: calc(var(--sn-nav-h) + var(--sn-safe-b) + 18px) !important; }
.logo-upload-preview, .bank-gallery .bank-example, .account-detail-stat, .install-metric, .savings-metric { background: rgba(227, 234, 225, .04) !important; border-color: var(--sn-edge) !important; color: var(--sn-ink); }
.install-period { border-top-color: rgba(210, 232, 214, .08) !important; }
.install-mode-tabs label, .install-choice { border-color: var(--sn-edge) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }