/* ============================================================
   AI TOOLS DIRECTORY (/tools) — reads theme tokens only
============================================================ */
.tl-page { padding-bottom: 48px; }
.tl-crumb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink3); padding-top: 16px; }
.tl-crumb a { color: var(--ink2); }
.tl-crumb i { font-size: 9px; }
.tl-draft { margin-top: 12px; padding: 8px 12px; border: 1px dashed var(--warn); color: var(--warn); border-radius: 6px; font-size: 13px; }

/* logo badge */
.tl-logo { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--link-soft); color: var(--ink); font: 700 17px 'Outfit', system-ui, sans-serif; overflow: hidden; }
.tl-logo--img { background: #fff; border: 1px solid var(--line); padding: 5px; }
.tl-logo--img img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 5px; }
.tl-logo--sm { width: 28px; height: 28px; border-radius: 7px; font-size: 12px; }
.tl-logo--sm.tl-logo--img { padding: 3px; }
.tl-logo--lg { width: 72px; height: 72px; border-radius: 16px; font-size: 28px; }
.tl-logo--lg.tl-logo--img { padding: 9px; }

/* pills */
.tl-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tl-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 1.7; padding: 0 8px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink2); white-space: nowrap; }
.tl-pill--free { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tl-pill--freemium { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.tl-pill--th { color: var(--ink); background: var(--link-soft); border-color: transparent; }
a.tl-pill:hover { border-color: var(--hover-line); }

/* hub */
.tl-hero { text-align: center; padding: 32px 0 8px; }
.tl-hero h1 { font-size: 32px; line-height: 1.3; font-weight: 700; margin: 0; }
.tl-hero > p { color: var(--ink2); max-width: 620px; margin: 8px auto 18px; }
.tl-search { display: flex; align-items: center; max-width: 620px; margin: 0 auto; border: 1px solid var(--field-line); background: var(--field); border-radius: 8px; overflow: hidden; }
.tl-search > i { color: var(--ink3); padding: 0 4px 0 14px; }
.tl-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; padding: 12px 10px; outline: none; }
.tl-search button { align-self: stretch; border: 0; background: var(--accent); color: var(--accent-ink); font: 600 14px inherit; padding: 0 20px; cursor: pointer; }
.tl-quick { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--ink3); margin-top: 12px; }
.tl-quick a { color: var(--ink2); border-bottom: 1px dotted var(--ink3); }
@media (max-width: 640px) { .tl-hero h1 { font-size: 25px; } }

.tl-sec { display: flex; align-items: baseline; gap: 12px; margin: 36px 0 14px; }
.tl-sec h2 { font-size: 19px; font-weight: 700; margin: 0; }
.tl-sec small { color: var(--ink3); font-size: 13px; }
.tl-sec > a { margin-left: auto; font-size: 13px; color: var(--ink2); white-space: nowrap; }

.tl-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tl-cat { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.tl-cat:hover { border-color: var(--hover-line); }
.tl-cat__ic { width: 38px; height: 38px; border-radius: 9px; background: var(--link-soft); display: grid; place-items: center; color: var(--ink); flex: none; }
.tl-cat b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.tl-cat small { font-size: 12px; color: var(--ink3); }
@media (max-width: 900px) { .tl-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .tl-cats { grid-template-columns: minmax(0, 1fr); } }

.tl-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tl-pick { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--panel); }
.tl-pick h3 { font-size: 15px; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.tl-pick h3 i { color: var(--ink3); font-size: 13px; }
.tl-pick ol { list-style: none; margin: 0; padding: 0; }
.tl-pick li a { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.tl-pick li a:hover .tl-pick__name { opacity: .7; }
.tl-pick li small { margin-left: auto; color: var(--ink3); font-size: 12px; white-space: nowrap; }
.tl-rank { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font: 700 11px 'Outfit', sans-serif; background: var(--link-soft); color: var(--ink2); flex: none; }
.tl-rank.is-top { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 900px) { .tl-picks { grid-template-columns: minmax(0, 1fr); } }

/* tool cards */
.tl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
@media (max-width: 640px) { .tl-grid { grid-template-columns: minmax(0, 1fr); } }
.tl-tool { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tl-tool:hover .tl-tool__name { opacity: .7; }
.tl-tool__name { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.4; }
.tl-tool__tag { color: var(--ink2); font-size: 13.5px; line-height: 1.55; margin: 2px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-empty { grid-column: 1 / -1; text-align: center; color: var(--ink3); padding: 40px 0; }

/* list */
.tl-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; margin-top: 18px; }
.tl-side { position: sticky; top: 16px; align-self: start; font-size: 13.5px; }
.tl-side h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin: 0 0 8px; font-weight: 600; }
.tl-side ul { list-style: none; margin: 0 0 22px; padding: 0; }
.tl-side a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; color: var(--ink2); }
.tl-side a i { width: 16px; text-align: center; color: var(--ink3); }
.tl-side a b { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--ink3); }
.tl-side a:hover { color: var(--ink); }
.tl-side a.is-on { background: var(--link-soft); color: var(--ink); font-weight: 600; }
.tl-bar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tl-bar h1 { font-size: 22px; font-weight: 700; margin: 0; }
.tl-bar small { color: var(--ink3); }
.tl-sort { margin-left: auto; }
.tl-sort select { font: 400 13px 'IBM Plex Sans Thai', system-ui, sans-serif; color: var(--ink2); background: var(--field); border: 1px solid var(--field-line); border-radius: 6px; padding: 5px 8px; }
.tl-catdesc { color: var(--ink2); font-size: 14px; margin: 10px 0 0; }
.tl-mcats, .tl-mfilters { display: none; }
@media (max-width: 900px) {
    .tl-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .tl-side { display: none; }
    .tl-mcats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; padding-bottom: 2px; }
    .tl-mcats::-webkit-scrollbar { display: none; }
    .tl-mcats a, .tl-mfilters a { border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 13px; color: var(--ink2); white-space: nowrap; }
    .tl-mcats a.is-on, .tl-mfilters a.is-on { background: var(--link-soft); color: var(--ink); font-weight: 600; border-color: transparent; }
    .tl-mfilters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
}

/* detail */
.tl-head { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.tl-head h1 { font-size: 28px; line-height: 1.25; font-weight: 700; margin: 0; }
.tl-head__tag { color: var(--ink2); font-size: 15px; margin: 4px 0 10px; }
@media (max-width: 760px) {
    .tl-head { grid-template-columns: 72px minmax(0, 1fr); }
    .tl-head__cta { grid-column: 1 / -1; }
    .tl-head__cta .pt-btn { width: 100%; justify-content: center; }
}
.tl-dt { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; margin-top: 24px; }
@media (max-width: 900px) { .tl-dt { grid-template-columns: minmax(0, 1fr); } }
.tl-dt__main h2 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; }
.tl-dt__main h2:first-child { margin-top: 0; }
.tl-dt__main > p { color: var(--ink2); line-height: 1.75; }
.tl-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tl-use { border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-size: 13.5px; }
.tl-use b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.tl-use span { color: var(--ink2); }
@media (max-width: 560px) { .tl-uses { grid-template-columns: minmax(0, 1fr); } }
.tl-thai { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tl-thai__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; align-items: center; }
.tl-thai__row:first-child { border-top: 0; }
.tl-thai__row > span { color: var(--ink3); }
.tl-stars { letter-spacing: 1px; color: var(--ink); }
.tl-stars i { font-style: normal; color: var(--line); }
.tl-pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tl-pc ul { list-style: none; margin: 0; padding: 0; }
.tl-pc li { display: flex; gap: 8px; padding: 5px 0; color: var(--ink2); font-size: 14px; }
.tl-pc .fa-check { color: var(--ok); margin-top: 6px; font-size: 12px; }
.tl-pc .fa-xmark { color: var(--ink3); margin-top: 6px; font-size: 12px; }
@media (max-width: 560px) { .tl-pc { grid-template-columns: minmax(0, 1fr); } }
.tl-plans-wrap { overflow-x: auto; }
.tl-plans { width: 100%; border-collapse: collapse; font-size: 14px; }
.tl-plans th, .tl-plans td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tl-plans th { font-size: 12px; color: var(--ink3); font-weight: 600; background: var(--band); }
.tl-plans td:nth-child(2) { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; white-space: nowrap; }
.tl-note { font-size: 12.5px; color: var(--ink3); margin-top: 8px; }
.tl-box { border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 14px; background: var(--panel); }
.tl-box h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin: 0 0 10px; font-weight: 600; }
.tl-box dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; margin: 0; }
.tl-box dt { color: var(--ink3); }
.tl-box dd { text-align: right; margin: 0; color: var(--ink); }
.tl-alt { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.tl-box h2 + .tl-alt { border-top: 0; }
.tl-alt small { margin-left: auto; color: var(--ink3); font-size: 12px; }
.tl-rel { display: block; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); line-height: 1.5; }
.tl-box h2 + .tl-rel { border-top: 0; }
.tl-verify { font-size: 12.5px; color: var(--ink3); line-height: 1.6; }
.tl-verify a { color: var(--ink2); text-decoration: underline; }