/* ═══════════════════════════════════════════
   QQLL Theme — main stylesheet
   Mobile-first, zero external fonts, ≤20KB
   ═══════════════════════════════════════════ */

:root {
  --cream: #faf7f2;
  --white: #fffdfa;
  --paper: #fdf9f4;
  --text: #2c2419;
  --text-secondary: #5e5447;
  --text-muted: #6e6559;
  --border: #e2d9ce;
  --border-light: #ede5d9;
  --accent: #8b572a;
  --accent-soft: #b0783f;
  --accent-bg: #faf3eb;
  --sage: #657a55;
  --sage-bg: #f2f6ee;
  --coral: #c06858;
  --coral-bg: #fdf3f0;
  --blue: #4a7da5;
  --blue-bg: #eff5fa;
  --radius: 10px;
  --radius-sm: 6px;
  --header-h: 64px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  background: var(--cream);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }

/* ── Header ── */
.q-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,253,250,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: center;
}
.q-header-inner {
  max-width: 1040px; width: 100%; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.q-logo { display: flex; align-items: center; text-decoration: none; }
.q-logo-img { height: 36px; width: auto; display: block; }
.q-nav { display: flex; gap: 20px; }
.q-nav a { font-size: 14px; font-weight: 500; color: var(--text-secondary); transition: color .2s; }
.q-nav a:hover, .q-nav a.active { color: var(--text); }
.q-nav a.active { font-weight: 600; }

@media (min-width: 769px) {
  .q-nav { gap: 32px; }
}
@media (max-width: 768px) {
  :root { --header-h: 56px; }
}

/* ── Breadcrumb ── */
.q-breadcrumb-bar { max-width: 1040px; width: 100%; margin: 0 auto; padding: 16px 16px 0; }
.q-breadcrumb {
  list-style: none; display: flex; font-size: 13px; color: var(--text-muted);
  flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.q-breadcrumb::-webkit-scrollbar { display: none; }
.q-breadcrumb li { flex-shrink: 0; }
.q-breadcrumb li + li::before { content: '›'; margin: 0 10px; color: var(--text-muted); }
.q-breadcrumb a { color: var(--text-muted); }
.q-breadcrumb a:hover { color: var(--text); }
nav[aria-label="面包屑导航"] [aria-current="page"] { color: var(--text); font-weight: 500; }

/* ── Main ── */
main { flex: 1; }
.q-page { max-width: 1040px; margin: 0 auto; padding: 0 16px 40px; }
.q-page--wide { max-width: 1040px; }
.q-page--narrow { max-width: 640px; }

/* ── Hero ── */
.q-hero { padding: 40px 0 32px; }
.q-hero-inner { text-align: center; max-width: 640px; margin: 0 auto; }
.q-hero-inner h1 { font-size: 22px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; color: var(--text); }
.q-hero-inner .q-hero-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 20px; }
.q-hero-inner .q-btn { display: inline-flex; padding: 10px 26px; font-size: 14px; }

@media (min-width: 769px) {
  .q-hero { padding: 56px 0 44px; }
  .q-hero-inner h1 { font-size: 28px; }
  .q-hero-inner .q-hero-desc { font-size: 15px; }
}

/* ── Section Title ── */
.q-section-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 20px; padding-left: 12px; border-left: 3px solid var(--accent); line-height: 1.3; }
.q-goods-search { margin-bottom: 16px; }
.q-goods-search input {
  width: 100%; padding: 10px 16px; font-size: 14px; color: var(--text);
  background: var(--white); border: 1px solid var(--border); border-radius: 20px; outline: none; transition: border-color .2s;
}
.q-goods-search input:focus { border-color: var(--accent-soft); }
.q-goods-search input::placeholder { color: var(--text-muted); }

/* ── Features ── */
.q-features { padding: 28px 0; border-top: 1px solid var(--border-light); }
.q-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.q-feat { text-align: center; padding: 16px 12px; }
.q-feat-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.q-feat h3 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.q-feat p { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
@media (min-width: 769px) {
  .q-features { padding: 36px 0; }
  .q-features-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

/* ── Notice ── */
.q-notice { padding: 28px 0; border-top: 1px solid var(--border-light); }
.q-notice-card { background: var(--accent-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
.q-notice-text { font-size: 14px; color: var(--text-secondary); line-height: 1.8; }
.q-notice-text img { max-width: 100%; height: auto; }

/* ── Steps ── */
.q-steps { padding: 28px 0; border-top: 1px solid var(--border-light); }
.q-steps-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: steps; }
.q-steps-list li { display: flex; gap: 14px; padding: 16px; background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius); counter-increment: steps; }
.q-steps-list li::before { content: counter(steps); flex-shrink: 0; width: 32px; height: 32px; background: var(--accent-bg); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.q-steps-list h3 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.q-steps-list p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
@media (min-width: 769px) {
  .q-steps { padding: 36px 0; }
  .q-steps-list { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .q-steps-list li { flex-direction: column; align-items: center; text-align: center; }
  .q-steps-list li::before { width: 40px; height: 40px; font-size: 16px; margin-bottom: 8px; }
}

/* ── FAQ ── */
/* Reviews */
.q-reviews { padding: 28px 0; border-top: 1px solid var(--border-light); }
.q-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.q-review-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.q-review-stars { color: #e8a840; font-size: 13px; letter-spacing: 1px; line-height: 1; }
.q-review-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.75; flex: 1; margin: 0; padding: 0; border: none; }
.q-review-body::before { content: '\201C'; }
.q-review-body::after  { content: '\201D'; }
.q-review-footer { display: flex; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border-light); }
.q-review-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.q-review-meta { font-size: 12px; color: var(--text-muted); }
.q-review-meta strong { color: var(--text); font-weight: 600; }
.q-review-badge { margin-left: auto; font-size: 10.5px; color: var(--accent); background: var(--accent-bg); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
@media (min-width: 640px) { .q-reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .q-reviews-grid { grid-template-columns: repeat(3, 1fr); } }

/* FAQ */
.q-faq { padding: 28px 0; border-top: 1px solid var(--border-light); }
.q-faq-list { }
.q-faq-item { border: 1px solid var(--border-light); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
.q-faq-item summary { padding: 14px 18px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); background: var(--white); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.q-faq-item summary::-webkit-details-marker { display: none; }
.q-faq-item summary::after { content: '+'; font-size: 18px; color: var(--accent); font-weight: 400; }
.q-faq-item[open] summary::after { content: '−'; }
.q-faq-answer { padding: 0 18px 16px; background: var(--white); }
.q-faq-answer p { font-size: 14px; color: var(--text-secondary); line-height: 1.8; }

/* ── Featured Articles (Card Grid) ── */
.q-featured-articles { padding: 28px 0; border-top: 1px solid var(--border-light); }
.q-articles-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.q-articles-header h2 { font-size: 17px; font-weight: 700; color: var(--text); }
.q-articles-header .q-section-title { margin-bottom: 0; }
.q-articles-header .q-more-link { font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none; white-space: nowrap; }
.q-articles-header .q-more-link:hover { color: #925e28; }

.q-article-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.q-acard-new {
  background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.q-acard-new:hover { border-color: var(--accent-soft); }
.q-acard-new:active { background: #fefdfa; }
.q-acard-new-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.q-acard-new-body h3 { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-acard-new-date { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.q-acard-new-body p { font-size: 12px; color: var(--text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: auto; }

@media (min-width: 769px) {
  .q-featured-articles { padding: 36px 0; }
  .q-article-cards { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .q-acard-new:hover { transform: translateY(-2px); }
}

/* ── Contact ── */
.q-contact { padding: 28px 0; border-top: 1px solid var(--border-light); }
.q-contact-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.q-contact-item { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 20px; text-align: center; }
.q-contact-icon { font-size: 24px; display: block; margin-bottom: 8px; }
.q-contact-item h3 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.q-contact-item a, .q-contact-item p { font-size: 13px; color: var(--text-secondary); text-decoration: none; line-height: 1.6; }
.q-contact-item a:hover { color: var(--accent); }
@media (min-width: 769px) {
  .q-contact { padding: 36px 0; }
  .q-contact-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.q-goods-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

.q-gcard {
  background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; display: flex; transition: border-color .2s, transform .2s; position: relative;
}
.q-gcard:active { background: #fefdfa; }
.q-gcard-img {
  width: 96px; flex-shrink: 0; background: var(--paper); display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--border-light);
}
.q-gcard-img img { width: 100%; height: 96px; object-fit: contain; padding: 10px; }
.q-gcard-info { padding: 12px 14px; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.q-gcard-name { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--text); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-gcard-bottom { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; }
.q-gcard-price { font-size: 18px; font-weight: 700; color: var(--accent); }
.q-gcard-stock { font-size: 12px; color: var(--text-muted); }

.q-gcard-badge {
  position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 600;
  padding: 3px 10px; border-radius: 3px;
}
.q-gcard-badge--soldout { color: var(--coral); background: var(--coral-bg); }
.q-gcard-badge--discount { color: var(--sage); background: var(--sage-bg); position: static; display: inline-block; margin-top: 8px; font-size: 11px; }
.q-gcard.is-soldout { opacity: .6; pointer-events: none; }
.q-gcard.is-soldout .q-gcard-price { color: var(--text-muted); }

.q-goods-empty { text-align: center; padding: 32px; color: var(--text-muted); font-size: 14px; }

@media (min-width: 769px) {
  .q-goods-search input { max-width: 320px; }
  .q-goods-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .q-gcard { flex-direction: column; }
  .q-gcard:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
  .q-gcard-img { width: 100%; border-right: none; border-bottom: 1px solid var(--border-light); }
  .q-gcard-img img { height: 140px; }
  .q-gcard-info { padding: 16px 18px 18px; }
}

/* ── Product ( Buy ) ── */
.q-prod { margin-top: 20px; }
.q-prod-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }
.q-prod-body { display: flex; flex-direction: column; }
.q-prod-img {
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  padding: 24px; border-bottom: 1px solid var(--border-light); position: relative; min-height: 180px;
}
.q-prod-img img { max-height: 180px; object-fit: contain; }
.q-prod-img .q-badge {
  position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 3px;
}
.q-badge--auto { color: var(--sage); background: var(--sage-bg); }
.q-badge--manual { color: var(--accent); background: var(--accent-bg); }

.q-prod-detail { padding: 20px; flex: 1; }
.q-prod-detail h1 { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 8px; }
.q-prod-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.q-prod-stock { font-size: 13px; color: var(--text-muted); }
.q-prod-limit { font-size: 11px; font-weight: 600; color: var(--coral); background: var(--coral-bg); padding: 2px 10px; border-radius: 3px; }

.q-prod-wholesale { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.q-prod-wholesale span {
  font-size: 11px; font-weight: 500; color: var(--accent); background: var(--accent-bg); padding: 4px 12px; border-radius: 3px;
}

.q-prod-pricebox {
  background: var(--accent-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 20px; display: flex; align-items: baseline; gap: 8px;
}
.q-prod-pricebox .q-label { font-size: 14px; color: var(--text-secondary); }
.q-prod-pricebox .q-value { font-size: 24px; font-weight: 700; color: var(--accent); }

@media (min-width: 769px) {
  .q-prod-body { flex-direction: row; }
  .q-prod-img { width: 340px; flex-shrink: 0; border-bottom: none; border-right: 1px solid var(--border-light); }
  .q-prod-detail { padding: 28px 32px 32px; }
  .q-prod-detail h1 { font-size: 22px; }
}

/* ── Forms ── */
.q-form {}
.q-form-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.q-form-group { flex: 1; }
.q-form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.q-form-group label .q-optional { font-weight: 400; color: var(--text-muted); }
.q-form-group input[type="text"],
.q-form-group input[type="email"],
.q-form-group input[type="number"],
.q-form-group input[type="password"] {
  width: 100%; padding: 9px 14px; font-size: 14px; color: var(--text);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm);
  outline: none; transition: border-color .2s;
}
.q-form-group input:focus { border-color: var(--accent-soft); }
.q-form-group input::placeholder { color: var(--text-muted); }

.q-captcha-row { display: flex; gap: 10px; }
.q-captcha-row input { flex: 1; }
.q-captcha-img {
  flex-shrink: 0; height: 41px; padding: 0 14px; font-size: 13px; color: var(--text-muted);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  display: flex; align-items: center;
}

@media (min-width: 769px) {
  .q-form-row { flex-direction: row; gap: 16px; }
  .q-form-row .q-form-group--small { max-width: 140px; flex: 0 0 auto; }
}

/* ── Payment Methods ── */
.q-paylist { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.q-paylist .q-pay-opt {
  padding: 8px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer;
  background: var(--white); transition: all .18s; user-select: none;
}
.q-paylist .q-pay-opt:hover { border-color: var(--accent-soft); }
.q-paylist .q-pay-opt.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

.q-preselect { margin-bottom: 12px; }
.q-preselect label.q-preselect-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; display: block; }
.q-preselect .q-carmi-opts { display: flex; flex-direction: column; gap: 6px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.q-preselect .q-carmi-opts label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.q-preselect .q-carmi-opts input[type="radio"] { margin-top: 3px; flex-shrink: 0; }

/* ── Buttons ── */
.q-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 24px; font-size: 15px; font-weight: 600; border: none; border-radius: 8px;
  cursor: pointer; transition: background .2s; text-decoration: none;
}
.q-btn--primary { color: #fff; background: var(--accent); }
.q-btn--primary:hover { background: #7a4a22; }
.q-btn--primary:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; }
.q-btn--block { width: 100%; }

/* Row for submit + secondary action */
.q-submit-row { display: flex; gap: 10px; }
.q-submit-row .q-btn--primary { flex: 3; }
.q-submit-row .q-btn--outline { flex: 1; }
@media (max-width: 479px) { .q-submit-row { flex-direction: column; } }
.q-btn--outline { color: var(--accent); background: var(--white); border: 1px solid var(--accent); }
.q-btn--outline:hover { background: var(--accent-bg); }
.q-btn--sm { padding: 6px 14px; font-size: 12px; }

/* ── Charge input ── */
.q-charge-inputs {}
.q-charge-inputs .q-form-group { margin-bottom: 12px; }

/* ── Modal (buy prompt) ── */
.q-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 200; align-items: center; justify-content: center; padding: 20px;
}
.q-modal-overlay.open { display: flex; }
.q-modal {
  background: var(--white); border-radius: var(--radius); max-width: 440px; width: 100%; padding: 28px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
}
.q-modal h3 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.q-modal p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; }
.q-modal .q-modal-actions { text-align: right; }

/* ── Bill Page ── */
.q-bill { margin-top: 20px; }
.q-bill-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }
.q-bill-header { padding: 24px; text-align: center; border-bottom: 1px solid var(--border-light); }
.q-bill-header .q-bill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: var(--accent-bg); border-radius: 50%; font-size: 22px; margin-bottom: 10px;
}
.q-bill-header h2 { font-size: 18px; font-weight: 700; }
.q-bill-body { padding: 20px 24px; }
.q-bill-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; }
.q-bill-row:last-child { border-bottom: none; }
.q-bill-label { color: var(--text-secondary); }
.q-bill-value { color: var(--text); font-weight: 500; }
.q-bill-total { background: var(--accent-bg); margin: 8px -24px 0; padding: 14px 24px; border-radius: var(--radius-sm); }
.q-bill-total .q-bill-value { font-size: 20px; font-weight: 700; }
.q-bill-footer { padding: 16px 24px 24px; text-align: center; }
.q-bill-expire { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

/* ── Order Detail ── */
.q-odetail { margin-top: 20px; }
.q-odetail-status {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--radius); margin-bottom: 16px;
}
.q-odetail-status--success { background: var(--sage-bg); border: 1px solid #d6e4cc; }
.q-odetail-status--wait { background: #fef7ed; border: 1px solid #f0ddbe; }
.q-odetail-status--fail { background: var(--coral-bg); border: 1px solid #f0cec8; }
.q-odetail-status .q-status-icon { font-size: 24px; flex-shrink: 0; }
.q-odetail-status h3 { font-size: 15px; font-weight: 700; color: var(--text); }
.q-odetail-status p { font-size: 13px; color: var(--text-secondary); }

.q-odetail-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }
.q-odetail-section { padding: 20px; }
.q-odetail-section + .q-odetail-section { border-top: 1px solid var(--border-light); }
.q-odetail-section h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.q-odetail-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 769px) { .q-odetail-grid { grid-template-columns: 1fr 1fr; gap: 12px 32px; } }
.q-odetail-item .q-oil { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.q-odetail-item .q-oiv { font-size: 14px; color: var(--text); font-weight: 500; }

.q-carmi-box { background: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.q-carmi-content { font-family: 'SF Mono', 'Consolas', 'Menlo', 'Courier New', monospace; font-size: 13px; color: var(--text); white-space: pre-wrap; line-height: 1.7; margin-bottom: 10px; word-break: break-all; }

/* ── Order Search ── */
.q-osearch { margin-top: 20px; }
.q-osearch-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }
.q-osearch-header { padding: 20px 24px 0; text-align: center; }
.q-osearch-header h2 { font-size: 18px; font-weight: 700; color: var(--text); }
.q-osearch-header p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }


/* ── QR Pay ── */
.q-qrpay { margin-top: 32px; display: flex; justify-content: center; }
.q-qrpay-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; text-align: center; max-width: 400px; width: 100%; }
.q-qrpay-header { padding: 24px 24px 16px; }
.q-qrpay-header h2 { font-size: 18px; font-weight: 700; }
.q-qrpay-meta { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.q-qrpay-body { padding: 0 24px 20px; }
.q-qrpay-img { display: flex; justify-content: center; margin-bottom: 12px; }
.q-qrpay-img img, .q-qrpay-img svg { width: 200px; height: 200px; border-radius: 8px; border: 1px solid var(--border); }
.q-qrpay-price { font-size: 28px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.q-qrpay-expire { font-size: 12px; color: var(--coral); }
.q-qrpay-footer { padding: 12px 24px 24px; border-top: 1px solid var(--border-light); font-size: 13px; color: var(--text-secondary); }
.q-qrpay-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: q-spin .8s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes q-spin { to { transform: rotate(360deg); } }

/* ── Article List ── */
.q-alist { margin-top: 24px; }
.q-alist-header { text-align: center; margin-bottom: 20px; }
.q-alist-header h1 { font-size: 20px; font-weight: 700; }
.q-alist-header p { font-size: 14px; color: var(--text-muted); margin-top: 4px; }

.q-alist-items { border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }
.q-acard {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--white);
  border-bottom: 1px solid var(--border-light); transition: background .2s;
}
.q-acard:last-child { border-bottom: none; }
.q-acard:hover { background: #fffdf8; }
.q-acard h2 { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.5; }
.q-acard p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-acard-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.q-acard-cat { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 3px; color: var(--accent); background: var(--accent-bg); }
.q-acard-cat.tutorial { color: var(--sage); background: var(--sage-bg); }

/* ── Article Detail ── */
.q-article-wrap { margin-top: 20px; }

.q-toc-title {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0; border: none; background: none;
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 10px; letter-spacing: 1px; cursor: pointer;
}
.q-toc-title::after { content: '▾'; font-size: 11px; color: var(--text-muted); }
.q-toc.open .q-toc-title::after { content: '▴'; }

.q-toc {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px;
  margin-bottom: 14px;
}
.q-toc.open { padding: 16px; }
.q-toc:not(.open) ol { display: none; }
.q-toc ol { list-style: none; }
.q-toc li { margin-bottom: 2px; }
.q-toc a { display: block; padding: 5px 12px; font-size: 13px; color: var(--text-secondary); border-left: 2px solid transparent; border-radius: 0 3px 3px 0; transition: all .18s; }
.q-toc a:hover { color: var(--text); background: var(--accent-bg); }
.q-toc a.active { color: var(--accent); font-weight: 600; border-left-color: var(--accent); background: var(--accent-bg); }
.q-toc .q-toc-l2 a { padding-left: 24px; font-size: 12px; }

.q-article-main { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 24px 20px; }
.q-article-header { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border-light); }
.q-article-header h1 { font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
.q-article-header .q-article-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-muted); }

.q-content {}
.q-content h2 { font-size: 18px; font-weight: 700; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); scroll-margin-top: 80px; }
.q-content h2:first-child { margin-top: 0; }
.q-content h3 { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin: 20px 0 8px; scroll-margin-top: 80px; }
.q-content p { font-size: 14px; color: var(--text-secondary); line-height: 1.85; margin-bottom: 12px; }
.q-content ul, .q-content ol { margin: 8px 0 14px 20px; font-size: 14px; color: var(--text-secondary); line-height: 1.85; }
.q-content li { margin-bottom: 6px; }
.q-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 10px 0; }
.q-content code { font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; font-size: 13px; background: var(--paper); padding: 2px 6px; border-radius: 3px; }
.q-content pre { background: var(--paper); padding: 14px 16px; border-radius: var(--radius-sm); overflow-x: auto; margin: 12px 0; font-size: 13px; line-height: 1.6; }
.q-content pre code { padding: 0; background: none; }
.q-content blockquote { border-left: 3px solid var(--accent-soft); padding: 8px 16px; margin: 12px 0; color: var(--text-secondary); background: var(--accent-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.q-content table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.q-content th, .q-content td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.q-content th { background: var(--paper); font-weight: 600; }
.q-content a { color: var(--accent); text-decoration: underline; }

.q-step-list { list-style: none; margin-left: 0 !important; }
.q-step-list li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.q-step-list li:last-child { border-bottom: none; }
.q-step-num { flex-shrink: 0; width: 28px; height: 28px; background: var(--accent-bg); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.q-step-text strong { display: block; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.q-step-text p { font-size: 13px; color: var(--text-secondary); margin: 0; }
.q-tip-box { background: var(--accent-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin: 16px 0; font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.q-tip-box strong { color: var(--accent); }

@media (min-width: 769px) {
  .q-article-main { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .q-article-header { flex: 0 0 100%; }
  .q-toc {
    display: block !important; width: 200px; flex-shrink: 0;
    position: sticky; top: 92px;
    border: none; background: transparent; padding: 0;
    margin-right: 32px;
  }
  .q-toc ol { display: block !important; }
  .q-toc-title { cursor: default; pointer-events: none; }
  .q-toc-title::after { display: none; }
  .q-toc a { border-radius: 0 4px 4px 0; }
  .q-content { flex: 1; }
  .q-article-main { padding: 32px 40px; }
  .q-article-header h1 { font-size: 24px; }
}
.q-content:after { content: ''; display: block; clear: both; }

/* ── Error Page ── */
.q-error { display: flex; align-items: center; justify-content: center; padding: 48px 16px; min-height: 50vh; }
.q-error-card {
  background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius);
  max-width: 420px; width: 100%; text-align: center; padding: 40px 28px;
}
.q-error-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--coral-bg); border-radius: 50%; font-size: 24px; margin-bottom: 16px; }
.q-error-card h2 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.q-error-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; }

/* ── Footer ── */
.q-footer { padding: 24px 16px; border-top: 1px solid var(--border-light); text-align: center; }
.q-footer-inner { max-width: 1040px; margin: 0 auto; }
.q-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 12px; }
.q-footer-links a { font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: color .2s; }
.q-footer-links a:hover { color: var(--text); }
.q-footer-copy { font-size: 12px; color: var(--text-muted); }
.q-footer-custom { margin-top: 8px; font-size: 12px; color: var(--text-muted); }

@media (min-width: 769px) {
  .q-footer { padding: 24px 0; }
  .q-footer-inner { display: flex; justify-content: space-between; align-items: center; }
  .q-footer-links { margin-bottom: 0; }
}

/* ── Pagination ── */
.q-pager { display: flex; justify-content: center; gap: 4px; margin-top: 28px; }
.q-pager a, .q-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; font-size: 14px; border-radius: var(--radius-sm); transition: all .18s; }
.q-pager a { color: var(--text-secondary); }
.q-pager a:hover { background: var(--accent-bg); color: var(--text); }
.q-pager .active { background: var(--accent); color: #fff; font-weight: 600; }
.q-pager .disabled { color: var(--border); pointer-events: none; }

/* ── Pagination ── */
.q-pager { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 32px 0 16px; flex-wrap: wrap; }
.q-pager-item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px; font-size: 13px; font-weight: 500;
  color: var(--text-secondary); background: var(--white);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  text-decoration: none; transition: all .15s;
}
.q-pager-item:hover { color: var(--accent); border-color: var(--accent); }
.q-pager-item.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.q-pager-disabled { opacity: .4; pointer-events: none; }

.q-alist-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 14px; }

/* ── Misc ── */
.q-text-sm { font-size: 13px; }
.q-mt-1 { margin-top: 8px; }
.q-mt-2 { margin-top: 16px; }
.q-mb-1 { margin-bottom: 8px; }
.q-mb-2 { margin-bottom: 16px; }
.q-text-center { text-align: center; }
.q-hidden { display: none; }

/* Dark mode support (optional, very light) */
@media (prefers-color-scheme: dark) {
  /* QQLL prioritizes light, warm aesthetic. Dark mode kept minimal — just prevent eye strain. */
}