/* ===== ชุดสีกลางของทั้งเว็บ — เดิมประกาศซ้ำทุกหน้า 7 แบบไม่ตรงกัน ===== */
:root{--accent:#dd5b00;--accent-soft:rgba(221,91,0,.08);--accent-strong:#a84500;--bg:#f6f5f4;--code:#f4f2f0;--code-ink:#31302e;--dim:#a39e98;--dim-soft:rgba(97,93,89,.06);--faint:#a39e98;--grad:#dd5b00;--ink:#1a1918;--line:#e7e4e1;--line2:#efedea;--muted:#615d59;--panel:#fff;--panel2:#ffffff;--ready:#1a9e39;--ready-soft:rgba(26,158,57,.10);--shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.06),0 20px 48px rgba(0,0,0,.06);--shadow-sm:0 .3px 1px rgba(0,0,0,.02),0 1px 3px rgba(0,0,0,.03),0 4px 14px rgba(0,0,0,.04);--warn:#c2410c;--warn-soft:rgba(194,65,12,.09);}
@media (prefers-color-scheme:dark){:root{--accent:#ff7d3a;--accent-soft:rgba(255,125,58,.14);--accent-strong:#ff9861;--bg:#191817;--code:#141210;--code-ink:#d7d2cc;--dim:#78726b;--dim-soft:rgba(168,162,155,.12);--faint:#78726b;--grad:#ff7d3a;--ink:#f2f0ee;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.055);--muted:#a8a29b;--panel:#232120;--panel2:#232120;--ready:#3dda8a;--ready-soft:rgba(61,218,138,.13);--shadow:0 2px 8px rgba(0,0,0,.45),0 20px 48px rgba(0,0,0,.5);--shadow-sm:0 1px 3px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);--warn:#ff8a4c;--warn-soft:rgba(255,138,76,.12);}}
:root[data-theme="light"]{--accent:#dd5b00;--accent-soft:rgba(221,91,0,.08);--accent-strong:#a84500;--bg:#f6f5f4;--code:#f4f2f0;--code-ink:#31302e;--dim:#a39e98;--dim-soft:rgba(97,93,89,.06);--faint:#a39e98;--grad:#dd5b00;--ink:#1a1918;--line:#e7e4e1;--line2:#efedea;--muted:#615d59;--panel:#fff;--panel2:#ffffff;--ready:#1a9e39;--ready-soft:rgba(26,158,57,.10);--shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.06),0 20px 48px rgba(0,0,0,.06);--shadow-sm:0 .3px 1px rgba(0,0,0,.02),0 1px 3px rgba(0,0,0,.03),0 4px 14px rgba(0,0,0,.04);--warn:#c2410c;--warn-soft:rgba(194,65,12,.09);}
:root[data-theme="dark"]{--accent:#ff7d3a;--accent-soft:rgba(255,125,58,.14);--accent-strong:#ff9861;--bg:#191817;--code:#141210;--code-ink:#d7d2cc;--dim:#78726b;--dim-soft:rgba(168,162,155,.12);--faint:#78726b;--grad:#ff7d3a;--ink:#f2f0ee;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.055);--muted:#a8a29b;--panel:#232120;--panel2:#232120;--ready:#3dda8a;--ready-soft:rgba(61,218,138,.13);--shadow:0 2px 8px rgba(0,0,0,.45),0 20px 48px rgba(0,0,0,.5);--shadow-sm:0 1px 3px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);--warn:#ff8a4c;--warn-soft:rgba(255,138,76,.12);}
/* ===== ฐานร่วมของทุกหน้า — ย้ายมาจาก <style> ที่เคยซ้ำอยู่ 16 หน้า ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
body{font-family:"Inter","IBM Plex Sans Thai","Leelawadee UI",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;letter-spacing:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{max-width:100%}
.mono{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Code","Consolas",monospace;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:3px solid var(--bg)}


.tn{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line2)}
.tn-in{max-width:1200px;margin:0 auto;padding:0 28px;height:64px;display:flex;align-items:center;justify-content:space-between}
.tn-brand{flex:1 1 0;display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:.5px;color:var(--ink);text-decoration:none}
.tn-brand small{font-weight:700;color:var(--accent)}
.tn-brand .lm,.tn-brand .ld{width:42px;height:42px;display:block}
.tn-brand .ld{display:none}
@media(prefers-color-scheme:dark){.tn-brand .lm{display:none}.tn-brand .ld{display:block}}
:root[data-theme="light"] .tn-brand .lm{display:block}:root[data-theme="light"] .tn-brand .ld{display:none}
:root[data-theme="dark"] .tn-brand .lm{display:none}:root[data-theme="dark"] .tn-brand .ld{display:block}
.tn-links{flex:0 0 auto;display:flex;gap:26px;align-items:center;justify-content:center}
.tn-links>a{color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer}
.tn-links>a:hover{color:var(--ink)}.tn-links>a.on{color:var(--accent);font-weight:600}
.tn-drop{position:relative;height:64px;display:flex;align-items:center}
.tn-drop>a{color:var(--muted);font-size:14px;font-weight:500;cursor:pointer}
.tn-drop:hover>a,.tn-drop>a.on{color:var(--accent);font-weight:600}
.tn-menu{position:absolute;top:calc(100% - 10px);left:-10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);padding:6px;min-width:168px;display:none;flex-direction:column;gap:2px;z-index:70}
.tn-drop:hover .tn-menu{display:flex}
.tn-menu a{padding:8px 12px;border-radius:8px;font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:8px}
.tn-menu a .ni{flex:0 0 auto;width:16px;height:16px}
.tn-menu a:hover{background:var(--bg);color:var(--ink)}
.tn-right{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:9px}
.tn-tog{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;cursor:pointer;background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);transition:color .15s,border-color .15s}
.tn-tog:hover{color:var(--ink);border-color:var(--accent)}
.tn-tog svg{width:17px;height:17px;display:none}
.tn-tog .ic-moon{display:block}
@media(prefers-color-scheme:dark){.tn-tog .ic-moon{display:none}.tn-tog .ic-sun{display:block}}
:root[data-theme="light"] .tn-tog .ic-moon{display:block}:root[data-theme="light"] .tn-tog .ic-sun{display:none}
:root[data-theme="dark"] .tn-tog .ic-moon{display:none}:root[data-theme="dark"] .tn-tog .ic-sun{display:block}
.tn-up{position:relative;height:64px;display:flex;align-items:center}
.tn-cta{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;padding:10px 17px;border-radius:8px;text-decoration:none;white-space:nowrap;box-shadow:var(--shadow-sm)}
.tn-cta:hover{background:var(--accent-strong);text-decoration:none;color:#fff}
.tn-burger{display:none;cursor:pointer;background:var(--panel);border:1px solid var(--line);color:var(--ink);width:38px;height:38px;border-radius:8px;font-size:19px;place-items:center;user-select:none}
.tn-burger:hover{border-color:var(--accent)}
.tn-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.tn-mob{display:none;flex-direction:column;padding:8px 18px 16px;border-top:1px solid var(--line2);gap:2px;background:var(--bg)}
.tn-mob a{padding:13px 6px;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2)}
.tn-mob a:last-child{border-bottom:none}
.tn-mob a.sub{padding-left:22px;font-size:14px;color:var(--muted)}
.tn-mob a.on{color:var(--accent);font-weight:600}
.tn-mob .lbl{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--faint);padding:14px 6px 4px}
.tn-mob button.mobup{text-align:left;background:none;border:none;border-bottom:1px solid var(--line2);cursor:pointer;padding:13px 6px;font-size:16px;font-weight:500;color:var(--ink);font-family:inherit;width:100%}
.tn-cb:checked~.tn-mob{display:flex}
@media(max-width:1024px){.tn-links{display:none}.tn-cta{display:none}.tn-auth{display:none}.tn-burger{display:grid}}
@media(min-width:1025px){.tn-mob{display:none!important}}
/* auth (login/profile) */
.tn-auth{display:flex;align-items:center}
.tn-profwrap{position:relative;display:flex;align-items:center}
.tn-login{cursor:pointer;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:600;padding:9px 15px;border-radius:8px;font-family:inherit;white-space:nowrap}
.tn-login:hover{border-color:var(--accent);color:var(--accent)}
.tn-prof{cursor:pointer;display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);padding:4px 12px 4px 5px;border-radius:16px;font-family:inherit;color:var(--ink)}
.tn-prof:hover{border-color:var(--accent)}
.tn-prof img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--line2)}
.tn-prof span{font-size:14px;font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-profmenu{position:absolute;top:calc(100% + 7px);right:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);padding:6px;min-width:210px;max-width:290px;display:none;flex-direction:column;gap:2px;z-index:80}
.tn-profwrap.open .tn-profmenu{display:flex}
.tn-profmenu a{padding:10px 12px;border-radius:8px;font-size:14px;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:10px}
.tn-profmenu a:hover{background:var(--bg);color:var(--ink)}
.tn-profmenu a svg{width:17px;height:17px;flex:0 0 auto}
.tn-mobauth a{display:flex;align-items:center;gap:10px}
.tn-mobauth a svg{width:18px;height:18px;flex:0 0 auto}
.tn-profmenu-foot{display:flex;align-items:center;gap:6px;justify-content:center;border-top:1px solid var(--line2);margin-top:4px;padding:9px 6px 3px}
.tn-profmenu-foot a{padding:2px 4px;font-size:12.5px;color:var(--faint)}
.tn-profmenu-foot a:hover{color:var(--accent);background:none}
.tn-profmenu-foot span{color:var(--faint);font-size:11px}
/* Loadout ของฉัน ในเมนูโปรไฟล์ */
.tn-mylo-lbl{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);padding:7px 12px 4px}
.tn-profmenu .tn-mylo{display:flex;flex-direction:column;gap:1px;max-height:208px;overflow-y:auto}
.tn-profmenu .tn-mylo a{padding:8px 12px;font-size:14px;justify-content:space-between;gap:8px}
.tn-profmenu .tn-mylo a .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}
.tn-mylo .mylo-row{display:flex;align-items:center;border-radius:8px}
.tn-mylo .mylo-row:hover{background:var(--bg)}
.tn-profmenu .tn-mylo .mylo-lnk{flex:1;min-width:0;padding:8px 4px 8px 12px;font-size:14px;color:var(--muted);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-mylo .mylo-row:hover .mylo-lnk{color:var(--ink)}
.tn-profmenu .tn-mylo .mylo-ed,.tn-mylo .mylo-del{flex:0 0 auto;display:grid;place-items:center;width:28px;height:30px;border:none;background:none;cursor:pointer;color:var(--faint);border-radius:8px;padding:0}
.tn-profmenu .tn-mylo .mylo-ed:hover{color:var(--accent);background:var(--accent-soft)}
.tn-mylo .mylo-del:hover{color:#e5484d;background:rgba(229,72,77,.1)}
.tn-mylo .mylo-ed svg,.tn-mylo .mylo-del svg{width:15px;height:15px}
.tn-mylo-msg{padding:5px 12px 10px;font-size:12.5px;color:var(--faint)}
.tn-profmenu .tn-mylo-new{border-top:1px solid var(--line2);margin-top:4px;color:var(--accent);font-weight:600}
.tn-profmenu .tn-mylo-new:hover{background:var(--accent-soft);color:var(--accent)}
/* ── motion: เผยตอนเลื่อนถึง + nav ยกตัวตอน scroll ── */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.tn{transition:box-shadow .25s ease,border-color .25s ease}
.tn.scrolled{box-shadow:0 1px 3px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05)}
.tn-cta{transition:transform .15s ease,box-shadow .15s ease}
.tn-cta:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(221,91,0,.28)}
.tn-links>a{position:relative}
.tn-links>a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--accent);border-radius:8px;transition:right .22s cubic-bezier(.22,.61,.36,1)}
.tn-links>a:hover::after,.tn-links>a.on::after{right:0}
.tn-drop>a{position:relative}
.tn-drop>a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--accent);border-radius:8px;transition:right .22s cubic-bezier(.22,.61,.36,1)}
.tn-drop:hover>a::after,.tn-drop>a.on::after{right:0}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1!important;transform:none!important;transition:none!important}
  .tn-cta:hover{transform:none}
  .tn-links>a::after,.tn-drop>a::after{transition:none}
}
/* upload modal */
.up-scrim{position:fixed;inset:0;background:rgba(20,17,14,.56);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:8vh 18px 24px;overflow-y:auto}
.up-scrim.open{display:flex}
.up-modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.24);width:100%;max-width:480px;padding:26px 26px 24px;position:relative;animation:upIn .18s ease}
@keyframes upIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.up-x{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--faint);font-size:16px;cursor:pointer;line-height:1}
.up-x:hover{color:var(--ink)}
.up-badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.5px;color:var(--accent);background:var(--accent-soft);padding:5px 11px;border-radius:16px;margin-bottom:12px}
.up-modal h3{font-size:19px;font-weight:700;letter-spacing:-.3px;margin-bottom:5px;color:var(--ink)}
.up-sub{font-size:14px;color:var(--muted);margin-bottom:18px;line-height:1.5}
.up-modal label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin:13px 0 5px}
.up-modal label .opt{font-weight:400;color:var(--faint)}
.up-modal input,.up-modal textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 13px;font-size:14px;color:var(--ink);font-family:inherit}
.up-modal textarea{min-height:70px;resize:vertical;line-height:1.5}
.up-modal input:focus,.up-modal textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.up-submit{width:100%;margin-top:20px;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:13px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.up-submit:hover{background:var(--accent-strong)}
.up-submit:disabled{opacity:.6;cursor:default}
.up-hint{margin-top:6px;font-size:12.5px;color:var(--ready)}.up-hint b{color:var(--ink)}
.up-msg{margin-top:13px;font-size:14px;text-align:center;display:none}
.up-msg.ok{display:block;color:var(--ready)}.up-msg.err{display:block;color:var(--warn)}
.up-done{text-align:center;padding:14px 0 4px}
.up-done .big{font-size:44px;margin-bottom:8px}
.up-done h4{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:6px}
.up-done p{font-size:14px;color:var(--muted);margin-bottom:18px}
.ni{width:16px;height:16px;flex:0 0 auto}
.tn-menu a,.tn-mob a{display:flex;align-items:center;gap:9px}
.tn-cta .ni{width:15px;height:15px}
/* ===== ป้ายความน่าเชื่อถือ 3 ระดับ (ใช้ทุก catalog) ===== */
.vbadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:16px;line-height:1.5;white-space:nowrap;border:1px solid;vertical-align:middle}
.vbadge svg{width:12px;height:12px;flex:0 0 auto}
.vb-official{color:#fff;background:var(--accent);border-color:var(--accent)}
.vb-verified{color:var(--ready);background:var(--ready-soft);border-color:var(--ready)}
.vb-community{color:var(--muted);background:var(--panel);border-color:var(--line)}
/* legend อธิบาย 3 ระดับ */
.vlegend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:12.5px;color:var(--muted)}
.vlegend .vl{display:inline-flex;align-items:center;gap:6px}
.vlegend b{font-weight:600;color:var(--ink)}
/* ===== ชุดดีไซน์ร่วม (.cal) — ใช้ได้ทุกหน้า แก้ที่นี่ที่เดียว ===== */
/* ════ ทดลองสไตล์แบบ Cal.com ════
     ตามสเปก: ผ้าใบขาว · ปุ่มหลักดำ #111 · การ์ดเทาอ่อน #f5f5f5 · footer ดำ
     display = Inter 600 + letter-spacing ติดลบ (แทน Cal Sans ที่เป็นฟอนต์ลิขสิทธิ์)
     สลับพื้นผิว ขาว → เทา → ขาว → ดำ ไม่ซ้ำสองแถบติดกัน */

  .cal{
    --ink:#111111; --body:#374151; --muted:#6b7280; --muted-soft:#686f79;
    --faint:#d1d5db; --ok:#15803d;
    --hairline:#e5e7eb; --hairline-soft:#f3f4f6;
    --canvas:#ffffff; --soft:#f8f9fa; --card:#f5f5f5; --strong:#e5e7eb;
    --dark:#101010; --dark-up:#1a1a1a; --on-dark-soft:#a1a1aa;
    /* 10% — ส้มแบบ Shopee (#ee4d2d) เลือกความสวยเป็นหลัก เหมือนที่ทุกแบรนด์ทำ
       ปุ่ม 3.66 (เท่า Shopee) · ส่วนตัวหนังสือส้มบนพื้นขาวใช้โทนเข้มกว่า
       เพราะตัวอักษรเส้นบาง อ่านยากกว่าปุ่มที่เป็นพื้นทึบ */
    --brand:#ee4d2d; --cta:#ee4d2d; --cta-hover:#d63c1e;
    --cta-ink:#c2410c;                    /* ส้มสำหรับตัวหนังสือ/ลิงก์ (5.18 ผ่าน) */
    --cta-soft:rgba(238,77,45,.09);
    background:var(--canvas); color:var(--body);
  }
  .cal ::selection{background:#111;color:#fff}

  /* ── type: display ใช้ 600 + tracking ติดลบ ตามสเปก ── */
  .cal .d-xl{font-size:64px;font-weight:600;line-height:1.05;letter-spacing:-2px;color:var(--ink)}
  .cal .d-lg{font-size:48px;font-weight:600;line-height:1.1;letter-spacing:-1.5px;color:var(--ink)}
  .cal .d-sm{font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.5px;color:var(--ink)}
  .cal .t-md{font-size:18px;font-weight:600;line-height:1.4;color:var(--ink)}
  .cal .t-sm{font-size:16px;font-weight:600;line-height:1.4;color:var(--ink)}
  .cal .b-md{font-size:16px;font-weight:400;line-height:1.5;color:var(--body)}
  .cal .b-sm{font-size:14px;font-weight:400;line-height:1.5;color:var(--muted)}
  .cal .cap{font-size:13px;font-weight:500;line-height:1.4;color:var(--muted)}

  /* ── ปุ่ม: ดำ 8px สูง 40 ── */
  .cal .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-size:14px;font-weight:600;line-height:1;height:40px;padding:0 20px;
    border-radius:8px;text-decoration:none;border:1px solid transparent;transition:background .15s}
  .cal .btn-p{background:var(--cta);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}
  .cal .btn-p:active{background:var(--cta-hover)}
  .cal .btn-s{background:var(--canvas);color:var(--ink);border-color:var(--strong)}
  .cal .lnk{font-size:14px;font-weight:600;color:var(--cta-ink);text-decoration:none}

  /* ── จังหวะ: 96px ระหว่างแถบ ── */
  .cal .band{padding:96px 0}
  .cal .band.gray{background:var(--soft)}
  .cal .in{max-width:1200px;margin:0 auto;padding:0 24px}
  .cal .head{max-width:640px;margin-bottom:48px}
  .cal .head.mid{margin-left:auto;margin-right:auto;text-align:center}
  .cal .head p{margin-top:12px}
  .cal .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .cal .note{margin-top:20px;font-size:13px;color:var(--muted-soft)}

  /* ── ป้าย ── */
  .cal .pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);
    color:var(--ink);font-size:13px;font-weight:500;border-radius:9999px;padding:4px 12px}
  .cal .pill.brand{background:var(--cta-soft);color:var(--cta-ink)}
  .cal .dot{width:6px;height:6px;border-radius:9999px;display:inline-block}

  /* ── CTA + footer ── */
  .cal .ctacard{background:var(--card);border-radius:12px;padding:48px;text-align:center}
  .cal .ctacard p{margin:12px 0 24px}


  /* ── การ์ด Loadout: คอนเทนต์หลักของเว็บ ต้องอ่านออกในแวบเดียวว่าข้างในมีอะไร ── */
  .cal .locards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .cal .lo{display:flex;flex-direction:column;background:var(--canvas);
    border:1px solid var(--hairline);border-radius:14px;padding:20px;text-decoration:none;
    color:inherit;transition:transform .18s cubic-bezier(.22,.61,.36,1),
    box-shadow .18s ease,border-color .18s ease}
  .cal .lo:hover{transform:translateY(-4px);border-color:var(--faint);
    box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 28px rgba(0,0,0,.09)}

  .cal .lo-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .cal .lo-cat{font-size:12px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);
    border-radius:9999px;padding:4px 11px}
  .cal .lo-hz{font-size:12.5px;color:var(--muted-soft);font-weight:600}
  .cal .lo h3{font-size:19px;font-weight:600;letter-spacing:-.3px;line-height:1.35;
    color:var(--ink);margin-bottom:7px}
  .cal .lo p{font-size:14px;line-height:1.55;color:var(--muted);margin-bottom:16px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* แถบสัดส่วน — เห็นทันทีว่าชุดนี้หนักไปทางไหน */
  .cal .lo-bar{display:flex;height:6px;border-radius:9999px;overflow:hidden;gap:2px;margin-bottom:10px}
  .cal .lo-bar i{display:block}

  /* โชว์ของจริงในชุด ไม่ใช่แค่ตัวเลข */
  .cal .lo-peek{list-style:none;background:var(--soft);border-radius:10px;padding:11px 12px;
    margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
  .cal .lo-peek li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--body);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cal .lo-peek li b{width:6px;height:6px;border-radius:9999px;flex:0 0 auto}
  .cal .lo-peek .more{color:var(--muted-soft);font-size:12.5px;padding-left:14px}

  .cal .lo-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:auto;padding-top:14px;border-top:1px solid var(--hairline-soft)}
  .cal .lo-tools{display:inline-flex;align-items:center;gap:7px;color:var(--faint)}
  .cal .lo:hover .lo-tools{color:var(--muted-soft)}
  .cal .lo-tools svg{transition:color .18s ease}
  .cal .lo-go{font-size:13.5px;font-weight:600;color:var(--cta-ink)}
  .cal .lo-go .ar2{display:inline-block;transition:transform .2s ease}
  .cal .lo:hover .lo-go .ar2{transform:translateX(4px)}
  .cal .lo-tools{color:var(--muted-soft)}          /* เดิม var(--faint) จางจนแทบไม่เห็น */
  .cal .lo:hover .lo-tools{color:var(--body)}

  /* ── การ์ด Loadout: ตัดตารางประเภทออก เหลือสิ่งที่คนใหม่ต้องรู้ ── */
  .cal .lo-meta{display:flex;align-items:baseline;gap:8px;margin:12px 0 14px;flex-wrap:wrap}
  .cal .lo-meta b{font-size:13px;font-weight:600;color:var(--ink)}
  .cal .lo-meta span{font-size:12.5px;color:var(--muted-soft)}
  .cal .lo-meta span::before{content:"·";margin-right:8px;color:var(--strong)}


  /* ── โหมดมืด: หน้าแรกออกแบบบนพื้นขาว จึงต้องประกาศค่าคู่ให้ครบทุก token ──
     ส้มปุ่มคงเดิม (#ee4d2d) เพราะตัวหนังสือขาวบนพื้นส้มอ่านได้เท่าเดิม
     แต่ "ส้มที่เป็นตัวหนังสือ" ต้องสว่างขึ้นถึงจะผ่านบนพื้นมืด */
  @media (prefers-color-scheme:dark){ .cal{
    --ink:#f3f4f6; --body:#c9ced6; --muted:#9aa2ad; --muted-soft:#8b939e;
    --faint:#565f6b; --ok:#4ade80;
    --hairline:rgba(255,255,255,.11); --hairline-soft:rgba(255,255,255,.06);
    --canvas:#0f1216; --soft:#15181d; --card:#1c2128; --strong:rgba(255,255,255,.20);
    --brand:#ff6a45; --cta:#ee4d2d; --cta-hover:#ff5f3d; --cta-ink:#ff8f6a;
    --cta-soft:rgba(255,106,69,.15);
  } }
  :root[data-theme="dark"] .cal{
    --ink:#f3f4f6; --body:#c9ced6; --muted:#9aa2ad; --muted-soft:#8b939e;
    --faint:#565f6b; --ok:#4ade80;
    --hairline:rgba(255,255,255,.11); --hairline-soft:rgba(255,255,255,.06);
    --canvas:#0f1216; --soft:#15181d; --card:#1c2128; --strong:rgba(255,255,255,.20);
    --brand:#ff6a45; --cta:#ee4d2d; --cta-hover:#ff5f3d; --cta-ink:#ff8f6a;
    --cta-soft:rgba(255,106,69,.15);
  }
  :root[data-theme="light"] .cal{
    --ink:#111111; --body:#374151; --muted:#6b7280; --muted-soft:#686f79;
    --faint:#d1d5db; --ok:#15803d;
    --hairline:#e5e7eb; --hairline-soft:#f3f4f6;
    --canvas:#ffffff; --soft:#f8f9fa; --card:#f5f5f5; --strong:#e5e7eb;
    --brand:#ee4d2d; --cta:#ee4d2d; --cta-hover:#d63c1e; --cta-ink:#c2410c;
    --cta-soft:rgba(238,77,45,.09);
  }
  /* ซ่อนไว้ก่อนแล้วค่อยเผย - ต้องอยู่ไฟล์เดียวกับกฎ .on และมาก่อนมัน
   เพราะ specificity เท่ากัน (0,3,0) ถ้าแยกไฟล์แล้วสลับลำดับ เนื้อหาจะหายถาวร */
.cal.mo .rv{opacity:0;transform:translateY(14px)}
.cal.mo .stg>*{opacity:0;transform:translateY(12px)}
.cal.mo .demo-line{opacity:0;transform:translateY(6px)}
.cal .rv.on{animation:revIn .55s cubic-bezier(.22,.61,.36,1) forwards}
.cal .rv.on:nth-child(2){animation-delay:.06s}
.cal .rv.on:nth-child(3){animation-delay:.12s}
.cal .rv.on:nth-child(4){animation-delay:.18s}
.cal .rv.on:nth-child(5){animation-delay:.24s}
.cal .stg.on>*{animation:revIn .5s cubic-bezier(.22,.61,.36,1) forwards}
.cal .stg.on>*:nth-child(1){animation-delay:.04s}
.cal .stg.on>*:nth-child(2){animation-delay:.09s}
.cal .stg.on>*:nth-child(3){animation-delay:.14s}
.cal .stg.on>*:nth-child(4){animation-delay:.19s}
.cal .stg.on>*:nth-child(5){animation-delay:.24s}
.cal .stg.on>*:nth-child(6){animation-delay:.29s}
.cal .stg.on>*:nth-child(7){animation-delay:.34s}
.cal .stg.on>*:nth-child(8){animation-delay:.39s}
@keyframes revIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* ตาข่ายกันหน้าว่าง: ถ้าเบราว์เซอร์ไม่รู้จัก animation ก็อย่าซ่อนอะไรเลย */
@supports not (animation-name:revIn){.cal.mo .rv,.cal.mo .stg>*,.cal.mo .demo-line{
opacity:1;transform:none}}
  .cal .btn-p{transition:background .15s,transform .15s ease,box-shadow .15s ease}
  .cal .btn-p:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(238,77,45,.32)}
  .cal .lnk{transition:gap .2s ease}
  .cal .lnk .ar2{display:inline-block;transition:transform .2s ease}
  .cal .lnk:hover .ar2{transform:translateX(4px)}

/* global footer — พื้นมืดเสมอทั้งสองธีม จึงกำหนดสีตรงๆ ไม่ผ่าน token */
.sfoot{background:#111827;color:#9ca3af;margin-top:0;display:block;text-align:left;
padding:64px 0 32px;font-size:14px}
.sfoot .wrap{padding-top:0;padding-bottom:0}
.sfoot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.sfoot-brand p{font-size:14px;line-height:1.65;color:#9ca3af;max-width:34ch}
.sfoot-logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;
letter-spacing:-.5px;color:#fff;text-decoration:none;margin-bottom:10px}
.sfoot-logo img{width:26px;height:26px;border-radius:6px;display:block}
.sfoot-col b{color:#fff;font-size:14px;font-weight:600;display:block;margin-bottom:14px}
.sfoot-col a{display:block;color:#9ca3af;text-decoration:none;font-size:14px;line-height:2.1}
.sfoot-col a:hover{color:#ff7a5c}
.sfoot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
max-width:1200px;margin:40px auto 0;padding:24px 24px 0;
border-top:1px solid rgba(255,255,255,.09);font-size:13px;color:#8a919c}
.sfoot-bottom a{color:#9ca3af}.sfoot-bottom a:hover{color:#ff7a5c}
@media(max-width:900px){.sfoot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sfoot-grid{grid-template-columns:1fr;gap:26px}}

/* ---- ช่องค้นหาหัวหน้าคลัง (ใช้ร่วมทุกหน้า) ---- */
.hsearch{display:flex;align-items:center;gap:10px;max-width:580px;margin:24px auto 20px;background:var(--panel);border:1.5px solid var(--line);border-radius:13px;padding:13px 17px;transition:border-color .15s,box-shadow .2s;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.hsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.hsearch svg{width:18px;height:18px;color:var(--faint);flex:0 0 auto;transition:color .15s}
.hsearch:focus-within svg{color:var(--accent)}
.hsearch .pmt{font-size:16px;opacity:.55;flex:0 0 auto}
.hsearch input{flex:1;border:none;background:none;font-size:15px;color:var(--ink);font-family:inherit;outline:none;min-width:0}
.hsearch input::placeholder{color:var(--faint);opacity:1}

/* ---- โครงคลัง: sidebar ซ้าย + กริดขวา (ใช้ร่วมทุกหน้าคลัง) ---- */
.shop{display:grid;grid-template-columns:214px 1fr;gap:30px;align-items:start;padding:6px 0 46px}
.side{position:sticky;top:82px;display:flex;flex-direction:column;gap:3px}
.side .sl{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--faint);margin:0 0 8px 6px}
.side .sl.gap{margin-top:20px}
.side button{display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;color:var(--muted);background:none;border:none;padding:9px 12px;border-radius:8px;width:100%;transition:.12s}
.side button:hover{background:var(--panel);color:var(--ink)}
.side button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side button svg{width:17px;height:17px;flex:0 0 auto}
.side button span:first-of-type{flex:1}
.side button .cc{font-size:11px;color:var(--faint);font-family:"IBM Plex Mono",monospace}
.side button.on .cc{color:var(--accent)}
.cmain{min-width:0}
.cbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cbar .ct{font-size:12.5px;color:var(--faint)}
@media(max-width:860px){
  .shop{grid-template-columns:1fr;gap:16px}
  .side{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .side .sl{width:100%;margin:4px 0 2px 2px}
  .side .sl.gap{margin-top:10px}
  .side button{width:auto;padding:7px 12px;border:1px solid var(--line);border-radius:16px;font-size:12.5px}
}

/* ---- แถบเทียบ Prompt / Rule / Agent : บอกว่าแต่ละแบบไป "อยู่ที่ไหน" และ "ทำงานเมื่อไหร่" ---- */
.tcmp{max-width:1200px;margin:0 auto 30px;padding:0 28px}
.tcmp-h{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.tcmp-h::after{content:"";flex:1;height:1px;background:var(--line)}
.tcmp-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tcmp-c{display:flex;flex-direction:column;gap:5px;padding:14px 16px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;text-decoration:none;color:inherit;
  border-left:3px solid var(--line);transition:border-color .15s,transform .15s}
.tcmp-c:hover{transform:translateY(-2px)}
.tcmp-c.t-prompt{border-left-color:#3b82f6}
.tcmp-c.t-rule{border-left-color:#8b5cf6}
.tcmp-c.t-agent{border-left-color:var(--accent)}
.tcmp-c.on{background:var(--line2)}
.tcmp-c b{font-size:14px;display:flex;align-items:center;gap:7px}
.tcmp-w{font-size:12.5px;font-weight:600;color:var(--ink);font-family:"IBM Plex Mono",ui-monospace,monospace;word-break:break-all}
.tcmp-t{font-size:12.5px;color:var(--muted);line-height:1.5}
.tcmp-c.on .tcmp-t{color:var(--ink)}
@media(max-width:820px){.tcmp-g{grid-template-columns:1fr}.tcmp{padding:0 20px}}

/* ---- ป้าย "ปลายทาง" บนการ์ด/โมดัล ---- */
.dest{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);
  font-family:"IBM Plex Mono",ui-monospace,monospace;margin:8px 0 2px;
  padding:5px 8px;background:var(--line2);border-radius:8px;word-break:break-all;line-height:1.4}
.dest svg{width:13px;height:13px;flex:0 0 13px;opacity:.7}
.dest b{font-weight:600;color:var(--ink)}
.destx{font-size:12.5px;color:var(--muted);margin:2px 0 12px;line-height:1.55}

/* ---- "งานเดียวกัน คนละแบบ" : สอนความต่างด้วยของจริงที่จับคู่กันได้ ---- */
.sib{display:flex;flex-direction:column;gap:4px;margin:14px 0 4px;padding:12px 14px;
  border:1px dashed var(--line);border-radius:8px;background:var(--line2)}
.sib-h{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
.sib-a{font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}
.sib-a:hover{text-decoration:underline}
.sib-t{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---- เนื้อหาที่เจ้าของ Loadout เขียนเอง (ไม่ได้มาจากคลัง) ---- */
.ownv{margin:9px 0 2px;border:1px dashed var(--accent);border-radius:8px;overflow:hidden;
  background:var(--accent-soft)}
.ownv-h{display:flex;align-items:center;gap:8px;padding:7px 10px;flex-wrap:wrap}
.ownv-tag{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--accent)}
.ownv-d{font-size:11px;color:var(--muted);font-family:"IBM Plex Mono",ui-monospace,monospace;
  word-break:break-all;flex:1;min-width:0}
.ownv-c{cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;color:var(--accent);
  background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:3px 9px;flex:0 0 auto}
.ownv-p{margin:0;padding:10px 12px;background:var(--panel);border-top:1px dashed var(--accent);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;max-height:230px;overflow:auto}

/* ---- ลำดับความสำคัญ: หัวการ์ดต้องเด่นกว่าเนื้อความชัดเจน ---- */
.card h3,.kit h3,.mcpcard h3,.li .nm{font-size:19px;font-weight:700;line-height:1.35;letter-spacing:-.2px}

/* ===== Breadcrumb (ทุกหน้าคู่มือ/คลัง) ===== */
.crumb{max-width:820px;margin:0 auto;padding:20px 24px 0;font-size:13px;color:var(--faint)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:0;margin:0}
.crumb li{display:flex;align-items:center;gap:7px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent);text-decoration:underline}
.crumb li[aria-current]{color:var(--ink);font-weight:600}
.crumb .sep{color:var(--line);font-size:11px}

/* ===== หน้าบทความคู่มือ (Guides) — เลย์เอาต์อ่านสบาย ===== */
.art{max-width:820px;margin:0 auto;padding:8px 24px 24px}
.art-head{padding:22px 0 26px;border-bottom:1px solid var(--line2)}
.art-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.4px;color:var(--accent);text-transform:uppercase;margin-bottom:14px}
.art-head h1{font-size:clamp(30px,4.4vw,44px);font-weight:700;letter-spacing:-1.1px;line-height:1.12;margin-bottom:18px}
.art-lead{font-size:19px;line-height:1.6;color:var(--ink);font-weight:500;
  border-left:3px solid var(--accent);background:var(--accent-soft);padding:14px 18px;border-radius:0 10px 10px 0;margin-bottom:18px}
.art-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--faint)}
.art-meta .dot{opacity:.5}
.art-toc{margin:26px 0 8px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:16px 18px}
.art-toc b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.art-toc ol{list-style:none;counter-reset:t;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 22px}
.art-toc li{counter-increment:t}
.art-toc a{display:flex;gap:9px;font-size:14.5px;color:var(--muted);text-decoration:none;padding:3px 0;line-height:1.4}
.art-toc a::before{content:counter(t,decimal-leading-zero);font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;color:var(--accent);flex:0 0 auto;padding-top:2px}
.art-toc a:hover{color:var(--accent)}
.art-body{padding-top:8px}
.art-body section{padding:30px 0;border-bottom:1px solid var(--line2);scroll-margin-top:80px}
.art-body h2{font-size:24px;font-weight:700;letter-spacing:-.5px;line-height:1.25;margin-bottom:14px}
.art-body h3{font-size:17px;font-weight:700;margin:20px 0 8px}
.art-body p{color:var(--muted);font-size:16.5px;line-height:1.75;margin-bottom:14px}
.art-body p strong,.art-body li strong{color:var(--ink);font-weight:600}
.art-body a{color:var(--accent);text-decoration:none;font-weight:500;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.art-body a:hover{border-bottom-color:var(--accent)}
.art-body ul,.art-body ol{margin:0 0 14px;padding:0;list-style:none}
.art-body ul li{color:var(--muted);font-size:16.5px;line-height:1.7;margin-bottom:9px;padding-left:26px;position:relative}
.art-body ul li::before{content:"";position:absolute;left:7px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.art-body ol{counter-reset:o}
.art-body ol li{counter-increment:o;color:var(--muted);font-size:16.5px;line-height:1.7;margin-bottom:9px;padding-left:34px;position:relative}
.art-body ol li::before{content:counter(o);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:700;display:grid;place-items:center}
.art-body code{font-family:"IBM Plex Mono",monospace;font-size:.86em;background:var(--code);color:var(--code-ink);padding:2px 6px;border-radius:7px;border:1px solid var(--line2)}
.art-body pre{background:var(--code);border:1px solid var(--line);border-radius:10px;padding:15px 17px;overflow-x:auto;margin:6px 0 16px}
.art-body pre code{background:none;border:none;padding:0;font-size:12.5px;line-height:1.7;color:var(--code-ink);white-space:pre}
.art-note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);border-radius:8px;padding:13px 16px;margin:6px 0 16px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.art-note b{color:var(--ink)}
.art-tablewrap{overflow-x:auto;margin:6px 0 16px;border:1px solid var(--line);border-radius:10px}
.art-body table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.art-body th,.art-body td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:top;line-height:1.55}
.art-body thead th{background:var(--code);font-weight:700;color:var(--ink);font-size:13.5px;letter-spacing:.2px}
.art-body tbody tr:last-child td{border-bottom:none}
.art-body td strong{color:var(--ink)}
.art-cta{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 24px;margin:30px 0 10px}
.art-cta h3{font-size:19px;font-weight:700;margin-bottom:16px}
.art-cta-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.art-cta-links a{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 15px;transition:border-color .15s,transform .15s}
.art-cta-links a:hover{border-color:var(--accent);transform:translateY(-1px)}
.art-cta-links a::after{content:"→";margin-left:auto;color:var(--accent);font-weight:400}
.art-cta-links a.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.art-cta-links a.pri::after{color:#fff}
.art-rel{margin:22px 0 6px;padding:20px 0 8px}
.art-rel b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.art-rel-grid{display:flex;flex-wrap:wrap;gap:9px}
.art-rel-grid a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;
  border:1px solid var(--line);border-radius:9px;padding:9px 13px}
.art-rel-grid a:hover{border-color:var(--accent);color:var(--accent)}
.art-rel-grid a .ni{width:15px;height:15px}
@media(max-width:640px){
  .art-toc ol,.art-cta-links{grid-template-columns:1fr}
  .art-lead{font-size:17px}
}
/* ===== หน้า hub คู่มือ (/guides) ===== */
.ghub{max-width:1000px;margin:0 auto;padding:8px 24px 40px}
.ghub-hero{text-align:center;padding:26px 0 34px;border-bottom:1px solid var(--line2)}
.ghub-hero .art-eyebrow{justify-content:center}
.ghub-hero h1{font-size:clamp(30px,4.4vw,44px);font-weight:700;letter-spacing:-1.1px;line-height:1.14;margin-bottom:14px}
.ghub-hero p{font-size:18px;color:var(--muted);max-width:60ch;margin:0 auto;line-height:1.6}
.ghub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:34px 0 8px}
.ghub-card{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px 20px;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.ghub-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ghub-emoji{font-size:26px;line-height:1}
.ghub-card h2{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.3px}
.ghub-card p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0}
.ghub-card .go{margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:600;color:var(--accent)}
@media(max-width:820px){.ghub-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ghub-grid{grid-template-columns:1fr}}