/* Quding theme foundation — scoped, framework independent, light theme.
   Derived from the existing website on 2026-10-16.
   Apply .qd-theme to a page or section. JS interactions are not included. */
.qd-theme {
  --qd-paper: #f5f6f7;
  --qd-surface: #fff;
  --qd-ink: #20382f;
  --qd-brand: #216351;
  --qd-deep: #174b3b;
  --qd-muted: #63716b;
  --qd-line: #e2e7e4;
  --qd-soft: #e8efeb;
  --qd-gold: #94703a;
  --qd-glass: #f8fbf9ed;
  --qd-glass-edge: #ffffffdc;
  --qd-glass-shadow: 0 8px 28px #183e2e14, 0 1px 4px #183e2e0a,
    inset 0 1px 1px #fff, inset 0 -1px 1px #788f7b20;
  --qd-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --qd-font-serif: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  --qd-space-1: 4px;
  --qd-space-2: 8px;
  --qd-space-3: 12px;
  --qd-space-4: 16px;
  --qd-space-5: 20px;
  --qd-space-6: 24px;
  --qd-space-8: 32px;
  --qd-radius-sm: 12px;
  --qd-radius-control: 14px;
  --qd-radius-input: 18px;
  --qd-radius-card: 20px;
  --qd-radius-panel: 24px;
  --qd-radius-dialog: 28px;
  --qd-radius-pill: 999px;
  --qd-ease: cubic-bezier(.22, .8, .25, 1);
  color-scheme: light;
  color: var(--qd-ink);
  background: var(--qd-paper);
  font: 14px/1.6 var(--qd-font-sans);
  -webkit-font-smoothing: antialiased;
}
.qd-theme:lang(zh-TW) {
  --qd-font-serif: "Songti TC", "Songti SC", "PMingLiU", "MingLiU", "SimSun", serif;
}
.qd-theme :is(button, input, select, textarea) { font: inherit; }
.qd-theme .qd-container {
  box-sizing: border-box;
  width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 32px;
}
.qd-theme .qd-heading { margin: 0; font-family: var(--qd-font-sans); font-weight: 650; line-height: 1.35; }
.qd-theme .qd-card-title { font-family: var(--qd-font-sans); font-weight: 650; line-height: 1.45; }
.qd-theme:lang(zh) .qd-heading { font-family: var(--qd-font-serif); font-weight: 500; letter-spacing: .035em; }
.qd-theme:lang(zh) .qd-card-title { font-family: var(--qd-font-serif); font-weight: 600; letter-spacing: .015em; }
.qd-theme .qd-muted { color: var(--qd-muted); }
.qd-theme .qd-panel {
  box-sizing: border-box; padding: 20px;
  border: 1px solid var(--qd-line); border-radius: var(--qd-radius-card);
  background: var(--qd-surface); box-shadow: 0 2px 5px #183e2e03;
}
.qd-theme .qd-glass {
  border: 1px solid var(--qd-glass-edge);
  background: var(--qd-glass); box-shadow: var(--qd-glass-shadow);
}
.qd-theme :is(.qd-button, .qd-button-secondary, .qd-chip) {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 18px; min-height: 44px;
  border: 1px solid transparent; border-radius: var(--qd-radius-pill);
  font-weight: 600; line-height: 1.4; text-decoration: none;
  cursor: pointer; touch-action: manipulation;
  transition: background-color .18s, border-color .18s, box-shadow .22s;
}
.qd-theme .qd-button { background: var(--qd-brand); color: #fff; }
.qd-theme .qd-button-secondary { background: var(--qd-soft); color: var(--qd-deep); }
.qd-theme .qd-chip { min-height: 36px; padding: 7px 12px; background: #fff; color: #5b7262; border-color: #e1e8e2; font-size: 12px; font-weight: 500; }
.qd-theme .qd-chip[aria-pressed="true"] { background: #dfece3; border-color: #bfd4c6; color: #20573d; font-weight: 650; }
.qd-theme .qd-input {
  box-sizing: border-box; min-width: 0; min-height: 52px; padding: 12px 15px;
  border: 1px solid #dce4df; border-radius: var(--qd-radius-input);
  background: #fff; color: var(--qd-ink); font-size: 16px;
}
.qd-theme .qd-input:focus { outline: none; border-color: #77a18e; box-shadow: 0 0 0 3px #21635112; }
.qd-theme .qd-segmented { display: inline-flex; gap: 3px; padding: 4px; border-radius: 14px; background: #e7ece9; }
.qd-theme .qd-segmented > button {
  min-height: 36px; padding: 6px 14px; border: 0; border-radius: 11px;
  background: transparent; color: #5e7364; font: inherit; font-size: 12px; cursor: pointer;
}
.qd-theme .qd-segmented > button[aria-pressed="true"] { background: #fff; color: #1e563e; box-shadow: 0 1px 4px #203e2e12; font-weight: 650; }
.qd-theme .qd-tabbar {
  box-sizing: border-box; position: fixed; z-index: 100; isolation: isolate;
  left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; width: calc(100% - 40px); max-width: 370px; height: 66px;
  padding: 5px; border-radius: 999px;
}
.qd-theme .qd-tabbar::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 5px; bottom: 5px; left: 5px;
  width: calc((100% - 10px) / var(--qd-tab-count, 3)); border-radius: inherit;
  background: linear-gradient(145deg, #ffffffd9, #e4eee7b8);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #91af9833, 0 2px 7px #2048300d;
  transform: translateX(calc(var(--qd-active-index, 0) * 100%)); transition: transform .44s var(--qd-ease);
}
.qd-theme .qd-tabbar > button {
  position: relative; z-index: 1; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: inherit; background: transparent; color: #526d5b;
  font: inherit; font-size: 11px; line-height: 1.4; cursor: pointer;
}
.qd-theme .qd-tabbar > button[aria-current="page"] { color: #164e37; }
.qd-theme .qd-tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.qd-theme .qd-tabbar > button[aria-current="page"] svg { stroke-width: 2; }
.qd-theme .qd-has-tabbar { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
.qd-theme :is(button, a, select):focus-visible { outline: 3px solid #247459; outline-offset: 3px; }
.qd-theme button:disabled { opacity: .58; cursor: default; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qd-theme .qd-glass {
    background: #eff6f1b3;
    backdrop-filter: blur(22px) saturate(170%) brightness(1.04);
    -webkit-backdrop-filter: blur(22px) saturate(170%) brightness(1.04);
  }
}
@media (min-width: 768px) and (max-width: 1023px) { .qd-theme .qd-container { padding-inline: 24px; } }
@media (max-width: 767px) { .qd-theme .qd-container { padding-inline: 20px; } }
@media (max-width: 359px) { .qd-theme .qd-container { padding-inline: 15px; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .qd-theme .qd-glass { background: #f8fbf9; border-color: #b1c5b8; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .qd-theme .qd-tabbar::after { background: #e0ece4; }
}
@media (prefers-reduced-motion: reduce) {
  .qd-theme .qd-tabbar::after,
  .qd-theme :is(.qd-button, .qd-button-secondary, .qd-chip) { transition: none; }
}
@media (forced-colors: active) {
  .qd-theme :is(.qd-panel, .qd-glass, .qd-tabbar, .qd-segmented, .qd-button, .qd-button-secondary, .qd-chip, .qd-input) {
    background: Canvas; color: CanvasText; border: 1px solid CanvasText;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .qd-theme .qd-tabbar::after { display: none; }
  .qd-theme .qd-tabbar > button { color: CanvasText; }
  .qd-theme .qd-tabbar > button[aria-current="page"],
  .qd-theme .qd-segmented > button[aria-pressed="true"],
  .qd-theme .qd-chip[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -3px; background: Canvas; color: Highlight; }
}