/*
 * Memo — แอปมือถือของ "เมมโม่"
 *
 * โลกของหน้านี้ (13 ก.ย. 2569 · เจ้าของเลือก "ฟ้าใส + เหลืองเมมโม่" จากรูป 277–281 + apple.com):
 * พื้นเทาหมอกเย็นแบบ Apple · การ์ดขาวขอบบางลอยด้วยเงายาว · ทุกหน้ามี "ท้องฟ้า" ได้ผืนเดียว
 * (การ์ดวันนี้บนหน้าหลัก · จอเข้าใช้ · หัวอัปเกรด) และเมมโม่สีเหลืองคือดวงอาทิตย์บนฟ้านั้น
 * ฟ้า --brand = สีเดียวของการกด เลือก ลิงก์ · เหลือง --sun = วันนี้ ตอนนี้ โฟกัส มาสคอต เท่านั้น
 * สีประจำหมวดเหลือแค่บนสติกเกอร์และจุด ไม่ลามไปบนปุ่มหรือพื้นการ์ด
 *
 * ฟอนต์: Anuphan ทั้งแอป (self-host ใน /app/fonts เพราะ CSP) · ตัวใหญ่แน่นด้วย tracking ติดลบ · ตัวเลขตาราง
 * ธีมมืด: คืนฟ้าครามลึก ไม่ใช่เทาดำ · การ์ดเป็นครามจาง · ฟ้าสว่างขึ้น เหลืองอุ่นขึ้น
 */

:root {
  /* ── พื้น กระดาษ หมึก (สว่าง) ── */
  --bg:        #F2F4F8;
  --surface:   #FFFFFF;
  --surface-2: #F3F5F9;
  --glass:        rgba(255, 255, 255, .74);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-edge:   rgba(255, 255, 255, .96);
  --ink:       #0B1220;
  --ink-2:     #394355;
  /* เข้มพอตัด 4.5:1 ทั้งบนพื้นหมอกและการ์ดขาว */
  --muted:     #5B6679;
  --line:      #E0E5ED;
  --line-2:    #ECEFF4;
  /* ขอบช่องกรอก ≥3:1 กับพื้นรอบตัว — เห็นว่าเป็นช่องได้โดยไม่ต้องพึ่งสีพื้น */
  --field-edge: #8A93A4;

  /* ── ฟ้า: สีเดียวของการกด เลือก และลิงก์ ── */
  --brand:      #2563EB;
  --brand-ink:  #FFFFFF;
  --brand-deep: #1C4FD6;
  --brand-text: #1D4ED8;   /* ฟ้าสำหรับตัวหนังสือบนขาว ≈ 6.7:1 */
  --brand-soft: #E8F0FE;
  --dark:       #0B1220;
  --dark-ink:   #FFFFFF;

  /* ── เหลืองเมมโม่: ดวงอาทิตย์ — วันนี้ · ตอนนี้ · โฟกัส · ตัวมาสคอต ── */
  --sun:      #F5B800;
  --sun-ink:  #0B1220;
  --sun-deep: #D69A00;
  --sun-text: #855F00;     /* ≈ 6:1 บนขาว · ≈ 5.4:1 บน --sun-soft */
  --sun-soft: #FFF4CF;

  /* ── ท้องฟ้า: การ์ดวันนี้ = ฟ้าลึกด้านบนจางเป็นขอบฟ้าด้านล่าง · หน้าเต็มจอ = ฟ้าลึกทั้งผืน · แสงอาทิตย์ผสมแบบ screen ── */
  --sky: linear-gradient(180deg, #1A47CF 0%, #2159E5 46%, #2B64EE 58%, #7FB0FF 80%, #C9DFFF 100%);
  /* หน้าเต็มจอ (เข้าใช้ ติดตั้ง ทัวร์ อัปเกรด ฉลอง) ตัวหนังสือขาวอยู่ทั้งผืน จึงใช้ฟ้าลึกทั้งแผ่น */
  --sky-hero: linear-gradient(200deg, #3A7EFA 0%, #2360EA 30%, #1D4DD4 62%, #163BAA 100%);
  /* แสงอาทิตย์หลังเมมโม่ ผสมแบบ screen = เพิ่มแสงจริง (เหลืองโปร่งทับฟ้าแบบธรรมดาจะกลายเป็นเทาขุ่น) */
  --sky-sun: radial-gradient(closest-side, rgba(255, 252, 236, 1) 0%, rgba(255, 229, 150, .85) 32%, rgba(255, 199, 70, .25) 58%, rgba(255, 199, 70, 0) 78%);
  /* จอโหลด/เข้าใช้: ภาพฟ้า 3D (assets/redesign/boot-*.png) · กลางวันขอบฟ้าสว่างมาก ตัวหนังสือจึงเป็นหมึก (ขาวได้แค่ 1.3–2.3:1) */
  --boot-sky: url("/app/art/boot-light-1170.webp?v=bear3") center 38% / cover no-repeat, linear-gradient(180deg, #FBF5EA 0%, #F6EEDD 100%);
  --boot-ink: #0B1220;
  --boot-ink-2: #22304A;
  --onb-fade: 22%;
  --onb-art-filter: none;
  --sky-ink:    #FFFFFF;
  --sky-ink-2:  rgba(255, 255, 255, .94);
  /* กระจกบนขอบฟ้าสว่าง: ขาวฝ้า ตัวหนังสือเข้ม */
  --sky-tile-bg: rgba(255, 255, 255, .74);
  --sky-tile-edge: rgba(255, 255, 255, .95);
  --sky-tile-ink: #0B1220;
  --sky-tile-ink-2: #3B4A66;
  --fab-bg: linear-gradient(160deg, #5B97FA 0%, #2563EB 58%, #1C4FD6 100%);
  --switch-on: #2FB55A;
  --seg-on: #FFFFFF;

  /* ── สีประจำหมวด (ใช้กับไอคอน/จุด/สติกเกอร์เท่านั้น) ── */
  --c-cal:    #2F6BFF;  --c-cal-ink:    #FFFFFF;
  /* ป้ายตัวเลขแจ้งเตือน — ตัวเลขขาว 11px ต้องอ่านออก */
  --badge: #D6343F;
  --band-ok: #0C8A5E; --band-ok-ink: #FFFFFF; --band-cal: #2563EB; --band-cal-ink: #FFFFFF;
  --c-files:  #F5B800;  --c-files-ink:  #0B1220;
  --c-money:  #12A06E;  --c-money-ink:  #FFFFFF;
  --c-inbox:  #EF4F6B;  --c-inbox-ink:  #FFFFFF;
  --c-system: #5B6577;  --c-system-ink: #FFFFFF;
  --c-desk:   #0B1220;  --c-desk-ink:   #FFFFFF;
  --c-group:  #0FA39A;
  --c-ai:     #7B61FF;
  --c-ai-text: #5A43D4;   /* ม่วงสำหรับตัวหนังสือบนพื้นม่วงจาง */
  --c-cal-text: #1F55D6;  /* น้ำเงินสำหรับตัวหนังสือบนพื้นฟ้าจาง */
  --c-group-deep: #0B7E77; /* เขียวอมฟ้าเข้ม — พื้นปุ่มในโหมดกลุ่ม ตัวหนังสือขาวอ่านออก */
  --c-group-text: #0B7E77;

  /* สีอ่อนประจำหมวด — ใช้เป็นพื้นสติกเกอร์และช่องไอคอนเท่านั้น */
  --t-amber: color-mix(in srgb, var(--sun) 20%, var(--surface));
  --t-sky:   color-mix(in srgb, var(--c-cal) 12%, var(--surface));
  --t-mint:  color-mix(in srgb, var(--c-money) 13%, var(--surface));
  --t-coral: color-mix(in srgb, var(--c-inbox) 12%, var(--surface));
  --t-grape: color-mix(in srgb, var(--c-ai) 12%, var(--surface));
  --t-teal:  color-mix(in srgb, var(--c-group) 12%, var(--surface));
  --nav-bg:  rgba(255, 255, 255, .66);   /* แคปซูลกระจก — ใสพอให้เห็นเนื้อหาลอดใต้ */
  --nav-edge: rgba(255, 255, 255, .95);
  --nav-ink: #394355;
  --empty-amber: var(--surface); --empty-mint: var(--surface); --empty-coral: var(--surface); --empty-sky: var(--surface); --empty-grape: var(--surface);
  --empty-ring: transparent;
  --tint-day: linear-gradient(165deg, #E6F0FF 0%, #F4F8FF 100%);
  /* พื้น/ขอบของ "ปุ่ม" แยกจาก --line ของเส้นแบ่งเฉยๆ */
  --btn-bg: var(--surface); --btn-edge: var(--line);

  --k-reminder: var(--c-cal);
  --k-expense:  var(--c-money);
  --k-income:   var(--c-money);
  --k-note:     #D69A00;
  --k-document: var(--c-ai);
  --k-fired:    var(--c-inbox);
  --k-done:     #8B95A6;

  --ok:   #0A7550; --ok-soft:   #E1F5EC;
  --warn: #975A00; --warn-soft: #FFF1D8;
  --bad:  #C0304B; --bad-soft:  #FDE8EC;

  /* ป้าย/แถบสีเข้ม (โหมดมืดกลับเป็นขาว) */
  --label-bg:  #0B1220;
  --label-ink: #FFFFFF;

  /* ของเก่าหลายจุดอ่าน --plate — ตอนนี้คือฟ้าของการกดทั้งแอป */
  --plate:     var(--brand);
  --plate-ink: var(--brand-ink);

  --font-body:  "Anuphan", -apple-system, "Sukhumvit Set", "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;
  --font-label: var(--font-body);

  --radius:    24px;
  --radius-sm: 14px;
  --pad:       18px;
  --tap:       46px;
  --tabs-h:    64px;   /* แคปซูลล่าง */
  --tabs-gap:  12px;   /* ระยะแคปซูลจากขอบล่าง */
  --rail-w:    232px;

  --edge:      inset 0 0 0 1px rgba(15, 23, 42, .045);
  --shadow:    inset 0 0 0 1px rgba(15, 23, 42, .045), 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -16px rgba(16, 24, 40, .22);
  --shadow-sm: inset 0 0 0 1px rgba(15, 23, 42, .05), 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px -4px rgba(16, 24, 40, .08);
  --shadow-lg: 0 26px 60px -24px rgba(16, 24, 40, .32);
  --shadow-up: 0 -18px 50px -20px rgba(16, 24, 40, .32);
  --shadow-sky: 0 12px 24px -14px rgba(29, 78, 216, .34);
  --glow:      0 12px 26px -10px rgba(37, 99, 235, .6);

  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {

    --bg: #070B1A; --surface: #10172E; --surface-2: #19223F;
    --glass: rgba(20, 28, 58, .68); --glass-strong: rgba(18, 25, 52, .86); --glass-edge: rgba(255, 255, 255, .09);
    --ink: #EEF2FF; --ink-2: #C4CCE2; --muted: #95A0BE; --line: #28325A; --line-2: #1D2647; --field-edge: #5E6989;
    --brand: #6E9BFF; --brand-ink: #050B22; --brand-deep: #8DB1FF; --brand-text: #9DBDFF; --brand-soft: #172854;
    --dark: #EEF2FF; --dark-ink: #070B1A;
    --sun: #FFC94A; --sun-ink: #1A1300; --sun-deep: #FFB61F; --sun-text: #FFD470; --sun-soft: #2D2612;
    --sky: linear-gradient(180deg, #0B1238 0%, #151E5C 46%, #1E2873 58%, #3A3F9E 80%, #5A55C4 100%);
    --sky-hero:
      radial-gradient(75% 80% at 0% 100%, rgba(124, 107, 255, .5) 0%, rgba(124, 107, 255, 0) 62%),
      linear-gradient(200deg, #3448AE 0%, #232F8C 38%, #161F5E 72%, #0D1441 100%);
    --sky-sun: radial-gradient(closest-side, rgba(240, 236, 255, .92) 0%, rgba(184, 170, 255, .5) 32%, rgba(124, 107, 255, .16) 58%, rgba(124, 107, 255, 0) 78%);
    --sky-tile-bg: rgba(8, 12, 40, .34); --sky-tile-edge: rgba(255, 255, 255, .16);
    --boot-sky: url("/app/art/boot-dark-1170.webp?v=bear3") center 38% / cover no-repeat, linear-gradient(180deg, #1B2340 0%, #141B33 100%); --boot-ink: #FFFFFF; --boot-ink-2: rgba(255, 255, 255, .92);
    --sky-tile-ink: #FFFFFF; --sky-tile-ink-2: rgba(255, 255, 255, .9);
    --fab-bg: linear-gradient(160deg, #9ABCFF 0%, #6E9BFF 55%, #4F7EF2 100%);
    --switch-on: #34C76A; --seg-on: #2B3767;
    --c-cal: #6E9BFF; --c-money: #3CCB93; --c-inbox: #FF7A90; --c-system: #8D98B3; --c-desk: #EEF2FF; --c-desk-ink: #070B1A;
    --badge: #D6343F;
    --c-group: #3BD1C6; --c-ai: #A591FF; --c-ai-text: #B8A8FF; --c-cal-text: #9DBDFF; --c-group-deep: #147C76; --c-group-text: #5ADCD2;
    --k-note: #FFC94A; --k-done: #6D7896;
    --ok: #3CCB93; --ok-soft: #0E2C25; --warn: #FFC94A; --warn-soft: #2D2612; --bad: #FF7A90; --bad-soft: #391427;
    --band-ok: #3CCB93; --band-ok-ink: #050B22; --band-cal: #6E9BFF; --band-cal-ink: #050B22;
    --label-bg: #EEF2FF; --label-ink: #070B1A;
    --nav-bg: rgba(22, 30, 62, .62); --nav-edge: rgba(255, 255, 255, .13); --nav-ink: rgba(238, 242, 255, .8);
    --mascot-limb: #DCE3F5;
    --onb-fade: 46%; --onb-art-filter: brightness(.84) saturate(1.05);
    --empty-amber: var(--surface); --empty-mint: var(--surface); --empty-coral: var(--surface); --empty-sky: var(--surface); --empty-grape: var(--surface);
    --empty-ring: transparent;
    --tint-day: linear-gradient(165deg, #182A5E 0%, #121B40 100%);
    /* พื้นปุ่มต้องลอยขึ้นจากพื้นหลังจอ และขอบต้องสว่างพอให้เห็นรูปทรงปุ่ม */
    --btn-bg: var(--surface-2); --btn-edge: #354273;
    --edge: inset 0 0 0 1px rgba(255, 255, 255, .06);
    --shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -18px rgba(0, 0, 0, .85);
    --shadow-sm: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, .85);
    --shadow-up: 0 -18px 50px -20px rgba(0, 0, 0, .8);
    --shadow-sky: 0 12px 26px -14px rgba(88, 104, 255, .34);
    --glow: 0 12px 30px -10px rgba(110, 155, 255, .5);
    color-scheme: dark;

  }
}
html[data-theme="dark"] {

    --bg: #070B1A; --surface: #10172E; --surface-2: #19223F;
    --glass: rgba(20, 28, 58, .68); --glass-strong: rgba(18, 25, 52, .86); --glass-edge: rgba(255, 255, 255, .09);
    --ink: #EEF2FF; --ink-2: #C4CCE2; --muted: #95A0BE; --line: #28325A; --line-2: #1D2647; --field-edge: #5E6989;
    --brand: #6E9BFF; --brand-ink: #050B22; --brand-deep: #8DB1FF; --brand-text: #9DBDFF; --brand-soft: #172854;
    --dark: #EEF2FF; --dark-ink: #070B1A;
    --sun: #FFC94A; --sun-ink: #1A1300; --sun-deep: #FFB61F; --sun-text: #FFD470; --sun-soft: #2D2612;
    --sky: linear-gradient(180deg, #0B1238 0%, #151E5C 46%, #1E2873 58%, #3A3F9E 80%, #5A55C4 100%);
    --sky-hero:
      radial-gradient(75% 80% at 0% 100%, rgba(124, 107, 255, .5) 0%, rgba(124, 107, 255, 0) 62%),
      linear-gradient(200deg, #3448AE 0%, #232F8C 38%, #161F5E 72%, #0D1441 100%);
    --sky-sun: radial-gradient(closest-side, rgba(240, 236, 255, .92) 0%, rgba(184, 170, 255, .5) 32%, rgba(124, 107, 255, .16) 58%, rgba(124, 107, 255, 0) 78%);
    --sky-tile-bg: rgba(8, 12, 40, .34); --sky-tile-edge: rgba(255, 255, 255, .16);
    --boot-sky: url("/app/art/boot-dark-1170.webp?v=bear3") center 38% / cover no-repeat, linear-gradient(180deg, #1B2340 0%, #141B33 100%); --boot-ink: #FFFFFF; --boot-ink-2: rgba(255, 255, 255, .92);
    --sky-tile-ink: #FFFFFF; --sky-tile-ink-2: rgba(255, 255, 255, .9);
    --fab-bg: linear-gradient(160deg, #9ABCFF 0%, #6E9BFF 55%, #4F7EF2 100%);
    --switch-on: #34C76A; --seg-on: #2B3767;
    --c-cal: #6E9BFF; --c-money: #3CCB93; --c-inbox: #FF7A90; --c-system: #8D98B3; --c-desk: #EEF2FF; --c-desk-ink: #070B1A;
    --badge: #D6343F;
    --c-group: #3BD1C6; --c-ai: #A591FF; --c-ai-text: #B8A8FF; --c-cal-text: #9DBDFF; --c-group-deep: #147C76; --c-group-text: #5ADCD2;
    --k-note: #FFC94A; --k-done: #6D7896;
    --ok: #3CCB93; --ok-soft: #0E2C25; --warn: #FFC94A; --warn-soft: #2D2612; --bad: #FF7A90; --bad-soft: #391427;
    --band-ok: #3CCB93; --band-ok-ink: #050B22; --band-cal: #6E9BFF; --band-cal-ink: #050B22;
    --label-bg: #EEF2FF; --label-ink: #070B1A;
    --nav-bg: rgba(22, 30, 62, .62); --nav-edge: rgba(255, 255, 255, .13); --nav-ink: rgba(238, 242, 255, .8);
    --mascot-limb: #DCE3F5;
    --onb-fade: 46%; --onb-art-filter: brightness(.84) saturate(1.05);
    --empty-amber: var(--surface); --empty-mint: var(--surface); --empty-coral: var(--surface); --empty-sky: var(--surface); --empty-grape: var(--surface);
    --empty-ring: transparent;
    --tint-day: linear-gradient(165deg, #182A5E 0%, #121B40 100%);
    /* พื้นปุ่มต้องลอยขึ้นจากพื้นหลังจอ และขอบต้องสว่างพอให้เห็นรูปทรงปุ่ม */
    --btn-bg: var(--surface-2); --btn-edge: #354273;
    --edge: inset 0 0 0 1px rgba(255, 255, 255, .06);
    --shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -18px rgba(0, 0, 0, .85);
    --shadow-sm: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, .85);
    --shadow-up: 0 -18px 50px -20px rgba(0, 0, 0, .8);
    --shadow-sky: 0 12px 26px -14px rgba(88, 104, 255, .34);
    --glow: 0 12px 30px -10px rgba(110, 155, 255, .5);
    color-scheme: dark;

}

/* ── พื้นฐาน ─────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  accent-color: var(--brand);
  caret-color: var(--brand);
}
body { background-image: none; }
::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: var(--font-label); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }

:focus-visible { outline: 2.5px solid color-mix(in srgb, var(--brand) 75%, transparent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

@media (hover: hover) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; }
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
}

.ic {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -4px;
}
/* สติกเกอร์สี — อยู่ในช่องไอคอนของแถว ทางลัด และไฟล์ · ปุ่ม ชิป แถบล่าง และปุ่มไอคอนใช้ไอคอนเส้นล้วน (สีตามตัวหนังสือ) */
.ic-sticker { fill: revert; stroke: none; stroke-width: 0; width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .12)); }
.row-mark .ic-sticker { width: 26px; height: 26px; }
.icon-btn > .ic-sticker { width: 24px; height: 24px; }
.btn .ic-sticker { width: 20px; height: 20px; }
.chip .ic-sticker { width: 18px; height: 18px; }
.file-icon .ic-sticker { width: 28px; height: 28px; }
.file-icon.big .ic-sticker { width: 46px; height: 46px; }
.search-pill .ic-sticker { width: 22px; height: 22px; }
.tab-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; }
.file-tile.is-star .file-star.ic-sticker { fill: revert; stroke: none; }

.muted  { color: var(--muted); }
.small  { font-size: 12.5px; }
.mono   { font-family: var(--font-label); font-variant-numeric: tabular-nums; }
.grow   { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
.trunc  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── จอตอนเปิด / เข้าใช้ (รูป 289 เดิม: ฟ้ามุมโค้งครึ่งบน การ์ดขาวแยกอยู่ล่าง เงาเมมโม่ซ้อนสองชั้น ครึ่งล่างของจอว่าง) ──
   ภาพฟ้า 3D เต็มจอผืนเดียว · เมมโม่ลอยกลางฟ้าบนเงาในรูปของตัวเอง · ชื่อตัวใหญ่
   แผ่นกระจกติดล่างเป็นสถานะโหลดกับเกร็ด หรือฟอร์มเข้าใช้ · คอม: ฟ้าเต็มจอเหมือนกัน เนื้อหาเรียงกลางจอ */
.boot {
  position: fixed; inset: 0; z-index: 100; overflow: auto;
  display: flex; flex-direction: column;
  background: var(--boot-sky); color: var(--boot-ink);
  animation: boot-in .5s var(--ease-out) both;
}
@keyframes boot-in { from { opacity: 0; } to { opacity: 1; } }

.boot-hero { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(28px + var(--safe-t)) 24px 20px; text-align: center; }
.boot-stage { position: relative; width: clamp(132px, 25vh, 196px); height: clamp(132px, 25vh, 196px); display: grid; place-items: center; }
.boot-glow { display: none; }
.boot-mascot { width: 100%; height: 100%; transform-origin: 50% 94%; animation: mascot-stand 4.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.boot-mascot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.boot-mark { margin-top: 10px; font-family: var(--font-label); font-size: 46px; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.boot-tagline { margin: 10px 0 0; max-width: 32ch; font-family: var(--font-label); font-size: 16px; font-weight: 500; line-height: 1.5; text-wrap: balance; }
.boot-tagline br { display: none; }
.boot-tagline span { display: block; }
.boot-tagline span + span { margin-top: 4px; font-family: var(--font-body); font-size: 13.5px; font-weight: 400; color: var(--boot-ink-2); }

@keyframes boot-wave { 0%, 70%, 100% { transform: translateY(0) scale(.8); opacity: .45; } 35% { transform: translateY(-5px) scale(1.15); opacity: 1; } }

/* แผ่นกระจกติดล่าง */
.boot-panel { flex: none; display: flex; justify-content: center; padding: 0 var(--pad) calc(18px + var(--safe-b)); }
.boot-card {
  width: min(440px, 100%); padding: 20px; border-radius: 30px; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 60px -26px rgba(8, 24, 80, .45);
}
.boot-status { font-family: var(--font-label); font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); text-align: center; text-wrap: balance; }
.boot-status.is-bad { color: var(--bad); font-size: 14.5px; font-weight: 600; }
/* กำลังโหลด: จุดวิ่งกับสถานะแถวเดียว · เกร็ดอยู่ใต้เส้นบาง */
.boot-card.is-loading { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 12px; }
.boot-card.is-loading .boot-status { font-size: 15.5px; font-weight: 500; color: var(--ink-2); }
.boot-dots2 { display: none; gap: 6px; }
.boot-card.is-loading .boot-dots2 { display: flex; order: -1; }
.boot-dots2 i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: boot-wave 1.1s var(--ease-out) infinite; }
.boot-dots2 i:nth-child(2) { animation-delay: .12s; } .boot-dots2 i:nth-child(3) { animation-delay: .24s; }
.boot-tip { display: none; }
.boot-card.is-loading .boot-tip { display: block; flex-basis: 100%; margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.boot-card.is-loading .boot-tip:empty { display: none; }
.boot-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: 100%; margin-top: 14px; }
.boot-actions:empty { margin-top: 0; }
.login-form { display: flex; flex-direction: column; gap: 8px; }
.login-form .field-input { background: var(--surface); }
.login-form .btn { border-radius: 999px; }
.login-or { display: flex; align-items: center; gap: 12px; font-family: var(--font-label); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--muted); margin: 2px 0; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-note { min-height: 1.4em; font-size: 13px; color: var(--bad); text-align: center; }
.login-hint { margin: 4px 0 0; font-size: 13px; color: var(--muted); text-align: center; text-wrap: balance; }
.login-more { margin-top: 2px; }
.login-more > summary { list-style: none; cursor: pointer; text-align: center; font-family: var(--font-label); font-size: 14px; font-weight: 500; color: var(--brand-text); padding: 8px 0; }
.login-more > summary::-webkit-details-marker { display: none; }
.login-more[open] > summary { margin-bottom: 8px; }
.btn.btn-line { background: #06C755; color: #fff; border-radius: 999px; box-shadow: 0 10px 22px -12px rgba(6, 199, 85, .7); }
@media (hover: hover) { .btn.btn-line:hover { background: #05b34c; } }

@media (prefers-reduced-motion: reduce) {
  .boot, .boot-mascot, .boot-dots2 i { animation: none; }
}

/* คอม: ฟ้าเต็มจอ เนื้อหาเรียงกลางจอ */
@media (min-width: 900px) {
  .boot { justify-content: center; }
  .boot-hero { flex: none; padding: 32px 24px 24px; }
  .boot-stage { width: 200px; height: 200px; }
  .boot-mark { font-size: 52px; }
  .boot-tagline { font-size: 18px; }
  .boot-tagline span + span { font-size: 14.5px; }
  .boot-panel { padding: 0 24px 40px; }
  .boot-card { padding: 24px 26px; }
}

/* เส้นหมึกของ sprite มาสคอต (CSP ไม่รับ <style> ใน sprite) */
/* แขนขาใช้ --mascot-limb (โหมดมืดเป็นเส้นสว่าง ไม่หายไปกับพื้น) · ตาและปากยังเป็น currentColor เข้มบนแฟ้มเหลืองทุกธีม */
.mm-a { fill: none; stroke: var(--mascot-limb, currentColor); stroke-width: 4; stroke-linecap: round; }
.mm-f { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }

/**
 * ── มาสคอตขยับแขนขา ไม่ใช่เด้งทั้งตัว ──
 *
 * เดิมทั้งตัวเลื่อนขึ้นลง 3–7px แล้วเอียงไปมา ซึ่งอ่านออกว่า "รูปที่ถูกสั่งให้เด้ง"
 * ไม่ใช่ "ตัวละครที่มีชีวิต" ของจริงที่ทำให้ดูมีชีวิตคือ:
 *   1. แต่ละท่อนหมุนที่ข้อต่อของมันเอง (ไหล่ · สะโพก) ไม่ใช่ทั้งก้อนขยับพร้อมกัน
 *   2. รอบเวลาไม่ลงตัวกัน (3.7 · 4.3 · 4.7 · 5.1 วินาที) ท่าทางเลยไม่ซ้ำเดิม
 *      ถ้ารอบเท่ากันหมด ทุกท่อนจะขยับพร้อมกันเป๊ะแล้วดูเป็นหุ่นยนต์ทันที
 *   3. ตัวหายใจเบาๆ แทนการกระโดด · องศาน้อยๆ (3–5°) พอให้รู้สึก ไม่ถึงกับสะดุดตา
 *   4. จังหวะแบบลูกตุ้ม (ช้าที่ปลายทั้งสองข้าง เร็วตรงกลาง) ไม่ใช่เร่ง-เบรกแบบเครื่องจักร
 */
/* ── ตัวยืนถ่ายน้ำหนัก ──
   ของมีชีวิตที่ "ยืน" ไม่ลอยขึ้นลงทั้งก้อน — มันโยกรอบจุดที่เท้าเหยียบ แล้วหายใจ
   คีย์เฟรมเดียวใช้ทุกที่ ต่างกันแค่ความเร็ว: ตัวใหญ่ช้ากว่า (มวลมากกว่า) ตัวกำลังทำงานเร็วขึ้น
   ส่วนแขนขากับกะพริบตาอยู่ในตัว SVG เอง (scripts/mascot-animate.py) */
.mascot { width: 96px; height: 96px; color: #1B1E24; display: block; object-fit: contain; -webkit-user-drag: none; user-select: none; transform-origin: 50% 98%;
  animation: mascot-stand 5.8s cubic-bezier(.45, 0, .55, 1) infinite; }   /* หมึกเข้มเสมอ */
/* โยกอย่างเดียว ไม่มีอะไรขยับแนวตั้ง — รอบก่อนมี scaleY หายใจ ซึ่งดันขอบบนหัว
   ขึ้นลงทุก ~3 วิ ผู้ใช้ชี้ว่า "ยังเด้งๆ อยู่เหมือนเดิม" · ชีวิตให้แขนขากับตาเล่าแทน */
@keyframes mascot-stand {
  0%, 100% { transform: rotate(-0.9deg); }
  50%      { transform: rotate(0.9deg); }
}

/* จังหวะขยับแขนขาไม่ได้อยู่ที่นี่แล้ว — มันฝังอยู่ใน sprite.svg เป็น animateTransform
   ของ SVG เอง (scripts/mascot-animate.py) เพราะรอบแรกที่ทำด้วย CSS + transform-origin
   มัน "เละ" บน iPhone: WebKit ตีความจุดหมุนเทียบกล่องของเส้นแขนเอง ไม่ใช่เทียบทั้งภาพ
   แขนขาเลยกวาดไปทั่วตัว — animateTransform เขียนจุดหมุนไว้ในตัวเอง ทุกเอนจินอ่านเหมือนกัน
   CSS ที่เหลือตรงนี้แตะแค่ตัว <svg> ชั้นนอกซึ่งเป็น DOM ปกติ ปลอดภัยทุกเบราว์เซอร์ */

.mascot.lg, .hero-mascot { animation-duration: 6.6s; }
.upgrade-hero .mascot { animation-duration: 5s; }
.cheer .mascot { animation: none; }
.mascot.sm { animation-duration: 5.2s; }
/* ส่วนแขนขา (SMIL) หยุดใน mascot() ด้วย pauseAnimations — media query สั่ง SMIL ไม่ได้ */
@media (prefers-reduced-motion: reduce) {
  .mascot, .hero-mascot, .upgrade-hero .mascot { animation: none; }
}
.mascot.sm { width: 56px; height: 56px; }
.mascot.lg { width: 140px; height: 140px; }
.empty .mascot { margin: 0 auto 6px; }
/* ไอคอนกระจกของหน้าว่าง (มีแสงเรืองในรูปแล้ว ไม่ต้องใส่พื้นรอง) */
.empty .empty-art { display: block; width: 104px; height: 104px; margin: 0 auto 6px; }

@media (prefers-reduced-motion: reduce) {
  .boot, .boot-glow, .boot-mascot, .boot-dots2 i, #mamo-eyes, #mamo-paper, #mamo-arm-r { animation: none; }
}

/* ── โครงหน้า ─────────────────────────────────────────────────────────── */

.shell { min-height: 100dvh; }

/* หัวหน้าจอ: ชื่อหน้าตัวใหญ่แบบ Apple โปร่งบนพื้นหมอก · เลื่อนแล้วกลายเป็นกระจกฝ้าให้เนื้อหาลอดใต้ */
.top {
  position: sticky; top: 0; z-index: 20;
  padding: calc(10px + var(--safe-t)) var(--pad) 10px;
  background: transparent;
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.top.is-scrolled {
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}
.top-row { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.top-title { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* ตัวหนังสือไทยมีสระ+วรรณยุกต์ซ้อน (ตั้ง) สูงกว่า em box — ทุกที่ที่ตัดคำด้วย overflow hidden ต้องเผื่อที่ด้านบน */
.top-title h1 { margin: -.3em 0; font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; padding: .3em .1em .3em 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-sub { font-size: 13px; color: var(--muted); margin: -.1em 0 0; padding: .2em 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.top-sub:empty { display: none; }
.top.is-home .top-title h1 { font-size: 22px; letter-spacing: -.02em; }

/* รูปโปรไฟล์บนหน้าหลัก — วงขาวคั่นก่อนวงฟ้าจาง เหมือนรูปผู้ใช้ในแอป Apple */
.avatar {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; overflow: hidden;
  background: var(--brand-soft); display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px color-mix(in srgb, var(--brand) 38%, transparent);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar .mascot.sm { width: 40px; height: 40px; }

/* ปุ่มไอคอนล้วน — วางไอคอนด้วย inset+margin:auto (WebKit วาง grid บนปุ่มไม่ตรง) */
.icon-btn, .quick-go, .cal-nav { position: relative; padding: 0; line-height: 0; appearance: none; -webkit-appearance: none; }
.icon-btn > .ic, .quick-go > .ic, .cal-nav > .ic { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; vertical-align: baseline; }
.icon-btn {
  width: 42px; height: 42px; flex: 0 0 42px;
  border: 0; border-radius: 50%;
  background: var(--glass-strong); color: var(--ink-2);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease-out);
}
.icon-btn > .ic:not(.ic-sticker) { width: 21px; height: 21px; }
.icon-btn:active { transform: scale(.92); }
.icon-btn.is-busy .ic { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* เลขแดงบนกระดิ่ง */
body[data-view="inbox"] #btn-bell { display: none; }
.badge-n {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--badge); color: #fff;
  font-family: var(--font-label); font-size: 11px; font-weight: 600; line-height: 19px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

main { padding: 6px var(--pad) calc(var(--tabs-h) + var(--tabs-gap) + var(--safe-b) + 40px); }

.view { animation: rise .34s var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

/* ── ปุ่ม + ฟ้ากลางแถบล่าง ── */
.fab {
  flex: 0 0 56px; width: 56px; height: 56px; align-self: center;
  margin: 0 2px; border: 0; border-radius: 50%;
  background: var(--fab-bg); color: var(--brand-ink);
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 5px var(--nav-bg);
  display: grid; place-items: center; padding: 0; line-height: 0;
  transform: translateY(-14px);
  transition: transform .28s var(--ease-out);
}
.fab .ic { width: 26px; height: 26px; stroke-width: 2.3; }
.fab:active { transform: translateY(-14px) scale(.92); }
body.sheet-open .fab { transform: translateY(-14px) rotate(45deg); }

/* ── หัวข้อส่วน: ตัวใหญ่หนักแบบหัวข้อของ Apple ไม่มีป้ายเล็กเหนือหัว ── */
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
  margin: 28px 2px 10px;
}
.section-title > span:first-child { flex: 1; }
.section-title:first-child { margin-top: 6px; }
/* เลขนับท้ายหัวข้อ — เม็ดเทาเงียบๆ ไม่ใช่วงกลมแดง (รูป 240-241: ดูเหมือนแจ้งเตือน/ปุ่ม คนจะกด แต่กดแล้วไม่มีอะไร) */
.section-count {
  flex: none !important; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.section-link { border: 0; background: none; color: var(--brand-text); font-family: var(--font-label);
  font-size: 14px; font-weight: 500; letter-spacing: 0; padding: 7px 2px; min-height: 34px; display: inline-flex; align-items: center; }

.tag {
  display: inline-block; padding: 2px 10px; margin: 0 4px 4px 0;
  border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2);
  font-family: var(--font-label); font-size: 12px; font-weight: 500;
}
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-family: var(--font-label); font-size: 12px; font-weight: 600; }
.pill.ok   { background: var(--ok-soft);   color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad  { background: var(--bad-soft);  color: var(--bad); }

/* ── หน้าหลัก ── */
.search-pill {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 16px;
  border: 0; border-radius: 999px; background: var(--surface); color: var(--muted);
  box-shadow: var(--shadow-sm); text-align: left; font-size: 15px; margin: 4px 0 18px;
}
.search-pill .ic { color: var(--muted); }

/* แบนเนอร์ปัดข้าง: ใบแรกคือท้องฟ้าของวันนี้ · ใบถัดไปเป็นการ์ดขาวเงียบ — สีทั้งหน้าอยู่บนฟ้าผืนเดียว */
.hero-wrap { margin: 0 calc(var(--pad) * -1); }
.hero-track {
  display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none;
  padding: 2px var(--pad) 14px; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad);
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-track .hero { flex: 0 0 100%; scroll-snap-align: start; }
.hero-track:has(.hero + .hero) .hero { flex-basis: calc(100% - 12px); }   /* ใบถัดไปโผล่แค่ขอบ ไม่โชว์ตัวหนังสือครึ่งๆ */
.hero-dots { display: flex; justify-content: center; gap: 5px; margin: -2px 0 0; }
/* จุดกว้าง 18px ทุกอัน ย่อด้วย transform (ไม่ animate width ให้ layout ขยับ) */
.hero-dots i { width: 18px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 16%, transparent); transform: scaleX(.34); transform-origin: center; transition: transform .3s var(--ease-out), background-color .3s; }
.hero-dots i.on { transform: none; background: var(--ink-2); }
.desk-grid > .desk-col > .hero-sky { margin: 4px 0 20px; }
.desk-block > .section-title:first-child { margin-top: 28px; }

.hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 20px 14px 18px 20px; min-height: 236px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.hero-text { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hero-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); }
.hero-ic .sticker { width: 28px; height: 28px; display: block; filter: drop-shadow(0 2px 3px rgba(16, 24, 40, .14)); }
.hero-title { margin: 12px 0 0; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.hero-sub { margin: 6px 0 14px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 28ch; }
/* มาสคอตเป็นสติกเกอร์ 2D มีเส้นขอบในตัว — ไม่ใส่เงาฟุ้งใต้ตัว (เงาเบลอทำให้กลับไปดูเป็น 3D) */
.hero-mascot { position: relative; flex: none; width: 104px; height: 104px; margin: 0 0 -6px; color: #0B1220; }

/* ── ท้องฟ้าของวันนี้ (รูป 277 "Smart Weather Card") ──
   เลขตัวใหญ่ = เรื่องที่ต้องจัดการวันนี้ · เมมโม่คือดวงอาทิตย์มุมขวาบน · กระจกสองช่องแตะไปครบกำหนด/ปฏิทิน
   ฟ้าลึกด้านบนจางลงเป็นขอบฟ้าด้านล่าง · ตัวหนังสือขาวอยู่แถบลึกเท่านั้น · กระจกบนขอบฟ้าเป็นขาวฝ้าตัวหนังสือเข้ม · แสงอาทิตย์ผสมแบบ screen */
.hero-sky { flex-direction: column; align-items: stretch; gap: 0; padding: 18px 18px 16px; background: var(--sky); color: var(--sky-ink); box-shadow: var(--shadow-sky); animation: sky-in .7s var(--ease-out) both; }
.hero-sky::after, .group-hero::after { content: ""; position: absolute; z-index: -1; top: -48px; right: -45px; width: 220px; height: 220px; border-radius: 50%; background: var(--sky-sun); mix-blend-mode: screen; pointer-events: none; }
.hero-sky::before, .group-hero::before { content: ""; position: absolute; z-index: -1; left: -15%; right: -15%; bottom: -38%; height: 78%; pointer-events: none; background: radial-gradient(42% 50% at 22% 58%, rgba(255, 255, 255, .2), transparent 72%), radial-gradient(38% 46% at 72% 76%, rgba(255, 255, 255, .13), transparent 72%); filter: blur(6px); }
.sky-date { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--sky-ink-2); }
.sky-date .ic { width: 16px; height: 16px; }
.hero-sky .hero-mascot { position: absolute; top: 4px; right: 6px; width: 118px; height: 118px; margin: 0; color: #0B1220; animation: sun-rise .9s var(--ease-out) .12s both; }
.hero-sky .hero-title { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; margin: 14px 0 0; max-width: calc(100% - 116px); font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: var(--sky-ink); }
.sky-num { font-size: 64px; font-weight: 600; line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sky-unit { color: var(--sky-ink-2); }
.sky-calm { font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.hero-sky .hero-sub { margin: 8px 0 16px; max-width: none; font-size: 14.5px; color: var(--sky-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sky-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.sky-tile {
  position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 72px;
  padding: 10px 12px 9px; border: 0; border-radius: 18px; text-align: left; font: inherit; color: var(--sky-tile-ink);
  background: var(--sky-tile-bg); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--sky-tile-edge), 0 10px 20px -14px rgba(8, 28, 90, .45);
  transition: transform .2s var(--ease-out), background-color .2s var(--ease-out);
}
.sky-tile:active { transform: scale(.97); }
@media (hover: hover) { .sky-tile:hover { background: color-mix(in srgb, var(--sky-tile-bg) 82%, #fff); } }
.sky-tile-l { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--sky-tile-ink-2); }
.sky-tile-l .ic { width: 15px; height: 15px; }
.sky-tile-v { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sky-tile-s { font-size: 12.5px; color: var(--sky-tile-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ท้องฟ้าตามเวลาจริงของผู้ใช้ (โลกของหน้านี้คือ "ท้องฟ้าของวันนี้"): รุ่งเช้า · กลางวัน · เย็น · กลางคืน
   ตัวหนังสือขาวอยู่แถบลึกด้านบนเสมอ · รุ่งเช้า/เย็นใช้ในธีมสว่างเท่านั้น ธีมมืดเป็นฟ้าครามอยู่แล้ว */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero-sky.sky-dawn {
    --sky: linear-gradient(180deg, #1F4BCC 0%, #2E5BDA 48%, #3F68DC 60%, #E9A7A0 82%, #FFE2C0 100%);
    --sky-sun: radial-gradient(closest-side, rgba(255, 246, 228, 1) 0%, rgba(255, 196, 150, .85) 32%, rgba(255, 150, 110, .28) 58%, rgba(255, 150, 110, 0) 78%);
  }
  :root:not([data-theme="dark"]) .hero-sky.sky-dusk {
    --sky: linear-gradient(180deg, #23308F 0%, #3A40B8 45%, #5A4FC4 60%, #C57AB8 80%, #FFC9A0 100%);
    --sky-sun: radial-gradient(closest-side, rgba(255, 238, 220, 1) 0%, rgba(255, 170, 120, .8) 32%, rgba(240, 110, 120, .26) 58%, rgba(240, 110, 120, 0) 78%);
  }
}
:root[data-theme="light"] .hero-sky.sky-dawn {
  --sky: linear-gradient(180deg, #1F4BCC 0%, #2E5BDA 48%, #3F68DC 60%, #E9A7A0 82%, #FFE2C0 100%);
  --sky-sun: radial-gradient(closest-side, rgba(255, 246, 228, 1) 0%, rgba(255, 196, 150, .85) 32%, rgba(255, 150, 110, .28) 58%, rgba(255, 150, 110, 0) 78%);
}
:root[data-theme="light"] .hero-sky.sky-dusk {
  --sky: linear-gradient(180deg, #23308F 0%, #3A40B8 45%, #5A4FC4 60%, #C57AB8 80%, #FFC9A0 100%);
  --sky-sun: radial-gradient(closest-side, rgba(255, 238, 220, 1) 0%, rgba(255, 170, 120, .8) 32%, rgba(240, 110, 120, .26) 58%, rgba(240, 110, 120, 0) 78%);
}
.hero-sky.sky-night {
  --sky: linear-gradient(180deg, #0B1238 0%, #151E5C 46%, #1E2873 58%, #3A3F9E 80%, #5A55C4 100%);
  --sky-sun: radial-gradient(closest-side, rgba(240, 236, 255, .92) 0%, rgba(184, 170, 255, .5) 32%, rgba(124, 107, 255, .16) 58%, rgba(124, 107, 255, 0) 78%);
  --sky-tile-bg: rgba(8, 12, 40, .34); --sky-tile-edge: rgba(255, 255, 255, .16);
  --sky-tile-ink: #FFFFFF; --sky-tile-ink-2: rgba(255, 255, 255, .9);
  --shadow-sky: 0 12px 26px -14px rgba(88, 104, 255, .34);
}
@keyframes sky-in { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sun-rise { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-sky, .hero-sky .hero-mascot { animation: none; } }

/* มาสคอตบนการ์ดว่าง: แสงฟ้าจางรองเท้า (แขนขาตามธีมมาจาก --mascot-limb แล้ว) */
.day-empty .mascot, .card:has(.empty) .mascot { background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 14%, transparent), transparent); border-radius: 50%; }
/* ชนะกฎสี .up/.down ด้วย specificity ไม่ใช่ลำดับ */
.stat-value.up.is-zero, .stat-value.down.is-zero { color: var(--muted); }

/* ── ทางลัด ── */
.action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.action-tile {
  border: 0; border-radius: 20px; background: var(--surface); color: var(--ink);
  padding: 14px 4px 11px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: var(--shadow-sm); transition: transform .2s var(--ease-out);
}
.action-tile:active { transform: scale(.95); }
.action-ic { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.action-ic .ic { width: 22px; height: 22px; }
.action-ic .sticker { width: 34px; height: 34px; display: block; filter: drop-shadow(0 3px 4px rgba(16, 24, 40, .14)); }
.action-label { font-family: var(--font-label); font-size: 12.5px; font-weight: 500; line-height: 1.25; text-align: center; letter-spacing: -.005em; }
.tone-note     { background: var(--t-amber); color: var(--sun-text); }
.tone-reminder { background: var(--t-sky);   color: var(--c-cal); }
.tone-expense  { background: var(--t-mint);  color: var(--ok); }
.tone-files    { background: var(--t-amber); color: var(--sun-text); }
.tone-document { background: var(--t-grape); color: var(--c-ai); }
.tone-fired    { background: var(--t-coral); color: var(--c-inbox); }
.tone-group    { background: var(--t-teal);  color: var(--c-group); }
.tone-system   { background: var(--surface-2); color: var(--c-system); }

/* ชั้นวางเลื่อนข้าง — ล้นออกขอบจอให้รู้ว่ายังเลื่อนต่อได้ */
.hscroll {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--pad) * -1); padding: 4px var(--pad) 12px;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--pad); align-items: stretch;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll .file-tile { flex: 0 0 128px; scroll-snap-align: start; }
/* ชื่อไฟล์ยาวหนึ่งหรือสองบรรทัดก็ตาม การ์ดต้องสูงเท่ากันและ meta อยู่ระดับเดียวกัน */
.file-tile .file-meta { margin-top: auto; }

.row-badge { font-family: var(--font-label); font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); margin-left: 6px; white-space: nowrap; }
.row-badge.due  { background: var(--warn-soft); color: var(--warn); }
.row-badge.over { background: var(--bad-soft);  color: var(--bad); }

/* ── โมเมนต์สำเร็จ: เมมโม่โผล่ ── */
.cheer { position: fixed; left: 50%; bottom: calc(var(--tabs-h) + var(--tabs-gap) + var(--safe-b) + 70px); transform: translateX(-50%); z-index: 60; pointer-events: none; animation: cheer-in 1.4s var(--ease-out) both; }
.cheer .mascot { width: 96px; height: 96px; }
@keyframes cheer-in {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(.85); }
  18% { opacity: 1; transform: translate(-50%, -4px) scale(1.04); }
  30% { transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(.96); }
}
@media (prefers-reduced-motion: reduce) { .cheer { display: none; } }

/* ── หน้า "ติดตั้งครั้งแรก" (รูป 286 เดิม: ภาพฟ้าในกรอบซ้อนบนฟ้าอีกผืน การ์ดขาวชนขอบฟ้า รายการไม่มีหัวข้อ) ──
   ต้อนรับ/พร้อมแล้ว: ภาพ 3D เต็มกว้างจางเข้าพื้นหน้า · หัวข้อใหญ่สีหมึก · รายการไอคอนกระจก หัวข้อหนา + คำอธิบายเทา แบบหน้า Welcome ของ Apple · ปุ่มติดล่าง
   คำถาม: แถบบนกระจก (ย้อนกลับ · ความคืบหน้า · ไว้ทีหลัง) · เมมโม่ + คำถามตัวใหญ่ · ตัวเลือกเป็นการ์ดขาว */
.onb-screen { position: fixed; inset: 0; z-index: 120; overflow: auto; background: var(--bg); isolation: isolate; animation: onb-in .35s var(--ease-out) both; }
@keyframes onb-in { from { transform: translateY(24px); } to { transform: none; } }
.onb-screen.is-leaving { animation: onb-out .3s var(--ease-out) both; }
@keyframes onb-out { to { opacity: 0; transform: translateY(-10px); } }
.onb-wrap { --onb-ground: var(--bg); min-height: 100%; display: flex; flex-direction: column; }
.onb-main { position: relative; flex: 1; padding: 4px var(--pad) 8px; animation: rise .34s var(--ease-out); }
.onb-title { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.22; color: var(--ink); text-wrap: balance; }
.onb-lead { margin: 8px auto 0; max-width: 32ch; font-size: 15.5px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.onb-wrap .nw { white-space: nowrap; }

/* ภาพหัวเต็มกว้าง ไม่มีกรอบ ไม่ซ้อนฟ้า */
.onb-art-hero { position: relative; overflow: hidden; }
.onb-art { display: block; width: 100%; height: auto; max-height: 48vh; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 58%; filter: var(--onb-art-filter); }
.onb-art-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--onb-fade); background: linear-gradient(to bottom, transparent, var(--onb-ground)); pointer-events: none; }
.is-art .onb-main { margin-top: -18px; text-align: center; }
.onb-list-title { margin: 26px auto 0; max-width: 400px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); text-align: left; }
.onb-list { list-style: none; margin: 22px auto 0; padding: 0; max-width: 400px; display: grid; gap: 14px; text-align: left; }
.onb-list-title + .onb-list { margin-top: 10px; }
.onb-item { display: flex; align-items: center; gap: 12px; }
.onb-item-art { flex: none; width: 58px; height: 58px; margin: -3px -2px -3px -6px; object-fit: contain; }
.onb-item-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.onb-item-text b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--ink); }
.onb-item-text span { font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* ปุ่มติดล่าง — เนื้อหาเลื่อนลอดใต้แล้วจางหาย */
.onb-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px var(--pad) calc(16px + var(--safe-b)); background: linear-gradient(to bottom, transparent, var(--onb-ground) 26%); }
.onb-cta { max-width: 400px; min-height: 52px; font-size: 16px; }
.onb-note { margin: 0; max-width: 40ch; text-align: center; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: balance; }

/* คำถาม */
.onb-toolbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--safe-t)) var(--pad) 10px;
  background: color-mix(in srgb, var(--onb-ground) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
.onb-back { position: relative; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.onb-back > .ic { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; }
.onb-back:active { transform: scale(.92); }
.onb-bar { flex: 1; display: flex; gap: 6px; }
.onb-bar i { flex: 1; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 11%, transparent); transition: background-color .25s var(--ease-out); }
.onb-bar i.on { background: var(--brand); }
.onb-skip { flex: none; min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--brand-text); font-family: var(--font-label); font-size: 14.5px; font-weight: 500; }
.onb-q-head { display: flex; align-items: flex-start; gap: 14px; margin: 12px 0 20px; }
.onb-q-head .mascot { flex: none; width: 64px; height: 64px; margin-top: 2px; }
.is-question .onb-title { font-size: 26px; }
.is-question .onb-lead { margin: 6px 0 0; max-width: none; font-size: 14px; text-wrap: pretty; }
.onb-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.onb-option { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 108px; padding: 14px; border: 0; border-radius: 20px; background: var(--surface); color: var(--ink); text-align: left; box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out); }
.onb-option:active { transform: scale(.97); }
.onb-option.is-on { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.onb-emoji { width: 48px; height: 48px; margin-bottom: 8px; border-radius: 15px; display: grid; place-items: center; background: var(--surface-2); }
.onb-emoji .sticker, .onb-emoji .ic { width: 30px; height: 30px; display: block; filter: drop-shadow(0 2px 3px rgba(16, 24, 40, .14)); }
.onb-label { font-family: var(--font-label); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.onb-hint { font-size: 12.5px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
/* ตัวเลือกที่มีคำอธิบาย (ใช้แบบไหน · เก็บไฟล์ที่ไหน): แถวเต็มกว้าง ไอคอนซ้าย ชื่อ + คำอธิบายขวา ไม่เหลือที่ว่างครึ่งจอ */
.onb-options.is-list { grid-template-columns: minmax(0, 1fr); }
.onb-options.is-list .onb-option { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-content: center; min-height: 84px; padding: 16px; }
.onb-options.is-list .onb-emoji { grid-row: 1 / span 2; align-self: center; margin: 0; }
.onb-options.is-list .onb-label { align-self: end; }
.onb-options.is-list .onb-hint { align-self: start; font-size: 13.5px; }
.is-question .onb-foot { position: static; padding-top: 8px; background: none; }
.onb-skip-q { min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--muted); font-family: var(--font-label); font-size: 14.5px; font-weight: 500; }

/* คอม: คอลัมน์กลางจอเป็นแผ่นเดียว ภาพจางเข้าสีแผ่น */
@media (min-width: 900px) {
  .onb-screen { display: grid; place-items: center; padding: 32px; }
  .onb-wrap { --onb-ground: var(--surface); width: min(520px, 100%); min-height: 0; max-height: calc(100dvh - 64px); overflow: auto; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow), var(--shadow-lg); }
  .onb-art { max-height: none; }
  .onb-back { background: var(--surface-2); box-shadow: none; }
  .onb-option { background: var(--surface-2); box-shadow: none; }
}

/* ── โมเมนต์ฉลอง: เมมโม่เด้งออกมาพร้อมคอนเฟตติ ── */
.party-screen {
  position: fixed; inset: 0; z-index: 121; overflow: hidden;
  display: grid; place-items: center; text-align: center; color: #fff;
  background: var(--sky-hero);
  animation: boot-in .25s var(--ease-out) both;
}
.party-screen.is-leaving { animation: party-out .38s var(--ease-out) both; }
@keyframes party-out { to { opacity: 0; transform: scale(1.04); } }
.party-body { position: relative; padding: 0 28px; }
.party-body h2 { margin: 12px 0 6px; font-size: 28px; line-height: 1.25; }
.party-body p { margin: 0 auto; max-width: 30ch; font-size: 15px; color: rgba(255, 255, 255, .88); text-wrap: balance; }
.party-mascot { width: 190px; height: 190px; margin: 0 auto; color: #1B1E24; transform-origin: 50% 98%; animation: party-pop .9s var(--ease-out) both, mascot-stand 4.6s cubic-bezier(.45, 0, .55, 1) .9s infinite; }
@keyframes party-pop { 0% { transform: translateY(80px) scale(.4); opacity: 0; } 55% { transform: translateY(-14px) scale(1.08); opacity: 1; } 100% { transform: none; opacity: 1; } }
.party-body h2, .party-body p { animation: rise .6s var(--ease-out) .35s both; }
.party-confetti { position: absolute; inset: 0; pointer-events: none; }
.party-confetti i { position: absolute; top: -20px; width: var(--w); height: calc(var(--w) * 1.6); border-radius: 3px; opacity: .95; transform: rotate(var(--r)); animation: party-fall var(--d) linear infinite; }
@keyframes party-fall { to { transform: translateY(110vh) rotate(calc(var(--r) + 540deg)); } }
@media (prefers-reduced-motion: reduce) { .party-mascot, .party-body h2, .party-body p { animation: none; } }

/* ── ตัวโหลด: เมมโม่ลอยบนเงา ── */
.loader { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 20px 40px; opacity: 0; animation: loader-in .25s var(--ease-out) .15s both; }
.loader-sm { padding: 26px 12px 18px; }
@keyframes loader-in { to { opacity: 1; } }
.loader-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.loader .mascot { animation: mascot-stand 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.loader .mascot.sm { width: 64px; height: 64px; }
.loader-shadow { width: 64px; height: 12px; border-radius: 50%; background: rgba(27, 30, 36, .16); margin-top: -2px; animation: loader-shadow 1.25s ease-in-out infinite; }
.loader-sm .loader-shadow { width: 44px; height: 9px; }
@keyframes loader-shadow { 0%, 100% { transform: scaleX(1); opacity: .45; } 50% { transform: scaleX(.92); opacity: .38; } }
.loader-text { font-family: var(--font-label); font-size: 13.5px; font-weight: 500; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .loader .mascot, .loader-shadow { animation: none; } .loader { animation-delay: 0s; } }


/* ── ทัวร์ ── */
.tour-dots { display: flex; justify-content: center; gap: 6px; margin: 12px 0 4px; }
.tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tour-dots i.on { background: var(--brand); width: 20px; }
.tour-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 24px 16px 18px; background: var(--sky-hero); text-align: center; }
.tour-hero::before { content: ""; position: absolute; z-index: -1; left: -20%; right: -20%; bottom: -40%; height: 78%; background: radial-gradient(45% 55% at 25% 60%, rgba(255, 255, 255, .22), transparent 70%), radial-gradient(40% 50% at 78% 72%, rgba(255, 255, 255, .15), transparent 70%); filter: blur(8px); }
.tour-hero .mascot { position: relative; margin: 0 auto; color: #1B1E24; }
/* ทัวร์ที่มีภาพประกอบ 3D: ภาพเต็มกรอบ ไม่มีเมฆ CSS ซ้อน */
.tour-hero.has-art { padding: 0; }
.tour-hero.has-art::before { content: none; }
.tour-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tour-step h3 { font-family: var(--font-label); font-size: 21px; letter-spacing: -.02em; margin: 16px 0 6px; text-align: center; }
.tour-step p { margin: 0; text-align: center; color: var(--ink-2); font-size: 14.5px; }

/* ── แพลน · ล็อกฟีเจอร์ · หน้าอัปเกรด ── */
/* ป้าย 🔒 Pro/Max/NAS — เล็กเพราะอยู่ท้ายบรรทัดหัวข้อ แต่กดได้จริง
   ขยายพื้นที่กดด้วย ::after ที่ไม่กินที่ในการจัดหน้า: เห็น 26px แต่นิ้วแตะได้ 36px */
.lock-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .03em;
  padding: 5px 10px; border: 0; border-radius: 999px; color: var(--brand-text); background: var(--brand-soft);
}
.lock-pill::after { content: ""; position: absolute; inset: -5px -6px; border-radius: 999px; }
.lock-pill.max { color: var(--c-ai-text, var(--c-ai)); background: color-mix(in srgb, var(--c-ai) 14%, var(--surface)); }
.lock-pill .ic { width: 12px; height: 12px; }
.btn.is-locked { color: var(--muted); background: transparent; box-shadow: none; outline: 1.5px dashed var(--line); outline-offset: -2px; }
.feature-list .row .lock-pill { margin-left: 6px; }

.upgrade-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px;
  padding: 30px 16px 18px; text-align: center;
  background: var(--sky-hero);
  color: #fff; box-shadow: var(--shadow-sky);
}
.upgrade-hero::before { content: ""; position: absolute; z-index: -1; left: -20%; right: -20%; bottom: -40%; height: 78%; background: radial-gradient(45% 55% at 25% 60%, rgba(255, 255, 255, .22), transparent 70%), radial-gradient(40% 50% at 78% 72%, rgba(255, 255, 255, .15), transparent 70%); filter: blur(8px); }
.upgrade-hero .mascot { position: relative; margin: 0 auto; width: 128px; height: 128px; color: #1B1E24; }
.upgrade-hero .badge { position: relative; display: inline-block; margin-top: 8px; font-family: var(--font-label); font-weight: 600; font-size: 13px; letter-spacing: .04em; background: var(--sun); color: var(--sun-ink); padding: 5px 14px; border-radius: 999px; }
.upgrade-title { font-family: var(--font-label); font-size: 22px; font-weight: 600; letter-spacing: -.02em; text-align: center; margin: 18px 0 4px; }
.upgrade-title b { color: var(--brand-text); }
.upgrade-sub { text-align: center; color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.feature-rows { display: flex; flex-direction: column; gap: 10px; }
.feature-row { display: flex; align-items: flex-start; gap: 12px; }
.feature-row .fi { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.feature-row .fi .ic { width: 18px; height: 18px; }
.feature-row .ft { font-weight: 600; }
.feature-row .fh { font-size: 12.5px; color: var(--muted); }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.price-card { position: relative; border: 1.5px solid var(--line); border-radius: 20px; padding: 14px 16px; background: var(--surface); }
.price-card.best { border-color: var(--brand); background: var(--brand-soft); }
.price-card .pl { font-family: var(--font-label); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.price-card .pv { font-family: var(--font-label); font-size: 26px; font-weight: 600; letter-spacing: -.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.price-card.best .pv { color: var(--brand-text); }
.price-card .ph { font-size: 12px; color: var(--muted); }
.price-card .best-badge { position: absolute; top: -10px; right: 10px; font-family: var(--font-label); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; background: var(--dark); color: var(--dark-ink); padding: 3px 9px; border-radius: 999px; }
/* การ์ดราคาที่กดเลือกรอบได้ (จ่ายเองด้วย Stripe) — หน้าตาเดิม เลือกแล้วมีวงแบรนด์ */
button.price-card { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.price-card.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
/* วิธีการทำงาน: การ์ดละขั้น ข้อความซ้าย มือถือครึ่งบนโผล่จากขอบล่างขวา (จอขาวเสมอ ไม่ตามธีม) */
.step-cards { display: flex; flex-direction: column; gap: 12px; }
.step-card { position: relative; overflow: hidden; min-height: 170px; padding: 20px 156px 20px 18px; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); }
.step-text { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.step-no { font-family: var(--font-label); font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.step-phone { position: absolute; right: 14px; top: 22px; bottom: -8px; width: 128px; border: 5px solid #4B505A; border-bottom: 0; border-radius: 30px 30px 0 0; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 34px 9px 14px; }
.step-notch { position: absolute; top: 9px; left: 50%; width: 42px; height: 11px; margin-left: -21px; border-radius: 6px; background: #4B505A; }
.step-phone .sticker { width: 40px; height: 40px; display: block; }
.ph-row { display: flex; align-items: flex-end; gap: 4px; width: 100%; }
.ph-out { justify-content: flex-end; }
.ph-bubble { max-width: 100%; background: #EEF0F4; color: #1B1E24; font-size: 10.5px; line-height: 1.35; padding: 6px 9px; border-radius: 12px 12px 12px 3px; text-align: left; }
.ph-green { background: #06C755; color: #fff; border-radius: 12px 12px 3px 12px; }
.ph-ava { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #FFE8A6; display: grid; place-items: center; overflow: hidden; }
.ph-ava .mascot { width: 18px; height: 18px; color: #1B1E24; }
.ph-photo { width: 64px; height: 64px; border-radius: 12px; background: #EEF0F4; display: grid; place-items: center; }
.ph-stack { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ph-card { width: 100%; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); text-align: left; }
.ph-card-head { padding: 5px 7px; font-size: 9.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-card-head.tone-brand { background: linear-gradient(135deg, #FFD65A, #F2B705); color: #1B1E24; }
.ph-card-head.tone-hot { background: linear-gradient(135deg, #FF8A9B, #E5556F); color: #fff; }
.ph-card-head.tone-teal { background: linear-gradient(135deg, #3FBF85, #1E9E66); color: #fff; }
.ph-card-body { padding: 6px 7px 2px; font-size: 10px; font-weight: 600; color: #1B1E24; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-track { height: 6px; margin: 4px 7px 2px; background: #EEF0F4; }
.ph-btn { margin: 6px 7px 7px; padding: 4px 6px; border-radius: 999px; background: #1B1E24; color: #fff; font-size: 8.5px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-stack > .ph-btn { margin: 0; }
.ph-center { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ph-center b { font-family: var(--font-label); font-size: 19px; color: #1B1E24; letter-spacing: .02em; }
.ph-center small { font-size: 10px; color: #5B6473; line-height: 1.3; }
.ph-chip { padding: 5px 8px; border-radius: 999px; border: 1.5px solid #D9DCE3; font-size: 10px; font-weight: 600; color: #5B6473; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-chip.is-on { background: #FFF1C2; border-color: #F2B705; color: #8F6B00; }
.ph-flow { display: flex; align-items: center; gap: 2px; }
.ph-flow .sticker { width: 34px; height: 34px; }
.ph-arrow { font-size: 14px; font-weight: 600; color: #8F6B00; }
.steps { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.step { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.step .n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-family: var(--font-label); font-size: 12px; font-weight: 600; display: grid; place-items: center; }

/* ── การ์ด ── */
.card {
  position: relative;
  background: var(--surface); border: 0;
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 14px; overflow: hidden;
}
.card-tap { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .2s var(--ease-out); }
.card-tap:active, .file-tile:active { transform: scale(.97); }
.card-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-family: var(--font-label); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.card-head .grow { flex: 1; }
.card-body { padding: 18px; }
.card-body.tight { padding: 4px 0; }
.card-body dl { margin: 0; }

/* หน้าว่าง (รูป 280–281): การ์ดขาวมีกรอบประด้านใน บอกว่า "ตรงนี้รอของอยู่" · เมมโม่ยืนบนแสงฟ้าจาง · หัวชัด คำอธิบายสั้น */
.empty { position: relative; text-align: center; color: var(--muted); padding: 30px 24px 26px; font-size: 14px; line-height: 1.55; }
.card:has(.empty:not(.quiet))::before { content: ""; position: absolute; inset: 8px; border: 1.5px dashed var(--line); border-radius: calc(var(--radius) - 8px); pointer-events: none; }
.empty b { display: block; color: var(--ink); font-family: var(--font-label); font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }

/* แถวรายการ — เส้นคั่นแบบ iOS เริ่มหลังไอคอน ไม่ลากเต็มแถว */
.row {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 60px;
  padding: 12px 18px; border: 0;
  background: none; text-align: left; color: inherit;
  transition: background-color .15s var(--ease-out);
}
.row + .row::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; height: 1px; background: var(--line-2); pointer-events: none; }
.row:has(> .row-mark) + .row:has(> .row-mark)::before { left: 72px; }
.row:active { background: color-mix(in srgb, var(--ink) 4%, transparent); }
@media (hover: hover) { .row:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); } }

.row-mark { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); }
.row-mark .ic { width: 19px; height: 19px; }
.row-mark.k-reminder { background: var(--t-sky);   color: var(--k-reminder); }
.row-mark.k-expense  { background: var(--t-mint);  color: var(--k-expense); }
.row-mark.k-income   { background: var(--t-mint);  color: var(--k-income); }
.row-mark.k-note     { background: var(--t-amber); color: var(--sun-text); }
.row-mark.k-document { background: var(--t-grape); color: var(--k-document); }
.row-mark.k-fired    { background: var(--t-coral); color: var(--k-fired); }
.row-mark.k-done     { background: color-mix(in srgb, var(--k-done) 16%, var(--surface)); color: var(--k-done); }
.row-mark.k-warn     { background: var(--warn-soft); color: var(--warn); }
.row-mark.k-team     { background: var(--t-teal);  color: var(--c-group); }
.row-mark.k-task     { background: var(--t-amber); color: var(--sun-text); }

.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 15.5px; font-weight: 500; line-height: 1.45; letter-spacing: -.005em; padding: .25em 0; margin: -.25em 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: 13px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.row-side { font-family: var(--font-label); font-size: 15px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.row.is-done .row-title { text-decoration: line-through; color: var(--muted); }
.row.is-unread .row-title { font-weight: 600; }
.row.is-unread::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; }
.row-day { padding: 16px 18px 4px; font-family: var(--font-label); font-size: 12.5px; font-weight: 600; color: var(--muted); }
/* เวลาชิดขวา กว้างคงที่ ตัวเลขตาราง — ขอบซ้ายตรงกันทุกแถว สถานะอยู่บรรทัดรอง สีบอกความเร่ง */
.row-when { flex: 0 0 64px; align-self: center; text-align: right; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-when.today { color: var(--brand-text); }
.row-when.due   { color: var(--warn); }
.row-when.over  { color: var(--bad); }

/* ── ปุ่ม: เม็ดยาทุกปุ่ม · ฟ้าคือปุ่มหลัก · กดแล้วยุบนิดตอนนิ้วลง ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 6px 20px; min-width: 0;
  white-space: normal; text-align: center; line-height: 1.2;
  border: 0; border-radius: 999px;
  background: var(--btn-bg); color: var(--ink); box-shadow: var(--shadow-sm);
  font-family: var(--font-label); font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  transition: transform .18s var(--ease-out), background-color .15s, box-shadow .15s;
}
.btn .ic { width: 18px; height: 18px; flex: 0 0 18px; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; }
@media (hover: hover) { .btn:hover { background: color-mix(in srgb, var(--ink) 5%, var(--btn-bg)); } }
.btn-primary, .btn-brand { background: var(--brand); color: var(--brand-ink); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand) 80%, transparent); }
@media (hover: hover) { .btn-primary:hover, .btn-brand:hover { background: var(--brand-deep); } }
.btn-dark    { background: var(--dark); color: var(--dark-ink); box-shadow: none; }
.btn-soft    { background: var(--brand-soft); color: var(--brand-text); box-shadow: none; }
@media (hover: hover) { .btn-soft:hover { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); } }
.btn-pill    { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn-danger  { color: var(--bad); background: var(--bad-soft); box-shadow: none; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn-wide { width: 100%; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-grid .btn { font-size: 14px; padding: 6px 10px; }
.btn-grid .span2 { grid-column: 1 / -1; }
.linklike { background: none; border: 0; color: var(--brand-text); font: inherit; font-size: 14px; font-weight: 500; padding: 4px 2px; min-height: 32px; display: inline-flex; align-items: center; cursor: pointer; }

/* ── ชิป: ขาวลอย · เลือกแล้วเป็นฟ้าจาง ตัวหนังสือฟ้า (ฟ้า = เลือก กด ลิงก์) ── */
.chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.chips::-webkit-scrollbar { display: none; }
.chips.chips-wrap { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; padding-bottom: 4px; }
.chip {
  flex: 0 0 auto; height: 36px; padding: 0 15px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px;
  background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-sm);
  font-family: var(--font-label); font-size: 14px; font-weight: 500;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), transform .18s var(--ease-out);
}
.chip:active { transform: scale(.96); }
.chip .ic { width: 16px; height: 16px; }
.chip.is-on { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; box-shadow: none; }
.chip.chip-icon { padding: 0 12px; }

/* ── ปฏิทิน ── */
.view-calendar .pane-main { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 12px 12px; margin-bottom: 14px; }
.cal-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cal-month { flex: 1; text-align: center; border: 0; background: none; font-family: var(--font-label); font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); min-height: 40px; }
.cal-nav { width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--font-label); font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; padding-bottom: 6px; }
.cal-dow .wknd { color: var(--ink-2); }
.cal-dow .wknd:first-child { color: var(--bad); }
/* ตารางเดือนแบบปฏิทินในมือถือ (รูป 276): ชิปสีมีชื่อในช่อง · แถบหลายวันยื่นข้ามช่อง (overflow ต้องมองเห็น)
   --cal-gap/--cal-pad ต้องตรงกับช่องว่างจริง — ความกว้างแถบคำนวณจากสองค่านี้ */
.cal-grid { --cal-gap: 2px; --cal-pad: 2px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px var(--cal-gap); }
.cal-day {
  position: relative; min-height: 66px; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 3px; padding: 3px var(--cal-pad) 3px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); text-align: left;
  font-family: var(--font-label); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.cal-num { width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; line-height: 1; transition: background-color .15s; }
/* แตะวัน = ยุบนิดหนึ่งตอบรับนิ้ว · กรอบเลือกค่อยๆ ติด */
.cal-day { transition: transform .12s var(--ease-out), box-shadow .15s var(--ease-out); }
.cal-day:active { transform: scale(.96); }
.cal-day:nth-child(7n+1):not(.is-out):not(.is-today):not(.is-sel) .cal-num { color: var(--bad); }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sun) 70%, transparent); }
.cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-chip {
  position: relative; display: block; box-sizing: border-box; height: 14px; min-width: 0;
  padding: 0 3px; border-radius: 4px; overflow: hidden; white-space: nowrap; text-overflow: clip;
  font-family: var(--font-body); font-size: 10px; font-weight: 500; line-height: 14px;
  background: var(--surface-2); color: var(--ink-2); pointer-events: none;
}
/* ชื่อยาวได้ไม่เกินสองบรรทัด — ชื่อสั้นบรรทัดเดียวก็สูงบรรทัดเดียว · ที่ยาวเกิน fitChips() ตัดข้อความจริงให้พอดี (แบบรูป 276 ไม่มี …)
   ไม่ใช้ -webkit-line-clamp: ทดสอบกับฟอนต์จริงแล้ว clamp ปล่อยวรรณยุกต์ของบรรทัดที่สามโผล่เป็นจุดใต้ชิป */
.cal-chip.is-two { height: auto; max-height: 28px; white-space: normal; overflow-wrap: anywhere; }
.cal-chip.is-span { z-index: 2; width: calc(var(--span) * 100% + (var(--span) - 1) * (2 * var(--cal-pad) + var(--cal-gap))); }
.cal-chip.is-ghost, .cal-chip.is-gap { visibility: hidden; }
.cal-chip.k-reminder { background: var(--t-sky);   color: var(--c-cal-text); }
.cal-chip.k-fired    { background: var(--t-coral); color: var(--bad); }
.cal-chip.k-note     { background: var(--t-amber); color: var(--sun-text); }
.cal-chip.k-document { background: var(--t-grape); color: var(--c-ai-text); }
.cal-chip.k-team     { background: var(--t-teal);  color: var(--c-group-text); }
.cal-chip.k-task     { background: var(--t-mint);  color: var(--ok); }
.cal-chip.k-gcal     { background: color-mix(in srgb, var(--c-system) 16%, var(--surface)); color: var(--ink); }
.cal-chip.k-done, .cal-chip.is-done { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.cal-more { font-size: 10px; line-height: 12px; font-weight: 600; color: var(--muted); text-align: center; }
/* จางกว่าวันในเดือนได้ แต่ต้องอ่านออก — 45% ให้แค่ 1.90:1 มองไม่เห็นเลยทั้งที่กดได้ */
.cal-day.is-out   { color: var(--muted); }
.cal-day.is-today .cal-num { background: var(--sun); color: var(--sun-ink); font-weight: 600; }
.cal-day.is-sel .cal-num   { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.cal-day.is-today.is-sel .cal-num { background: var(--sun); color: var(--sun-ink); box-shadow: 0 0 0 2px var(--brand); }
@media (hover: hover) { .cal-day:not(.is-today):not(.is-sel):hover .cal-num { background: var(--surface-2); } }
.cal-dots { display: flex; gap: 3px; height: 5px; align-items: center; }
.cal-dot  { width: 5px; height: 5px; border-radius: 50%; }
.cal-dot.k-reminder { background: var(--k-reminder); }
.cal-dot.k-fired    { background: var(--k-fired); }
.cal-dot.k-done     { background: var(--k-done); }
.cal-dot.k-expense  { background: var(--k-expense); }
.cal-dot.k-note     { background: var(--k-note); }
.cal-dot.k-document { background: var(--k-document); }
.cal-dot.k-team     { background: var(--c-group); }
.cal-dot.k-task     { background: var(--sun-deep); }
.cal-money { font-size: 10px; line-height: 1.1; padding-bottom: 2px; color: var(--ok); font-variant-numeric: tabular-nums; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 2px; font-size: 11.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06)); }
.cal-items { display: none; }
.day-head { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin: 0 2px 10px; }
.day-head .section-title { margin: 0; }
/* จุดเหลือง = วันนี้ สีเดียวกับวงวันนี้ในตาราง */
.day-head.is-today .section-title::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 24%, transparent); }
.day-add { flex: none; min-height: 34px; padding: 0 14px; }
.day-add .ic { width: 16px; height: 16px; flex-basis: 16px; }
.day-back { flex: none; font-size: 13.5px; }
.day-date { flex: 1; min-width: 0; font-family: var(--font-label); font-size: 14.5px; font-weight: 500; color: var(--muted); }
.day-panel .card { margin-bottom: 10px; }
/* การ์ดวันนี้ในปฏิทิน: การ์ดขาวแบบเดียวกับรายการหน้าหลัก เวลาชิดขวาคอลัมน์เดียว (รูป 288 ขอบกลืนพื้น · รูป 290 ให้ดูดีขึ้น) */
.day-card { color: var(--ink); }
.day-card .day-empty p { color: var(--ink-2); }
/* พื้นการ์ดนี้อมเหลืองเข้ม --muted จึงจมลงไป (4.27:1) — ขยับเป็น ink-2 ได้ 7.44:1 */
/* แตะ/ชี้บนการ์ดที่มีพื้นสีเอง ต้องไม่ทาทับด้วย surface-2 ทั้งแถบ — จางลงจากสีพื้นเดิมพอ */
.day-empty { display: flex; align-items: center; gap: 12px; padding: 16px 12px 16px 18px; }
.day-empty b { display: block; font-family: var(--font-label); font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.day-empty p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.day-empty .mascot.sm { width: 64px; height: 64px; flex: none; }
.day-money { display: flex; gap: 16px; margin: 0 2px 10px; font-family: var(--font-label); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.day-money b { color: var(--ink); font-weight: 600; }
.day-money .up b { color: var(--ok); }
.empty.slim { padding: 18px 16px; }
.view-calendar { display: flex; flex-direction: column; }
.view-calendar .pane-today { order: -1; margin-bottom: 8px; }
.view-calendar .pane-side { margin-top: 6px; }

/* ── ตัวเลขสรุป · แถบ · งบ ── */
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat { background: var(--surface); border: 0; border-radius: 22px; padding: 16px 18px 14px; box-shadow: var(--shadow); }
.stat-label { font-family: var(--font-label); font-size: 13px; font-weight: 500; color: var(--muted); }
.stat-value { font-family: var(--font-label); font-size: 28px; font-weight: 600; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.stat-value.up   { color: var(--ok); }
.stat-value.down { color: var(--ink); }
.stat-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.bar-line { margin-bottom: 14px; }
.bar-top  { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 999px; background: var(--brand); }

/* ── สีประจำหมวดค่าใช้จ่าย ────────────────────────────────────
   ผ่านตัวตรวจจานสีทั้งสองโหมด (ช่วงความสว่าง · ความอิ่มสี ·
   แยกออกจากกันสำหรับตาบอดสี ΔE 9.1 สว่าง / 8.4 มืด · คอนทราสต์บนพื้นการ์ด)
   ลำดับตายตัวตามลำดับหมวด — ห้ามวนใหม่ตามอันดับยอด ไม่งั้นสีย้ายหมวดทุกเดือน
   แถบสัดส่วนมีชื่อหมวดกำกับทุกแถวอยู่แล้ว จึงไม่ได้พึ่งสีอย่างเดียว */
.cat-food  { --cat: #2a78d6; }
.cat-trip  { --cat: #eb6834; }
.cat-bill  { --cat: #1baf7a; }
.cat-shop  { --cat: #eda100; }
.cat-heal  { --cat: #e87ba4; }
.cat-fun   { --cat: #008300; }
.cat-in    { --cat: #4a3aa7; }
.cat-etc   { --cat: #e34948; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .cat-food { --cat: #3987e5; }
  html:not([data-theme="light"]) .cat-trip { --cat: #d95926; }
  html:not([data-theme="light"]) .cat-bill { --cat: #199e70; }
  html:not([data-theme="light"]) .cat-shop { --cat: #c98500; }
  html:not([data-theme="light"]) .cat-heal { --cat: #d55181; }
  html:not([data-theme="light"]) .cat-fun  { --cat: #008300; }
  html:not([data-theme="light"]) .cat-in   { --cat: #9085e9; }
  html:not([data-theme="light"]) .cat-etc  { --cat: #e66767; }
}
html[data-theme="dark"] .cat-food { --cat: #3987e5; }
html[data-theme="dark"] .cat-trip { --cat: #d95926; }
html[data-theme="dark"] .cat-bill { --cat: #199e70; }
html[data-theme="dark"] .cat-shop { --cat: #c98500; }
html[data-theme="dark"] .cat-heal { --cat: #d55181; }
html[data-theme="dark"] .cat-fun  { --cat: #008300; }
html[data-theme="dark"] .cat-in   { --cat: #9085e9; }
html[data-theme="dark"] .cat-etc  { --cat: #e66767; }
.bar-fill.by-cat { background: var(--cat, var(--brand)); }

/* แถบสัดส่วนรวมแถบเดียว — เห็นภาพรวมก่อน แล้วค่อยไล่อ่านทีละหมวด
   ช่องว่าง 2px คั่นทุกชิ้น ไม่งั้นสองหมวดสีใกล้กันจะอ่านเป็นก้อนเดียว */
.cat-stack { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; margin: 2px 0 16px; background: var(--surface-2); }
.cat-stack > span { background: var(--cat); min-width: 3px; }

/* จุดสีนำหน้าชื่อหมวด — ผูกชื่อกับสีในแถบให้ตาไล่ตามได้ */
.cat-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--cat); flex: none; }
.bar-top .cat-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bar-top .cat-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-fill.warn { background: var(--warn); }
.bar-fill.crit { background: var(--bad); }
.bar-fill.b-ok   { background: var(--c-money); }
.bar-fill.b-near { background: var(--warn); }
.bar-fill.b-over { background: var(--bad); }
.budget-top { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.budget-nums { font-size: 15px; color: var(--ink); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.budget-inputwrap { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-sm); padding: 0 14px; background: var(--surface-2); border: 1.5px solid var(--line); }
.budget-inputwrap:focus-within { border-color: var(--brand); background: var(--surface); }
.budget-cur { color: var(--muted); font-size: 18px; }
.budget-input { flex: 1; border: 0; background: none; color: var(--ink); font: inherit; font-size: 20px; padding: 12px 0; outline: none; }

/* ── ไฟล์ ── */
.search-input {
  display: block; width: 100%; height: 48px; margin-bottom: 10px;
  padding: 0 16px 0 44px;
  border: 0; border-radius: 999px;
  background: var(--surface) no-repeat 16px center / 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737A86' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
  color: var(--ink); box-shadow: var(--shadow-sm);
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { outline: none; box-shadow: var(--shadow-sm), 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; width: 14px; height: 14px; cursor: pointer;
  background: no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737A86' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.file-tile {
  position: relative; border: 0; border-radius: 20px;
  background: var(--surface); padding: 14px 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; color: inherit; box-shadow: var(--shadow-sm);
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.file-tile:active { background: var(--surface-2); }
.file-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--surface-2); color: var(--ink-2); }
.file-icon .ic { width: 23px; height: 23px; }
.file-icon.k-image, .file-icon.k-video { background: var(--t-coral); color: var(--c-inbox); }
.file-icon.k-pdf, .file-icon.k-doc { background: var(--t-sky); color: var(--c-cal); }
.file-icon.k-sheet { background: var(--t-mint); color: var(--ok); }
.file-icon.k-audio, .file-icon.k-archive { background: var(--t-grape); color: var(--c-ai); }
.file-icon.k-file { background: var(--t-amber); color: var(--sun-text); }
.file-name { font-size: 12px; line-height: 1.45; padding: .2em 0; margin: -.2em 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.file-meta { font-family: var(--font-label); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.file-tile.is-star .file-star { position: absolute; top: 8px; right: 8px; width: 14px; height: 14px; color: var(--sun); fill: var(--sun); stroke: none; }
.file-icon.big { width: 76px; height: 76px; margin: 4px auto 14px; border-radius: 22px; }
.file-icon.big .ic { width: 38px; height: 38px; }
.preview { width: 100%; height: auto; max-height: 72vh; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-2); display: block; margin-bottom: 12px; cursor: zoom-in; }
.preview-slot { min-height: 80px; }
.preview-media { display: block; width: 100%; max-height: 46vh; border-radius: var(--radius-sm); background: #000; margin-bottom: 12px; }
.preview-audio { display: block; width: 100%; margin: 0 0 12px; }
.preview-frame { display: block; width: 100%; aspect-ratio: 1 / 1.414; max-height: 82vh; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.preview-text { margin: 0 0 12px; max-height: 46vh; overflow: auto; padding: 11px 13px; background: var(--surface-2); border-radius: var(--radius-sm); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(10, 13, 18, .94); display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .lightbox-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; color: #fff; background: rgba(255, 255, 255, .16); box-shadow: none; }

/* ── แผ่นเลื่อนกระจก ── */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; }
.sheet-veil { position: absolute; inset: 0; background: rgba(6, 10, 26, .32); animation: veil-in .3s var(--ease-out) both; }
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 90dvh; display: flex; flex-direction: column;
  /* กระจกหนา: หน้าลอดใต้เบลอ ขอบบนมีแสง · ขึ้นจากขอบล่างด้วยโค้งแบบแผ่น iOS */
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  border-radius: 30px 30px 0 0; box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-up);
  padding-bottom: var(--safe-b);
  animation: sheet-up .44s var(--ease-sheet);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-veil { animation: none; } }
/* ขีดจับ — ลากลงเพื่อปิดได้จริง จึงต้องมีพื้นที่นิ้วรอบตัวมัน ไม่ใช่แค่ขีดบางๆ */
.sheet-grip { width: 100%; min-height: 32px; padding: 12px 0 8px; background: none; border: 0; cursor: grab; touch-action: none; }
.sheet-grip::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 20%, transparent); margin: 0 auto;
  transition: background-color .15s var(--ease-out), transform .15s var(--ease-out); }
.sheet-grip:active { cursor: grabbing; }
.sheet-grip:active::before, .sheet-grip:focus-visible::before { background: color-mix(in srgb, var(--ink) 40%, transparent); transform: scaleX(1.2); }
.sheet-head { touch-action: none; }
/* ตอนลาก transform ถูกตั้งจาก JS — ต้องมีทางกลับที่นุ่ม เมื่อปล่อยแล้วไม่ถึงเกณฑ์ */
.sheet { transition: transform .32s var(--ease-sheet); }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 6px var(--pad) 8px; color: var(--ink); }
.sheet-head h2 { flex: 1; margin: 0; font-size: 21px; letter-spacing: -.02em; }
.sheet-body { overflow-y: auto; padding: 6px var(--pad) 22px; -webkit-overflow-scrolling: touch; }

.sheet-lead { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.sheet-lead .mascot.sm { width: 48px; height: 48px; flex: none; }
/* ช่องจดด่วน (บนแผ่น) */
.quick { display: flex; gap: 8px; }
.quick-input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-size: 15.5px; }
.quick-input::placeholder { color: var(--muted); }
.quick-input:focus { outline: none; box-shadow: var(--shadow-sm), 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
.quick-go { width: 50px; height: 50px; flex: 0 0 50px; border: 0; border-radius: 50%; background: var(--fab-bg); color: var(--brand-ink); box-shadow: var(--glow); }
.quick-go:disabled { opacity: .45; }
/* ทางลัดในแผ่น + (ย้ายมาจากหน้าหลัก) */
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.quick-actions .action-tile { padding: 10px 2px 8px; border-radius: 18px; gap: 6px; }
.quick-actions .action-ic { width: 44px; height: 44px; border-radius: 14px; }
.quick-actions .action-ic .sticker { width: 28px; height: 28px; }
.quick-actions .action-label { font-size: 12px; }
.quick-pop-actions { margin-top: 8px; }

/* ── ฟอร์ม ── */
.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--font-label); font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0 4px 6px; }
/* ช่องกรอก: พื้นขาว ขอบ --field-edge อย่างน้อย 3:1 · โฟกัส = ขอบฟ้า วงแสงฟ้าจาง */
.field input, .field select, .field textarea, .field-input {
  width: 100%; min-height: 48px; padding: 11px 15px;
  border: 0; border-radius: 14px;
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--field-edge);
  transition: box-shadow .18s var(--ease-out), background-color .18s var(--ease-out);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
/* ช่องที่ต้องกรอกต่อ (NAS ขอรหัส 2FA หลังบันทึก) */
.field.is-need input { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 24%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus, .field-input:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
.field select { max-width: 100%; }
.field-row  { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.field-row > .field { min-width: 0; }
.field-hint { font-size: 13px; color: var(--muted); margin: 5px 4px 0; }
.field input[type="date"], .field input[type="time"], .field input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; max-width: 100%;
  height: 48px; line-height: 1.25; overflow: hidden; text-align: left;
}
.field input::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; margin: 0; }
.field input::-webkit-datetime-edit { padding: 0; line-height: 1.25; }
.when-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; }

.switch { display: flex; align-items: center; gap: 12px; min-height: var(--tap); cursor: pointer; }
.switch .grow { font-size: 15px; }
/* สวิตช์ขนาด iOS 51×31 ตรงไปตรงมา (ไม่มี padding/background-clip — iOS วาด input แบบนั้นเพี้ยน: รูป 242)
   ลูกกลม = ::before · พื้นที่นิ้วกด = ::after ยื่นบน-ล่างข้างละ 7px (สูงรวม 45) ไม่ดันการจัดหน้า */
input[type="checkbox"].toggle, .switch input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0;
  box-sizing: border-box; width: 51px; height: 31px; flex: 0 0 51px; position: relative;
  border-radius: 16px; border: 0; background-color: color-mix(in srgb, var(--ink) 16%, var(--surface)); cursor: pointer;
  transition: background-color .25s var(--ease-out);
}
.switch input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .12); transition: transform .3s var(--ease-out); }
.switch input[type="checkbox"]::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
/* ใช้ background-color ไม่ใช่ background (ชอร์ตแฮนด์รีเซ็ตค่าอื่นของพื้น) */
.switch input[type="checkbox"]:checked { background-color: var(--switch-on); }
.switch input[type="checkbox"]:checked::before { transform: translateX(20px); }
input[type="radio"] { appearance: none; -webkit-appearance: none; margin: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; transition: border-color .15s; }
input[type="radio"]::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); transform: scale(0); transition: transform .2s var(--ease-out); }
input[type="radio"]:checked { border-color: var(--brand); }
input[type="radio"]:checked::after { transform: scale(1); }

.kv { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv dt { flex: 0 0 40%; color: var(--muted); }
.kv dd { flex: 1; margin: 0; min-width: 0; word-break: break-word; font-variant-numeric: tabular-nums; }
.note-box { background: var(--surface); border-radius: 16px; padding: 13px 15px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; box-shadow: var(--shadow-sm); }
.note-box.raw { font-size: 13px; color: var(--muted); }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; margin-bottom: 14px; }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.bad  { background: var(--bad-soft);  color: var(--bad); }
.banner.info { background: var(--brand-soft); color: var(--ink); }

/* ── แถบล่างแคปซูลกระจก ── */
.tabs {
  position: fixed; left: 14px; right: 14px; z-index: 30;
  bottom: calc(var(--tabs-gap) + var(--safe-b));
  height: var(--tabs-h); padding: 6px;
  display: flex; align-items: stretch; gap: 2px;
  background: var(--nav-bg); border-radius: 34px;
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
  box-shadow: inset 0 1px 0 var(--nav-edge), inset 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent), 0 18px 40px -16px rgba(16, 24, 40, .38);
}
.tabs-brand, .tabs-head { display: none; }
.tabs-half { flex: 1 1 0; min-width: 0; display: flex; align-items: stretch; gap: 2px; }
.tab {
  flex: 1 1 0; min-width: 44px; border: 0; border-radius: 18px;
  flex-direction: column; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 3px 0 2px;
  background: none; color: var(--nav-ink);
  font-family: var(--font-label); font-size: 10.5px; font-weight: 500; letter-spacing: 0;
  transition: color .25s var(--ease-out);
}
.tab .ic { width: 22px; height: 22px; stroke-width: 1.85; }
.tab .tab-ic { width: 44px; height: 28px; border-radius: 999px; transition: background-color .25s var(--ease-out); }
.tab > span:not(.tab-ic) { display: block; max-width: 100%; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* แท็บที่เปิด: เม็ดยาฟ้าจางหลังไอคอน + ชื่อสีฟ้า — ทุกแท็บกว้างเท่ากันในซีกของตัวเอง ไม่มีแท็บไหนถูกเบียดจนแตะยาก */
.tab.is-on { color: var(--brand-text); font-weight: 600; }
.tab.is-on .tab-ic { background: var(--brand-soft); animation: tab-pop .35s var(--ease-out); }
@keyframes tab-pop { from { transform: scale(.9); } to { transform: none; } }
.tab .dot { display: none; }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabs-h) + var(--tabs-gap) + var(--safe-b) + 14px); z-index: 80;
  max-width: calc(100vw - 32px);
  padding: 11px 20px; border-radius: 999px;
  background: color-mix(in srgb, var(--dark) 92%, transparent); color: var(--dark-ink);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font-family: var(--font-label); font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  /* ทรานซิชัน ไม่ใช่คีย์เฟรม: แจ้งซ้อนกันเร็วๆ แค่เปลี่ยนข้อความ ไม่กระตุกเริ่มใหม่ · ปิดแล้วจางลงทางเดิมที่ขึ้นมา
     (display allow-discrete + @starting-style — เบราว์เซอร์เก่าโผล่/หายทันที ไม่พัง) */
  transition: opacity .3s ease, transform .3s ease, display .3s allow-discrete;
}
.toast[hidden] { display: none; opacity: 0; transform: translate(-50%, 8px) scale(.96); }
@starting-style { .toast { opacity: 0; transform: translate(-50%, 10px) scale(.96); } }
.toast.is-bad { background: var(--bad); color: #fff; }

.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%); background-size: 240% 100%; animation: shimmer 1.3s infinite linear; border-radius: var(--radius); height: 64px; margin-bottom: 10px; }
@keyframes shimmer { from { background-position: 240% 0; } to { background-position: -240% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ── หน้าปลุก ── */
.alarm-wrap { position: fixed; inset: 0; z-index: 85; background: var(--c-inbox); color: #fff; display: grid; place-items: center; padding: 24px; padding-bottom: calc(24px + var(--safe-b)); }
.alarm { width: min(420px, 100%); text-align: center; }
.alarm-ring { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .7); display: grid; place-items: center; animation: alarm-pulse 1s ease-in-out infinite; }
.alarm-ring .ic { width: 40px; height: 40px; }
@keyframes alarm-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); } 50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .alarm-ring { animation: none; } }
.alarm-label { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.alarm-time { font-family: var(--font-label); font-size: 60px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 6px 0 10px; }
.alarm-title { font-size: 20px; font-weight: 600; line-height: 1.35; word-break: break-word; }
.alarm-when { margin-top: 6px; opacity: .85; font-size: 14px; }
.alarm-actions { margin-top: 26px; }
.alarm-actions .btn { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); color: #fff; }
.alarm-actions .btn-primary { background: #fff; box-shadow: none; color: #B8274A; }
.alarm-tap { display: inline-block; margin-bottom: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px dashed rgba(255, 255, 255, .7); font-family: var(--font-label); font-size: 13px; font-weight: 600; }

/* ── แอดมิน · รหัส · ลากไฟล์ ── */
.user-row { cursor: default; }
.user-row .row-title { white-space: normal; }
.user-row .pill { margin-left: 6px; vertical-align: middle; }
.user-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.user-actions .btn { flex: 0 0 auto; white-space: nowrap; }
.code-box { font-family: var(--font-label); font-size: 44px; font-weight: 600; letter-spacing: .14em; text-align: center; padding: 20px 12px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); font-variant-numeric: tabular-nums; user-select: all; }

.file-tile.is-lifting { opacity: .35; transform: scale(.96); }
body.is-dragging { overflow: hidden; }
.drag-ghost { position: fixed; z-index: 96; pointer-events: none; transform: translate(-50%, -115%); width: 118px; padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: var(--surface); border: 2px solid var(--brand); border-radius: 18px; box-shadow: var(--shadow-lg); }
.drag-ghost .file-name { font-size: 11.5px; }
.drop-bar { position: fixed; left: 0; right: 0; z-index: 94; bottom: 0; padding: 10px var(--pad) calc(12px + var(--safe-b)); background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-up); }
.drop-hint { font-family: var(--font-label); font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.drop-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.drop-chips::-webkit-scrollbar { display: none; }
.drop-chip { height: 40px; padding: 0 14px; font-size: 14px; transition: transform .12s var(--ease-out), background-color .12s; }
.drop-chip.is-over { background: var(--brand); color: var(--brand-ink); transform: scale(1.08); }
.drop-chip.drop-new { box-shadow: inset 0 0 0 1.5px var(--line); }

.inline-setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 13px; color: var(--ink-2); }
.inline-setting > span, .inline-setting > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-setting b { color: var(--ink-2); font-weight: 600; }

.meeting-box { margin-bottom: 14px; border-radius: var(--radius-sm); padding: 10px 14px; background: var(--surface); box-shadow: var(--shadow); }
.meeting-box > summary { font-family: var(--font-label); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
.meeting-box > summary::-webkit-details-marker { display: none; }
.meeting-box[open] > summary { margin-bottom: 4px; }
.meeting-box .field:last-of-type { margin-bottom: 6px; }

/* ตัวเลือกแบบ iOS: รางเทาจาง · ช่องที่เลือกเป็นเม็ดขาวลอย */
.seg { display: flex; margin: 2px 0 14px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); border: 0; box-shadow: none; }
.seg-btn { flex: 1; padding: 8px; min-height: 34px; background: none; color: var(--ink-2); font-family: var(--font-label); font-weight: 500; font-size: 13.5px; border: 0; border-radius: 999px; transition: background-color .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.seg-btn.is-on { background: var(--seg-on); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .14), 0 0 0 .5px rgba(16, 24, 40, .05); }

.tiers { display: flex; flex-direction: column; gap: 8px; }
.tier { border: 1.5px solid transparent; border-radius: 20px; padding: 12px 14px; background: var(--surface); box-shadow: var(--shadow); }
.tier.is-current { border-color: var(--brand); }
.tier-head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.tier-head .tier-mascot { width: 44px; height: 44px; flex: none; }
.tier-head b { font-family: var(--font-label); }
.tier-lines { margin: 8px 0 0; padding-left: 18px; }
.tier-lines li { font-size: 13px; color: var(--ink-2); margin: 3px 0; }

.chip-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: var(--tap); padding: 7px 10px; cursor: text; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.chip-input:focus-within { border-color: var(--brand); }
.email-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; line-height: 1.2; }
.email-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-chip.is-bad { background: var(--bad-soft); color: var(--bad); }
.email-chip-x { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 0; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.chip-input-field { flex: 1; min-width: 90px; border: 0; outline: 0; background: none; padding: 4px 2px; font: inherit; color: var(--ink); }

/* ── ตั้งค่าแบบรายการ ── */
.setting-row .row-title { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; white-space: normal; }
.row-chev { width: 16px; height: 16px; flex: none; color: var(--muted); }
.row-mark.row-sticker { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; }
.row-mark .sticker { width: 28px; height: 28px; display: block; filter: drop-shadow(0 2px 2px rgba(27, 30, 36, .12)); }
.profile-card .mascot.sm { width: 68px; height: 68px; padding: 7px; border-radius: 50%; background: var(--t-sky); }
.profile-card .avatar-lg { width: 68px; height: 68px; flex: 0 0 68px; box-shadow: inset 0 0 0 3px var(--brand); }
.profile-card .card-body { padding: 16px 18px; }
/* หน้าตั้งค่า: หัวกลุ่มเล็กสีเทาเหนือการ์ดแบบ Settings ของ iPhone — ไม่ใช่หัวข้อตัวใหญ่ของหน้าหลัก */
.view-system > .section-title { font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin: 26px 18px 8px; }

/* ── จอกว้าง: รางซ้าย + เนื้อหาหลายคอลัมน์ ── */
@media (min-width: 900px) {
  .tabs {
    left: 0; top: 0; right: auto; bottom: 0;
    width: var(--rail-w); height: auto; border-radius: 0;
    flex-direction: column; align-items: stretch; gap: 6px;
    padding: 24px 14px; box-shadow: none; border-right: 1px solid var(--line-2);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
  }
  .tab { color: var(--muted); }
  .tabs { -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
  .tabs-brand { display: block; font-family: var(--font-label); font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); padding: 0 12px 18px; order: -2; }
  .tabs-half { display: contents; }
  .tab { flex: 0 0 48px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 16px; border-radius: 16px; font-size: 14.5px; }
  .tab > span:not(.tab-ic) { display: inline; }
  .tab.is-on { flex: 0 0 48px; padding: 0 16px; }
  .fab { order: -1; flex: 0 0 48px; width: 100%; height: 48px; border-radius: 16px; margin: 0 0 14px; transform: none; box-shadow: var(--glow); }
  .fab:active { transform: scale(.98); }
  /* บนมือถือปุ่มนี้เป็นวงกลม หมุน 45° แล้ว + กลายเป็น ✕ สวยดี
     แต่บนคอมมันเป็นแท่งยาวเต็มความกว้างของแถบซ้าย พอหมุนเลยกลายเป็นแถบทแยงพาดทับโลโก้ */
  body.sheet-open .fab { transform: none; }

  .shell { margin-left: var(--rail-space); }
  .top { padding: 22px 40px 12px; }
  .top-row { max-width: 1520px; margin: 0 auto; }
  .top-title h1 { font-size: 30px; }
  .top.is-home .top-title h1 { font-size: 24px; }
  /* เนื้อหาอยู่กลางพื้นที่ที่เหลือจากราง และกางเต็มความกว้างด้วยหลายคอลัมน์ — ไม่เหลือขอบขวาว่าง */
  main { padding: 10px 40px 60px; max-width: 1600px; margin: 0 auto; }
  .toast { bottom: 28px; left: calc(var(--rail-space) + (100vw - var(--rail-space)) / 2); }
  .cheer { bottom: 110px; }

  .view-desk { max-width: none; }
  .desk-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 28px; align-items: start; }
  .desk-col { display: block; min-width: 0; }
  .desk-col > .desk-block:first-child > .section-title:first-child { margin-top: 6px; }
  .action-grid { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
  /* การ์ดชวนบนคอม: แบนเนอร์แนวนอนเรียงลงทีละใบ ไม่ปัด ไม่วางคู่ขนาดเท่ากัน */
  .hero-wrap { margin: 0; }
  .hero-track { display: flex; flex-direction: column; gap: 10px; padding: 0 0 6px; overflow: visible; }
  .hero-track .hero, .hero-track:has(.hero + .hero) .hero { flex: none; }
  .hero-dots { display: none; }
  .hero-card { align-items: center; }
  .hero-card .hero-text { flex-direction: row; align-items: center; gap: 14px; }
  .hero-card .hero-copy { flex: 1; min-width: 0; }
  .hscroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); overflow: visible; margin: 0; padding: 0 0 6px; }
  .hscroll .file-tile { flex: none; }

  .view-calendar { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto 1fr; grid-template-areas: "main today" "main side"; column-gap: 28px; row-gap: 0; align-items: start; }
  .view-calendar .pane-main  { grid-area: main; }
  .view-calendar .pane-today { grid-area: today; order: 0; margin: 0; }
  .view-calendar .pane-side  { grid-area: side; margin-top: 14px; }
  .view-calendar .pane-side .section-title:first-child { margin-top: 0; }
  .cal-grid { --cal-pad: 6px; }
  .cal-day { min-height: 92px; font-size: 14px; padding: 6px var(--cal-pad) 4px; gap: 4px; border-radius: 14px; }
  .cal-num { width: 28px; height: 28px; }
  .cal-chip { height: 16px; padding: 0 5px; font-size: 11.5px; line-height: 16px; }
  .cal-chip.is-two { max-height: 32px; }
  .cal-more { font-size: 11px; line-height: 14px; }
  .cal-money { font-size: 11px; text-align: left; }

  .view-inbox { max-width: 760px; margin: 0 auto; }
  /* เงิน · ตั้งค่า: ไหลเป็น 2 คอลัมน์ การ์ดไม่ถูกตัดกลาง หัวข้อติดกับการ์ดของมัน · แถวชิป/ตัวเลข/โปรไฟล์กางเต็ม */
  .view-money, .view-system { column-count: 2; column-gap: 28px; }
  .view-money > *, .view-system > * { break-inside: avoid; }
  .view-money > .section-title, .view-system > .section-title { break-after: avoid; }
  .view-money > .chips, .view-money > .stat-row, .view-system > .profile-card { column-span: all; }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
  .stat-value { font-size: 28px; }

  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, calc(100vw - 48px)); max-height: 86vh; transform: translate(-50%, -50%); border-radius: 24px; padding-bottom: 0; animation: sheet-pop .28s var(--ease-out); }
  @keyframes sheet-pop { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
  .sheet-grip { display: none; }
  .sheet-head { touch-action: auto; }
  .sheet-head { padding-top: 18px; }
  .sheet-body { padding-bottom: 24px; }
  .drop-bar { left: var(--rail-space); }
}

/* ── คำสั่งของเมมโม่ (หน้าตั้งค่า) — ตัวอย่างเป็นบับเบิลแชทเขียว แตะเพื่อคัดลอก ── */
.cmd-intro { display: flex; align-items: center; gap: 12px; padding: 2px 4px 12px; }
.cmd-intro .mascot.sm { width: 64px; height: 64px; flex: none; }
.cmd-intro b { font-family: var(--font-label); font-size: 16px; }
.cmd-card { margin-bottom: 12px; padding: 14px; }
.cmd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cmd-head .sticker { width: 40px; height: 40px; flex: none; }
.cmd-title { font-family: var(--font-label); font-weight: 600; font-size: 15px; }
.cmd-list { display: flex; flex-direction: column; gap: 8px; }
.cmd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.cmd:active .cmd-bubble { transform: scale(.98); }
.cmd-bubble { max-width: 100%; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: #06C755; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.4; box-shadow: var(--shadow); transition: transform .12s var(--ease-out); }
.cmd-desc { font-size: 12.5px; color: var(--muted); padding-left: 4px; line-height: 1.4; }

/* ── โรงละครแชท: จอเดียวบนหัวหน้าคำสั่ง วนเล่นเองเหมือนคลิป ────────── */
.demo-stage { margin: 0 0 18px; }
.demo-phone { background: var(--surface-2); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, var(--shadow); }
.demo-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line-2); }
.demo-bar .mascot.sm { width: 26px; height: 26px; flex: none; }
.demo-bar b { font-family: var(--font-label); font-size: 14px; }
/* คำบรรยายว่ากำลังดูเรื่องอะไร — ชิดขวา ไม่แย่งที่ชื่อ */
.demo-caption { margin-left: auto; font-size: 11.5px; color: var(--muted); text-align: right; line-height: 1.3; }

/* ความสูงพอดีบทที่ยาวที่สุด แล้วดันเนื้อหาลงล่างเหมือนแชทจริง
   ตายตัวไว้ ไม่งั้นจอยืดหดทุกครั้งที่เปลี่ยนเรื่องแล้วหน้ากระตุกทั้งหน้า */
/* ความสูงจริงมาจาก fitScreen() ตอนเปิดหน้า — ตัวเลขนี้คือค่าเผื่อไว้ก่อนวัดเสร็จ
   จัดกลางแทนชิดล่าง: ฉากสั้นจะได้ไม่ทิ้งรูโหว่ไว้ครึ่งจอเหมือนเดิม */
.demo-screen { height: 250px; padding: 12px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.demo-chat { display: flex; flex-direction: column; gap: 8px; }
/* flex:none — การ์ดมี overflow:hidden ทำให้ขนาดต่ำสุดเป็น 0 ถ้าไม่กำหนด
   ฉากที่ยาวเกินจะโดนบีบจนเนื้อหาหาย แทนที่จะล้นออกมาให้เห็นว่าผิด */
.demo-chat > * { animation: demo-in .34s cubic-bezier(.2,.8,.3,1) both; flex: none; }
@keyframes demo-in { from { opacity: 0; transform: translateY(8px); } }

/* แถบควบคุมใต้จอ: ‹ จุดบอกตำแหน่ง › */
.demo-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.demo-arrow { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: none;
  color: var(--muted); display: grid; place-items: center; cursor: pointer;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out); }
.demo-arrow .ic { width: 20px; height: 20px; }
.demo-arrow:active { background: var(--surface-2); color: var(--ink); }
@media (hover: hover) { .demo-arrow:hover { background: var(--surface-2); color: var(--ink); } }

/* จุดบอกว่ามีกี่เรื่อง เล่นถึงไหนแล้ว */
.demo-dots { display: flex; justify-content: center; gap: 5px; }
.demo-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line); transition: background-color .3s var(--ease-out), transform .3s var(--ease-out); }
.demo-dot.on { background: var(--brand-deep); transform: scale(1.5); }

/* ช่องพิมพ์ระหว่างที่ตัวอักษรไหลออกมาทีละตัว */
.demo-typing { align-self: flex-end; max-width: 84%; padding: 8px 13px; border-radius: 16px;
  background: var(--surface); border: 1px dashed var(--line); color: var(--ink-2); font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.demo-caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px;
  background: var(--brand-deep); animation: demo-blink .9s steps(1) infinite; }
@keyframes demo-blink { 50% { opacity: 0; } }

/* ฟองที่ส่งออกไป — เขียวแบบไลน์ ให้คนจำได้ว่านี่คือแชท */
.demo-me { align-self: flex-end; max-width: 84%; padding: 8px 13px; border-radius: 16px 16px 4px 16px;
  background: #06C755; color: #fff; font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.demo-file { display: flex; align-items: center; gap: 9px; }
.demo-fkind { flex: none; font-family: var(--font-label); font-weight: 600; font-size: 10.5px;
  background: rgba(255,255,255,.25); border-radius: 5px; padding: 3px 7px; }

/* เมมโม่กำลังคิด */
.demo-think { align-self: flex-start; display: flex; gap: 4px; padding: 11px 14px; background: var(--surface); border-radius: 16px 16px 16px 4px; }
.demo-think span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: demo-pulse 1.1s ease-in-out infinite; }
.demo-think span:nth-child(2) { animation-delay: .16s; }
.demo-think span:nth-child(3) { animation-delay: .32s; }
@keyframes demo-pulse { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

/* การ์ดตอบกลับ — หน้าตาเดียวกับการ์ดจริงในแชท */
.demo-card { align-self: flex-start; width: 92%; background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.demo-chead { font-family: var(--font-label); font-weight: 600; font-size: 13px; padding: 9px 13px; background: var(--surface-2); color: var(--ink); }
/* แถบหัวการ์ด: พื้นกับตัวหนังสือมาเป็นคู่ที่ตัดกันเกิน 4.5:1 ทั้งสองโหมด
   (ขาวบน --ok โหมดสว่างได้ 3.42:1 · โหมดมืด 2.33:1 — อ่านไม่ออกทั้งคู่)
   โหมดมืดใช้พื้นสดตัวหนังสือเข้ม ซึ่งเป็นวิธีที่ได้ทั้งสีสดและอ่านออก */
.demo-chead { display: flex; align-items: center; gap: 6px; }
.demo-chead .sticker { width: 16px; height: 16px; flex: none; }
.demo-chead.amber { background: var(--sun); color: var(--sun-ink); }
.demo-chead.green { background: var(--band-ok); color: var(--band-ok-ink); }
.demo-chead.blue  { background: var(--band-cal); color: var(--band-cal-ink); }
.demo-cbody { padding: 10px 13px 12px; }
.demo-ctitle { font-family: var(--font-label); font-weight: 600; font-size: 14.5px; line-height: 1.45; }
.demo-crow { display: flex; gap: 10px; font-size: 12.5px; margin-top: 4px; }
.demo-crow span:first-child { flex: 0 0 40%; color: var(--muted); }
.demo-crow span:last-child { flex: 1; color: var(--ink-2); }
.demo-cbtns { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 11px 11px; }
.demo-cbtn { font-family: var(--font-label); font-weight: 600; font-size: 11.5px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }

/* คำสั่งที่กระโดดไปเล่นบนจอได้ — บอกด้วยสีพื้น ไม่ต้องมีป้ายมาเกาะทุกแถว */
.cmd.has-demo .cmd-bubble { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .demo-chat > *, .demo-think span, .demo-caret, .demo-dot { animation: none; transition: none; }
}

/* ── ทำไมต้องเมมโม่ (หัวหน้าแพลน) ── */
.why-card { padding: 16px; margin-bottom: 14px; background: var(--tint-day); }
.why-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.why-head .mascot.sm { width: 56px; height: 56px; flex: none; }
.why-title { font-family: var(--font-label); font-weight: 600; font-size: 16px; }
.why-list { display: flex; flex-direction: column; gap: 10px; }
.why-row { display: flex; align-items: flex-start; gap: 10px; }
.why-row .sticker { width: 36px; height: 36px; flex: none; }
.why-row b { font-size: 14px; }
.why-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--brand-text); font-weight: 600; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   ── คอม (≥ 900px): แอปเดสก์ท็อปจริง ไม่ใช่มือถือขยาย ──

   เจ้าของดูรูป 216 แล้วบอกว่า "pc มันเหมือน mobile มากไป" — ถูกต้อง: ทุกอย่างข้างบนถูกออกแบบ
   สำหรับนิ้วบนจอ 390px (ปุ่มเม็ดยา 46px · การ์ดมุมโค้ง 22px · ชิป 36px · เงาลอย · แผ่นเลื่อนจากขอบล่าง)
   พอกางบนจอ 1440px มันกลายเป็นของเล่นชิ้นใหญ่ ไม่ใช่เครื่องมือทำงาน

   หลักของชั้นนี้ (ทับกฎข้างบนทั้งหมด — อยู่ท้ายไฟล์จึงชนะที่ความจำเพาะเท่ากัน):
     1. เมาส์ไม่ต้องการที่กด 46px — ปุ่ม 36 · แถว 48 · ชิป 32 · ไอคอน 36 · มุมโค้ง 10–14px
     2. เงาลอยเป็นของมือถือ · บนคอมการ์ดใช้เส้นขอบบาง ๆ แทน (นิ่ง อ่านง่าย วางเรียงกันได้เยอะ)
     3. ตัวหนังสือ 14px (มือถือ 15) · หัวข้อเล็กลง · ช่องว่างแน่นขึ้น — จอกว้างเห็นของได้มากขึ้น ไม่ใช่ใหญ่ขึ้น
     4. ไม่มี "แผ่นเลื่อน": รายละเอียด/ฟอร์ม = dialog กลางจอแบบทึบ · จดด่วน = ช่องบนหัวหน้าจอ (กด N)
     5. ปฏิทิน = ตารางเดือนจริง (ช่องมีเส้น เต็มความสูงจอ รายการเป็นแถบสี) · ไฟล์ = รายการแถว ไม่ใช่ไทล์
   มือถือไม่โดนแตะเลย — ทุกกฎอยู่ใน media query นี้ (เจ้าของบอกว่ามือถือโอเคแล้ว)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  :root { --radius: 18px; --radius-sm: 12px; --pad: 24px; --tap: 36px; --rail-w: 240px; --rail-space: var(--rail-w);
          --shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent), 0 1px 2px rgba(16, 24, 40, .04);
          --shadow-sm: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
          --shadow-lg: 0 28px 64px -24px rgba(16, 24, 40, .35), 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
  html, body { font-size: 14px; line-height: 1.5; }

  /* ── รางซ้าย ── */
  .tabs { padding: 16px 12px 14px; gap: 2px; }
  .tabs-brand { font-size: 20px; padding: 2px 10px 14px; display: flex; align-items: center; gap: 8px; }
  .tabs-brand .mascot { width: 34px; height: 34px; flex: none; animation: none; }
  .tab, .tab.is-on { flex: 0 0 40px; flex-direction: row; padding: 0 10px; border-radius: 12px; font-size: 14px; font-weight: 500; gap: 10px; animation: none; }
  .tab .tab-ic, .tab.is-on .tab-ic { width: 28px; height: 28px; border-radius: 8px; animation: none; }
  .tab .ic { width: 20px; height: 20px; }
  .tab.is-on { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
  .tab.is-on .tab-ic { background: none; }
  @media (hover: hover) { .tab:not(.is-on):hover { background: var(--surface-2); color: var(--ink); } }
  .fab, body.sheet-open .fab {
    order: -1; flex: 0 0 40px; width: 100%; height: 40px; margin: 0 0 12px; border-radius: 999px;
    display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 12px;
    box-shadow: none; transform: none; font-family: var(--font-label); font-size: 13.5px; font-weight: 600; line-height: 1.3;
  }
  .fab .ic { width: 18px; height: 18px; stroke-width: 2.4; }
  .fab-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fab-key, .fab-label { display: inline; }
  .fab-key { font-family: var(--font-label); font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, .16); color: inherit; }
  @media (hover: hover) { .fab:hover { background: var(--brand-deep); } }
  .tabs-user {
    margin-top: auto; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px;
    border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left;
  }
  @media (hover: hover) { .tabs-user:hover { background: var(--surface-2); } }
  .tabs-user-ava { flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--brand-soft); display: grid; place-items: center; }
  .tabs-user-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tabs-user-ava .mascot.sm { width: 28px; height: 28px; animation: none; color: var(--ink); }
  .tabs-user-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .tabs-user-text b { font-family: var(--font-label); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabs-user-text small { font-size: 11.5px; color: var(--muted); }

  /* ── หัวหน้าจอ: ชื่อหน้า · ช่องจดด่วน · กระดิ่ง/โหลดใหม่ ── */
  .top { padding: 14px 32px 10px; }
  .top-row { max-width: 1520px; gap: 10px; min-height: 40px; }
  .top-title { flex: 0 1 auto; min-width: 140px; max-width: 34%; }
  .top-title h1, .top.is-home .top-title h1 { font-size: 26px; letter-spacing: -.025em; }
  .top-sub { font-size: 12px; }
  .avatar { width: 36px; height: 36px; flex-basis: 36px; }
  .avatar .mascot.sm { width: 32px; height: 32px; }
  .icon-btn { width: 36px; height: 36px; flex-basis: 36px; box-shadow: var(--shadow-sm); border: 0; background: var(--surface); }
  .icon-btn > .ic-sticker { width: 20px; height: 20px; }
  @media (hover: hover) { .icon-btn:hover { background: var(--surface-2); } }
  .badge-n { min-width: 17px; height: 17px; line-height: 17px; font-size: 10.5px; }
  .top-quick { position: relative; flex: 1 1 auto; max-width: 620px; margin: 0 auto; }
  .top-quick .quick { gap: 6px; }
  .top-quick .quick-input { height: 38px; padding: 0 14px 0 38px; border-radius: 999px; box-shadow: var(--shadow-sm); background: var(--surface); font-size: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646A75' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h9l4 4v14H6z'/><path d='M15 3v4h4M9 12h6M9 16h6'/></svg>");
    background-repeat: no-repeat; background-position: 12px center; background-size: 18px 18px; }
  .top-quick .quick-input:focus { outline: none; box-shadow: var(--shadow-sm), 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
  .top-quick .quick-go { width: 38px; height: 38px; flex-basis: 38px; border-radius: 50%; box-shadow: none; }
  .quick-pop { position: absolute; left: 0; right: 44px; top: calc(100% + 6px); z-index: 25; padding: 12px 14px 8px; border-radius: 12px;
    background: var(--surface); box-shadow: var(--shadow-lg); animation: rise .18s var(--ease-out); }
  .quick-pop-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
  .quick-pop .chips { padding-bottom: 2px; }
  #quick-dock:not([hidden]) { display: none; }

  main { padding: 6px 32px 48px; max-width: 1560px; }
  .view { animation: none; }

  /* ── ความหนาแน่นของชิ้นส่วนพื้นฐาน ── */
  .section-title { font-size: 14.5px; margin: 20px 2px 8px; }
  .section-title:first-child { margin-top: 4px; }
  .section-count { min-width: 20px; height: 20px; line-height: 20px; font-size: 11.5px; }
  .section-link { font-size: 12.5px; min-height: 32px; padding: 4px 2px; }
  .card { border-radius: 16px; margin-bottom: 12px; }
  .card-body { padding: 14px 16px; }
  .card-head { padding: 10px 14px; font-size: 13px; }
  .row { min-height: 46px; padding: 8px 14px; gap: 10px; }
  .row + .row::before { left: 14px; }
  .row:has(> .row-mark) + .row:has(> .row-mark)::before { left: 56px; }
  .row-mark { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
  .row-mark .ic { width: 16px; height: 16px; }
  .row-mark .ic-sticker { width: 22px; height: 22px; }
  .row-title { font-size: 14px; }
  .row-meta { font-size: 12px; }
  .row-side { font-size: 13.5px; }
  .row-day { padding: 12px 14px 2px; font-size: 11.5px; }
  .setting-row .row-title { font-size: 14px; }
  .btn { min-height: 36px; padding: 4px 16px; font-size: 13.5px; border-radius: 999px; gap: 6px; }
  .btn .ic { width: 16px; height: 16px; flex-basis: 16px; }
  .btn-pill { min-height: 34px; padding: 0 14px; font-size: 13px; border-radius: 999px; }
  .btn-sm { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
  .btn-grid { gap: 6px; }
  .btn-grid .btn { font-size: 13px; }
  .chip { height: 32px; padding: 0 11px; font-size: 12.5px; box-shadow: none; gap: 5px; }
  .chip .ic-sticker { width: 16px; height: 16px; }
  .chips { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; padding: 0 0 8px; gap: 6px; }
  .tag, .pill { font-size: 11px; }
  .search-pill { height: 38px; padding: 0 14px; border-radius: 999px; box-shadow: var(--shadow-sm); border: 0; font-size: 13.5px; margin: 2px 0 14px; max-width: 520px; }
  .search-pill .ic-sticker { width: 18px; height: 18px; }
  .search-input { height: 38px; min-height: 38px; border-radius: 999px; box-shadow: var(--shadow-sm); border: 0; font-size: 13.5px; }
  .field { margin-bottom: 12px; }
  .field label { font-size: 12px; margin-bottom: 4px; }
  .field input, .field select, .field textarea, .field-input { min-height: 38px; padding: 7px 12px; border-radius: 10px; }
  .field textarea { min-height: 84px; }
  .field-hint { font-size: 12px; }
  .switch .grow { font-size: 14px; }
  /* คอม: รางเล็กลง 38×22 ลูกกลม 18 · พื้นที่กดยังสูง 44 ด้วย ::after */
  input[type="checkbox"].toggle, .switch input[type="checkbox"] { width: 38px; height: 22px; flex-basis: 38px; border-radius: 11px; }
  .switch input[type="checkbox"]::before { top: 2px; width: 18px; height: 18px; }
  .switch input[type="checkbox"]::after { top: -11px; bottom: -11px; }
  .switch input[type="checkbox"]:checked::before { transform: translateX(16px); }
  .empty { padding: 22px 16px 20px; font-size: 13px; }
  .empty b { font-size: 14.5px; }
  .empty .mascot { width: 72px; height: 72px; }
  .empty .empty-art { width: 84px; height: 84px; }
  .stat { padding: 14px 16px 12px; border-radius: 16px; }
  .stat-value { font-size: 24px; }
  .stat-label { font-size: 11.5px; }
  .lightbox .lightbox-close { top: 16px; right: 16px; }
  .toast { bottom: 24px; border-radius: 999px; font-size: 13px; padding: 9px 16px; }
  .cheer { bottom: 80px; }

  /* ── หน้าหลัก: แบนเนอร์เตี้ยลง · ทางลัดเป็นปุ่มแนวนอน · ไฟล์ล่าสุดเป็นรายการ ── */
  .desk-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 24px; }
  .hero { min-height: 0; padding: 12px 12px 12px 16px; border-radius: 18px; }
  .hero-card .hero-title { font-size: 15.5px; margin: 0; }
  .hero-card .hero-sub { font-size: 13px; margin: 2px 0 0; max-width: none; }
  .hero-card .hero-ic { width: 38px; height: 38px; border-radius: 12px; }
  .hero-card .hero-ic .sticker { width: 24px; height: 24px; }
  .hero .btn-pill { min-height: 32px; padding: 0 14px; font-size: 13px; }
  .hero-card .hero-mascot { width: 60px; height: 60px; margin: -8px 0; }
  .hero-sky { min-height: 0; padding: 18px 20px 16px; border-radius: 24px; }
  .hero-sky .hero-mascot { width: 104px; height: 104px; }
  .hero-sky .hero-title { max-width: calc(100% - 104px); }
  .sky-num { font-size: 56px; }
  .action-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
  .action-tile { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; text-align: left; animation: none; }
  .action-tile:active { transform: none; }
  @media (hover: hover) { .action-tile:hover, .file-tile:hover { background: var(--surface-2); } }
  .action-ic { width: 34px; height: 34px; border-radius: 9px; flex: none; }
  .action-ic .sticker { width: 24px; height: 24px; }
  .action-label { font-size: 13px; text-align: left; }

  /* ── ไฟล์: รายการแถว (ไอคอน · ชื่อ · ขนาด/ชนิด) แทนไทล์ ── */
  .file-grid, .hscroll { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; overflow: hidden;
    background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); }
  .file-grid > .file-tile, .hscroll > .file-tile {
    flex: none; width: auto; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 8px 14px; border-radius: 0; border-bottom: 1px solid var(--line-2); box-shadow: none; text-align: left; min-height: 48px;
  }
  .file-grid > .file-tile:last-child, .hscroll > .file-tile:last-child { border-bottom: 0; }
  .file-tile .file-icon { width: 34px; height: 34px; border-radius: 9px; }
  .file-tile .file-icon .ic { width: 18px; height: 18px; }
  .file-icon .ic-sticker { width: 22px; height: 22px; }
  .file-tile .file-name { font-size: 14px; -webkit-line-clamp: 1; }
  .file-tile .file-meta { margin-top: 0; font-size: 12px; white-space: nowrap; }
  .file-tile.is-star { padding-right: 34px; }
  .file-tile.is-star .file-star { top: 50%; right: 12px; transform: translateY(-50%); }
  .file-icon.big { width: 64px; height: 64px; border-radius: 16px; margin: 2px auto 12px; }
  .banner { border-radius: 10px; }

  /* ── ปฏิทิน: ตารางเดือนจริง — เส้นแบ่งช่อง เต็มความสูงจอ รายการเป็นแถบสีในช่อง ── */
  .view-calendar { grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 340px); column-gap: 24px; }
  .view-calendar .pane-main { padding: 12px 14px 12px; border-radius: 18px; margin-bottom: 0; }
  .cal-bar { margin-bottom: 8px; gap: 4px; flex-wrap: wrap; row-gap: 6px; }
  .cal-month { font-size: 17px; min-height: 34px; text-align: left; padding-left: 2px; order: -1; white-space: nowrap; }
  .cal-nav { width: 32px; height: 32px; flex-basis: 32px; }
  .cal-today { display: inline-flex; margin-left: 6px; white-space: nowrap; }
  .cal-dow { font-size: 11.5px; padding: 0 0 4px; }
  .cal-dow > div { text-align: right; padding-right: 8px; }
  .cal-grid { --cal-gap: 1px; --cal-pad: 6px; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden;
    grid-auto-rows: minmax(96px, 1fr); min-height: calc(100dvh - 232px); }
  .cal-day { min-height: 0; border-radius: 0; background: var(--surface); padding: 5px var(--cal-pad) 4px; gap: 3px; font-size: 13px; }
  .cal-day.is-out { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
  .cal-num { width: 24px; height: 24px; font-size: 12.5px; align-self: flex-end; margin: 0; }
  .cal-day.is-sel { box-shadow: inset 0 0 0 2px var(--brand); }
  .cal-day.is-sel .cal-num { background: var(--brand); color: var(--brand-ink); }
  @media (hover: hover) { .cal-day:hover { background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface)); } .cal-day:not(.is-today):not(.is-sel):hover .cal-num { background: transparent; } }
  .cal-chip { height: 17px; padding: 0 6px; font-size: 12px; line-height: 17px; }
  .cal-chip.is-two { max-height: 34px; }
  .cal-more { font-size: 11px; text-align: left; padding-left: 4px; }
  .cal-money { font-size: 11px; text-align: right; margin-top: auto; padding: 2px 2px 0; }
  .legend { margin: 10px 0 0; gap: 4px; font-size: 11px; }
  .legend span { padding: 2px 8px; box-shadow: none; background: var(--surface-2); }
  .day-head { margin-bottom: 8px; }
  .day-date { font-size: 14px; }
  .day-panel .card { margin-bottom: 8px; }
  .day-empty { padding: 12px 10px 12px 14px; }
  .day-empty b { font-size: 14.5px; }
  .day-empty p { font-size: 12.5px; }
  .day-empty .mascot.sm { width: 52px; height: 52px; }
  .day-money { font-size: 12.5px; margin-bottom: 8px; }

  /* ── เงิน · ตั้งค่า ── */
  .view-money, .view-system { column-gap: 24px; }
  .stat-row { gap: 10px; margin-bottom: 12px; }
  .profile-card .card-body { padding: 14px 16px; }
  .price-card { border-radius: 16px; }
  .upgrade-hero { border-radius: 20px; }
  .step-card { border-radius: 18px; }

  /* ── Dialog กลางจอแทนแผ่นเลื่อน: ทึบ มีเส้นขอบ หัวแยกชัด เนื้อเลื่อนข้างใน ── */
  .sheet-veil { background: rgba(20, 22, 27, .42); }
  .sheet, .sheet-wrap .sheet {
    width: min(620px, calc(100vw - 64px)); max-height: min(86vh, 900px); border-radius: 22px;
    background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: var(--shadow-lg); animation: sheet-pop .2s var(--ease-out);
  }
  .sheet-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--line-2); gap: 12px; }
  .sheet-head h2 { font-size: 16.5px; }
  .sheet-head .icon-btn { width: 32px; height: 32px; flex-basis: 32px; border: 0; background: var(--surface-2); }
  .sheet-body { padding: 16px 20px 22px; }
  .sheet-lead .mascot.sm { width: 40px; height: 40px; }
  /* ในกล่องกลางจอ เนื้อวางบนพื้นกล่องตรงๆ ไม่ซ้อนกล่องในกล่อง */
  .sheet .card:not(.why-card) { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .sheet .card:not(.why-card) > .card-body { padding: 4px 0; }
  .quick-input { height: 40px; border-radius: 999px; }
  .quick-go { width: 40px; height: 40px; flex-basis: 40px; border-radius: 50%; box-shadow: none; }
  .drop-bar { left: var(--rail-space); }
}

/* จอกว้างมาก: ปฏิทินให้แผงขวากว้างขึ้นนิด · หน้าหลักสองคอลัมน์เท่ากัน */
@media (min-width: 1400px) {
  .view-calendar { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 28px; }
  .desk-grid { column-gap: 28px; }
  main { padding-left: 40px; padding-right: 40px; }
  .top { padding-left: 40px; padding-right: 40px; }
}

/* มือถือ: ของที่มีไว้เฉพาะคอมต้องไม่โผล่ */
@media (max-width: 899.98px) {
  .fab-label, .fab-key, .cal-today, .tabs-user, .top-quick { display: none !important; }
}

/* ── หน้า "กลุ่ม" (โหมดกลุ่ม): ตารางทีมเป็นตารางจริง ── */
.team-grid { display: block; }
.team-table-card { padding: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.team-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.team-table th, .team-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); vertical-align: top; text-align: left; }
.team-table th:last-child, .team-table td:last-child { border-right: 0; }
.team-table thead th { font-family: var(--font-label); font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); white-space: nowrap; }
.team-table tbody tr:last-child td { border-bottom: 0; }
.team-table .td-day { font-family: var(--font-label); font-weight: 600; white-space: nowrap; color: var(--ink); background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); width: 1%; }
.team-table tr.is-today .td-day { background: var(--sun-soft); color: var(--sun-text); }
.team-table .td-time { font-family: var(--font-label); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; width: 1%; }
.team-table .td-title { min-width: 140px; }
.team-table .td-title { display: flex; align-items: flex-start; gap: 6px; }
.team-table .td-main { flex: 1 1 auto; min-width: 0; }
.team-table .td-title .tick { flex: none; margin: -2px 0 0 auto; }
.team-table .td-loc { display: block; font-size: 12px; color: var(--muted); }
.team-table .td-who-inline { display: none; font-size: 12px; color: var(--ink-2); }
.team-table .td-end { white-space: nowrap; }
.team-table .td-who { white-space: nowrap; color: var(--ink-2); font-size: 12.5px; width: 1%; }
.team-table tr.is-free td { color: var(--muted); }
.team-table tr.is-done .td-title { text-decoration: line-through; color: var(--muted); }
.tick { width: 28px; height: 28px; margin-left: 6px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); color: transparent; display: inline-grid; place-items: center; vertical-align: middle; padding: 0; }
.tick .ic { width: 16px; height: 16px; }
.tick.is-on { background: var(--ok); border-color: var(--ok); color: #fff; }
/* ปุ่มติ๊กในตาราง — สูงพอนิ้วกด (audit นับ ::after ที่กางออก) */
.tick { position: relative; }
.tick::after { content: ""; position: absolute; inset: -4px; }
.row .tick { margin-left: auto; }
@media (min-width: 900px) {
  .team-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); column-gap: 24px; align-items: start; }
  .team-main .section-title:first-child, .team-side .section-title:first-child { margin-top: 4px; }
  .team-table { font-size: 13px; }
}
/* มือถือ: ตารางทีมต้องพอดีจอ 390px — ซ่อนเดือนในช่องวัน ลดช่องไฟ */
@media (max-width: 899.98px) {
  .team-table { font-size: 12.5px; }
  .team-table th, .team-table td { padding: 7px 7px; }
  .team-table .td-day small { display: none; }
  /* มือถือ: ไม่มีที่พอสี่คอลัมน์ — คอลัมน์ "ใคร" ซ่อน แล้วโชว์ชื่อใต้รายการแทน · เวลาเลิกขึ้นบรรทัดใหม่ */
  .team-table th:last-child, .team-table .td-who { display: none; }
  .team-table th:nth-child(3), .team-table .td-title { border-right: 0; }
  .team-table .td-who-inline { display: block; }
  .team-table .td-end { display: block; }
  .team-table .td-title { min-width: 0; }
  .tick { width: 26px; height: 26px; margin-left: 4px; }
}

/* ── โหมดกลุ่ม: แถบล่าง/รางซ้ายสลับเป็นชุดของกลุ่ม · กระดิ่ง (กล่องข้อความส่วนตัว) ซ่อน ── */
.tab-group { display: none; }
body[data-mode="group"] .tab:not(.tab-group) { display: none; }
body[data-mode="group"] .tab-group { display: flex; }
body[data-mode="group"] #btn-bell { display: none; }
/* ป้ายบอกว่ากำลังอยู่ในกลุ่ม — หัวหน้าจอ */
.mode-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c-group) 16%, var(--surface)); color: var(--c-group); font-family: var(--font-label); font-size: 11.5px; font-weight: 600; vertical-align: middle; margin-right: 6px; }
/* หน้ากลุ่ม: ท้องฟ้าผืนเดียวกับหน้าหลัก · ชื่อกลุ่มบนฟ้าลึก · ตัวเลขสี่ช่องเป็นกระจกบนขอบฟ้า ไม่มีสีประจำหมวดบนตัวเลข */
.group-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 18px 18px 16px; margin-bottom: 18px; border-radius: 28px; background: var(--sky); color: var(--sky-ink); box-shadow: var(--shadow-sky); }
.group-hero .hero-mascot { position: absolute; top: 4px; right: 8px; width: 96px; height: 96px; margin: 0; color: #0B1220; }
.group-name { margin: 2px 0 0; max-width: calc(100% - 104px); font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; color: var(--sky-ink); }
.group-sub { margin: 4px 0 20px; max-width: calc(100% - 104px); font-size: 14px; color: var(--sky-ink-2); }
.group-hero .sky-tile { min-height: 64px; }
.member-status { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.member-status.office { background: var(--t-mint); color: var(--ok); }
.member-status.wfh { background: var(--t-sky); color: var(--c-cal-text); }
.member-status.out { background: var(--t-amber); color: var(--sun-text); }
.member-status.leave { background: var(--t-coral); color: var(--bad); }
@media (min-width: 900px) {
  .group-hero { padding: 18px 20px 16px; border-radius: 22px; }
  .group-hero .sky-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── โหมดกลุ่ม: ปฏิทินทีม (รูป 233-234 "อยากได้เป็นปฏิทิน · ให้ดูดี") ── */
.tcal { padding: 12px 12px 6px; }
.tcal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.tcal-month { flex: 1; font-family: var(--font-label); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.tcal-legend { display: flex; gap: 4px; }
.tcal-legend span { font-size: 10.5px; line-height: 1.4; padding: 1px 7px; border-radius: 5px; font-weight: 600; }
.tcal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface-2); border-radius: 8px; padding: 4px 0; font-family: var(--font-label); font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; }
.tcal-dow span:first-child { color: var(--bad); }
.tcal-week { --tcal-gap: 2px; --tcal-pad: 2px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--tcal-gap); padding: 4px 0; border-bottom: 1px solid var(--line-2); }
.tcal-week:last-child { border-bottom: 0; }
.tcal-day { min-height: 66px; min-width: 0; border: 0; border-radius: 10px; padding: 3px 2px 4px; background: none; color: var(--ink); display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-family: var(--font-label); text-align: left; }
.tcal-day.is-out { color: var(--muted); }
.tcal-day.is-past .tcal-num { color: var(--muted); }
.tcal-day.is-today { background: var(--sun-soft); }
.tcal-day.is-sel { box-shadow: inset 0 0 0 2px var(--brand); }
@media (hover: hover) { button.tcal-day:not(.is-today):hover { background: var(--surface-2); } }
.tcal-num { width: 24px; height: 24px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.tcal-day.is-today .tcal-num { background: var(--sun); color: var(--sun-ink); font-weight: 600; }
.tcal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tcal-chip { position: relative; display: block; box-sizing: border-box; height: 15px; font-family: var(--font-body); font-size: 10.5px; font-weight: 500; line-height: 15px; padding: 0 4px; border-radius: 4px; overflow: hidden; text-overflow: clip; white-space: nowrap; pointer-events: none; }
/* เรื่องเดียวในวัน = ชื่อยาวได้สองบรรทัด · แถบหลายวันยื่นข้ามช่อง (รูป 276) */
.tcal-chip.is-two { height: auto; max-height: 30px; white-space: normal; overflow-wrap: anywhere; }
.tcal-chip.is-span { z-index: 2; width: calc(var(--span) * 100% + (var(--span) - 1) * (2 * var(--tcal-pad) + var(--tcal-gap))); }
.tcal-chip.is-ghost, .tcal-chip.is-gap { visibility: hidden; }
.tcal-week > .tcal-day:first-child:not(.is-today):not(.is-out) .tcal-num { color: var(--bad); }
.tcal-chip.is-done { text-decoration: line-through; opacity: .75; }
.tcal-more { font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: center; }
.tcal-chip.tk-event, .tcal-chip.tk-reminder, .tcal-legend .tk-event { background: var(--t-sky); color: var(--c-cal-text); }
.tcal-chip.tk-task, .tcal-legend .tk-task { background: var(--t-mint); color: var(--ok); }
.tcal-chip.tk-leave, .tcal-chip.tk-out, .tcal-legend .tk-leave { background: var(--t-amber); color: var(--sun-text); }
/* ตัวเลขสรุปบนหน้ากลุ่ม — สีตามชนิดเดียวกับชิป */

/* รายการของทีม — เวลา · ชื่อ · ใคร · ไม่มีแถบสีข้าง สติกเกอร์บอกชนิดแล้ว */
.agenda { padding: 4px 14px 6px; }
.agenda-day { font-family: var(--font-label); font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 12px 0 2px; }
.agenda-day:first-child { margin-top: 8px; }
.agenda-day.is-today { color: var(--sun-text); }
.agenda-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.agenda-row:last-child { border-bottom: 0; }
.agenda-time { flex: 0 0 58px; font-family: var(--font-label); font-size: 12.5px; color: var(--muted); background: none; padding-top: 2px; }
.agenda-time b { display: block; font-weight: 600; }
.agenda-time.tk-event b, .agenda-time.tk-reminder b { color: var(--c-cal-text); }
.agenda-time.tk-task b { color: var(--ok); }
.agenda-time.tk-leave b, .agenda-time.tk-out b { color: var(--sun-text); }
.agenda-time small { display: block; font-size: 11.5px; color: var(--muted); }
.agenda-main { flex: 1; min-width: 0; }
.agenda-title { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.agenda-meta { font-size: 12px; color: var(--muted); margin-top: 1px; }
.agenda-row.is-done .agenda-title { text-decoration: line-through; color: var(--muted); }
.agenda-row .tick { margin-left: 0; align-self: center; }
.chip.chip-sm { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }

/* สมาชิก — วงกลมตัวอักษรแรก · แถบสรุปสถานะ */
.avatar-ini { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-label); font-weight: 600; font-size: 14px; color: #fff; }
.avatar-ini.lg { width: 40px; height: 40px; font-size: 16px; }
.card-head .avatar-ini { margin-right: 4px; }
.status-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.member-status.none { color: var(--muted); }

/* สถานะว่างแบบเงียบ (โหมดกลุ่ม) — การ์ดขาว มาสคอตเล็ก ไม่ใช่กล่องอำพันใหญ่ */
.card:has(.empty.quiet) { background: var(--surface); box-shadow: var(--shadow); }
.empty.quiet { padding: 22px 16px 20px; }
.empty.quiet .mascot { width: 64px; height: 64px; margin-bottom: 4px; }
.empty.quiet.slim { padding: 16px 14px 14px; }
.empty.quiet.slim .mascot { width: 48px; height: 48px; }
@media (min-width: 900px) {
  .tcal { padding: 14px 16px 8px; }
  .tcal-day { min-height: 78px; }
  .tcal-chip { font-size: 11.5px; line-height: 16px; height: 16px; }
  .tcal-chip.is-two { max-height: 32px; }
  .tcal-num { width: 26px; height: 26px; font-size: 13.5px; }
  .agenda { padding: 6px 18px 8px; }
}

/* ── โหมด "ปี" ของหน้าปฏิทิน (รูป 265): 12 เดือนย่อ + งานสำคัญ ── */
.cal-seg { margin: 0 0 0 6px; padding: 3px; height: 40px; }
.cal-seg .seg-btn { padding: 0 12px; min-width: 48px; min-height: 34px; font-size: 12.5px; }
.year-pane .cal-bar { margin-bottom: 4px; }
.year-stats { margin: 6px 0 12px; }
.year-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ym { border-radius: 18px; background: var(--surface-2); color: inherit; text-align: left; padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.ym.is-now { background: var(--sun-soft); box-shadow: inset 0 0 0 2px var(--sun); }
.ym-head { display: flex; align-items: center; gap: 6px; font-family: var(--font-label); font-size: 13.5px; font-weight: 600; }
.ym-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ym-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ym-grid i { display: block; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ym-grid i.on { background: color-mix(in srgb, var(--c-cal) 55%, transparent); }
.ym-grid i.imp { background: var(--sun-deep); }
.ym-grid i.today { box-shadow: 0 0 0 2px var(--sun); background: var(--sun); }
.imp-row { align-items: center; }
.imp-date { flex: 0 0 40px; text-align: center; line-height: 1.05; font-family: var(--font-label); }
.imp-date b { display: block; font-size: 18px; font-weight: 600; }
.imp-date small { display: block; font-size: 10.5px; color: var(--muted); }
.imp-row.is-late .imp-date b { color: var(--bad); }
.imp-row.is-done .imp-date b { color: var(--muted); }

/* ── โฟกัสของเดือน (รูป 267): การ์ดบนหน้าปี/เดือน · ช่องใต้ตารางเดือนย่อ · แผ่นตั้งโฟกัส ── */
.focus-card { padding: 10px 14px 12px; }
.focus-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-label); font-weight: 600; font-size: 14.5px; }
.focus-head .sticker { width: 22px; height: 22px; }
.focus-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-count { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.focus-body { margin-top: 4px; }
.focus-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 6px 0; border: 0; border-top: 1px solid var(--line-2); background: none; color: inherit; font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.focus-row:first-child { border-top: 0; }
.focus-row:active { opacity: .7; }
/* ช่องติ๊ก: ในการ์ดเป็นแค่เครื่องหมาย (ทั้งแถวคือปุ่ม) · ในแผ่นตั้งโฟกัสเป็นปุ่มเอง จึงต้องสูงพอนิ้ว */
.focus-check { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--line); background: var(--surface); color: #fff; display: inline-grid; place-items: center; }
.focus-check .ic { width: 16px; height: 16px; }
.is-done .focus-check, .focus-check[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); }
.focus-check-btn { flex-basis: 36px; width: 36px; height: 36px; border-radius: 11px; padding: 0; font: inherit; cursor: pointer; }
.focus-check-btn .ic { width: 20px; height: 20px; }
.focus-row.is-done .focus-t, .focus-line.is-done .focus-t, .focus-slot.is-done .focus-input { text-decoration: line-through; color: var(--muted); }
.focus-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-d { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.focus-card.is-empty .focus-head { min-height: 28px; }
/* โหมดเดือน: บรรทัดเดียวใต้ชื่อเดือน */
.focus-strip { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin: 2px 0 6px; padding: 2px 4px 8px; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.focus-strip:active { opacity: .7; }
.focus-strip .sticker { flex: none; width: 20px; height: 20px; }
.focus-strip-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.focus-strip-item b { font-family: var(--font-label); color: var(--sun-text); }
.focus-strip-item.is-done { text-decoration: line-through; color: var(--muted); }
.focus-strip-item.is-empty { color: var(--muted); }
.focus-strip-sep { color: var(--muted); margin: 0 6px; }
.focus-strip-link { flex: none; font-family: var(--font-label); font-size: 13px; font-weight: 600; color: var(--brand-text); }
.focus-n { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); font-family: var(--font-label); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.ym-open, .ym-focus { border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; transition: transform .12s var(--ease-out); }
.ym-open:active, .ym-focus:active { transform: scale(.97); }
.ym-done { font-family: var(--font-label); font-size: 11.5px; font-weight: 600; color: var(--sun-text); font-variant-numeric: tabular-nums; }
.ym-focus { gap: 3px; min-height: 40px; justify-content: center; padding-top: 6px; border-top: 1px dashed var(--line); }
.ym-focus .focus-line { display: flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.35; min-width: 0; width: 100%; }
.ym-focus .focus-n { flex-basis: 16px; width: 16px; height: 16px; font-size: 10px; }
.ym-focus .focus-d { font-size: 10.5px; }
.ym-focus.is-suggest .focus-n { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.ym-focus.is-suggest .focus-t { color: var(--ink-2); }
.ym-tag { font-family: var(--font-label); font-size: 10.5px; font-weight: 600; color: var(--sun-text); }
.ym-focus.is-empty .focus-line { color: var(--muted); }
.ym-focus.is-empty .ic { width: 14px; height: 14px; }
.ym.is-past .ym-head b { color: var(--ink-2); }
/* บนพื้นอำพันของเดือนนี้ สีเทาจางได้แค่ 4.49:1 ในโหมดมืด — ใช้หมึกรองแทน */
.ym.is-now .focus-d, .ym.is-now .focus-line.is-done .focus-t, .ym.is-now .ym-tag, .ym.is-now .ym-focus.is-empty .focus-line { color: var(--ink-2); }
.focus-slots { padding: 4px 0; }
.focus-slot { display: flex; align-items: center; gap: 8px; padding: 6px 12px; }
.focus-slot .focus-input { flex: 1; min-width: 0; }
.focus-slot .focus-n { background: var(--surface-2); color: var(--muted); }
.focus-drop { flex: 0 0 36px; width: 36px; height: 36px; }
.row-mark.k-focus { background: var(--sun-soft); color: var(--sun-text); }
.cal-dot.k-team { background: var(--c-group); }
@media (min-width: 900px) {
  .year-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ym { padding: 12px 12px 10px; }
  .view-calendar .year-pane { grid-area: main; }
}
@media (min-width: 1200px) { .year-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ไอคอนแทนอีโมจิในหน้ากลุ่ม (รูป 249) */
.agenda-title .sticker { width: 20px; height: 20px; vertical-align: -4px; margin-right: 5px; }
.agenda-meta .loc .ic { width: 12px; height: 12px; vertical-align: -1.5px; margin-right: 2px; }
.member-status .sticker { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.row-meta .ic, .field-hint .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }

/* ═══ รางซ้ายย่อ/ขยาย + จอพับ (รูป 306) ═══════════════════════════════════════════
   หุบแล้วต้องยังกดได้ (เจ้าของ: "มันต้องไม่หายหมด ต้องยังกดได้อยู่ตอนหุบ") — หุบ = รางไอคอน 72px ไม่ใช่ซ่อนทั้งแถบ
   ไม่กระตุกตอนกด: ทุกไอคอนในรางวางศูนย์กลางไว้ที่ x = 36px ทั้งตอนเต็ม (240) และตอนหุบ (72 = 2 × 36)
     เมมโม่ 12 + 7 + 17 · ไอคอนแท็บ 12 + 10 + 14 · ไอคอนปุ่ม + 12 + 15 + 9 · รูปผู้ใช้ 12 + 8 + 16
   หุบ = รางแคบลงเฉยๆ ไอคอนอยู่ที่เดิม ชื่อจางหายแล้วโดนขอบรางตัด (ไม่มีอะไรกระโดด)
   ยกเว้นปุ่มย่อ/ขยาย: อยู่ขวาสุดของหัวราง เกาะขอบราง (right) พอรางแคบลงมันไถลตามขอบมาแล้วเลื่อนลง (top) ไปอยู่ใต้เมมโม่
     หัวราง 40px → 84px (เมมโม่ 40 + ช่อง 4 + ปุ่ม 40) · เมมโม่ไม่ขยับ ชื่อ Memo จางหาย
   · จอ ≥ 1200px ราง "ติดจอ": เต็มไว้ก่อน กดแล้วหุบ เนื้อหากว้างขึ้นตาม · จำค่าในเครื่อง (html.rail-mini)
   · จอ 900–1199px (จอพับกางแนวนอน · โน้ตบุ๊กเล็ก): หุบไว้ก่อน · กดแล้วกางทับเนื้อหาพร้อมม่านมืด (html.rail-open)
     เนื้อหาไม่ขยับ · เลือกหน้า แตะม่าน หรือ Esc = หุบกลับ · ไม่จำ
   · เมาส์ชี้ไอคอนในรางหุบ = ป้ายชื่อ (จาก aria-label) · คีย์ [ สลับ
   · --rail-w = ความกว้างตัวราง · --rail-space = ที่ที่รางกินจริง (เนื้อหา toast แถบลากไฟล์ขยับตาม) */
.rail-scrim { display: none; }
@media (min-width: 900px) {
  .tabs-head { position: relative; display: flex; align-items: flex-start; order: -2; height: 40px; margin-bottom: 12px; }
  /* 7px ซ้าย = เมมโม่ 34px อยู่กลาง x 36 · 44px ขวา = เว้นที่ให้ปุ่ม */
  .tabs-head .tabs-brand { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 44px 0 7px; order: 0; }
  .rail-toggle { position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px;
    background: none; color: var(--muted); display: grid; place-items: center; }
  @media (hover: hover) { .rail-toggle:hover { background: var(--surface-2); color: var(--ink); } }
  html.rail-mini .tabs-head { height: 84px; }
  html.rail-mini .rail-toggle { top: 44px; right: 3px; }   /* 3 ไม่ใช่ 4: รางมีเส้นขอบขวา 1px กินที่ข้างใน — ปุ่ม 40px จึงอยู่กลาง x 36 พอดี */
  .fab, body.sheet-open .fab { padding: 0 12px 0 15px; }
  /* ชื่อไม่ตัดบรรทัดตอนรางแคบลง · จางหาย แล้วซ่อนจริง (ชื่อที่ล้นขอบรางต้องไม่รับนิ้ว) */
  .tab > span:not(.tab-ic), .tabs-brand-name, .fab-label, .fab-key, .tabs-user-text { white-space: nowrap; transition: opacity .2s var(--ease-out) .06s, visibility 0s linear 0s; }
  html.rail-mini { --rail-w: 72px; }
  html.rail-mini .tab > span:not(.tab-ic), html.rail-mini .tabs-brand-name, html.rail-mini .fab-label,
  html.rail-mini .fab-key, html.rail-mini .tabs-user-text { opacity: 0; visibility: hidden; transition: opacity .12s var(--ease-out), visibility 0s linear .12s; }
  /* เลื่อนนุ่มเฉพาะตอนกด (app.js ใส่คลาสครู่เดียว) — เปิดแอปหรือหมุนจอไม่เห็นรางวิ่ง · ระหว่างเลื่อนตัดของที่ล้นขอบราง */
  html.rail-moving .tabs { transition: width .32s var(--ease-sheet), box-shadow .32s var(--ease-sheet); overflow: hidden; }
  html.rail-moving .shell { transition: margin-left .32s var(--ease-sheet); }
  html.rail-moving .tabs-head { transition: height .32s var(--ease-sheet); }
  html.rail-moving .rail-toggle { transition: top .32s var(--ease-sheet), right .32s var(--ease-sheet); }
  /* ป้ายชื่อเมื่อเมาส์ชี้: ไอคอนในรางหุบ และปุ่มย่อ/ขยายทุกสถานะ (ปุ่มไม่มีชื่อให้เห็น) */
  @media (hover: hover) {
    html.rail-mini .tab, html.rail-mini .fab, html.rail-mini .tabs-user { position: relative; }
    html.rail-mini .tab::after, html.rail-mini .fab::after, html.rail-mini .tabs-user::after, .rail-toggle::after {
      content: attr(aria-label); position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); z-index: 5;
      padding: 5px 10px; border-radius: 8px; background: var(--ink); color: var(--bg);
      font-family: var(--font-label); font-size: 12.5px; font-weight: 500; line-height: 1.4; white-space: nowrap;
      opacity: 0; pointer-events: none; transition: opacity .15s var(--ease-out);
    }
    html.rail-mini .tab:hover::after, html.rail-mini .fab:hover::after, html.rail-mini .tabs-user:hover::after, .rail-toggle:hover::after { opacity: 1; }
  }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  :root { --rail-space: 72px; }
  html.rail-open .tabs { box-shadow: var(--shadow-lg); border-right-color: transparent; background: color-mix(in srgb, var(--surface) 96%, transparent); }
  .rail-scrim { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(6, 10, 26, .32);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out); }
  html.rail-open .rail-scrim { opacity: 1; pointer-events: auto; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  main { max-width: 760px; margin-inline: auto; }
  .top-row { max-width: calc(760px - 2 * var(--pad)); margin-inline: auto; }
  .tabs { left: max(14px, calc(50% - 300px)); right: max(14px, calc(50% - 300px)); }
  .sheet { left: max(0px, calc(50% - 380px)); right: max(0px, calc(50% - 380px)); }
}
@media (max-width: 379.98px) {
  .cal-month { font-size: 16px; white-space: nowrap; }
  .cal-seg { margin-left: 4px; }
  .cal-seg .seg-btn { min-width: 40px; padding: 0 8px; }
}

/* กล่องข้อความ: ปุ่มบนหัว อ่านทั้งหมด · เคลียร์กล่อง (อยู่แถวเดียวกัน เต็มกว้างเท่ากัน) */
.inbox-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.inbox-actions .btn { flex: 1 1 0; min-width: 0; }

/* ═══ โมชันเล็กๆ ที่ทำให้แอปมีชีวิต (22 ก.ย. 2569) ═══
   กติกา: ของที่เห็นวันละหลายสิบครั้งขยับได้แค่นิดเดียวและเร็ว · ของที่นานๆ เห็น (ติดตั้งครั้งแรก) ค่อยเล่นใหญ่
   ทุกอย่างใช้ transform/opacity · กฎลดการเคลื่อนไหวท้ายไฟล์ปิดให้ทั้งหมด */
/* แถบงบ/สัดส่วน: เติมจากซ้ายตอนหน้าขึ้น (บอกสถานะ) · หลายแถบทยอยกันคนละ 60ms */
.bar-fill { transform-origin: 0 50%; animation: bar-fill .6s var(--ease-out) both; }
@keyframes bar-fill { from { transform: scaleX(0); } }
.bar-line:nth-child(2) .bar-fill { animation-delay: .06s; }
.bar-line:nth-child(3) .bar-fill { animation-delay: .12s; }
.bar-line:nth-child(4) .bar-fill { animation-delay: .18s; }
.bar-line:nth-child(5) .bar-fill { animation-delay: .24s; }
/* เลขบนกระดิ่งเด้งตอนมีข้อความใหม่เข้ามา (app.js setUnread ใส่คลาสให้ตอนเลขเพิ่ม) */
.badge-n.is-bump { animation: badge-bump .32s var(--ease-out); }
@keyframes badge-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* ปฏิทิน: กดเดือนถัดไป/ก่อนหน้า ตารางเลื่อนเข้ามาจากทิศที่ไป (รู้ว่าไปทางไหน) · ทั้งหน้าไม่ต้องลอยขึ้นซ้ำ */
.view.is-still { animation: none; }
.cal-grid.slide-next { animation: cal-next .28s var(--ease-out) both; }
.cal-grid.slide-prev { animation: cal-prev .28s var(--ease-out) both; }
@keyframes cal-next { from { opacity: 0; transform: translateX(20px); } }
@keyframes cal-prev { from { opacity: 0; transform: translateX(-20px); } }
/* ติดตั้งครั้งแรก (เห็นครั้งเดียว = ที่ที่ควรเล่นใหญ่): ภาพหมีซูมเข้าเบาๆ · รายการกับตัวเลือกทยอยขึ้นทีละข้อ */
.is-art .onb-art { animation: art-in .9s var(--ease-out) both; }
@keyframes art-in { from { opacity: 0; transform: scale(1.04); } }
.onb-list .onb-item, .onb-options .onb-option { animation: rise .45s var(--ease-out) both; }
.onb-list .onb-item:nth-child(1), .onb-options .onb-option:nth-child(1) { animation-delay: .14s; }
.onb-list .onb-item:nth-child(2), .onb-options .onb-option:nth-child(2) { animation-delay: .21s; }
.onb-list .onb-item:nth-child(3), .onb-options .onb-option:nth-child(3) { animation-delay: .28s; }
.onb-list .onb-item:nth-child(4), .onb-options .onb-option:nth-child(4) { animation-delay: .35s; }
.onb-list .onb-item:nth-child(5), .onb-options .onb-option:nth-child(5) { animation-delay: .42s; }

/* ผู้ใช้ขอลดการเคลื่อนไหว: ทุกแอนิเมชันและทรานซิชันใน CSS สั้นจนแทบไม่เห็น ชนะกฎที่ selector เจาะจงกว่าด้วย (เช่น sheet-pop บนคอม) · มาสคอต SMIL หยุดด้วย pauseAnimations() ใน app.js */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}