/* styles-app.css — ส่วนที่เพิ่มจาก mockup (ของจริงต้องมี: loader, modal, ฟอร์ม, สถานะว่าง) */

/* `.btn{display:inline-flex}` มีน้ำหนักมากกว่ากฎ [hidden] ของเบราว์เซอร์
   ทำให้ปุ่มที่สั่งซ่อนยังโผล่อยู่ — ต้องทับกลับให้ชัด */
[hidden]{display:none!important}

/* ---------- ตัวโหลด ---------- */
.loader-wrap{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(2px);
  display:none;place-items:center;z-index:70;opacity:0;transition:opacity 200ms var(--ease)}
.loader-wrap.on{display:grid;opacity:1}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border-strong);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-wrap p{margin-top:12px;font-size:15px;color:var(--text2);text-align:center;white-space:pre-line;max-width:240px}
.loader-box{display:grid;place-items:center}

/* แถบบางบนสุดตอนโหลดเบื้องหลัง (ไม่บังจอ) */
.topbar-load{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:80;transition:width 240ms var(--ease),opacity 240ms var(--ease)}
.topbar-load.on{width:85%}
.topbar-load.done{width:100%;opacity:0}

/* ---------- modal / confirm ---------- */
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;place-items:center;z-index:65;padding:24px}
.modal-wrap.open{display:grid}
.modal{background:var(--surface);border-radius:18px;padding:22px 20px 18px;max-width:340px;width:100%;box-shadow:var(--shadow-lg);text-align:center}
.modal h3{font-size:19px;font-weight:600;margin-bottom:6px}
.modal p{font-size:15px;color:var(--text2);margin-bottom:16px;white-space:pre-line}
.modal .inp{text-align:left;margin-bottom:14px}
.modal-actions{display:grid;gap:8px}
.modal-actions.two{grid-template-columns:1fr 1fr}
.btn-danger{background:var(--danger);color:#fff}

/* ---------- หน้าล็อก (ของจริง) ---------- */
#lock{gap:0}
.dots span.filled{background:var(--text);border-color:var(--text)}
.lock-msg{font-size:15px;color:var(--danger);min-height:24px;margin-top:-18px;margin-bottom:10px}
.lock-msg.info{color:var(--text2)}
.shake{animation:shake .38s var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.key[disabled]{opacity:.35}

/* ---------- ฟอร์ม/รายการในหน้าตั้งค่า ---------- */
.set-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);min-height:52px}
.set-row:last-child{border-bottom:0}
.set-row .grow{flex:1;min-width:0}
.set-row .t{font-size:17px}
.link-btn{color:var(--accent);font-size:15px;height:36px;padding:0 10px;border-radius:980px}
.link-btn.danger{color:var(--danger)}
.sel{width:100%;height:44px;border:1px solid var(--border-strong);border-radius:12px;padding:0 12px;background:var(--surface);color:var(--text);font:inherit;font-size:17px}
.sel:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(26,125,76,.28)}
.swatch{width:22px;height:22px;border-radius:7px;flex-shrink:0}
.empty{padding:22px 0;text-align:center;color:var(--text3);font-size:15px}
.phase{border-left:3px solid var(--border-strong);background:var(--surface-2);border-radius:12px;padding:12px 14px;font-size:15px;color:var(--text2)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.pill-tab{display:grid;grid-auto-flow:column;background:var(--surface-2);border-radius:10px;padding:3px;margin-bottom:16px}
.pill-tab button{height:34px;border-radius:8px;font-size:15px;color:var(--text2)}

/* ปุ่มที่เลือกต้องเห็นชัดในแวบเดียว — การ์ดขาวบนพื้นเทาแบบเดิมแยกยากเกินไป
   จึงใช้สีเขียวแบรนด์เป็นสถานะ "เลือกอยู่" ให้เหมือนกันทั้งแอป */
.seg button.on,.pill-tab button.on{
  background:var(--accent-soft);color:var(--accent);font-weight:600;
  box-shadow:inset 0 0 0 1.5px var(--accent-line)
}
.seg button:not(.on),.pill-tab button:not(.on){color:var(--text3)}

/* ยกเว้นปุ่ม "รายจ่าย" ที่ใช้สีแดง เพื่อให้รู้ทันทีว่ากำลังบันทึกอะไรอยู่ */
.seg button.on.seg-out{background:var(--danger-soft);color:var(--danger);box-shadow:inset 0 0 0 1.5px var(--danger)}
.offline{background:var(--warning-soft);color:var(--warning);border-radius:12px;padding:10px 14px;font-size:15px;margin-bottom:12px;display:none}
.offline.show{display:block}

/* เครื่องที่ใช้นิ้วแตะ: บางเบราว์เซอร์ค้าง focus ring ไว้หลังแตะ ทำให้มีกรอบค้างรอบปุ่ม
   ตัดเฉพาะปุ่มที่กดแล้วเปลี่ยนหน้า — เครื่องที่ใช้คีย์บอร์ดยังเห็นกรอบตามเดิม */
@media (hover:none) and (pointer:coarse){
  .tab:focus-visible,.tab-scan:focus-visible,.icon-btn:focus-visible,.key:focus-visible,.chip:focus-visible{outline:none}
}

/* ทางสู่ปลดหนี้ — .step เป็นปุ่มจริง ต้องรีเซ็ตสไตล์ปุ่มของเบราว์เซอร์ */
.step{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.step:hover{border-color:var(--accent-line)}
.step.paid:hover{background:var(--accent-hover)}

/* หน้าสแกน: viewfinder ต้องรับทั้งรูปตัวอย่างและข้อความว่าง */
#scan .viewfinder{background:rgba(255,255,255,.04);border-radius:14px;overflow:hidden}
#scan .btn-sm{height:34px;padding:0 14px;font-size:15px}

/* ---------- ปรับให้พอดีจอมือถือจริง ---------- */

/* สองช่องล่างของการ์ดยอดคงเหลือ: ป้ายอยู่บน ตัวเลขอยู่ล่าง จะได้ไม่ตกบรรทัดชนกัน */
.sub-grid{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--border)}
.sub-grid>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sub-grid>div:last-child{text-align:right}
.sub-grid b{font-size:17px;font-weight:600}
.sub-grid .accent{color:var(--accent)}

/* iPhone จอบาก / PWA เต็มจอ: เนื้อหาต้องไม่มุดใต้แถบสถานะ (viewport-fit=cover) */
.app{padding-top:env(safe-area-inset-top)}

/* 100vh บนมือถือรวมแถบที่อยู่เว็บด้วย ทำให้ล้นจอ — ใช้ 100dvh ถ้าเบราว์เซอร์รองรับ */
@supports (height:100dvh){.screen{min-height:100dvh}}

/* จอแคบกว่า 400px (iPhone 12/13/14/15 ปกติ) ลดขนาดลงให้พอดีมือ */
@media (max-width:400px){
  body{font-size:16px}
  .screen{padding:8px 16px 104px}
  .top h1{font-size:25px}
  .balance{font-size:38px;margin:2px 0 14px}
  .card{padding:16px;border-radius:16px;margin-bottom:14px}
  .io div{padding:10px 12px}
  .io b{font-size:18px}
  .list-item{gap:12px;padding:11px 0}
  .list-item .t{font-size:16px}
  .cat{width:36px;height:36px;border-radius:10px}
  .sec-title{margin:22px 0 8px}
  .debt-hero .big,.rec-hero .big{font-size:34px}
  .road{gap:6px}
  .step{padding:7px 3px;min-height:62px}
  .step .m,.step .a{font-size:12px}
  .goal{gap:12px}
  .ring{width:56px;height:56px}
  .tab{font-size:10px}
}

/* จอกว้าง (เดสก์ท็อป หรือมือถือที่เผลอเปิดโหมดเว็บไซต์เดสก์ท็อป)
   ขยายคอลัมน์และตัวอักษรขึ้น ไม่ให้เหลือแถบจิ๋วกลางจอ */
@media (min-width:700px){
  body{font-size:19px}
  .app{max-width:560px}
  .balance{font-size:50px}
  .top h1{font-size:32px}
  .tab{font-size:13px}
}

/* ---------- แก้เอฟเฟกต์ตอนกดปุ่มให้เข้ารูปทรงปุ่ม ---------- */

/* เบราว์เซอร์มือถือวาดกรอบสี่เหลี่ยมทึบตอนแตะ ซึ่งไม่เข้ากับปุ่มกลม/ปุ่มแคปซูล */
*{-webkit-tap-highlight-color:transparent}

/* styles.css ตั้ง :focus-visible{border-radius:8px} ซึ่งไปทับความโค้งของปุ่มเอง
   ปุ่มกลมเลยกลายเป็นสี่เหลี่ยมมุมมนตอนโฟกัส — คืนความโค้งเดิมให้ทุกทรง */
.key:focus-visible{border-radius:50%}
.tab-scan:focus-visible{border-radius:50%}
.icon-btn:focus-visible,.btn:focus-visible,.chip:focus-visible,
.link-btn:focus-visible,.badge:focus-visible,.switch:focus-visible{border-radius:980px}
.card:focus-visible,.step:focus-visible,.list-item:focus-visible{border-radius:16px}
.inp:focus-visible,.sel:focus-visible{border-radius:12px}

/* แป้น PIN: ตอบสนองเป็นวงกลมให้ตรงกับรูปทรงปุ่ม */
.key{transition:background 120ms var(--ease),transform 120ms var(--ease)}
.key:active{background:var(--surface-2);transform:scale(.94)}
.key.ghost:active{background:transparent;opacity:.6;transform:none}
.tab-scan:active{transform:scale(.94)}
.btn:active{transform:scale(.985)}

/* ---------- สเกเลตัน (โครงเนื้อหาระหว่างรอข้อมูล) ---------- */
@keyframes sk-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sk{border-radius:6px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sk-shimmer 1.3s ease infinite;display:block}
.sk-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.sk-row:last-child{border-bottom:0}
.sk-ic{width:40px;height:40px;border-radius:12px;flex-shrink:0}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.sk-amt{width:64px;height:14px;flex-shrink:0}
.sk-step{height:62px;border-radius:12px}
@media (max-width:400px){.sk-ic{width:36px;height:36px;border-radius:10px}}
@media (prefers-reduced-motion:reduce){.sk{animation-duration:3s}}

/* ---------- สแกนไลน์: ต้องกวาดไปเรื่อยๆ จนกว่าจะอ่านบิลเสร็จ ---------- */
/* ของเดิมตั้งไว้ให้วิ่งแค่ 2 รอบ (2.4 วินาที) แต่ Gemini ใช้เวลาได้ถึง 20 วินาที */
.scanning .scanline{animation:sweep 1.9s var(--ease) infinite;opacity:1;z-index:3}
.viewfinder{position:relative}
.scanning::after{content:"";position:absolute;inset:0;background:rgba(76,195,138,.07);pointer-events:none;z-index:2}