/* ================================================================
   06-account-and-final-overrides.css
   หมวด: หน้าบัญชีและกฎปรับแต่งท้ายสุด
   หมายเหตุ: ไฟล์ถูกโหลดตามลำดับใน index.html เพื่อคงลำดับ CSS เดิม
   ================================================================ */
/* บัญชีของฉัน: โปรไฟล์ ชื่อเล่น และสถานะ Login */
.profile-home-chip{display:flex;align-items:center;gap:8px;max-width:190px;min-width:0;padding:7px 11px;border:1px solid #d9f4e6;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 5px 18px #15803d0d}
.profile-home-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#dcfce7,#fef3c7);font-size:21px;flex-shrink:0}
.profile-home-name{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-page-heading{margin-bottom:15px}.account-profile-panel,.account-auth-panel{background:var(--card)}
.account-profile-top{display:flex;align-items:center;gap:14px;margin-bottom:22px}.account-profile-top h2{margin:0;font-size:18px}.account-profile-top p{margin:4px 0 0;color:var(--muted);font-size:12px}
.account-large-avatar{width:82px;height:82px;border-radius:27px;display:grid;place-items:center;font-size:43px;background:linear-gradient(145deg,#dcfce7,#fef3c7);border:3px solid #fff;box-shadow:0 8px 24px #15803d15;flex-shrink:0}
.avatar-picker{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-top:8px}
.avatar-option{display:grid;place-items:center;aspect-ratio:1;border:2px solid #e9e7f3;border-radius:15px;background:#fff;font-size:25px;transition:transform .15s,border-color .15s,background .15s}
.avatar-option:hover{transform:translateY(-2px)}.avatar-option.selected{border-color:#22a06b;background:#e7f9ef;box-shadow:0 0 0 3px #22a06b18}
.profile-nickname-field{margin-top:18px}.profile-nickname-field small{font-size:11px;color:var(--muted);line-height:1.6}.account-save-status{font-size:12px;color:#16865b;margin:8px 0 0;min-height:18px}
.account-info-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}.account-info-row:last-of-type{border-bottom:0}
.account-info-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#eaf8ef;font-size:21px;flex-shrink:0}.line-info-icon{font-size:11px;font-weight:900;color:#fff;background:#06c755;border-radius:14px}
.account-info-copy{min-width:0;flex:1}.account-info-copy small{display:block;font-size:11px;color:var(--muted)}.account-info-copy strong{display:block;font-size:13px;overflow-wrap:anywhere}.account-info-copy p{margin:3px 0 0;font-size:11px;color:var(--muted)}
.account-status-badge{font-size:10px;padding:6px 9px;border-radius:999px;background:#e8f8ee;color:#16865b;white-space:nowrap}.account-status-badge.pending{background:#fff0d9;color:#a96600}.account-status-badge.error{background:#ffe8ed;color:#c13761}
@media(max-width:600px){.profile-home-chip{max-width:155px;padding:5px 8px}.profile-home-avatar{width:30px;height:30px;font-size:18px}.profile-home-name{font-size:11px}.avatar-picker{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.avatar-option{font-size:24px}.account-status-badge{font-size:9px;padding:5px 7px}.account-info-row{gap:8px}.account-large-avatar{width:70px;height:70px;font-size:37px;border-radius:23px}}

/* Mobile header: compact, equal-width profile and sign-out actions at the top */
@media(max-width:600px){
 .top-actions #profileHomeButton{grid-column:1!important;grid-row:1!important;order:0!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:38px!important;height:38px!important;padding:4px 9px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;border-radius:13px!important;white-space:nowrap!important;overflow:hidden!important}
 .top-actions #profileHomeButton .profile-home-avatar{width:24px!important;height:24px!important;min-width:24px!important;font-size:15px!important}
 .top-actions #profileHomeButton .profile-home-name{font-size:11px!important;min-width:0!important}
 .top-actions #signOutBtn{grid-column:2!important;grid-row:1!important;order:1!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:38px!important;height:38px!important;padding:5px 8px!important;font-size:11px!important;border-radius:13px!important;white-space:nowrap!important;justify-content:center!important}
 .top-actions .ui-preferences{grid-row:2!important;order:2!important}
 .top-actions .month-picker-wrap{grid-row:3!important;order:3!important}
 .top-actions #lineIdentityBtn{grid-row:4!important;order:4!important;width:100%!important;min-height:38px!important;font-size:11px!important}
}

/* Month selector as its own Liquid Glass card, visually separated from profile/actions */
.top-actions .month-picker-wrap{
  box-sizing:border-box!important;
  padding:12px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.42))!important;
  -webkit-backdrop-filter:blur(22px) saturate(155%)!important;
  backdrop-filter:blur(22px) saturate(155%)!important;
  box-shadow:0 10px 28px rgba(120,91,160,.10),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25)!important;
  gap:8px!important;
  overflow:visible!important;
}
.top-actions .month-picker-wrap>span{padding:0!important;margin:0 auto 2px!important;text-align:center!important}
.top-actions .month-picker-wrap .month-control-row{margin:0!important}
html[data-ui-theme="dark"] .top-actions .month-picker-wrap{
  background:linear-gradient(145deg,rgba(53,44,70,.76),rgba(37,31,51,.58))!important;
  border-color:rgba(255,255,255,.17)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
@media(max-width:600px){
  .top-actions .month-picker-wrap{width:100%!important;max-width:100%!important;min-width:0!important;padding:11px 10px!important;border-radius:20px!important;margin:2px 0 4px!important}
  .top-actions .month-control-row{grid-template-columns:38px minmax(0,1fr) 38px!important;gap:7px!important}
  .top-actions .month-step{width:38px!important;height:44px!important;min-height:44px!important}
  .top-actions .month-display-shell,.top-actions .month-display-label,.top-actions .month-picker-wrap .month-native-input{height:44px!important;min-height:44px!important}
}

/* Floating LINE Official Account contact bubble — draggable and collapsible */
#contactBubble{position:fixed;right:22px;top:clamp(110px,28vh,230px);bottom:auto;z-index:1200;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);touch-action:none;user-select:none;-webkit-user-select:none;will-change:left,top;}
#contactBubble .contact-bubble-main{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.88);border-radius:999px;padding:8px 12px 8px 9px;background:rgba(255,255,255,.82);color:#176b43;box-shadow:0 12px 34px rgba(20,80,50,.22),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(24px) saturate(1.65);-webkit-backdrop-filter:blur(24px) saturate(1.65);font:inherit;font-size:13px;font-weight:800;cursor:grab;white-space:nowrap;}
#contactBubble .contact-bubble-main:active{cursor:grabbing}
#contactBubble .contact-bubble-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#06c755;color:#fff;font-size:21px;box-shadow:0 4px 12px rgba(6,199,85,.25)}
#contactBubble .contact-bubble-copy{display:flex;flex-direction:column;gap:1px;line-height:1.25}
#contactBubble .contact-bubble-copy small{font-size:10px;font-weight:600;opacity:.72}
#contactBubble .contact-bubble-minimize,#contactBubble .contact-bubble-restore{display:grid;place-items:center;border:1px solid rgba(255,255,255,.92);background:rgba(255,255,255,.86);color:#39775a;box-shadow:0 6px 18px rgba(20,80,50,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);cursor:pointer}
#contactBubble .contact-bubble-minimize{width:24px;height:24px;border-radius:50%;font-size:15px;line-height:1}
#contactBubble.is-minimized{right:auto;bottom:auto}
#contactBubble .contact-bubble-restore{width:42px;height:42px;border-radius:50%;font-size:20px;cursor:grab}
#contactBubble.is-dragging{transition:none!important;opacity:.92}#contactBubble.is-snapping{transition:left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1);}
html[data-ui-theme="dark"] #contactBubble .contact-bubble-main{background:rgba(38,51,43,.9);color:#d7ffe5;border-color:rgba(255,255,255,.18)}
html[data-ui-theme="dark"] #contactBubble .contact-bubble-minimize,html[data-ui-theme="dark"] #contactBubble .contact-bubble-restore{background:rgba(43,36,56,.94);color:#d7ffe5;border-color:rgba(255,255,255,.18)}
@media(max-width:600px){#contactBubble{right:12px;top:clamp(360px,74vh,620px);bottom:auto}#contactBubble .contact-bubble-main{padding:6px 10px 6px 7px;gap:8px;font-size:12px}#contactBubble .contact-bubble-icon{width:34px;height:34px;flex-basis:34px;font-size:19px}#contactBubble.is-minimized{right:auto;bottom:auto}#contactBubble .contact-bubble-restore{width:36px;height:36px;font-size:18px}}
@media(prefers-reduced-motion:no-preference){#contactBubble .contact-bubble-main,#contactBubble .contact-bubble-restore{transition:box-shadow .18s ease,transform .18s ease}#contactBubble .contact-bubble-main:hover,#contactBubble .contact-bubble-restore:hover{transform:translateY(-2px);box-shadow:0 15px 36px rgba(20,80,50,.25)}}

/* Desktop top area — unified Liquid Glass command center */
@media (min-width:901px){
  .top{
    position:relative;
    isolation:isolate;
    padding:clamp(18px,1.7vw,28px)!important;
    border:1px solid rgba(255,255,255,.82)!important;
    border-radius:30px!important;
    background:linear-gradient(125deg,rgba(255,255,255,.70),rgba(255,255,255,.43) 52%,rgba(255,241,226,.58))!important;
    -webkit-backdrop-filter:blur(28px) saturate(165%)!important;
    backdrop-filter:blur(28px) saturate(165%)!important;
    box-shadow:0 20px 54px rgba(90,70,125,.10),inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(255,255,255,.30)!important;
  }
  .top:before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:radial-gradient(ellipse at 0% 0%,rgba(225,210,255,.30),transparent 48%),radial-gradient(ellipse at 100% 0%,rgba(255,218,185,.27),transparent 45%);
  }
  html[data-ui-theme="dark"] .top{background:linear-gradient(125deg,rgba(39,32,56,.78),rgba(31,29,46,.66) 52%,rgba(62,42,55,.64))!important;border-color:rgba(255,255,255,.16)!important;box-shadow:0 20px 54px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.12)!important}
}

/* Minimize action: whoosh the compact LINE bubble to the lower-right dock */
#contactBubble.is-whooshing{z-index:1202;transition:left .54s cubic-bezier(.16,1,.3,1),top .54s cubic-bezier(.16,1,.3,1),filter .54s ease;filter:drop-shadow(0 0 12px rgba(6,199,85,.25))}
#contactBubble.is-whooshing .contact-bubble-restore{animation:contactBubbleWhoosh .62s cubic-bezier(.16,1,.3,1) both}
@keyframes contactBubbleWhoosh{
  0%{transform:translate3d(-8px,7px,0) scale(.72) rotate(-12deg);opacity:.45;filter:blur(2px)}
  48%{transform:translate3d(0,-4px,0) scale(1.12) rotate(4deg);opacity:1;filter:blur(0)}
  76%{transform:translate3d(0,0,0) scale(.94) rotate(-2deg)}
  100%{transform:translate3d(0,0,0) scale(1) rotate(0);opacity:1;filter:blur(0)}
}
#contactBubble.is-minimized .contact-bubble-restore{box-shadow:0 9px 24px rgba(6,199,85,.24),0 0 0 4px rgba(255,255,255,.45),inset 0 1px 0 rgba(255,255,255,.95)}
@media(prefers-reduced-motion:reduce){#contactBubble.is-whooshing,#contactBubble.is-whooshing .contact-bubble-restore{animation:none!important;transition:none!important}}


/* Desktop header arrangement: profile/logout grouped together; month selector in its own glass card. */
@media(min-width:901px){
 .top-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;flex-wrap:nowrap!important}
 .header-account-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:7px;border:1px solid rgba(255,255,255,.82);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(245,239,255,.58));box-shadow:0 10px 28px rgba(91,64,130,.08),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(22px) saturate(1.45);-webkit-backdrop-filter:blur(22px) saturate(1.45)}
 .header-account-actions #signOutBtn{min-height:42px!important;padding:10px 13px!important;white-space:nowrap}
 .top-actions .month-picker-wrap{flex:0 1 252px!important;min-width:242px!important;max-width:260px!important;padding:10px 11px 11px;border:1px solid rgba(255,255,255,.9);border-radius:21px;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,247,237,.66));box-shadow:0 12px 28px rgba(91,64,130,.08),inset 0 1px 0 rgba(255,255,255,.96);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5)}
 .month-picker-wrap>span{text-align:center;padding:0 0 2px}
 .month-control-row{grid-template-columns:36px minmax(0,1fr) 36px!important;gap:5px!important}
 .month-step{width:36px!important}
 .month-display-label{padding:8px 29px 8px 7px!important;gap:4px!important;font-size:13px!important;letter-spacing:-.35px!important;white-space:nowrap!important}
 .month-display-label #monthDisplayText{overflow:visible!important;text-overflow:clip!important;flex:0 0 auto!important;max-width:none!important;white-space:nowrap!important}
 .month-calendar-icon{right:7px!important;font-size:16px!important}
 .top-actions .ui-preferences{flex:0 0 auto}
}
@media(min-width:901px) and (max-width:1350px){
 .top{align-items:flex-start!important;flex-direction:column!important}
 .top-actions{justify-content:flex-start!important;flex-wrap:wrap!important;width:100%}
}
@media(max-width:900px){
 .header-account-actions{display:contents!important}
 .top-actions #signOutBtn{grid-column:auto!important}
 .top-actions .month-picker-wrap{order:0!important}
}

/* UI consistency: keep the Income / Expenses sidebar item the same size as peers. */
.sidebar .nav[data-page="transactions"],
.sidebar .nav[data-page="transactions"]:lang(en) {
  font-size: 16px !important;
  letter-spacing: 0 !important;
  min-height: 44px;
  box-sizing: border-box;
}
@media (max-width: 390px) {
  .sidebar .nav[data-page="transactions"],
  .sidebar .nav[data-page="transactions"]:lang(en) {
    font-size: 13px !important;
  }
}


/* Desktop header fix: keep account actions and display preferences in one aligned top row,
   and move the month selector below them so it never overlaps the greeting/festival cards. */
@media (min-width: 1351px) {
  .top {
    grid-template-columns: minmax(0, 1fr) minmax(590px, 650px) !important;
    column-gap: clamp(22px, 2.2vw, 42px) !important;
    align-items: center !important;
  }
  .top-intro, .top > div:first-child { min-width: 0 !important; }
  .top-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: initial !important;
  }
  .top-actions .header-account-actions {
    grid-column: 1 !important; grid-row: 1 !important;
    display: flex !important; width: 100% !important; min-width: 0 !important;
    justify-content: space-between !important; gap: 7px !important;
    box-sizing: border-box !important; padding: 6px !important;
  }
  .top-actions .header-account-actions #profileHomeButton {
    flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important;
    justify-content: center !important;
  }
  .top-actions .header-account-actions #signOutBtn {
    flex: 1 1 0 !important; min-width: 0 !important;
    padding: 10px 8px !important; white-space: nowrap !important;
  }
  .top-actions .ui-preferences {
    grid-column: 2 !important; grid-row: 1 !important;
    display: flex !important; width: 100% !important; min-width: 0 !important;
    justify-content: space-between !important; gap: 7px !important;
  }
  .top-actions .ui-preferences .ios-segment { flex: 1 1 0 !important; min-width: 0 !important; }
  .top-actions .ui-preferences .ios-segment-btn { flex: 1 1 0 !important; padding-left: 8px !important; padding-right: 8px !important; }
  .top-actions .month-picker-wrap {
    grid-column: 1 / -1 !important; grid-row: 2 !important;
    justify-self: center !important; width: 270px !important;
    min-width: 250px !important; max-width: 100% !important;
    margin: 0 !important;
  }
  .top-actions #accountLabel { display: none !important; }
}

/* Desktop polish: compact account buttons to match the theme/language controls. */
@media (min-width: 901px) {
  .top-actions .header-account-actions {
    min-height: 40px !important;
    padding: 4px !important;
    gap: 6px !important;
    border-radius: 17px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .top-actions .header-account-actions #profileHomeButton,
  .top-actions .header-account-actions #signOutBtn {
    min-height: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    padding: 4px 9px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  .top-actions .header-account-actions #profileHomeButton {
    gap: 6px !important;
  }
  .top-actions .header-account-actions #profileHomeButton .profile-home-avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 15px !important;
  }
  .top-actions .header-account-actions #profileHomeButton .profile-home-name {
    font-size: 11px !important;
  }
  .top-actions .header-account-actions #signOutBtn {
    white-space: nowrap !important;
  }
  .top-actions .ui-preferences {
    min-height: 40px !important;
    align-items: center !important;
  }
  .top-actions .ui-preferences .ios-segment {
    min-height: 40px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }
  .top-actions .ui-preferences .ios-segment-btn {
    min-height: 32px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }
}

/* Final desktop polish: consistent liquid-glass header corners and centered LINE linking */
@media (min-width: 901px) {
  .top {
    border-radius: 30px !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
  }
  /* Only force a flex layout while visible. Never override .hidden. */
  .top-actions #lineIdentityBtn:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 320px !important;
    width: min(320px, 100%) !important;
    max-width: 100% !important;
    min-height: 46px !important;
    margin-inline: auto !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}
.top-actions #lineIdentityBtn {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* Dark mode: let the rounded header own its background instead of painting
   a square inset panel behind the controls. */
html[data-ui-theme="dark"] .top-actions {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: inherit !important;
}

/* ผูกอีเมลและรหัสผ่านกับบัญชีเดิม */
.account-email-password-form{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface,rgba(255,255,255,.55))}
.account-email-password-form .field{margin-bottom:14px}
.account-email-password-form .field small{display:block;margin-top:6px;font-size:11px;line-height:1.7;color:var(--muted)}
.account-email-password-form input{width:100%;max-width:100%;box-sizing:border-box}
.account-email-password-form .actions{margin-top:4px}
#emailPasswordStatus{line-height:1.7;overflow-wrap:anywhere}
@media(max-width:600px){.account-email-password-form{padding:13px;border-radius:15px}.account-email-password-form .actions .btn{width:100%}}



/* ==========================================================================
   ตัวกรองรายการรายรับ–รายจ่าย
   - เลือกดูรายการของทั้งเดือน หรือเจาะจงวันที่
   - จัดปุ่มให้อยู่แถวเดียวกันบนจอใหญ่ และยอมให้ขึ้นบรรทัดใหม่บนจอแคบ
   ========================================================================== */
.tx-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.tx-list-heading {
  min-width: 180px;
  flex: 1 1 220px;
}

.tx-list-heading h2 {
  margin-bottom: 4px;
}

.tx-list-heading p {
  margin: 0;
}

.tx-list-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 1 auto;
  flex-wrap: wrap;
}

.tx-list-controls .pill {
  min-height: 42px;
  max-width: 100%;
  box-sizing: border-box;
}

.tx-list-controls .tx-specific-date {
  width: 160px;
  min-width: 140px;
  padding: 8px 10px;
}

.tx-list-controls .tx-specific-date[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .tx-list-head {
    align-items: stretch;
  }

  .tx-list-controls {
    justify-content: flex-start;
    width: 100%;
  }

  .tx-list-controls .pill {
    flex: 1 1 110px;
  }

  .tx-list-controls .tx-specific-date {
    flex: 1 1 150px;
    width: auto;
  }
}


/* ==========================================================================
   การปรับปรุงรอบนี้: กล่องยืนยัน, กราฟมินิมอล และหน้าสรุปรายงาน
   ========================================================================== */

/* กราฟแท่งแบบเรียบ ไม่ใช้รูปทรงขวดแก้ว */
.minimal-bars{align-items:flex-end;gap:5px}
.minimal-bars .bar{display:block;width:clamp(7px,1.1vw,13px);max-width:13px;min-height:0;border-radius:5px 5px 2px 2px;box-shadow:none;transition:height .25s ease,opacity .2s ease}
.minimal-bars .bar.in{background:linear-gradient(180deg,#6ed9a5,#26b879)}
.minimal-bars .bar.out{background:linear-gradient(180deg,#f7a6c7,#e96b9a)}
.minimal-bars .bar:hover{opacity:.78}
html[data-ui-theme="dark"] .minimal-bars .bar.in{background:linear-gradient(180deg,#5ed6a0,#1f9e6a)}
html[data-ui-theme="dark"] .minimal-bars .bar.out{background:linear-gradient(180deg,#f19abd,#cf5686)}

/* กล่องยืนยันแบบ in-app แทนหน้าต่างดำของเบราว์เซอร์ */
.app-confirm-backdrop{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(30,20,42,.42);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:1;transition:opacity .18s ease}
.app-confirm-backdrop.hidden{display:none}
.app-confirm-dialog{width:min(100%,420px);padding:26px;border:1px solid rgba(255,255,255,.8);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,248,253,.97));box-shadow:0 24px 80px rgba(44,24,58,.25);text-align:center;animation:confirmPopIn .2s ease-out}
.app-confirm-mark{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 12px;border-radius:18px;background:#eafaf1;font-size:26px}
.app-confirm-dialog h2{margin:0 0 8px;font-size:20px;color:#38234f}
.app-confirm-dialog p{margin:0;color:#796b88;line-height:1.7;white-space:pre-line;font-size:14px}
.app-confirm-actions{display:flex;justify-content:center;gap:10px;margin-top:22px}
.app-confirm-actions .btn{min-width:108px;min-height:42px}
.app-confirm-actions .btn.danger{background:linear-gradient(135deg,#fb7185,#e11d48);color:white;border-color:transparent}
html[data-ui-theme="dark"] .app-confirm-dialog{background:linear-gradient(145deg,#292235,#211b2c);border-color:#51425f}
html[data-ui-theme="dark"] .app-confirm-dialog h2{color:#f4eaff}
html[data-ui-theme="dark"] .app-confirm-dialog p{color:#c2b3d1}
html[data-ui-theme="dark"] .app-confirm-mark{background:#303e38}
body.modal-open{overflow:hidden}
@keyframes confirmPopIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* การ์ดสรุปการเงินในหน้ารายงาน */
.report-insights-panel{overflow:hidden}
.report-insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.report-insight-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(246,250,248,.72)}
.report-insight-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:rgba(56,189,135,.13);font-size:18px}
.report-insight-label{font-size:12px;color:var(--muted)}
.report-insight-card strong{font-size:clamp(16px,2vw,22px);line-height:1.35;overflow-wrap:anywhere;color:var(--text)}
.report-insight-card small{font-size:11px;color:var(--muted);line-height:1.5}
.report-comparison-note{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;padding:13px 15px;border-radius:14px;background:rgba(228,248,237,.7);font-size:12px;color:var(--muted)}
.report-comparison-note span{display:flex;gap:6px;align-items:center}
.report-comparison-note b{color:var(--text)}
html[data-ui-theme="dark"] .report-insight-card{background:rgba(255,255,255,.035);border-color:var(--line)}
html[data-ui-theme="dark"] .report-comparison-note{background:rgba(60,120,88,.16)}
@media(max-width:720px){
 .report-insight-grid{grid-template-columns:1fr}
 .report-insight-card{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:10px;align-items:center}
 .report-insight-icon{grid-row:span 2}
 .report-insight-card strong,.report-insight-card small{grid-column:2}
 .report-insights-panel .panel-head{align-items:flex-start;gap:10px;flex-direction:column}
 .app-confirm-dialog{padding:22px 18px;border-radius:22px}
}



/* ================================================================
   ธีมปรับปรุง: กล่องยืนยันอ่านง่าย + Dark Mode แบบมินิมอล
   ใช้สีตามเทศกาลปัจจุบัน แต่คง contrast ของปุ่มและข้อความให้อ่านง่าย
   ================================================================ */
.app-confirm-dialog{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--season-primary,#22b86b) 20%,white);
  background:linear-gradient(145deg,#ffffff 0%,#fbfffc 58%,var(--season-surface,#effdf5) 130%);
}
.app-confirm-dialog>*:not(.app-confirm-seasonal-floats){position:relative;z-index:1}
.app-confirm-mark{
  color:var(--season-deep,#15803d);
  background:color-mix(in srgb,var(--season-secondary,#8ce8b1) 24%,white);
  border:1px solid color-mix(in srgb,var(--season-primary,#22b86b) 15%,white);
  box-shadow:0 8px 22px color-mix(in srgb,var(--season-primary,#22b86b) 12%,transparent);
}
.app-confirm-seasonal-floats{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.app-confirm-seasonal-float{
  position:absolute;
  top:-36px;
  left:12%;
  font-size:21px;
  opacity:0;
  filter:drop-shadow(0 3px 5px rgba(30,20,40,.10));
  animation:confirmSeasonalDrift 5.6s ease-in-out infinite;
}
.app-confirm-seasonal-float:nth-child(2){left:76%;font-size:17px;animation-delay:1.2s;animation-duration:6.4s}
.app-confirm-seasonal-float:nth-child(3){left:48%;font-size:15px;animation-delay:2.4s;animation-duration:5.9s}
@keyframes confirmSeasonalDrift{
  0%{transform:translate3d(0,-8px,0) rotate(-14deg);opacity:0}
  16%{opacity:.72}
  72%{opacity:.58}
  100%{transform:translate3d(28px,290px,0) rotate(24deg);opacity:0}
}
/* ปุ่มยกเลิกต้องมีพื้นสีและข้อความชัด ไม่ให้กลืนไปกับพื้น Popup */
#appConfirmNo.app-confirm-cancel{
  background:#eaf8ef!important;
  color:#176b43!important;
  border:1px solid #ccebd8!important;
  box-shadow:0 4px 12px rgba(21,128,61,.07)!important;
}
#appConfirmYes{
  background:linear-gradient(135deg,var(--season-primary,#22b86b),var(--season-deep,#15803d))!important;
  color:#fff!important;
  border:1px solid transparent!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--season-primary,#22b86b) 22%,transparent)!important;
  font-weight:800!important;
}
#appConfirmYes.danger{
  background:linear-gradient(135deg,#f47291,#d94368)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 7px 18px rgba(217,67,104,.22)!important;
}
#appConfirmNo:hover,#appConfirmYes:hover{filter:brightness(.98);transform:translateY(-1px)}
#appConfirmNo:focus-visible,#appConfirmYes:focus-visible{outline:3px solid color-mix(in srgb,var(--season-primary,#22b86b) 40%,white);outline-offset:2px}

/* Dark Mode: พื้นหลัง charcoal-neutral ลดม่วงจัด และเพิ่มความต่างของพื้นผิว */
html[data-ui-theme="dark"] body{
  background:radial-gradient(ellipse at 10% 0%,#26332f 0%,#191f20 42%,#15191b 100%)!important;
  color:#e7efeb!important;
}
html[data-ui-theme="dark"] .sidebar,
html[data-ui-theme="dark"] .panel,
html[data-ui-theme="dark"] .stat,
html[data-ui-theme="dark"] .top,
html[data-ui-theme="dark"] .top-actions,
html[data-ui-theme="dark"] .home-quick-add-card,
html[data-ui-theme="dark"] .today-expense-add,
html[data-ui-theme="dark"] .mobile-nav,
html[data-ui-theme="dark"] .mobile-more{
  background:linear-gradient(145deg,rgba(38,47,45,.97),rgba(29,36,35,.97))!important;
  color:#e7efeb!important;
  border-color:rgba(210,231,220,.13)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html[data-ui-theme="dark"] .panel h1,
html[data-ui-theme="dark"] .panel h2,
html[data-ui-theme="dark"] .panel h3,
html[data-ui-theme="dark"] .stat .money,
html[data-ui-theme="dark"] .nav,
html[data-ui-theme="dark"] .nav.active,
html[data-ui-theme="dark"] .nav:hover,
html[data-ui-theme="dark"] .bill-info b,
html[data-ui-theme="dark"] .home-quick-add-card strong{
  color:#e7efeb!important;
}
html[data-ui-theme="dark"] .panel p,
html[data-ui-theme="dark"] .panel small,
html[data-ui-theme="dark"] .eyebrow,
html[data-ui-theme="dark"] .muted,
html[data-ui-theme="dark"] .report-insight-label,
html[data-ui-theme="dark"] .report-insight-card small{
  color:#aabbb3!important;
}
html[data-ui-theme="dark"] input,
html[data-ui-theme="dark"] select,
html[data-ui-theme="dark"] textarea,
html[data-ui-theme="dark"] .field input,
html[data-ui-theme="dark"] .field select{
  background:#202927!important;
  color:#e7efeb!important;
  border-color:#43534b!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12)!important;
}
html[data-ui-theme="dark"] table{color:#e7efeb!important}
html[data-ui-theme="dark"] th{background:#26332f!important;color:#b9cbc2!important;border-color:#3a4942!important}
html[data-ui-theme="dark"] td{border-color:#394841!important;color:#dfe9e4!important}
html[data-ui-theme="dark"] .report-insight-card{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(210,231,220,.13)!important;
}
html[data-ui-theme="dark"] .report-comparison-note,
html[data-ui-theme="dark"] .note{
  background:rgba(91,151,116,.13)!important;
  color:#c8d8d0!important;
  border-color:rgba(151,203,171,.16)!important;
}
/* Popup ใน Dark Mode ใช้พื้น charcoal และปุ่มแยกสีชัดเจน */
html[data-ui-theme="dark"] .app-confirm-dialog{
  background:linear-gradient(145deg,#26312e,#202927)!important;
  border-color:rgba(202,230,214,.18)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.42)!important;
}
html[data-ui-theme="dark"] .app-confirm-dialog h2{color:#f0f7f3!important}
html[data-ui-theme="dark"] .app-confirm-dialog p{color:#b8c9c0!important}
html[data-ui-theme="dark"] .app-confirm-mark{
  background:#30483b!important;
  color:#c7f5d8!important;
  border-color:#42634f!important;
}
html[data-ui-theme="dark"] #appConfirmNo.app-confirm-cancel{
  background:#2f4037!important;
  color:#d4f4df!important;
  border-color:#4b6655!important;
}
html[data-ui-theme="dark"] #appConfirmYes{
  background:linear-gradient(135deg,#319b69,#247c55)!important;
  color:#fff!important;
}
html[data-ui-theme="dark"] #appConfirmYes.danger{
  background:linear-gradient(135deg,#e66f89,#bd3f5f)!important;
  color:#fff!important;
}
@media(prefers-reduced-motion:reduce){
  .app-confirm-seasonal-float{animation:none!important;display:none!important}
  #appConfirmNo:hover,#appConfirmYes:hover{transform:none}
}
@media(max-width:480px){
  .app-confirm-dialog{padding:23px 18px!important}
  .app-confirm-actions .btn{min-width:0;flex:1}
}


/* =========================================================
   Weather performance — ลดภาระเครื่อง แต่ยังคงบรรยากาศเคลื่อนไหว
   - ฝนใช้จำนวนอนุภาคน้อยลงและไม่ใช้เงาหนัก
   - มือถือแสดงฝนไม่เกิน 8 เม็ด
   - หยุดการเคลื่อนไหวเมื่อแท็บไม่ได้เปิดอยู่
   ========================================================= */
#rainLayer{
  opacity:.16!important;
  contain:strict;
  isolation:isolate;
}
#rainLayer.active{display:block}
.raindrop{
  width:1px!important;
  background:linear-gradient(transparent,rgba(125,190,225,.72))!important;
  filter:none!important;
  will-change:transform;
  backface-visibility:hidden;
}
#weatherDecor{opacity:.58!important;contain:layout paint}
.weather-sun{
  filter:drop-shadow(0 0 8px rgba(255,217,106,.25))!important;
  animation:sunGlow 7s ease-in-out infinite!important;
}
.weather-cloud{
  filter:drop-shadow(0 3px 5px rgba(92,127,163,.12))!important;
  animation:cloudDrift 28s ease-in-out infinite alternate!important;
}
.sun-rays{
  filter:none!important;
  animation:sunHalo 8s ease-in-out infinite!important;
}
body.weather-paused #rainLayer *,
body.weather-paused #weatherDecor *{
  animation-play-state:paused!important;
}
@media(max-width:700px){
  .raindrop:nth-child(n+9){display:none!important}
  #rainLayer{opacity:.12!important}
  #weatherDecor{opacity:.42!important}
}
@media(prefers-reduced-motion:reduce){
  #rainLayer{display:none!important}
  #weatherDecor .weather-sun,
  #weatherDecor .weather-cloud,
  #weatherDecor .sun-rays,
  #rainLayer .raindrop{
    animation:none!important;
    transition:none!important;
  }
}


/* Sidebar mascot: keep it in normal document flow directly after the account menu.
   This lets the card move naturally with the sidebar instead of being pushed to the bottom. */
.sidebar > .mascot {
  margin-top: 10px !important;
  flex: 0 0 auto;
}

/* Contact bubble: new default launch positions; JS may still let the user drag it. */
#contactBubble {
  top: clamp(110px, 28vh, 230px);
  bottom: auto;
}
@media (max-width: 600px) {
  #contactBubble {
    top: clamp(360px, 74vh, 620px);
    bottom: auto;
  }
}


/* ปุ่มเพิ่มบิล: ใช้สีส้มเด่นให้เห็นชัดในทุกหน้าที่มีทางลัดเพิ่มบิล */
.home-quick-add-card.quick-add-bill{
  background:linear-gradient(135deg,#fff0dc 0%,#fff8ef 48%,#ffffff 100%)!important;
  border:1px solid #ffd2a1!important;
  box-shadow:0 10px 24px rgba(234,112,24,.12),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.home-quick-add-card.quick-add-bill .quick-add-icon{
  background:linear-gradient(135deg,#ff9b35,#f97316)!important;
  color:#fff!important;
  border-radius:15px;
  box-shadow:0 5px 12px rgba(249,115,22,.22);
}
.home-quick-add-card.quick-add-bill .quick-add-arrow{
  background:#fff!important;
  color:#ea580c!important;
}
button.bill-add-main,
#page-bills .btn[onclick*="openBillWizard"],
#addTop[data-action="bill"]{
  background:linear-gradient(135deg,#ff9b35 0%,#f97316 58%,#ea580c 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.65)!important;
  font-weight:850!important;
  box-shadow:0 9px 22px rgba(234,88,12,.22),inset 0 1px 0 rgba(255,255,255,.3)!important;
}
button.bill-add-main:hover,
#page-bills .btn[onclick*="openBillWizard"]:hover,
#addTop[data-action="bill"]:hover{
  filter:saturate(1.08) brightness(1.03);
  transform:translateY(-1px);
}
.excel-export-btn{
  background:linear-gradient(135deg,#e7f8ec,#f4fff6)!important;
  color:#166534!important;
  border:1px solid #b9e6c5!important;
  font-weight:800!important;
}
.excel-export-btn:hover{background:linear-gradient(135deg,#d8f4df,#edfff1)!important}
html[data-ui-theme="dark"] .home-quick-add-card.quick-add-bill{background:linear-gradient(135deg,#472b1c,#34251f)!important;border-color:#8b4b25!important}
html[data-ui-theme="dark"] .home-quick-add-card.quick-add-bill .quick-add-copy strong{color:#ffddb8!important}
html[data-ui-theme="dark"] .home-quick-add-card.quick-add-bill .quick-add-copy small{color:#e6b99b!important}
html[data-ui-theme="dark"] .excel-export-btn{background:linear-gradient(135deg,#183b27,#1e3327)!important;color:#b9f6c9!important;border-color:#376b49!important}


/* ปุ่มเพิ่มรายรับ–รายจ่าย: ใช้โทนส้มให้เข้าชุดกับปุ่มเพิ่มบิลประจำเดือน */
.home-quick-add-card.quick-add-transaction{
  background:linear-gradient(135deg,#fff0dc 0%,#fff8ef 48%,#ffffff 100%)!important;
  border:1px solid #ffd2a1!important;
  box-shadow:0 10px 24px rgba(234,112,24,.12),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.home-quick-add-card.quick-add-transaction .quick-add-icon{
  background:linear-gradient(135deg,#ff9b35,#f97316)!important;
  color:#fff!important;
  border-radius:15px;
  box-shadow:0 5px 12px rgba(249,115,22,.22);
}
.home-quick-add-card.quick-add-transaction .quick-add-arrow{
  background:#fff!important;
  color:#ea580c!important;
}
html[data-ui-theme="dark"] .home-quick-add-card.quick-add-transaction{
  background:linear-gradient(135deg,#472b1c,#34251f)!important;
  border-color:#8b4b25!important;
}
html[data-ui-theme="dark"] .home-quick-add-card.quick-add-transaction .quick-add-copy strong{
  color:#ffddb8!important;
}
html[data-ui-theme="dark"] .home-quick-add-card.quick-add-transaction .quick-add-copy small{
  color:#e6b99b!important;
}


/* October 2026 refinements: compact avatar picker, account email popup, right-docked contact bubble */
.avatar-picker{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(60px,68px));
 justify-content:start;
 gap:8px;
 margin-top:8px;
 max-width:100%;
}
.avatar-option{
 width:100%;
 aspect-ratio:1;
 min-height:60px;
 border-radius:12px;
 font-size:23px;
}
@media(max-width:600px){
 .avatar-picker{grid-template-columns:repeat(auto-fill,minmax(48px,56px));gap:6px}
 .avatar-option{min-height:48px;font-size:21px;border-radius:10px}
}
.account-email-action{margin:14px 0 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.account-email-action .btn{min-height:42px}
.account-email-action-hint{margin:0;color:var(--muted);font-size:11px;line-height:1.65;flex:1 1 260px}
.email-password-modal{
 position:fixed;inset:0;z-index:2200;display:flex;align-items:center;justify-content:center;
 padding:18px;background:rgba(31,24,55,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.email-password-modal.hidden{display:none!important}
.email-password-modal-card{
 width:min(100%,620px);max-height:min(90dvh,820px);overflow:auto;
 background:var(--card,rgba(255,255,255,.97));border:1px solid rgba(255,255,255,.8);
 border-radius:24px;padding:22px;box-shadow:0 24px 80px rgba(36,25,74,.25);
}
.email-password-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.email-password-modal-head h2{margin:0;font-size:20px}
.email-password-modal-head p{margin:5px 0 0;font-size:12px;color:var(--muted);line-height:1.65}
.email-password-modal-close{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:50%;font-size:25px;line-height:1;background:#f1edf9;color:var(--ink)}
.email-password-modal .account-email-password-form{margin-top:0;padding:0;border:0;background:transparent}
.email-password-modal .account-email-password-form .actions{display:flex;gap:8px;flex-wrap:wrap}
.email-password-modal .account-email-password-form .actions .btn{min-height:42px}
body.email-password-modal-open{overflow:hidden}
@media(max-width:600px){
 .account-email-action{align-items:stretch;flex-direction:column}
 .account-email-action .btn{width:100%}
 .email-password-modal{padding:10px;align-items:center}
 .email-password-modal-card{padding:16px;border-radius:19px;max-height:92dvh}
 .email-password-modal-head h2{font-size:17px}
 .email-password-modal .account-email-password-form .actions{flex-direction:column}
 .email-password-modal .account-email-password-form .actions .btn{width:100%}
}
/* On a fresh visit, dock the contact bubble at the right edge; remember later drags separately. */
#contactBubble{right:22px;left:auto}


/* Account page spacing fix — keep Email and LINE login blocks compact on mobile */
#page-account .account-auth-panel{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  align-content:initial!important;
  justify-content:initial!important;
}
#page-account .account-auth-panel > .panel-head,
#page-account .account-auth-panel > .account-info-row,
#page-account .account-auth-panel > .account-email-action,
#page-account .account-auth-panel > .actions,
#page-account .account-auth-panel > .note{
  position:static!important;
  flex:none!important;
  grid-row:auto!important;
  margin-top:0;
}
#page-account .account-auth-panel > .panel-head{margin-bottom:10px!important}
#page-account .account-auth-panel > .account-info-row{padding:11px 0!important}
#page-account .account-auth-panel > .account-email-action{margin:8px 0 12px!important;gap:8px!important}
#page-account .account-auth-panel > .account-email-action-hint{margin:0!important}
#page-account .account-auth-panel > .actions{margin-top:10px!important}
#page-account .account-auth-panel > .note{margin-top:12px!important}
@media(max-width:600px){
  #page-account .account-auth-panel{padding:16px!important}
  #page-account .account-auth-panel > .account-info-row{gap:8px!important;padding:10px 0!important}
  #page-account .account-auth-panel > .account-email-action{margin:8px 0 10px!important}
  #page-account .account-auth-panel > .account-email-action .btn{min-height:44px!important}
}


/* ===== Final mobile dark-mode polish (iOS-inspired graphite / deep teal) ===== */
html[data-ui-theme="dark"] .mobile-nav{
  left:12px!important;right:12px!important;
  bottom:calc(7px + env(safe-area-inset-bottom))!important;
  width:auto!important;box-sizing:border-box!important;
  border:1px solid rgba(210,232,222,.18)!important;
  border-radius:26px!important;
  overflow:hidden!important;
  padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;
  background:linear-gradient(145deg,rgba(38,47,45,.96),rgba(19,25,25,.98))!important;
  box-shadow:0 14px 36px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%)!important;
}
html[data-ui-theme="dark"] .mobile-nav button{
  color:#b9c8c0!important;background:transparent!important;
  border:1px solid transparent!important;border-radius:18px!important;
  min-height:54px!important;padding:7px 4px!important;
  line-height:1.25!important;box-shadow:none!important;
}
html[data-ui-theme="dark"] .mobile-nav button.active{
  color:#f0fff6!important;
  background:linear-gradient(145deg,rgba(42,165,103,.32),rgba(29,104,76,.28))!important;
  border-color:rgba(117,225,165,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html[data-ui-theme="dark"] .mobile-nav button span{filter:saturate(1.05)}
html[data-ui-theme="dark"] #mobileMore.mobile-more{
  left:14px!important;right:14px!important;
  bottom:calc(82px + env(safe-area-inset-bottom))!important;
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  gap:7px!important;padding:11px!important;
  border:1px solid rgba(210,232,222,.18)!important;
  border-radius:24px!important;overflow:hidden!important;
  background:linear-gradient(150deg,rgba(38,47,45,.985),rgba(20,26,26,.99))!important;
  color:#edf6f0!important;
  box-shadow:0 20px 54px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.07)!important;
  backdrop-filter:blur(24px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(140%)!important;
}
html[data-ui-theme="dark"] #mobileMore.mobile-more button{
  display:block!important;width:100%!important;min-height:48px!important;
  padding:12px 15px!important;text-align:left!important;
  border:1px solid rgba(210,232,222,.11)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(53,64,60,.92),rgba(37,46,43,.96))!important;
  color:#edf6f0!important;font-size:13px!important;font-weight:700!important;
  line-height:1.4!important;white-space:normal!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
html[data-ui-theme="dark"] #mobileMore.mobile-more button:active{
  background:linear-gradient(145deg,rgba(38,132,82,.55),rgba(29,82,62,.7))!important;
  border-color:rgba(117,225,165,.3)!important;
}
html[data-ui-theme="dark"] #mobileMore.mobile-more.hidden{display:none!important}

/* Keep the email and LINE login sections together; remove accidental flex/grid expansion. */
#page-account .account-auth-panel{
  display:flex!important;flex-direction:column!important;
  align-items:stretch!important;justify-content:flex-start!important;
  align-content:start!important;gap:0!important;
  height:auto!important;min-height:0!important;max-height:none!important;
}
#page-account .account-auth-panel > .panel-head,
#page-account .account-auth-panel > .account-info-row,
#page-account .account-auth-panel > .account-email-action,
#page-account .account-auth-panel > .actions,
#page-account .account-auth-panel > .note{
  flex:0 0 auto!important;position:static!important;
  inset:auto!important;transform:none!important;
  height:auto!important;min-height:0!important;max-height:none!important;
}
#page-account .account-auth-panel > .account-info-row{
  margin-block:0!important;padding:10px 0!important;
}
#page-account .account-auth-panel > .account-email-action{
  margin:8px 0 10px!important;padding:0!important;
}
#page-account .account-auth-panel > .account-email-action-hint{
  margin:0!important;line-height:1.5!important;
}
#page-account .account-auth-panel > .actions{margin:8px 0 0!important}
#page-account .account-auth-panel > .note{margin:10px 0 0!important}
@media(max-width:600px){
  #page-account .account-auth-panel{padding:14px!important}
  #page-account .account-auth-panel > .panel-head{margin:0 0 7px!important}
  #page-account .account-auth-panel > .account-info-row{gap:8px!important;padding:9px 0!important}
  #page-account .account-auth-panel > .account-email-action{margin:7px 0 8px!important}
}


/* Mobile layout correction: let the existing stacked transaction cards work as designed. */
#recent{width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow:visible!important}
#recent table{width:100%;max-width:100%;min-width:0!important;table-layout:auto!important;overflow:visible!important}
@media(max-width:600px){
  #recent table{display:block!important;width:100%!important;table-layout:auto!important}
  #recent thead{display:none!important}
  #recent tbody{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important;width:100%!important}
  #recent tr{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"date amount" "detail detail" "category action"!important;gap:8px 12px!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:12px!important;border:1px solid var(--line)!important;border-radius:16px!important;background:var(--card)!important;box-shadow:0 5px 16px rgba(0,0,0,.06)!important}
  #recent td{display:block!important;min-width:0!important;width:auto!important;padding:0!important;border:0!important;background:transparent!important;overflow-wrap:anywhere!important}
  #recent td[data-label="วันที่"]{grid-area:date!important}
  #recent td[data-label="รายละเอียด"]{grid-area:detail!important;padding:8px 0!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
  #recent td[data-label="หมวดหมู่"]{grid-area:category!important}
  #recent td[data-label="จำนวนเงิน"]{grid-area:amount!important;text-align:right!important;font-size:13px!important;font-weight:800!important}
  #recent td[data-label="จัดการ"]{grid-area:action!important;text-align:right!important}
  #recent td::before{content:attr(data-label)!important;display:block!important;margin-bottom:3px!important;color:var(--muted)!important;font-size:10px!important;font-weight:650!important;line-height:1.3!important}
  #recent td[data-label="รายละเอียด"] strong{font-size:13px!important;line-height:1.45!important}
}

/* Account sign-in details are separate compact cards, eliminating the large empty gap. */
#page-account .account-auth-panel{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:12px!important;height:auto!important;min-height:0!important}
#page-account .account-auth-panel>.panel-head{flex:0 0 auto!important;margin:0!important}
#page-account .account-auth-subpanel{
  display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
  gap:8px!important;flex:0 0 auto!important;width:100%!important;min-width:0!important;
  box-sizing:border-box!important;padding:12px!important;border:1px solid var(--line)!important;
  border-radius:18px!important;background:rgba(255,255,255,.46)!important;
}
html[data-ui-theme="dark"] #page-account .account-auth-subpanel{
  background:linear-gradient(145deg,rgba(42,52,49,.82),rgba(28,36,34,.88))!important;
  border-color:rgba(210,232,222,.15)!important;
}
#page-account .account-auth-subpanel .account-info-row{flex:0 0 auto!important;margin:0!important;padding:2px 0 9px!important}
#page-account .account-auth-subpanel .account-email-action{flex:0 0 auto!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:7px!important}
#page-account .account-auth-subpanel .account-email-action-hint{margin:0!important;line-height:1.5!important}
#page-account .account-auth-subpanel .actions{flex:0 0 auto!important;margin:0!important}
#page-account .account-auth-subpanel .note{flex:0 0 auto!important;margin:0!important}
@media(max-width:600px){
  #page-account .account-auth-panel{padding:14px!important;gap:10px!important}
  #page-account .account-auth-subpanel{padding:10px!important;gap:7px!important;border-radius:16px!important}
  #page-account .account-auth-subpanel .account-info-row{gap:8px!important;padding:2px 0 7px!important}
}


/* Final fix: prevent email hint from stretching the email card vertically.
   The hint originally had flex: 1 1 260px; inside a column this creates a tall blank area. */
#page-account .account-auth-subpanel,
#page-account .account-auth-subpanel.account-email-subpanel,
#page-account .account-auth-subpanel.account-line-subpanel{
  height:auto!important;min-height:0!important;max-height:none!important;
  flex:0 0 auto!important;align-self:stretch!important;
  grid-row:auto!important;grid-column:1 / -1!important;
  margin-block:0!important;
}
#page-account .account-auth-subpanel .account-email-action{
  height:auto!important;min-height:0!important;max-height:none!important;
  flex:0 0 auto!important;align-items:stretch!important;
  align-content:start!important;justify-content:flex-start!important;
}
#page-account .account-auth-subpanel .account-email-action-hint{
  flex:0 0 auto!important;align-self:stretch!important;
  width:auto!important;min-width:0!important;max-width:100%!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  margin:0!important;padding:0!important;
}
#page-account .account-email-subpanel .account-info-row,
#page-account .account-email-subpanel .account-email-action,
#page-account .account-line-subpanel .account-info-row,
#page-account .account-line-subpanel .actions,
#page-account .account-line-subpanel .note{
  position:static!important;inset:auto!important;transform:none!important;
}
@media(min-width:601px){
  #page-account .account-email-subpanel .account-email-action .btn{
    width:auto!important;min-width:220px!important;align-self:flex-start!important;
  }
}
@media(max-width:600px){
  #page-account .account-email-subpanel .account-email-action .btn{
    width:100%!important;min-height:44px!important;align-self:stretch!important;
  }
  #page-account .account-auth-subpanel{padding:12px!important}
}