/* ================================================================
   05-desktop-line-and-weather.css
   หมวด: การจัดวาง desktop, LINE, header, ปฏิทิน และสภาพอากาศ
   หมายเหตุ: ไฟล์ถูกโหลดตามลำดับใน index.html เพื่อคงลำดับ CSS เดิม
   ================================================================ */
/* ส่วนที่ 4: ปรับหน้าจอ Desktop และองค์ประกอบ LINE */
/* Desktop layout refinement: stable LINE mark, balanced hero cards and calmer spacing */
.line-brand-mark{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;flex:0 0 auto!important;white-space:nowrap!important;
  word-break:keep-all!important;overflow-wrap:normal!important;writing-mode:horizontal-tb!important;
  font-family:Arial,Helvetica,sans-serif!important;font-weight:900!important;line-height:1!important;
  letter-spacing:-.45px!important;text-align:center!important;min-width:0!important;
}
.line-brand-mark::after{pointer-events:none}
.home-line-icon{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 62px!important;width:62px!important;height:62px!important;border-radius:20px!important;background:#06c755!important;box-shadow:0 9px 20px #06c7552b!important;animation:none!important}
.home-line-icon .line-brand-mark{width:43px!important;height:31px!important;border-radius:11px!important;background:#fff!important;color:#06c755!important;font-size:12px!important;letter-spacing:-.5px!important}
.home-line-icon .line-brand-mark::after{background:#fff!important;left:7px!important;bottom:-3px!important;width:8px!important;height:6px!important}
.home-line-connect,.bills-line-connect{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:nowrap!important;white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;min-width:0!important;gap:8px!important}
.home-line-connect .line-brand-mark,.bills-line-connect .line-brand-mark{display:inline-flex!important;flex:0 0 24px!important;width:24px!important;min-width:24px!important;height:19px!important;border-radius:6px!important;background:#fff!important;color:#06a94a!important;font-size:7px!important;letter-spacing:-.25px!important}
.home-line-connect .line-brand-mark::after,.bills-line-connect .line-brand-mark::after{background:#fff!important;left:3px!important;bottom:-2px!important;width:5px!important;height:4px!important}
.home-line-card{display:grid!important;grid-template-columns:minmax(0,1fr) 220px!important;align-items:center!important;column-gap:28px!important;row-gap:14px!important;padding:26px clamp(22px,2.3vw,34px)!important;border-radius:28px!important}
.home-line-copy{min-width:0!important;align-items:center!important;gap:18px!important}
.home-line-copy>div:last-child{min-width:0!important}
.home-line-card h2{max-width:100%;overflow-wrap:break-word}
.home-line-actions{width:100%!important;min-width:0!important;align-self:center!important;gap:10px!important}
.home-line-connect{min-height:50px!important;padding:12px 12px!important;font-size:13px!important}
.home-line-test{min-height:44px!important;white-space:nowrap!important}
.home-line-foot{position:static!important;grid-column:1/-1!important;text-align:right!important;padding-top:11px!important;margin-top:0!important;border-top:1px solid #ffffffa8;font-size:10px!important;line-height:1.6!important}
.bills-line-hero{grid-template-columns:72px minmax(0,1fr) minmax(205px,230px)!important;column-gap:22px!important;row-gap:14px!important;padding:26px clamp(22px,2.3vw,34px)!important;border-radius:28px!important;align-items:center!important}
#billsLineHero .bills-line-orb{display:flex!important;align-items:center!important;justify-content:center!important;width:64px!important;height:64px!important;min-width:64px!important;flex:0 0 64px!important;border-radius:20px!important;background:#06c755!important;border:0!important;box-shadow:0 9px 20px #06c7552b!important;overflow:visible!important;animation:none!important}
#billsLineHero .bills-line-orb .line-brand-mark{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:43px!important;height:31px!important;min-width:43px!important;flex:0 0 43px!important;border-radius:11px!important;background:#fff!important;color:#06c755!important;font-size:12px!important;letter-spacing:-.5px!important;white-space:nowrap!important;writing-mode:horizontal-tb!important}
#billsLineHero .bills-line-orb .line-brand-mark::after{background:#fff!important;left:7px!important;bottom:-3px!important;width:8px!important;height:6px!important}
.bills-line-actions{width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
.bills-line-connect{min-height:50px!important;padding:12px 10px!important;font-size:13px!important}
.bills-line-test{min-height:44px!important;white-space:nowrap!important}
.bills-line-note{grid-column:2/4!important;font-size:11px!important;line-height:1.7!important;padding-top:13px!important}
@media(min-width:901px){
 .app{grid-template-columns:248px minmax(0,1fr)!important}
 .sidebar{padding:27px 18px!important;gap:10px!important}
 .nav{padding:13px 15px!important;border-radius:17px!important;line-height:1.45!important}
 .main{max-width:1740px!important;padding:30px clamp(24px,2.6vw,48px)!important}
 .top{gap:22px!important;align-items:center!important;margin-bottom:25px!important}
 .top-actions{gap:9px!important;justify-content:flex-end!important}
 .top-actions>*{min-height:46px}
 .stats{gap:16px!important}
 .stat{padding:22px!important}
 .layout{gap:18px!important}
 .panel{padding:22px!important}
}
@media(min-width:901px) and (max-width:1250px){
 .app{grid-template-columns:215px minmax(0,1fr)!important}
 .main{padding:24px 22px!important}
 .top{align-items:flex-start!important;flex-direction:column!important}
 .top-actions{justify-content:flex-start!important}
 .home-line-card{grid-template-columns:minmax(0,1fr) 200px!important;gap:18px!important}
 .bills-line-hero{grid-template-columns:62px minmax(0,1fr) 195px!important;gap:15px!important}
}
@media(max-width:900px){
 .home-line-card{display:block!important;padding:18px!important}
 .home-line-copy{align-items:flex-start!important;gap:12px!important}
 .home-line-icon{width:48px!important;height:48px!important;flex-basis:48px!important;border-radius:15px!important}
 .home-line-icon .line-brand-mark{width:35px!important;height:26px!important;font-size:10px!important}
 .home-line-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;min-width:0!important;margin-top:14px!important;gap:8px!important}
 .home-line-connect,.bills-line-connect{font-size:11px!important;padding:10px 7px!important;min-height:44px!important;gap:5px!important}
 .home-line-connect .line-brand-mark,.bills-line-connect .line-brand-mark{width:20px!important;min-width:20px!important;flex-basis:20px!important;height:16px!important;font-size:6px!important}
 .home-line-foot{margin-top:10px!important;padding-top:9px!important;text-align:left!important}
 .bills-line-hero{grid-template-columns:48px minmax(0,1fr)!important;gap:12px!important;padding:16px!important}
 #billsLineHero .bills-line-orb{width:46px!important;height:46px!important;min-width:46px!important;flex-basis:46px!important;border-radius:15px!important}
 #billsLineHero .bills-line-orb .line-brand-mark{width:34px!important;min-width:34px!important;flex-basis:34px!important;height:26px!important;font-size:9px!important}
 .bills-line-actions{grid-column:1/-1!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important}
 .bills-line-note{grid-column:1/-1!important}
}
@media(max-width:420px){.home-line-actions,.bills-line-actions{grid-template-columns:minmax(0,1fr)!important}.home-line-copy{gap:10px!important}.home-line-icon{width:43px!important;height:43px!important;flex-basis:43px!important}}


/* Fix LINE-link modal: keep the OA button horizontal and prevent the logo from stretching */
#lineLinkModal .line-modal-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;align-items:stretch!important;width:100%!important}
#lineLinkModal #lineOpenOA{grid-column:1/-1!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;min-height:48px!important;padding:12px 16px!important;white-space:nowrap!important;overflow:visible!important;flex:none!important;border-radius:14px!important;background:#effcf4!important;border:1px solid #c8f2d8!important;color:#16743a!important;font-size:14px!important;font-weight:700!important;line-height:1.35!important}
#lineLinkModal #lineOpenOA .line-btn-content{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-wrap:nowrap!important;gap:9px!important;width:auto!important;max-width:100%!important;min-width:0!important;white-space:nowrap!important;line-height:1.35!important}
#lineLinkModal #lineOpenOA .line-logo.line-brand-mark{display:inline-flex!important;position:relative!important;flex:0 0 25px!important;width:25px!important;min-width:25px!important;max-width:25px!important;height:20px!important;min-height:20px!important;background:#06c755!important;color:#fff!important;border-radius:6px!important;font-size:7px!important;letter-spacing:-.3px!important;line-height:1!important;writing-mode:horizontal-tb!important;white-space:nowrap!important}
#lineLinkModal #lineOpenOA .line-logo.line-brand-mark:after{background:#fff!important;left:4px!important;bottom:-2px!important;width:5px!important;height:4px!important}
#lineLinkModal #lineCopyCode,#lineLinkModal #lineCloseModal{width:100%!important;min-width:0!important;min-height:46px!important;margin:0!important;white-space:nowrap!important}
@media(max-width:480px){#lineLinkModal .line-modal-actions{grid-template-columns:minmax(0,1fr)!important}#lineLinkModal #lineOpenOA{grid-column:1!important}#lineLinkModal #lineCopyCode,#lineLinkModal #lineCloseModal{grid-column:1!important}}


/* Final LINE brand/modal override: isolated icon dimensions and stable desktop layout */
#lineLinkModal [role="dialog"]{box-sizing:border-box;width:min(100%,430px);max-height:calc(100dvh - 32px);overflow-y:auto;padding:clamp(18px,4vw,26px)!important}
#lineLinkModal .line-modal-brand{display:flex;justify-content:center;align-items:center;min-height:42px;margin-bottom:8px}
#lineLinkModal .line-modal-logo.line-brand-mark{all:unset;box-sizing:border-box;display:inline-flex!important;align-items:center!important;justify-content:center!important;position:relative!important;flex:0 0 48px!important;width:48px!important;min-width:48px!important;max-width:48px!important;height:38px!important;min-height:38px!important;max-height:38px!important;border-radius:12px!important;background:#06c755!important;color:#fff!important;font:900 12px/1 Arial,sans-serif!important;letter-spacing:-.35px!important;writing-mode:horizontal-tb!important;white-space:nowrap!important}
#lineLinkModal .line-modal-logo.line-brand-mark:after{content:"";position:absolute;left:8px;bottom:-4px;width:9px;height:7px;background:#06c755;clip-path:polygon(0 0,100% 0,0 100%)}
#lineLinkModal .line-modal-actions.actions{box-sizing:border-box;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:stretch!important;justify-content:stretch!important;gap:10px!important;width:100%!important;margin-top:14px!important}
#lineLinkModal .line-modal-actions #lineOpenOA{box-sizing:border-box;grid-column:1/-1!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:10px!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:50px!important;height:auto!important;padding:12px 16px!important;white-space:normal!important;overflow:hidden!important;flex:none!important;border-radius:14px!important;background:#effcf4!important;border:1px solid #c8f2d8!important;color:#16743a!important;font-size:14px!important;font-weight:750!important;line-height:1.35!important;text-align:center!important}
#lineLinkModal .line-modal-actions #lineOpenOA .line-btn-content{all:unset;box-sizing:border-box;display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:9px!important;flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:100%!important;white-space:nowrap!important;line-height:1.35!important}
#lineLinkModal .line-modal-actions #lineOpenOA .line-logo.line-brand-mark{all:unset;box-sizing:border-box;position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 26px!important;width:26px!important;min-width:26px!important;max-width:26px!important;height:21px!important;min-height:21px!important;max-height:21px!important;border-radius:6px!important;background:#06c755!important;color:#fff!important;font:900 7px/1 Arial,sans-serif!important;letter-spacing:-.3px!important;writing-mode:horizontal-tb!important;white-space:nowrap!important}
#lineLinkModal .line-modal-actions #lineOpenOA .line-logo.line-brand-mark:after{content:"";position:absolute;left:4px;bottom:-2px;width:5px;height:4px;background:#06c755;clip-path:polygon(0 0,100% 0,0 100%)}
#lineLinkModal .line-open-label{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0;white-space:nowrap;line-height:1.35}
#lineLinkModal .line-modal-actions #lineCopyCode,#lineLinkModal .line-modal-actions #lineCloseModal{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:100%!important;min-width:0!important;max-width:100%!important;min-height:46px!important;margin:0!important;white-space:nowrap!important}
@media(max-width:480px){#lineLinkModal{padding:12px!important}#lineLinkModal .line-modal-actions.actions{grid-template-columns:minmax(0,1fr)!important}#lineLinkModal .line-modal-actions #lineOpenOA{grid-column:1!important}#lineLinkModal .line-modal-actions #lineCopyCode,#lineLinkModal .line-modal-actions #lineCloseModal{grid-column:1!important}#lineLinkModal .line-open-label{white-space:normal}}


/* Final mobile usability pass: keep the transaction wizard above the dock */
.wizard-backdrop{z-index:3000!important}
#lineLinkModal{z-index:3100!important}
#celebrateLayer{z-index:3200!important}
.month-picker-wrap{display:flex;flex-direction:column;gap:5px;min-width:190px;flex:0 0 auto;color:#166534;font-size:11px;font-weight:800;line-height:1.2}
.month-picker-wrap>span{padding-left:3px;letter-spacing:.15px}
.month-control-row{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:stretch;gap:6px;width:100%;min-width:0}
.month-step{position:relative;display:inline-flex!important;align-items:center!important;justify-content:center!important;align-self:stretch;box-sizing:border-box;min-width:0;width:38px;height:45px;min-height:45px;padding:0!important;overflow:hidden;border:1.5px solid #a9e6bd!important;border-radius:15px!important;background:linear-gradient(145deg,#ffffff 0%,#edfff3 58%,#d9fbe5 100%)!important;color:#167342!important;font:900 25px/1 'Trebuchet MS',Arial,sans-serif!important;box-shadow:0 4px 0 #c4efd2,0 7px 14px rgba(22,101,52,.10),inset 0 1px 0 #fff!important;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease!important}
.month-step:hover{transform:translateY(-2px);background:linear-gradient(145deg,#fff 0%,#dcfce7 100%)!important;box-shadow:0 6px 0 #b5e8c7,0 10px 18px rgba(22,101,52,.14),inset 0 1px 0 #fff!important}
.month-step:active{transform:translateY(2px) scale(.97);box-shadow:0 1px 0 #b5e8c7,0 3px 7px rgba(22,101,52,.10)!important}
.month-step:focus-visible{outline:3px solid #86efac!important;outline-offset:2px}
.month-step#monthPrev{border-top-left-radius:18px!important;border-bottom-right-radius:18px!important}
.month-step#monthNext{border-top-right-radius:18px!important;border-bottom-left-radius:18px!important}
.top-actions .month-picker-wrap #month{box-sizing:border-box;display:block;min-width:0;width:100%;max-width:100%;height:45px;min-height:45px;border:1.5px solid #86d8a4!important;border-radius:13px!important;background:linear-gradient(135deg,#f0fdf4,#fff)!important;color:#14532d!important;font-weight:750;font-size:14px!important;letter-spacing:-.25px;text-align:center;box-shadow:0 5px 16px rgba(22,101,52,.09),inset 0 1px 0 #fff!important;accent-color:#16a34a;padding:8px 4px!important;-webkit-appearance:none;appearance:none;overflow:hidden}
.month-picker-wrap:focus-within{filter:drop-shadow(0 0 3px rgba(34,197,94,.2))}
@media(max-width:900px){
 .main{padding-bottom:calc(132px + env(safe-area-inset-bottom))!important}
 .month-picker-wrap{grid-column:1/-1;min-width:0;width:100%;gap:6px;font-size:12px}
 .month-control-row{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
 .month-step{width:44px;height:50px;min-height:50px;font-size:28px!important}
 .top-actions .month-picker-wrap #month{width:100%;min-width:0;max-width:100%;height:50px;min-height:50px;font-size:14px!important;padding:8px 2px!important;border-radius:15px!important}
 /* Make the LINE recommendation a compact status card on phones */
 .home-line-card{padding:12px!important;margin-bottom:12px!important;border-radius:19px!important;gap:8px!important;box-shadow:0 7px 20px rgba(22,101,52,.055)!important}
 .home-line-card:before{width:130px;height:130px;top:-95px;right:-15px}
 .home-line-copy{align-items:center!important;gap:10px!important}
 .home-line-icon{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:12px!important;animation:none!important}
 .home-line-icon .line-brand-mark{font-size:9px!important}
 .home-line-icon .line-brand-mark:after{left:6px!important;bottom:4px!important;width:5px!important;height:4px!important}
 .home-line-eyebrow{display:none!important}
 .home-line-card h2{font-size:14px!important;line-height:1.35!important;margin:0 0 3px!important}
 .home-line-card p{display:none!important}
 .home-line-status{margin-top:4px!important;padding:3px 7px!important;font-size:9px!important;gap:5px!important;max-width:100%;line-height:1.3}
 .home-line-status-dot{width:6px!important;height:6px!important;flex-basis:6px!important}
 .home-line-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:7px!important;margin-top:9px!important}
 .home-line-connect,.home-line-test{min-height:38px!important;padding:8px 6px!important;font-size:10px!important;border-radius:12px!important;gap:5px!important;white-space:normal!important;line-height:1.25!important}
 .home-line-connect .line-brand-mark{width:18px!important;min-width:18px!important;flex-basis:18px!important;height:15px!important;font-size:5.5px!important}
 .home-line-foot{display:none!important}
 /* A modal must cover the bottom navigation while its action buttons are in use */
 .wizard-backdrop{align-items:center!important;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;overflow-y:auto!important}
 .wizard-card{width:100%!important;max-width:510px!important;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)!important;overflow-y:auto!important;padding:18px 16px!important;border-radius:23px!important;margin:auto!important}
 .wizard-actions{position:sticky!important;bottom:0!important;z-index:2!important;padding:10px 0 max(4px,env(safe-area-inset-bottom))!important;margin-top:14px!important;background:linear-gradient(#fff0,#fff 20%)!important}
 .wizard-actions .btn{min-height:46px!important}
}
@media(max-width:420px){
 .home-line-card{padding:10px!important}
 .home-line-card h2{font-size:13px!important}
 .home-line-actions{grid-template-columns:minmax(0,1fr)!important}
 .home-line-connect,.home-line-test{min-height:36px!important}
 .wizard-card{padding:16px 13px!important}
 .wizard-choice{padding:12px 7px!important}
 .wizard-choice .big{font-size:29px!important}
}

/* Supabase LINE Login controls */
.auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#7b8d82;font-size:12px}
.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:#e3eee6}
.line-auth-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:#06c755!important;color:#fff!important;border-color:#06c755!important;font-weight:750}
.line-auth-btn .line-brand-mark{background:#fff;color:#06c755;width:25px;height:20px;border-radius:6px;font-size:8px}
.line-auth-btn .line-brand-mark:after{background:#fff}
.auth-line-hint{font-size:11px;line-height:1.65;color:#668173;text-align:center;margin:10px 2px 0}
@media(max-width:900px){.auth-line-hint{font-size:10px}#lineIdentityBtn{font-size:11px;padding:8px}}

/* LINE icon consistency: use one clean speech-bubble mark instead of CSS-drawn text bubbles. */
.line-brand-mark,
.line-logo.line-brand-mark{
  color:transparent!important;
  font-size:0!important;
  letter-spacing:0!important;
  background-color:transparent!important;
  background-image:url("../assets/images/line-mark.svg")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.line-brand-mark::after,
.line-logo.line-brand-mark::after{
  content:none!important;
  display:none!important;
}
.line-auth-btn .line-brand-mark,
.home-line-connect .line-brand-mark,
.bills-line-connect .line-brand-mark,
#lineLinkModal #lineOpenOA .line-logo.line-brand-mark{
  background-image:url("../assets/images/line-mark-white.svg")!important;
}

/* Header refresh: polished desktop toolbar and spacious mobile control card */
.top{gap:clamp(14px,2vw,28px);align-items:center}
.top>div:first-child{min-width:190px;flex:0 1 290px}
.top-actions{gap:9px;align-items:center;justify-content:flex-end;flex:1 1 720px;min-width:0}
.top-actions .weather-pill{min-height:46px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.95);border-radius:17px;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(220,252,231,.68));box-shadow:0 9px 22px rgba(22,101,52,.07);padding:10px 13px;max-width:230px}
.top-actions #accountLabel{display:flex;align-items:center;min-height:44px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.58);font-size:12px!important}
.top-actions #signOutBtn{background:linear-gradient(135deg,#fff1f2,#ffe4e6)!important;color:#be123c!important;border:1px solid #fecdd3!important;font-weight:800;box-shadow:0 5px 14px rgba(190,18,60,.08)!important}
.top-actions #signOutBtn:hover{background:linear-gradient(135deg,#ffe4e6,#fecdd3)!important;box-shadow:0 8px 18px rgba(190,18,60,.14)!important;transform:translateY(-1px)}
.top-actions #addTop{background:linear-gradient(120deg,#22c55e,#15803d)!important;color:white!important;border:1px solid rgba(255,255,255,.25)!important;font-weight:850;box-shadow:0 9px 20px rgba(22,163,74,.2)!important}
.month-picker-wrap{min-width:232px;max-width:270px}
.month-display-shell{position:relative;min-width:0;width:100%;height:45px}
.month-display-label{box-sizing:border-box;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-width:0;padding:8px 30px 8px 10px;border:1.5px solid #86d8a4;border-radius:14px;background:linear-gradient(135deg,#f0fdf4,#fff);color:#14532d;font-size:14px;font-weight:850;letter-spacing:-.2px;box-shadow:0 5px 16px rgba(22,101,52,.09),inset 0 1px 0 #fff;pointer-events:none}
.month-display-label #monthDisplayText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.month-calendar-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:18px;color:#166534}
.top-actions .month-picker-wrap .month-native-input{position:absolute;inset:0;z-index:2;width:100%;height:45px;min-height:45px;opacity:.015;cursor:pointer;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
.month-display-shell:focus-within .month-display-label{outline:3px solid #86efac;outline-offset:2px}
@media(min-width:901px){
 .top-actions{flex-wrap:wrap;row-gap:9px}
 .top-actions .weather-pill{flex:1 1 175px}
 .month-picker-wrap{flex:0 1 240px}
 .top-actions #accountLabel{flex:0 1 155px}
 .top-actions #signOutBtn,.top-actions #addTop{min-height:46px;padding:11px 15px;border-radius:15px}
}
@media(max-width:900px){
 .top{padding:18px 16px 16px!important;overflow:hidden}
 .top>div:first-child{min-width:0}
 .top-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:9px!important;margin-top:15px!important;align-items:stretch!important}
 .top-actions .weather-pill{grid-column:1/-1;max-width:none;min-height:52px;border-radius:16px}
 .top-actions .month-picker-wrap{grid-column:1/-1;min-width:0;width:100%;max-width:none}
 .month-control-row{grid-template-columns:44px minmax(0,1fr) 44px!important;gap:8px!important}
 .month-step{height:48px!important;min-height:48px!important;border-radius:15px!important}
 .month-display-shell,.month-display-label,.top-actions .month-picker-wrap .month-native-input{height:48px;min-height:48px}
 .month-display-label{font-size:14px;border-radius:15px}
 .top-actions #accountLabel{display:none!important}
 .top-actions #lineIdentityBtn{grid-column:1/-1;width:100%;justify-content:center}
 .top-actions #signOutBtn,.top-actions #addTop{width:100%;min-width:0;min-height:46px;white-space:nowrap;border-radius:15px!important;font-size:13px;padding:11px 9px!important}
}
@media(max-width:390px){
 .top{padding:15px 12px 13px!important;border-radius:22px!important}
 .top-actions{gap:7px!important}
 .top-actions #signOutBtn,.top-actions #addTop{font-size:12px;padding:10px 6px!important}
 .month-display-label{font-size:13px;padding-left:5px;padding-right:26px}
 .month-calendar-icon{right:7px}
}


/* ================================================================
   HALLOWEEN 2026 — seasonal theme + cute ghosts drifting across screen
   Decorative layer has pointer-events:none and does not affect app logic.
   ================================================================ */
:root{
  --ink:#2b1747;
  --muted:#82718f;
  --pink:#ff8c42;
  --pink2:#fff0df;
  --purple:#9b5de5;
  --lav:#f0e4ff;
  --mint:#e9dcff;
  --green:#8b43c6;
  --blue:#e5e2ff;
  --orange:#fff0d9;
  --line:#eadcf7;
  --shadow:0 12px 34px #49206d18;
}
body{
  background:
    radial-gradient(ellipse at 8% 0%,#ffe1bd 0,transparent 32%),
    radial-gradient(ellipse at 92% 5%,#e7d2ff 0,transparent 35%),
    radial-gradient(ellipse at 70% 85%,#ffe8d2 0,transparent 26%),
    #fff9f2;
}
.brand span{color:#ff7a24}
.nav.active,.nav:hover{background:#fff0df;color:#a94d0b}
.btn.primary,.primary,.add-btn{background:linear-gradient(135deg,#ff8a24,#ee5b20);color:#fff;box-shadow:0 8px 20px #e56a272b}
.card,.panel,.summary-card{border-color:#fffaf5}
.halloween-ghost-layer{
  position:fixed;inset:0;z-index:19;overflow:hidden;pointer-events:none;
  contain:layout paint;
}
.halloween-ghost{
  position:absolute;left:-12vw;top:14vh;display:block;
  font-family:system-ui,sans-serif;font-size:clamp(32px,4.2vw,58px);
  line-height:1;filter:drop-shadow(0 7px 8px #5d32752a);
  opacity:0;will-change:transform,opacity;
  animation:halloween-float-across 18s linear infinite;
}
.ghost-one{top:17%;animation-delay:0s;animation-duration:19s}
.ghost-two{top:39%;font-size:clamp(27px,3.4vw,48px);animation-delay:4s;animation-duration:23s}
.ghost-three{top:63%;animation-delay:8s;animation-duration:20s}
.ghost-four{top:28%;font-size:clamp(25px,3vw,42px);animation-delay:11s;animation-duration:16s}
.ghost-five{top:78%;font-size:clamp(25px,3.2vw,44px);animation-delay:14s;animation-duration:24s}
.halloween-pumpkin{
  position:fixed;right:16px;bottom:90px;z-index:18;pointer-events:none;
  font-size:clamp(27px,3.3vw,43px);filter:drop-shadow(0 6px 8px #9b5de533);
  animation:pumpkin-bob 3.2s ease-in-out infinite;
}
@keyframes halloween-float-across{
  0%{transform:translate3d(-12vw,0,0) rotate(-12deg) scale(.82);opacity:0}
  7%{opacity:.96}
  24%{transform:translate3d(28vw,-24px,0) rotate(8deg) scale(1.04)}
  50%{transform:translate3d(57vw,22px,0) rotate(-8deg) scale(.95)}
  76%{transform:translate3d(88vw,-17px,0) rotate(10deg) scale(1.08)}
  93%{opacity:.92}
  100%{transform:translate3d(116vw,10px,0) rotate(-10deg) scale(.9);opacity:0}
}
@keyframes pumpkin-bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-10px) rotate(5deg)}}
@media(max-width:700px){
  .halloween-ghost{font-size:34px}
  .ghost-one{top:12%}.ghost-two{top:32%}.ghost-three{top:54%}.ghost-four{top:72%}.ghost-five{top:87%}
  .halloween-pumpkin{right:10px;bottom:78px;font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  .halloween-ghost,.halloween-pumpkin{animation:none!important}
  .halloween-ghost{display:none}
}


/* Seasonal calendar, responsive home shortcuts, and polished month control */
:root{--season-primary:#22b86b;--season-secondary:#8ce8b1;--season-deep:#15803d;--season-surface:#effdf5;--season-surface-2:#e6f8ee}
.festival-note{display:flex;align-items:flex-start;gap:9px;max-width:520px;margin-top:10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--season-primary) 22%,white);border-radius:15px;background:linear-gradient(120deg,color-mix(in srgb,var(--season-surface) 88%,white),rgba(255,255,255,.72));box-shadow:0 6px 18px color-mix(in srgb,var(--season-primary) 10%,transparent);color:var(--ink);min-height:55px;box-sizing:border-box}
.festival-note-icon{flex:0 0 29px;width:29px;height:29px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--season-secondary) 32%,white);font-size:18px}
.festival-note strong,.festival-note small{display:block;line-height:1.4}.festival-note strong{font-size:12px;font-weight:900;color:var(--season-deep)}.festival-note small{font-size:10.5px;color:var(--muted);margin-top:2px}
.home-quick-add{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 14px}
.home-quick-add-card{display:flex;align-items:center;gap:12px;min-width:0;padding:15px 16px;border-radius:21px;border:1px solid rgba(255,255,255,.95);text-align:left;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;box-shadow:0 10px 24px rgba(38,76,62,.07),inset 0 1px 0 rgba(255,255,255,.9)}
.home-quick-add-card:hover{transform:translateY(-2px);box-shadow:0 15px 28px rgba(38,76,62,.12)}.quick-add-transaction{background:linear-gradient(120deg,color-mix(in srgb,var(--season-surface) 88%,white),rgba(255,255,255,.96))}.quick-add-bill{background:linear-gradient(120deg,color-mix(in srgb,var(--season-surface-2) 82%,white),rgba(255,255,255,.96))}
.quick-add-icon{display:grid;place-items:center;flex:0 0 45px;width:45px;height:45px;border-radius:15px;background:color-mix(in srgb,var(--season-secondary) 30%,white);font-size:23px}.quick-add-bill .quick-add-icon{background:color-mix(in srgb,var(--season-primary) 13%,white)}.quick-add-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.quick-add-copy strong{font-size:14px;line-height:1.3;color:var(--ink);font-weight:900}.quick-add-copy small{font-size:11px;line-height:1.4;color:var(--muted)}.quick-add-arrow{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;border-radius:9px;background:rgba(255,255,255,.8);color:var(--season-deep);font-size:16px;font-weight:900}
/* Make the month control feel like a compact date-navigation widget */
.month-picker-wrap>span{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.25px}.month-control-row{gap:8px}.month-step{width:42px!important;height:45px!important;border-radius:15px!important;border:1px solid color-mix(in srgb,var(--season-primary) 40%,white)!important;background:linear-gradient(145deg,#fff,var(--season-surface-2))!important;color:var(--season-deep)!important;font-size:22px!important;font-weight:900!important;box-shadow:0 4px 0 color-mix(in srgb,var(--season-primary) 18%,white),0 8px 16px color-mix(in srgb,var(--season-primary) 12%,transparent)!important;transition:transform .18s ease,box-shadow .18s ease!important}.month-step:hover{transform:translateY(-2px)!important;box-shadow:0 6px 0 color-mix(in srgb,var(--season-primary) 15%,white),0 12px 20px color-mix(in srgb,var(--season-primary) 17%,transparent)!important}.month-step:active{transform:translateY(1px)!important;box-shadow:0 2px 0 color-mix(in srgb,var(--season-primary) 18%,white)!important}.month-display-label{border:1.5px solid color-mix(in srgb,var(--season-primary) 48%,white)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--season-surface) 86%,white),#fff 70%,color-mix(in srgb,var(--season-surface-2) 70%,white))!important;color:var(--season-deep)!important;box-shadow:0 7px 18px color-mix(in srgb,var(--season-primary) 11%,transparent),inset 0 1px 0 white!important}.month-calendar-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:color-mix(in srgb,var(--season-secondary) 27%,white);color:var(--season-deep)!important;font-size:15px!important}
body:not(.auth-required) .btn.primary,body:not(.auth-required) .primary,body:not(.auth-required) .add-btn{background:linear-gradient(135deg,var(--season-primary),var(--season-deep));}
.halloween-ghost-layer{z-index:8}.halloween-ghost{filter:drop-shadow(0 7px 8px color-mix(in srgb,var(--season-deep) 22%,transparent));font-size:clamp(34px,4vw,54px);animation-duration:28s!important}.ghost-one{top:21%;animation-delay:0s!important}.ghost-two{top:66%;font-size:clamp(27px,3vw,42px);animation-delay:14s!important;animation-duration:32s!important}.halloween-pumpkin{display:none;z-index:8}.seasonal-decoration-layer{z-index:8}
@media(max-width:900px){.festival-note{max-width:none;margin-top:9px;padding:9px 10px;min-height:51px}.festival-note strong{font-size:11.5px}.festival-note small{font-size:10px}.home-quick-add{gap:8px;margin-bottom:10px}.home-quick-add-card{padding:12px 10px;gap:8px;border-radius:17px}.quick-add-icon{flex-basis:38px;width:38px;height:38px;border-radius:12px;font-size:20px}.quick-add-copy strong{font-size:12px}.quick-add-copy small{font-size:10px}.quick-add-arrow{flex-basis:22px;width:22px;height:22px;font-size:13px}.month-step{width:42px!important}}
@media(max-width:390px){.home-quick-add-card{padding:10px 8px;gap:7px}.quick-add-icon{flex-basis:32px;width:32px;height:32px;font-size:18px}.quick-add-copy strong{font-size:11px}.quick-add-copy small{font-size:9px}.quick-add-arrow{display:none}.festival-note{border-radius:13px}.month-step{width:38px!important}}
@media(prefers-reduced-motion:reduce){.home-quick-add-card,.month-step{transition:none!important}.halloween-ghost{display:none!important}}
/* Seasonal color system overrides the fixed Halloween palette above */
body{background:radial-gradient(ellipse at 8% 0%,color-mix(in srgb,var(--season-secondary) 34%,white) 0,transparent 34%),radial-gradient(ellipse at 92% 5%,color-mix(in srgb,var(--season-primary) 15%,white) 0,transparent 36%),radial-gradient(ellipse at 70% 85%,color-mix(in srgb,var(--season-surface-2) 75%,white) 0,transparent 28%),#fffdfd!important;transition:background .6s ease}
.brand span{color:var(--season-deep)!important}.nav.active,.nav:hover{background:linear-gradient(120deg,var(--season-surface),var(--season-surface-2))!important;color:var(--season-deep)!important}
.home-line-card{background:linear-gradient(125deg,color-mix(in srgb,var(--season-surface) 85%,white),rgba(255,255,255,.78),color-mix(in srgb,var(--season-surface-2) 75%,white))!important}

/* Mobile greeting refinement: auto-fit one-line text and a compact top context zone */
.top-intro{flex:1 1 330px;min-width:0!important;display:flex;flex-direction:column;gap:0}
.date-glass{position:relative;display:inline-flex;align-self:flex-start;align-items:center;width:max-content;max-width:100%;box-sizing:border-box;overflow:hidden;padding:7px 13px!important;margin:0 0 9px;border-radius:999px;border:1px solid rgba(255,255,255,.92);background:linear-gradient(120deg,rgba(255,255,255,.72),rgba(255,255,255,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(255,255,255,.25),0 6px 18px rgba(91,70,135,.08);backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%);font-weight:750;letter-spacing:.1px}
.date-glass::after{content:"";position:absolute;inset:-40% auto -40% -45%;width:28%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:dateGlassShimmer 5.8s ease-in-out infinite;pointer-events:none}
@keyframes dateGlassShimmer{0%,55%{left:-45%;opacity:0}65%{opacity:.85}100%{left:130%;opacity:0}}
.top-context-row{display:flex;align-items:stretch;gap:8px;width:100%;max-width:760px;margin:0 0 9px;min-width:0}
.top-context-row .weather-pill{flex:0 0 auto;max-width:210px;min-width:140px;margin:0}
.top-context-row .festival-note{flex:1 1 260px;min-width:0;max-width:none;margin:0;min-height:46px;padding:7px 9px;align-items:center}
.top-context-row .festival-note-icon{width:27px;height:27px;flex-basis:27px}
.top-context-row .festival-note strong{font-size:11.5px}
.top-context-row .festival-note small{font-size:10px;line-height:1.3}
.top-intro h1{display:flex;align-items:center;gap:7px;min-width:0;min-height:0!important;margin:2px 0 4px;line-height:1.22;white-space:nowrap}
#greetingText{display:inline-block;flex:0 1 auto;min-width:0;max-width:100%;white-space:nowrap;line-height:1.2;overflow:visible}
#helloSparkle{flex:0 0 auto}
#greetingSub{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip;min-height:0!important;line-height:1.45}
#greetingText.greeting-changing,#greetingSub.greeting-changing{opacity:0;filter:blur(4px);transform:translateY(3px) scale(.99)}
@media(max-width:900px){
 .top{align-items:stretch!important;flex-direction:column!important;gap:0!important}
 .top-intro{width:100%;flex:none}
 .date-glass{margin-bottom:8px;padding:6px 11px!important;font-size:11px}
 .top-context-row{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;margin-bottom:9px}
 .top-context-row .weather-pill{max-width:none;width:100%;min-width:0;min-height:43px;box-sizing:border-box}
 .top-context-row .festival-note{width:100%;min-height:48px;box-sizing:border-box}
 .top-intro h1{margin:1px 0 3px;gap:5px}
 .top-actions{margin-top:12px!important}
}
@media(max-width:390px){
 .top-context-row{gap:6px}
 .top-context-row .weather-pill{min-height:40px;padding:6px 9px!important}
 .top-context-row .festival-note{padding:7px 8px;min-height:45px}
 .top-context-row .festival-note small{font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){.date-glass::after{animation:none!important;display:none!important}}

/* Home refinements: centered greeting, fast daily-expense entry, LINE at the bottom */
@media(max-width:900px){
 .top{display:flex!important;flex-direction:column!important;align-items:stretch!important;text-align:center!important;gap:12px!important}
 .top-intro{width:100%;text-align:center!important;margin:0 auto 8px!important}
 .top-intro h1,.top-intro .sub{max-width:100%;text-align:center!important;margin-left:auto!important;margin-right:auto!important}
 .top-context-row{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:100%}
 .weather-pill,.festival-note{width:min(100%,520px)!important;max-width:520px!important;box-sizing:border-box!important;text-align:left!important}
 .date-glass{display:table!important;margin:0 auto 10px!important}
 .top-actions{width:100%;justify-content:center!important;text-align:left!important}
 .home-line-card{margin-top:18px!important}
}
.home-today-expenses{padding:clamp(15px,2vw,22px);border-color:rgba(255,255,255,.9);background:linear-gradient(135deg,rgba(255,255,255,.94),color-mix(in srgb,var(--season-surface) 35%,white));}
.today-expense-total{white-space:nowrap;font-size:clamp(17px,2vw,22px);font-weight:850;color:var(--season-deep,#166534);background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.9);border-radius:15px;padding:8px 12px;box-shadow:inset 0 1px 0 #fff,0 5px 15px rgba(42,64,52,.05)}
.today-expense-add{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid color-mix(in srgb,var(--season-primary,#16a34a) 24%,white);border-radius:18px;padding:12px 14px;background:linear-gradient(110deg,color-mix(in srgb,var(--season-surface,#dcfce7) 78%,white),rgba(255,255,255,.94));color:var(--ink);cursor:pointer;box-shadow:0 8px 20px rgba(39,70,53,.06),inset 0 1px 0 #fff;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.today-expense-add:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(39,70,53,.1)}
.today-expense-add-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:13px;background:var(--season-primary,#16a34a);color:#fff;font-size:24px;font-weight:500}
.today-expense-add>span:nth-child(2){display:grid;gap:3px;flex:1;min-width:0}.today-expense-add strong{font-size:13px}.today-expense-add small{font-size:11px;color:var(--muted);line-height:1.45}
.today-expense-list{margin-top:8px}.today-expense-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid rgba(130,145,135,.13)}.today-expense-row:last-child{border-bottom:0}.today-expense-row-icon{display:grid;place-items:center;flex:0 0 35px;width:35px;height:35px;border-radius:12px;background:color-mix(in srgb,var(--season-surface,#dcfce7) 65%,white);font-size:18px}.today-expense-row-copy{display:grid;gap:3px;min-width:0;flex:1}.today-expense-row-copy strong{font-size:12px;overflow-wrap:anywhere}.today-expense-row-copy small{font-size:10px;color:var(--muted)}.today-expense-row-amount{white-space:nowrap;font-size:12px;color:#d84b75}
.daily-expense-wizard .daily-expense-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}.daily-expense-preset{display:flex;align-items:center;gap:10px;min-width:0;padding:12px 10px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.85);color:var(--ink);text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease}.daily-expense-preset span{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--season-surface,#dcfce7) 65%,white);font-size:20px}.daily-expense-preset strong{font-size:12px;overflow-wrap:anywhere}.daily-expense-preset.selected{border-color:var(--season-primary,#16a34a);background:color-mix(in srgb,var(--season-surface,#dcfce7) 55%,white);box-shadow:0 0 0 2px color-mix(in srgb,var(--season-primary,#16a34a) 12%,transparent)}.daily-expense-preset:active{transform:scale(.98)}.daily-expense-summary-amount{font-size:20px;color:#d84b75}
@media(max-width:390px){.daily-expense-wizard .daily-expense-presets{gap:7px}.daily-expense-preset{padding:10px 8px;gap:7px}.daily-expense-preset span{width:30px;height:30px;flex-basis:30px;font-size:18px}.daily-expense-preset strong{font-size:11px}.today-expense-add{padding:11px 10px}}
@media(prefers-reduced-motion:reduce){.today-expense-add,.daily-expense-preset{transition:none!important}.today-expense-add:hover{transform:none}}

html[data-ui-theme="dark"] body{background:radial-gradient(ellipse at top left,#30243e,#17151f 72%)!important;color:var(--ink)!important}
html[data-ui-theme="dark"] .app,html[data-ui-theme="dark"] .main{background:transparent!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(42,35,55,.96),rgba(29,25,40,.96))!important;color:var(--ink)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 12px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04)!important}
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"] .mobile-nav button,html[data-ui-theme="dark"] .home-quick-add-card strong,html[data-ui-theme="dark"] .panel h2,html[data-ui-theme="dark"] .stat .money,html[data-ui-theme="dark"] .bill-info b{color:var(--ink)!important}
html[data-ui-theme="dark"] .top-context-row .weather-pill,html[data-ui-theme="dark"] .festival-note,html[data-ui-theme="dark"] .date-glass,html[data-ui-theme="dark"] .month-display-label,html[data-ui-theme="dark"] .month-step,html[data-ui-theme="dark"] .month-display-shell,html[data-ui-theme="dark"] .ios-segment{background:linear-gradient(145deg,rgba(55,45,70,.92),rgba(35,30,48,.88))!important;color:var(--ink)!important;border-color:rgba(255,255,255,.16)!important}
html[data-ui-theme="dark"] .month-display-label,html[data-ui-theme="dark"] .month-calendar-icon,html[data-ui-theme="dark"] .month-step{color:#e5d8ff!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,html[data-ui-theme="dark"] .daily-expense-preset,html[data-ui-theme="dark"] .pill,html[data-ui-theme="dark"] .btn:not(.primary):not(#signOutBtn){background:#2b2538!important;color:var(--ink)!important;border-color:#4a3e5d!important}
html[data-ui-theme="dark"] th{background:#292336!important;color:var(--muted)!important}html[data-ui-theme="dark"] td{border-color:#40364f!important}html[data-ui-theme="dark"] .note{background:#302641!important;color:#ded0ff!important}
html[data-ui-theme="dark"] .ios-segment-btn[aria-pressed="true"]{background:linear-gradient(180deg,#514365,#392d4e)!important;color:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15)!important}
html[data-ui-theme="dark"] .top-actions #signOutBtn{background:linear-gradient(135deg,#4a202e,#5c2637)!important;color:#ffc4d0!important;border-color:#79374a!important}
html[data-ui-theme="dark"] .home-line-hero,html[data-ui-theme="dark"] .bills-line-hero{filter:brightness(.84) saturate(.9)}
@media(prefers-reduced-motion:reduce){.ios-segment-btn{transition:none!important}}

/* Responsive header repair + iOS-style preference controls (v2) */
.ui-preferences{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;flex:0 0 auto}
.ios-segment{display:inline-flex;align-items:center;justify-content:center;gap:3px;padding:3px;border:1px solid rgba(255,255,255,.88);border-radius:16px;background:rgba(255,255,255,.66);box-shadow:0 5px 16px rgba(74,54,112,.08),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.ios-segment-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:42px;min-height:34px;padding:7px 10px;border:0;border-radius:12px;background:transparent;color:#635a79;font-family:inherit;font-size:12px;font-weight:750;line-height:1.1;cursor:pointer;white-space:nowrap;transition:background .2s ease,box-shadow .2s ease,color .2s ease,transform .2s ease}
.ios-segment-btn[aria-pressed="true"]{background:linear-gradient(180deg,#fff,#f4efff);color:#713cf5;box-shadow:0 2px 8px rgba(68,44,108,.12),inset 0 1px 0 #fff}
.ios-segment-btn:active{transform:scale(.97)}
.ios-segment-btn:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.top{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important;align-items:center!important;gap:clamp(16px,2vw,28px)!important;overflow:visible!important}
.top-intro,.top>div:first-child{width:100%;min-width:0;max-width:none;flex:initial!important;text-align:left}
.top-context-row{display:grid!important;grid-template-columns:minmax(155px,.8fr) minmax(180px,1.2fr)!important;align-items:stretch!important;gap:10px!important;width:100%;min-width:0;margin:12px 0 13px}
.top-context-row .weather-pill,.top-context-row .festival-note{box-sizing:border-box!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:58px!important;max-height:84px!important;overflow:hidden!important;border-radius:16px!important}
.top-context-row .weather-pill{display:flex!important;align-items:center!important;gap:8px;padding:10px 12px!important;line-height:1.35}
.top-context-row .weather-pill>span{min-width:0;overflow:hidden}
.top-context-row .weather-pill b,.top-context-row .weather-pill small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-context-row .festival-note{display:flex!important;align-items:center!important;gap:9px!important;padding:10px 12px!important}
.top-context-row .festival-note>span:last-child{display:grid;gap:3px;min-width:0}
.top-context-row .festival-note strong,.top-context-row .festival-note small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.35;overflow-wrap:anywhere}
.top-intro h1{margin:0!important;line-height:1.15!important;font-size:clamp(24px,2.1vw,34px)!important;overflow-wrap:anywhere}
.top-intro .greeting-sub-fixed{margin-top:7px!important;line-height:1.5!important;max-width:100%}
.top-actions{display:flex!important;flex-flow:row wrap!important;align-items:center!important;justify-content:flex-end!important;align-content:center!important;gap:9px!important;min-width:0;flex:initial!important;width:100%}
.top-actions .month-picker-wrap{flex:0 1 245px!important;width:245px;min-width:220px!important;max-width:270px!important}
.top-actions #accountLabel{max-width:170px;min-width:0}
.top-actions #signOutBtn{flex:0 0 auto!important;min-height:44px}
@media(min-width:901px){
 .top-actions .month-picker-wrap{order:1}
 .top-actions #accountLabel{order:2}
 .top-actions .ui-preferences{order:3}
 .top-actions #lineIdentityBtn{order:4}
 .top-actions #signOutBtn{order:5}
}
@media(max-width:1200px) and (min-width:901px){
 .top{grid-template-columns:minmax(0,1fr)!important;gap:14px!important;align-items:stretch!important}
 .top-context-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
 .top-actions{justify-content:flex-start!important}
 .top-actions .month-picker-wrap{flex:0 1 245px!important}
}
@media(max-width:900px){
 .top{display:flex!important;flex-direction:column!important;align-items:stretch!important;text-align:center!important;gap:12px!important;padding:16px 14px!important;overflow:visible!important}
 .top-intro,.top>div:first-child{width:100%!important;max-width:none!important;min-width:0!important;text-align:center!important;margin:0!important}
 .date-glass{display:inline-flex!important;align-items:center;justify-content:center;min-height:34px;padding:8px 13px!important;margin:0 auto 10px!important;border-radius:999px!important}
 .top-context-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;width:100%!important;margin:0 0 12px!important}
 .top-context-row .weather-pill,.top-context-row .festival-note{width:100%!important;max-width:none!important;min-height:0!important;max-height:none!important;box-sizing:border-box!important;text-align:left!important}
 .top-context-row .weather-pill{padding:9px 11px!important;min-height:48px!important}
 .top-context-row .festival-note{padding:9px 11px!important;min-height:54px!important}
 .top-context-row .festival-note strong{-webkit-line-clamp:1!important}
 .top-context-row .festival-note small{-webkit-line-clamp:2!important;font-size:10px!important}
 .top-intro h1{font-size:clamp(22px,6vw,29px)!important;line-height:1.2!important;text-align:center!important;margin:0 auto!important;max-width:100%!important}
 .top-intro .greeting-sub-fixed{font-size:12px!important;line-height:1.45!important;text-align:center!important;margin:6px auto 0!important;max-width:100%!important}
 .top-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;width:100%!important;margin:4px 0 0!important;align-items:stretch!important;justify-content:stretch!important}
 .top-actions .month-picker-wrap{grid-column:1/-1!important;width:100%!important;min-width:0!important;max-width:none!important;flex:none!important;text-align:left!important}
 .top-actions .ui-preferences{grid-column:1/-1!important;display:flex!important;justify-content:center!important;flex-wrap:wrap;gap:8px!important;width:100%!important}
 .ui-preferences .ios-segment{flex:0 0 auto}
 .ios-segment-btn{min-height:36px;padding:8px 12px;font-size:12px}
 .top-actions #accountLabel{display:none!important}
 .top-actions #lineIdentityBtn{grid-column:1/-1!important;width:100%!important;justify-content:center}
 .top-actions #signOutBtn{grid-column:1/-1!important;width:100%!important;min-width:0!important;min-height:43px!important;white-space:nowrap!important}
 .top-actions .month-control-row{grid-template-columns:42px minmax(0,1fr) 42px!important;gap:7px!important}
 .top-actions .month-step{width:42px!important;height:46px!important;min-height:46px!important}
 .top-actions .month-display-shell,.top-actions .month-display-label,.top-actions .month-picker-wrap .month-native-input{height:46px!important;min-height:46px!important}
}
@media(max-width:390px){
 .top{padding:13px 11px!important;gap:10px!important}
 .top-context-row{gap:6px!important}
 .top-intro h1{font-size:22px!important}
 .top-actions{gap:7px!important}
 .ui-preferences{gap:6px!important}
 .ios-segment-btn{padding:7px 9px;font-size:11px}
 .top-actions .month-control-row{grid-template-columns:38px minmax(0,1fr) 38px!important;gap:6px!important}
 .top-actions .month-step{width:38px!important}
}
html[data-ui-theme="dark"] .ui-preferences .ios-segment{background:rgba(37,30,49,.92)!important;border-color:rgba(255,255,255,.13)!important}
html[data-ui-theme="dark"] .ios-segment-btn{color:#d8cde8}
html[data-ui-theme="dark"] .ios-segment-btn[aria-pressed="true"]{background:linear-gradient(180deg,#514365,#392d4e)!important;color:#fff!important}
@media(prefers-reduced-motion:reduce){.ios-segment-btn{transition:none!important}}

/* Final responsive polish: centered month label, legible dark mode and stable navigation */
.month-picker-wrap>span{display:block!important;width:100%;text-align:center!important;margin:0 auto 5px!important}
.month-control-row{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:8px}
.month-control-row .month-display-shell{width:100%;min-width:0}
.month-display-label{justify-content:center!important;text-align:center!important}
.month-display-label #monthDisplayText{flex:1;min-width:0;text-align:center!important}
.top-context-row{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important}
.top-context-row .weather-pill,.top-context-row .festival-note{min-width:0!important;max-width:100%!important}
.sidebar .nav{white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;display:flex;align-items:center;gap:8px}
.sidebar .nav[data-page="transactions"]{font-size:clamp(12px,1vw,14px)!important;letter-spacing:-.25px}
.sidebar .nav[data-page="transactions"]:lang(en){font-size:12px!important}
html[data-ui-theme="dark"]{--ink:#f5efff!important;--muted:#c9bddb!important;--line:rgba(231,218,255,.18)!important;--surface:#272132!important;--card:#2b2438!important;color-scheme:dark}
html[data-ui-theme="dark"] body,html[data-ui-theme="dark"] .main,html[data-ui-theme="dark"] .top-intro,html[data-ui-theme="dark"] .top-intro h1,html[data-ui-theme="dark"] .top-intro .sub,html[data-ui-theme="dark"] .panel,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"] .panel p,html[data-ui-theme="dark"] .panel label,html[data-ui-theme="dark"] .panel small,html[data-ui-theme="dark"] .panel strong,html[data-ui-theme="dark"] .stat,html[data-ui-theme="dark"] .stat label,html[data-ui-theme="dark"] .stat .money,html[data-ui-theme="dark"] .stat .hint,html[data-ui-theme="dark"] .nav,html[data-ui-theme="dark"] .nav span,html[data-ui-theme="dark"] .brand,html[data-ui-theme="dark"] .brand small,html[data-ui-theme="dark"] .top-context-row,html[data-ui-theme="dark"] .weather-pill,html[data-ui-theme="dark"] .weather-pill b,html[data-ui-theme="dark"] .weather-pill small,html[data-ui-theme="dark"] .festival-note,html[data-ui-theme="dark"] .festival-note strong,html[data-ui-theme="dark"] .festival-note small,html[data-ui-theme="dark"] .eyebrow,html[data-ui-theme="dark"] .date-glass,html[data-ui-theme="dark"] .home-quick-add-card,html[data-ui-theme="dark"] .home-quick-add-card strong,html[data-ui-theme="dark"] .home-quick-add-card small,html[data-ui-theme="dark"] .today-expense-add,html[data-ui-theme="dark"] .today-expense-add strong,html[data-ui-theme="dark"] .today-expense-add small,html[data-ui-theme="dark"] .today-expense-row,html[data-ui-theme="dark"] .today-expense-row strong,html[data-ui-theme="dark"] .today-expense-row small{color:#f3ecff!important}
html[data-ui-theme="dark"] .sub,html[data-ui-theme="dark"] .hint,html[data-ui-theme="dark"] .stat .hint,html[data-ui-theme="dark"] .panel-head p,html[data-ui-theme="dark"] .weather-pill small,html[data-ui-theme="dark"] .festival-note small,html[data-ui-theme="dark"] .home-quick-add-card small,html[data-ui-theme="dark"] .today-expense-add small,html[data-ui-theme="dark"] .today-expense-row small,html[data-ui-theme="dark"] .brand small{color:#c8bbd9!important}
html[data-ui-theme="dark"] .sidebar .nav,html[data-ui-theme="dark"] .sidebar .nav.active,html[data-ui-theme="dark"] .sidebar .nav:hover{background:linear-gradient(145deg,rgba(61,51,76,.96),rgba(40,33,52,.96))!important;color:#f6efff!important;border-color:rgba(255,255,255,.18)!important}
html[data-ui-theme="dark"] .sidebar .nav.active{background:linear-gradient(135deg,#6241a0,#493273)!important;color:#fff!important}
html[data-ui-theme="dark"] .today-expense-total,html[data-ui-theme="dark"] .today-expense-row-icon,html[data-ui-theme="dark"] .quick-add-icon,html[data-ui-theme="dark"] .stat-icon{color:#f8f3ff!important}
html[data-ui-theme="dark"] .home-quick-add-card,html[data-ui-theme="dark"] .today-expense-add,html[data-ui-theme="dark"] .today-expense-list,html[data-ui-theme="dark"] .today-expense-row{border-color:rgba(255,255,255,.13)!important}
html[data-ui-theme="dark"] .month-picker-wrap>span{color:#e6dcf5!important}
/* Weather ambience: visible but low-contrast enough to keep content readable */
#weatherDecor{z-index:0!important;pointer-events:none!important}
#rainLayer{z-index:1!important;opacity:.58!important}
.weather-sun{position:absolute;top:12%;right:8%;font-size:clamp(54px,9vw,112px)!important;filter:drop-shadow(0 0 24px #ffd34fbb)!important;animation:sunGlow 4s ease-in-out infinite!important}
.sun-rays{position:absolute;top:7%;right:5%;width:clamp(100px,15vw,190px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,205,74,.28) 0 28%,rgba(255,215,100,.12) 42%,transparent 72%);animation:sunHalo 5s ease-in-out infinite;filter:blur(3px)}
.weather-cloud{font-size:clamp(60px,9vw,118px)!important;filter:drop-shadow(0 10px 18px rgba(92,127,163,.3))!important;opacity:.7!important}
.raindrop{width:2px!important;background:linear-gradient(transparent,rgba(92,174,236,.9))!important;filter:drop-shadow(0 0 2px rgba(88,174,236,.3))}
@keyframes sunHalo{0%,100%{transform:scale(.94);opacity:.45}50%{transform:scale(1.08);opacity:.9}}
@media(min-width:901px){.top{grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr)!important}.top-intro,.top>div:first-child{min-width:0!important}.top-context-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important}.top-actions{min-width:0!important}.month-picker-wrap{max-width:100%!important}.month-picker-wrap>span{text-align:center!important}}
@media(max-width:900px){.top-context-row{grid-template-columns:minmax(0,1fr)!important}.top-actions .ui-preferences{order:-1!important;grid-row:1!important;grid-column:1/-1!important;margin-bottom:2px!important}.top-actions .month-picker-wrap{grid-row:2!important}.top-actions #signOutBtn{grid-row:3!important}.month-picker-wrap>span{text-align:center!important}.top-intro h1{overflow-wrap:normal!important;word-break:normal!important}}
@media(max-width:390px){.sidebar .nav[data-page="transactions"]{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.weather-sun,.weather-cloud,.sun-rays,.raindrop{animation:none!important}}


/* Extracted presentation rules: keep index.html markup free of inline CSS. */
.auth-gate-custom {
  position: fixed;
  inset: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 26px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 70px #51458a20;
}
.auth-heading { text-align: center; margin: 5px 0 4px; }
.auth-subheading { text-align: center; color: #777694; font-size: 13px; margin: 0 0 20px; }
.auth-email-field { margin-bottom: 12px; }
.auth-password-field { margin-bottom: 14px; }
.auth-submit-btn { width: 100%; margin-bottom: 8px; }
.auth-signup-btn, .auth-line-btn { width: 100%; }
.auth-message {
  font-size: 13px;
  color: #514080;
  background: #f4efff;
  border: 1px solid #e4d9ff;
  border-radius: 12px;
  line-height: 1.7;
  margin: 14px 0 0;
  padding: 11px 12px;
}
.mascot img { width: 100%; max-width: 150px; border-radius: 50%; display: block; margin: 0 auto 8px; }
.mascot-caption { font-size: 12px; margin-top: 5px; }
#accountLabel { font-size: 11px; }
.dot.income-dot { background: #35bd8b; }
.dot.expense-dot { background: #f578a4; }
.transaction-note { margin-bottom: 14px; }
#txForm.hidden, #billForm.hidden { display: none !important; }
.settings-divider { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.danger-text { color: #d43e6d; }
.settings-description { line-height: 1.8; }
#dailyExpenseProgress { width: 33.333%; }
#wizardProgress, #billWizardProgress { width: 20%; }
@media (max-width: 520px) {
  .auth-gate-custom { padding: 14px; }
  .login-card { padding: 24px 20px; }
}