/* qro-legacy.css — 仅用于给既有（Bootstrap 3）页面套上新的导航与页脚。
   刻意只包含 header/footer/brand/nav 相关规则，不定义 .container/.btn/.table/.panel
   等会与 Bootstrap 冲突的类名。 */

:root {
  --oak-900: #2b1d0e; --oak-800: #4a3319; --oak-700: #6b4f2a;
  --oak-600: #8a6a3c; --oak-500: #a98a55; --oak-400: #c6ac82;
  --oak-300: #dfcdae; --oak-200: #efe4d0; --oak-100: #f7f0e3; --oak-50: #fbf7ef;
  --leaf-700: #23512c; --leaf-600: #2f6b3a; --leaf-500: #3f8a4c;
  --gold-600: #a9781f; --gold-700: #8a5f14;
  --ink-900: #14110c; --ink-800: #2a251d; --ink-700: #4a4234;
  --ink-600: #6b6252; --ink-500: #8b8271; --ink-400: #b0a795;
  --line: #e8e0d0; --line-2: #d8cdb8; --bg-soft: #faf7f1;
  --radius: 10px; --radius-lg: 16px; --radius-xl: 22px;
  --shadow: 0 8px 26px rgba(43, 29, 14, .10);
  --header-h: 64px;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Helvetica Neue", Arial, sans-serif;
  color: var(--ink-800);
}
body a { color: var(--oak-700); }
body a:hover { color: var(--oak-600); }

.qro-header {
  position: relative;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
}
.qro-header .qro-hwrap {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  height: var(--header-h); display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px;
  background: linear-gradient(135deg, var(--oak-700), var(--leaf-600));
  display: flex; align-items: center; justify-content: center;
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-name { font-weight: 800; font-size: 16.5px; color: var(--ink-900); line-height: 1.1; display: block; }
.brand-sub { font-size: 11px; color: var(--ink-500); line-height: 1.2; display: block; }
.qro-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.qro-nav a {
  padding: 7px 12px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--ink-700); white-space: nowrap; text-decoration: none;
}
.qro-nav a:hover { background: var(--oak-50); color: var(--oak-700); text-decoration: none; }
.qro-nav a.active { background: var(--oak-100); color: var(--oak-800); font-weight: 600; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--ink-700); }

.qro-footer { background: var(--ink-900); color: #cfc7b8; padding: 34px 0 18px; margin-top: 30px; }
.qro-footer a { color: #e3dccd; }
.qro-footer a:hover { color: #fff; }
.qro-footer .qro-fwrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.qro-footer .footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px;
  padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.10);
}
.qro-footer .footer-brand .brand-name { color: #fff; }
.qro-footer .footer-col h4 { font-size: 13px; color: #fff; margin: 0 0 10px; font-weight: 700; }
.qro-footer .footer-col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; font-size: 13px;
}
.qro-footer .footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 16px; font-size: 12px; color: #9b9484;
}

@media (max-width: 1000px) { .qro-footer .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .qro-nav { display: none; }
  .qro-nav.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--header-h); left: 0; right: 0; z-index: 900;
    background: #fff; border-bottom: 1px solid var(--line); padding: 10px 24px 16px;
    box-shadow: var(--shadow);
  }
  .nav-toggle { display: block; }
}