/* ───────────────────────────────────────────────────────────────
   public/assets/css/tools.css — DEKTHAI DIGITAL Tools
   ใช้ตัวแปรสี/ฟอนต์เดียวกับ design system ใน CLAUDE.md (lime + ink · Prompt · Boxicons)
   --cat = สีประจำหมวด ใช้ "ตกแต่ง" เท่านั้น — ปุ่ม/CTA เป็น lime + ink เสมอ

   ⚠️ หน้าแรก (index.php) โหลด bizmgmt.css ต่อท้ายไฟล์นี้ ซึ่งมี selector กว้างๆ
      nav{position:fixed} · section{padding:80px 0} · footer{...}
      → ส่วนของ Tools ต้องเขียนแบบ nav.t-nav / section.t-section ให้เจาะจงกว่าเสมอ
   ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#FFFFFF; --bg-soft:#FAFAFB; --bg-mute:#F4F5F7;
  --border:#E8E9EC; --border-strong:#D5D8DD;
  --text:#0A0A0B; --text-2:#52576A; --text-3:#8B92A0; --text-4:#B5BAC4;
  --accent:#D4FF3E; --accent-dark:#B8E033; --accent-soft:#F4FFD0; --accent-glow:rgba(212,255,62,0.4);
  --ink:#0A0A0B;
  --good:#10B981; --warn:#F59E0B; --danger:#EF4444; --info:#3B82F6;
  --nav-h:64px;
  --shadow-soft:0 18px 40px -24px rgba(10,10,11,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.t-lock{overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:'Prompt',sans-serif;font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.container{max-width:1280px;margin:0 auto;padding:0 28px}
a{color:inherit}
img,canvas,svg,video{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;font-family:inherit;font-weight:600;font-size:14px;border:none;cursor:pointer;text-decoration:none;border-radius:8px;transition:transform .15s,background .15s,box-shadow .15s;line-height:1;white-space:nowrap}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#222;transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 10px 24px -10px var(--accent-glow)}
.btn-ghost{background:#fff;color:var(--text);border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--bg-mute)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ── ยูทิลิตี้เลื่อนแนวนอน (ชิป/ตัวกรอง/การ์ดเกี่ยวข้อง) ── */
.t-scroll-x{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.t-scroll-x::-webkit-scrollbar{display:none}

/* ═════════════ NAV ═════════════ */
nav.t-nav{position:sticky;top:0;left:auto;right:auto;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid var(--border);transition:box-shadow .2s}
nav.t-nav.is-scrolled{box-shadow:0 8px 24px -16px rgba(10,10,11,.18)}
.t-nav-inner{position:relative;max-width:1280px;margin:0 auto;height:var(--nav-h);padding:0 28px;display:flex;align-items:center;gap:20px}
.t-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);flex-shrink:0}
.t-logo-mark{position:relative;width:36px;height:36px;border-radius:10px;background:var(--ink);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:18px;flex-shrink:0}
.t-logo-mark::after{content:'';position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid #fff}
.t-logo-text{font-weight:800;font-size:16px;letter-spacing:-.02em;line-height:1.1}
.t-logo-text b{font-weight:800;background:linear-gradient(transparent 62%,var(--accent) 62%)}
.t-logo-text small{display:block;font-size:9px;letter-spacing:.12em;color:var(--text-3);font-weight:600;margin-top:2px}

.t-search{flex:1;max-width:460px;position:relative}
.t-search input{width:100%;height:42px;padding:0 40px 0 40px;border:1px solid var(--border-strong);border-radius:100px;font-family:inherit;font-size:13.5px;background:var(--bg-mute);color:var(--text);-webkit-appearance:none;appearance:none}
.t-search input::-webkit-search-cancel-button{display:none}
.t-search input:focus{outline:none;border-color:var(--text);background:#fff}
/* ⚠️ ต้องเป็น direct child (>) เท่านั้น — descendant selector จะไปโดนไอคอนในกล่องผลลัพธ์
   ทำให้ไอคอนทุกอันหลุดออกจาก flow ไปกองซ้อนกันบนช่องค้นหา (เคยเป็นบั๊กจริง) */
.t-search > i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:18px;pointer-events:none}
.t-search .t-kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--text-4);border:1px solid var(--border);border-radius:5px;padding:1px 6px;background:#fff}
.t-nav-links{display:flex;gap:4px;align-items:center;flex-shrink:0;margin-left:auto}
.t-nav-links a{color:var(--text-2);text-decoration:none;font-size:13.5px;font-weight:500;padding:8px 12px;border-radius:8px}
.t-nav-links a:hover{background:var(--bg-mute);color:var(--text)}
.t-nav-links a.t-nav-cta{background:var(--ink);color:#fff;margin-left:4px}
.t-nav-links a.t-nav-cta:hover{background:#222}
.t-nav-actions{display:none;gap:8px;margin-left:auto}
.t-icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--text);display:grid;place-items:center;font-size:22px;cursor:pointer;transition:background .15s,border-color .15s}
.t-icon-btn:hover{background:var(--bg-mute);border-color:var(--border-strong)}

/* ── กล่องผลการค้นหา ── */
.t-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;text-align:left;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 50px -18px rgba(10,10,11,.25);max-height:min(420px,60vh);overflow:auto;display:none;z-index:200}
.t-search-results.open{display:block}
.t-search-results a{display:flex;align-items:center;gap:10px;padding:12px 16px;text-decoration:none;color:var(--text);font-size:13.5px;border-bottom:1px solid var(--border)}
.t-search-results a:last-child{border-bottom:none}
.t-search-results a:hover,.t-search-results a:focus{background:var(--bg-soft);outline:none}
.t-search-results a i{position:static;transform:none;color:var(--text-2);font-size:18px;width:22px;flex-shrink:0;text-align:center}
.t-search-results .t-sr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-search-results .t-sr-cat{flex-shrink:0;font-size:11px;color:var(--text-3)}
.t-search-results .t-sr-empty{padding:20px;text-align:center;color:var(--text-3);font-size:13px}

/* ── drawer มือถือ ── */
.t-drawer-backdrop{position:fixed;inset:0;z-index:290;background:rgba(10,10,11,.38);opacity:0;transition:opacity .25s}
.t-drawer-backdrop.open{opacity:1}
/* visibility:hidden ตอนปิด — กันกด Tab แล้วโฟกัสลิงก์ใน drawer ที่มองไม่เห็น */
.t-drawer{position:fixed;top:0;right:0;z-index:300;width:min(88vw,360px);height:100vh;height:100dvh;background:#fff;display:flex;flex-direction:column;transform:translateX(104%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s;box-shadow:-24px 0 60px -30px rgba(10,10,11,.35)}
.t-drawer.open{transform:translateX(0);visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
.t-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;height:var(--nav-h);border-bottom:1px solid var(--border)}
.t-drawer-body{flex:1;overflow-y:auto;padding:12px 12px 20px;overscroll-behavior:contain}
.t-drawer-link,.t-drawer-cat{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:12px;text-decoration:none;color:var(--text);font-size:14.5px;font-weight:500}
.t-drawer-link:hover,.t-drawer-cat:hover{background:var(--bg-mute)}
.t-drawer-link i{width:38px;height:38px;border-radius:10px;background:var(--bg-mute);display:grid;place-items:center;font-size:20px}
.t-drawer-link span,.t-drawer-cat span:nth-child(2){flex:1;min-width:0}
.t-drawer-link em,.t-drawer-cat em{font-style:normal;font-size:12px;font-weight:600;color:var(--text-3);background:var(--bg-mute);border-radius:100px;padding:2px 9px}
.t-drawer-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:16px 10px 6px}
.t-drawer-cat-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:19px;flex-shrink:0;background:color-mix(in srgb,var(--cat) 12%,#fff);color:var(--cat)}
.t-drawer-foot{display:grid;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
.t-drawer-foot .btn{width:100%;padding:13px 16px}

/* ═════════════ HERO (hub) ═════════════ */
section.t-hero{position:relative;padding:60px 0 44px;text-align:center;background:radial-gradient(ellipse 760px 360px at 50% -40px,var(--accent-soft),transparent 70%)}
.t-hero h1{font-size:clamp(28px,4.6vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin-bottom:14px}
.t-hero .hl{position:relative;display:inline-block;z-index:1;white-space:nowrap}
.t-hero .hl::before{content:'';position:absolute;inset:auto -4px 5px -4px;height:.42em;background:linear-gradient(90deg,var(--accent),var(--accent-dark));z-index:-1;transform:skewX(-6deg);border-radius:3px}
.t-hero p{font-size:16px;color:var(--text-2);max-width:580px;margin:0 auto 26px}
.t-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:100px;background:#fff;border:1px solid var(--border);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-bottom:16px}
.t-eyebrow i{color:var(--accent-dark)}
.t-hero-search{max-width:580px;margin:0 auto;position:relative}
.t-hero-search input{width:100%;height:58px;padding:0 22px 0 52px;border:1.5px solid var(--border-strong);border-radius:100px;font-family:inherit;font-size:15.5px;background:#fff;box-shadow:0 16px 36px -20px rgba(10,10,11,.18);-webkit-appearance:none;appearance:none}
.t-hero-search input::-webkit-search-cancel-button{display:none}
.t-hero-search input:focus{outline:none;border-color:var(--text)}
.t-hero-search > i{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:21px;pointer-events:none} /* direct child เท่านั้น */
.t-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.t-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#fff;border:1px solid var(--border);border-radius:100px;font-size:12.5px;color:var(--text-2);text-decoration:none;white-space:nowrap;flex-shrink:0;scroll-snap-align:start;transition:border-color .15s,background .15s}
.t-chip i{color:var(--cat,var(--text-2));font-size:15px}
.t-chip:hover{border-color:color-mix(in srgb,var(--cat,#000) 35%,var(--border));background:color-mix(in srgb,var(--cat,#000) 5%,#fff)}
.t-hero-stats{display:flex;justify-content:center;gap:10px 22px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:var(--text-3)}
.t-hero-stats b{color:var(--text);font-weight:700}

/* ═════════════ SECTION ═════════════ */
section.t-section{padding:40px 0;position:relative}
.t-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}
.t-section-head h2{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.t-section-head a{font-size:13px;font-weight:600;color:var(--text-2);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:2px}
.t-section-head a:hover{color:var(--text)}
.t-h2-icon{width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--accent);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.t-count{font-size:12.5px;font-weight:600;color:var(--text-2);background:var(--bg-mute);border-radius:100px;padding:4px 12px;white-space:nowrap}

/* ═════════════ CARDS ═════════════ */
.t-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.t-tcard{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:172px;padding:16px 16px 18px;border-radius:18px;text-decoration:none;color:var(--text);
  background:linear-gradient(155deg,color-mix(in srgb,var(--cat) 8%,#fff) 0%,#fff 60%);
  border:1px solid color-mix(in srgb,var(--cat) 14%,var(--border));
  transition:transform .18s,box-shadow .18s,border-color .18s}
.t-tcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cat) 32%,var(--border));box-shadow:0 20px 38px -24px color-mix(in srgb,var(--cat) 55%,transparent)}
.t-tcard-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.t-tcard-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;flex-shrink:0;background:#fff;color:var(--cat);border:1px solid color-mix(in srgb,var(--cat) 20%,var(--border));box-shadow:0 6px 14px -10px color-mix(in srgb,var(--cat) 70%,transparent)}
.t-tcard-pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:100px;white-space:nowrap;background:color-mix(in srgb,var(--cat) 10%,#fff);color:color-mix(in srgb,var(--cat) 78%,#000);border:1px solid color-mix(in srgb,var(--cat) 18%,transparent)}
.t-tcard-spacer{flex:1}
.t-tcard-hot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--accent-soft);color:#6B7F00;flex-shrink:0}
.t-tcard-go{font-size:21px;color:var(--text-3);transform:rotate(-45deg);transition:transform .18s,color .18s;flex-shrink:0}
.t-tcard:hover .t-tcard-go{color:var(--cat);transform:rotate(-45deg) translateX(3px)}
.t-tcard-name{font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.t-tcard-desc{margin-top:5px;font-size:12.8px;line-height:1.5;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t-tcard-ghost{position:absolute;right:-12px;bottom:-16px;z-index:-1;font-size:96px;line-height:1;color:color-mix(in srgb,var(--cat) 9%,transparent);transform:rotate(-8deg);pointer-events:none}
.t-tcard.is-soon{opacity:.6}
.t-tcard.is-soon:hover{transform:none;box-shadow:none}

/* ── การ์ดแนะนำ (ใหญ่) ── */
.t-cards-featured .t-feature{grid-column:span 2;grid-row:span 2}
.t-feature{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:10px;padding:26px 26px 24px;border-radius:22px;text-decoration:none;color:var(--text);
  background:linear-gradient(140deg,color-mix(in srgb,var(--cat) 15%,#fff) 0%,color-mix(in srgb,var(--cat) 5%,#fff) 55%,#fff 100%);
  border:1px solid color-mix(in srgb,var(--cat) 24%,var(--border));transition:transform .18s,box-shadow .18s}
.t-feature:hover{transform:translateY(-3px);box-shadow:0 26px 50px -28px color-mix(in srgb,var(--cat) 60%,transparent)}
.t-feature-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.t-feature-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:100px;background:var(--accent);color:var(--ink)}
.t-feature h3{font-size:clamp(22px,2.3vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:16px 0 8px}
.t-feature p{font-size:14px;color:var(--text-2);line-height:1.55}
.t-feature-go{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:14px;font-weight:700;color:color-mix(in srgb,var(--cat) 75%,#000)}
.t-feature-go i{font-size:20px;transition:transform .18s}
.t-feature:hover .t-feature-go i{transform:translateX(4px)}
.t-feature-art{position:relative;height:220px}
.t-feature-art::before{content:'';position:absolute;inset:10% 6%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cat) 22%,transparent) 0%,transparent 68%)}
.t-feature-paper{position:absolute;left:50%;top:50%;width:154px;height:186px;margin:-93px 0 0 -77px;padding:14px;border-radius:18px;background:#fff;border:1px solid color-mix(in srgb,var(--cat) 18%,var(--border));box-shadow:0 26px 40px -24px rgba(10,10,11,.35);transform:rotate(7deg);display:flex;flex-direction:column;gap:9px;transition:transform .25s}
.t-feature:hover .t-feature-paper{transform:rotate(3deg) translateY(-4px)}
.t-feature-paper small{font-size:10px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-feature-paper i{font-size:58px;line-height:1;color:var(--cat);margin:4px 0}
.t-feature-paper span{display:block;height:8px;border-radius:6px;background:color-mix(in srgb,var(--cat) 14%,var(--bg-mute))}
.t-feature-paper span+span{width:62%}
.t-feature-check{position:absolute;right:16%;bottom:14%;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:var(--cat);color:#fff;border:4px solid #fff;box-shadow:0 10px 22px -10px rgba(10,10,11,.4)}

/* ── ตัวกรองหมวด (ติดใต้ header ตอนเลื่อน) ── */
.t-filter{position:sticky;top:var(--nav-h);z-index:20;gap:8px;padding:10px 0;margin-bottom:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media (min-width:761px){ .t-filter{flex-wrap:wrap} } /* เดสก์ท็อปใช้เมาส์ เลื่อนแนวนอนลำบาก → ให้ขึ้นบรรทัดใหม่ */
.t-filter-btn{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;scroll-snap-align:start;padding:8px 14px;border-radius:100px;border:1px solid var(--border);background:#fff;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.t-filter-btn i{font-size:16px;color:var(--cat,var(--text-2))}
.t-filter-btn em{font-style:normal;font-size:11px;font-weight:600;color:var(--text-3);background:var(--bg-mute);border-radius:100px;padding:1px 7px}
.t-filter-btn:hover{border-color:var(--border-strong)}
.t-filter-btn.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.t-filter-btn.is-active i{color:var(--accent)}
.t-filter-btn.is-active em{background:rgba(255,255,255,.16);color:#fff}

/* ── tile หมวด ── */
.t-cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.t-cat-tile{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;text-decoration:none;color:var(--text);
  background:linear-gradient(120deg,color-mix(in srgb,var(--cat) 7%,#fff),#fff 70%);
  border:1px solid color-mix(in srgb,var(--cat) 14%,var(--border));transition:transform .15s,box-shadow .15s,border-color .15s}
.t-cat-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--cat) 32%,var(--border));box-shadow:var(--shadow-soft)}
.t-cat-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;flex-shrink:0;background:var(--cat);color:#fff}
.t-cat-body{flex:1;min-width:0}
.t-cat-tile h3{font-size:14.5px;font-weight:700;margin-bottom:2px}
.t-cat-tile p{font-size:12.3px;color:var(--text-3);line-height:1.45;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.t-cat-count{min-width:32px;height:26px;padding:0 9px;border-radius:100px;display:grid;place-items:center;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--cat) 12%,#fff);color:color-mix(in srgb,var(--cat) 80%,#000);flex-shrink:0}

/* ═════════════ TOOL PAGE ═════════════ */
.t-crumb{font-size:12.5px;color:var(--text-3);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.t-crumb a{color:var(--text-2);text-decoration:none}
.t-crumb a:hover{text-decoration:underline}
.t-crumb i{font-size:13px}

.t-themed{--cat:#0A0A0B}
.t-tool-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;margin-top:16px;padding:30px 30px 28px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--cat) 11%,#fff) 0%,color-mix(in srgb,var(--cat) 3%,#fff) 60%,var(--bg-soft) 100%);
  border:1px solid color-mix(in srgb,var(--cat) 20%,var(--border))}
.t-tool-hero::after{content:'';position:absolute;z-index:-1;right:-40px;top:-50px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cat) 20%,transparent) 0%,transparent 70%);pointer-events:none}
.t-tool-hero .t-tool-ghost{position:absolute;z-index:-1;right:24px;bottom:-30px;font-size:140px;line-height:1;color:color-mix(in srgb,var(--cat) 13%,transparent);transform:rotate(-8deg);pointer-events:none;user-select:none}
.t-tool-hero h1{font-size:clamp(23px,3vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px;display:flex;align-items:center;gap:14px}
.t-tool-hero p{color:var(--text-2);font-size:14.5px;max-width:680px}
.t-tool-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;flex-shrink:0;background:var(--cat);color:#fff;box-shadow:0 12px 24px -10px color-mix(in srgb,var(--cat) 65%,transparent)}
.t-cat-chip{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:4px 12px;border-radius:100px;font-size:12px;font-weight:700;text-decoration:none;
  background:#fff;color:color-mix(in srgb,var(--cat) 82%,#000);border:1px solid color-mix(in srgb,var(--cat) 25%,transparent)}
.t-cat-chip:hover{background:color-mix(in srgb,var(--cat) 10%,#fff)}

.t-tool-body{padding:24px 0 30px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.t-panel{background:#fff;border:1px solid var(--border);border-top:3px solid var(--cat,var(--ink));border-radius:18px;padding:24px;box-shadow:0 20px 40px -34px rgba(10,10,11,.25)}
.t-panel img,.t-panel canvas,.t-panel svg{max-width:100%}
.t-panel pre{white-space:pre-wrap;word-break:break-word}
.t-panel table{min-width:100%}
.t-field{margin-bottom:16px}
.t-field label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.t-field input[type=text],.t-field input[type=number],.t-field input[type=search],.t-field input[type=email],.t-field textarea,.t-field select{width:100%;padding:11px 14px;border:1px solid var(--border-strong);border-radius:10px;font-family:inherit;font-size:14.5px;background:var(--bg-soft);color:var(--text)}
.t-field input:focus,.t-field textarea:focus,.t-field select:focus{outline:none;border-color:var(--cat,var(--text));background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--cat,#000) 14%,transparent)}
.t-field textarea{resize:vertical;min-height:110px}
.t-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.t-result{margin-top:18px;padding:18px;background:color-mix(in srgb,var(--cat,#000) 3%,var(--bg-soft));border:1px solid var(--border);border-left:3px solid color-mix(in srgb,var(--cat,#000) 40%,var(--border));border-radius:12px}
.t-result .t-result-num{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em;word-break:break-word}
.t-result .t-result-lab{font-size:12.5px;color:var(--text-3);margin-top:2px}
.t-copy-btn{margin-top:10px}
.t-radio-group{display:flex;gap:8px;flex-wrap:wrap}
.t-radio-group label{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--border-strong);border-radius:100px;font-size:13px;cursor:pointer;background:#fff}
.t-radio-group label:has(input:checked){border-color:var(--cat,var(--ink));background:color-mix(in srgb,var(--cat,#000) 7%,#fff)}
.t-radio-group input{accent-color:var(--cat,var(--ink))}
.t-radio-group input:checked+span{font-weight:700}

.t-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--nav-h) + 16px)}
.t-related{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px}
.t-related h3{font-size:12px;font-weight:700;color:color-mix(in srgb,var(--cat,#000) 70%,#000);letter-spacing:.06em;text-transform:uppercase;margin:4px 6px 8px}
.t-related a{display:flex;align-items:center;gap:10px;padding:7px 6px;text-decoration:none;color:var(--text);font-size:13.5px;border-radius:10px}
.t-related a:hover{background:color-mix(in srgb,var(--cat,#000) 7%,#fff)}
.t-related-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex-shrink:0;background:color-mix(in srgb,var(--cat) 12%,#fff);color:var(--cat)}
.t-upsell{background:var(--ink);color:#fff;border-radius:16px;padding:20px;position:relative;overflow:hidden}
.t-upsell::before{content:'';position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(212,255,62,.22),transparent 70%)}
.t-upsell i{position:relative;color:var(--accent);font-size:24px;margin-bottom:8px;display:block}
.t-upsell h3{position:relative;font-size:15px;font-weight:700;margin-bottom:6px}
.t-upsell p{position:relative;font-size:12.5px;color:#c6c8ce;margin-bottom:14px;line-height:1.5}
section.t-related-cards{display:none;padding:10px 0 20px}

.t-content{margin-top:8px}
.t-content h2{font-size:19px;font-weight:800;margin:30px 0 12px;letter-spacing:-.01em;border-left:3px solid var(--cat,var(--ink));padding-left:10px}
.t-content p{color:var(--text-2);margin-bottom:12px;font-size:14.5px}
.t-content ul,.t-content ol{color:var(--text-2);font-size:14.5px;margin:0 0 12px 20px}
.t-content li{margin-bottom:6px}
.t-faq-item{border-top:1px solid var(--border);padding:14px 0}
.t-faq-item summary{font-weight:600;cursor:pointer;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.t-faq-item summary::-webkit-details-marker{display:none}
.t-faq-item summary::after{content:'+';font-size:20px;color:var(--text-3);flex-shrink:0}
.t-faq-item[open] summary::after{content:'−'}
.t-faq-item p{margin-top:8px;color:var(--text-2);font-size:14.5px}

/* ═════════════ WAITLIST / FOOTER ═════════════ */
.t-waitlist{background:linear-gradient(135deg,var(--ink) 0%,#1a1c22 100%);border-radius:24px;padding:44px 40px;color:#fff;text-align:center;position:relative;overflow:hidden}
.t-waitlist::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 320px at 85% 0%,rgba(212,255,62,.2),transparent 70%)}
.t-waitlist h2{position:relative;font-size:24px;font-weight:800;margin-bottom:8px}
.t-waitlist p{position:relative;color:#b6b9c2;margin-bottom:22px;font-size:14.5px}
.t-waitlist-form{position:relative;display:flex;gap:8px;max-width:440px;margin:0 auto}
.t-waitlist-form input{flex:1;min-width:0;padding:13px 16px;border-radius:10px;border:none;font-family:inherit;font-size:14px}
.t-waitlist-form input:focus{outline:2px solid var(--accent)}

footer.t-footer{background:transparent;border-top:1px solid var(--border);padding:40px 0 26px;margin-top:24px}
.t-footer-cols{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:28px;margin-bottom:26px}
.t-footer-brand p{font-size:13px;color:var(--text-3);line-height:1.65;max-width:280px;margin-top:12px}
.t-footer-cols h4{font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:10px;letter-spacing:.06em;text-transform:uppercase}
.t-footer-cols a{display:block;font-size:13px;color:var(--text-2);text-decoration:none;padding:4px 0}
.t-footer-cols a:hover{color:var(--text)}
.t-footer-cols .t-logo{display:inline-flex;padding:0}
.t-footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--text-3);border-top:1px solid var(--border);padding-top:18px}
.t-footer-bottom a{color:var(--text-3);text-decoration:none}
.t-footer-bottom a:hover{color:var(--text)}

/* ═════════════ RESPONSIVE ═════════════ */
@media (max-width:1100px){
  .t-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .t-cards-featured .t-feature{grid-row:span 1}
}
@media (max-width:960px){
  .t-tool-body{grid-template-columns:minmax(0,1fr)}
  .t-sidebar{position:static}
  .t-sidebar .t-related{display:none}
  section.t-related-cards{display:block}
  .t-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .t-footer-brand{grid-column:1/-1}
}
@media (max-width:860px){
  :root{--nav-h:60px}
  .t-nav-inner{padding:0 16px;gap:10px}
  .t-nav-links{display:none}
  .t-nav-actions{display:flex}
  .t-search{display:none}
  /* ปุ่มค้นหาบนมือถือ → กางช่องค้นหาเต็มความกว้างใต้ header */
  nav.t-nav.search-open .t-search{display:block;position:absolute;left:12px;right:12px;top:calc(100% + 8px);max-width:none;padding:8px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 50px -20px rgba(10,10,11,.3)}
  nav.t-nav.search-open .t-search > i{left:22px}
  nav.t-nav.search-open .t-search .t-kbd{display:none}
  nav.t-nav.search-open .t-search input{height:46px;font-size:16px;background:var(--bg-mute)}
  nav.t-nav.search-open .t-search-results{left:-1px;right:-1px;top:calc(100% + 6px)}
}
@media (max-width:760px){
  .container{padding:0 16px}
  .t-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .t-cards-featured .t-feature{grid-column:1/-1}
  section.t-section{padding:30px 0}
  .t-section-head h2{font-size:18px;gap:8px}
  .t-h2-icon{width:30px;height:30px;font-size:16px;border-radius:9px}

  section.t-hero{padding:34px 0 26px}
  .t-hero h1{font-size:clamp(26px,7.4vw,34px)}
  .t-br-desk{display:none}
  .t-hero p{font-size:14.5px;margin-bottom:20px}
  .t-hero-search input{height:52px;font-size:16px;padding-left:48px}
  .t-chips{flex-wrap:nowrap;justify-content:flex-start;margin:16px -16px 0;padding:0 16px 2px}
  .t-hero-stats{font-size:12px;gap:6px 14px;margin-top:16px}

  .t-tcard{min-height:150px;padding:14px 13px 15px;border-radius:16px}
  .t-tcard-top{margin-bottom:10px}
  .t-tcard-icon{width:38px;height:38px;font-size:19px;border-radius:11px}
  .t-tcard-name{font-size:14px}
  .t-tcard-desc{font-size:12px}
  .t-tcard-ghost{font-size:78px}

  .t-feature{padding:18px 16px 18px 18px;gap:4px;border-radius:20px}
  .t-feature h3{font-size:21px;margin:12px 0 6px}
  .t-feature p{font-size:13px}
  .t-feature-go{margin-top:12px;font-size:13px}
  .t-feature-art{height:160px}
  .t-feature-paper{width:108px;height:134px;margin:-67px 0 0 -54px;padding:10px;gap:6px;border-radius:14px}
  .t-feature-paper i{font-size:40px}
  .t-feature-paper span{height:6px}
  .t-feature-check{width:34px;height:34px;font-size:20px;border-width:3px;right:8%;bottom:10%}

  .t-filter{margin:0 -16px 10px;padding:10px 16px}
  .t-cat-grid{grid-template-columns:minmax(0,1fr)}

  /* หน้า tool */
  .t-crumb{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;font-size:12px}
  .t-crumb::-webkit-scrollbar{display:none}
  .t-tool-hero{padding:20px 18px 20px;border-radius:18px;margin-top:12px}
  .t-tool-hero h1{font-size:22px;gap:12px}
  .t-tool-hero p{font-size:13.5px}
  .t-tool-hero .t-tool-ghost{font-size:100px;right:8px;bottom:-22px}
  .t-tool-icon{width:44px;height:44px;font-size:22px;border-radius:12px}
  .t-tool-body{padding:16px 0 20px;gap:18px}
  .t-panel{padding:16px;border-radius:16px}
  .t-result{padding:14px}
  .t-result .t-result-num{font-size:22px}
  /* input ต่ำกว่า 16px ทำให้ iOS ซูมหน้าจอเองตอนแตะช่องกรอก */
  .t-field input,.t-field textarea,.t-field select,.t-panel input[type=text],.t-panel input[type=search]{font-size:16px}
  .t-panel .btn{min-height:44px}
  .t-content h2{font-size:17px}
  .t-cards-rail{display:flex;gap:12px;margin:0 -16px;padding:2px 16px 6px}
  .t-cards-rail .t-tcard{flex:0 0 72%;scroll-snap-align:start}

  .t-waitlist{padding:30px 18px;border-radius:20px}
  .t-waitlist h2{font-size:20px}
  .t-waitlist-form{flex-direction:column}
  .t-waitlist-form .btn{width:100%;padding:14px}
  .t-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-footer-bottom{flex-direction:column}
}
@media (max-width:560px){
  .t-row{grid-template-columns:minmax(0,1fr)}
  /* แถวที่ tool กำหนดคอลัมน์เองแบบ inline (เช่น รายการสินค้าในใบเสนอราคา) — แตกเป็น 2 คอลัมน์ ชื่อเต็มแถว */
  .t-panel .t-row[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important}
  .t-panel .t-row[style*="grid-template-columns"] > :first-child{grid-column:1/-1}
  .t-radio-group label{padding:8px 12px;font-size:12.5px}
  .t-panel div:has(> #swCanvas){max-width:100%;height:auto!important;aspect-ratio:1/1}
  #swCanvas{width:100%;height:auto}
}
@media (max-width:480px){
  .t-tcard-pill{display:none}
  .t-logo-text small{display:none}
}
@media (max-width:340px){
  .t-cards{grid-template-columns:minmax(0,1fr)}
  .t-feature{grid-template-columns:minmax(0,1fr)}
  .t-feature-art{display:none}
}

/* เบราว์เซอร์เก่าที่ไม่รองรับ color-mix — ถอยไปใช้โทนกลางของ design system (ยังใช้งานได้ครบ) */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .t-tcard,.t-cat-tile,.t-feature,.t-tool-hero{background:#fff;border-color:var(--border)}
  .t-tcard-icon,.t-related-icon,.t-drawer-cat-icon{background:var(--bg-mute);color:var(--text);border-color:var(--border)}
  .t-tcard-pill,.t-cat-chip,.t-cat-count{background:var(--bg-mute);color:var(--text-2);border-color:var(--border)}
  .t-tcard-ghost,.t-tool-hero .t-tool-ghost{color:rgba(10,10,11,.05)}
  .t-feature-check,.t-tool-icon,.t-cat-icon{background:var(--ink);color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ในหมวด "ยอดนิยม" ทุกใบเป็นตัวยอดนิยมอยู่แล้ว ดาวซ้ำทุกใบดูรก */
.t-cards-featured .t-tcard-hot{display:none}

/* ── แท็บภายใน tool (เช่น หมวดอีโมจิ) — เดสก์ท็อปขึ้นบรรทัดใหม่ · มือถือเลื่อนแนวนอน ไม่กินพื้นที่หลายแถว ── */
.t-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
@media (max-width:760px){
  .t-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:2px 16px 4px;scroll-snap-type:x proximity}
  .t-tabs::-webkit-scrollbar{display:none}
}

/* ── ปุ่มเลือกไฟล์ (input type=file) ให้เข้ากับ design system แทนหน้าตาดั้งเดิมของเบราว์เซอร์ ── */
.t-panel input[type=file]{width:100%;font-family:inherit;font-size:13px;color:var(--text-2);padding:10px!important;border:1.5px dashed color-mix(in srgb,var(--cat,#000) 30%,var(--border-strong))!important;border-radius:12px!important;background:color-mix(in srgb,var(--cat,#000) 3%,#fff)!important;cursor:pointer}
.t-panel input[type=file]::file-selector-button{font-family:inherit;font-weight:600;font-size:13px;margin-right:12px;padding:9px 16px;border:none;border-radius:8px;background:var(--ink);color:#fff;cursor:pointer}
.t-panel input[type=file]:hover::file-selector-button{background:#222}

/* แถบเลื่อน/checkbox/radio ใช้สีหมวดแทนสีฟ้าดั้งเดิมของเบราว์เซอร์ */
.t-panel input[type=range],.t-panel input[type=checkbox],.t-panel input[type=radio]{accent-color:var(--cat,var(--ink))}
.t-panel input[type=range]{width:100%}