/* ============================================================
   Chappa POS — Manual (SEO / SSR edition)
   Layout is a fixed app-shell: a non-scrolling header row on top, then
   the sidebar and the main body as two independent scroll panes that
   fill the rest of the viewport. The content block styles are kept
   identical to the in-app manual so chapters render the same.
   ============================================================ */

:root {
  --m-bg:            #0f0a0a;
  --m-bg-2:          #181414;
  --m-panel:         #1f1c1c;
  --m-panel-2:       #241f1f;
  --m-bar:           rgb(37, 37, 37);
  --m-red:           rgb(168, 9, 9);
  --m-red-dark:      rgb(117, 21, 21);
  --m-red-deep:      rgb(100, 0, 0);
  --m-accent:        #ffae00;
  --m-text:          #f2efed;
  --m-text-dim:      #a7a2a0;
  --m-text-faint:    #6f6a68;
  --m-border:        rgba(255,255,255,0.08);
  --m-border-strong: rgba(255,255,255,0.16);
  --m-link:          #ff7a6b;
  --m-code-bg:       rgba(255,255,255,0.07);
  --m-shadow:        0 6px 24px rgba(0,0,0,0.45);
  --m-sidebar-w:     310px;
  --m-content-max:   880px;
  --m-header-h:      60px;
  --m-radius:        12px;
  --m-font:          'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --m-mono:          'Consolas', 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--m-bg); color: var(--m-text);
  font-family: var(--m-font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow: hidden;
}
body, .m-main, .m-main * { user-select: text; }
a { color: var(--m-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--m-red-dark); border-radius: 6px; border: 2px solid var(--m-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--m-red); }

/* ---------------- Shell ---------------- */
.m-app {
  display: grid;
  grid-template-columns: var(--m-sidebar-w) 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}
.m-nav-toggle { position: absolute; width: 0; height: 0; opacity: 0; }

/* ---------------- Header ---------------- */
.m-header {
  grid-column: 1 / -1; grid-row: 1;
  z-index: 30;
  display: flex; align-items: center; gap: 16px;
  height: var(--m-header-h); padding: 0 18px;
  background: linear-gradient(180deg, var(--m-bar), #1d1d1d);
  border-bottom: 1px solid var(--m-border-strong);
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.m-brand { display: inline-flex; align-items: center; }
.m-logo-fallback { font-weight: 800; font-size: 20px; color: var(--m-red); letter-spacing: .5px; }
.m-brand:hover { text-decoration: none; }
.m-htitle { font-weight: 700; font-size: 18px; color: var(--m-text); white-space: nowrap; }
.m-htitle .m-sub { color: var(--m-text-dim); font-weight: 500; }
.m-header-spacer { flex: 1 1 auto; }

.m-hsearch { position: relative; display: flex; align-items: center; }
.m-hsearch i { position: absolute; left: 12px; color: var(--m-text-faint); pointer-events: none; font-size: 13px; }
.m-hsearch input {
  width: 220px; max-width: 38vw;
  background: var(--m-panel); border: 1px solid var(--m-border-strong); color: var(--m-text);
  border-radius: 10px; padding: 9px 12px 9px 34px; font-size: 16px; font-family: var(--m-font); outline: none;
}
.m-hsearch input:focus { border-color: var(--m-red); box-shadow: 0 0 0 3px rgba(168,9,9,.18); }

.m-hbtn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--m-red-deep); color: #fff; font-weight: 600; font-size: 14px;
  padding: 9px 14px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 0 18px rgba(0,0,0,.35); transition: transform .08s ease, background .15s ease;
}
.m-hbtn:hover { background: var(--m-red); text-decoration: none; transform: translateY(-1px); }
/* mobile floating button that opens the off-canvas chapter list */
.m-burger {
  display: none; position: fixed; z-index: 100000;
  left: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: var(--m-red-deep); color: #fff; font-size: 20px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); box-shadow: var(--m-shadow);
}
.m-burger:active { transform: scale(.95); }

/* ---------------- Sidebar ---------------- */
.m-side {
  grid-column: 1;
  min-height: 0; overflow-y: auto;
  background: var(--m-bg-2); border-right: 1px solid var(--m-border);
  /* top padding clears the floating chappa.ro header */
  padding: 84px 10px 60px;
}
.m-nav { padding: 0 4px; }
.m-nav-chap-row { display: flex; align-items: center; }
.m-nav-chap-btn {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  color: var(--m-text); font-weight: 700; font-size: 14px;
  padding: 10px 8px; border-radius: 8px; text-decoration: none;
}
.m-nav-chap-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-nav-chap-btn:hover { background: rgba(255,255,255,0.05); text-decoration: none; }
.m-nav-chap-btn .m-chap-ico { color: var(--m-red); font-size: 15px; width: 18px; text-align: center; flex: 0 0 auto; }
.m-nav-toggle-btn { background: none; border: none; color: var(--m-text-faint); cursor: pointer; padding: 8px; font-size: 11px; }
.m-nav-toggle-btn .m-chev { transition: transform .15s ease; }
.m-nav-chapter.collapsed .m-chev { transform: rotate(-90deg); }
.m-nav-sections {
  list-style: none; margin: 2px 0 8px 17px; padding: 0 0 0 8px;
  border-left: 1px solid var(--m-border);
}
.m-nav-chapter.collapsed .m-nav-sections { display: none; }
.m-nav-link {
  display: block; padding: 7px 11px; margin: 1px 0; border-radius: 7px;
  color: var(--m-text-dim); font-size: 13.5px; text-decoration: none;
  border-left: 2px solid transparent; margin-left: -1px;
}
.m-nav-link:hover { color: var(--m-text); background: rgba(255,255,255,0.04); text-decoration: none; }
.m-nav-link.active { color: #fff; background: rgba(168,9,9,.18); border-left-color: var(--m-red); font-weight: 600; }

/* "Cuprins" — special first sidebar entry (links to the home/index page) */
.m-nav-cuprins { margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--m-border); }
.m-nav-cuprins .m-chap-ico { color: var(--m-accent); }
.m-nav-cuprins .m-nav-chap-btn[aria-current="page"] { background: rgba(168,9,9,.18); color: #fff; }

/* API (integrators) entry in the table of contents */
.m-nav-api { margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--m-border); }
.m-nav-api .m-chap-ico { color: var(--m-accent); }
.m-nav-api-tag { display: block; font-size: 10.5px; font-weight: 400; color: var(--m-text-faint); text-transform: uppercase; letter-spacing: .4px; }

/* ---------------- Main ---------------- */
.m-main {
  grid-column: 2;
  min-width: 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth;
  display: flex; flex-direction: column;
}

/* ---------------- Video hero (chappa.ro style) ---------------- */
.m-hero {
  position: relative; flex: 0 0 auto;
  height: clamp(270px, 30vh, 420px);
  overflow: hidden; background: #000;
  display: flex; align-items: center; justify-content: center;
  /* top padding keeps the title clear of the floating chappa.ro header */
  padding: 88px 20px 24px;
  border-bottom: 1px solid var(--m-border-strong);
}
.m-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  /* darken only the TOP so the floating header + title stay legible while the
     bottom edge meets the content cleanly — no bottom blur overlay. */
  -webkit-mask-image: none;
}
/* top-only scrim for legibility (does not touch the bottom edge) */
.m-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,0) 68%);
}
.m-hero-inner {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 0 20px;
}
.m-hero-title {
  font-family: 'Oswald', var(--m-font);
  font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  font-size: clamp(38px, 8vw, 92px); line-height: 1; margin: 0; color: #fff;
  text-shadow: 0 2px 26px rgba(0,0,0,.55), 0 0 22px rgba(255,255,255,.18);
}
.m-hero-search { position: relative; width: 100%; max-width: 460px; display: flex; align-items: center; }
.m-hero-search i { position: absolute; left: 16px; color: var(--m-text-faint); font-size: 14px; pointer-events: none; }
.m-hero-search input {
  width: 100%; background: rgba(20,18,18,.72); color: var(--m-text);
  border: 1px solid var(--m-border-strong); border-radius: 25px;
  padding: 13px 18px 13px 40px; font-size: 16px; font-family: var(--m-font);
  outline: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.m-hero-search input::placeholder { color: var(--m-text-dim); }
.m-hero-search input:focus { border-color: var(--m-accent); box-shadow: 0 0 0 3px rgba(255,174,0,.18); }

/* The shared chappa.ro site header is injected into the manual; neutralise
   manual.css's global link + line-height resets so it looks/sizes exactly like
   the header on every other chappa.ro page (white buttons, no underline). */
#mainHeader { line-height: normal; }
#mainHeader a,
#mainHeader .header-button { color: #fff; text-decoration: none; }
#mainHeader .header-button:hover,
#mainHeader .header-button.here { color: orange; text-decoration: none; }

/* Manual ⇄ Tutoriale mode switch (bottom-right of the hero) */
.mode-switch {
  position: absolute; right: 14px; bottom: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 3px; padding: 4px;
  background: rgba(15,10,10,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  font-family: 'Oswald', system-ui, sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.mode-switch .mode-opt {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  color: #d9d2cf; text-decoration: none; font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .8px; line-height: 1; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.mode-switch .mode-opt:hover { color: #fff; text-decoration: none; }
.mode-switch .mode-opt.active {
  background: linear-gradient(135deg, #ffa01e, #ff6b35);
  color: #211405; font-weight: 600;
  box-shadow: 0 2px 10px rgba(255,120,40,.4);
}
.m-main-inner { width: 100%; max-width: var(--m-content-max); margin: 0 auto; padding: 34px 40px 90px; flex: 1; }

.m-crumb { font-size: 13px; color: var(--m-text-dim); margin-bottom: 14px; }
.m-crumb a { color: var(--m-text-dim); }
.m-crumb b { color: var(--m-accent); font-weight: 600; }

.m-chapter-head { border-bottom: 1px solid var(--m-border); padding-bottom: 20px; margin-bottom: 8px; }
.m-chapter-head h1 { font-size: 32px; line-height: 1.2; margin: 0 0 10px; color: #fff; letter-spacing: -.3px; }
.m-chapter-head .m-chapter-lead { font-size: 17px; color: var(--m-text-dim); margin: 0; }
.m-chapter-icon { color: var(--m-red); margin-right: 10px; }

.m-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 13px; color: var(--m-text-faint); }
.m-meta i { color: var(--m-red); margin-right: 4px; }
.m-meta a { color: var(--m-text-dim); }
.m-meta-md:hover { color: #fff; }

/* on-page chapter TOC */
.m-toc { margin: 22px 0 4px; padding: 16px 18px; background: var(--m-panel); border: 1px solid var(--m-border); border-radius: var(--m-radius); }
.m-toc-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--m-accent); margin-bottom: 8px; }
.m-toc-list { margin: 0; padding-left: 22px; columns: 2; column-gap: 28px; }
.m-toc-list li { margin: 4px 0; break-inside: avoid; }
.m-toc-list a { color: var(--m-text); }

/* ---------------- Home ---------------- */
.m-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 10px; }
.m-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--m-panel); border: 1px solid var(--m-border); border-radius: var(--m-radius);
  padding: 18px; color: var(--m-text); text-decoration: none; transition: border-color .15s ease, transform .08s ease;
}
.m-card:hover { border-color: var(--m-red); text-decoration: none; transform: translateY(-2px); }
.m-card-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: rgba(168,9,9,.16); color: var(--m-red);
  display: flex; align-items: center; justify-content: center; font-size: 20px; }
.m-card-body { flex: 1; min-width: 0; }
.m-card-title { font-size: 17px; color: #fff; margin: 0 0 5px; }
.m-card-lead { font-size: 13.5px; color: var(--m-text-dim); margin: 0 0 8px; }
.m-card-meta { font-size: 12px; color: var(--m-text-faint); }
.m-card-arrow { color: var(--m-text-faint); align-self: center; }

/* API card — set apart from the chapter cards (it's for integrators) */
.m-card-api { border-color: rgba(255,174,0,.32); background: linear-gradient(180deg, rgba(255,174,0,.05), var(--m-panel)); }
.m-card-api:hover { border-color: var(--m-accent); }
.m-card-api .m-card-ico { background: rgba(255,174,0,.16); color: var(--m-accent); }
.m-card-api .m-card-meta { color: var(--m-accent); }

/* ---------------- Article (section) view ---------------- */
.m-article-head { border-bottom: 1px solid var(--m-border); padding-bottom: 18px; margin-bottom: 6px; }
.m-article-head h1 { font-size: 30px; line-height: 1.22; margin: 0 0 8px; color: #fff; letter-spacing: -.3px; }
.m-back-chapter { margin-top: 30px; font-size: 14px; }

/* ---------------- Sections & content (identical to in-app manual) ---------------- */
.m-section { padding-top: 26px; scroll-margin-top: 14px; }
.m-section > h2 {
  font-size: 23px; color: #fff; margin: 8px 0 6px; padding-top: 14px; letter-spacing: -.2px;
  display: flex; align-items: center; gap: 10px;
}
.m-section > h2 .m-anchor { opacity: 0; color: var(--m-text-faint); font-size: 16px; text-decoration: none; transition: opacity .12s; }
.m-section > h2:hover .m-anchor { opacity: 1; }
.m-section h3 { font-size: 18px; color: #ffd9b0; margin: 26px 0 6px; scroll-margin-top: 14px; }
.m-section p, .m-article-body p { margin: 10px 0; color: var(--m-text); }
.m-lead { color: var(--m-text-dim); font-size: 16.5px; }

.m-section code, .m-article-body code, .m-fields code, .m-callout code, .m-table code {
  font-family: var(--m-mono); font-size: .88em; background: var(--m-code-bg);
  padding: 1.5px 6px; border-radius: 5px; color: #ffd9b0; border: 1px solid var(--m-border);
}
.m-ui { font-weight: 600; color: #fff; background: rgba(168,9,9,.16); padding: 1px 6px; border-radius: 5px; white-space: nowrap; border: 1px solid rgba(168,9,9,.3); }

.m-list { margin: 10px 0; padding-left: 4px; list-style: none; }
.m-list > li { position: relative; padding: 4px 0 4px 26px; }
.m-list > li::before { content: ""; position: absolute; left: 6px; top: 14px; width: 7px; height: 7px; background: var(--m-red); border-radius: 50%; }
.m-steps { counter-reset: step; margin: 14px 0; padding: 0; list-style: none; }
.m-steps > li { counter-increment: step; position: relative; padding: 4px 0 18px 48px; margin: 0; }
.m-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--m-red-deep); color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 12px rgba(0,0,0,.4);
}
.m-steps > li::after { content: ""; position: absolute; left: 14.5px; top: 30px; bottom: 4px; width: 2px; background: var(--m-border-strong); }
.m-steps > li:last-child::after { display: none; }

.m-fig { margin: 20px 0 24px; }
.m-fig figure { margin: 0; }
.m-fig .m-fig-frame {
  display: block; background: var(--m-panel); border: 1px solid var(--m-border-strong);
  border-radius: var(--m-radius); padding: 8px; overflow: hidden; cursor: zoom-in;
  box-shadow: var(--m-shadow); transition: border-color .15s ease;
}
.m-fig .m-fig-frame:hover { border-color: var(--m-red); }
.m-fig img { display: block; width: 100%; height: auto; border-radius: 7px; }
.m-fig figcaption { margin-top: 9px; font-size: 13.5px; color: var(--m-text-dim); text-align: center; }
.m-fig figcaption b { color: var(--m-accent); font-weight: 600; }
.m-fig.narrow { max-width: 440px; }
.m-fig.mid { max-width: 620px; }

/* ---------------- Video block (YouTube embed) ---------------- */
.m-video { margin: 20px 0 24px; }
.m-video figure { margin: 0; }
.m-video-frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #000; border: 1px solid var(--m-border-strong);
  border-radius: var(--m-radius); overflow: hidden; box-shadow: var(--m-shadow);
}
.m-video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m-video figcaption { margin-top: 9px; font-size: 13.5px; color: var(--m-text-dim); text-align: center; }
.m-video figcaption b { color: var(--m-accent); font-weight: 600; }
.m-video.narrow { max-width: 440px; }
.m-video.mid { max-width: 620px; }

.m-callout { display: flex; gap: 12px; margin: 18px 0; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--m-border-strong); background: var(--m-panel); border-left-width: 4px; }
.m-callout .m-co-ico { font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.m-callout .m-co-body { flex: 1; }
.m-callout .m-co-title { font-weight: 700; margin-bottom: 2px; }
.m-callout p { margin: 4px 0 0; }
.m-callout.tip     { border-left-color: #2ecc71; } .m-callout.tip .m-co-ico { color: #2ecc71; }
.m-callout.note    { border-left-color: #3aa0ff; } .m-callout.note .m-co-ico { color: #3aa0ff; }
.m-callout.info    { border-left-color: #3aa0ff; } .m-callout.info .m-co-ico { color: #3aa0ff; }
.m-callout.warning { border-left-color: var(--m-accent); } .m-callout.warning .m-co-ico { color: var(--m-accent); }
.m-callout.danger  { border-left-color: #ff4d4d; background: rgba(255,77,77,.06);} .m-callout.danger .m-co-ico { color: #ff4d4d; }

.m-fields { margin: 16px 0; border: 1px solid var(--m-border); border-radius: var(--m-radius); overflow: hidden; }
.m-field { display: grid; grid-template-columns: 220px 1fr; border-top: 1px solid var(--m-border); }
.m-field:first-child { border-top: none; }
.m-field .m-f-name { background: var(--m-panel); padding: 12px 14px; font-weight: 600; color: #fff; display: flex; flex-direction: column; gap: 5px; }
.m-field .m-f-desc { padding: 12px 16px; color: var(--m-text); background: rgba(255,255,255,0.012); }
.m-f-tag { align-self: flex-start; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 20px; font-weight: 700; }
.m-f-tag.req { background: rgba(255,77,77,.16); color: #ff8d8d; border: 1px solid rgba(255,77,77,.3); }
.m-f-tag.opt { background: rgba(255,255,255,.07); color: var(--m-text-dim); border: 1px solid var(--m-border); }
.m-f-tag.auto { background: rgba(58,160,255,.14); color: #8fc6ff; border: 1px solid rgba(58,160,255,.3); }

.m-table { margin: 18px 0; overflow-x: auto; border-radius: var(--m-radius); border: 1px solid var(--m-border); }
.m-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.m-table th { background: var(--m-bar); color: #fff; text-align: left; padding: 11px 14px; font-weight: 700; }
.m-table td { padding: 10px 14px; border-top: 1px solid var(--m-border); color: var(--m-text); vertical-align: top; }
.m-table tr:nth-child(even) td { background: rgba(255,255,255,0.014); }

.m-faq { margin: 16px 0; }
.m-faq details { border: 1px solid var(--m-border); border-radius: 10px; margin: 8px 0; background: var(--m-panel); overflow: hidden; }
.m-faq summary { cursor: pointer; padding: 13px 16px; font-weight: 600; color: #fff; list-style: none; display: flex; align-items: center; gap: 10px; }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::before { content: "\f105"; font-family: "Font Awesome 6 Free","FontAwesome"; font-weight: 900; color: var(--m-red); transition: transform .15s; }
.m-faq details[open] summary::before { transform: rotate(90deg); }
.m-faq .m-faq-a { padding: 0 16px 14px 40px; color: var(--m-text); }
.m-faq .m-faq-a p:first-child { margin-top: 0; }

.m-tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.m-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--m-panel); border: 1px solid var(--m-border-strong); border-radius: 20px; padding: 5px 12px; font-size: 13px; color: var(--m-text-dim); }
.m-pill i { color: var(--m-red); }
.m-hr { border: none; border-top: 1px solid var(--m-border); margin: 30px 0; }
.m-kbd { font-family: var(--m-mono); font-size: .82em; background: #2a2624; border: 1px solid var(--m-border-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 7px; color: #fff; }

/* prev / next */
.m-section-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--m-border); }
.m-section-nav a { flex: 1; background: var(--m-panel); border: 1px solid var(--m-border); border-radius: 10px; padding: 14px 16px; color: var(--m-text); }
.m-section-nav a:hover { border-color: var(--m-red); text-decoration: none; }
.m-section-nav .m-sn-label { display: block; font-size: 12px; color: var(--m-text-faint); text-transform: uppercase; letter-spacing: .5px; }
.m-section-nav .m-sn-title { display: block; font-weight: 600; color: #fff; margin-top: 3px; }
.m-section-nav .next { text-align: right; }
.m-section-nav .disabled { flex: 1; opacity: 0; pointer-events: none; }

/* ---------------- Buttons ---------------- */
.m-btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 10px 16px;
  font-weight: 600; font-size: 14px; font-family: var(--m-font); cursor: pointer;
  border: 1px solid var(--m-border-strong); background: var(--m-panel); color: var(--m-text); text-decoration: none;
}
.m-btn:hover { border-color: var(--m-red); color: #fff; text-decoration: none; }
.m-btn.primary { background: var(--m-red-deep); border-color: transparent; color: #fff; }
.m-btn.primary:hover { background: var(--m-red); }

/* ---------------- Search page ---------------- */
.m-search-page { display: flex; gap: 10px; margin-top: 14px; }
.m-search-page input {
  flex: 1; background: var(--m-panel); border: 1px solid var(--m-border-strong); color: var(--m-text);
  border-radius: 10px; padding: 11px 14px; font-size: 16px; font-family: var(--m-font); outline: none;
}
.m-search-page input:focus { border-color: var(--m-red); box-shadow: 0 0 0 3px rgba(168,9,9,.18); }
.m-search-count { color: var(--m-text-dim); font-size: 14px; }
.m-search-results { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.m-result { display: block; background: var(--m-panel); border: 1px solid var(--m-border); border-radius: 10px; padding: 12px 14px; color: var(--m-text); }
.m-result:hover { border-color: var(--m-red); background: var(--m-panel-2); text-decoration: none; }
.m-result .m-r-crumb { font-size: 11px; color: var(--m-accent); text-transform: uppercase; letter-spacing: .4px; }
.m-result .m-r-title { font-weight: 600; font-size: 15px; margin: 2px 0; }
.m-result .m-r-snip { font-size: 13px; color: var(--m-text-dim); line-height: 1.5; }
.m-result mark { background: rgba(255,174,0,.28); color: #ffe9bf; border-radius: 3px; padding: 0 2px; }

/* ---------------- Error ---------------- */
.m-error { text-align: center; padding-top: 50px; }
.m-error-code { font-size: 72px; font-weight: 800; color: var(--m-red); line-height: 1; }

/* ---------------- Footer ---------------- */
.m-footer { border-top: 1px solid var(--m-border); background: var(--m-bg-2); }
.m-footer-inner { max-width: var(--m-content-max); margin: 0 auto; padding: 22px 40px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; font-size: 13px; color: var(--m-text-dim); }
.m-footer-nav { display: flex; gap: 18px; }
.m-footer-nav a { color: var(--m-text-dim); }
.m-footer-dim { margin-left: auto; color: var(--m-text-faint); }

/* ---------------- Lightbox (JS-enhanced) ---------------- */
.m-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
.m-lightbox.show { display: flex; }
.m-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 10px 60px rgba(0,0,0,.7); }
.m-lightbox .m-lb-cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #ddd; font-size: 14px; padding: 0 20px; }
.m-lightbox .m-lb-close { position: absolute; top: 18px; right: 26px; color: #fff; font-size: 30px; background: none; border: none; cursor: pointer; }

/* ---------------- Mobile ---------------- */
.m-backdrop { display: none; }
@media (max-width: 920px) {
  .m-app { grid-template-columns: 1fr; }
  .m-main { grid-column: 1; }
  .m-burger { display: flex; }
  .m-hero { height: clamp(200px, 24vh, 300px); padding-top: 60px; }
  .mode-switch { right: 10px; bottom: 10px; }
  .mode-switch .mode-opt { padding: 5px 11px; font-size: 12px; }
  .m-side {
    position: fixed; top: var(--m-header-h); bottom: 0; left: 0; width: 86vw; max-width: 340px; height: auto;
    padding-top: 18px;
    transform: translateX(-105%); transition: transform .22s ease; z-index: 40; box-shadow: var(--m-shadow);
  }
  #m-nav-toggle:checked ~ .m-app .m-side { transform: translateX(0); }
  #m-nav-toggle:checked ~ .m-app .m-backdrop { display: block; position: fixed; inset: var(--m-header-h) 0 0 0; background: rgba(0,0,0,.5); z-index: 35; }
  .m-main-inner { padding: 22px 18px 80px; overflow-wrap: break-word; }
  .m-footer-inner { padding: 22px 18px; }
  .m-field { grid-template-columns: 1fr; }
  .m-field .m-f-name { border-bottom: 1px solid var(--m-border); }
  .m-toc-list { columns: 1; }
  .m-ui, .m-section code, .m-article-body code, .m-fields code, .m-callout code, .m-table code { white-space: normal; overflow-wrap: anywhere; }
  .m-hsearch input { width: 150px; }
}
@media (max-width: 560px) {
  .m-chapter-head h1 { font-size: 25px; }
  .m-article-head h1 { font-size: 24px; }
  .m-hbtn .label { display: none; }
  .m-section-nav { flex-direction: column; }
}

/* ---------------- Print ---------------- */
@media print {
  @page { margin: 14mm; }
  :root {
    --m-bg: #fff; --m-bg-2: #fff; --m-panel: #f5f5f5; --m-panel-2: #ededed; --m-bar: #e7e7e7;
    --m-text: #111; --m-text-dim: #333; --m-text-faint: #555;
    --m-border: #cfcfcf; --m-border-strong: #b4b4b4; --m-link: #a83205; --m-accent: #8a5200; --m-code-bg: #f0f0f0;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; color: #111 !important; height: auto !important; overflow: visible !important; }
  .m-header, .m-side, .m-backdrop, .m-footer, .m-section-nav, .m-anchor, .m-meta-md,
  .m-hero, .m-burger, .header, #mainHeader { display: none !important; }
  .m-app { display: block; height: auto; }
  .m-main { display: block; overflow: visible; height: auto; }
  .m-main-inner { max-width: none; padding: 0; }
  .m-chapter-head h1, .m-section > h2, .m-article-head h1 { color: #000; }
  .m-faq details { page-break-inside: avoid; }
  .m-fig, .m-callout, .m-table, .m-field { page-break-inside: avoid; }
}