/* ══════════════════════════════════════════
   Preewara — Sweet Blush UI
   ══════════════════════════════════════════ */
:root,[data-theme="pink"]{
  --p1:#fff3f7;--p2:#fde2ec;--p3:#f8c3d6;--p4:#f093b5;--p5:#e45a8c;--p6:#b33a68;
  --bg:#fff7fa;--card:#ffffff;--ink:#43182d;--ink2:#8c5670;--ink3:#c08ca3;
  --hero1:#f7a8c4;--hero2:#e45a8c;
}
[data-theme="purple"]{--p1:#f8f4ff;--p2:#ece4fe;--p3:#d6c4fd;--p4:#b597f8;--p5:#8b5cf6;--p6:#6d3fd1;--bg:#fbf8ff;--ink:#2e1a52;--ink2:#6b5a8e;--ink3:#a597c2;--hero1:#c4a8fb;--hero2:#8b5cf6}
[data-theme="blue"]{--p1:#f1f7ff;--p2:#dcebff;--p3:#b4d3fd;--p4:#7fb3f9;--p5:#3b82f6;--p6:#1f5fcc;--bg:#f7fbff;--ink:#14304f;--ink2:#4f6c8c;--ink3:#93abc6;--hero1:#93c5fd;--hero2:#3b82f6}
[data-theme="green"]{--p1:#f0faf4;--p2:#d6f1e0;--p3:#a9dfbd;--p4:#6cc391;--p5:#2f9e63;--p6:#1d7247;--bg:#f6fcf8;--ink:#143524;--ink2:#4e7461;--ink3:#93b5a3;--hero1:#8fd8ac;--hero2:#2f9e63}
[data-theme="peach"]{--p1:#fff6ef;--p2:#ffe5d1;--p3:#fdc9a1;--p4:#fba66b;--p5:#f47b2a;--p6:#c75a14;--bg:#fffaf6;--ink:#4a2410;--ink2:#8c5a3c;--ink3:#c9a189;--hero1:#fdba8c;--hero2:#f47b2a}
:root{
  --red:#e0435a;--red-bg:#fdecef;--amber:#d98a1c;--amber-bg:#fdf3e2;--green:#2f9e63;--green-bg:#e7f6ee;--lav:#7d6be0;--lav-bg:#efecfd;
  --r-xl:28px;--r-lg:22px;--r-md:16px;--r-sm:12px;
  --sh:0 1px 2px rgba(67,24,45,.04),0 8px 24px rgba(179,58,104,.07);
  --nav-h:72px;
  --f-head:'Mitr',sans-serif;--f-body:'Sarabun',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;overflow-x:hidden}
body{font-family:var(--f-body);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
button{font-family:inherit;cursor:pointer;touch-action:manipulation;border:none;background:none;color:inherit}
input,select{font-family:inherit}
.ti{line-height:1}
h1,h2{font-family:var(--f-head);font-weight:500;color:var(--ink)}
.app{max-width:560px;margin:0 auto;position:relative;z-index:1}

/* soft floating background */
.hearts-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.heart{position:absolute;color:var(--p3);opacity:0;animation:floatUp linear infinite;font-size:16px!important}
@keyframes floatUp{0%{opacity:0;transform:translateY(100vh) rotate(-8deg)}10%{opacity:.5}85%{opacity:.2}100%{opacity:0;transform:translateY(-10vh) rotate(8deg)}}

/* pages */
.page{display:none;padding:4px 16px calc(var(--nav-h) + 48px)}
.page.active{display:block;animation:pgIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pg-head{display:flex;align-items:center;gap:12px;padding:10px 2px 14px}
.pg-head h1{font-size:26px;line-height:1.2}
.pg-count{margin-left:auto;font-size:12px;color:var(--ink2);background:var(--card);padding:5px 12px;border-radius:99px;box-shadow:var(--sh)}
.pg-sub{font-size:12.5px;color:var(--ink2)}
.pg-ico{width:48px;height:48px;border-radius:16px;background:var(--p5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;box-shadow:0 8px 18px rgba(228,90,140,.3)}
.sec-head{display:flex;align-items:center;gap:8px;margin:22px 2px 10px}
.sec-head h2{font-size:17px}

/* ── TOP BAR ── */
#top-user-bar{display:none;align-items:center;gap:12px;max-width:560px;margin:0 auto;padding:16px 16px 6px;position:relative;z-index:2}
#top-user-bar.show{display:flex}
.tub-av{position:relative;width:48px;height:48px;border-radius:50%;padding:3px;flex-shrink:0;background:conic-gradient(from 200deg,var(--p3),var(--p5),var(--hero1),var(--p3))}
.tub-av>span{display:flex;width:100%;height:100%;border-radius:50%;align-items:center;justify-content:center;background:#fff;border:2px solid #fff;font-family:var(--f-head);font-size:19px;color:var(--p5);background:linear-gradient(160deg,#fff,var(--p1))}
.tub-heart{position:absolute;right:-3px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--p5);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);animation:heartBeat 1.8s ease-in-out infinite}
@keyframes heartBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
.tub-txt{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.tub-hi{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink2)}
.tub-hi .ti{font-size:15px;color:var(--amber);animation:icoBob 3.2s ease-in-out infinite}
.tub-name{font-family:var(--f-head);font-size:19px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tub-clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;padding:5px 12px;border-radius:14px;background:var(--card);box-shadow:var(--sh);flex-shrink:0}
.tub-clock b{font-family:var(--f-head);font-weight:500;font-size:17px;color:var(--p5);letter-spacing:.5px}
.tub-clock span{font-size:10.5px;color:var(--ink3);white-space:nowrap}
.tub-logout{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--card);color:var(--ink2);font-size:12.5px;font-weight:600;box-shadow:var(--sh);transition:background .2s,color .2s}
.tub-logout .ti{font-size:17px}
.tub-logout:hover,.tub-logout:active{background:var(--red-bg);color:var(--red)}

/* ── HOME : HERO ── */
.hero{position:relative;overflow:hidden;margin-top:8px;padding:18px 20px 22px;border-radius:var(--r-xl);color:#fff;
  background:linear-gradient(140deg,var(--hero1),var(--hero2));box-shadow:0 18px 36px -12px rgba(228,90,140,.55)}
.hero-blob{position:absolute;right:-50px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.16);pointer-events:none}
.hero-blob::after{content:'';position:absolute;left:-90px;top:150px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.1)}
.hero-top{display:flex;align-items:center;gap:6px;position:relative;z-index:1}
.hero-nav{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center}
.hero-month{font-family:var(--f-head);font-size:14px;min-width:78px;text-align:center}
.hero-today{margin-left:auto;font-size:12px;padding:5px 12px;border-radius:99px;background:#fff;color:var(--p6);font-weight:600}
.hero-lbl{margin-top:20px;font-size:13px;opacity:.9;position:relative}
.hero-val{font-family:var(--f-head);font-size:40px;font-weight:500;line-height:1.15;letter-spacing:-.5px;position:relative}
.hero-paid{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.2);position:relative}
.hero-paid b{font-family:var(--f-head);font-weight:500}

.stat-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.stat{--c:var(--p5);--cb:var(--p1);position:relative;overflow:hidden;background:var(--card);border-radius:var(--r-md);padding:12px 12px 14px;box-shadow:var(--sh);display:flex;flex-direction:column;min-width:0;
  animation:statIn .5s cubic-bezier(.2,.8,.2,1) both;transition:transform .2s}
.stat:nth-child(2){animation-delay:.07s}.stat:nth-child(3){animation-delay:.14s}
.stat:active{transform:scale(.97)}
.stat::before{content:'';position:absolute;right:-22px;top:-22px;width:64px;height:64px;border-radius:50%;background:var(--cb);opacity:.9}
.stat-amber{--c:var(--amber);--cb:var(--amber-bg)}
.stat-lav{--c:var(--lav);--cb:var(--lav-bg)}
@keyframes statIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.stat-top{display:flex;align-items:center;justify-content:space-between;position:relative;margin-bottom:8px}
.stat-ico{width:32px;height:32px;border-radius:11px;background:var(--cb);color:var(--c);display:flex;align-items:center;justify-content:center;font-size:17px;animation:icoBob 3.2s ease-in-out infinite}
.stat:nth-child(2) .stat-ico{animation-delay:.4s}.stat:nth-child(3) .stat-ico{animation-delay:.8s}
@keyframes icoBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-6deg)}}
.stat-pct{font-size:10.5px;font-weight:700;color:var(--c);background:#fff;padding:1px 7px;border-radius:99px;position:relative;white-space:nowrap}
.stat-l{font-size:11.5px;color:var(--ink2);line-height:1.6;position:relative}
.stat-v{font-family:var(--f-head);font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.stat-bar{height:5px;margin-top:8px;border-radius:99px;background:var(--cb);overflow:hidden;position:relative}
.stat-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--c);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.stat-note{font-size:10.5px;color:var(--ink3);text-align:center;margin-top:6px}

.today-card{margin-top:12px;padding:14px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh)}
.today-row{display:flex;align-items:center;gap:12px}
.cal-tile{width:52px;flex-shrink:0;border-radius:14px;overflow:hidden;text-align:center;background:#fff;box-shadow:0 0 0 1.5px var(--p2);transform:rotate(-4deg);transition:transform .3s}
.today-card:hover .cal-tile{transform:rotate(0)}
.cal-tile span{display:block;background:var(--p5);color:#fff;font-size:11px;font-weight:600;padding:2px 0}
.cal-tile b{display:block;font-family:var(--f-head);font-weight:500;font-size:22px;line-height:1.5;color:var(--ink)}
.today-date{display:flex;flex-direction:column;line-height:1.35;flex:1;min-width:0}
.today-wday{font-family:var(--f-head);font-size:16px;color:var(--ink)}
.today-day{font-size:12px;color:var(--ink3)}
.today-urg{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--red);background:var(--red-bg);padding:8px 13px;border-radius:99px;font-weight:600}
.today-urg b{font-family:var(--f-head);font-weight:500;font-size:15px}
.urg-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(224,67,90,.5);animation:urgPulse 1.6s infinite}
@keyframes urgPulse{70%{box-shadow:0 0 0 7px rgba(224,67,90,0)}100%{box-shadow:0 0 0 0 rgba(224,67,90,0)}}
.today-urg.calm{color:var(--green);background:var(--green-bg)}
.today-urg.calm .urg-dot{background:var(--green);animation:none}
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px;padding-top:12px;border-top:1.5px dashed var(--p2)}
.wk{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0 5px;border-radius:12px;color:var(--ink2);transition:background .2s}
.wk-d{font-size:10.5px;color:var(--ink3)}
.wk b{font-family:var(--f-head);font-weight:500;font-size:14px}
.wk-dots{display:flex;gap:2px;height:5px}
.wk-dots i{width:5px;height:5px;border-radius:50%;background:var(--p4)}
.wk.has{background:var(--p1)}
.wk.is-today{background:var(--p5);color:#fff}
.wk.is-today .wk-d{color:rgba(255,255,255,.8)}
.wk.is-today .wk-dots i{background:#fff}
/* segmented alerts */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--p2);border-radius:99px}
.alc{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;border-radius:99px;font-size:12.5px;color:var(--ink2);transition:background .2s,color .2s}
.alc-num{min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:rgba(255,255,255,.7);font-family:var(--f-head);font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.alc.sel{background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(179,58,104,.12)}
.alc-t.sel .alc-num{background:var(--p5);color:#fff}
.alc-o.sel .alc-num{background:var(--red);color:#fff}
.alc-s.sel .alc-num{background:var(--lav);color:#fff}

.alpw{margin-top:12px}
.alp{display:none}
.alp.on{display:flex;flex-direction:column;gap:8px;animation:fi .25s ease}
.alem{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 16px;text-align:center;color:var(--ink3);font-size:13px;background:var(--card);border-radius:var(--r-lg);border:1.5px dashed var(--p3)}
.alem-i{width:48px;height:48px;border-radius:50%;background:var(--p1);color:var(--p4);display:flex;align-items:center;justify-content:center;font-size:24px}
.ali{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh);position:relative;overflow:hidden}
.ali::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--p4)}
.ali-o::before{background:var(--red)}
.ali-s::before{background:var(--lav)}
.ali-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;background:var(--p1);color:var(--p5);overflow:hidden}
.av-o{background:var(--red-bg);color:var(--red)}
.av-s{background:var(--lav-bg);color:var(--lav)}
.ali-inf{flex:1;min-width:0}
.ali-n{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ali-m{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ali-pill{display:inline-block;margin-top:4px;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:600}
.pill-t{background:var(--p2);color:var(--p6)}
.pill-o{background:var(--red-bg);color:var(--red)}
.pill-s{background:var(--lav-bg);color:var(--lav)}
.ali-rt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.ali-am{font-family:var(--f-head);font-size:16px}
.am-t{color:var(--p5)}.am-o{color:var(--red)}.am-s{color:var(--lav)}
.ali-sub{font-size:11px;color:var(--ink3)}

/* ── LIST ── */
.tools{position:sticky;top:0;z-index:5;margin:0 -16px;padding:6px 16px 10px;background:var(--bg)}
.srch-box{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:var(--r-md);padding:0 14px;height:48px;box-shadow:var(--sh);color:var(--ink3);font-size:18px}
.srch-in{flex:1;border:none;outline:none;background:transparent;font-size:14.5px;color:var(--ink)}
.srch-in::placeholder{color:var(--ink3)}
.mpick{display:flex;align-items:center;gap:6px;margin-top:10px}
.mpick button{width:34px;height:34px;border-radius:50%;background:var(--card);color:var(--p5);font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh)}
.mpick span{font-family:var(--f-head);font-size:14px;min-width:84px;text-align:center}
.mpick .mpick-all{width:auto;margin-left:auto;padding:0 14px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--p6)}
.flt-wrap{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:10px -16px 0;padding:2px 16px;cursor:grab;user-select:none}
.flt-wrap::-webkit-scrollbar{display:none}
.fb{flex-shrink:0;padding:8px 16px;border-radius:99px;background:var(--card);color:var(--ink2);font-size:13px;font-weight:500;border:1px solid var(--p2);transition:all .2s}
.fb.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.list-wrap{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.lcard{background:var(--card);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh);position:relative;isolation:isolate;border:1.5px solid transparent}
.lc-t{border-color:var(--p3)}
.lc-o{border-color:#f6c2cb}
.lc-head{display:flex;align-items:center;gap:12px}
.lcard-photo,.p3av{width:46px;height:46px;border-radius:50%;background:var(--p1);color:var(--p4);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden}
.lcnw{flex:1;min-width:0}
.cname{font-family:var(--f-head);font-size:16px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-sub{display:flex;align-items:center;gap:6px;margin-top:3px}
.lcnum{font-size:11px;color:var(--ink3)}
.ctag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:600;background:var(--p1);color:var(--p6)}
.sbadge{padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0}
.sb-paid{background:var(--green-bg);color:var(--green)}
.sb-pend{background:var(--amber-bg);color:var(--amber)}
.sb-late{background:var(--red-bg);color:var(--red)}
.sb-today{background:var(--p2);color:var(--p6)}
.lc-amt{display:flex;align-items:stretch;gap:12px;margin-top:14px;padding:14px;border-radius:var(--r-md);background:var(--p1)}
.lc-tot{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.lc-split{display:flex;flex-direction:column;gap:6px;padding-left:12px;border-left:1.5px dashed var(--p3)}
.lc-split>div{display:flex;flex-direction:column;line-height:1.25}
.albl{font-size:11px;color:var(--ink2)}
.aval{font-family:var(--f-head);font-size:14px;color:var(--ink)}
.lc-tot .aval{font-size:24px;color:var(--p5)}
.lc-tot .aval.is-late{color:var(--red)}
.av-int{color:var(--amber)}
.lc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:12px;font-size:12px;color:var(--ink2)}
.lc-meta .ti{color:var(--ink3)}
.lc-arrow{font-size:12px}
.rpill{margin-left:auto;padding:3px 10px;border-radius:99px;background:var(--lav-bg);color:var(--lav);font-size:11px;font-weight:600}
.uh{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;font-weight:600;padding:7px 12px;border-radius:var(--r-sm)}
.uh-t{background:var(--p2);color:var(--p6)}
.uh-o{background:var(--red-bg);color:var(--red)}
.uh-s{background:var(--lav-bg);color:var(--lav)}

.ov-int-box{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--red-bg)}
.ov-int-left{flex:1;min-width:0}
.ov-int-label{font-size:12.5px;font-weight:600;color:var(--red)}
.ov-int-sub{font-size:11px;color:#b5606f;margin-top:2px}
.ov-int-amt{font-family:var(--f-head);font-size:18px;color:var(--red)}
.ov-int-total{font-size:11px;color:#b5606f}
.ov-manual-row{display:flex;gap:6px;margin-top:8px}
.ov-manual-inp{width:110px;height:36px;padding:0 10px;border:1.5px solid #f3c1ca;border-radius:10px;background:#fff;color:var(--red);font-weight:600;text-align:right;outline:none}
.ov-save-btn,.ov-off-btn{height:36px;padding:0 12px;border-radius:10px;background:#fff;color:var(--red);font-size:12px;font-weight:600;white-space:nowrap;border:1.5px solid #f3c1ca}
.ov-none{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--ink3)}
.ov-on-btn{height:34px;padding:0 12px;border-radius:99px;background:var(--green-bg);color:var(--green);font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}

.card-docs-section{margin-top:12px}
.card-docs-header{font-size:11.5px;color:var(--ink2);margin-bottom:6px}
.card-docs-wrap{display:flex;gap:8px;flex-wrap:wrap}
.card-doc-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.card-doc-thumb{width:64px;height:64px;border-radius:var(--r-sm);object-fit:cover;cursor:pointer;box-shadow:var(--sh)}
.card-doc-label{font-size:10.5px;color:var(--ink3)}

.lact{display:flex;gap:8px;margin-top:14px}
.abtn{flex:1;height:42px;border-radius:var(--r-sm);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden}
.abtn-e{background:var(--p2);color:var(--p6)}
.abtn-d{flex:0 0 auto;padding:0 16px;background:var(--red-bg);color:var(--red)}
.empty{display:flex;flex-direction:column;align-items:center;padding:44px 20px;text-align:center;color:var(--ink3)}
.empty-i{width:64px;height:64px;border-radius:50%;background:var(--p2);color:var(--p5);display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:12px}
.empty-t{font-family:var(--f-head);font-size:16px;color:var(--ink)}
.empty-s{font-size:12.5px;margin-top:2px}

/* pagination */
.pgn{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px 0 4px;flex-wrap:wrap}
.pgn-btn{min-width:38px;height:38px;padding:0 10px;border-radius:50%;background:var(--card);color:var(--ink2);font-family:var(--f-head);font-size:13px;box-shadow:var(--sh);display:flex;align-items:center;justify-content:center}
.pgn-btn.active{background:var(--p5);color:#fff}
.pgn-btn:disabled{opacity:.35;cursor:not-allowed}
.pgn-info{font-size:12px;color:var(--ink3)}

/* ── ADD FORM ── */
.form-card{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sh);overflow:hidden}
.fch{display:flex;align-items:center;padding:14px 20px 0}
.fch-t{font-size:12px;color:var(--ink3)}
.fch-id{margin-left:auto;font-size:11.5px;color:var(--ink3)}
.fsec{padding:16px 20px 20px;border-bottom:1px solid var(--p1)}
.fsec:last-child{border-bottom:none}
.fsec-t{display:flex;align-items:center;gap:8px;font-family:var(--f-head);font-size:15px;margin-bottom:14px}
.fsec-t span{width:24px;height:24px;border-radius:50%;background:var(--p2);color:var(--p6);font-size:12px;display:flex;align-items:center;justify-content:center}
.fsec-t em{font-family:var(--f-body);font-style:normal;font-size:11.5px;color:var(--ink3);margin-left:auto}
.borrower{display:flex;gap:16px;align-items:flex-start}
.borrower-f{flex:1;min-width:0}
.fg{margin-bottom:12px}
.flbl{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.lbl-row{display:flex;align-items:center;justify-content:space-between}
.link-btn{font-size:12px;color:var(--p5);font-weight:600;display:inline-flex;align-items:center;gap:3px}
.finp,.fsel{width:100%;height:46px;padding:0 14px;border:1.5px solid transparent;border-radius:var(--r-sm);background:var(--p1);font-size:14.5px;color:var(--ink);outline:none;appearance:none;-webkit-appearance:none;transition:border-color .2s,background .2s}
.fsel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c08ca3' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.finp:focus,.fsel:focus{border-color:var(--p4);background-color:#fff}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.frow .finp{min-width:0;padding:0 10px;font-size:13.5px}
.amt-inp{position:relative}
.amt-inp span{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-family:var(--f-head);font-size:20px;color:var(--p4)}
.amt-inp .finp{height:58px;padding-left:40px;font-family:var(--f-head);font-size:24px}
.int-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 8px}
.int-row .flbl{margin:0}
.int-sw{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink3)}
.int-sw-on{color:var(--p5);font-weight:600}
.mini-sw{width:40px;height:22px;border-radius:99px;background:var(--p2);position:relative;cursor:pointer;transition:background .2s}
.mini-sw>div{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:left .2s}
.auto-note{padding:11px 14px;border-radius:var(--r-sm);background:var(--p1);font-size:12.5px;color:var(--ink3)}
.fprev{display:none;grid-template-columns:1fr 1fr 1.2fr;gap:8px;margin-top:12px}
.fprev>div{padding:10px;border-radius:var(--r-sm);background:var(--p1)}
.fprev .pv-tot{background:var(--p5);color:#fff}
.pvl{font-size:11px;color:var(--ink2)}
.pv-tot .pvl{color:rgba(255,255,255,.85)}
.pvv{font-family:var(--f-head);font-size:15px}
.fprev[style*="flex"]{display:grid!important}

.photo-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.photo-wrap-c{margin-bottom:14px}
.photo-circle{width:84px;height:84px;border-radius:50%;background:var(--p1);border:2px dashed var(--p3);color:var(--p4);display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;cursor:pointer;transition:transform .2s}
.photo-circle:active{transform:scale(.96)}
.photo-lbl{font-size:11px;color:var(--ink3)}

.doc-photos-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.doc-photo-item{display:flex;flex-direction:column}
.doc-photo-box{aspect-ratio:1;border-radius:var(--r-md);border:2px dashed var(--p3);background:var(--p1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;position:relative;overflow:hidden;color:var(--p4)}
.doc-photo-box.has-img{border-style:solid;border-color:var(--p2)}
.doc-photo-box img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.doc-photo-ico{font-size:24px}
.doc-photo-lbl{font-size:11.5px;color:var(--ink2);font-weight:600}
.doc-photo-sub{display:none}
.doc-photo-del{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(67,24,45,.65);color:#fff;font-size:13px;display:none;align-items:center;justify-content:center;z-index:2}
.doc-photo-box.has-img .doc-photo-del{display:flex}

.paid-toggle{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-md);background:var(--p1);cursor:pointer;user-select:none;transition:background .25s}
.paid-toggle.on{background:var(--green-bg)}
.pt-ico{width:40px;height:40px;border-radius:12px;background:#fff;color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.paid-toggle.on .pt-ico{color:var(--green)}
.pt-text{flex:1}
.pt-main{font-family:var(--f-head);font-size:14.5px}
.paid-toggle.on .pt-main{color:var(--green)}
.pt-sub{font-size:11.5px;color:var(--ink3)}
.pt-switch{width:46px;height:26px;border-radius:99px;background:var(--p3);position:relative;flex-shrink:0;transition:background .25s}
.pt-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:left .25s}
.paid-toggle.on .pt-switch{background:var(--green)}
.paid-toggle.on .pt-switch::after{left:23px}

.fsub,.mfsub{width:100%;height:54px;margin-top:16px;border-radius:var(--r-md);background:var(--p5);color:#fff;font-family:var(--f-head);font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 12px 24px -10px rgba(228,90,140,.7);position:relative;overflow:hidden}
.fsub:active,.mfsub:active{transform:scale(.98)}
.fcan,.mfcan{width:100%;height:46px;margin-top:8px;border-radius:var(--r-md);background:var(--p1);color:var(--ink2);font-family:var(--f-head);font-size:14px}
.fcan{display:none}

.p3ls{margin-top:6px}
.p3lc{padding:2px 10px;border-radius:99px;background:var(--p2);color:var(--p6);font-size:12px;font-weight:600}
#p3-list{display:flex;flex-direction:column;gap:8px}
.p3i{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh);animation:fi .28s ease}
.p3inf{flex:1;min-width:0}
.p3n{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p3m{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink3);margin-top:2px}
.p3a{display:flex;align-items:center;gap:6px;margin-top:4px;font-family:var(--f-head);font-size:15px;color:var(--p5)}
.p3a .sbadge{font-family:var(--f-body);font-size:10.5px;padding:2px 8px}
.p3acts{display:flex;flex-direction:column;gap:6px}
.p3btn{width:38px;height:38px;border-radius:12px;font-size:17px;display:flex;align-items:center;justify-content:center;position:relative}
.p3e{background:var(--p1);color:var(--p6)}
.p3d{background:var(--red-bg);color:var(--red)}

/* ── MONTH ── */
.year-pick{display:flex;align-items:center;justify-content:space-between;padding:6px;background:var(--card);border-radius:99px;box-shadow:var(--sh)}
.year-pick button{width:40px;height:40px;border-radius:50%;background:var(--p1);color:var(--p5);font-size:18px;display:flex;align-items:center;justify-content:center}
.year-pick span{font-family:var(--f-head);font-size:15px}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.yr-card{position:relative;overflow:hidden;margin-top:12px;padding:20px;border-radius:var(--r-xl);background:linear-gradient(150deg,#5a2440,var(--ink) 60%);color:#fff;box-shadow:0 18px 36px -14px rgba(67,24,45,.6)}
.yr-blob{position:absolute;right:-50px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(240,147,181,.35),transparent 70%);pointer-events:none}
.yr-main{display:flex;align-items:center;gap:16px;position:relative}
.yr-ring{--p:0;width:92px;height:92px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--p4) calc(var(--p)*1%),rgba(255,255,255,.12) 0);transition:--p 1.2s cubic-bezier(.2,.8,.2,1)}
.yr-ring-in{width:72px;height:72px;border-radius:50%;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.yr-ring-in b{font-family:var(--f-head);font-weight:500;font-size:20px;color:var(--p3)}
.yr-ring-in span{font-size:10.5px;opacity:.7}
.yr-info{flex:1;min-width:0}
.yr-l{font-size:12px;opacity:.7}
.yr-big{font-family:var(--f-head);font-size:30px;line-height:1.2;white-space:nowrap}
.yr-remain{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.1);font-size:12px}
.yr-remain b{font-family:var(--f-head);font-weight:500;color:var(--p3)}
.yr-remain .urg-dot{background:var(--p4)}
.yr-bars{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:18px;position:relative}
.yb{display:flex;flex-direction:column;align-items:center;gap:4px}
.yb-col{width:100%;height:44px;display:flex;align-items:flex-end;justify-content:center}
.yb-col i{width:70%;max-width:14px;border-radius:5px 5px 2px 2px;background:rgba(255,255,255,.28);animation:ybUp .8s cubic-bezier(.2,.8,.2,1) both}
.yb:nth-child(n) i{animation-delay:calc(var(--d,0) * 1s)}
.yb.cur i{background:var(--p4);box-shadow:0 0 12px rgba(240,147,181,.6)}
.yb.yb-empty i{background:rgba(255,255,255,.1)}
.yb em{font-style:normal;font-size:9.5px;opacity:.6}
.yb.cur em{opacity:1;color:var(--p3);font-weight:700}
@keyframes ybUp{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.yr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.yr-grid div{display:flex;flex-direction:column}
.yr-grid span{font-size:11.5px;opacity:.65}
.yr-grid b{font-family:var(--f-head);font-weight:500;font-size:15px}

.month-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.mc-empty{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-md);border:1.5px dashed var(--p2);color:var(--ink3);font-size:13px}
.mc-empty em{margin-left:auto;font-style:normal;font-size:11.5px}
.mc-empty .mc-badge{background:transparent;color:var(--ink3);border:1.5px solid var(--p2)}
.mc-card{background:var(--card);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh);border:1.5px solid transparent}
.mc-card{position:relative;overflow:hidden;background:var(--card);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh);border:1.5px solid transparent}
.mc-card::after{content:'';position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:var(--p1);z-index:0}
.mc-card>*{position:relative;z-index:1}
.mc-card.is-cur{border-color:var(--p3);background:linear-gradient(180deg,#fff,var(--p1) 140%)}
.mc-head{display:flex;align-items:center;gap:12px}
.mc-title{flex:1;min-width:0}
.mc-name{font-family:var(--f-head);font-size:16px}
.mc-now{font-family:var(--f-body);font-size:10.5px;padding:2px 8px;border-radius:99px;background:var(--p5);color:#fff;vertical-align:2px}
.mc-cnt{font-size:11.5px;color:var(--ink3)}
.mc-tot-wrap{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.mc-total{font-family:var(--f-head);font-size:19px;color:var(--p5)}
.mc-share{font-size:10.5px;color:var(--ink3)}
.mc-prog{margin-top:14px;padding:10px 12px;border-radius:var(--r-sm);background:var(--p1)}
.mc-prog-top{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--ink2);margin-bottom:7px}
.mc-prog-top span{display:inline-flex;align-items:center;gap:4px}
.mc-prog-top .ti{color:var(--green);font-size:14px}
.mc-prog-top b{font-family:var(--f-head);font-weight:500;font-size:13px;color:var(--green)}
.mc-track{height:8px;border-radius:99px;background:#fff;overflow:hidden}
.mc-pbar{width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#8fd8ac,var(--green));transition:width .9s cubic-bezier(.2,.8,.2,1)}
.mc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.mc-grid div{--c:var(--p5);--cb:var(--p1);display:flex;flex-direction:column;padding:10px;border-radius:var(--r-sm);border:1.5px solid var(--cb);background:#fff}
.mc-grid .g-amber{--c:var(--amber);--cb:var(--amber-bg)}
.mc-grid .g-green{--c:var(--green);--cb:var(--green-bg)}
.mc-grid .ti{width:26px;height:26px;border-radius:9px;background:var(--cb);color:var(--c);display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:6px}
.mc-grid span{font-size:11px;color:var(--ink2);line-height:1.5}
.mc-grid b{font-family:var(--f-head);font-weight:500;font-size:14px;color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:40px;margin-top:10px;border-radius:99px;background:var(--p1);font-size:12.5px;font-weight:600;color:var(--p6);transition:background .2s}
.mc-toggle:active{background:var(--p2)}
.mc-arrow{transition:transform .3s}
.mc-arrow.open{transform:rotate(180deg)}
.mc-names{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .3s}
.mc-names.open{max-height:900px;opacity:1}
.mc-list{display:flex;flex-direction:column;gap:6px;padding-top:10px}
.mn{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:#fff;border:1px solid var(--p2);cursor:pointer;transition:transform .15s,border-color .2s}
.mn:active{transform:scale(.98)}
.mn:hover{border-color:var(--p3)}
.mn-av{width:30px;height:30px;border-radius:50%;background:var(--p2);color:var(--p6);font-family:var(--f-head);font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mn-n{flex:1;min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-amt{font-family:var(--f-head);font-size:13.5px;color:var(--ink)}
.mn-st{display:inline-flex;align-items:center;gap:2px;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--amber-bg);color:var(--amber);white-space:nowrap}
.mn.paid .mn-av{background:var(--green-bg);color:var(--green)}
.mn.paid .mn-st{background:var(--green-bg);color:var(--green)}
.mn.paid .mn-amt{color:var(--ink3);text-decoration:line-through;text-decoration-color:var(--p3)}

/* ── BOTTOM NAV ── */
.bnav{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:calc(100% - 28px);max-width:420px;z-index:200}
.bnav-inner{display:flex;align-items:center;gap:4px;height:66px;padding:0 9px;border-radius:26px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 0 var(--p2) inset,0 14px 34px -12px rgba(179,58,104,.35)}
.nb{flex:1;height:48px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink3);position:relative;border-radius:17px;transition:flex .3s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}
.nb>span:not(.ni):not(.nbadge){display:none;white-space:nowrap}
.nb .ni{font-size:23px;display:flex;transition:transform .25s}
.nb:active .ni{transform:scale(.88)}
.nb.on{flex:1.9;background:var(--p2);color:var(--p6)}
.nb.on>span:not(.ni):not(.nbadge){display:inline;animation:fi .25s ease}
.nb-add{flex:0 0 auto;width:56px;height:56px;margin:0 2px}
.nb-add.on{flex:0 0 auto;background:none}
.nb-add.on>span:not(.ni){display:none!important}
.nb-add .ni{width:52px;height:52px;border-radius:18px;background:linear-gradient(140deg,var(--hero1),var(--hero2));color:#fff;align-items:center;justify-content:center;font-size:26px;box-shadow:0 8px 18px -6px rgba(228,90,140,.75);transform:rotate(0);transition:transform .3s,border-radius .3s}
.nb-add.on .ni{box-shadow:0 0 0 4px var(--p2),0 8px 18px -6px rgba(228,90,140,.75)}
.nbadge{position:absolute;top:5px;left:calc(50% + 2px);min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;border:2px solid #fff}
.nb.on .nbadge{left:30px}

/* ── MODALS ── */
.ov,.emoji-picker-ov{display:none;position:fixed;inset:0;z-index:300;background:rgba(67,24,45,.4);backdrop-filter:blur(4px);align-items:flex-end;justify-content:center}
.ov.show,.emoji-picker-ov.show{display:flex;animation:ovi .2s ease}
.emoji-picker-ov{z-index:500}
@keyframes ovi{from{opacity:0}to{opacity:1}}
.modal,.emoji-picker-box{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--card);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:14px 20px calc(28px + env(safe-area-inset-bottom,0px));animation:mup .3s cubic-bezier(.2,.8,.2,1)}
@keyframes mup{from{transform:translateY(100%)}to{transform:none}}
.mh{width:40px;height:5px;border-radius:99px;background:var(--p2);margin:0 auto 14px}
.mt,.emoji-picker-title{font-family:var(--f-head);font-size:18px;text-align:center;margin-bottom:16px}
.emoji-grid{display:none}
.emoji-upload-btn{width:100%;height:52px;border-radius:var(--r-md);background:var(--p1);color:var(--p6);font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--p3)}
.emoji-cancel-btn{width:100%;height:44px;margin-top:6px;color:var(--ink3)}
.del-box{text-align:center}
.del-ico{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:var(--red-bg);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:30px}
.del-t{font-family:var(--f-head);font-size:18px}
.del-s{font-size:13px;color:var(--ink3);margin-top:2px}
.del-prev{margin:14px 0 4px;padding:12px;border-radius:var(--r-sm);background:var(--p1);font-size:13px;font-weight:600;line-height:1.5}
.del-ok{width:100%;height:52px;margin-top:12px;border-radius:var(--r-md);background:var(--red);color:#fff;font-family:var(--f-head);font-size:15px}

.owner-item{display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:8px;border-radius:var(--r-sm);background:var(--p1)}
.owner-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.owner-name{flex:1;font-weight:600}
.owner-del{height:32px;padding:0 12px;border-radius:10px;background:#fff;color:var(--red);font-size:12px}
.owner-color-btn{width:30px;height:30px;border-radius:50%;border:2px solid transparent;transition:transform .15s}
.owner-color-btn.active{border-color:#fff;box-shadow:0 0 0 2px var(--p5);transform:scale(1.1)}

/* toast / sync */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 28px);transform:translateX(-50%) translateY(12px);padding:11px 20px;border-radius:99px;background:var(--ink);color:#fff;font-size:13.5px;white-space:nowrap;opacity:0;pointer-events:none;z-index:600;transition:all .28s}
.toast.show{opacity:1;transform:translateX(-50%)}
#sync-bar{position:fixed;left:50%;top:12px;transform:translateX(-50%);padding:7px 16px;border-radius:99px;background:var(--ink);color:#fff;font-size:12px;z-index:600;display:none}
#sync-bar.show{display:block}

/* theme picker */
#theme-btn{position:fixed;right:16px;bottom:calc(var(--nav-h) + 30px + env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;background:var(--card);color:var(--p5);font-size:20px;box-shadow:var(--sh);z-index:400;display:flex;align-items:center;justify-content:center}
#theme-panel{position:fixed;right:16px;bottom:calc(var(--nav-h) + 82px);display:none;flex-direction:column;gap:4px;min-width:170px;padding:10px;border-radius:var(--r-lg);background:var(--card);box-shadow:0 16px 40px rgba(67,24,45,.18);z-index:400}
#theme-panel.show{display:flex;animation:fi .2s ease}
.theme-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:12px;font-size:13px;font-weight:600;text-align:left}
.theme-opt .ti{display:none}
.theme-opt:hover,.theme-opt.active{background:var(--p1)}
.theme-swatch{width:22px;height:22px;border-radius:50%;flex-shrink:0}

/* lightbox */
#lightbox-ov{position:fixed;inset:0;z-index:9999;background:rgba(30,10,20,.9);display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px}
#lightbox-ov.show{display:flex}
#lightbox-img{max-width:calc(100vw - 32px);max-height:calc(100vh - 150px);border-radius:var(--r-md);object-fit:contain}
#lightbox-close{position:fixed;top:16px;right:16px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center}
#lightbox-del{height:44px;padding:0 22px;border-radius:99px;background:var(--red);color:#fff;font-family:var(--f-head);display:flex;align-items:center;gap:6px}

/* ripple */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:rip .5s linear;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
.spark,.hdr-sparkle{display:none}

/* ── LOGIN ── */
#login-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--bg);overflow:hidden}
#login-screen.hidden{display:none!important}
.login-deco{position:absolute;border-radius:50%;background:var(--p2)}
.login-deco-a{width:340px;height:340px;top:-140px;right:-120px}
.login-deco-b{width:240px;height:240px;bottom:-100px;left:-90px;background:var(--p1)}
.bg-heart{position:absolute;color:var(--p3);opacity:0;animation:floatUp linear infinite;pointer-events:none}
.login-heart{position:fixed;color:var(--p5);pointer-events:none;z-index:99999;animation:heartFly .9s ease-out forwards}
@keyframes heartFly{to{opacity:0;transform:translateY(-160px) scale(1.4)}}
.login-box{position:relative;z-index:1;width:100%;max-width:380px;padding:32px 24px 26px;border-radius:var(--r-xl);background:var(--card);box-shadow:0 30px 60px -20px rgba(179,58,104,.3);animation:mup .5s cubic-bezier(.2,.8,.2,1)}
.login-logo{width:72px;height:72px;margin:0 auto 14px;border-radius:24px;background:linear-gradient(140deg,var(--hero1),var(--hero2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:0 12px 24px -8px rgba(228,90,140,.6)}
.login-title{font-family:var(--f-head);font-size:24px;text-align:center}
.login-sub{font-size:13px;color:var(--ink3);text-align:center;margin-bottom:24px}
.login-fg{margin-bottom:14px}
.login-lbl{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.inp-ico{position:relative}
.inp-ico>.ti{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:18px}
.login-inp{width:100%;height:50px;padding:0 44px;border:1.5px solid transparent;border-radius:var(--r-md);background:var(--p1);font-size:15px;color:var(--ink);outline:none}
.login-inp:focus{border-color:var(--p4);background:#fff}
#eye-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;color:var(--ink3);font-size:18px;display:flex;align-items:center;justify-content:center}
.remember-row{display:flex;align-items:center;gap:8px;margin:4px 0 6px;font-size:13px;color:var(--ink2)}
#remember-box{width:22px;height:22px;border-radius:7px;border:2px solid var(--p3);background:#fff;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}
.login-btn{width:100%;height:54px;margin-top:14px;border-radius:var(--r-md);background:var(--p5);color:#fff;font-family:var(--f-head);font-size:16px;box-shadow:0 12px 24px -10px rgba(228,90,140,.7);position:relative;overflow:hidden}
.login-btn:disabled{opacity:.6}
.login-err{min-height:18px;margin-top:10px;font-size:13px;text-align:center;color:var(--red);font-weight:600}

@media(min-width:600px){
  .ov,.emoji-picker-ov{align-items:center}
  .modal,.emoji-picker-box{border-radius:var(--r-xl)}
}

/* ปฏิทินเล็กในการ์ดรายเดือน (แบบเดียวกับหน้าแรก) */
.mc-cal{width:50px}
.mc-cal b{font-size:15px;line-height:2.1}
.mc-card:nth-child(even) .mc-cal{transform:rotate(3deg)}
.mc-card:hover .mc-cal{transform:rotate(0)}
.mc-card:not(.is-cur) .mc-cal span{background:var(--p4)}

/* ชื่อตัวแปรสีเดิมที่ยังถูกใช้ใน style ของ JS/HTML บางจุด */
:root{--grad1:var(--hero1);--grad2:var(--p4);--grad3:var(--p5);--tl:var(--ink3);--tm:var(--ink2);--td:var(--ink);--tx:var(--ink);--sc:var(--sh)}
/* หน้าต่าง popup ต้องอยู่เหนือปุ่มเปลี่ยนธีม */
.ov{z-index:450}
.emoji-picker-ov{z-index:500}

/* ══════════ รับเงิน / ประวัติลูกค้า / บัญชี ══════════ */
.cname{display:flex;align-items:center;gap:2px;cursor:pointer}
.cname span{overflow:hidden;text-overflow:ellipsis}
.cname .ti{font-size:15px;color:var(--ink3);flex-shrink:0}
.abtn-pay{background:var(--p5);color:#fff}
.abtn-ic{flex:0 0 42px;padding:0;font-size:17px}
.abtn-ic:not(.abtn-e):not(.abtn-d){background:var(--lav-bg);color:var(--lav)}
.abtn-e.abtn-ic,.abtn-d.abtn-ic{flex:0 0 42px;padding:0}

.pay-box{margin-top:12px;padding:12px;border-radius:var(--r-md);background:var(--green-bg)}
.pay-top{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2)}
.pay-top b{font-family:var(--f-head);font-weight:500;font-size:14px;color:var(--ink)}
.pay-top b.g{color:var(--green)}
.pay-track{height:7px;margin:8px 0 4px;border-radius:99px;background:#fff;overflow:hidden}
.pay-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8fd8ac,var(--green))}
.pay-hist summary{display:flex;align-items:center;gap:5px;list-style:none;cursor:pointer;font-size:12px;font-weight:600;color:var(--green);padding-top:6px}
.pay-hist summary::-webkit-details-marker{display:none}
.pay-hist summary .ti-chevron-down{margin-left:auto;transition:transform .25s}
.pay-hist[open] summary .ti-chevron-down{transform:rotate(180deg)}
.ph-row{display:flex;align-items:center;gap:8px;margin-top:6px;padding:8px;border-radius:12px;background:#fff}
.ph-ico{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;background:var(--p1);color:var(--p5)}
.ph-renew{background:var(--lav-bg);color:var(--lav)}
.ph-full{background:var(--green-bg);color:var(--green)}
.ph-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ph-t b{font-size:12.5px}
.ph-t em{font-style:normal;font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-a{font-family:var(--f-head);font-size:13.5px;color:var(--green)}
.ph-del{width:26px;height:26px;border-radius:50%;color:var(--ink3);font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
button.ph-del:active{background:var(--red-bg);color:var(--red)}

.pay-sum{padding:14px;border-radius:var(--r-md);background:var(--p1);margin-bottom:14px}
.ps-name{font-family:var(--f-head);font-size:16px;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ps-name span{font-family:var(--f-body);font-size:11px;padding:2px 9px;border-radius:99px;background:#fff;color:var(--p6)}
.ps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ps-grid div{display:flex;flex-direction:column;padding:8px 10px;border-radius:12px;background:#fff}
.ps-grid span{font-size:11px;color:var(--ink2)}
.ps-grid b{font-family:var(--f-head);font-weight:500;font-size:14px}
.ps-grid b.g{color:var(--green)}
.ps-grid .hl{background:var(--p5);color:#fff}
.ps-grid .hl span{color:rgba(255,255,255,.85)}
.pay-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.pay-types button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:var(--r-md);background:#fff;border:1.5px solid var(--p2);color:var(--ink2);font-size:12px;font-weight:600;transition:all .2s}
.pay-types .ti{font-size:22px;color:var(--p4)}
.pay-types button.on{border-color:var(--p5);background:var(--p1);color:var(--p6)}
.pay-types button.on .ti{color:var(--p5)}
.pay-hint{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;margin-bottom:12px;border-radius:var(--r-sm);background:var(--lav-bg);color:#4d40a8;font-size:12.5px;line-height:1.5}
.pay-hint .ti{font-size:16px;margin-top:2px;flex-shrink:0}

.cu-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cu-av{width:54px;height:54px;border-radius:50%;background:linear-gradient(140deg,var(--hero1),var(--hero2));color:#fff;font-family:var(--f-head);font-size:22px;display:flex;align-items:center;justify-content:center}
.cu-name{font-family:var(--f-head);font-size:19px}
.cu-tag{display:inline-block;margin-top:2px;padding:2px 10px;border-radius:99px;font-size:11.5px;font-weight:600}
.cu-good{background:var(--green-bg);color:var(--green)}
.cu-mid{background:var(--amber-bg);color:var(--amber)}
.cu-bad{background:var(--red-bg);color:var(--red)}
.cu-new{background:var(--lav-bg);color:var(--lav)}
.cu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cu-grid div{display:flex;flex-direction:column;padding:10px;border-radius:12px;background:var(--p1)}
.cu-grid span{font-size:11px;color:var(--ink2)}
.cu-grid b{font-family:var(--f-head);font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cu-grid .g{color:var(--green)}.cu-grid .r{color:var(--red)}.cu-grid .p{color:var(--p5)}
.cu-list{display:flex;flex-direction:column;gap:6px;margin:14px 0 4px}
.cu-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--p2)}
.cu-row>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.cu-row b{font-family:var(--f-head);font-weight:500}
.cu-row em{font-style:normal;font-size:11px;color:var(--ink3)}

.tub-av{cursor:pointer}
.acct-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-md);background:var(--p1);margin-bottom:10px}
.acct-av{width:48px;height:48px;border-radius:50%;background:var(--p5);color:#fff;font-family:var(--f-head);font-size:20px;display:flex;align-items:center;justify-content:center}
.acct-name{font-family:var(--f-head);font-size:16px}
.acct-sub{font-size:12px;color:var(--ink3)}
.acct-row{display:flex;align-items:center;gap:10px;width:100%;padding:14px;border-radius:var(--r-md);border:1px solid var(--p2);font-size:14px;font-weight:600;color:var(--ink);text-align:left}
.acct-row .ti:first-child{width:32px;height:32px;border-radius:10px;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:18px}
.acct-row span{flex:1}
.acct-row .ti:last-child{color:var(--ink3)}
.acct-sec{margin-top:16px;padding-top:14px;border-top:1px solid var(--p2)}

.yr-tog{display:inline-flex;gap:2px;margin-top:16px;padding:3px;border-radius:99px;background:rgba(255,255,255,.1);position:relative}
.yr-tog button{padding:5px 12px;border-radius:99px;font-size:11.5px;color:rgba(255,255,255,.7)}
.yr-tog button.on{background:#fff;color:var(--ink);font-weight:600}
.yr-bars{margin-top:12px}
.yr-bars.mode-int .yb.cur i{background:#f6c56d;box-shadow:0 0 12px rgba(246,197,109,.6)}
.yr-bars.mode-int .yb:not(.yb-empty) i{background:rgba(246,197,109,.45)}

/* ══════════ แจ้งเตือน (ออกแบบใหม่) ══════════ */
.alc .ti{font-size:15px}
.alc-o.sel{color:var(--red)}
.alc-s.sel{color:var(--lav)}
.al2{--c:var(--p5);--cb:var(--p1);--cs:var(--p2);position:relative;overflow:hidden;padding:14px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh);animation:statIn .45s cubic-bezier(.2,.8,.2,1) both}
.al2-o{--c:var(--red);--cb:var(--red-bg);--cs:#f8ccd3}
.al2-s{--c:var(--lav);--cb:var(--lav-bg);--cs:#dcd6fb}
.al2::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--c),transparent)}
.al2-top{display:flex;align-items:center;gap:11px}
.al2-av{width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--cb);color:var(--c);font-family:var(--f-head);font-size:18px;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cs)}
.al2-av img{width:100%;height:100%;object-fit:cover}
.al2-inf{flex:1;min-width:0;cursor:pointer}
.al2-n{font-family:var(--f-head);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al2-m{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden}
.al2-own{padding:1px 8px;border-radius:99px;background:var(--p1);color:var(--p6);font-weight:600;font-size:10.5px}
.al2-chip{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;padding:5px 10px;border-radius:99px;background:var(--cb);color:var(--c);font-size:11.5px;font-weight:700}
.al2-chip .ti{font-size:14px}
.al2-o .al2-chip .ti{animation:shake 2.4s ease-in-out infinite}
@keyframes shake{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-14deg)}88%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}}
.al2-mid{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px;border-radius:var(--r-md);background:var(--cb)}
.al2-amt{display:flex;flex-direction:column;line-height:1.2;padding-right:12px;border-right:1.5px dashed var(--cs)}
.al2-amt span{font-size:11px;color:var(--ink2)}
.al2-amt b{font-family:var(--f-head);font-weight:500;font-size:22px;color:var(--c);white-space:nowrap}
.al2-break{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:11.5px;color:var(--ink2)}
.al2-break b{font-family:var(--f-head);font-weight:500;color:var(--ink)}
.al2-break b.g{color:var(--green)}
.al2-track{height:5px;margin-top:8px;border-radius:99px;background:var(--cb);overflow:hidden}
.al2-track i{display:block;height:100%;border-radius:99px;background:var(--green)}
.al2-act{display:flex;gap:6px;margin-top:10px}
.al2-btn{flex:1;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;font-weight:600;background:var(--p1);color:var(--p6);transition:transform .15s}
.al2-btn:active{transform:scale(.96)}
.al2-btn.al2-pay{background:var(--c);color:#fff;box-shadow:0 6px 14px -8px var(--c)}
.al2-btn.al2-ic{flex:0 0 38px;background:var(--lav-bg);color:var(--lav);font-size:16px}
.alc{gap:4px;padding:9px 4px;white-space:nowrap}
.alc:not(.sel) .ti{display:none}

/* ── ลูกเล่นส่วนแจ้งเตือน ── */
.alc.sel .alc-num{animation:numBump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes numBump{0%{transform:scale(.6)}100%{transform:scale(1)}}
.alc.sel .ti{animation:icoBob 2.6s ease-in-out infinite}
/* วงแหวนเต้นรอบรูปของรายการที่เลยกำหนด/ครบวันนี้ */
.al2-o .al2-av,.al2-t .al2-av{animation:avPulse 2s ease-out infinite}
@keyframes avPulse{0%{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cs),0 0 0 4px var(--cs)}70%{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cs),0 0 0 12px transparent}100%{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cs),0 0 0 12px transparent}}
/* แสงวิ่งบนปุ่มรับเงิน */
.al2-btn.al2-pay{position:relative;overflow:hidden}
.al2-btn.al2-pay::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:btnShine2 3s ease-in-out infinite}
@keyframes btnShine2{0%,60%{left:-60%}100%{left:130%}}
/* กดการ์ดแล้วยุบนิด ๆ / ยอดเงินเด้ง */
.al2{transition:transform .2s}
.al2:active{transform:scale(.985)}
.al2-amt b{display:inline-block;animation:valPop .6s cubic-bezier(.3,1.5,.5,1) both;animation-delay:inherit}
@keyframes valPop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
/* หัวใจลอยตอนปิดยอด */
.login-heart{font-size:22px}

/* ช่องวันที่แบบ วว/ดด/ปปปป — ช่องจริงโปร่งใสวางทับ */
.date-wrap{position:relative}
.date-disp{display:flex;align-items:center;pointer-events:none}
.date-disp.empty{color:var(--ink3)}
.date-ico{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--p4);font-size:17px;pointer-events:none}
.date-wrap input[type="date"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0}
.date-wrap input[type="date"]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.date-wrap:focus-within .date-disp{border-color:var(--p4);background:#fff}

/* ── รูปโปรไฟล์ผู้ใช้ ── */
.tub-av>span{overflow:hidden}
.tub-av>span.has-img img,.acct-av span.has-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.acct-card{align-items:center}
.acct-av{position:relative;width:64px;height:64px;flex-shrink:0;cursor:pointer;padding:0;background:none}
.acct-av>span:first-child{display:flex;width:100%;height:100%;border-radius:50%;overflow:hidden;align-items:center;justify-content:center;background:var(--p5);color:#fff;font-family:var(--f-head);font-size:24px;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--p3)}
.acct-av>span.uploading{opacity:.55}
.acct-cam{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.acct-info{flex:1;min-width:0}
.acct-btns{display:flex;gap:6px;margin-top:8px}
.acct-mini{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 11px;border-radius:99px;background:#fff;color:var(--p6);font-size:12px;font-weight:600;cursor:pointer}
.acct-mini.acct-rm{color:var(--red)}