/* ════════════════════════════════════════════════════════════════════════════
   kaizen-award — Document Intelligence Studio (Modern SaaS, light)
   โทเคนใน :root ยกมาตรงจาก ~/Claude/kaizen/frontend/assets/css/base.css
   (ซึ่งยกจาก document-studio อีกที) เพื่อให้แอปในตระกูลเดียวกันหน้าตาตรงกัน
   ส่วนที่เพิ่ม: เลย์เอาต์มือถือสำหรับ LINE Mini App — แถบล่าง + safe-area
   โครงสร้างหลักคือ flat + hairline borders · ไม่มี gradient · ไม่มี backdrop-filter
   ════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light;
  --bg-primary:#fff; --bg-secondary:#f2f2f7; --bg-tertiary:#fff;
  --bg-elevated:#fff; --bg-quaternary:#e5e5ea; --bg-grouped:#f2f2f7;
  --label:rgba(0,0,0,.88); --label-2:rgba(60,60,67,.6);
  --label-3:rgba(60,60,67,.56); --label-4:rgba(60,60,67,.18);
  --sep:rgba(0,0,0,.12); --sep-opaque:#dadadd;
  --border:rgba(0,0,0,.14); --border-strong:rgba(0,0,0,.20);
  --fill-1:rgba(0,0,0,.07); --fill-2:rgba(0,0,0,.05);
  --fill-3:rgba(0,0,0,.04); --fill-4:rgba(0,0,0,.025);
  --blue:#007aff; --blue-hover:#0a6ae6; --blue-active:#0057cc;
  --green:#34c759; --green-text:#1e803a; --indigo:#5856d6;
  --orange:#ff9500; --orange-text:#b8690a; --purple:#af52de;
  --red:#ff3b30; --red-text:#d70015; --teal:#30b0c7;
  --font:'Inter','Noto Sans Thai',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono','Menlo',monospace;
  --r-xs:3px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-badge:5px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow-md:0 1px 3px rgba(0,0,0,.06);
  --shadow-lg:0 4px 12px rgba(0,0,0,.08); --shadow-xl:0 8px 24px rgba(0,0,0,.12);
  --ease:cubic-bezier(.25,.46,.45,.94); --dur-fast:.12s; --dur-normal:.2s;
  --s-1:4px; --s-2:6px; --s-3:8px; --s-4:10px; --s-5:12px; --s-6:16px;
  --s-7:20px; --s-8:24px; --s-9:32px;
  --header-h:52px; --nav-h:58px;
}

@font-face{font-family:'Inter';src:url('../fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'Noto Sans Thai';src:url('../fonts/NotoSansThai-400.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans Thai';src:url('../fonts/NotoSansThai-600.woff2') format('woff2');
  font-weight:600;font-display:swap}

/* องค์ประกอบที่ตั้ง display: ไว้ (grid/flex) จะชนะแอตทริบิวต์ hidden
   ถ้าไม่บังคับตรงนี้ ปุ่มย้อนกลับกับรูปโปรไฟล์จะโผล่ในหน้าเข้าสู่ระบบ */
[hidden]{display:none!important}

html,body{height:100%}
body{background:var(--bg-grouped);color:var(--label);font-family:var(--font);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}

/* ── โครงหน้าจอ ─────────────────────────────────────────────────────────── */
#app{min-height:100%;display:flex;flex-direction:column}
.hdr{position:sticky;top:0;z-index:30;height:var(--header-h);flex:0 0 auto;
  display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-5);
  background:var(--bg-primary);border-bottom:1px solid var(--sep)}
.hdr h1{font-size:16px;font-weight:600;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .back{width:32px;height:32px;margin-left:-6px;border:0;background:none;
  border-radius:var(--r-md);display:grid;place-items:center;font-size:20px;
  color:var(--blue);cursor:pointer}
.hdr .back:active{background:var(--fill-2)}
.avatar{width:30px;height:30px;border-radius:50%;border:1px solid var(--sep);
  object-fit:cover;background:var(--fill-2);flex:0 0 auto;cursor:pointer;
  display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--label-2)}
main{flex:1 1 auto;padding:var(--s-5);padding-bottom:calc(var(--nav-h) + 28px);
  max-width:760px;width:100%;margin:0 auto}
@media(min-width:768px){main{padding:var(--s-7) var(--s-6)
  calc(var(--nav-h) + 32px)}}

/* ── แถบล่าง (สูงสุด 6 แท็บก่อนจะอึดอัดบนจอ 320px) ─────────────────────── */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:var(--bg-primary);border-top:1px solid var(--sep);
  padding-bottom:env(safe-area-inset-bottom,0)}
.nav a{flex:1;min-width:0;height:var(--nav-h);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-size:10.5px;
  color:var(--label-3);font-weight:500}
.nav a .ic{font-size:19px;line-height:1}
.nav a.on{color:var(--blue)}
.nav a:active{background:var(--fill-3)}

/* ── การ์ด · ส่วน ──────────────────────────────────────────────────────── */
.card{background:var(--bg-primary);border:1px solid var(--sep);
  border-radius:var(--r-xl);padding:var(--s-5);margin-bottom:var(--s-4)}
.card.tap{cursor:pointer;transition:border-color var(--dur-fast) var(--ease)}
.card.tap:active{border-color:var(--border-strong);background:var(--fill-4)}
.card h3{font-size:15px;font-weight:600;margin-bottom:var(--s-2)}
.sec-t{font-size:11.5px;font-weight:600;color:var(--label-2);
  text-transform:uppercase;letter-spacing:.05em;margin:var(--s-7) 0 var(--s-3)}
.sec-t:first-child{margin-top:0}
.muted{color:var(--label-2)}
.small{font-size:13px}
.xs{font-size:12px}
.mt{margin-top:var(--s-4)}
.row{display:flex;gap:var(--s-3);align-items:center}
.row.wrap{flex-wrap:wrap}
.spread{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}

/* ── badge เหลี่ยม 5px (ไม่ใช่ pill) ───────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  border-radius:var(--r-badge);font-size:11.5px;font-weight:600;
  background:var(--fill-2);color:var(--label-2);border:1px solid transparent;
  white-space:nowrap}
.badge.b{background:#eef5ff;color:var(--blue-hover);border-color:#cfe2ff}
.badge.g{background:#eefaf0;color:var(--green-text);border-color:#cdead6}
.badge.o{background:#fff5e6;color:var(--orange-text);border-color:#ffe2b8}
.badge.r{background:#ffeceb;color:var(--red-text);border-color:#ffd4d1}
.badge.i{background:#eeeefc;color:#4341c0;border-color:#d8d8f6}

/* ── ปุ่ม ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 15px;border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--bg-primary);font-size:14px;font-weight:600;cursor:pointer;
  transition:background var(--dur-fast) var(--ease);min-height:40px}
.btn:active{background:var(--fill-2)}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:active{background:var(--blue-active);border-color:var(--blue-active)}
.btn.blk{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:6px 11px;min-height:32px;font-size:13px}
.btn.dgr{color:var(--red-text)}

/* ── ฟอร์ม ─────────────────────────────────────────────────────────────── */
.f{margin-bottom:var(--s-5)}
.f label{display:block;font-size:13px;font-weight:600;margin-bottom:var(--s-2)}
.f .hint{display:block;font-size:12px;color:var(--label-2);font-weight:400;
  margin-top:3px;line-height:1.45}
.f input,.f textarea,.f select{width:100%;padding:9px 11px;font-size:15px;
  background:var(--bg-tertiary);border:1px solid var(--border);
  border-radius:var(--r-lg);transition:border-color var(--dur-fast) var(--ease)}
.f textarea{min-height:84px;resize:vertical;line-height:1.55}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,122,255,.12)}
.f.err input,.f.err textarea{border-color:var(--red)}
.f .msg{font-size:12px;color:var(--red-text);margin-top:4px}

/* ── chip เลือกได้ ─────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{padding:6px 11px;border-radius:var(--r-badge);border:1px solid var(--border);
  background:var(--bg-primary);font-size:13px;font-weight:500;cursor:pointer;
  transition:all var(--dur-fast) var(--ease)}
.chip:active{background:var(--fill-2)}
.chip.on{background:#eef5ff;border-color:var(--blue);color:var(--blue-hover);font-weight:600}

/* ── แท็บขีดล่าง ───────────────────────────────────────────────────────── */
.tabs{display:flex;gap:var(--s-6);border-bottom:1px solid var(--sep);
  margin-bottom:var(--s-5);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:none;padding:9px 1px;font-size:14px;font-weight:600;
  color:var(--label-2);cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--blue);border-bottom-color:var(--blue)}

/* ── progress · meter (ใช้ภาพแทนข้อความสถานะ) ──────────────────────────── */
.bar{height:6px;border-radius:99px;background:var(--fill-1);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--blue);border-radius:99px;
  transition:width var(--dur-slow,.32s) var(--ease)}
.bar.g>i{background:var(--green)} .bar.o>i{background:var(--orange)}
.bar.r>i{background:var(--red)}

/* ── KPI ───────────────────────────────────────────────────────────────── */
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.kpi>div{border:1px solid var(--sep);border-radius:var(--r-lg);
  padding:var(--s-4) var(--s-2);text-align:center;background:var(--bg-primary)}
.kpi .lb{font-size:11px;color:var(--label-2);margin-bottom:2px}
.kpi .vl{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;
  line-height:1.2}
.kpi .un{font-size:10.5px;color:var(--label-3)}
.kpi .up .vl{color:var(--green-text)} .kpi .dn .vl{color:var(--red-text)}

/* ── รายการตรวจ ────────────────────────────────────────────────────────── */
.ck{display:flex;gap:var(--s-3);padding:var(--s-3) 0;
  border-bottom:1px solid var(--fill-3);align-items:flex-start}
.ck:last-child{border-bottom:0}
.ck .mk{width:18px;height:18px;border-radius:var(--r-sm);flex:0 0 auto;
  display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:1px}
.ck.ok .mk{background:#eefaf0;color:var(--green-text)}
.ck.no .mk{background:var(--fill-2);color:var(--label-3)}
.ck .tx{flex:1;min-width:0;font-size:13.5px}
.ck .fx{font-size:12.5px;color:var(--label-2);margin-top:3px}

/* ── flag ──────────────────────────────────────────────────────────────── */
.flag{border:1px solid var(--sep);border-left:3px solid var(--orange);
  border-radius:var(--r-lg);padding:var(--s-4);margin-bottom:var(--s-3);
  background:var(--bg-primary)}
.flag.high{border-left-color:var(--red)}
.flag.low{border-left-color:var(--label-4)}
.flag .is{font-size:13.5px;font-weight:600;margin-bottom:3px}
.flag .sg{font-size:13px;color:var(--label-2)}

/* ── รูป ───────────────────────────────────────────────────────────────── */
.ph{border:1px solid var(--sep);border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-secondary);position:relative}
.ph img{width:100%;height:130px;object-fit:cover;display:block}
.ph .empty{height:130px;display:grid;place-items:center;color:var(--label-3);
  font-size:12.5px;cursor:pointer;text-align:center;padding:var(--s-3)}
.ph .cap{font-size:11.5px;font-weight:600;padding:5px 9px;
  background:var(--fill-4);border-bottom:1px solid var(--sep);color:var(--label-2)}
.ph .rm{position:absolute;top:30px;right:6px;background:rgba(0,0,0,.6);color:#fff;
  border:0;border-radius:var(--r-sm);width:24px;height:24px;cursor:pointer;font-size:14px}

/* ── สถานะว่าง / โหลด ─────────────────────────────────────────────────── */
.empty-st{text-align:center;padding:var(--s-9) var(--s-5);color:var(--label-2)}
.empty-st .ic{font-size:34px;margin-bottom:var(--s-3);opacity:.35}
.spin{width:22px;height:22px;border:2px solid var(--fill-1);
  border-top-color:var(--blue);border-radius:50%;animation:sp .7s linear infinite;
  margin:var(--s-8) auto}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px);transform:translateX(-50%);
  background:rgba(0,0,0,.86);color:#fff;padding:9px 15px;border-radius:var(--r-lg);
  font-size:13.5px;z-index:90;max-width:88vw;text-align:center;
  animation:tin var(--dur-normal) var(--ease)}
.toast.err{background:var(--red-text)}
@keyframes tin{from{opacity:0;transform:translate(-50%,8px)}}

/* ── กล่องความรู้ ──────────────────────────────────────────────────────── */
.kb{border:1px solid var(--sep);border-radius:var(--r-lg);padding:var(--s-4);
  margin-bottom:var(--s-3);background:var(--bg-primary)}
.kb .t{font-size:14px;font-weight:600;margin-bottom:2px}
.kb .m{font-size:12px;color:var(--label-3);margin-bottom:var(--s-2)}
.kb dl{font-size:13px;margin-top:var(--s-2)}
.kb dt{font-weight:600;color:var(--label-2);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.04em;margin-top:var(--s-2)}
.kb dd{margin-top:1px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ════════════════════════════════════════════════════════════════════════════
   landing page — หน้าที่คนนอกเห็นเมื่อเปิด kaizenaward.com จากเบราว์เซอร์ปกติ
   คนที่เปิดจากในแอป LINE ไม่เห็นส่วนนี้เลย (app.js ซ่อนทิ้งก่อนวาดแอป)

   โทเคนเดียวกับตัวแอปทั้งหมด — flat + hairline borders ไม่มี gradient
   ไม่มี backdrop-filter · badge เหลี่ยม · radius แน่น (กติกาดีไซน์ของโปรเจกต์)
   ต่างจากตัวแอปแค่ความกว้าง: แอปออกแบบมาเพื่อมือถือ หน้านี้ต้องอ่านบนจอใหญ่ด้วย
   ════════════════════════════════════════════════════════════════════════════ */
#landing{background:var(--bg-primary);min-height:100%}
#landing a{color:inherit}

.lp-nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s-6);padding:var(--s-4) var(--s-7);
  background:var(--bg-primary);border-bottom:1px solid var(--sep)}
.lp-brand{font-weight:600;letter-spacing:-.01em;font-size:17px;
  display:flex;align-items:baseline;gap:var(--s-4)}
.lp-by{font-size:12px;font-weight:400;color:var(--label-3);letter-spacing:0}
@media (max-width:560px){.lp-by{display:none}}
.lp-nav nav{display:flex;align-items:center;gap:var(--s-6);font-size:14px}
.lp-nav nav a{color:var(--label-2)}
.lp-nav nav a:hover{color:var(--label)}
.lp-cta-sm{border:1px solid var(--border);border-radius:var(--r-md);
  padding:5px var(--s-5);color:var(--label)!important}
.lp-cta-sm:hover{border-color:var(--blue);color:var(--blue)!important}

.lp-hero{max-width:820px;margin:0 auto;padding:clamp(48px,9vw,96px) var(--s-7) clamp(40px,7vw,72px);
  text-align:center}
.lp-eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin-bottom:var(--s-6)}
.lp-hero h1{font-size:clamp(28px,5.2vw,46px);font-weight:600;letter-spacing:-.025em;
  line-height:1.25;margin-bottom:var(--s-7)}
.lp-lede{font-size:clamp(15px,1.7vw,17px);color:var(--label-2);line-height:1.8;
  max-width:620px;margin:0 auto}

.lp-actions{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:center;
  margin-top:var(--s-9)}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 var(--s-8);border:1px solid var(--border);
  border-radius:var(--r-md);font-size:14px;font-weight:500;background:var(--bg-primary);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.lp-btn:hover{background:var(--fill-3);border-color:var(--border-strong)}
.lp-btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.lp-btn.pri:hover{background:var(--blue-hover);border-color:var(--blue-hover)}

.lp-section{max-width:1080px;margin:0 auto;padding:clamp(40px,6vw,72px) var(--s-7)}
.lp-h2{font-size:clamp(21px,3vw,30px);font-weight:600;letter-spacing:-.02em;
  text-align:center;margin-bottom:var(--s-5)}
.lp-sub{text-align:center;color:var(--label-2);max-width:620px;margin:0 auto var(--s-9);
  line-height:1.75;font-size:14.5px}

/* badge เหลี่ยม 5px ตามกติกาดีไซน์ ไม่ใช่ pill */
.lp-badge{display:inline-block;border-radius:var(--r-badge);padding:3px var(--s-4);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:var(--s-5);border:1px solid transparent}
.lp-badge.on{background:rgba(52,199,89,.12);color:var(--green-text)}
.lp-badge.free{background:rgba(0,122,255,.1);color:var(--blue)}

.lp-feature{max-width:1080px;margin:0 auto;padding:0 var(--s-7)}
.lp-feature>div{border:1px solid var(--border);border-radius:var(--r-xl);
  padding:clamp(24px,4vw,44px)}
.lp-feature h2{font-size:clamp(24px,3.4vw,34px);font-weight:600;letter-spacing:-.022em;
  margin-bottom:var(--s-5)}
.lp-feature-desc{color:var(--label-2);line-height:1.8;margin-bottom:var(--s-8);
  max-width:66ch}
.lp-checks{list-style:none;display:grid;gap:var(--s-5)}
.lp-checks li{display:flex;gap:var(--s-5);align-items:flex-start;font-size:14.5px;
  color:var(--label-2);line-height:1.7}
.lp-checks strong{color:var(--label);font-weight:600}
.lp-tick{flex:none;width:18px;height:18px;border-radius:var(--r-badge);
  background:rgba(0,122,255,.1);color:var(--blue);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:3px}
.lp-feature .lp-actions{justify-content:flex-start}

.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:var(--s-6)}
.lp-grid.sm{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.lp-card{display:block;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-8);background:var(--bg-primary);
  transition:border-color var(--dur-fast) var(--ease)}
a.lp-card:hover{border-color:var(--blue)}
.lp-card h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--s-4)}
.lp-card p{font-size:14px;color:var(--label-2);line-height:1.75}
.lp-card.flat{background:var(--fill-4)}
.lp-kicker{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin-bottom:var(--s-4)}
.lp-more{display:inline-block;margin-top:var(--s-5);font-size:13px;font-weight:500;
  color:var(--blue)}

.lp-services{border-top:1px solid var(--sep)}
.lp-signin{border-top:1px solid var(--sep);max-width:460px}
.lp-signin .card{margin-top:0!important}

.lp-foot{border-top:1px solid var(--sep);padding:var(--s-9) var(--s-7);
  text-align:center;color:var(--label-2);font-size:13.5px;line-height:1.8}
.lp-foot p{max-width:620px;margin:0 auto}
.lp-foot-links{display:flex;flex-wrap:wrap;gap:var(--s-6);justify-content:center;
  margin-top:var(--s-6)!important}
.lp-foot-links a{color:var(--blue)}
.lp-foot-c{margin-top:var(--s-6)!important;font-size:12.5px;color:var(--label-3)}

@media (max-width:560px){
  .lp-nav{padding:var(--s-4) var(--s-5)}
  .lp-nav nav{gap:var(--s-5);font-size:13px}
  .lp-nav nav a[href="#products"]{display:none}   /* แคบมากแล้ว เหลือลิงก์ที่จำเป็น */
  .lp-actions .lp-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .lp-btn,.lp-card{transition:none}
}