/* site.css — สไตล์ของหน้าเว็บสาธารณะ (หน้าแรก / เข้าสู่ระบบ / สมัครใช้งาน)
   แยกจาก app.css ของระบบหลังล็อกอินโดยสิ้นเชิง ที่นี่ไม่มี EasyUI มาเกี่ยวข้อง */

:root {
	--ink: #0a1f1c;
	--ink-soft: #33514c;
	--muted: #6b8681;
	--teal-900: #00443c;
	--teal-700: #00695c;
	--teal-600: #00796b;
	--teal-400: #26a69a;
	--mint: #e0f2f1;
	--gold: #c8a951;
	--gold-soft: #efe2bb;
	--cream: #faf8f3;
	--line: rgba(10, 31, 28, .1);
	--shadow-sm: 0 2px 8px rgba(10, 31, 28, .06);
	--shadow-md: 0 12px 32px rgba(10, 31, 28, .1);
	--shadow-lg: 0 30px 70px rgba(0, 68, 60, .22);
	--radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: 'Sarabun', 'Leelawadee UI', 'Noto Sans Thai', -apple-system, 'Segoe UI', Tahoma, sans-serif;
	color: var(--ink);
	background: var(--cream);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* ภาษาไทยมีสระบนและวรรณยุกต์ ต้องการ line-height สูงกว่าละติน ไม่งั้นหัวข้อโดนตัดยอด */
h1, h2, h3, h4 {
	font-family: 'Prompt', 'Sarabun', 'Leelawadee UI', 'Noto Sans Thai', -apple-system, 'Segoe UI', Tahoma, sans-serif;
	line-height: 1.4;
	margin: 0 0 .5em;
	letter-spacing: -.01em;
}
p { margin: 0 0 1em; }
a { color: var(--teal-600); text-decoration: none; }

.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

/* ---------------- แถบบน ---------------- */

.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 248, 243, .82);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}

.nav-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 72px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 18px;
	color: var(--ink);
	letter-spacing: -.02em;
}

.brand img { width: 34px; height: 34px; }
.brand small {
	display: block;
	font-size: 11px;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: .04em;
	line-height: 1;
}

.nav-links { display: flex; gap: 26px; margin-left: 26px; }
.nav-links a { color: var(--ink-soft); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--teal-600); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ---------------- ปุ่ม ---------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
	white-space: nowrap;
}

.btn-primary {
	background: linear-gradient(135deg, var(--teal-600), var(--teal-900));
	color: #fff;
	box-shadow: 0 10px 24px rgba(0, 105, 92, .28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0, 105, 92, .34); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal-400); color: var(--teal-600); }

.btn-gold {
	background: linear-gradient(135deg, #e3c675, var(--gold));
	color: #35290a;
	box-shadow: 0 10px 26px rgba(200, 169, 81, .35);
}
.btn-gold:hover { transform: translateY(-2px); }

.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn-block { width: 100%; }

/* ---------------- Hero ---------------- */

.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1100px 600px at 85% -10%, rgba(38, 166, 154, .28), transparent 60%),
		radial-gradient(800px 500px at 5% 10%, rgba(200, 169, 81, .16), transparent 55%),
		linear-gradient(160deg, #04302a 0%, #00443c 45%, #00695c 100%);
	color: #eaf6f4;
	padding: 86px 0 120px;
}

/* เส้นตารางจางๆ ให้พื้นหลังไม่แบน */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
	pointer-events: none;
}

.hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	/* ฝั่งขวาตอนนี้เป็นโทรศัพท์แนวตั้ง (แคบกว่าโน้ตบุ๊กเดิม) จึงให้พื้นที่ข้อความมากกว่า */
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(200, 169, 81, .16);
	border: 1px solid rgba(200, 169, 81, .5);
	color: var(--gold-soft);
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 22px;
}

.eyebrow .dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: #7ee0c9;
	box-shadow: 0 0 0 4px rgba(126, 224, 201, .18);
}

.hero h1 {
	font-size: clamp(34px, 4.4vw, 54px);
	font-weight: 700;
	color: #fff;
	line-height: 1.42;
	margin-bottom: 18px;
}

.hero h1 .accent {
	/* background-clip:text ตัดตามกล่องบรรทัด จึงต้องเผื่อที่ให้สระบน/ล่างของไทย */
	display: inline-block;
	padding: .06em 0 .12em;
	background: linear-gradient(120deg, #ffe6a6, var(--gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero p.lead {
	font-size: clamp(16px, 1.35vw, 18.5px);
	color: rgba(234, 246, 244, .84);
	max-width: 33em;
	margin-bottom: 30px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-cta .btn-ghost { color: #eaf6f4; border-color: rgba(255, 255, 255, .35); }
.hero-cta .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.hero-note { font-size: 14px; color: rgba(234, 246, 244, .62); }
.hero-note b { color: var(--gold-soft); font-weight: 600; }

/* ภาพหน้าจอจริงของระบบ วางในกรอบโน้ตบุ๊กที่วาดด้วย CSS ล้วน

   ทรงเครื่องอ้างอิงโน้ตบุ๊กสายทำงานตัวบางทั่วไป — บอดี้ดำด้าน มุมเหลี่ยม ขอบจอบาง
   คางล่างหนากว่านิดหน่อย มีลิ้นสำหรับเปิดฝาตรงกลางขอบบน
   จงใจไม่ใส่โลโก้ ไม่ใส่จุดแดงกลางคีย์บอร์ด และไม่ลอกรูปทรงเฉพาะของยี่ห้อใด */

.devices {
	position: relative;
	margin: 0;
	/* ภาพข้างในกว้าง 1600px ถ้าไม่ล็อกไว้ คอลัมน์ของ grid จะยืดตามจนล้นจอ */
	min-width: 0;
	max-width: 100%;
	/* เผื่อที่ให้เงาใต้เครื่องและคำบรรยายใต้ภาพ */
	padding-bottom: 52px;
}

/* ---- โน้ตบุ๊ก ---- */

.laptop { position: relative; }

/* เงาสัมผัสพื้นใต้เครื่อง ให้ตัวเครื่องดูวางอยู่บนอะไรสักอย่าง ไม่ใช่ลอยเฉยๆ */
.laptop::after {
	content: '';
	position: absolute;
	left: 4%;
	right: 4%;
	top: 100%;
	height: 30px;
	pointer-events: none;
	background: radial-gradient(52% 100% at 50% 0, rgba(0, 14, 12, .5), transparent 72%);
}

.laptop-lid {
	position: relative;
	width: 95%;
	margin: 0 auto;
	/* คางล่างหนากว่าขอบบน–ข้าง ตามสัดส่วนจอโน้ตบุ๊กจริง */
	padding: 12px 9px 19px;
	border-radius: 9px 9px 3px 3px;
	background: linear-gradient(172deg, #46504d 0%, #2b3432 26%, #1e2625 68%, #151b1a 100%);
	/* ริมขอบบนรับแสง ริมล่างเป็นเงา ทำให้บอดี้ดำด้านไม่จมไปกับพื้นหลังเขียวเข้ม */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .3),
		inset 0 0 0 1px rgba(255, 255, 255, .08),
		inset 0 -1px 0 rgba(0, 0, 0, .5),
		0 22px 44px rgba(0, 16, 14, .5);
}

/* ลิ้นเปิดฝากลางขอบบน */
.laptop-lid::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -5px;
	transform: translateX(-50%);
	width: 16%;
	height: 6px;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, #4b5552, #2b3432);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
}

/* กล้องหน้าเครื่อง เป็นช่องยาวบางๆ พร้อมเลนส์เล็กตรงกลาง */
.laptop-cam {
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 42px;
	max-width: 12%;
	height: 4px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .05);
}
.laptop-cam::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #8fa19e, #1d2524);
}

.laptop-screen {
	display: block;
	position: relative;
	border-radius: 2px;
	overflow: hidden;
	background: #0d3b34;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.laptop-screen img {
	display: block;
	width: 100%;
	height: auto;
	/* ภาพต้นฉบับกว้างมาก ปล่อยตามสัดส่วนจริงเพื่อไม่ให้ตัวหนังสือในภาพเบี้ยว */
}

/* แสงสะท้อนบนหน้าจอบางๆ ให้ดูเป็นกระจก */
.laptop-screen::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(103deg, rgba(255, 255, 255, .14) 0 15%, rgba(255, 255, 255, 0) 40%);
}

/* บานพับ คั่นระหว่างฝาจอกับฐานเครื่อง */
.laptop-hinge {
	width: 88%;
	height: 4px;
	margin: 0 auto;
	background: linear-gradient(180deg, #0e1413, #29322f);
}

/* ฐานเครื่อง ผายออกด้านหน้าเล็กน้อยให้ได้มุมมองแบบมองจากด้านบน */
.laptop-deck {
	position: relative;
	height: 15px;
	clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
	background: linear-gradient(180deg, #3d4644 0%, #262f2d 38%, #141a19 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* ร่องนิ้วสำหรับง้างฝาจอ ตรงกลางขอบหน้า */
.laptop-deck::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 13%;
	height: 6px;
	border-radius: 7px 7px 0 0;
	background: rgba(0, 0, 0, .5);
}

.devices-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	font-size: 12.5px;
	color: rgba(234, 246, 244, .6);
}

/* ---------------- แถบสถิติการใช้งานจริง ----------------
   ลอยคาบเส้นแบ่งระหว่าง hero (พื้นเข้ม) กับเนื้อหาสีขาวด้านล่าง แบบการ์ดกระจก
   ให้ความรู้สึกพรีเมียมกว่าแถบตัวเลขแบนๆ แบบเดิม */

.stats-band {
	position: relative;
	z-index: 2;
	padding: 0;
	margin-top: -64px;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.stat-card {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(16px);
	padding: 30px 22px;
	text-align: center;
	transition: background .18s ease;
}
.stat-card:hover { background: #fff; }

.stat-ic {
	width: 38px; height: 38px;
	margin: 0 auto 12px;
	border-radius: 11px;
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--mint), #fff);
	border: 1px solid rgba(38, 166, 154, .3);
}
.stat-ic img { width: 20px; height: 20px; }

.stat-num {
	font-family: 'Prompt', 'Sarabun', sans-serif;
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 700;
	letter-spacing: -.02em;
	background: linear-gradient(135deg, var(--teal-700), var(--teal-400));
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--teal-700);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.stat-num { -webkit-text-fill-color: transparent; }
}
.stat-label { font-size: 13.5px; color: var(--muted); margin-top: 6px; }

/* ---------------- ส่วนเนื้อหา ---------------- */

section { padding: 84px 0; }
.section-head { max-width: 44em; margin: 0 auto 46px; text-align: center; }
.section-head .kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--teal-400);
	text-transform: uppercase;
	margin-bottom: 10px;
}
.section-head .kicker::before,
.section-head .kicker::after {
	content: '';
	width: 20px; height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold));
}
.section-head .kicker::after { transform: scaleX(-1); }
.section-head h2 { font-size: clamp(26px, 3vw, 36px); }
.section-head p { color: var(--ink-soft); font-size: 16.5px; margin: 0; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.card-feature {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 26px;
	box-shadow: var(--shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(38, 166, 154, .4); }
.card-feature .ic {
	width: 46px; height: 46px;
	border-radius: 13px;
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--mint), #fff);
	border: 1px solid rgba(38, 166, 154, .3);
	margin-bottom: 16px;
}
.card-feature .ic img { width: 26px; height: 26px; }
.card-feature h3 { font-size: 18px; margin-bottom: 8px; }
.card-feature p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* ขั้นตอนการใช้งาน */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step {
	position: relative;
	background: linear-gradient(180deg, #fff, #fbfaf6);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px 26px 26px;
	box-shadow: var(--shadow-sm);
}
.step::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	top: -18px; left: 26px;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--teal-600), var(--teal-900));
	color: #fff;
	font-weight: 700;
	box-shadow: 0 8px 18px rgba(0, 105, 92, .3);
}
.step h3 { margin-top: 12px; font-size: 17px; }
.step p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* ราคา */

.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 24px; justify-content: center; }

.plan {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 32px 30px;
	box-shadow: var(--shadow-sm);
}
.plan.featured {
	background: linear-gradient(165deg, #04302a, #00695c);
	color: #eaf6f4;
	border-color: rgba(200, 169, 81, .45);
	box-shadow: var(--shadow-lg);
	position: relative;
}
.plan.featured h3, .plan.featured .price { color: #fff; }
.plan .badge-free {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(200, 169, 81, .18);
	border: 1px solid rgba(200, 169, 81, .55);
	color: var(--gold-soft);
	font-size: 12.5px;
	font-weight: 700;
	margin-bottom: 14px;
}
.plan h3 { font-size: 20px; }
.plan .price { font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.plan .price small { font-size: 15px; font-weight: 500; opacity: .75; }
.plan .price-text { font-size: 27px; color: var(--teal-700); }
.plan ul { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.plan li::before {
	content: '✓';
	color: var(--gold);
	font-weight: 700;
	line-height: 1.5;
}
.plan.featured li::before { color: var(--gold-soft); }
.plan .muted-note { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }
.plan.featured .muted-note { color: rgba(234, 246, 244, .6); }

/* คำถามที่พบบ่อย */

.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 4px 20px;
	box-shadow: var(--shadow-sm);
}
.faq summary {
	cursor: pointer;
	padding: 16px 0;
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: '+';
	margin-left: auto;
	color: var(--teal-400);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--ink-soft); font-size: 15px; margin: 0 0 16px; }

/* CTA ปิดท้าย */

.cta {
	background:
		radial-gradient(700px 300px at 80% 0%, rgba(38, 166, 154, .3), transparent 60%),
		linear-gradient(150deg, #04302a, #00695c);
	color: #eaf6f4;
	border-radius: 26px;
	padding: 54px 44px;
	text-align: center;
	box-shadow: var(--shadow-lg);
}
.cta h2 { color: #fff; font-size: clamp(24px, 2.6vw, 32px); }
.cta p { color: rgba(234, 246, 244, .8); max-width: 40em; margin: 0 auto 26px; }

/* ---------------- ท้ายหน้า ---------------- */

.footer {
	background: #04211d;
	color: rgba(234, 246, 244, .72);
	padding: 44px 0 28px;
	font-size: 14.5px;
}
.footer-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.footer .brand { color: #fff; }
.footer .brand small { color: rgba(234, 246, 244, .55); }
.footer-links { margin-left: auto; display: flex; gap: 26px; flex-wrap: wrap; }
.footer a { color: rgba(234, 246, 244, .78); }
.footer a:hover { color: var(--gold-soft); }
.footer-bottom {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
	color: rgba(234, 246, 244, .55);
}
.footer-bottom .sep { margin-left: auto; }

/* ---------------- หน้าเข้าสู่ระบบ / สมัคร ---------------- */

.auth {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
}

.auth-side {
	position: relative;
	overflow: hidden;
	padding: 54px 52px;
	color: #eaf6f4;
	background:
		radial-gradient(800px 480px at 20% 10%, rgba(38, 166, 154, .32), transparent 60%),
		radial-gradient(600px 400px at 90% 90%, rgba(200, 169, 81, .18), transparent 60%),
		linear-gradient(160deg, #04302a, #00443c 55%, #00695c);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* โลโก้อยู่บนสุดของแผงซ้าย ส่วนข้อความจัดกลางแนวตั้งให้สมดุลกับฟอร์มทางขวา */
.auth-side .brand { color: #fff; position: absolute; top: 40px; left: 52px; }
.auth-side .brand small { color: rgba(234, 246, 244, .6); }
.auth-side h2 { font-size: clamp(24px, 2.6vw, 34px); color: #fff; margin-bottom: 14px; }
.auth-side p { color: rgba(234, 246, 244, .78); max-width: 26em; }
.auth-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.auth-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.auth-points li::before {
	content: '✓';
	color: var(--gold-soft);
	font-weight: 700;
}

.auth-main {
	display: grid;
	place-items: center;
	padding: 44px 24px;
	background: var(--cream);
}

.auth-card {
	width: min(430px, 100%);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 36px 34px;
	box-shadow: var(--shadow-md);
}
.auth-card h1 { font-size: 25px; margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); font-size: 15px; margin-bottom: 26px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft); }
.field input {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: 12px;
	font: inherit;
	font-size: 15px;
	background: #fcfdfc;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus {
	outline: none;
	border-color: var(--teal-400);
	box-shadow: 0 0 0 4px rgba(38, 166, 154, .14);
	background: #fff;
}
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

.form-msg {
	display: none;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 14px;
	margin-bottom: 16px;
}
.form-msg.error { display: block; background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2; }
.form-msg.ok { display: block; background: var(--mint); color: var(--teal-700); border: 1px solid rgba(38, 166, 154, .4); }

.auth-foot { text-align: center; font-size: 14.5px; color: var(--muted); margin-top: 20px; }

/* ---------------- แถบภาพหน้าจอจริงของแอพมือถือ ---------------- */

/* grid แทน flex-wrap เพราะ 4 การ์ดชนความกว้างพอดีจนตกแถวไม่สม่ำเสมอ (3+1) ใช้ grid บังคับให้เรียงเป็นระเบียบทุกขนาดจอ */
.app-shots-row { display: grid; grid-template-columns: repeat(4, minmax(0, 250px)); justify-content: center; gap: 40px 36px; }
.app-shot { text-align: center; }
.app-shot .dl-phone { width: 250px; transform: none; }
.app-shot figcaption { margin-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }

.app-shot-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
	border-radius: 46px;
}
.app-shot-btn:hover .dl-phone { transform: translateY(-4px); }
.app-shot-btn .dl-phone { transition: transform .18s ease; }
.app-shot-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }

.app-shots-hint { margin: 28px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }

/* ---- กล่องดูภาพขนาดเต็ม (lightbox) ---- */

.shot-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(4, 20, 17, .88);
	cursor: zoom-out;
}
.shot-lightbox[hidden] { display: none; }
.shot-lightbox img {
	max-width: min(460px, 88vw);
	max-height: 88vh;
	border-radius: 28px;
	box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
	cursor: default;
}
.shot-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.shot-lightbox-close:hover { background: rgba(255, 255, 255, .26); }

/* ---------------- จอเล็ก ---------------- */

@media (max-width: 980px) {
	.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 42px; }
	.cards, .steps { grid-template-columns: 1fr 1fr; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.stats-band { margin-top: -40px; }
	.stat-card { padding: 22px 16px; }
	.pricing { grid-template-columns: minmax(0, 460px); }
	.auth { grid-template-columns: 1fr; }
	.auth-side { padding: 34px 26px; }
	.auth-side .brand { position: static; margin-bottom: 20px; }
	.auth-points { display: none; }
	.app-shots-row { grid-template-columns: repeat(2, minmax(0, 220px)); gap: 30px 26px; }
	.app-shot .dl-phone { width: 220px; }
}

@media (max-width: 520px) {
	.app-shots-row { grid-template-columns: minmax(0, 240px); }
	.app-shot .dl-phone { width: 240px; }
}

@media (max-width: 720px) {
	.nav-links { display: none; }

	/* แถบบนบนมือถือ: ชื่อแบรนด์ต้องไม่ตัดบรรทัด และเหลือปุ่มหลักปุ่มเดียว */
	.nav-inner { height: 62px; gap: 10px; }
	.brand { font-size: 15.5px; }
	.brand span, .brand small { white-space: nowrap; }
	.brand img { width: 28px; height: 28px; }
	.nav-actions { gap: 8px; }
	.nav-actions .btn { padding: 9px 15px; font-size: 13.5px; }
	.nav-actions .btn-ghost { display: none; }
	section { padding: 60px 0; }
	.cards, .steps { grid-template-columns: 1fr; }
	.hero { padding: 60px 0 84px; }
	.devices { padding-bottom: 40px; }
	.cta { padding: 40px 24px; }
	.footer-links { margin-left: 0; gap: 16px; }
}

/* ---------------- หน้าดาวน์โหลดแอพมือถือ (/download) ----------------

   ใช้โครงเดียวกับหน้าแรก (hero / section-head / cards / steps / faq / cta) เพิ่มแค่ส่วนที่หน้านี้มีเอง
   ไอคอนใช้ glyph ของแอพมือถือ (/m/glyph) เป็น mask แล้วลงสีด้วย currentColor */

.dl-hero { padding: 72px 0 96px; }
.dl-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

.dl-qr-card {
	display: flex;
	align-items: center;
	gap: 22px;
	max-width: 580px;
	padding: 18px;
	background: #fff;
	color: var(--ink);
	border-radius: 22px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.dl-qr {
	flex: none;
	width: 196px;
	height: 196px;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--line);
}
.dl-qr svg { display: block; width: 100%; height: 100%; }
.dl-qr-text { min-width: 0; }
.dl-qr-text b {
	display: block;
	margin-bottom: 4px;
	font-family: 'Prompt', 'Sarabun', 'Leelawadee UI', 'Noto Sans Thai', sans-serif;
	font-size: 19px;
	line-height: 1.4;
}
.dl-qr-text p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.dl-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 12px;
	border-radius: 12px;
	background: var(--cream);
	border: 1px solid var(--line);
	font-size: 14px;
	font-weight: 600;
}
.dl-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--teal-700); }
.dl-link button {
	flex: none;
	padding: 7px 12px;
	border: none;
	border-radius: 9px;
	background: var(--teal-700);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.dl-platforms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dl-platforms span { padding: 3px 10px; border-radius: 999px; background: var(--mint); color: var(--ink-soft); font-size: 12px; font-weight: 600; }

.dl-mobile-cta { display: none; max-width: 440px; }
.dl-mobile-cta .hero-note { margin-top: 12px; }
.dl-mobile .dl-qr-card { display: none; }
.dl-mobile .dl-mobile-cta { display: block; }

.dl-glyph,
.dl-tint i,
.dl-tile i,
.dl-tab i,
.dl-float-ic i {
	display: block;
	background: currentColor;
	-webkit-mask: var(--g) center / contain no-repeat;
	mask: var(--g) center / contain no-repeat;
}

/* ---- โทรศัพท์จำลอง (หน้าตาเดียวกับหน้าภาพรวมของแอพ) ---- */

.dl-stage { position: relative; margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0 24px; }
.dl-stage .devices-cap { position: static; margin-top: 18px; color: rgba(234, 246, 244, .62); }
.dl-phone {
	position: relative;
	width: 300px;
	aspect-ratio: 300 / 620;
	padding: 11px;
	border-radius: 46px;
	background: linear-gradient(145deg, #1f2d2a, #0b1412);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .75);
	transform: rotate(-3deg);
}
/* หน้าแรก: ตั้งจอตรง ไม่ต้องเอียงเหมือนหน้า /download */
.hero-grid .dl-phone { transform: none; }
.dl-phone::before {
	content: '';
	position: absolute;
	top: 19px;
	left: 50%;
	width: 84px;
	height: 22px;
	margin-left: -42px;
	border-radius: 14px;
	background: #0b1412;
	z-index: 3;
}
.dl-screen {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 36px;
	background: #F3F0E9;
	color: #101828;
	font-family: 'Noto Sans Thai', 'Leelawadee UI', 'Sarabun', sans-serif;
	line-height: 1.35;
}
.dl-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dl-status { flex: none; height: 34px; display: flex; align-items: center; padding: 0 26px; background: #fff; font-size: 11px; font-weight: 600; }
.dl-top { flex: none; display: flex; align-items: center; gap: 7px; padding: 3px 11px 8px; background: #fff; border-bottom: 1px solid #EAECF0; }
.dl-menu {
	position: relative;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 9px;
	background: #F2F4F7;
}
.dl-menu::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 10px;
	width: 12px;
	height: 1.6px;
	border-radius: 2px;
	background: #344054;
	box-shadow: 0 3.5px 0 #344054, 0 7px 0 #344054;
}
.dl-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dl-title b { font-size: 11px; font-weight: 600; white-space: nowrap; }
.dl-title em { font-style: normal; font-size: 6.5px; color: #0F7A52; background: #E7F4EE; padding: 1px 4px; border-radius: 99px; vertical-align: 2px; }
.dl-title small { font-size: 7.5px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-switch { flex: none; padding: 7px 8px; border-radius: 9px; background: #E7F4EE; color: #0F7A52; font-size: 8px; font-weight: 600; white-space: nowrap; }
.dl-body { flex: 1; min-height: 0; overflow: hidden; padding: 8px 9px; display: flex; flex-direction: column; gap: 6px; }
.dl-hero-card {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 10px;
	border-radius: 12px;
	background: linear-gradient(158deg, #12855E, #0B6244);
	color: #fff;
	box-shadow: 0 12px 20px -14px rgba(11, 98, 68, .85);
}
.dl-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dl-row small, .dl-stats small { display: block; font-size: 7.5px; color: rgba(255, 255, 255, .78); }
.dl-row strong { font-size: 21px; font-weight: 600; letter-spacing: -.5px; line-height: 1.25; }
.dl-pct { padding: 3px 7px; border-radius: 99px; background: rgba(255, 255, 255, .16); font-size: 9px; font-weight: 600; }
.dl-bar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.dl-bar i { display: block; height: 100%; background: #fff; }
.dl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .16); }
.dl-stats b { font-size: 10.5px; font-weight: 600; }
.dl-stats b.warm { color: #FFD8A8; }
.dl-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.dl-kpi { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: #fff; border: 1px solid #EAECF0; border-radius: 10px; min-width: 0; }
.dl-kpi > div { min-width: 0; }
.dl-kpi small { display: block; font-size: 7px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-kpi b { font-size: 11.5px; font-weight: 600; }
.dl-kpi b.red { color: #B42318; }
.dl-tint { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 7px; }
.dl-tint i { width: 14px; height: 14px; }
.dl-tint.red { background: #FDECEC; color: #DC2626; }
.dl-tint.green { background: #E7F4EE; color: #0F7A52; }
.dl-tint.blue { background: #E8F0FE; color: #2563EB; }
.dl-tint.amber { background: #FEF3E2; color: #B45309; }
.dl-menu-card { padding: 6px 5px 8px; background: #fff; border: 1px solid #EAECF0; border-radius: 10px; }
.dl-menu-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 3px 6px; padding-bottom: 5px; border-bottom: 1px solid #EAECF0; }
.dl-menu-head b { font-size: 9px; font-weight: 600; }
.dl-menu-head small { font-size: 7.5px; color: #667085; }
.dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px 3px; }
.dl-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 7px; line-height: 1.3; color: #344054; text-align: center; }
.dl-tile span {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	color: #fff;
	background: linear-gradient(150deg, var(--a), var(--b));
	box-shadow: 0 6px 10px -6px var(--b);
}
.dl-tile i { width: 17px; height: 17px; }
.dl-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 0 8px 12px; padding: 4px; background: #fff; border: 1px solid #EAECF0; border-radius: 15px; }
.dl-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0; border-radius: 11px; font-size: 6.5px; color: #5B6067; white-space: nowrap; }
.dl-tab i { width: 14px; height: 14px; color: #98A2B3; }
.dl-tab.on { background: linear-gradient(150deg, #12855E, #0B6244); color: #fff; font-weight: 600; }
.dl-tab.on i { color: #fff; }

.dl-float {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .97);
	color: var(--ink);
	box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .6);
	animation: dl-bob 6s ease-in-out infinite;
}
.dl-float b { display: block; font-size: 14px; line-height: 1.4; }
.dl-float small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.dl-float strong { margin-left: 6px; font-size: 16px; color: var(--teal-700); }
.dl-float-ic { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 11px; color: #fff; overflow: hidden; }
.dl-float-ic i { width: 20px; height: 20px; }
.dl-float-ic.ok { background: linear-gradient(150deg, #34D399, #0F7A52); }
.dl-float-ic.meter { background: linear-gradient(150deg, #FBBF24, #D97706); }
.dl-float-ic.qr { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.dl-float-ic.qr svg { display: block; width: 36px; height: 36px; }
.dl-float-a { top: 12%; left: -4%; }
.dl-float-b { top: 50%; right: -6%; animation-delay: -2s; }
.dl-float-c { bottom: 4%; left: 2%; animation-delay: -4s; }
@keyframes dl-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
	.dl-float { animation: none; }
}

/* ---- ความสามารถ / วิธีติดตั้ง ---- */

.dl-features .card-feature .ic { color: var(--teal-700); }
.dl-features .dl-glyph { width: 24px; height: 24px; }

.dl-install { background: #fff; }
.dl-tabs-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -18px 0 48px; }
.dl-tabs-switch button {
	padding: 10px 20px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink-soft);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.dl-tabs-switch button.on { border-color: transparent; background: linear-gradient(135deg, var(--teal-600), var(--teal-900)); color: #fff; }
.dl-panel[hidden] { display: none; }
.dl-panel .step b { color: var(--ink); }

@media (max-width: 980px) {
	.dl-hero-grid { grid-template-columns: minmax(0, 1fr); }
	.dl-stage { padding-top: 16px; }
}

@media (max-width: 720px) {
	.dl-hero { padding: 44px 0 64px; }
	.dl-qr-card { flex-direction: column; text-align: center; }
	.dl-phone { width: 260px; transform: none; }
	/* การ์ดลอยชนขอบจอบนมือถือ ซ่อนไว้ ให้เห็นหน้าจอแอพชัดๆ */
	.dl-float { display: none; }
	.dl-tabs-switch { margin-top: -10px; margin-bottom: 40px; }
}

/* ---------------- หน้าแรก: ติดตั้งแอพมือถือ ----------------

   การ์ด QR ใน hero ใช้สไตล์ .dl-qr-card เดียวกับหน้า /download (บนมือถือถูกซ่อนด้วย .dl-mobile)
   .install-modal เปิดเฉพาะบนมือถือ บังกลางจอชวนติดตั้งก่อนดูหน้าเว็บ */

/* การ์ด QR ใต้ปุ่มสมัครในคอลัมน์ซ้ายของ hero */
.home-qr {
	margin-top: 30px;
	max-width: 460px;
	gap: 18px;
	padding: 14px;
	border-radius: 20px;
}
.home-qr .dl-qr { width: 150px; height: 150px; border-radius: 10px; }
.home-qr .dl-qr-text b { font-size: 18px; }
.home-qr .dl-qr-text p { margin-bottom: 8px; font-size: 13.5px; }
.home-qr .dl-platforms { margin-top: 0; }
.home-qr-more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--teal-700); }
.home-install-cta { margin-top: 22px; }

.install-modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(4, 20, 17, .78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: install-fade .2s ease;
}
.install-modal[hidden] { display: none; }
.install-modal-card {
	width: min(400px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 30px 24px 18px;
	border-radius: 26px;
	background: #fff;
	text-align: center;
	box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
	animation: install-pop .28s cubic-bezier(.2, .9, .3, 1.2);
}
.install-modal-icon {
	width: 84px;
	height: 84px;
	border-radius: 22px;
	box-shadow: 0 14px 30px rgba(0, 68, 60, .28);
}
.install-modal-card h2 { margin: 16px 0 6px; font-size: 23px; line-height: 1.45; }
.install-modal-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.install-modal-points {
	list-style: none;
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: 16px;
	background: var(--mint);
	text-align: left;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.install-modal-points li { position: relative; padding-left: 24px; }
.install-modal-points li + li { margin-top: 6px; }
.install-modal-points li::before {
	content: '✓';
	position: absolute;
	left: 2px;
	top: 0;
	font-weight: 800;
	color: var(--teal-600);
}
.install-modal-btn {
	padding: 18px 20px;
	font-size: 18px;
	font-weight: 700;
	animation: install-pulse 2s ease-in-out infinite;
}
.install-modal-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.install-modal-skip {
	margin-top: 10px;
	padding: 10px;
	border: none;
	background: none;
	font: inherit;
	font-size: 14px;
	color: var(--muted);
	text-decoration: underline;
	cursor: pointer;
}

@keyframes install-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes install-pop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes install-pulse {
	0%, 100% { box-shadow: 0 10px 26px rgba(200, 169, 81, .35); }
	50% { box-shadow: 0 10px 26px rgba(200, 169, 81, .35), 0 0 0 8px rgba(200, 169, 81, .22); }
}
@media (prefers-reduced-motion: reduce) {
	.install-modal, .install-modal-card, .install-modal-btn { animation: none; }
}

/* ---------------- เข้าสู่ระบบด้วย LINE / Google ----------------
   LINE = ทางหลัก (สีเขียวตามแบรนด์ #06C755), Google = ทางสำรองของบัญชีที่ผูกไว้แล้ว
   ปุ่มซ่อนไว้ก่อน (hidden) หน้าเว็บถาม /api/auth/providers แล้วค่อยเปิดเฉพาะตัวที่ตั้งค่าไว้ */

.btn-line { background: #06c755; color: #fff; border-radius: 12px; }
.btn-line:hover { background: #05b04b; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(6, 199, 85, .28); }
.btn-google { background: #fff; color: var(--ink); border-color: rgba(10, 31, 28, .18); border-radius: 12px; }
.btn-google:hover { border-color: var(--teal-400); transform: translateY(-1px); }
.btn .brand-ico { width: 24px; height: 24px; flex: none; }
.btn[hidden] { display: none; }

.social-stack { display: grid; gap: 12px; }
.social-note { font-size: 13px; color: var(--muted); text-align: center; margin: -2px 0 0; }

.auth-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 16px;
	color: var(--muted);
	font-size: 13px;
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-or[hidden] { display: none; }

.auth-email > summary {
	cursor: pointer;
	list-style: none;
	text-align: center;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--teal-600);
	padding: 6px 0;
}
.auth-email > summary::-webkit-details-marker { display: none; }
.auth-email[open] > summary { margin-bottom: 14px; }

/* หน้า /connect — รายการบัญชีที่ผูกไว้ */
.link-list { display: grid; gap: 10px; margin: 0 0 22px; }
.link-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fcfdfc;
	line-height: 1.45;
}
.link-item .brand-ico { width: 30px; height: 30px; flex: none; }
.link-item .grow { flex: 1; min-width: 0; }
.link-item b { display: block; font-size: 15px; }
.link-item small { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-badge { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--mint); color: var(--teal-700); white-space: nowrap; }
.link-badge.off { background: #f1f3f2; color: var(--muted); }

/* ---------------- หน้านโยบาย (/privacy) ---------------- */
.legal-top { background: var(--teal-900); padding: 18px 0; }
.legal-top .brand { color: #fff; }
.legal-top .brand small { color: rgba(234, 246, 244, .6); }
.legal { padding: 44px 0 70px; }
.legal .wrap { max-width: 780px; }
.legal h1 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 4px; }
.legal h2 { font-size: 19px; margin: 32px 0 10px; }
.legal p, .legal li { color: var(--ink-soft); font-size: 15.5px; }
.legal ul { padding-left: 22px; display: grid; gap: 8px; }
.legal a { color: var(--teal-600); text-decoration: underline; }
.legal-date { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.legal-foot { margin-top: 36px; font-size: 14px; color: var(--muted); }