/* TEGH นัดหมาย — Trackado design language โทนสว่างอย่างเดียว (ไม่มีโหมดมืด) · flat · มุมเหลี่ยม · เงาบาง · สีสื่อความหมาย ค่าทั้งหมดวัดจาก app.trackado.com (computed style) — แก้ที่นี่ลามทั้งระบบ */ :root { color-scheme: light; /* ── พื้นหลัง / การ์ด ── */ --canvas: #f5f8fb; --bg-grad-1: #f5f8fb; --bg-grad-2: #f5f8fb; --card-bg: #ffffff; --card-border: #dee1e7; /* ── ตัวอักษร (เข้มกว่า Trackado เล็กน้อย เพื่อให้ภาษาไทยอ่านชัด) ── */ --text: #596679; --text-soft: #7f8ca3; --text-faint: #97a8b6; /* ── สีสื่อความหมาย (Trackado) ── */ --primary: #54c08a; --primary-dark: #46a876; --primary-soft: #e8f6ef; --success: #54c08a; --success-dark: #46a876; --success-soft: #e8f6ef; /* สี "สำเร็จ/พร้อม" แยกจากสีแบรนด์ (--primary) */ --ok-text: #1f7a44; /* ข้อความ "สำเร็จ" บนพื้นอ่อน (คอนทราสต์สูงกว่า --primary) */ --info: #638ca5; --info-dark: #54788e; --info-soft: #eaf0f4; --accent: #6dc6cd; --accent-soft: #e4f5f6; --warn: #e8b71a; --warn-soft: #fcf4d9; --orange: #f46800; --orange-soft: #fde8db; --danger: #c31414; --danger-soft: #fbe4e4; --brown: #7f8ca3; --brown-soft: #f5f8fb; /* ── ช่องกรอก ── */ --field-bg: #f6f7f9; --field-border: #dee1e7; /* ── รูปทรง: Trackado = เหลี่ยม เงาบางเฉียบ ── */ --radius: 0px; --radius-sm: 0px; --radius-btn: 3px; --radius-pill: 999px; --shadow-sm: 0 1px 1px rgba(0,0,0,.05); --shadow: 0 1px 4px rgba(0,0,0,.10); /* ── แถบข้าง + แถบบน (สีเดียวกัน กลืนเป็นผืนเดียว) ── */ --side-w: 300px; --side-bg: #35404f; --side-bg-2: #35404f; --side-text: #ffffff; --side-text-faint: #97a8b6; --side-active: #576473; --side-hover: #576473; --side-line: #303947; --topbar-h: 90px; /* ── หัวพาเนล (ลายเซ็น Trackado) ── */ --panelhead: #638ca5; --panelhead-2: #638ca5; /* ── สีไอคอนหมวดเมนู (วงกลมสีในแถบข้าง) ── */ --ic-ops: #54c08a; --ic-display: #41949f; --ic-data: #e8b71a; --ic-system: #ae84a4; --ic-alert: #c31414; --ic-report: #5a7fb8; --ic-eqr: #54c08a; /* ── จังหวะการเคลื่อนไหว (ใช้ร่วมทั้งระบบ) ── ค่าเดียวกันทุกที่ = ความรู้สึกเป็นระบบเดียว ไม่ใช่แต่ละหน้าเคลื่อนคนละจังหวะ */ --dur-fast: 120ms; /* hover · กดปุ่ม — ต้องตอบทันมือ */ --dur: 200ms; /* เมนูย่อย · แท็บ · dropdown */ --dur-slow: 380ms; /* เปลี่ยนหน้า · กราฟ */ --ease-out: cubic-bezier(.22, .61, .36, 1); /* ออกตัวเร็ว จบนุ่ม */ --ease-spring: cubic-bezier(.34, 1.3, .64, 1); /* เด้งเล็กน้อยตอนปล่อยปุ่ม */ } /* ผู้ใช้ที่ตั้งค่าเครื่องว่า "ลดการเคลื่อนไหว" (เมาเวลาเห็นภาพขยับ / คีออสก์) ปิดทุกอย่างจากจุดเดียว ไม่ต้องไล่ปิดรายที่ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Noto Sans Thai", "Inter", system-ui, -apple-system, sans-serif; font-size: 14px; font-weight: 400; background: var(--canvas); color: var(--text); min-height: 100vh; padding: 18px 14px 40px; display: flex; flex-direction: column; align-items: center; } a { color: var(--info); } .topbar { width: 100%; max-width: 880px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; } .brand .logo { width: 38px; height: 38px; border-radius: var(--radius-btn); display: grid; place-items: center; color: #fff; font-size: 1.2rem; } .brand small { display: block; font-weight: 500; font-size: .68rem; color: var(--text-faint); } .topbar-actions { display: flex; align-items: center; gap: 8px; } .card { width: 100%; max-width: 480px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 22px 26px; } .card.wide { max-width: 880px; } h1.title { font-size: 1.3rem; margin-bottom: 4px; } p.sub { font-size: .9rem; color: var(--text-soft); margin-bottom: 18px; line-height: 1.5; } label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; } .req { color: var(--danger); } .field { margin-bottom: 15px; } input, select, textarea { width: 100%; font-family: inherit; font-size: .95rem; color: var(--text); background-color: #fff; border: 1px solid var(--field-border); border-radius: var(--radius-btn); padding: 11px 12px; } input[readonly] { background: var(--brown-soft); color: var(--text-soft); } textarea { min-height: 64px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--info); box-shadow: 0 0 0 2px var(--info-soft); } .row { display: flex; gap: 12px; flex-wrap: wrap; } .row > .field { flex: 1; min-width: 120px; } .err { color: var(--danger); font-size: .78rem; margin-top: 5px; } /* [hidden] ต้องชนะกฎ display ที่เรากำหนดเอง — ไม่งั้นซ่อนไม่ลง (กฎ [hidden]{display:none} ของเบราว์เซอร์มีน้ำหนักต่ำกว่า .btn{display:inline-flex}) */ [hidden] { display: none !important; } .btn { width: 100%; font-family: inherit; font-size: 1rem; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-btn); padding: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: none; } .btn-ghost { background: #fff; color: var(--info); border: 1px solid var(--card-border); } /* .btn-sm ใช้ทั้งกับ