/* อัตลักษณ์ รพ.บางบ่อ (ใช้ทุกหน้า โหลดหลัง CSS ของหน้า)
   น้ำเงินไล่เฉด navy→blue เป็นแกน · ทองเป็นแต้มเน้นเล็กๆ · พื้นสว่างนวล + ลายกากบาทจาง + คลื่นน้ำเงินมุมจอ */
:root{
  --bb-navy:#063C7E;--bb-navy-900:#003C84;--bb-blue:#0088C1;--bb-sky:#33A9DA;--bb-sky-soft:#8AD2F2;--bb-sky-bg:#EAF6FF;
  --bb-gold:#E4C06C;--bb-gold-deep:#C69A45;--bb-line:#DCE8F5;
  --bb-grad:linear-gradient(135deg,#063C7E 0%,#0A5CA8 55%,#0088C1 100%);
  --bb-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M31 22h10v9h9v10h-9v9H31v-9h-9V31h9z' fill='none' stroke='%230088C1' stroke-width='2' opacity='.07'/%3E%3C/svg%3E");
  --bb-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M400,0 V300 H120 C210,250 150,150 260,120 C330,100 340,40 400,60 Z' fill='%238AD2F2' opacity='.55'/%3E%3Cpath d='M400,40 V300 H210 C280,250 240,170 320,150 C360,140 370,90 400,110 Z' fill='%230088C1' opacity='.9'/%3E%3C/svg%3E");
}

/* พื้นหลังนวล: ขาว→ฟ้าอ่อน + กากบาทการแพทย์จางๆ */
body{background-color:var(--bb-sky-bg);background-image:var(--bb-cross),linear-gradient(180deg,#fff 0,var(--bb-sky-bg) 420px);background-repeat:repeat,no-repeat}

/* แถบหัว: ไล่เฉดน้ำเงิน + เส้นทองบางใต้แถบ */
.top,#appView > header{background:var(--bb-grad);box-shadow:inset 0 -3px 0 var(--bb-gold),0 6px 18px rgba(6,60,126,.18)}
.bb-mark{display:block;flex-shrink:0;object-fit:contain}
.top .brand .bb-mark{filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}

/* หน้าใส่ PIN / เข้าสู่ระบบ: โลโก้เต็ม + คลื่นน้ำเงินมุมขวาล่าง */
.pin-screen,#loginView{position:relative;overflow:hidden;isolation:isolate}
.pin-screen{background:var(--bb-cross),linear-gradient(180deg,#fff,var(--bb-sky-bg))}
.pin-screen::after,#loginView::after{content:"";position:absolute;right:0;bottom:0;width:min(62vw,560px);height:min(42vh,360px);
  background:var(--bb-wave) no-repeat right bottom/100% 100%;z-index:-1;pointer-events:none}
#loginView{min-height:100vh}
.bb-lockup{display:block;height:auto;max-width:78vw;margin:0 auto 6px}
.pin-screen h1{margin-top:14px}
.bb-rule{display:block;width:56px;height:3px;border-radius:2px;background:var(--bb-gold);margin:8px auto 10px}

/* การ์ด: มุมโค้ง เงานุ่มตามแบรนด์ */
.card,.kpi,.login{box-shadow:0 10px 30px rgba(6,60,126,.10)}
.card h2::after{content:"";display:block;width:40px;height:3px;border-radius:2px;background:var(--bb-gold);margin-top:6px}
.card h2.no-rule::after,.sheet h2::after{display:none}

/* ท้ายหน้ามาตรฐาน */
.bb-foot{text-align:center;color:#5B6B85;font-size:12px;line-height:1.7;padding:22px 16px calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--bb-line);margin-top:12px}
.bb-foot b{color:var(--bb-navy);font-weight:600}
.pin-screen .bb-foot{border:0;margin-top:auto;padding-bottom:8px;max-width:520px}
.login h1,.login > .hint{text-align:center}
.pin-screen .bb-foot{position:relative;background:rgba(255,255,255,.82);border-radius:14px;padding:10px 14px;margin-bottom:6px}
@media (max-width:600px){.pin-screen::after,#loginView::after{width:70vw;height:22vh}}

/* รูปประจำรายการผ้า */
.bb-pic{position:relative;flex-shrink:0;padding:0;border:1px solid var(--bb-line);border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in;margin-right:8px}
.bb-pic img{width:100%;height:100%;object-fit:cover;display:block}
.bb-pic i{position:absolute;right:2px;bottom:2px;min-width:16px;height:16px;border-radius:8px;background:rgba(6,60,126,.85);color:#fff;font:700 10px/16px Poppins,sans-serif;font-style:normal;text-align:center;padding:0 3px}
.bb-lb{position:fixed;inset:0;z-index:80;background:rgba(6,20,45,.88);display:flex;flex-direction:column}
.bb-lb-head{display:flex;align-items:center;gap:12px;color:#fff;padding:14px 16px;font-size:18px}
.bb-lb-head b{flex:1}
.bb-lb-x{width:48px;height:48px;border-radius:24px;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:22px}
.bb-lb-row{flex:1;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 20px;align-items:center}
.bb-lb-row figure{margin:0;flex:0 0 auto;max-width:92vw;scroll-snap-align:center;text-align:center}
.bb-lb-row img{max-width:92vw;max-height:72vh;border-radius:14px;background:#fff;display:block;margin:0 auto}
.bb-lb-row figcaption{color:#fff;margin-top:8px;font-weight:600;font-size:16px}
.line .bb-pic + .name{min-width:0}