/* สีหลัก */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #1F5C57; --md-primary-fg-color--light: #2E7A73; --md-primary-fg-color--dark: #164440;
  --md-accent-fg-color: #2E7A73; --md-typeset-a-color: #1F5C57;
  --rx-soft: #E3EFEC; --rx-note: #5B4A00; --rx-note-bg: #FBF5D9;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1D3532; --md-primary-fg-color--light: #2A4A46; --md-primary-fg-color--dark: #142624;
  --md-accent-fg-color: #6FC1B6; --md-typeset-a-color: #6FC1B6;
  --rx-soft: #1D3532; --rx-note: #E8D27A; --rx-note-bg: #2E2A16;
}
.md-typeset { font-size: .85rem; line-height: 1.8; }

/* ป้ายตัวอย่าง / ร่าง */
.md-typeset .sample { font-size: .7rem; color: var(--rx-note); background: var(--rx-note-bg); border-radius: 6px; padding: .3rem .7rem; }

/* กล่องข้อมูลหน้า */
.md-typeset .page-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 1.2rem;
  border: 1px solid var(--md-default-fg-color--lightest); border-radius: 8px; padding: .6rem .9rem; font-size: .72rem; }
.md-typeset .page-meta dt { color: var(--md-default-fg-color--light); font-size: .65rem; margin: 0; }
.md-typeset .page-meta dd { margin: 0 0 .3rem; }

/* ปุ่มโหมด */
.md-typeset .mode { display: inline-flex; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 8px; overflow: hidden; }
.md-typeset .mode button { font: inherit; font-size: .72rem; border: 0; background: none; color: inherit; padding: .3rem 1rem; cursor: pointer; }
.md-typeset .mode button[aria-pressed="true"] { background: var(--md-typeset-a-color); color: var(--md-default-bg-color); }
.md-typeset .mode-hint { font-size: .65rem; color: var(--md-default-fg-color--light); margin-top: .3rem; }
body.quick .detail { display: none !important; }

/* ขั้นตอนแบบมีเลขวงกลม */
.md-typeset .steps > ol { list-style: none; counter-reset: s; margin-left: 0; padding: 0; }
.md-typeset .steps > ol > li { counter-increment: s; position: relative; margin: 0; padding: .6rem 0 .6rem 2.6rem;
  border-bottom: 1px dashed var(--md-default-fg-color--lightest); }
.md-typeset .steps > ol > li:last-child { border-bottom: 0; }
.md-typeset .steps > ol > li::before { content: counter(s); position: absolute; left: 0; top: .6rem; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; background: var(--rx-soft); color: var(--md-typeset-a-color); font-weight: 600; display: grid; place-items: center; }
.md-typeset .steps > ol > li > p { margin: .1rem 0; }
.md-typeset .steps p.detail { color: var(--md-default-fg-color--light); font-size: .8rem; }

/* ป้ายลิงก์ไปหน้าโปรแกรม */
.md-typeset a.chip { display: inline-block; font-size: .68rem; line-height: 1.4; padding: .1rem .6rem; margin: .2rem .3rem 0 0;
  border: 1px solid var(--md-typeset-a-color); border-radius: 999px; text-decoration: none; }
.md-typeset a.chip:hover { background: var(--rx-soft); }

/* ภาพหน้าจอ */
.md-typeset figure { margin: .8rem 0 1.2rem; }
.md-typeset figure img { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 6px; }
.md-typeset figcaption { font-size: .68rem; color: var(--md-default-fg-color--light); max-width: none; }

.md-typeset .backlinks { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 8px; padding: .2rem .9rem; }
.md-typeset td.c { text-align: center; font-weight: 600; color: var(--md-typeset-a-color); }

/* ช่องค้นหาภาษาไทย */
.th-search { position: relative; margin-left: auto; margin-right: .6rem; width: min(16rem, 45vw); }
.th-search input { width: 100%; padding: .35rem .7rem; border: 0; border-radius: 6px; font: inherit; font-size: .75rem;
  background: rgba(255,255,255,.18); color: var(--md-primary-bg-color); }
.th-search input::placeholder { color: var(--md-primary-bg-color); opacity: .75; }
.th-search input:focus { outline: none; background: var(--md-default-bg-color); color: var(--md-default-fg-color); }
.th-results { display: none; position: absolute; top: 2.3rem; right: 0; width: min(22rem, 92vw); max-height: 60vh; overflow: auto;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color); border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 10; }
.th-results a { display: block; padding: .5rem .8rem; color: inherit; border-bottom: 1px solid var(--md-default-fg-color--lightest); }
.th-results a:hover, .th-results a:focus { background: var(--rx-soft); }
.th-results span { display: block; }
.th-results .r-sec { font-size: .6rem; color: var(--md-default-fg-color--light); }
.th-results .r-title { font-weight: 600; font-size: .75rem; }
.th-results .r-snip { font-size: .65rem; color: var(--md-default-fg-color--light); line-height: 1.5; }
.th-results mark { background: var(--rx-note-bg); color: var(--rx-note); }
.th-results .empty { padding: .6rem .8rem; font-size: .7rem; color: var(--md-default-fg-color--light); }