/* ================================================================
   03-brand-motion-and-wizard.css
   หมวด: แอนิเมชัน ธีมแบรนด์ หน้าล็อกอิน และตัวช่วยกรอกข้อมูล
   หมายเหตุ: ไฟล์ถูกโหลดตามลำดับใน index.html เพื่อคงลำดับ CSS เดิม
   ================================================================ */
/* Bouncy but gentle app feedback */
@keyframes softBounceIn{
 0%{opacity:0;transform:translateY(14px) scale(.97)}
 70%{opacity:1;transform:translateY(-2px) scale(1.008)}
 100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes iconBoing{
 0%,100%{transform:translateY(0) rotate(0)}
 35%{transform:translateY(-5px) rotate(-8deg)}
 70%{transform:translateY(0) rotate(6deg)}
}
@keyframes littleFloat{
 0%,100%{transform:translateY(0)}
 50%{transform:translateY(-4px)}
}
@keyframes helloWiggle{
 0%,100%{transform:rotate(0) scale(1)}
 25%{transform:rotate(-12deg) scale(1.12)}
 55%{transform:rotate(9deg) scale(1.04)}
}
.stat,.panel,.goal-card,.budget-row{animation:softBounceIn .48s cubic-bezier(.2,.8,.25,1) both}
.stat:nth-child(2){animation-delay:.05s}
.stat:nth-child(3){animation-delay:.1s}
.stat-icon{transition:transform .22s cubic-bezier(.2,.8,.25,1)}
.stat:hover .stat-icon{animation:iconBoing .55s ease}
.btn:active,.mobile-nav button:active{transform:scale(.96)}
.emoji{transition:transform .22s ease}
.bill:hover .emoji{transform:rotate(-7deg) scale(1.08)}
@media(prefers-reduced-motion:reduce){
 .hello-sparkle,.stat,.panel,.goal-card,.budget-row,.stat:hover .stat-icon,.bill:hover .emoji{
  animation:none!important;transition:none!important
 }
}


/* Tuean Jai brand refresh */
.brand{line-height:1.35}
.brand span{display:block;color:#e85b95;font-size:25px}
.brand small{font-size:11px;line-height:1.7;margin-top:5px}
.mascot .cat{font-size:58px;line-height:1.2}
@media(max-width:900px){.brand span{font-size:23px}}


/* เตือนจ่าย by ตูนๆ — Fresh Green Theme */
:root{
 --ink:#163b2b;
 --muted:#668173;
 --pink:#22c55e;
 --pink2:#dcfce7;
 --purple:#86efac;
 --lav:#ecfdf3;
 --mint:#bbf7d0;
 --green:#16a34a;
 --blue:#e0f2e8;
 --orange:#fef3c7;
 --card:rgba(255,255,255,.94);
 --line:#e0eee5;
 --shadow:0 12px 34px rgba(22,101,52,.09);
}
body{
 color:var(--ink);
 background:
  radial-gradient(ellipse at 8% 0%,rgba(134,239,172,.42) 0,transparent 34%),
  radial-gradient(ellipse at 95% 5%,rgba(187,247,208,.58) 0,transparent 32%),
  #f5fff7;
}
.sidebar{
 background:rgba(255,255,255,.88);
 border-right-color:#d9f5e2;
}
.brand span{color:#16a34a}
.nav{color:#426b55}
.nav.active,.nav:hover{background:#dcfce7;color:#15803d}
.mascot{background:linear-gradient(145deg,#dcfce7,#f0fdf4);color:#4d7560}
.btn,.pill{border-color:#dcece1;box-shadow:0 4px 12px rgba(22,101,52,.05)}
.btn.primary{background:linear-gradient(120deg,#22c55e,#15803d);color:#fff;box-shadow:0 8px 18px rgba(22,163,74,.18)}
.btn.soft{background:#ecfdf3;border-color:#bbf7d0;color:#15803d}
.stat:nth-child(1) .stat-icon{background:#bbf7d0}
.stat:nth-child(2) .stat-icon{background:#dcfce7}
.stat:nth-child(3) .stat-icon{background:#ecfdf3}
.progress{background:#e5f3e9}
.progress span{background:linear-gradient(90deg,#86efac,#16a34a)}
.bar.in{background:linear-gradient(#86efac,#16a34a)}
.bar.out{background:linear-gradient(#4ade80,#15803d)}
.chart{border-bottom-color:#dcece1}
.bill{border-bottom-color:#e5f1e8}
.emoji{background:#ecfdf3}
th{background:#f0fdf4}
.field input,.field select{border-color:#dcece1}
.field input:focus,.field select:focus{outline:2px solid #86efac}
.note{background:#ecfdf3;color:#246b42}
.tag.paid{background:#dcfce7;color:#166534}
.tag.due{background:#fef3c7;color:#92400e}
.tag.late{background:#ffe4e6;color:#be123c}
.income{color:#15803d}
.expense{color:#be123c}
@media(max-width:900px){
 .sidebar{background:rgba(255,255,255,.96)}
}


/* Apple-inspired motion system — restrained, smooth, green */
:root{--motion-ease:cubic-bezier(.22,.61,.36,1);--motion-spring:cubic-bezier(.2,.8,.2,1)}
@keyframes breatheEmoji{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.12) translateY(-2px)}}
@keyframes gentleFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
@keyframes linePulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.12)}50%{box-shadow:0 0 0 7px rgba(22,163,74,0)}}
@keyframes sheenSlide{0%{transform:translateX(-130%) skewX(-18deg)}55%,100%{transform:translateX(220%) skewX(-18deg)}}
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.22)}50%{box-shadow:0 0 0 5px rgba(22,163,74,0)}}
.home-line-card{
 position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;
 overflow:hidden;margin-bottom:20px;padding:clamp(18px,2.4vw,27px);
 border:1px solid rgba(34,197,94,.20);
 background:linear-gradient(112deg,rgba(240,253,244,.98),rgba(255,255,255,.97) 52%,rgba(220,252,231,.8));
 box-shadow:0 12px 34px rgba(22,101,52,.075);
 transition:transform .45s var(--motion-ease),box-shadow .45s var(--motion-ease),border-color .35s ease;
}
.home-line-card:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:18%;top:-155px;background:radial-gradient(circle,rgba(134,239,172,.42),transparent 70%);pointer-events:none}
.home-line-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(22,101,52,.12);border-color:rgba(34,197,94,.36)}
.home-line-copy{display:flex;align-items:flex-start;gap:16px;min-width:0;position:relative;z-index:1}
.home-line-icon{display:grid;place-items:center;width:54px;height:54px;flex:0 0 54px;background:#06c755;border-radius:17px;box-shadow:0 8px 18px rgba(6,199,85,.2);animation:gentleFloat 4.8s ease-in-out infinite}
.line-brand-mark{display:inline-flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;font-family:Arial,sans-serif;font-weight:900;letter-spacing:-.7px;color:#fff;font-size:13px;line-height:1}.line-brand-mark:after{content:"";position:absolute;left:7px;bottom:5px;width:7px;height:6px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}.home-line-icon .line-brand-mark{font-size:12px}.home-line-icon .line-brand-mark:after{left:8px;bottom:7px}
.home-line-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.45px;color:#15803d;margin-bottom:4px}
.home-line-card h2{font-size:clamp(16px,1.7vw,20px);line-height:1.45;margin:0 0 5px;color:#14532d}
.home-line-card p{margin:0;color:#5b7463;font-size:12px;line-height:1.75}
.line-sparkle{display:inline-block;color:#22c55e;animation:breatheEmoji 2.7s ease-in-out infinite}
.home-line-status{display:inline-flex;align-items:center;gap:8px;margin-top:11px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid #d8f3df;font-size:11px;font-weight:650;color:#52715c;transition:all .3s ease}
.home-line-status-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.12)}
.home-line-status.is-connected{color:#166534;background:#dcfce7;border-color:#bbf7d0}
.home-line-status.is-connected .home-line-status-dot{background:#16a34a;animation:statusPulse 2.2s ease-in-out infinite}
.home-line-status.is-pending .home-line-status-dot{background:#f59e0b}
.home-line-actions{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:190px}
.home-line-connect{position:relative;overflow:hidden;gap:8px;justify-content:center}
.home-line-connect:before{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:36%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:sheenSlide 5.2s ease-in-out infinite;pointer-events:none}
.home-line-connect .line-brand-mark{width:22px;height:18px;flex:0 0 22px;background:#fff;color:#06a94a;border-radius:6px;font-size:7px;letter-spacing:-.3px}.home-line-connect .line-brand-mark:after{left:3px;bottom:-2px;width:5px;height:4px;background:#fff}
.home-line-arrow{display:inline-block;transition:transform .3s var(--motion-ease)}
.home-line-connect:hover .home-line-arrow{transform:translate(3px,-3px)}
.home-line-test{font-size:11px}
.home-line-foot{position:absolute;right:24px;bottom:7px;font-size:9px;color:#71917b}
.home-line-foot strong{color:#16803d}
.stat-icon,.emoji,.wizard-choice .big,.brand span,.mascot .cat{transform-origin:center;will-change:transform}
.stat-icon{animation:breatheEmoji 4.2s ease-in-out infinite}
.stat:nth-child(2) .stat-icon{animation-delay:.45s}.stat:nth-child(3) .stat-icon{animation-delay:.9s}
.emoji{animation:breatheEmoji 4.8s ease-in-out infinite}
.bill:nth-child(2n) .emoji{animation-delay:.6s}
.btn,.nav,.panel,.stat,.goal-card,.budget-row,.calendar-day,.wizard-choice{transition:transform .38s var(--motion-ease),box-shadow .38s var(--motion-ease),background-color .28s ease,border-color .28s ease}
.btn:hover{transform:translateY(-2px)}
.panel:hover{box-shadow:0 14px 34px rgba(22,101,52,.075)}
.mascot .cat{animation:gentleFloat 3.6s ease-in-out infinite}
@media(max-width:760px){
 .home-line-card{display:block;padding:18px;margin-bottom:15px}
 .home-line-copy{gap:12px}
 .home-line-icon{width:46px;height:46px;flex-basis:46px;border-radius:15px}
 .home-line-icon img{width:31px;height:31px}
 .home-line-actions{display:grid;grid-template-columns:1fr 1fr;min-width:0;margin-top:14px}
 .home-line-connect,.home-line-test{font-size:11px;padding:11px 8px}
 .home-line-foot{position:static;margin-top:10px;text-align:left}
}
@media(prefers-reduced-motion:reduce){
 .home-line-icon,.home-line-connect:before,.home-line-status-dot,.stat-icon,.emoji,.line-sparkle,.mascot .cat{animation:none!important}
 .home-line-card,.btn,.nav,.panel,.stat,.goal-card,.budget-row,.calendar-day,.wizard-choice{transition:none!important}
 .home-line-card:hover,.btn:hover{transform:none}
}


/* Liquid Glass — iOS-inspired translucent surfaces, with weather visible underneath */
:root{
 --glass-edge:rgba(255,255,255,.72);
 --glass-fill:rgba(255,255,255,.48);
 --glass-fill-strong:rgba(255,255,255,.68);
 --glass-shadow:0 18px 48px rgba(22,101,52,.10), inset 0 1px 0 rgba(255,255,255,.82);
 --glass-blur: blur(24px) saturate(1.45);
}
body{
 background-color:#eaf9ef;
 background-image:
  radial-gradient(ellipse at 12% 8%,rgba(134,239,172,.46),transparent 35%),
  radial-gradient(ellipse at 90% 12%,rgba(125,211,252,.28),transparent 33%),
  radial-gradient(ellipse at 55% 88%,rgba(196,181,253,.23),transparent 36%),
  linear-gradient(135deg,rgba(240,253,244,.45),rgba(224,242,254,.42),rgba(240,253,244,.5));
 background-attachment:fixed;
}
/* Keep animated weather effects behind the app, where translucent surfaces reveal them. */
#weatherDecor{z-index:0;opacity:.92}
#rainLayer{z-index:1;opacity:.32}
.app{position:relative;z-index:2}
.sidebar{
 background:rgba(247,255,250,.48)!important;
 border-right:1px solid rgba(255,255,255,.72)!important;
 box-shadow:8px 0 36px rgba(25,80,48,.045);
 backdrop-filter:blur(30px) saturate(1.55);
 -webkit-backdrop-filter:blur(30px) saturate(1.55);
}
.main{isolation:isolate}
.panel,.stat,.goal-card,.budget-row,.calendar-day,.wizard-card,.mobile-more{
 background:rgba(255,255,255,.48)!important;
 border:1px solid rgba(255,255,255,.78)!important;
 box-shadow:var(--glass-shadow)!important;
 backdrop-filter:blur(26px) saturate(1.5);
 -webkit-backdrop-filter:blur(26px) saturate(1.5);
}
.panel,.stat,.goal-card,.budget-row,.calendar-day,.home-line-card{position:relative;overflow:hidden}
.panel::before,.stat::before,.goal-card::before,.budget-row::before,.home-line-card::after{
 content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
 background:linear-gradient(135deg,rgba(255,255,255,.46),transparent 38%,rgba(255,255,255,.08) 72%,rgba(255,255,255,.22));
 opacity:.85;
}
.panel>* , .stat>* , .goal-card>* , .budget-row>* , .home-line-card>*{position:relative;z-index:1}
.stat{background:rgba(255,255,255,.42)!important}
.home-line-card{
 background:linear-gradient(115deg,rgba(220,252,231,.57),rgba(255,255,255,.46) 52%,rgba(187,247,208,.37))!important;
 border:1px solid rgba(255,255,255,.82)!important;
 box-shadow:0 18px 48px rgba(22,101,52,.11),inset 0 1px 0 #ffffffd9!important;
 backdrop-filter:blur(28px) saturate(1.65);
 -webkit-backdrop-filter:blur(28px) saturate(1.65);
}
.home-line-card::after{inset:1px;border-radius:inherit;opacity:.6}
.btn,.pill,.weather-pill,.home-line-status,.nav,.mobile-nav button{
 border:1px solid rgba(255,255,255,.76)!important;
 background:rgba(255,255,255,.43)!important;
 box-shadow:0 7px 22px rgba(22,101,52,.07),inset 0 1px 0 rgba(255,255,255,.85);
 backdrop-filter:blur(18px) saturate(1.5);
 -webkit-backdrop-filter:blur(18px) saturate(1.5);
}
.btn.primary,.home-line-connect{
 background:linear-gradient(135deg,rgba(34,197,94,.94),rgba(21,128,61,.9))!important;
 color:#fff!important;border:1px solid rgba(255,255,255,.48)!important;
 box-shadow:0 10px 28px rgba(22,163,74,.22),inset 0 1px 0 rgba(255,255,255,.36)!important;
}
.btn.soft{background:rgba(220,252,231,.58)!important;color:#166534!important}
.nav.active,.nav:hover,.mobile-nav button.active{
 background:rgba(187,247,208,.62)!important;color:#166534!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 18px rgba(22,163,74,.08);
}
.field input,.field select,.field textarea,.wizard-input{
 background:rgba(255,255,255,.55)!important;
 border:1px solid rgba(255,255,255,.88)!important;
 box-shadow:inset 0 1px 3px rgba(22,101,52,.035),0 4px 14px rgba(22,101,52,.025);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
th{background:rgba(240,253,244,.57)!important}
.calendar-day{background:rgba(255,255,255,.36)!important}
.calendar-day.today{border:1px solid rgba(34,197,94,.7)!important;background:rgba(220,252,231,.52)!important;box-shadow:0 0 0 3px rgba(34,197,94,.08),var(--glass-shadow)!important}
.calendar-event{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.note{background:rgba(220,252,231,.48)!important;border:1px solid rgba(255,255,255,.7)}
.mobile-nav{background:rgba(245,255,248,.62)!important;border-top:1px solid rgba(255,255,255,.8)!important;backdrop-filter:blur(28px) saturate(1.6)!important;-webkit-backdrop-filter:blur(28px) saturate(1.6)!important}
.mobile-more{background:rgba(245,255,248,.7)!important;backdrop-filter:blur(28px) saturate(1.6)!important;-webkit-backdrop-filter:blur(28px) saturate(1.6)!important}
.toast{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.25)}
.weather-pill{background:rgba(255,255,255,.44)!important}
@media(max-width:900px){
 .sidebar{background:rgba(247,255,250,.7)!important}
 .panel,.stat,.goal-card,.budget-row{backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
}
@media(prefers-reduced-motion:reduce){
 .panel,.stat,.goal-card,.budget-row,.calendar-day,.btn,.nav,.home-line-card{transition:none!important}
}


/* Mobile home-screen dock: always pinned to the visible viewport, with iOS-like glass */
@media(max-width:900px){
 body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
 .main{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
 .mobile-nav{position:fixed!important;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom))!important;width:auto;min-height:68px!important;display:flex!important;align-items:center;justify-content:space-around;gap:5px;padding:7px 8px!important;border:1px solid rgba(255,255,255,.78)!important;border-radius:24px!important;background:rgba(245,255,248,.70)!important;box-shadow:0 12px 36px rgba(20,70,45,.17),inset 0 1px 0 rgba(255,255,255,.92)!important;backdrop-filter:blur(30px) saturate(1.75)!important;-webkit-backdrop-filter:blur(30px) saturate(1.75)!important;z-index:50!important}
 .mobile-nav button{flex:1 1 0;min-width:0;min-height:52px!important;padding:5px 2px!important;border-radius:17px!important;font-size:10px!important;line-height:1.15;white-space:normal;color:#5f7568!important}
 .mobile-nav button span{font-size:20px!important;line-height:1.25;margin-bottom:3px}
 .mobile-nav button.active{background:rgba(187,247,208,.58)!important;color:#166534!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(22,101,52,.08)}
 .mobile-more{position:fixed!important;left:12px!important;right:12px!important;bottom:calc(88px + env(safe-area-inset-bottom))!important;z-index:51!important;grid-template-columns:1fr!important;border:1px solid rgba(255,255,255,.85)!important;border-radius:22px!important;padding:10px!important;background:rgba(246,255,249,.82)!important;box-shadow:0 18px 48px rgba(20,70,45,.18)!important;backdrop-filter:blur(28px) saturate(1.7)!important;-webkit-backdrop-filter:blur(28px) saturate(1.7)!important}
 .mobile-more button{min-height:46px;text-align:left!important;padding:12px 14px!important;border-radius:14px!important;font-size:13px!important}
 .bills-line-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:66px minmax(0,1fr) minmax(170px,205px);align-items:center;gap:16px;padding:23px!important;margin-bottom:17px;border:1px solid rgba(255,255,255,.85)!important;border-radius:28px!important;background:linear-gradient(125deg,rgba(236,253,243,.82),rgba(255,255,255,.58) 52%,rgba(209,250,229,.64))!important;box-shadow:0 18px 42px rgba(22,101,52,.11),inset 0 1px 0 rgba(255,255,255,.95)!important;backdrop-filter:blur(26px) saturate(1.55)!important;-webkit-backdrop-filter:blur(26px) saturate(1.55)!important;animation:billsLineFloat 6s ease-in-out infinite}
 .bills-line-hero:before{content:"";position:absolute;width:270px;height:270px;right:8%;top:-205px;border-radius:50%;background:radial-gradient(circle,rgba(74,222,128,.26),transparent 70%);pointer-events:none}
 .bills-line-orb{width:62px;height:62px;border-radius:21px;display:grid;place-items:center;background:#06c755;box-shadow:0 12px 25px rgba(6,199,85,.25),inset 0 1px 0 rgba(255,255,255,.45);animation:lineOrbPulse 3.4s ease-in-out infinite;position:relative;z-index:1}
 .bills-line-orb img{display:none}.bills-line-orb .line-brand-mark{width:43px;height:32px;background:#06c755;border-radius:11px;font-size:13px}.bills-line-orb .line-brand-mark:after{left:7px;bottom:-3px;width:8px;height:7px;background:#06c755}
 .bills-line-content,.bills-line-actions{position:relative;z-index:1;min-width:0}.bills-line-eyebrow{font-size:11px;letter-spacing:.3px;font-weight:800;color:#15803d;margin-bottom:5px}.bills-line-content h2{font-size:clamp(17px,2vw,22px);line-height:1.4;margin:0 0 6px;color:#14532d}.bills-line-content p{font-size:12px;line-height:1.75;color:#466b54;margin:0}.bills-line-benefits{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.bills-line-benefits span{font-size:10px;color:#23633a;background:rgba(255,255,255,.56);border:1px solid rgba(255,255,255,.82);border-radius:999px;padding:5px 8px}.bills-line-status-wrap{display:flex;align-items:center;gap:7px;font-size:11px;color:#52715c;margin-top:10px}.bills-line-heart{color:#22c55e;animation:breatheEmoji 2s ease-in-out infinite}.bills-line-actions{display:grid;gap:9px}.bills-line-connect{justify-content:center;gap:8px;min-height:48px;background:linear-gradient(110deg,#06c755,#00b84a)!important;color:white!important;border:1px solid rgba(255,255,255,.65)!important;border-radius:16px!important;box-shadow:0 8px 22px rgba(6,199,85,.22)!important;position:relative;overflow:hidden}.bills-line-connect:before{content:"";position:absolute;inset:-30% auto -30% -45%;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:billsLineSheen 4.2s ease-in-out infinite}.bills-line-connect .line-brand-mark{width:22px;height:18px;flex:0 0 22px;background:#fff;color:#06a94a;border-radius:6px;font-size:7px;letter-spacing:-.3px}.bills-line-connect .line-brand-mark:after{left:3px;bottom:-2px;width:5px;height:4px;background:#fff}.bills-line-test{min-height:44px;border-radius:15px!important;background:rgba(255,255,255,.65)!important;border:1px solid rgba(255,255,255,.9)!important;color:#166534!important}.bills-line-note{grid-column:2/4;position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.68);padding-top:11px;font-size:10px;line-height:1.7;color:#587460}.bills-line-note strong{color:#16803d}
}
@media(max-width:600px){
 .bills-line-hero{grid-template-columns:48px minmax(0,1fr);gap:11px;padding:17px!important;border-radius:23px!important}
 .bills-line-orb{width:46px;height:46px;border-radius:15px}.bills-line-orb .line-brand-mark{width:34px;height:27px;font-size:10px}
 .bills-line-content h2{font-size:17px}.bills-line-content p{font-size:11px}
 .bills-line-benefits{gap:5px}.bills-line-benefits span{font-size:9px;padding:4px 7px}
 .bills-line-actions{grid-column:1/-1;grid-template-columns:1.15fr 1fr;gap:8px;margin-top:2px}
 .bills-line-connect,.bills-line-test{font-size:11px;padding:10px 7px;min-height:46px}
 .bills-line-note{grid-column:1/-1;font-size:10px;padding-top:9px}
}
@keyframes billsLineFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes lineOrbPulse{0%,100%{box-shadow:0 12px 25px rgba(6,199,85,.22),inset 0 1px 0 rgba(255,255,255,.45)}50%{box-shadow:0 14px 32px rgba(6,199,85,.34),inset 0 1px 0 rgba(255,255,255,.55)}}
@keyframes billsLineSheen{0%,62%,100%{left:-45%}35%{left:115%}}
@media(prefers-reduced-motion:reduce){.bills-line-hero,.bills-line-orb,.bills-line-heart,.bills-line-connect:before{animation:none!important}}
@media(min-width:901px){.bills-line-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:70px minmax(0,1fr) 220px;align-items:center;gap:18px;padding:24px!important;border-radius:28px!important;background:linear-gradient(125deg,rgba(236,253,243,.82),rgba(255,255,255,.58) 52%,rgba(209,250,229,.64))!important;border:1px solid rgba(255,255,255,.85)!important;box-shadow:0 18px 42px rgba(22,101,52,.11),inset 0 1px 0 rgba(255,255,255,.95)!important;backdrop-filter:blur(26px) saturate(1.55)!important;-webkit-backdrop-filter:blur(26px) saturate(1.55)!important;animation:billsLineFloat 6s ease-in-out infinite}.bills-line-note{grid-column:2/4}}


/* User-provided Toon mascot and login artwork */
#authGate{
 background:linear-gradient(135deg,#eaffef,#dffaf1 48%,#e5f5ff)!important;
 overflow:auto;isolation:isolate;
}
#authGate>div{
 position:relative;
 background:rgba(255,255,255,.86)!important;
 -webkit-backdrop-filter:blur(24px) saturate(1.35);
 backdrop-filter:blur(24px) saturate(1.35);
 border:1px solid rgba(255,255,255,.9)!important;
 box-shadow:0 24px 80px rgba(29,105,57,.18)!important;
}
.auth-mascot-img{
 display:block;width:clamp(112px,34vw,168px);height:auto;aspect-ratio:1/1;object-fit:contain;
 margin:0 auto 10px;border-radius:50%;
 filter:drop-shadow(0 12px 22px rgba(39,125,58,.18));
 animation:authMascotFloat 5s ease-in-out infinite;
}
@keyframes authMascotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
body.auth-required .mobile-nav, body.auth-required .mobile-more{display:none!important}
@media(max-width:900px){
 #authGate{padding:18px 14px calc(18px + env(safe-area-inset-bottom))!important}
 #authGate>div{max-width:420px;padding:22px 20px!important}
 .auth-mascot-img{width:clamp(100px,31vw,142px)}
}
@media(prefers-reduced-motion:reduce){.auth-mascot-img{animation:none!important}}

/* Final readability fix for the transaction wizard on mobile Safari */
.wizard-card{background:#fff!important;background-image:none!important;color:#173f2d!important;opacity:1!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid #e2eee6!important;box-shadow:0 24px 80px rgba(10,35,24,.28)!important}
.wizard-title{color:#153f2d!important;line-height:1.35!important}
.wizard-sub{color:#536b60!important;font-size:14px!important;line-height:1.65!important}
.wizard-step{color:#794b75!important}
.wizard-field label{color:#3d5d4c!important;font-size:13px!important}
.wizard-input{background:#fff!important;color:#183b2d!important;border:1px solid #cbded1!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.wizard-input::placeholder{color:#89968e!important;opacity:1}
.wizard-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:12px 0 max(4px,env(safe-area-inset-bottom))!important;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 22px)!important}
.wizard-actions.first-step{grid-template-columns:minmax(0,1fr)!important}
.wizard-actions .btn{box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;flex:none!important;min-height:50px!important;padding:11px 10px!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.35!important;font-size:15px!important;border-radius:14px!important}
.wizard-actions #wizardBack{background:#f3f7f4!important;color:#214332!important;border:1px solid #d9e6dd!important}
.wizard-actions #wizardNext{background:linear-gradient(135deg,#22c55e,#15803d)!important;color:#fff!important}
.wizard-choice{color:#173f2d!important;background:#fff!important;border-color:#dce9e0!important}
.wizard-choice small{color:#607569!important}
.wizard-choice.selected{background:#eafaf0!important;border-color:#39b86b!important}
@media(max-width:600px){.wizard-backdrop{align-items:center!important;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;background:rgba(20,35,29,.66)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!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;-webkit-overflow-scrolling:touch!important;padding:18px 16px!important;margin:auto!important;border-radius:23px!important}.wizard-title{font-size:clamp(20px,5.2vw,24px)!important}.wizard-sub{font-size:14px!important;margin-bottom:16px!important}.wizard-amount{font-size:28px!important;padding:17px 10px!important}.wizard-actions{position:sticky!important;bottom:0!important;z-index:5!important;margin-top:14px!important}}
@media(max-width:360px){.wizard-card{padding:15px 12px!important}.wizard-actions{gap:7px!important}.wizard-actions .btn{font-size:13px!important;padding:10px 6px!important}}

/* ส่วนที่ 2: ปรับไอคอน LINE ในส่วนบิล */